電子類網(wǎng)站設(shè)計分析報告

1、 欽 州學(xué)院網(wǎng)頁設(shè)計課程設(shè)計報告音樂類網(wǎng)站設(shè)計報告院 系 物理與材料科學(xué)學(xué)院 專 業(yè) 電子信息工程 學(xué) 生 班 級 2007級1班 姓 名 鄧云漢 劉斌 學(xué) 號0905401107 ？ 指導(dǎo)教師單位 欽州學(xué)院 指導(dǎo)教師姓名 曲 藝 指導(dǎo)教師職稱 講師 2012年12月電子類網(wǎng)站設(shè)計電子信息工程專業(yè)2009級指導(dǎo)教師 曲藝摘要；近年來隨著網(wǎng)絡(luò)信息技術(shù)的廣泛應(yīng)用，互聯(lián)網(wǎng)正逐步改變著人們的生活方式和工作方式。在這一熱潮中，網(wǎng)頁制作技術(shù)得到了專門多人的青睞，而在目前流行的“所見即所得”的網(wǎng)頁制作軟件制作中，Dreamweaver無疑是使用最廣泛、功能最優(yōu)秀的一款，本企業(yè)介紹網(wǎng)站將用該軟件來制作。掌握網(wǎng)

2、頁設(shè)計差不多概念，學(xué)習(xí)dreamweaver軟件并利用它制作企業(yè)介紹類網(wǎng)站，掌握網(wǎng)頁超鏈接技術(shù)的應(yīng)用，了解圖像的處理，包括背景圖案、圖形，學(xué)會利用JavaScript腳本制作滾動展示圖。關(guān)鍵詞：Dreamweaver、超鏈接、Java腳本、企業(yè)介紹設(shè)計目的:掌握Dreamweaver制作網(wǎng)頁的技術(shù)，熟悉制作網(wǎng)頁的差不多步驟。設(shè)計技術(shù)指標(biāo)與要求：利用相關(guān)軟件技術(shù)設(shè)計7個網(wǎng)頁頁面。設(shè)計的網(wǎng)頁音樂可在線試聽，在線下載，還可搜索歌手。目錄前言11 Dreamweaver使用介紹 22 概述 22.1 網(wǎng)頁名稱與制作目的 23 設(shè)計工具 24 網(wǎng)頁設(shè)計 3 4.1 整體構(gòu)思 3 4.2 頁面構(gòu)思 45

3、網(wǎng)頁制作過程遇到的困難 46 網(wǎng)頁設(shè)計感想 57 關(guān)鍵代碼 58 設(shè)計體會 6參考文獻(xiàn)6前言 在那個E時代，科技的飛速進(jìn)展差不多成為社會進(jìn)展的標(biāo)志。計算機(jī)網(wǎng)絡(luò)從為我們所知，到現(xiàn)在才經(jīng)歷的短短幾年時刻，在這幾年中隨著計算機(jī)網(wǎng)絡(luò)的廣泛應(yīng)用，特不是Internet的普及和進(jìn)展，網(wǎng)絡(luò)差不多成為了不可或缺的通信手段。不論是最新的新聞信息、新產(chǎn)品的出臺、最新單曲的公布，只要你想到的，我們都能夠通過網(wǎng)絡(luò)來獲得，現(xiàn)代人差不多離不開網(wǎng)絡(luò)。然而到底是什么為這所有的一切提供平臺的呢？我們又是通過什么來獵取這些消息的呢網(wǎng)頁。現(xiàn)現(xiàn)在，數(shù)以萬計的網(wǎng)站以網(wǎng)頁的方式提供了豐富多彩的信息，內(nèi)容五花八門。在人類社會進(jìn)入信息時代的

