HTML課程實訓報告

時間：2023-10-02 00:36:01 | 來源：網(wǎng)站運營

時間：2023-10-02 00:36:01 來源：網(wǎng)站運營

HTML課程實訓報告：設(shè)計題目:音樂網(wǎng)站設(shè)計

設(shè)計主要內(nèi)容:

一、開發(fā)平臺：DREAMWEAVER+FIREWORKS+FLASH

二、設(shè)計要求：

1、設(shè)計內(nèi)容

設(shè)計一個關(guān)于音樂欣賞和音樂下載的網(wǎng)站，網(wǎng)站瀏覽者可以通過不同的音樂分類查找并欣賞自己喜好的音樂，同時可以了解最新最流行的歌曲排名。

2、網(wǎng)站主要功能模塊

1. 國語歌手：可提供部分歌曲的下載，下同。
2. 日韓歌曲：
3. 歐美歌曲：
4. 影視歌曲：
5. 熱辣舞曲：
6. 古典音樂：

三、站點結(jié)構(gòu)導(dǎo)航圖

目 錄

1 網(wǎng)頁設(shè)計相關(guān)技術(shù)介紹 1

1.1 HTML 1

1.2 CSS 1

1.3 JavaScript 2

2 愛狗家園網(wǎng)站設(shè)計規(guī)劃 2

2.1 網(wǎng)站介紹 2

2.2 欄目設(shè)計 2

2.3 站點分析及站點地圖 2

2.3.1 站點分析 2

2.3.2 站點地圖 3

2.4 主頁面布局 4

3 個人體會和感受 7

4 參考文獻和網(wǎng)址 8

5附圖 8

1 網(wǎng)頁設(shè)計相關(guān)技術(shù)介紹

1.1 HTML

超文本標記語言，即HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標記語言。超級文本標記語言（英文縮寫：HTML）是標準通用標記語言下的一個應(yīng)用，也是一種規(guī)范，一種標準，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

1.2 CSS

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風格設(shè)計的。比如，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線，這就是一種風格。通過設(shè)立樣式表，可以統(tǒng)一地控制HTML中各標志的顯示屬性。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。

1.3 JavaScript

JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的Brendan Eich設(shè)計，是一種動態(tài)、弱類型、基于原型的語言，內(nèi)置支持類。JavaScript是Sun公司的注冊商標。Ecma國際以JavaScript為基礎(chǔ)制定了ECMAScript標準。JavaScript也可以用于其他場合，如服務(wù)器端編程。完整的JavaScript實現(xiàn)包含三個部分：ECMAScript，文檔對象模型，字節(jié)順序記號。

2 音樂網(wǎng)站設(shè)計規(guī)劃

2.1 網(wǎng)站介紹

音樂網(wǎng)站是一類休閑放松的網(wǎng)站，隨著社會的發(fā)展，人們生活工作壓力日益增大，音樂可以放松你的心情，讓你體驗不一樣的舒適感。音樂網(wǎng)站提供在線試聽，音樂共享，音樂收藏，音樂交流等功能。音樂網(wǎng)站的歌曲分類有：華語男歌手、華語女歌手、華語組合、歐美男歌手、歐美女歌手、歐美組合、日韓歌曲等。 有的音樂網(wǎng)站還會提供心情分類，可以依據(jù)你的心情為你推薦合適的歌曲。

2.2 欄目設(shè)計

首頁：網(wǎng)站首頁，分布各種音樂的總覽情況，如歌曲分類、推薦MV等。

榜單：提供各種分類下的音樂排名情況。

歌手：全世界歌手大全，幫助你快速找到自己喜歡的歌手。

分類：各種分類，適合不同的人在不同的時候收聽，包括歐美歌曲，日韓歌曲，影視歌曲等。

2.3 站點分析及站點地圖

2.3.1 站點分析

