HTML課程實(shí)訓(xùn)報(bào)告

1、學(xué) 號(hào)2武 漢 科 技 大 學(xué) 城 市 學(xué) 院課 程 設(shè) 計(jì) 報(bào) 告 課程名稱 網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì) 題 目 音樂(lè)網(wǎng)站設(shè)計(jì) 學(xué) 部 信息工程學(xué)部 專 業(yè) 信息管理與信息系統(tǒng) 班 級(jí) 1班 姓 名 周蜜 指導(dǎo)教師 周鳳麗 2013年6月22日編號(hào) 035設(shè)計(jì)題目:音樂(lè)網(wǎng)站設(shè)計(jì)設(shè)計(jì)主要內(nèi)容:一、開(kāi)發(fā)平臺(tái)：DREAMWEAVER+FIREWORKS+FLASH二、設(shè)計(jì)要求：1、設(shè)計(jì)內(nèi)容設(shè)計(jì)一個(gè)關(guān)于音樂(lè)欣賞和音樂(lè)下載的網(wǎng)站，網(wǎng)站瀏覽者可以通過(guò)不同的音樂(lè)分類查找并欣賞自己喜好的音樂(lè)，同時(shí)可以了解最新最流行的歌曲排名。2、網(wǎng)站主要功能模塊（1） 國(guó)語(yǔ)歌手：可提供部分歌曲的下載，下同。（2） 日韓歌曲：（3）

2、歐美歌曲：（4） 影視歌曲：（5） 熱辣舞曲：（6） 古典音樂(lè)：首頁(yè)index熱辣舞曲影視歌曲國(guó)語(yǔ)歌手歐美歌曲分頁(yè)文章分頁(yè)貓分頁(yè)護(hù)理分頁(yè)分頁(yè)貓分頁(yè)日韓歌曲古典音樂(lè)三、站點(diǎn)結(jié)構(gòu)導(dǎo)航圖四、站點(diǎn)上交注意事項(xiàng)及考核標(biāo)準(zhǔn)： 1 網(wǎng)頁(yè)設(shè)計(jì)作品須嚴(yán)格按照網(wǎng)頁(yè)設(shè)計(jì)與制作課程考試要求按時(shí)獨(dú)立完成，嚴(yán)禁無(wú)故拖延上交時(shí)間，杜絕請(qǐng)人代做或剽竊他人作品行為。 2 站點(diǎn)文件夾名稱必須采用學(xué)號(hào)+姓名形式（如2zhangjing），網(wǎng)頁(yè)中須特別注明版權(quán)及作者的有效聯(lián)系方式等相關(guān)資料，必要時(shí)可創(chuàng)建站點(diǎn)瀏覽說(shuō)明文檔。 3 網(wǎng)站的評(píng)價(jià)標(biāo)準(zhǔn)及分值分布為：主題和內(nèi)容（30分），導(dǎo)航、結(jié)構(gòu)和鏈接（20分），藝術(shù)性（30分），創(chuàng)造性（20

3、分）。 4 學(xué)生的最終成績(jī)由網(wǎng)站和平時(shí)成績(jī)兩部分組成，其中網(wǎng)站成績(jī)70%，平時(shí)成績(jī)30%。目 錄1 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)介紹11.1 HTML11.2 CSS11.3 JavaScript22 愛(ài)狗家園網(wǎng)站設(shè)計(jì)規(guī)劃22.1 網(wǎng)站介紹22.2 欄目設(shè)計(jì)22.3 站點(diǎn)分析及站點(diǎn)地圖22.3.1 站點(diǎn)分析22.3.2 站點(diǎn)地圖32.4 主頁(yè)面布局43 個(gè)人體會(huì)和感受74 參考文獻(xiàn)和網(wǎng)址85附圖816 / 19文檔可自由編輯打印1 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)介紹1.1 HTML超文本標(biāo)記語(yǔ)言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言。超級(jí)文本標(biāo)記語(yǔ)言（英文縮

4、寫：HTML）是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書(shū)寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。 1.2 CSSCSS是英語(yǔ)Cascading Style Sheets（層

5、疊樣式表單）的縮寫，它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。 1.3 JavaScriptJavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶端Web開(kāi)發(fā)的腳本語(yǔ)言，常用來(lái)給HTML網(wǎng)頁(yè)添

