文档介绍：华北科技学院计算机学院综合性实验
实验报告
课程名称网页编程
实验学期 2017 至 2017 学年第一学期
学生所在系部计算机学院
年级三专业班级网络B15 班
学生姓名学号 201507024216
任课教师李永飞
实验成绩
计算机学院制
《网页编程》课程综合性实验报告
开课实验室:大软机房 2017年 11 月30 日
实验题目
个人网站综合实验
一、实验目的
通过开设该实验,学生可以把在本课程中所学到的HTML、CSS以及JavaScript技术综合应用于一个内容充实、形式丰富的个人网站,在实验过程中加深对网页编程所涉及的各种开发技术的理解及各种技术结合使用的体会,为后续课程的学****打好基础。
二、设备与环境
PC兼容机、Windows操作系统、文本编辑软件、图片处理软件
三、实验内容
实验内容:自由确定网站内容主题,综合应用HTML、CSS和JavaScript开发实现一个内容充实、形式丰富的个人网站。
实验要求:要求所完成的网站至少包括5个以上网页,必须使用HTML中的至少5种标记,至少使用CSS或JavaScript技术中的一种用于网页效果的实现
在课程结束前要提交综合性实验报告和网站的源代码。
四、实验结果及分析
1 网页设计
网站主题设计思路
经小组讨论分析后,确定了网站主题,决定做一个音乐网站。
音乐网站主要有主页设计,歌单推荐设计,音乐分类设计,音乐榜单设计等方面。
经小组讨论后,选择部分主题进行设计,我主要负责歌单推荐一栏的工作。
各网页内容设计
歌单推荐主要展现给大家的是一个简洁、清晰、主题明确的界面,内容主要有导航条、歌单的名称,歌单歌曲的类型介绍、底部导航条,以及各个歌单类型的配图、来吸引注意力。
除此之外,歌单界面的内容主要有歌单的歌曲,歌单的详细介绍、歌单中的歌曲、歌曲播放和下载,歌曲作者、登录框、相同类型的歌单推荐、对此歌单的评论、顶部导航条、底部导航条等内容。
各网页布局设计
歌单推荐的布局主要分为三部分,除顶部导航条和底部导航条外,主要采用卡片布局形式,卡片中展现的内容是各歌单的名称、歌单的配图、以及歌单的简单介绍等内容,整体呈现各人一种简洁,高效的推荐方式。
歌单的布局设计也是主要分为三大部分,顶部导航条和底部导航条两块,中间为歌曲推荐的歌单部分,歌单部分再细分五小块:
一是歌单的详细介绍,将歌单图,歌单名称,歌单的详细介绍再分成几个小部分进行设计和实现。
二是歌单部分,主要放歌单中的主要歌曲,歌曲作者,歌单的播放和下载,进行排版和简单布局。
三是一个登录功能。
四是相同类型的歌单推荐。
五是一个对于此歌单的评论模块。
整体是三个小框架布局,再细分其中的五个小框架为各小部分。
主要用div布局来实现。
2 网页实现
HTML的应用
歌曲推荐头部文件中注明网页的编码格式,标题,css外部样式表的链接地址
主界面用body标签实现,包含各种文字标签、链接标签、排版布局标签、图片的标签等来实现不同的功能。
在body中,先用div来确定整体的框架大小,因为主界面的缘由,布局采用左右各留白20%,
其次分主要导航栏的设计,由于希望小组风格内容保持一致的原则,顶部和底部导航栏由小组负责主界面的