网页编程综合实验报告

《网页编程综合实验报告》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、华北科技学院计算机学院综合性实验实验报告课程名称网页编程实验学期2017至2017学年第一学期学生所在系部计算机学院年级三专业班级网络B15班学生姓名学号201507024216任课教师李永飞实验成绩计算机学院制《网页编程》课程综合性实验报告开课实验室：大软机房2017年11月30曰实验题目个人网站综合实验一、实验目的通过开设该实验，学生可以把在本课程屮所学到的HTML,CSS以及JavaScript技术综合应用于一个IA）容充实、形式丰富的个人网站，在实验过程中加深对M页编程所涉及的各种开发技术的理解及各种技术结合使用的体会，为后续课程的学

2、习打好基础。二、设备与环境PC兼容机、Windows操作系统、文本编辑软件、图片处理软件三、实验内容实验内容：自由确定网站闪容主题，综合应用HTML、CSS和JavaScript开发实现一个內容充实、形式丰富的个人网站。实验要求：要求所完成的网站至少包括5个以上M页，必须使用HTML中的至少5种标记，至少使用CSS或JavaScript技术屮的一种用于网页效果的实现在课程结束前要提交综合性实验报告和网站的源代码。四、实验结果及分析1网页设计1.1网站主题设计思路经小组讨论分析后，确定了网站主题，决定做一个音乐网站。音乐网站主要有主页设计，歌单

3、推荐设计，音乐分类设计，音乐榜单设计等方谢。经小组讨论后，选择部分主题进行设计，我主要负贵歌单推荐一栏的工作。1.2各网页闪容设计歌单推荐主要展现给大家的是一个简洁、清晰、主题明确的界囬，内容主要有导航条、歌单的名称，歌单歌曲的类型介绍、底部导航条，以及各个歌单类型的配图、来吸引注意力。除此之外，歌单界而的内容主要有歌单的歌曲，歌单的详细介绍、歌单屮的歌曲、歌曲播放和下载，歌曲作者、登录框、相同类型的歌单推荐、对此歌单的评论、顶部导航条、底部导航条等内容。1.3各网页布局设计歌单推荐的布局主要分为三部分，除顶部导航条和底部导航条外，主要采用卡

4、片布局形式，卡片屮展现的内容是各歌单的名称、歌单的配图、以及歌单的简单介绍等lAl容，整体呈现各人一种简洁，高效的推荐方式。歌单的布局设计也是主要分为三人部分，顶部导航条和底部导航条两块，中间为歌曲推荐的歌单部分，歌单部分再细分五小块：一是歌单的详细介绍，将歌单图，歌单名称，歌单的详细介绍再分成几个小部分进行设计和实现。二是歌单部分，主要放歌单中的主要歌曲，歌曲作者，歌单的播放和下载，进行排版和简单布局。三是一个登录功能。四是相同类沏的歌单推荐。五是一个对于此歌单的评论模块。整体是三个小框架布局，再细分其中的五个小框架为各小部分。主要用div

5、布局来实现。2网页实现2.1HTML的应用歌曲推荐头部文件屮注明网页的编码格式，标题，CSS外部样式表的链接地址主界面用body标签实现，包含各种文字标签、链接标签、排版布局标签、图片的标签等来实现不同的功能。在body中，先用div來确定整体的框架大小，因为主界面的缘巾，布局采用左右各留白20%,其次分主要导航栏的设计，由于希望小纟II风格内容保持一致的原则，顶部和底部导航栏由小组负责主界Ifif的人员进行设计，后期进行套用，因此不再对顶部导航栏和底部导航栏进行设计，因此就用一个div为导航栏留下空位。卡片的效果实现是这个页而的主要难题，先

6、采用div定位卡片的位貫、大小以及基本框架，其次采用dl标签包含dd标签和dt标签来实现卡片中图片和文字的布局效果，用a标签实现超链接到具体歌单的功能，img标签实现图R展示效果，h3标签來确定歌单名称的文字大小，p标签实现歌单的具体介绍功能。之后的卡片也是采用和之前的卡片相同样式的效果，使用css屮相同的样式。唯一的差距就是第二个及以后的卡片要找好和前一个卡片之间的距离。歌单的头部文件中也是注明网页的编码格式，标题，css外部样式表的链接地址，Body中也是先采用div布局大小和简易框架，再用dkdd、dt标签实现排版。button称签以及

7、a标签、img标签等来实现具体功能。2.2CSS的应用Css中主要包含id选择器和class选择器，实现布局和具体文字，图片的大小、色彩样式、宽度、背景、浮动格式等进行设计和具体排版，css样式也是网页设计屮设计网页主要的一个部分。3网页效果图(1)歌单推荐界而一不小心嗨翻地球Miss生B祝福歌梵音迷离笑浮等干年哪有什么选择恐惧症，还不是因为穷；哪有什么优柔苺断，还不是因为怂......我一定要努力好起来，否极泰来！苦尽甘来！我还没过过好日子呢！给最在乎的你说一句生曰快乐"爱一个人到底什么感觉？“"好像突然有了炊肋，也突然有了铠甲。”慷懶情调

8、迷幻带给了现代都会人遁世的时尚感散是这种音乐主要的氛围温蓉华丽的装满配上舒适柔软的大沙发提供现代生活紧张的都市人一个鞋放压力的空间闲逸缔靡的天水碧海白鸟帆影的江音夜