6、加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的Brendan Eich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類。JavaScript是Sun公司的注冊(cè)商標(biāo)。Ecma國(guó)際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分：ECMAScript，文檔對(duì)象模型，字節(jié)順序記號(hào)。 2 音樂(lè)網(wǎng)站設(shè)計(jì)規(guī)劃2.1 網(wǎng)站介紹音樂(lè)網(wǎng)站是一類休閑放松的網(wǎng)站，隨著社會(huì)的發(fā)展，人們生活工作壓力日益增大，音樂(lè)可以放松你的心情，讓你體驗(yàn)不一樣的舒適感。音樂(lè)網(wǎng)站提供在線試聽(tīng)，音樂(lè)

7、共享，音樂(lè)收藏，音樂(lè)交流等功能。音樂(lè)網(wǎng)站的歌曲分類有：華語(yǔ)男歌手、華語(yǔ)女歌手、華語(yǔ)組合、歐美男歌手、歐美女歌手、歐美組合、日韓歌曲等。 有的音樂(lè)網(wǎng)站還會(huì)提供心情分類，可以依據(jù)你的心情為你推薦合適的歌曲。 2.2 欄目設(shè)計(jì)首頁(yè)：網(wǎng)站首頁(yè)，分布各種音樂(lè)的總覽情況，如歌曲分類、推薦MV等。榜單：提供各種分類下的音樂(lè)排名情況。歌手：全世界歌手大全，幫助你快速找到自己喜歡的歌手。分類：各種分類，適合不同的人在不同的時(shí)候收聽(tīng)，包括歐美歌曲，日韓歌曲，影視歌曲等。2.3 站點(diǎn)分析及站點(diǎn)地圖2.3.1 站點(diǎn)分析1、 網(wǎng)站的設(shè)計(jì)：DIV和表格的完美結(jié)合，使得整個(gè)網(wǎng)站結(jié)構(gòu)清晰明了。多個(gè)也頁(yè)面的相互鏈接，更使得整個(gè)

8、網(wǎng)站生動(dòng)活潑，趣味盎然。2、 網(wǎng)站的主題：永不會(huì)過(guò)時(shí)的音樂(lè)主題。3、 網(wǎng)站的風(fēng)格：網(wǎng)站使用綠色的背景，鮮艷亮眼，在炎炎夏日讓人頓覺(jué)清爽，加上“隨身聽(tīng)”的網(wǎng)站名稱，讓人更感舒緩放松。同時(shí)網(wǎng)站利用文字加圖片的解析，讓人更容易了結(jié)整個(gè)網(wǎng)站的布局。合適的布局和各類動(dòng)聽(tīng)的音樂(lè)，更觀眾的眼球和耳朵，讓人更加愛(ài)上這個(gè)網(wǎng)站，不愿離去。4、 功能分析：音樂(lè)網(wǎng)站帶有在線聽(tīng)歌功能加下載功能，讓音樂(lè)愛(ài)好者可以瀏覽各類歌曲并“隨身攜帶”。同時(shí)還配有返回頂部功能，各個(gè)鏈接均在同一窗口打開(kāi)，大大節(jié)約瀏覽者時(shí)間，同時(shí)也方便使用。2.3.2 站點(diǎn)地圖圖2-1 站點(diǎn)地圖2.4 主頁(yè)面布局1、 主頁(yè)的所有樣式如下：圖2-2 主頁(yè)面

9、布局圖2-3 主頁(yè)樣式布局2、#frame布局設(shè)置將網(wǎng)頁(yè)整體化了，其他所有布局均包含在里面。 圖2-4 #frame布局代碼3、 #top布局是網(wǎng)頁(yè)的頂部，插入了一張圖片和兩個(gè)flash，是網(wǎng)站的標(biāo)志。 圖2-5 #top布局內(nèi)容4、#top1 是對(duì)導(dǎo)航的設(shè)置，結(jié)構(gòu)簡(jiǎn)單大方。圖2-5 導(dǎo)航圖5、#main是主頁(yè)的主體內(nèi)容，將各種音樂(lè)齊聚一堂。圖2-5 #main內(nèi)容6、#main中包括#mian1、#main2和#main3三部分，其中#main1又包括#main1-top、#main1-middle、#main1-bottom三部分，而且#main1-bottom還包括#main1-bott

