网页编程综合实验报告

1、华北科技学院计算机学院综合性实验报告华北科技学院计算机学院综合性实验实 验 报 告 课程名称 网页编程 实验学期 2016 至 2017 学年 第 一 学期学生所在系部 计算机学院 年级 三 专业班级 学生姓名 学号 任课教师 实验成绩 计算机学院制网页编程课程综合性实验报告开课实验室：基础七机房 2016年 11 月22 日实验题目个人网站综合实验一、实验目的通过开设该实验，学生可以把在本课程中所学到的HTML、CSS以及JavaScript技术综合应用于一个内容充实、形式丰富的个人网站，在实验过程中加深对网页编程所涉及的各种开发技术的理解及各种技术结合使用的体会，为后续课程的学习打好基础。

2、二、设备与环境PC兼容机、Windows操作系统、文本编辑软件、图片处理软件三、实验内容实验内容：自由确定网站内容主题，综合应用HTML、CSS和JavaScript开发实现一个内容充实、形式丰富的个人网站。实验要求：要求所完成的网站至少包括5个以上网页，必须使用HTML中的至少5种标记，至少使用CSS或JavaScript技术中的一种用于网页效果的实现在课程结束前要提交综合性实验报告和网站的源代码。四、实验结果及分析1 网页设计1.1 网站主题设计思路 我们宿舍六个人为一小组，主题是“梦中的婚礼”。我们在一次兼职里知道有“婚博会”这个组织，它是为了给市场经济下的婚礼市场提供统一的管理和服务而

3、设立。因此，在确定网站主题时，决定做一个涵盖婚礼各个方面的网站，为大家提供大致的产品和介绍。我们小组有六个人，最终确定了婚礼场地、婚纱、婚饰、婚宴、婚车、蜜月旅行六个方面。 我负责的为婚宴部分，现代人都在追求个性的，能让自己铭记一生的婚礼，婚宴作为婚礼必不可少的部分，也越来越发展的多样化。婚宴部分主要设计为两大板块，一个为最传统的中式婚宴，一个为近年兴起的西式婚宴。中式婚宴追求寓意圆满，希望新人幸福一生；西式婚宴则形式相对自由，也有多种形式，本次主要介绍西式自助餐形式的婚宴。1.2 各网页内容设计 在两大部分之一的中式婚宴中，我主要介绍了几个比较传统的宴席，这几个宴席都有美好的寓意，主要用于了

4、解婚宴的寓意及其菜品。西式婚宴主要为自助餐形式，所以在网页中主要着重介绍几个单品，如动盘沙律系列、热盘系列、主食系列以及甜品系列。1.3 各网页布局设计网页布局部分，婚宴首页主要采用的是1+3+1的形式，由上至下分别有：（1） 首部：是婚宴的一个大的标志图片logo。（2） 导航栏：有婚宴的简介、婚宴设计原则、婚宴习俗、婚宴流程等，并有相应的链接在新的窗口对其进行详细的介绍，还有一个回婚庆首页的链接。（3） 中间部分：主要有三块内容，左中右。左边是中式婚宴中几个经典宴席的大体介绍，中间是符合婚宴主题的图片，右边是西式自助婚宴几个板块中常见菜式的介绍。（4） 尾部：与首部相呼应，使整个结构更加完

5、整，主要用于置方网页制作方的相关信息。主色调为淡紫色，除标题外大部分文字大小为5号字体，字体为默认字体，中间部分的动态滚动文字设置为华文琥珀字体，对于链接也是与整个网页相应的加重的紫色。背景是用与浪漫相关的薰衣草花田增添美感。2 网页实现本次实验中的首页及其它基础介绍页面都是基于HTML语言建立，并与相应的CSS文件进行连接而构成。HTML负责编写网页所需要的内容，CSS文件负责整个网页建立所需要的结构。2.1 HTML的应用此次实验中HTML语言里我主要用了如下几种标记（1） 文本部分：用了文字标记font来设置文字的大小和颜色，标题标记hn来设置所需标题的大小，文本分段标记p、br来控制文