4、時候，在計算機(jī)網(wǎng)絡(luò)普及的今天，網(wǎng)頁也扮演著重要的角色。網(wǎng)頁是我們在網(wǎng)絡(luò)上的“發(fā)言人”。我們要將什么樣的信息傳達(dá)給掃瞄者，都得通過網(wǎng)頁，網(wǎng)頁在那個地點起著重要作用。圖1 豐富多彩的網(wǎng)絡(luò)世界1 Dreamweaver使用介紹 超鏈接是整個網(wǎng)頁制作中最爽朗、最有吸引力的一種元素。表格在許多工作中有著廣泛的應(yīng)用，例如分割網(wǎng)頁和制作層特效?？蚣芫W(wǎng)頁是一種專門的HTML網(wǎng)頁，使用框架網(wǎng)頁能夠同時掃瞄幾個不同的Web頁面，使用Web頁面顯示一致的用戶界面和靈活的頁面內(nèi)容。這次網(wǎng)頁制作的要求包括：在線試聽，能夠下載歌曲。制作網(wǎng)頁的動態(tài)效果包括在網(wǎng)頁中使用插件，及創(chuàng)建、布置和治理站點等。我制作的網(wǎng)頁中包含了超鏈

5、接、圖片、框架網(wǎng)頁等網(wǎng)頁元素。其中圖片、圖像采納JPEG、PNG、GIF格式。同時要與數(shù)據(jù)庫（Access）實現(xiàn)動態(tài)的交互。通過這次課程設(shè)計實踐，我們進(jìn)一步了解了以上幾種技術(shù)的使用，我們了解到僅僅使用到一種或者兩種網(wǎng)頁制作技術(shù)，是不可能創(chuàng)作一個優(yōu)秀的Web頁面的，一個美觀而有用的Web頁面往往需要綜合利用各種技術(shù)。2 概述2.1 網(wǎng)頁名稱與制作目的我們的網(wǎng)站名稱為“歡樂音樂網(wǎng)”，要緊是通過自已的經(jīng)計，理解、運用網(wǎng)頁制作的差不多知識，并使之得以融會貫穿，在掌握運用Dreamweaver 制作方面的綜合能力。在制作一個關(guān)于音樂網(wǎng)站時我們上網(wǎng)收集了許多相關(guān)的資料要緊是有關(guān)網(wǎng)站的布局、顏色搭配、欄目、

6、板塊等方面的內(nèi)容，同時也搜集了一些對我有用的資料。本音樂網(wǎng)要緊是是向愛聽音樂的人們提供各種各樣的歌曲，讓人們在緊張的工作之余能夠放松身心。通過此次網(wǎng)站設(shè)計我們鍛煉了自己的動手能力。3 設(shè)計工具 做網(wǎng)頁要緊用的工具便是Dreamweaver、Photoshop、Flash軟件。在這些軟件中我們對Photoshop相對比較熟悉，因為在平常上課是老師帶領(lǐng)我們運用過，因此我們依舊會差不多的操作，然而在運用Dreamweaver、Flash時問題就不請自來了。有專門多不明白如何操作，只有通過多次看書才能夠了解，這也體現(xiàn)了我們身上的不足。4 網(wǎng)頁設(shè)計主頁男歌手女歌手MJ專區(qū)王力宏周杰倫潘瑋柏蔡依林蕭亞軒金

7、莎圖2 網(wǎng)站結(jié)構(gòu)圖4.1 整體構(gòu)思圖3 主頁效果本網(wǎng)站主題為：歡樂音樂網(wǎng)。主頁是一個總目錄的網(wǎng)頁，在制作主頁時，我們時刻考慮著網(wǎng)頁的差不多原則：主題鮮亮，通俗易明白，內(nèi)容統(tǒng)一，差不多上為了主題服務(wù)。掃瞄者只要登錄我們的網(wǎng)站，就能夠感受到音樂的氣息。一個網(wǎng)站強(qiáng)調(diào)的確實是一個整體，只有圍繞一個統(tǒng)一的目標(biāo)所做的設(shè)計才是成功的。4.2 頁面構(gòu)思圖3 音樂氣息濃烈下面介紹一下網(wǎng)站中的主頁制作: “歡樂音樂網(wǎng)”。首先，要做好材料搜集工作，要緊是圖片、各種按鈕以及模板素材和代碼的預(yù)備和整理連貫，頁面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，便于掃瞄；有的網(wǎng)頁有動有靜，色彩呼應(yīng)，搭配協(xié)調(diào)，富有生氣；而且制作

