HTML课程实训报告.docx
- 文档编号:8997468
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:18
- 大小:2.77MB
HTML课程实训报告.docx
《HTML课程实训报告.docx》由会员分享,可在线阅读,更多相关《HTML课程实训报告.docx(18页珍藏版)》请在冰点文库上搜索。
HTML课程实训报告
学号
201110165109
武汉科技大学城市学院
课程设计报告
课程名称网页设计课程设计
题目
音乐网站设计
学部
信息工程学部
专业
信息管理与信息系统
班级
1班
姓名
周蜜
指导教师
周凤丽
2013
年
6
月
22
日
设计题目:
音乐网站设计
设计主要内容:
一、开发平台:
DREAMWEAVER+FIREWORKS+FLASH
二、设计要求:
1、设计内容
设计一个关于音乐欣赏和音乐下载的网站,网站浏览者可以通过不同的音乐分类查找并欣赏自己喜好的音乐,同时可以了解最新最流行的歌曲排名。
2、网站主要功能模块
(1)国语歌手:
可提供部分歌曲的下载,下同。
(2)日韩歌曲:
(3)欧美歌曲:
(4)影视歌曲:
(5)热辣舞曲:
(6)古典音乐:
三、站点结构导航图
四、站点上交注意事项及考核标准:
1网页设计作品须严格按照《网页设计与制作课程考试要求》按时独立完成,严禁无故拖延上交时间,杜绝请人代做或剽窃他人作品行为。
2站点文件夹名称必须采用学号+姓名形式(如************zhangjing),网页中须特别注明版权及作者的有效联系方式等相关资料,必要时可创建站点浏览说明文档。
3网站的评价标准及分值分布为:
主题和内容(30分),导航、结构和链接(20分),艺术性(30分),创造性(20分)。
4学生的最终成绩由网站和平时成绩两部分组成,其中网站成绩70%,平时成绩30%。
1网页设计相关技术介绍
1.1HTML
超文本标记语言,即HTML(HypertextMarkupLanguage),是用于描述网页文档的一种标记语言。
超级文本标记语言(英文缩写:
HTML)是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:
文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
1.2CSS
CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。
比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
通过设立样式表,可以统一地控制HTML中各标志的显示属性。
级联样式表可以使人更能有效地控制网页外观。
使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
1.3JavaScript
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。
它最初由网景公司(Netscape)的BrendanEich设计,是一种动态、弱类型、基于原型的语言,内置支持类。
JavaScript是Sun公司的注册商标。
Ecma国际以JavaScript为基础制定了ECMAScript标准。
JavaScript也可以用于其他场合,如服务器端编程。
完整的JavaScript实现包含三个部分:
ECMAScript,文档对象模型,字节顺序记号。
2音乐网站设计规划
2.1网站介绍
音乐网站是一类休闲放松的网站,随着社会的发展,人们生活工作压力日益增大,音乐可以放松你的心情,让你体验不一样的舒适感。
音乐网站提供在线试听,音乐共享,音乐收藏,音乐交流等功能。
音乐网站的歌曲分类有:
华语男歌手、华语女歌手、华语组合、欧美男歌手、欧美女歌手、欧美组合、日韩歌曲等。
有的音乐网站还会提供心情分类,可以依据你的心情为你推荐合适的歌曲。
2.2栏目设计
首页:
网站首页,分布各种音乐的总览情况,如歌曲分类、推荐MV等。
榜单:
提供各种分类下的音乐排名情况。
歌手:
全世界歌手大全,帮助你快速找到自己喜欢的歌手。
分类:
各种分类,适合不同的人在不同的时候收听,包括欧美歌曲,日韩歌曲,影视歌曲等。
2.3站点分析及站点地图
2.3.1站点分析
1、网站的设计:
DIV和表格的完美结合,使得整个网站结构清晰明了。
多个也页面的相互链接,更使得整个网站生动活泼,趣味盎然。
2、网站的主题:
永不会过时的音乐主题。
3、网站的风格:
网站使用绿色的背景,鲜艳亮眼,在炎炎夏日让人顿觉清爽,加上“随身听”的网站名称,让人更感舒缓放松。
同时网站利用文字加图片的解析,让人更容易了结整个网站的布局。
合适的布局和各类动听的音乐,更观众的眼球和耳朵,让人更加爱上这个网站,不愿离去。
4、功能分析:
音乐网站带有在线听歌功能加下载功能,让音乐爱好者可以浏览各类歌曲并“随身携带”。
同时还配有返回顶部功能,各个链接均在同一窗口打开,大大节约浏览者时间,同时也方便使用。
2.3.2站点地图
图2-1站点地图
2.4主页面布局
1、主页的所有样式如下:
图2-2主页面布局
图2-3主页样式布局
2、#frame布局设置将网页整体化了,其他所有布局均包含在里面。
图2-4#frame布局代码
3、#top布局是网页的顶部,插入了一张图片和两个flash,是网站的标志。
图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个人体会和感受
在开始学习网页设计这门课之前心里就无比期待,作为一名信工学部学生,再加上自己本身对计算机的热爱,对这门课有着浓厚的兴趣。
在经过一学期的学习之后,才发现原来制作一个网页是如此的复杂,如此的需要耐心和时间。
学习之后不仅比较全面的了结了网页制作也设计基本原则,而且还可以自己动手做网页了,这对我来说是最值得高兴的事,因为可能会对我以后的工作有用。
这次实训原本我的题目是动物园网站制作,后来因为在图书馆没找到相关书籍,所以换了一个音乐网站,做了之后才发现原来音乐网站的制作更麻烦。
其实音乐网站的制作也没那么复杂,只是我是对着XX音乐做的,而且做的相对来说比较全面,所以花了大量时间和心血,其中的每个字都是自己一个个打上去的,网页里面的分界线也是自己在photoshop里面做好然后插图插进去的。
因为字比较多,所以表格做的也很多,而且有些效果因为没学过javascript,所以做不出来,我就在flash里面最好插进去的,花了很多时间,所以才导致于我到这么晚才完成。
通过这次实训,我明白了,做网站不仅仅是追求好,更要有选择在合适的时间内可以完成的网页制作,也明白了照搬照抄有时候并不是那么简单,或许,自己原创会更好。
虽然实训完了就不用学网页设计了,但是出于兴趣,我会好好的自学它,争取能够做出很完美的网页。
4参考文献和网址
参考书籍:
[1]孙冬梅著DreamweaverCS5完全学习手册北京:
电子工业出版社,2011.
[2]DreamweaverCS3网站建设与网页制作案例指导北京:
电子工业出版社,2009.
参考网站:
[1]Http:
//模板之家
5附图
图5-1站点首页截图
图5-2榜单界面
图5-3分类界面
图5-4歌手界面
图5-5欧美歌曲界面
图5-6日韩歌曲界面
图5-6DJ舞曲界面
图5-7古风歌曲界面
图5-8影视歌曲界面
图5-9歌曲时间煮雨界面
网页制作课程设计评价标准
评比指标
评比标准
分值
主题和内容
(30分)
●内容丰富、完整、健康,主题突出,
●用多种表现形式突出重点
●文章行文流畅、易于理解,语言通顺、文字简练
●严禁抄袭他人作品,允许但不提倡使用模版
●至少4个栏目、10个页面以上
●有一定的社会价值和实际意义
导航、结构和链接
(20分)
●界面亲切友好,网站结构清晰,方便用户使用
●利用DIV+CSS进行合理的排版布局
●每一页都有明确清晰的导航,能很方便地在各个页面之间切换
●没有无效链接,不会丢失图片、视频、动画等网页元素的显示
艺术性
(30分)
●界面美观,层次分明、逻辑合理
●使用合适的JavaScript程序,增强网页的功能、视觉体验以及用户和Web站点之间的交互
●网页设计新颖、富有创新,具有良好的人机界面和视觉效果,具有较强的吸引力和抗视觉疲劳效果
●页面设计色调和谐,网页上各主题与附加图片、动画的色彩选配方案恰当,彩色柔和、朴素大方
●每个页面上有统一的网站标志,统一的整体色调和风格
创造性
(20分)
●选题和构思有独创性、有特色
●版面和界面设计有新意
●图标、图片、动画的设计有较多的原创成分
总分:
_____
指导老师:
_____
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 课程 报告