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

學(xué) 號(hào)201110165109武 漢 科 技 大 學(xué) 城 市 學(xué) 院課 程 設(shè) 計(jì) 報(bào) 告 課程名稱 網(wǎng)頁設(shè)計(jì)課程設(shè)計(jì) 題 目 音樂網(wǎng)站設(shè)計(jì) 學(xué) 部 信息工程學(xué)部 專 業(yè) 信息管理與信息系統(tǒng) 班 級(jí) 1班 姓 名 周蜜 指導(dǎo)教師 周鳳麗 2013年6月22日編號(hào) 035設(shè)計(jì)題目:音樂網(wǎng)站設(shè)計(jì)設(shè)計(jì)主要內(nèi)容:一、開發(fā)平臺(tái)：DREAMWEAVER+FIREWORKS+FLASH二、設(shè)計(jì)要求：1、設(shè)計(jì)內(nèi)容設(shè)計(jì)一個(gè)關(guān)于音樂欣賞和音樂下載的網(wǎng)站，網(wǎng)站瀏覽者可以通過不同的音樂分類查找并欣賞自己喜好的音樂，同時(shí)可以了解最新最流行的歌曲排名。2、網(wǎng)站主要功能模塊（1） 國語歌手：可提供部分歌曲的下載，下同。（2） 日韓歌曲：（3） 歐美歌曲：（4） 影視歌曲：（5） 熱辣舞曲：（6） 古典音樂：首頁index熱辣舞曲影視歌曲國語歌手歐美歌曲分頁文章分頁貓分頁護(hù)理分頁分頁貓分頁日韓歌曲古典音樂三、站點(diǎn)結(jié)構(gòu)導(dǎo)航圖四、站點(diǎn)上交注意事項(xiàng)及考核標(biāo)準(zhǔn)： 1 網(wǎng)頁設(shè)計(jì)作品須嚴(yán)格按照網(wǎng)頁設(shè)計(jì)與制作課程考試要求按時(shí)獨(dú)立完成，嚴(yán)禁無故拖延上交時(shí)間，杜絕請(qǐng)人代做或剽竊他人作品行為。 2 站點(diǎn)文件夾名稱必須采用學(xué)號(hào)+姓名形式（如200610130226zhangjing），網(wǎng)頁中須特別注明版權(quán)及作者的有效聯(lián)系方式等相關(guān)資料，必要時(shí)可創(chuàng)建站點(diǎn)瀏覽說明文檔。 3 網(wǎng)站的評(píng)價(jià)標(biāo)準(zhǔn)及分值分布為：主題和內(nèi)容（30分），導(dǎo)航、結(jié)構(gòu)和鏈接（20分），藝術(shù)性（30分），創(chuàng)造性（20分）。 4 學(xué)生的最終成績由網(wǎng)站和平時(shí)成績兩部分組成，其中網(wǎng)站成績70%，平時(shí)成績30%。目 錄1 網(wǎng)頁設(shè)計(jì)相關(guān)技術(shù)介紹11.1 HTML11.2 CSS11.3 JavaScript22 愛狗家園網(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 主頁面布局43 個(gè)人體會(huì)和感受74 參考文獻(xiàn)和網(wǎng)址85附圖81 網(wǎng)頁設(shè)計(jì)相關(guān)技術(shù)介紹1.1 HTML超文本標(biāo)記語言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標(biāo)記語言。超級(jí)文本標(biāo)記語言（英文縮寫：HTML）是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋，因而可能會(huì)有不同的顯示效果。 1.2 CSSCSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，通常又稱為“風(fēng)格樣式表（Style Sheet）”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。 1.3 JavaScriptJavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語言。同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的Brendan Eich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語言，內(nèi)置支持類。JavaScript是Sun公司的注冊(cè)商標(biāo)。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標(biāo)準(zhǔn)。JavaScript也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分：ECMAScript，文檔對(duì)象模型，字節(jié)順序記號(hào)。 2 音樂網(wǎng)站設(shè)計(jì)規(guī)劃2.1 網(wǎng)站介紹音樂網(wǎng)站是一類休閑放松的網(wǎng)站，隨著社會(huì)的發(fā)展，人們生活工作壓力日益增大，音樂可以放松你的心情，讓你體驗(yàn)不一樣的舒適感。音樂網(wǎng)站提供在線試聽，音樂共享，音樂收藏，音樂交流等功能。音樂網(wǎng)站的歌曲分類有：華語男歌手、華語女歌手、華語組合、歐美男歌手、歐美女歌手、歐美組合、日韓歌曲等。 有的音樂網(wǎng)站還會(huì)提供心情分類，可以依據(jù)你的心情為你推薦合適的歌曲。 2.2 欄目設(shè)計(jì)首頁：網(wǎng)站首頁，分布各種音樂的總覽情況，如歌曲分類、推薦MV等。榜單：提供各種分類下的音樂排名情況。歌手：全世界歌手大全，幫助你快速找到自己喜歡的歌手。分類：各種分類，適合不同的人在不同的時(shí)候收聽，包括歐美歌曲，日韓歌曲，影視歌曲等。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è)也頁面的相互鏈接，更使得整個(gè)網(wǎng)站生動(dòng)活潑，趣味盎然。2、 網(wǎng)站的主題：永不會(huì)過時(shí)的音樂主題。3、 網(wǎng)站的風(fēng)格：網(wǎng)站使用綠色的背景，鮮艷亮眼，在炎炎夏日讓人頓覺清爽，加上“隨身聽”的網(wǎng)站名稱，讓人更感舒緩放松。同時(shí)網(wǎng)站利用文字加圖片的解析，讓人更容易了結(jié)整個(gè)網(wǎng)站的布局。合適的布局和各類動(dòng)聽的音樂，更觀眾的眼球和耳朵，讓人更加愛上這個(gè)網(wǎng)站，不愿離去。4、 功能分析：音樂網(wǎng)站帶有在線聽歌功能加下載功能，讓音樂愛好者可以瀏覽各類歌曲并“隨身攜帶”。同時(shí)還配有返回頂部功能，各個(gè)鏈接均在同一窗口打開，大大節(jié)約瀏覽者時(shí)間，同時(shí)也方便使用。2.3.2 站點(diǎn)地圖圖2-1 站點(diǎn)地圖2.4 主頁面布局1、 主頁的所有樣式如下：圖2-2 主頁面布局圖2-3 主頁樣式布局2、#frame布局設(shè)置將網(wǎng)頁整體化了，其他所有布局均包含在里面。 圖2-4 #frame布局代碼3、 #top布局是網(wǎng)頁的頂部，插入了一張圖片和兩個(gè)flash，是網(wǎng)站的標(biāo)志。 圖2-5 #top布局內(nèi)容4、#top1 是對(duì)導(dǎo)航的設(shè)置，結(jié)構(gòu)簡單大方。圖2-5 導(dǎo)航圖5、#main是主頁的主體內(nèi)容，將各種音樂齊聚一堂。圖2-5 #main內(nèi)容6、#main中包括#mian1、#main2和#main3三部分，其中#main1又包括#main1-top、#main1-middle、#main1-bottom三部分，而且#main1-bottom還包括#main1-bottom-1和#main1-bottom-2兩部分。7、#bottom 是主頁面的底部內(nèi)容。圖2-5 #bottom內(nèi)容3 個(gè)人體會(huì)和感受在開始學(xué)習(xí)網(wǎng)頁設(shè)計(jì)這門課之前心里就無比期待，作為一名信工學(xué)部學(xué)生，再加上自己本身對(duì)計(jì)算機(jī)的熱愛，對(duì)這門課有著濃厚的興趣。在經(jīng)過一學(xué)期的學(xué)習(xí)之后，才發(fā)現(xiàn)原來制作一個(gè)網(wǎng)頁是如此的復(fù)雜，如此的需要耐心和時(shí)間。學(xué)習(xí)之后不僅比較全面的了結(jié)了網(wǎng)頁制作也設(shè)計(jì)基本原則，而且還可以自己動(dòng)手做網(wǎng)頁了，這對(duì)我來說是最值得高興的事，因?yàn)榭赡軙?huì)對(duì)我以后的工作有用。這次實(shí)訓(xùn)原本我的題目是動(dòng)物園網(wǎng)站制作，后來因?yàn)樵趫D書館沒找到相關(guān)書籍，所以換了一個(gè)音樂網(wǎng)站，做了之后才發(fā)現(xiàn)原來音樂網(wǎng)站的制作更麻煩。其實(shí)音樂網(wǎng)站的制作也沒那么復(fù)雜，只是我是對(duì)著百度音樂做的，而且做的相對(duì)來說比較全面，所以花了大量時(shí)間和心血，其中的每個(gè)字都是自己一個(gè)個(gè)打上去的，網(wǎng)頁里面的分界線也是自己在photoshop里面做好然后插圖插進(jìn)去的。因?yàn)樽直容^多，所以表格做的也很多，而且有些效果因?yàn)闆]學(xué)過javascript，所以做不出來，我就在flash里面最好插進(jìn)去的，花了很多時(shí)間，所以才導(dǎo)致于我到這么晚才完成。通過這次實(shí)訓(xùn)，我明白了，做網(wǎng)站不僅僅是追求好，更要有選擇在合適的時(shí)間內(nèi)可以完成的網(wǎng)頁制作，也明白了照搬照抄有時(shí)候并不是那么簡單，或許，自己原創(chuàng)會(huì)更好。雖然實(shí)訓(xùn)完了就不用學(xué)網(wǎng)頁設(shè)計(jì)了，但是出于興趣，我會(huì)好好的自學(xué)它，爭(zhēng)取能夠做出很完美的網(wǎng)頁。4 參考文獻(xiàn)和網(wǎng)址參考書籍：1 孫冬梅著 Dreamweaver CS5 完全學(xué)習(xí)手冊(cè) 北京：電子工業(yè)出版社，20112 Dreamweaver CS3網(wǎng)站建設(shè)與網(wǎng)頁制作案例指導(dǎo) 北京： 電子工業(yè)出版社，2009.參考網(wǎng)站：1Http:/ 模板之家5附圖圖5-1站點(diǎn)首頁截圖圖5-2 榜單界面圖5-3 分類界面圖5-4 歌手界面圖5-5歐美歌曲界面圖5-6日韓歌曲界面圖5-6 DJ舞曲界面圖5-7古風(fēng)歌曲界面圖5-8影視歌曲界面圖5-9歌曲時(shí)間煮雨界面網(wǎng)頁制作課程設(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 文章行文流暢、易于理解，語言通順、文字簡練l 嚴(yán)禁抄襲他人作品，允許但不提倡使用模版l 至少4個(gè)欄目、10個(gè)頁面以上l 有一定的社會(huì)價(jià)值和實(shí)際意義導(dǎo)航、結(jié)構(gòu)和鏈接(20分)l 界面親切友好，網(wǎng)站結(jié)構(gòu)清晰，方便用戶使用l 利用DIV+CSS進(jìn)行合理的排版布局l 每一頁都有明確清晰的導(dǎo)航，能很方便地在各個(gè)頁面之間切換l 沒有無效鏈接，不會(huì)丟失圖片、視頻、動(dòng)畫等網(wǎng)頁元素的顯示藝術(shù)性(30分)l 界面美觀，層次分明、邏輯合理l 使用合適的JavaScript程序，增強(qiáng)網(wǎng)