《网页设计与制作》实验报告.docx
《《网页设计与制作》实验报告.docx》由会员分享,可在线阅读,更多相关《《网页设计与制作》实验报告.docx(22页珍藏版)》请在冰豆网上搜索。
《网页设计与制作》实验报告
《网页设计与制作》
实验报告
院系名称:
管理学院专业班级:
电子商务XXXX
学生姓名:
XXX学号:
XXXXXXXX
项目
实验一
(25分)
实验二
(35分)
实验三
(40分)
总分
(100分)
得分
2016年5月
实验一:
HTML语言实验
一、实验目的
1、掌握利用HTML语言编写网页的能力;
2、掌握利用HTML语言编写表格的能力;
3、掌握利用HTML语言编写表单的能力。
二、实验课时
2学时
三、实验内容
1、表格实验的结果
表格
A
B
C
|
D
|
E
F
G
H
|
I
|
2、表单实验的结果
表单
姓名:
|
密码:
|
性别:
女 男 |
爱好:
篮球 足球 乒乓球 |
籍贯:
开封 |
|
四、实验小结
HTML语言是网页制作的基础,而利用表格布局是重中之重。
在这两个实验中,第一个是要注重表格的宽高以及colspan和rowspan的设置,第二个是要注重表单的样式,其中要注意默认选项的设置,单选框name属性值相同,而复选框name属性值应该不同。
本次实验也让我更加注重细节,一遍遍的修改也使我更熟悉HTML语言以及编码的设置,这对于网页制作这门学科来说是一个铺垫。
实验二:
FireWorks和CSS实验
一、实验目的
1、掌握为给定效果图规划切图方式的能力;
2、掌握利用FireWorks切图的能力;
3、掌握利用CSS+DIV制作网页的能力。
二、实验课时
4学时
三、实验内容
1、规划切图方式的思路
了解网页布局结构,将网页划分为几部分,其中导航条为一部分,将其各项分开切图。
其余部分根据实际划分开。
2、利用FireWorks切图的步骤
第一步:
打开FireWorks切图软件,打开网页图片。
第二步:
点击切片工具将图片切为所需大小和比例。
第三步:
点击文件选项卡下的导出,选择导出为CSS层(htm),勾选修剪图像和将图像放入子文件夹,点击导出。
3、CSS+DIV制作网页的结果
效果图.jpg
body{}
.top{margin:
0auto00;border:
0auto;text-align:
center;width:
1008px;
height:
83px}
.topmain{margin:
0auto00;width:
px;height:
83px;text-align:
center}
.topmainul{margin:
0auto00;padding:
0px;text-align:
center}
.topmainulli{width:
83px;height:
45px;list-style-type:
none;float:
left}
.topmainullia{width:
83px;height:
45px}
.topmain.one{width:
77px;height:
45px;float:
left}
.topmain.two{width:
106px;height:
45px;float:
left}
.content1{margin:
0auto00;border:
0px;text-align:
center;width:
1008px;
height:
257px}
.content2{margin:
0auto00;padding:
10px;border:
0px;text-align:
left;
color:
#000;font-size:
20px;line-height:
30px;width:
1008px;height:
384px}
.content2_list{margin:
0auto00;padding:
10px20px;border:
0px;}
.bottom{margin:
0auto00;border:
0px;width:
1008px;height:
52px}