HTML课程实训报告

学 号

************

武 汉 科 技 大 学 城 市 学 院

课程名称

题 目学 部专 业班 级姓 名指导教师

课 程 设

计 报 告

网页设计课程设计

音乐网站设计

信息工程学部

信息管理与信息系统

1班

周蜜

周凤丽

2013 年 6 月 22 日

编号 035

音乐网站设计

设计题目:

设计主要内容:

一、开发平台：DREAMWEAVER+FIREWORKS+FLASH

二、设计要求：

1、设计内容

设计一个关于音乐欣赏和音乐下载的网站，网站浏览者可以通过不同的音乐分类查找并欣赏自己喜好的音乐，同时可以了解最新最流行的歌曲排名。

2、网站主要功能模块

（1） 国语歌手：可提供部分歌曲的下载，下同。

（2） 日韩歌曲：

（3） 欧美歌曲：

（4） 影视歌曲：

（5） 热辣舞曲：

（6） 古典音乐：

三、站点结构导航图

首页index

国语歌手

欧美歌曲

日韩歌曲

影视歌曲

热辣舞曲

古典音乐

分页

分页猫

分页

分页护

分页猫

分页文

四、站点上交注意事项及考核标准：

1 网页设计作品须严格按照《网页设计与制作课程考试要求》按时独立完成，严禁无故拖延上交时间，杜绝请人代做或剽窃他人作品行为。

2 站点文件夹名称必须采用学号+姓名形式（如2zhangjing），网页中须特别注明版权及作者的有效联系方式等相关资料，必要时可创建站点浏览说明文档。

3 网站的评价标准及分值分布为：主题和内容（30分），导航、结构和链接（20分），艺术性（30分），创造性（20分）。

4 学生的最终成绩由网站和平时成绩两部分组成，其中网站成绩70%，平时成绩30%。

目 录

1 网页设计相关技术介绍 ......................................... 4

1.1 HTML .................................................... 4

1.2 CSS ..................................................... 4

1.3 JavaScript .............................................. 4

2 爱狗家园网站设计规划 ......................................... 4

2.1 网站介绍 ................................................ 5

2.2 栏目设计 ................................................ 5

2.3 站点分析及站点地图 ...................................... 5

2.3.1 站点分析 ........................................... 5

2.3.2 站点地图 ........................................... 6

2.4 主页面布局 .............................................. 6

3 个人体会和感受 .............................................. 10

4 参考文献和网址 .............................................. 11

5附图 ........................................................ 12

1 网页设计相关技术介绍

1.1 HTML

超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。超级文本标记语言（英文缩写：HTML）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.2 CSS

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

1.3 JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他 4

场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。

2 音乐网站设计规划

2.1 网站介绍

音乐网站是一类休闲放松的网站，随着社会的发展，人们生活工作压力日益增大，音乐可以放松你的心情，让你体验不一样的舒适感。音乐网站提供在线试听，音乐共享，音乐收藏，音乐交流等功能。音乐网站的歌曲分类有：华语男歌手、华语女歌手、华语组合、欧美男歌手、欧美女歌手、欧美组合、日韩歌曲等。 有的音乐网站还会提供心情分类，可以依据你的心情为你推荐合适的歌曲。

2.2 栏目设计

首页：网站首页，分布各种音乐的总览情况，如歌曲分类、推荐MV等。

榜单：提供各种分类下的音乐排名情况。

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

分类：各种分类，适合不同的人在不同的时候收听，包括欧美歌曲，日韩歌曲，影视歌曲等。

2.3 站点分析及站点地图

2.3.1 站点分析

1、网站的设计：DIV和表格的完美结合，使得整个网站结构清晰明了。多个也页面的相互链接，更使得整个网站生动活泼，趣味盎然。

2、网站的主题：永不会过时的音乐主题。

3、网站的风格：网站使用绿色的背景，鲜艳亮眼，在炎炎夏日让人顿觉清爽，加上“随身听”的网站名称，让人更感舒缓放松。同时网站利用文字加图片的解析，让人更容易了结整个网站的布局。合适的布局和各类动听的音乐，更观众的眼球和耳朵，让 5

人更加爱上这个网站，不愿离去。

