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

华北科技学院计算机学院综合性实验 实 验 报 告 课程名称 网页编程 实验学期 2016 至 2017 学年 第 一 学期 学生所在系部 计算机学院 年级 三　 专业班级 学生姓名 学号 　　 任课教师 实验成绩 计算机学院制 《网页编程》课程综合性实验报告 开课实验室：基础七机房 2016年 11 月22 日 实验题目 个人网站综合实验 一、实验目的 　　　　通过开设该实验，学生可以把在本课程中所学到的HTML、CSS以及JavaScript技术综合应用于一个内容充实、形式丰富的个人网站，在实验过程中加深对网页编程所涉及的各种开发技术的理解及各种技术结合使用的体会，为后续课程的学习打好基础。 二、设备与环境 PC兼容机、Windows操作系统、文本编辑软件、图片处理软件　 三、实验内容 　　　　实验内容：自由确定网站内容主题，综合应用HTML、CSS和JavaScript开发实现一个内容充实、形式丰富的个人网站。 实验要求：要求所完成的网站至少包括5个以上网页，必须使用HTML中的至少5种标记，至少使用CSS或JavaScript技术中的一种用于网页效果的实现 在课程结束前要提交综合性实验报告和网站的源代码。 四、实验结果及分析 1 网页设计 网站主题设计思路 我们宿舍六个人为一小组主题是“梦中的婚礼”。我们在一次兼职里知道有“婚博会”这个组织，它是为了给市场经济下的婚礼市场提供统一的管理和服务而设立。因此，在确定网站主题时，决定做一个涵盖婚礼各个方面的网站，为大家提供大致的产品和介绍。我们小组有六个人，最终确定了婚礼场地、婚纱、婚饰、婚宴、婚车、蜜月旅行六个方面。 Center等标记来设置文本需要所在的位置。 图像部分：是用图像标记插图图片，如首部header的婚宴标志、网页中心的图片、左右两边中西式婚宴标志图片及网页的背景图，都是在经过Photoshop编辑后采用图像标记，来设置其高度宽度，垂直和水平间距及其所在网页位置。 如首部header的婚宴标志： img src=BJ/header.jpg height=200px hspace=5 vspace=5 链接部分：本网页中各个网页间的链接都是采用超级链接标记来达成。如婚宴首页中有中式婚宴的各个宴席，要了解详细情况，则需要点击链接到新的窗口去查看婚宴详情，当然每个分页底部也有回婚宴首页的链接。 如：到达婚宴简介链接a href=FY/hunyanjiejian.html target=_blank 到达宴席的链接a href=FY/babadafa.html target=_blank 详情/a 回首页的链接a href=../fianl.html 回首页/a 表格标记和容器标记部分：在分页中介绍菜品时用了表格标记table来构建框架是整个页面更加整洁明了，容器标记有div及span等，div主要用于与CSS文件连用来构建框架，是整个网页的页面清晰有序。 如：div id=container 2.2 CSS的应用 本实验中的CSS没有编写在网页中，而是直接编写在CSS文件里与HTML文件连接，方便日后有需要来修改。 CSS文件主要用于网页布局，在CSS文件中设置盒子的属性，如：大小，内外边距，边框宽度，颜色及其定位方式等。再与div连用可以得到自己想要的布局。 在本次实验中我的布局如下图： 如：最上方盒子#container{ margin:20 auto; background-color:#faebd7; width:1610px;} 设置其外边距上下20px，左右居中；设置盒子背景颜色；最后设置其宽度，下面的div布局不能超过这个限度。 又如：中间的盒子#content及其子盒子left，main，right用了绝对定位的方式 先设置content的长度及宽度，以原来盒子的左上角为原点确定Y轴方向的合适的top值，其子div中的盒子left，main，right用绝对定位设置通过计算来设置其合适的外边距，使其确保再合适的位置。并在盒子里设置好其宽