10、om-1和#main1-bottom-2兩部分。7、#bottom 是主頁(yè)面的底部?jī)?nèi)容。圖2-5 #bottom內(nèi)容3 個(gè)人體會(huì)和感受在開(kāi)始學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)這門課之前心里就無(wú)比期待，作為一名信工學(xué)部學(xué)生，再加上自己本身對(duì)計(jì)算機(jī)的熱愛(ài)，對(duì)這門課有著濃厚的興趣。在經(jīng)過(guò)一學(xué)期的學(xué)習(xí)之后，才發(fā)現(xiàn)原來(lái)制作一個(gè)網(wǎng)頁(yè)是如此的復(fù)雜，如此的需要耐心和時(shí)間。學(xué)習(xí)之后不僅比較全面的了結(jié)了網(wǎng)頁(yè)制作也設(shè)計(jì)基本原則，而且還可以自己動(dòng)手做網(wǎng)頁(yè)了，這對(duì)我來(lái)說(shuō)是最值得高興的事，因?yàn)榭赡軙?huì)對(duì)我以后的工作有用。這次實(shí)訓(xùn)原本我的題目是動(dòng)物園網(wǎng)站制作，后來(lái)因?yàn)樵趫D書(shū)館沒(méi)找到相關(guān)書(shū)籍，所以換了一個(gè)音樂(lè)網(wǎng)站，做了之后才發(fā)現(xiàn)原來(lái)音樂(lè)網(wǎng)站的制作更

11、麻煩。其實(shí)音樂(lè)網(wǎng)站的制作也沒(méi)那么復(fù)雜，只是我是對(duì)著百度音樂(lè)做的，而且做的相對(duì)來(lái)說(shuō)比較全面，所以花了大量時(shí)間和心血，其中的每個(gè)字都是自己一個(gè)個(gè)打上去的，網(wǎng)頁(yè)里面的分界線也是自己在photoshop里面做好然后插圖插進(jìn)去的。因?yàn)樽直容^多，所以表格做的也很多，而且有些效果因?yàn)闆](méi)學(xué)過(guò)javascript，所以做不出來(lái)，我就在flash里面最好插進(jìn)去的，花了很多時(shí)間，所以才導(dǎo)致于我到這么晚才完成。通過(guò)這次實(shí)訓(xùn)，我明白了，做網(wǎng)站不僅僅是追求好，更要有選擇在合適的時(shí)間內(nèi)可以完成的網(wǎng)頁(yè)制作，也明白了照搬照抄有時(shí)候并不是那么簡(jiǎn)單，或許，自己原創(chuàng)會(huì)更好。雖然實(shí)訓(xùn)完了就不用學(xué)網(wǎng)頁(yè)設(shè)計(jì)了，但是出于興趣，我會(huì)好好的自學(xué)

12、它，爭(zhēng)取能夠做出很完美的網(wǎng)頁(yè)。4 參考文獻(xiàn)和網(wǎng)址參考書(shū)籍：1 孫冬梅著 Dreamweaver CS5 完全學(xué)習(xí)手冊(cè) 北京：電子工業(yè)出版社，20112 Dreamweaver CS3網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作案例指導(dǎo) 北京： 電子工業(yè)出版社，2009.參考網(wǎng)站：1 模板之家5附圖圖5-1站點(diǎn)首頁(yè)截圖圖5-2 榜單界面圖5-3 分類界面圖5-4 歌手界面圖5-5歐美歌曲界面圖5-6日韓歌曲界面圖5-6 DJ舞曲界面圖5-7古風(fēng)歌曲界面圖5-8影視歌曲界面圖5-9歌曲時(shí)間煮雨界面網(wǎng)頁(yè)制作課程設(shè)計(jì)評(píng)價(jià)標(biāo)準(zhǔn)評(píng)比指標(biāo)評(píng)比標(biāo)準(zhǔn)分值主題和內(nèi)容(30分)l 內(nèi)容豐富、完整、健康，主題突出，l 用多種表現(xiàn)形式突出重點(diǎn)l 文章行文流暢、易于理解，語(yǔ)言通順、文字簡(jiǎn)練l 嚴(yán)禁抄襲他人作品，允許但不提倡使用模版l 至少4個(gè)欄目、10個(gè)頁(yè)面以上l 有一定的社會(huì)價(jià)值和實(shí)際意義導(dǎo)航、結(jié)構(gòu)和鏈接(20分)l 界面親切友好，網(wǎng)站結(jié)構(gòu)清晰，方便用戶使用l 利用DIV+CSS進(jìn)行合理的排版布局l 每一頁(yè)都有明確清晰的導(dǎo)航，能很方便地在各個(gè)頁(yè)面之間切換l 沒(méi)有無(wú)效鏈接，不會(huì)丟失圖片、視頻、動(dòng)畫(huà)等網(wǎng)頁(yè)元素的顯示藝術(shù)性(30分)l 界面美觀，層次分明、邏輯合理l 使用合適的JavaScript程序，增強(qiáng)網(wǎng)頁(yè)的