《网页设计与制作》实验报告 - 图文

《网页设计与制作》

实验报告

院系名称： 管理学院 专业班级： 电子商务XXXX 学生姓名： XXX 学 号： XXXXXXXX

项目 实验一 （25分） 得分

2016年 5 月

实验二 （35分） 实验三 （40分） 总分 （100分）

实验一：HTML语言实验

一、实验目的

1、掌握利用HTML语言编写网页的能力； 2、掌握利用HTML语言编写表格的能力； 3、掌握利用HTML语言编写表单的能力。 二、实验课时

2学时 三、实验内容

1、表格实验的结果

1

2、表单实验的结果

四、实验小结

HTML语言是网页制作的基础，而利用表格布局是重中之重。在这两个实验中，第一个是要注重表格的宽高以及colspan和rowspan的设置，第二个是要注重表单的样式，其中要注意默认选项的设置，单选框name属性值相同，而复选框name属性值应该不同。 本次实验也让我更加注重细节，一遍遍的修改也使我更熟悉HTML语言以及编码的设置，这对于网页制作这门学科来说是一个铺垫。

4

实验二：FireWorks和CSS实验

一、实验目的

1、掌握为给定效果图规划切图方式的能力； 2、掌握利用FireWorks切图的能力； 3、掌握利用CSS+DIV制作网页的能力。 二、实验课时

4学时 三、实验内容

1、规划切图方式的思路

了解网页布局结构，将网页划分为几部分，其中导航条为一部分，将其各项分开切图。其余部分根据实际划分开。

2、利用FireWorks切图的步骤

第一步：打开FireWorks切图软件，打开网页图片。 第二步：点击切片工具将图片切为所需大小和比例。

第三步：点击文件选项卡下的导出，选择导出为CSS层（htm），勾选修剪图像和将图像放入子文件夹，点击导出。

5

3、CSS+DIV制作网页的结果

6

.top{margin:0 auto 0 0;border:0 auto;text-align:center;width: 1008px; height:83px}

.topmain{margin:0 auto 0 0;width:px;height:83px;text-align:center} .topmain ul{margin:0 auto 0 0;padding:0px;text-align:center}

.topmain ul li{width:83px;height:45px;list-style-type:none;float:left} .topmain ul li a{width:83px;height:45px}

.topmain.one{width:77px;height:45px;float:left} .topmain.two{width:106px;height:45px;float:left}

.content1{margin:0 auto 0 0;border:0px;text-align:center; width:1008px; height:257px}

.content2{margin:0 auto 0 0;padding:10px;border:0px;text-align:left; color:#000;font-size:20px;line-height:30px;width:1008px;height:384px}

.content2_list{margin:0 auto 0 0;padding:10px 20px;border:0px;} .bottom{margin:0 auto 0 0;border:0px;width:1008px;height:52px}