网页设计与制作实验要求
实验一
【实验目的】
1. 练习不设置服务器的本地站点的建立过程。
2. 练习需要设置服务器的本地站点的建立过程。
3. 在任意一个站点下新建一个网页设置此页页面属性。
【实验内容】
如果此处设立，不是使用服务器技术的话则选择上面的那个否按提示继续操作；
实验二
【实验目的】
1.
2.
3.
4.
【实验内容】
设置窗体的背景色：#999999，边距均为0；字号14px，字体颜色：
#000000
掌握文本插入以及格式设置。 掌握图像插入及基本属性设置。 掌握flash动态元素插入及基本属性设置。 掌握用表格布局页面。
图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所示：
图14
这一部分是对框架集的操作，即在一边点击 ，在另一部分会有相应的变化；
实验八
【实验目的】
检验学生对所学知识的综合运用，包括：设计前的规划，具体设计中各种对象的使用
【实验内容】
可以分组可以单独完成，平均每个学生所设计网页不得少于2各页面，尽
可能在页面中显示出教学过程中需要掌握的知识点。
点击个人主页
跳出；
网页设计与制作实验要求
实验一
【实验目的】
1. 练习不设置服务器的本地站点的建立过程。
2. 练习需要设置服务器的本地站点的建立过程。
3. 在任意一个站点下新建一个网页设置此页页面属性。
【实验内容】
如果此处设立，不是使用服务器技术的话则选择上面的那个否按提示继续操作；
实验二
【实验目的】
1.
2.
3.
4.
【实验内容】
设置窗体的背景色：#999999，边距均为0；字号14px，字体颜色：
#000000
掌握文本插入以及格式设置。 掌握图像插入及基本属性设置。 掌握flash动态元素插入及基本属性设置。 掌握用表格布局页面。
图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所示：
图14
这一部分是对框架集的操作，即在一边点击 ，在另一部分会有相应的变化；
实验八
【实验目的】
检验学生对所学知识的综合运用，包括：设计前的规划，具体设计中各种对象的使用
【实验内容】
可以分组可以单独完成，平均每个学生所设计网页不得少于2各页面，尽
可能在页面中显示出教学过程中需要掌握的知识点。
点击个人主页
跳出；