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

1、实验2 框架表单行为的应用实验2 框架、表单、行为的应用一、 实验目的1、掌握使用框架制作网页的方法2、了解表单各元素的设置方法3、了解行为的用法4、了解层的应用二、实验内容1、站点导入要求：将站点shiyan3导入到dreamweaver中步骤：（1）将实验站点根文件夹shiyan3复制到最后一个硬盘。（2）选择菜单“站点”“管理站点”命令，在打开的站点管理对话框中单击“导入”按钮，在导入站点对话框中选择站点文件“shiyan3.ste”导入到dreamweaver中，导入时选择shiyan3文件夹为该站点的根文件夹。说明：所有相关文件在发给大家的实验文件夹中。2、利用框架制作如下效果的网页

2、步骤：（1）选择“文件”|“新建”命令，在弹出的“新建文档”对话框中选择常规分类中的“框架集”选项，在“框架集”列下选择“上方固定，左侧嵌套”，如下图所示。单击“创建”按钮将会弹出“框架标签辅助功能属性”对话框，在此采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。（2）选择“窗口”|“框架”命令，打开“框架”面板，选中整个框架集，在属性面板中，将行的值设置为120，单位为“像素”，其余属性不变。如图所示：在“框架”面板中，选中子框架集。在属性面板中，将列的值设置为145，单位为“像素”，其余属性不变，如下图所示： 说明：选择“查看”|“可

3、视化助理”|“框架边框”，可用鼠标在文档窗口中直接拖动框架边框来调节各框架的大小。（3）选择“文件”|“保存全部”命令，在弹出的“另存为”对话框中将框架集保存为Frameset.html。保存好框架集后会再次弹出“另存为”对话框，在文档窗口中可以看到有个阴影框将右侧框架框起来，表示要保存的框架为右侧框架，将右侧框架保存为mainframe.html。用同样的方法保存上方框架为topFrame.html，左侧框架为leftFrame.html。（4）鼠标在topFrame框架中的空白处单击，在页面属性中将背景色设为“黑色”，上、下、左、右边距全部设为0。插入一个1行1列的表格（表格1），宽度为1

4、00%，高度为“120像素”，对齐方式为“居中对齐”。再设置单元格垂直对齐方式为“底部”对齐。（5）在表格1中插入一个2行2列的表格（表格2），表格宽度为100%，间距为“0”。将表格2第一行单元格背景颜色设置为“红色（#FF0000）”，第二行单元格背景颜色设置为“黑色”。如下图所示（6）将表格2第一行左边单元格的宽设置为“120”像素，高设置为“55”像素。水平对齐方式设置为“右对齐”，垂直对齐方式设置为“底部对齐”。并在该单元格中插入图片“logo_1.gif”。属性面板如下图所示。（7）将表格2第一行右边单元格的水平和垂直对齐方式都设置为“居中对齐”，并输入文字“DREAMVEAVER

5、 网页设计”。设置文字字体为“Arial”，大小为“36”像素。最后效果如下图所示。（8）将表格2第二行左边单元格的宽设置为“120”像素，水平对齐方式设置为“右对齐”，垂直对齐方式设置为“顶端”对齐。并在该单元格中插入图片“logo_2.gif”。最后效果如下图所示：（9）鼠标在leftFrame框架中的空白处单击，在页面属性中将背景色设为“黑色”，上、下、左。右边距全部设为0。超链接属性如下图所示：（10）插入一个7行1列的表格（表格3），表格宽度为100像素，单元格间距为“1”，背景颜色为“黑色”，居中对齐。将所有单元格的高度设为40像素，背景颜色为“红色（#FF0000）”。（11）将

6、表格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%

7、”，边框为“0”。（16）在表格4的第一个单元格中输入文字“框架应用”，设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。（17）在表格4的第二个单元格中插入水平线，并输入文字，设置文字的字体为“隶书”，大小为“18”像素。效果如下图所示：（18）保存全部网页并在浏览器中预览效果。3、制作下图所示表单步骤：（1）选择“文件”|“新建”命令，在弹出的对话框中新建一个网页，名为bd.html，在“文档”工具栏中将网页的标题设置为“表单应用”。（2）插入一个2行1列表格（表格1），表格宽度为“98%”，边框为“0”。（3）在表格1的第一个单元格中输入文字“表单应用”，