1. 網(wǎng)站的設(shè)計：DIV和表格的完美結(jié)合，使得整個網(wǎng)站結(jié)構(gòu)清晰明了。多個也頁面的相互鏈接，更使得整個網(wǎng)站生動活潑，趣味盎然。
2. 網(wǎng)站的主題：永不會過時的音樂主題。
3. 網(wǎng)站的風格：網(wǎng)站使用綠色的背景，鮮艷亮眼，在炎炎夏日讓人頓覺清爽，加上“隨身聽”的網(wǎng)站名稱，讓人更感舒緩放松。同時網(wǎng)站利用文字加圖片的解析，讓人更容易了結(jié)整個網(wǎng)站的布局。合適的布局和各類動聽的音樂，更觀眾的眼球和耳朵，讓人更加愛上這個網(wǎng)站，不愿離去。
4. 功能分析：音樂網(wǎng)站帶有在線聽歌功能加下載功能，讓音樂愛好者可以瀏覽各類歌曲并“隨身攜帶”。同時還配有返回頂部功能，各個鏈接均在同一窗口打開，大大節(jié)約瀏覽者時間，同時也方便使用。

2.3.2 站點地圖







圖2-1 站點地圖




2.4 主頁面布局

1. 主頁的所有樣式如下：

圖2-2 主頁面布局










圖2-3 主頁樣式布局




2、#frame布局設(shè)置將網(wǎng)頁整體化了，其他所有布局均包含在里面。







圖2-4 #frame布局代碼

1. #top布局是網(wǎng)頁的頂部，插入了一張圖片和兩個flash，是網(wǎng)站的標志。

圖2-5 #top布局內(nèi)容




4、#top1 是對導(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 個人體會和感受

在開始學習網(wǎng)頁設(shè)計這門課之前心里就無比期待，作為一名信工學部學生，再加上自己本身對計算機的熱愛，對這門課有著濃厚的興趣。在經(jīng)過一學期的學習之后，才發(fā)現(xiàn)原來制作一個網(wǎng)頁是如此的復(fù)雜，如此的需要耐心和時間。學習之后不僅比較全面的了結(jié)了網(wǎng)頁制作也設(shè)計基本原則，而且還可以自己動手做網(wǎng)頁了，這對我來說是最值得高興的事，因為可能會對我以后的工作有用。

這次實訓原本我的題目是動物園網(wǎng)站制作，后來因為在圖書館沒找到相關(guān)書籍，所以換了一個音樂網(wǎng)站，做了之后才發(fā)現(xiàn)原來音樂網(wǎng)站的制作更麻煩。其實音樂網(wǎng)站的制作也沒那么復(fù)雜，只是我是對著百度音樂做的，而且做的相對來說比較全面，所以花了大量時間和心血，其中的每個字都是自己一個個打上去的，網(wǎng)頁里面的分界線也是自己在photoshop里面做好然后插圖插進去的。因為字比較多，所以表格做的也很多，而且有些效果因為沒學過javascript，所以做不出來，我就在flash里面最好插進去的，花了很多時間，所以才導(dǎo)致于我到這么晚才完成。通過這次實訓，我明白了，做網(wǎng)站不僅僅是追求好，更要有選擇在合適的時間內(nèi)可以完成的網(wǎng)頁制作，也明白了照搬照抄有時候并不是那么簡單，或許，自己原創(chuàng)會更好。

雖然實訓完了就不用學網(wǎng)頁設(shè)計了，但是出于興趣，我會好好的自學它，爭取能夠做出很完美的網(wǎng)頁。

4 參考文獻和網(wǎng)址

參考書籍：

[1] 孫冬梅著 Dreamweaver CS5 完全學習手冊 杭州：電子工業(yè)出版社，2011．

[2] Dreamweaver CS3網(wǎng)站建設(shè)與網(wǎng)頁制作案例指導(dǎo) 杭州： 電子工業(yè)出版社，2009.

參考網(wǎng)站：

[1]Http://www.cssmoban.com 模板之家

5附圖

圖5-1站點首頁截圖










圖5-2 榜單界面







圖5-3 分類界面







圖5-4 歌手界面







圖5-5歐美歌曲界面







圖5-6日韓歌曲界面







圖5-6 DJ舞曲界面







圖5-7古風歌曲界面







圖5-8影視歌曲界面







圖5-9歌曲時間煮雨界面