8、過程中不忘：“簡潔有用”， 這是特不重要的，在網(wǎng)絡(luò)這種專門環(huán)境下，一切都在快速的運轉(zhuǎn)，盡量以最高效率的方式將用戶所要想得到的信息傳送給他確實是最好的，因此要去掉所有的冗余的東西。其次，要認(rèn)確實構(gòu)思自己想要達(dá)成的網(wǎng)頁效果和各部分內(nèi)容分布、框架構(gòu)。接著確實是開始正式的網(wǎng)頁制作，在網(wǎng)頁開發(fā)工具Dreamweaver上面進(jìn)行操作：每個子頁都設(shè)有上導(dǎo)航欄便于掃瞄和跳轉(zhuǎn)。主頁制作時，使用的是表格，每一個頁面都用表格為它布局好，然后在插入圖片文字及其他，如此有一定的規(guī)劃性，體現(xiàn)了連貫統(tǒng)一性，不同的內(nèi)容依照各自的特色建立了不同的表格，突出各自的主題，增強(qiáng)了對比性。 5 網(wǎng)頁制作過程遇到的困難（1）網(wǎng)頁的調(diào)試。

9、從網(wǎng)上下載的網(wǎng)頁全差不多上一個網(wǎng)頁對應(yīng)一個文件夾，測試時圖片有經(jīng)常顯示不出來。那個時候耐心就顯得極其的重要了，有時候一兩次的檢查也查不出緣故，你就得通過不斷的百度和看書，不斷的調(diào)試，如此問題才有可能得到解決。 （2）背景圖像會覆蓋背景顏色，表格中若同時設(shè)置了背景色和背景圖像，則背景圖像將覆蓋背景色。一般情況下，在表格中使用背景圖像，特不是在單個單元格內(nèi)使用背景圖像，會導(dǎo)致網(wǎng)頁文件過大，阻礙網(wǎng)頁下載速度，因此在表格中應(yīng)盡量少用背景圖像。而在表格中使用背景色就可不能改變網(wǎng)頁文件的大小。6.網(wǎng)頁設(shè)計感想 網(wǎng)站設(shè)計最重要的訣竅，可能確實是你的網(wǎng)頁要感受良好，主題鮮亮 。我們的音樂類網(wǎng)站確實是明明白白的

10、讓你感受到音樂的氣息，頁面里的圖片差不多上與音樂有關(guān)的，包括按鈕、背景圖。注意不要使背景的顏色沖淡了文字的視覺效果，讓人看起來你的網(wǎng)頁來專門費勁。一般來講，淺色背景下的深色文字比較符合人們的適應(yīng)。大眾化的依舊比較好同意的。背景最好不要用白色的，因為那樣看起來就專門刺眼，特不是在晚上熄燈了之后,會讓掃瞄者感到不舒服。我們的音樂網(wǎng)站有男歌手頁面，女歌手頁面，還有外國的歌手，讓人們在掃瞄時能夠輕松找到自己所喜愛的類型。圖4 頁面截圖7 關(guān)鍵代碼音樂試聽代碼（王力宏-柴米油鹽醬醋茶為例）：音樂下載代碼（王力宏-柴米油鹽醬醋茶為例）下載：8 設(shè)計體會本次課程設(shè)計是我們第一次運用Dreamweaver那個網(wǎng)頁設(shè)計軟件來進(jìn)行網(wǎng)頁制作。在這次的網(wǎng)頁、網(wǎng)站制作過程中經(jīng)歷了專門多的困難，也得到了周圍同學(xué)和老師的關(guān)心。在這次實踐中，我學(xué)會了如何耐心的克服困難，任何情況差不多上需要付出才有可能得到收獲。在老師和同學(xué)的關(guān)心下，我們通過努力完成了我們的網(wǎng)站。在遇到困難時，通過百度，我們查到了我們想要的結(jié)果。通過這次音樂網(wǎng)站設(shè)計實踐，我們感悟最深的是學(xué)會永久保持良好的心態(tài)，遇到困難時第一頭腦要平復(fù)，只有平復(fù)的頭腦才能夠想出解決問題的方法。通過此次實踐，使我明白得了認(rèn)真認(rèn)確實對待每一件情況，學(xué)會了