8、设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。（4）将光标定位在表格1的第二个单元格中，选择“插入”|“表单”|“表单”命令，在该单元格中插入一个表单域。（5）在表单域中插入一个15行2列的表格（表格2）。表格宽度为500像素，边框为“1”，间距为“0”。将该表格的左边列所有单元格的宽度设置为“90”像素，前9行单元格高度设置为“30”。（6）将表格2的第一行合并为一个单元格，设置单元格水平对齐方式为“居中对齐”，背景颜色为“#DF3071”。在单元格中输入文字“请完成以下内容的填写”，设置文字的大小为“18”像素，颜色为“白色”。（7）将表格2的左边列各单

9、元格的水平和垂直对齐方式都设置为“居中”对齐，并分别输入文本信息：昵称、密码、确认密码、性别、籍贯、出生日期、电子邮箱、联系电话、个人爱好、照片和备注，如下图所示（8）将光标定位在第二行第二个单元格中，单击“插入”工具栏上的“表单”类别，然后单击“文本字段”按钮，在弹出的对话框中单击“确定”按钮即在单元格中插入了一个单行文本框。设置该文本字段的字符宽度为“24”。在文本字段后输入“*”。效果如下图：（9）用同样的方式在“密码”和“确认密码”后插入文本框。选中文本框，在“属性”面板中设置名称为psw，字符宽度设置为24，最多字符数为12，类型设置为“密码”。属性如下图所示:(10) 将光标定位在

10、性别后的单元格中，单击“插入”工具栏上的“表单”类别，然后单击“单选按钮”按钮，在辅助功能属性窗口中的标签文字中输入“男”，如下图所示。确定后则在单元格中插入了一个单选按钮。设置刚插入的单选按钮的名称为sex，选定值为1，初始状态为“已勾选”，如图所示，（11）用同样的方法在男的后面插入一个单选按钮，在“属性”面板中设置单选按钮的名称为sex，选定值为2，初始状态为“未选中”，并在该按钮后输入文本“女”。最后效果如下图所示：（12）将光标定位在籍贯后的单元格中。单击“列表/菜单”按钮，则在插入点添加一个菜单，在菜单的“属性”面板中设置名称为”jg”，类型为“菜单”。在“列表值”对话框中添加项目

11、如下图所示。设置好列表值后，在“属性”面板中设置初始化时选定“四川”。在菜单后输入文字“省（市）”。最后效果如下图所示：(13)用同样的方法设置出生日期如下图所示：（14）参考昵称后文本字段的方法设置“电子邮箱”和“联系电话”，效果如下图所示：（15）将光标定位在个人爱好后的单元格中，插入复选框。将插入的复选框名称设置为hobby，选定值设置为internet，初始状态为“未选中”，并在复选框后输入文本“网络”。用同样的方式插入其他复选框，名称都设置为hobby，选定值分别为：music、travel、read、sports和draw。外观效果如下图所示：（16）将光标定位在照片后的单元格中，

12、插入“文件域”。外观效果如下图所示：（17）将光标定位在备注后的单元格中，单击“文本区域”按钮，在插入点添加一个文本区域对象。在“属性”面板中设置插入文本区域的字符宽度为40，行数为5，换行为“默认”。（18）在表格2的第13行右边单元格中输入以下文字： 1.请填写上面的的各项内容。 2 .带星号的项目为必填项。 3.谢谢您提交以上重要信息。（19）将表格2的第14行合并为一个单元格。设置单元格水平对齐方式为“居中对齐”，背景颜色为“#DF3071”。在单元格中输入文字“填写完成后，选择下面的”提交“按钮提交表单。”，设置文字的大小为“14”像素，颜色为“白色”。（20）将表格2的最后一行合并

13、为一个单元格，在“插入”工具栏中单击按钮，将插入的按钮值设为“提交”，动作设为“提交表单”，用同样的方法插入第二个按钮，将该按钮的动作设置为“重置表单”。效果如下图：（21）保存文件。（22）设置超链接 打开Frameset.html文件。在该框架文件的左边导航列表中选中文字“表单应用”，设置超链接文件为“bd.html”，目标为“mainFrame”。属性如下图所示：（23）在浏览器中预览效果。4、行为应用（1）制作网页内容步骤：选择“文件”|“新建”命令，在弹出的对话框中新建一个网页，名为xw.html，在“文档”工具栏中将网页的标题设置为“行为应用”。插入一个3行1列表格，表格宽度为“9

14、8%”，边框为“0”。在表格的第一个单元格中输入文字“行为应用”，设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。在表格的第二个单元格中插入水平线，并输入文字，设置文字的字体为“隶书”，大小为“18”像素。（2）制作弹出窗口。在文档窗口的标签选择器中选择标签。如下图所示：选择“窗口”|“行为”命令打开“行为”面板。单击“行为”面板上的“+”按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的“打开浏览器窗口”对话框中设置参数。如下图所示：保存文件并在浏览器中预览。（3）设置状态行文本。选中标记或一个链接。单击“行为”面板上的“+”按钮，在打开的动作