4、功能分析：音乐网站带有在线听歌功能加下载功能，让音乐爱好者可以浏览各类歌曲并“随身携带”。同时还配有返回顶部功能，各个链接均在同一窗口打开，大大节约浏览者时间，同时也方便使用。

2.3.2 站点地图

图2-1 站点地图

2.4 主页面布局

1、主页的所有样式如下：

6

图2-2 主页面布局

7

图2-3 主页样式布局

2、#frame布局设置将网页整体化了，其他所有布局均包含在里面。

图2-4 #frame布局代码

3、#top布局是网页的顶部，插入了一张图片和两个flash，是网站的标志。

图2-5 #top布局内容

4、#top1 是对导航的设置，结构简单大方。

图2-5 导航图

8

5、#main是主页的主体内容，将各种音乐齐聚一堂。

9

图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 个人体会和感受

在开始学习网页设计这门课之前心里就无比期待，作为一名信工学部学生，再加上 10

自己本身对计算机的热爱，对这门课有着浓厚的兴趣。在经过一学期的学习之后，才发现原来制作一个网页是如此的复杂，如此的需要耐心和时间。学习之后不仅比较全面的了结了网页制作也设计基本原则，而且还可以自己动手做网页了，这对我来说是最值得高兴的事，因为可能会对我以后的工作有用。

这次实训原本我的题目是动物园网站制作，后来因为在图书馆没找到相关书籍，所以换了一个音乐网站，做了之后才发现原来音乐网站的制作更麻烦。其实音乐网站的制作也没那么复杂，只是我是对着百度音乐做的，而且做的相对来说比较全面，所以花了大量时间和心血，其中的每个字都是自己一个个打上去的，网页里面的分界线也是自己在photoshop里面做好然后插图插进去的。因为字比较多，所以表格做的也很多，而且有些效果因为没学过javascript，所以做不出来，我就在flash里面最好插进去的，花了很多时间，所以才导致于我到这么晚才完成。通过这次实训，我明白了，做网站不仅仅是追求好，更要有选择在合适的时间内可以完成的网页制作，也明白了照搬照抄有时候并不是那么简单，或许，自己原创会更好。

虽然实训完了就不用学网页设计了，但是出于兴趣，我会好好的自学它，争取能够做出很完美的网页。

4 参考文献和网址

参考书籍：

[1] 孙冬梅著 Dreamweaver CS5 完全学习手册 北京：电子工业出版社，2011．

[2] Dreamweaver CS3网站建设与网页制作案例指导 北京： 电子工业出版社，2009.

参考网站：

[1]Http:// 模板之家

11

5附图

图5-1站点首页截图

图5-2 榜单界面

12

图5-3 分类界面

图5-4 歌手界面

13

图5-5欧美歌曲界面

图5-6日韩歌曲界面

14

图5-6 DJ舞曲界面

15

图5-7古风歌曲界面

16

图5-8影视歌曲界面

17

图5-9歌曲时间煮雨界面

18

网页制作课程设计评价标准

评比指标





评比标准

内容丰富、完整、健康，主题突出，

用多种表现形式突出重点

文章行文流畅、易于理解，语言通顺、文字简练

严禁抄袭他人作品，允许但不提倡使用模版

分值

主题和内容

(30分)





 至少4个栏目、10个页面以上



有一定的社会价值和实际意义

 界面亲切友好，网站结构清晰，方便用户使用

 利用DIV+CSS进行合理的排版布局

导航、结构和链接

(20分)

 每一页都有明确清晰的导航，能很方便地在各个页面之间切换



没有无效链接，不会丢失图片、视频、动画等网页元素的显示

 界面美观，层次分明、逻辑合理

 使用合适的JavaScript程序，增强网页的功能、视觉体验以及用户和Web站点之间的交互

艺术性

(30分)

 网页设计新颖、富有创新，具有良好的人机界面和视觉效果，具有较强的吸引力和抗视觉疲劳效果

 页面设计色调和谐，网页上各主题与附加图片、动画的色彩选配方案恰当，彩色柔和、朴素大方



每个页面上有统一的网站标志，统一的整体色调和风格

创造性

(20分)

 选题和构思有独创性、有特色

 版面和界面设计有新意

 图标、图片、动画的设计有较多的原创成分

总分：＿＿＿＿＿

指导老师：＿＿＿＿＿

19