网页设计与制作实验要求
实验一
【实验目的】
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各页面，尽
可能在页面中显示出教学过程中需要掌握的知识点。
点击个人主页
跳出；