15、菜单中选择“设置文本”|“设置状态文本”命令，在弹出的“信息”对话框中输入需要的文本，在“行为”面板中设置事件为“onLoad”。（4）创建图像交换效果。将表格的第三行单元格水平对齐设置为“右对齐”。在单元格中插入图片“bg.jpg”，将该图像的名称改为“begin”。设置该图片的超链接为“mainframe.html”。属性如下图所示选中该图片，单击“行为”面板上的“+”按钮，在打开的动作菜单中选择“交换图像”，在“交换图像”对话框中设置设定原始档为“end.jpg”,如下图所示：保存并在浏览器中预览效果。5、层的应用利用层布局制作以下效果网页步骤：（1）选择“文件”|“新建”命令，新建一个

16、网页，将该网页保存为ceng.html，在“文档”工具栏中将网页的标题设置为“层的应用”。在页面属性中设置超链接属性如下图所示：（2）制作阴影字选择“插入”|“布局对象”|“层”命令，在网页中插入一个层（Layer1）。将该层的属性设置如下图所示：在层中输入文字“层的应用”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“黑色”，前后都插入图片logo_3.jpg。效果如下图所示：再插入一个层（Layer2），在层中输入文字“层的应用”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“#FD658E”。调节Layer2层的位置，将该层放在Layer1层中文字“层的应用”

17、上方，达到阴影效果。最后效果如下图所示：（3）在层（Layer1）下方插入层（Layer3），在Layer3中插入图片“qczl5.jpg”。（4）在层（Layer3）的右边插入层（Layer4）。在该层中插入图片“dh.jpg”。适当调整层的位置。效果如下图所示：（5）在层（Layer4）的上方插入层（Layer5）。在Layer5中输入文字：框架应用、表单应用、行为应用、层的应用。设置文字字体为“隶书”，大小为“18”像素，颜色为黑色。设置文字“框架应用”的超链接为文件“mainframe.html”，文字“表单应用”的超链接为“bd.html”。效果如下图所示：（6）插入层（Layer6

18、），设置层的属性如下图所示：（7）在层Layer6中放入flash动画“woso_flash_25.swf”。设置动画的高为“500”，宽为“400”，并设置背景为透明。说明：各层z轴顺序如下图所示：布局效果如下图所示：（8）保存文件并在浏览器中预览效果。6、行为和层的综合应用拼图游戏说明：此实例的目的是让大家了解行为和层的集合使用可以制作多种效果。预览时将图片放到正确位置将会出现如下提示框。步骤：（1）新建一个网页，将该网页保存为“pt.html”。（2）在网页中插入层（Layer1），在层中输入文字“拼图游戏”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“黑色”，前后都插入

19、图片logo_3.jpg。（3）再插入一个层Layer2，设置该层的属性如下图所示：（4）在层Layer2中插入一个1行3列表格，设置该表格属性如下图所示：（5）给表格各单元格设置不同颜色，效果如下图所示：（6）在Layer2旁边插入层Layer3，将层的编号改为“p1”，属性设置如下图所示：（7）在层中插入图片“1.jpg”。（8）用同样的方法插入层, 将层的编号改为“p2”, 设置高和宽属性同p1。插入图片“2.jpg”。（9）制作层“p3”，高宽属性设置同p1，插入图片“3.jpg”。布局效果如下图：层面板如下图所示：（10）在文档窗口的标签选择器中选择标签，单击“行为”面板上的“+”按

20、钮，打开动作菜单。从动作菜单中选择“拖动层”命令。在弹出的拖动层对话框中设置层为“p1”，放下目标左为“180”，上为“150”。靠齐距离为“50”，如下图所示。（11）在拖动层对话框中选择“高级”选项卡，在放下时呼叫JavaScript的文本框中输入“alert(你真棒)”.其余设置不变。（12）在行为面板中将拖动层的事件改为“onMouseOver”。（13）用同样的方法设置拖动层p2和p3。 P2拖动层行为设置如下图所示： P3拖动层行为设置如下图所示： 高级选项卡设置如p1。 行为面板如图所示：（14）最后布局效果如下图所示：（15）保存文件并在浏览器中预览效果。说明：以上各题操作完成后，站点结构如下图所示：可在框架页中设置各文件的超链接，设置方式参考表单页的超链接设置。完成后在浏览器中预览框架页效果。