6、本的分段和换行，还用列表标记ul，li来更清晰地列出婚宴中每个宴席的大致分类。Center等标记来设置文本需要所在的位置。（2） 图像部分：是用图像标记插图图片，如首部header的婚宴标志、网页中心的图片、左右两边中西式婚宴标志图片及网页的背景图，都是在经过Photoshop编辑后采用图像标记，来设置其高度宽度，垂直和水平间距及其所在网页位置。如首部header的婚宴标志：（3） 链接部分：本网页中各个网页间的链接都是采用超级链接标记来达成。如婚宴首页中有中式婚宴的各个宴席，要了解详细情况，则需要点击链接到新的窗口去查看婚宴详情，当然每个分页底部也有回婚宴首页的链接。如：到达婚宴简介链接到达

7、宴席的链接详情回首页的链接 回首页（4） 表格标记和容器标记部分：在分页中介绍菜品时用了表格标记table来构建框架是整个页面更加整洁明了，容器标记有div及span等，div主要用于与CSS文件连用来构建框架，是整个网页的页面清晰有序。如：2.2 CSS的应用 本实验中的CSS没有编写在网页中，而是直接编写在CSS文件里与HTML文件连接，方便日后有需要来修改。CSS文件主要用于网页布局，在CSS文件中设置盒子的属性，如：大小，内外边距，边框宽度，颜色及其定位方式等。再与div连用可以得到自己想要的布局。在本次实验中我的布局如下图：如：最上方盒子#container margin:20 au

8、to; background-color:#faebd7; width:1610px;设置其外边距上下20px，左右居中；设置盒子背景颜色；最后设置其宽度，下面的div布局不能超过这个限度。又如：中间的盒子#content及其子盒子left，main，right用了绝对定位的方式 先设置content的长度及宽度，以原来盒子的左上角为原点确定Y轴方向的合适的top值，其子div中的盒子left，main，right用绝对定位设置通过计算来设置其合适的外边距，使其确保再合适的位置。并在盒子里设置好其宽度和高度。在此次实验中CSS还用于了设置HTML中标记的样式，如：（1） 列表标记：ul 中li

9、st-style:none可以去掉列表前面的编号；在li中float:left;设置每个列表项左浮动可以让列表水平排列，此次网页设计中导航条就用到这样的列表设置，另外还可以让其文本居中如：text-algin:center。（2） 设置连接标记：链接标记使用后默认为蓝色字体，且有下划线。用CSS则可设置其样式，本实验中链接用CSS设置初始时的颜色为需要的颜色，且没有下划线，当指针指向链接时，链接变为有下划线，且颜色发生变化。如在导航条中：#daohang a display:block; padding:9px 6px 11px 6px; margin:0px; #daohang a:link

10、,#daohang a:visited color:#7b68ee; text-decoration:none; #daohang a:hover color:#8b008b; text-decoration:underline; 2.3 JavaScript的应用本次网页设计中，JavaScript脚本语言中用了marquee使文字添加了滚动效果。如网页中间部分的main部分中： 让此刻见证永恒的幸福使文字形成向左滚动的效果。3 网页效果图(1) 首页首页在HTML文件中连接了CSS文件，用DIV+CSS设置了网页布局，然后再各个子div中写入相应的内容。头部是大的婚宴标志，然后是导航条，接

11、着是左中右三部分，分别是中式婚宴，中间的图片，西式婚宴。如在content部分的left是中式婚宴的部分，在其中可以点击链接进入各个宴席进行详细的了解。(2) 导航条中的分页导航条中的分页主要用于介绍文字性内容，比较简洁。在HTML文件中直接用style设置div的样式，设置了其背景颜色，字体颜色外边距及内边距。然后再div中插入相应的文字。此div中没有设置宽度所以div大小会随着网页窗口大小而变动。类似的还有婚宴原则，习俗流程的介绍都在导航条中可以找到链接。(3) content中的中西式婚宴部分分页对于婚宴页面的介绍，我全部用了div+表格的形式来介绍，因为页面宴席有分类，所以根据分类下面为各自分类的菜品。根据每个宴席div的颜