实验四 利用层进行网页布局
一、实验目的
1、掌握层的绘制、选择、移动和对齐； 2、掌握“层”属性面板的设置； 3、掌握利用层来设计网页的版面； 4、掌握层的显示和隐藏； 5、掌握层的堆叠和删除。
二、实验内容
利用层布局制作如图所示的网页。
图
三、 实验步骤
1、 绘制层
绘制层有如下3种方法：
(1)将插入点放置在“文档”编辑窗口中，然后选择[插入]\\[布局对象]\\[层]菜单命令将自动在插入点插入一个层。
(2)在“插入栏”的“布局”插入栏中单击“绘制层”(3)在“插入栏”的“布局”插入栏中单击“绘制层”鼠标可绘制一个层。
按钮，拖动鼠标绘制一个层。 按钮，在文档编辑窗口中单击
2、将光标定位到层layer1内，插入图像“banner.jpg”。
3、将光标放在层layer1内，然后按下绘制层按钮，当光标变成“十字形”时，按Alt键直接在层layer1内绘制一个嵌套层layer2，插入图像“logo.gif”。
4、紧接着层layer1，在其下方再绘制五个层，在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键拖动连续绘制五个层，使这五个层大致处于同一区域。
5、选择层单个层的方法有3种。 (1)在文档编辑区中单击层边框。
(2)在层中单击鼠标左键，再单击该层的选择柄。
(3)打开“层”面板，如图所示，在“层”面板中单击要选择的层的名称。
注意：此时如果没有出现“层”面板，则选择[窗口]\\[层]菜单，在右侧的浮动面板中就会出现“层”面板。
图
用上述方法中的任意一种方法，选择“layer，插入图像“shouye.jpg”，选择“layer，插入图像“xiangce.jpg”，选择“layer5”，插入图像“yinyue.jpg”，选择“layer6”，插入图像“riji.jpg”，选择“layer7”，插入图像“liuyan.jpg”。
6、选择多个层有2种方法。
(1)按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。
(2)按住【Shift】键，在“层”面板中单击要选择的多个层的名称。
选择“layer3”，“layer5”和“layer7”，执行[修改]\\[排列顺序]\\[左对齐]，所有选定层的左边框会与最后一个选定层的左边框处于同一垂直位置。
1、 选择“layer和“layer，执行[修改]\\[排列顺序]\\[右对齐]，所有选定层的右边框会与最后一个选定层的右边框处于同一垂直位置。
2、 在层“layer3”的右边，绘制层“layer8”，插入图像“shukuang.jpg”。 3、 将光标放在层“layer8”内，然后同时按下Alt键和“绘制层”
按钮，绘制层
“layer9”，使得层“layer9”处于顶端的正中间位置，插入图像“biaoti.gif”。 4、 将光标放在层“layer8”内，同时按下Alt键和“绘制层”
按钮，在层“layer9”
的下方绘制层“layer，然后选择[插入]/[表格]菜单命令，插入一个12行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer10”的大小一致。
5、 在层“layer的左边，层“layer7”的下方，绘制层“layer11”，然后选择[插入]/[表格]菜单命令，插入一个6行1列，有边框的表格，插入后调整表格的大小，使得它跟层“layer11”的大小一致。
6、 在该表格的第一个单元格输入文字“友情链接”，并设置背景颜色为“#66CCFF”。 7、 层“layer11”的下方再绘制层“layer12”，层“layer12”的宽度与层“layer1”的宽度一致。
8、 在层“layer中输入文字“版权所有**********”。 9、 “层”面板最终效果如图所示。
图
16、按【F12】键，预览。
思考题：做完这个实验后，很多同学会发现，该网页的内容不能在窗口的中间显示，怎么解决这个问题？
实验五 交互式表单的应用
一、实验目的
1、掌握表单的创建和设置，以及表单的检查； 2、掌握各表单对象的插入和属性的设置； 3、掌握表单中数据的提交；
二、实验内容
1、在站点目录下新建一个名为form.htm文件，制作如图所示的用户注册表的效果图，其中“用户注册表”格式：字体“宋体”，大小“”，颜色：“红色”，“密码”要求控制在6个字符内，且输入的数字以●方式出现，“您的生日”所对应的“年”值为“1990，“月”所对应的值为“1，“日”所对应的值为：“1，且单击“提交”按钮时要对表单中的“用户名”和“密码”进行检查，使之不为空值，提交时将数据提交到你的邮箱；
2、在站点目录下新建一个名为navigation.htm文件，制作如图所示的跳转菜单效果，其中“站点导航”格式：字体“宋体”，大小“”，颜色：红色。
图 form.htm文件效果图
图 navigation.htm文件效果图
三、知识点分解
由图可知，表单内所有表单对象都左对齐，所以在该表单中插入了一个9行2列的表格，表格有背景图像bj1.gif，在表格中插入表单对象。由图2-11-2可知，该网页有背景图像，为bj2.gif，“站点导航”文字下插入了一条水平线。
四、 实验步骤
内容1步骤：
1、新建一个文档，将“插入”栏中的“常用”选项卡改为“表单”选项卡， 如图所示。
图 “表单”工具栏
2、将光标定位在文档页面中需要插入表单的位置，单击 “表单”按钮，此时光标
定位处出现一个红色的虚线框，它表示表单的范围，所有表单对象都在该区域内插入。 3、在表单中插入一个9行2列的表格的表格，设置表格的背景图像为”bg1.gif”，表格“居中”。
4、合并第1行的单元格，输入文字”用户注册表”，文字之间空一格，格式：字体“宋体”，大小“”，颜色：“红色”。
5、在第2行第1个单元格内输入“你的用户名：” 将光标定位到第2个单元格，单击 “文本字段”
按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮。
6、在第3行第1个单元格内输入“你的密码：” 将光标定位到第2个单元格，单击 “文本字段”
按钮，在弹出的“辅助标签属性”对话框中单击“取消”按钮，打开“属性”
面板，在“最多字数符”中输入“，将“类型”改为“密码域”。 7、在第4行第1个单元格内输入“你的性别：” 将光标定位到第2个单元格，单击 “单选按钮”按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“男”，“位置”改为“在表单项前”，单击“确定”按钮，敲一个空格，再单击 “单选按钮”按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“女”，位置”改为“在表单项前”，单击“确定”按钮，选择“男”前面的单选钮，打开“属性”面板，将“初始状态”改为“已勾选”。
8、在第5行第1个单元格内输入“你的生日：” 将光标定位到第2个单元格，单击 “列表/菜单”
按钮，在弹出的“辅助标签属性”对话框中“标签文字”中输入“年”，“位
按钮，在弹出的“辅
置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单”
助标签属性”对话框中“标签文字”中输入“月”，“位置”为“在表单项后”，单击“确定”按钮，再单击 “列表/菜单”
按钮，在弹出的“辅助标签属性”对话框中“标签文
字”中输入“日”，“位置”为“在表单项后”，单击“确定”按钮；选择“年”前的列表，打开“属性”面板，将“类型”设为“菜单”，单击按钮，在弹出的“列表值”对话框中的“项目标签”中输入“ ， 单击
按钮，添加第二个项目标签，输入“，