网页编程综合实验报告.doc

华北科技学院计算机学院综合性实验报告华北科技学院计算机学院综合性实验实 验 报 告 课程名称 网页编程 实验学期 2017 至 2017 学年 第 一 学期学生所在系部 计算机学院 年级 三 专业班级 网络B15班 学生姓名 学号 201507024216 任课教师 李永飞 实验成绩 计算机学院制网页编程课程综合性实验报告开课实验室：大软机房 2017年 11 月30 日实验题目个人网站综合实验一、实验目的通过开设该实验，学生可以把在本课程中所学到的HTML、CSS以及JavaScript技术综合应用于一个内容充实、形式丰富的个人网站，在实验过程中加深对网页编程所涉及的各种开发技术的理解及各种技术结合使用的体会，为后续课程的学习打好基础。二、设备与环境PC兼容机、Windows操作系统、文本编辑软件、图片处理软件三、实验内容实验内容：自由确定网站内容主题，综合应用HTML、CSS和JavaScript开发实现一个内容充实、形式丰富的个人网站。实验要求：要求所完成的网站至少包括5个以上网页，必须使用HTML中的至少5种标记，至少使用CSS或JavaScript技术中的一种用于网页效果的实现在课程结束前要提交综合性实验报告和网站的源代码。四、实验结果及分析1 网页设计1.1 网站主题设计思路经小组讨论分析后，确定了网站主题，决定做一个音乐网站。音乐网站主要有主页设计，歌单推荐设计，音乐分类设计，音乐榜单设计等方面。经小组讨论后，选择部分主题进行设计，我主要负责歌单推荐一栏的工作。1.2 各网页内容设计歌单推荐主要展现给大家的是一个简洁、清晰、主题明确的界面，内容主要有导航条、歌单的名称，歌单歌曲的类型介绍、底部导航条，以及各个歌单类型的配图、来吸引注意力。除此之外，歌单界面的内容主要有歌单的歌曲，歌单的详细介绍、歌单中的歌曲、歌曲播放和下载，歌曲作者、登录框、相同类型的歌单推荐、对此歌单的评论、顶部导航条、底部导航条等内容。1.3 各网页布局设计歌单推荐的布局主要分为三部分，除顶部导航条和底部导航条外，主要采用卡片布局形式，卡片中展现的内容是各歌单的名称、歌单的配图、以及歌单的简单介绍等内容，整体呈现各人一种简洁，高效的推荐方式。歌单的布局设计也是主要分为三大部分，顶部导航条和底部导航条两块，中间为歌曲推荐的歌单部分，歌单部分再细分五小块：一是歌单的详细介绍，将歌单图，歌单名称，歌单的详细介绍再分成几个小部分进行设计和实现。二是歌单部分，主要放歌单中的主要歌曲，歌曲作者，歌单的播放和下载，进行排版和简单布局。三是一个登录功能。四是相同类型的歌单推荐。五是一个对于此歌单的评论模块。整体是三个小框架布局，再细分其中的五个小框架为各小部分。主要用div布局来实现。2 网页实现2.1 HTML的应用歌曲推荐头部文件中注明网页的编码格式，标题，css外部样式表的链接地址主界面用body标签实现，包含各种文字标签、链接标签、排版布局标签、图片的标签等来实现不同的功能。在body中，先用div来确定整体的框架大小，因为主界面的缘由，布局采用左右各留白20%，其次分主要导航栏的设计，由于希望小组风格内容保持一致的原则，顶部和底部导航栏由小组负责主界面的人员进行设计，后期进行套用，因此不再对顶部导航栏和底部导航栏进行设计，因此就用一个div为导航栏留下空位。卡片的效果实现是这个页面的主要难题，先采用div定位卡片的位置、大小以及基本框架，其次采用dl标签包含dd标签和dt标签来实现卡片中图片和文字的布局效果，用a标签实现超链接到具体歌单的功能，img标签实现图片展示效果，h3标签来确定歌单名称的文字大小，p标签实现歌单的具体介绍功能。之后的卡片也是采用和之前的卡片相同样式的效果，使用css中相同的样式。唯一的差距就是第二个及以后的卡片要找好和前一个卡片之间的距离。歌单的头部文件中也是注明网页的编码格式，标题，css外部样式表的链接地址，Body中也是先采用div布局大小和简易框架，再用dl、dd、dt标签实现排版。button标签以及a标签、img标签等来实现具体功能。2.2 CSS的应用Css中主要包含id选择器和class选择器，实现布局和具体文字，图片的大小、色彩样式、宽度、背景、浮动格式等进行设计和具体排版，css样式也是网页设计中设计网页主要的一个部分。3 网页效果图（1）歌单推荐界面 对于卡片的左右宽度要统一宽度，但是不能对卡片的长度进行统一，因为每一段介绍的文字长度都是不同的。（2）歌单界面4课程总结 在网页编程课程的学习中，感触最深的是系统化的设计，对于网页的框架设计，由整体到部分，再对部分的再设计，以及再对细节部分的样式设计的方式，无论是在生活中还是在工作上，都应该有这样一套的模式。这样无论在什么方面都能做到最好。其次是在设计方面，网页设计不仅仅是编程设计，而且也涉及到了美学、心理学、平面构成、色彩搭配等平面设计的内容。只有综合运用多种知识，才能设计出视听特效，动感十足的，富有个性的web页面，才能更好的发展。 教 师 评 价评定项目ABCD评定项目ABCD有LO