网页设计实验报告

网页设计与制作实验要求

实验一

【实验目的】

1.练习不设置服务器的本地站点的建立过程。

2.练习需要设置服务器的本地站点的建立过程。

3.在任意一个站点下新建一个网页设置此页页面属性。【实验内容】

如果此处设立，不是使用服务器技术的话则选择上面的那个否按提示继续操作；

实验二

【实验目的】

1.掌握文本插入以及格式设置。

2.掌握图像插入及基本属性设置。

3.掌握flash动态元素插入及基本属性设置。

4.掌握用表格布局页面。

【实验内容】

设置窗体的背景色：#999999，边距均为0；字号14px，字体颜色：#000000

图1

图1部分高度为20px，宽度760px

图2

图2 中5个图片所在行高度：150px

图3

图3所在行高度为242px，表格颜色为#FFCC99 最终实现效果如图4所示：

图4 【实验步骤】

1,插入六行一列的表格。

2，设置窗体属性

3，根据要求插入动画，然后经、将第二行作为背景插入，然后在上面插入字4，在第三行中插入一行五列的表格，按要求设置行高并插入图像

5，同理将第四行设为背景，再在第五行插入九行三列的表格

实验三

【实验目的】

1.掌握css样式的基本操作。

2.掌握DIV+CSS样式布局。

3.掌握库和模板的基本制作。

【实验内容】

1、DIV+CSS设计出下图5、图6两个网页。

图 5

图6

2、导航栏做成库模式。

3、图6中上部logo和版本选择部分和左部导航栏部分做成不可编辑区，正文

部分作为可编辑区。

4、

【实验步骤】

对main标签进行设置；

对logo进行设置

对text层和ver层进行设置

接下来回到网页设计界面，在右边【库】文件窗口，选中刚刚保存的库文件，然后点击【插入】，设计网页界面得到下图：

接下来在网页的有的标签输入相应内容，并进行相应设置，的下图：

最后得下图；

实验四

【实验目的】

掌握模板可编辑区域与重复区域的制作与应用。

【实验内容】

制作模版class.dwt在dreamweaver中如下图7所示，其中标题栏下面所包含图片为“kind06.gif”，用其生成一个新网页applydwt.html如下图8（设计界面中），图9为在浏览器中浏览情况，dreamweaver中对html文档可编辑区域进行编辑，效果如图10所示。

【实验步骤】

对text标签的设置；

接下来将上图全部选中设为“可重复区域”

然后分别选中图片和文字并分别设置为“可编辑区域”；

最终得到模板如下图：

保存模板，打开新的网页对其操作的结果；

对可编辑区域编辑的结果如下；

实验五

【实验目的】

1.学会建立表单对象和表格

2.能够按要求对表格进行美化处理

3.掌握表单中各个表单对象的特殊设置及对表单的检查

4.数据库连接

【实验内容】

制作如下图11所示用户注册界面，，其中用户名后面文本域必须输入内容，文本域失去焦点是，如果没有输入提示输入，确认密码后面文本域输入内容后离开时检测两次输入密码是否一致，不一致提示重新输入。

建立一个数据库db1，数据库中有一user表，表中字段对应注册页面，点击提交按钮时将图10中所选界面内容填写到数据库的user表中。（其中文本域中内容必须提交到数据库表中，其他各项可以根据情况实现）

【实验步骤】

表单里插入表格，然后依次操作得如下

实验六

【实验目的】

1.掌握行为的基本操作

2.掌握扩展行为的添加及设置

3.掌握时间轴的操作

4.掌握拖动层操作

【实验内容】

在页面中实现至少十种行为，其中至少一种是扩展行为。（为了方便查看可以做成表格，每个单元格中实现一种行为，具体实现可以在本网页可以在另外网页html）。其中必须包括时间轴操作（图像按照某一轨迹运动或者图像显示效果）、层操作（拼图游戏或者试衣间）。

时间轴：图像按照某一轨迹运动自己选择图像，自己确定运动轨迹，并且光标放到图像上时停止运动，离开时重新开始。

图像显示效果实现如图12所示效果。

层操作：拼图游戏要对一副完整图片进行分割，分割成不得少于6部分的小图片；实现光标移到数字上时，相应图片显示，离开数字，相应图

片隐藏，当选中相应图片时，按下鼠标左键屏幕上可以拖拉图片，

运用到层和时间轴，对应时间轴图片的时间进行设计即可，从行为那里找时间对应设置；

试衣间既是层的移动和重叠并在行为那里设置隐藏和显示；

实验七

【实验目的】

1.掌握框架的使用，框架中标题的设置以及网页中导入已有word文档的

方法。

2.掌握锚链接的建立。

3.掌握css样式的概念及其建立，能够区分三种css样式，并根据要求建

立相应的样式。

【实验内容】

左侧框架显示” 3.1框架主题.doc”中内容，右侧显示“3.1框架文件.doc”中内容。建立超链接，实现点击左侧标题，右侧框架顶端显示相应内容，(文件名字xajh?.html,) (?表示数字) 如下图13所示：

图13

2、设置CSS样式。左侧框架内内容设置样式，存储在css1.css样式文件中，

增加h3标签，行高36px，大小18px；笑傲江湖设置为标题3 ；

增加a标签，字体颜色为#000066，无修饰；

增加body标签，字体大小12px,背景色#99CC66，扩展Glow,颜色为红

色，Strength为5

增加ol标签，设置行高40px,列表项图像为“3.1list.gif”；设置框架中四

个标题为ol格式，效果如下图所示。

右侧框架中设置“第一章灭门”字体颜色#000099，字体大小为18px，

加粗，并对另外三个标题均应用此设置

最终效果如下图14所示：