网页制作实验报告.docx

网页制作实验报告.docx

《网页制作实验报告.docx》由会员分享，可在线阅读，更多相关《网页制作实验报告.docx（22页珍藏版）》请在冰豆网上搜索。

网页制作实验报告

《网页设计与制作》

实验报告

院系名称：

管理学院专业班级：

电子商务11级3班

学生XX：

许世谦学号：

************

项目

实验一

（25分）

实验二

（35分）

实验三

（40分）

总分

（100分）

得分

2013年6月4日

实验一：

HTML语言实验

一、实验目的

1、掌握利用HTML语言编写网页的能力；

2、掌握利用HTML语言编写表格的能力；

3、掌握利用HTML语言编写表单的能力。

二、实验课时

2学时

三、实验内容

1、表格实验的结果

试验1.1

A

B

C

D

E

F

G

H

I

2、表单实验的结果

试验1.2

四、实验小结

通过这次试验，我掌握了许许多多以前不知道的代码细节，让我对网页设计与制作有了更深层次的了解，同时我对编写代码也渐渐的熟悉了。

刚开始编写的时候有点漫无目的，但是慢慢的就找到了感觉，最高兴的是最后当自己的代码在网页中显示出来的时候，自己的努力是值得的，越来越喜欢网页制作了！

实验二：

FireWorks和CSS实验

一、实验目的

1、掌握为给定效果图规划切图方式的能力；

2、掌握利用FireWorks切图的能力；

3、掌握利用CSS+DIV制作网页的能力。

二、实验课时

2课时

三、实验内容

1、规划切图方式的思路

首先，将网页的布局了解清楚，然后，根据不同的模块分类，导航条分为一类，其余的各归各类，之后利用FireWorks切图。

2、利用FireWorks切图的步骤

运用FireWorks将图片切为自己所需要的部分和比例，如图所示：

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

body{}

.top{margin:

0pxauto;border:

0px;text-align:

center;}

.topmain{margin:

0pxauto;width:

940px;height:

25px;padding:

0px;text-align:

cente;}

.topmainul{margin:

0px;padding:

0px;list-style-type:

none;text-align:

center;}

.topmainulli{width:

72px;float:

left;height:

25px;text-align:

center;}

.topmainullia{width:

72px;height:

25px;text-align:

center;}

.content1{margin:

0pxauto;border:

0px;text-align:

center;}

.content2{margin:

0pxauto;border:

0px;text-align:

left;position:

absolute;left:

168px;top:

352px;width:

301px;height:

533px}

.content3{margin:

0pxauto;border:

0px;text-align:

left;position:

absolute;left:

468px;top:

352px;width:

465px;height:

533px}

.content4{margin:

0pxauto;border:

0px;text-align:

left;position:

absolute;left:

933px;top:

352px;width:

211px;height:

529px;}

.bottom{margin:

0pxauto;border:

0px;position:

absolute;left:

168px;top:

885px;width:

977px;height:

105px;text-align:

center;}