HTML課程實訓報告.doc

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