实验2 框架、表单、行为的应用.docVIP

实验2 框架、表单、行为的应用 实验目的 1、掌握使用框架制作网页的方法 2、了解表单各元素的设置方法 3、了解行为的用法 4、了解层的应用 二、实验内容 1、站点导入 要求：将站点shiyan3导入到dreamweaver中 步骤： （1）将实验站点根文件夹shiyan3复制到最后一个硬盘。 （2）选择菜单“站点”—“管理站点”命令，在打开的站点管理对话框中单击“导入”按钮，在导入站点对话框中选择站点文件“shiyan3.ste”导入到dreamweaver中，导入时选择shiyan3文件夹为该站点的根文件夹。 说明：所有相关文件在发给大家的实验文件夹中。 2、利用框架制作如下效果的网页 步骤： （1）选择“文件”|“新建”命令，在弹出的“新建文档”对话框中选择常规分类中的“框架集”选项，在“框架集”列下选择“上方固定，左侧嵌套”，如下图所示。单击“创建”按钮将会弹出“框架标签辅助功能属性”对话框，在此采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。 （2）选择“窗口”|“框架”命令，打开“框架”面板，选中整个框架集，在属性面板中，将行的值设置为120，单位为“像素”，其余属性不变。如图所示： 在“框架”面板中，选中子框架集。在属性面板中，将列的值设置为145，单位为“像素”，其余属性不变，如下图所示： 说明：选择“查看”|“可视化助理”|“框架边框”，可用鼠标在文档窗口中直接拖动框架边框来调节各框架的大小。 （3）选择“文件”|“保存全部”命令，在弹出的“另存为”对话框中将框架集保存为Frameset.html。保存好框架集后会再次弹出“另存为”对话框，在文档窗口中可以看到有个阴影框将右侧框架框起来，表示要保存的框架为右侧框架，将右侧框架保存为mainframe.html。用同样的方法保存上方框架为topFrame.html，左侧框架为leftFrame.html。 （4）鼠标在topFrame框架中的空白处单击，在页面属性中将背景色设为“黑色”，上、下、左、右边距全部设为0。插入一个1行1列的表格（表格1），宽度为100%，高度为“120像素”，对齐方式为“居中对齐”。再设置单元格垂直对齐方式为“底部”对齐。 （5）在表格1中插入一个2行2列的表格（表格2），表格宽度为100%，间距为“0”。将表格2第一行单元格背景颜色设置为“红色（#FF0000）”，第二行单元格背景颜色设置为“黑色”。如下图所示 （6）将表格2第一行左边单元格的宽设置为“120”像素，高设置为“55”像素。水平对齐方式设置为“右对齐”，垂直对齐方式设置为“底部对齐”。并在该单元格中插入图片“logo_1.gif”。属性面板如下图所示。 （7）将表格2第一行右边单元格的水平和垂直对齐方式都设置为“居中对齐”，并输入文字“DREAMVEAVER 网页设计”。设置文字字体为“Arial”，大小为“36”像素。最后效果如下图所示。 （8）将表格2第二行左边单元格的宽设置为“120”像素，水平对齐方式设置为“右对齐”，垂直对齐方式设置为“顶端”对齐。并在该单元格中插入图片“logo_2.gif”。最后效果如下图所示： （9）鼠标在leftFrame框架中的空白处单击，在页面属性中将背景色设为“黑色”，上、下、左。右边距全部设为0。超链接属性如下图所示： （10）插入一个7行1列的表格（表格3），表格宽度为100像素，单元格间距为“1”，背景颜色为“黑色”，居中对齐。将所有单元格的高度设为40像素，背景颜色为“红色（#FF0000）”。 （11）将表格3的第一个单元格的背景设置为“web_3.gif”，最后一个单元格的背景设置为“web_4.gif”。 （12）在表格3的第二个单元格中插入图片“web_1.gif”，设置该图片的水平边距为“2”，输入文字“框架应用”，修改文字颜色为“白色”。 （13）在表格3的第三个单元格中插入图片“web_2.gif”，设置该图片的水平边距为“2”，输入文字“表单应用”，修改文字颜色为“白色”。 （14）按照以上方法依次在后面几个单元格中输入文字“行为应用”、“层的应用”、“行为和层”。最后效果如下图所示： （15）鼠标在mainFrame框架中的空白处单击，插入一个2行1列表格（表格4），表格宽度为“98%”，边框为“0”。 （16）在表格4的第一个单元格中输入文字“框架应用”，设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。 （17）在表格4的第二个单元格中插入水平线，并输入文字，设置文字的字体为“隶书”，大小为“18”像素。效果如下图所示： （18）保存全部网页并在浏览器中预览效果。 3、制作下图所示表单 步骤： （1）选择“文