《网页编程》课程综合性实验报告
开课实验室：基础六机房 2018年 11 月22 日
| 实验题目 |
个人网站综合实验 |
| 一、实验目的 通过开设该实验，学生可以把在本课程中所学到的HTML、CSS以及JavaScript技术综合应用于一个内容充实、形式丰富的个人网站，在实验过程中加深对网页编程所涉及的各种开发技术的理解及各种技术结合使用的体会，为后续课程的学习打好基础。 二、设备与环境 PC兼容机、Windows操作系统、文本编辑软件、图片处理软件 三、实验内容 实验内容：自由确定网站内容主题，综合应用HTML、CSS和JavaScript开发实现一个内容充实、形式丰富的个人网站。 实验要求：要求所完成的网站至少包括5个以上网页，必须使用HTML中的至少5种标记，至少使用CSS或JavaScript技术中的一种用于网页效果的实现 在课程结束前要提交综合性实验报告和网站的源代码。 四、实验结果及分析 1 网页设计 1.1 网站主题设计思路 体育运动可以使我们更接近自然，接近自己本原，丰富社会交往，体育体现出自由开放精神，使其成为人们和睦相处的良方，起到了净化人们身心作用。因此，每个人都离不开运动。 我们小组的网页设计主题就是运动，旨在让人们更加了解一些运动，来增加人们对于运动的喜爱，让一些平时宅在家里的人们在浏览了我们小组的网页之后能够走出家门，投入到运动中去。另外，设计该网页主要是面向广大学生，运动是学生生活中极为重要的一部分，西方教育与中国教育在方式上有很大差别，这些差别并不仅仅体现在基础文化科目上，更体现在锻炼学生身体素质的体育课方面。 我们的设计思路是从五项运动（分别是游泳、篮球、排球、网球和滑雪）入手，通过对这五项运动的介绍，点燃人们身体里有关运动的DNA。
1.2 各网页内容设计 网页主要分为主页和五个分网页，主页最主要的作用便是链接向各个分网页，而分网页的作用则主要是分别介绍各自的运动内容。 主页： 主页当中主要是一个巨大的轮播图，通过链接通向各个子网页，没有什么具体的实质内容，主要是作为一个通向其他各个子网页的枢纽，其他子网页也能够返回到主页，这样各个子网页之间就可以相互跳跃了。 子网页： 首先是关于游泳的子网页，主要是通过对自由泳、蛙泳、蝶泳、仰泳、花样游泳和潜泳的介绍来向浏览者展示游泳的魅力。该网页在内容里具体阐述了有关于游泳的一些姿势的由来、动作的技巧、何时被列为奥运项目以及一些科研材料证明的科学训练方法，为许多志在学习游泳技巧的浏览者提供了更加科学的学习方式。 其次是关于篮球的子网页，这个子网页共可以链接到4个分网页中，也就是说，该子网页本身也是一个小型的主页。四个分网页分别介绍了花式篮球、正规的篮球比赛、篮球明星的简介以及其他的一些篮球资讯。花式篮球作为一种街头文化只得在网页中将其作为一个主题具体介绍，因此在这个分网页中具体从花式篮球的起源、与传统篮球的不同等方面入手，让浏览者对街头篮球能够有更加深入的了解。剩下的三个子网页相对介绍得更加简单，因为相对于花式篮球，正规的篮球比赛以及一些NBA球星则更加为人们所熟知，因此在网页中只进行了简单的介绍。 接着是有关于排球的子网页，也是主要从四个方面来介绍，分别是排球的历史、排球的规则、排球的一些教学视频以及有关于排球的一些比赛精彩视频，能够为喜爱排球的人们提供一个深入了解排球的源泉。 然后是有关于网球的子网页，这个子网页主要从介绍网球的几项著名赛事以及介绍网坛名将来使浏览者对网球有一个更加细致的了解。著名赛事主要有澳大利亚网球公开赛、温布尔登网球锦标赛、法国网球公开赛和美国网球公开赛，对于对网球不是很了解的浏览者，这可以为他们开启一个进入网球世界的大门。 最后是有关于滑雪的子网页，主要从对不同类型的滑雪种类、关于滑雪的建议以及学习滑雪的一些教学入手，旨在能让浏览该子网页的浏览者能够对滑雪这项运动有一个更加全面的认识，滑雪的小建议也能够让那些刚刚接触滑雪的浏览者在运动的过程中能够尽可能地规避风险。
1.3 各网页布局设计 在小组中，我主要负责完成主页的设计以及有关滑雪的子网页设计，因此我将主要介绍这两个网页的布局设计。 主页当中主要由一个巨大的轮播图构成，最初的想法是通过高级CSS当中的@-webkit-keyframes来起到动态移动的效果，但是考虑到能让浏览者能够更加灵活地控制主页，我们之后的想法是建立两种模式，一种是自动模式，也就是之前所说的通过CSS的-webkit-animation 属性来控制主页当中对应五个分子页的链接DIV，使其能以30秒为一个周期，不停地循环播放，但不能由浏览者来操控，浏览者只能点击链接系统所自动循环到的那个链接DIV；另一种是传统模式，即用户能够操控链接DIV的一种模式，主要的想法就是在主页下方添加5个悬浮半透明的小圆球，并为其加上CSS光标悬停效果，当光标悬停在小圆球上时，小圆球自动变为实心，并将上方的链接DIV转换成小圆球所对应的链接DIV，这样，用户就能够很自由地随时控制自己想看到的那个链接DIV了。 另外，主页还通过外链CSS的转换来控制之前所介绍的两种模式，浏览者可以进行选择，当选择自动模式时，用JavaScript将对应的外链CSS页转换成自动模式所对应的CSS页，而当浏览者选择传统模式时，则用JavaScript将对应的外链CSS页转换成传统模式所对应的CSS页，以此来达到自由的切换。除此之外，我们还为主页添加了“联系我们”和“更多分类”这两个功能，当浏览者点击“联系我们”时，用CSS可以向我们所指定的邮箱发送邮件，而在点击“更多分类”时则会链接到主页之外的其他网页中，不同的是这些网页所介绍的都是之前谈到的5种运动之外的其他运动。 滑雪子网页的布局为了迎合全组的网页结构，因此整个子网页就是一个网页，并没有分网页，网页中应用了HTML中的锚技术，在整个子网页的左侧增加一个可伸可缩的小目录，当收起时，不会影响界面的观看；而在需要时，则可以随时打开，并链接到该子网页的不同深度，这样浏览者在浏览网页时就可以灵活地跳跃到自己想看的位置了。
2 网页实现 2.1 HTML的应用 主页： 主页中首先在头部应用到的HTML标签就是<meta charset="utf-8">，这是为了保证在用不同浏览器打开时，不会出现莫名其妙的乱码；以及一些link标签，因为主页中应用到了许多CSS和JavaScript的内容，因此是通过外部链入的方式来实现调用。 在主页的内容部分主要是用div盒子来布局，因此在整个网页中，使用到最多的就是div标签，甚至直接在一个div中只放一张图片，比如说：
另外，在主页中还用到了无序列表定义标签<ul>，因为ul标签如果用CSS去掉它的默认格式的话将可以很好地用来作为一个选项目录。比如说：
上面这段程序就用到了<ul>和<li>标签，两者需要一起配合使用，ul用来定义无序列表，而li则代表无序列表的不同项，为每个li标签加上<a>超链接标签，这样当用户点击这些无序列表的不同项时，可以链接到其他的子网页。 除此之外，主页中还用到了控制背景音乐的<embed>标签，比如：
上面这段程序中，由于添加音乐时会有开始播放的按钮，比较影响美观，因此特意将它的CSS设置为自动循环播放，并将<enbed>的宽高设置为0px。
子网页： 为了保证子网页在用不同浏览器打开时，不会出现莫名其妙的乱码，子网页在头部也用到了<meta charset="utf-8">这个HTML标签。 另外，也用到了很多div标签来布局，主要分为顶部及顶部菜单div、目录div以及内容div，其中，内容div主要是一些纯色的半透明盒子，将标题放在<h>标签中、内容放在<p>标签中，使整个网页的效果看起来比较美观。 该网页中还用到了<video>标签，其作用是将对应路径下的视频文件导入网页中，为文章添加更多的元素，比如说：
上面这段程序中，src指定了mp4视频文件的路径，controls属性非常重要，可以将视频转换为控制播放，如果不指定，那么网页中的所有视频会在打开网页时自动播放，如果有很多视频的话会显得很乱。
2.2 CSS的应用 主页： 首先，主页中用到了cursor这个属性，这是用来指定光标文件的，在这之后写上光标图像文件的url，并指定auto，可以使浏览者在浏览本网页时，光标会有所变化。
其次是选择器的使用，主页中主要用到了最常用的id选择器、通用选择器、标签选择器、类选择器和伪类选择器等等。在设计时，用通用选择器将整个网页的margin和 padding属性都置为0，以防产生空隙，并将之前提到的cursor属性也写入到通用选择器中。id选择器主要用来选中网页中的各个div，通过width和height属性来控制所选中的整个div的大小，用position属性来定义所选中div的定位方式，并以left和top属性来确定选中div的具体位置，比如说：
网页中用伪类选择器来起到一定的动态作用，:hover伪类选择器的作用是当光标移动到某个指定div上时，div的CSS属性会转换成对应:hover中所指定的属性。比如：
最后，还用到了-webkit-animation属性，用来使对应div自动产生轮播图的效果，-webkit-animation属性中的第一个位置用来指定名称，第二个位置用来指定一整个循环所需要的时间，最后的infinite是指无限循环，如果不加infinite，则CSS动画会在以此循环之后结束，无法起到轮播图的真实效果。
子网页： 子网页中也用到了cursor这个属性，这是用来指定光标文件的，在这之后写上光标图像文件的url，并指定auto，可以使浏览者在浏览本网页时，光标会有所变化。 子网页中主要用到了最常用的id选择器、通用选择器、标签选择器、类选择器和伪类选择器等等。在设计时，用通用选择器将整个网页的margin和padding属性都置为0，以防产生空隙，并将之前提到的cursor属性也写入到通用选择器中。id选择器主要用来选中网页中的各个div，通过width和height属性来控制所选中的整个div的大小，用position属性来定义所选中div的定位方式，并以left和top属性来确定选中div的具体位置，比如说：
以上这些内容在主页和子网页中都有所使用。但除此之外，在子网页中还用到了linear-gradient，这是一个用来产生渐变的属性，在它的后面可以加上多个rgb属性或者rgba属性，它们之间的颜色转换为渐变效果，比如：
最后值得一提的是在实现目录时，我由于需要制作一个按钮，因此在过程中还应用到了border-top-right-radius和border-bottom-right-radius这两个控制边角弧度属性，其中border-top-right-radius属性用来控制右上角的弧度，border-bottom-right-radius用来控制右下角的弧度。
2.3 JavaScript的应用 首先，主页和子网页中都用到了onmouseover和onmouseout这两个JS元素onmouseover主要是指当光标移动到指定div上时，调用指定的JavaScript函数，而onmouseout指当光标离开指定div时，调用指定的JavaScript函数。对应的函数写在外部JS文件中，并通过link标签链入，具体例子如下：
在外部JS文件中，需要定义之前在HTML网页文件中调用的JS函数，主要是通过document.getElementById来获取对应div的id，并通过JavaScript来改变所选中的div对应的属性，也能起到动态的作用，比如：
另外值得一提的是，为了控制主页中动态CSS的-webkit-animation属性，在对应的JS函数中通过控制div的style.webkitAnimationPlayState来控制-webkit-animation属性是否执行，通过将其修改为paused来使其暂停，修改为running来使其继续运行。
3 网页效果图 主页的动态效果（移动到链接div上时弹跳下落）：
将主页的动态效果切换到传统模式时的效果：
子网页进入后的效果：
子网页浏览时的效果：
4课程总结 在完成本次综合实验时，我主要学到了CSS动态效果的使用、JavaScript以及对光标的控制。比如在制作轮播图时，由于CSS动态效果-webkit-animation的一些局限性，我在之前的学习过程中不知道如何去控制这种动态属性，因此在制作网页时很需要费脑子，通过在网上查询资料，我了解到webkitAnimationPlayState属性可以用来控制动态CSS，有了这个属性，我在动态CSS的运用上才变得更加灵活自如。 最后，通过本次综合实验我确实收获到了很多，老师在上课的过程中虽然已经对绝大部分常用的标签、属性等做了细致的讲解，但是要想真正领悟，还是需要通过自己的不断实践，在完成综合实验的过程中不断熟练自己的认识，以及和队友之间的合作，这些都是我未来踏上社会道路所必须要具备的。
|
|
