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

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

《实验2 框架表单行为的应用.docx》由会员分享，可在线阅读，更多相关《实验2 框架表单行为的应用.docx（23页珍藏版）》请在冰豆网上搜索。

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

实验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）选择“文件”|“新建”命令，在弹出的对话框中新建一个网页，名为bd.html，在“文档”工具栏中将网页的标题设置为“表单应用”。

（2）插入一个2行1列表格（表格1），表格宽度为“98%”，边框为“0”。

（3）在表格1的第一个单元格中输入文字“表单应用”，设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。

（4）将光标定位在表格1的第二个单元格中，选择“插入”|“表单”|“表单”命令，在该单元格中插入一个表单域。

（5）在表单域中插入一个15行2列的表格（表格2）。

表格宽度为500像素，边框为“1”，间距为“0”。

将该表格的左边列所有单元格的宽度设置为“90”像素，前9行单元格高度设置为“30”。

（6）将表格2的第一行合并为一个单元格，设置单元格水平对齐方式为“居中对齐”，背景颜色为“#DF3071”。

在单元格中输入文字“请完成以下内容的填写”，设置文字的大小为“18”像素，颜色为“白色”。

（7）将表格2的左边列各单元格的水平和垂直对齐方式都设置为“居中”对齐，并分别输入文本信息：

昵称、密码、确认密码、性别、籍贯、出生日期、电子邮箱、联系电话、个人爱好、照片和备注，如下图所示

（8）将光标定位在第二行第二个单元格中，单击“插入”工具栏上的“表单”类别，然后单击“文本字段”按钮

，在弹出的对话框中单击“确定”按钮即在单元格中插入了一个单行文本框。

设置该文本字段的字符宽度为“24”。

在文本字段后输入“*”。

效果如下图：

（9）用同样的方式在“密码”和“确认密码”后插入文本框。

选中文本框，在“属性”面板中设置名称为psw，字符宽度设置为24，最多字符数为12，类型设置为“密码”。

属性如下图所示:

（10）将光标定位在性别后的单元格中，单击“插入”工具栏上的“表单”类别，然后单击“单选按钮”按钮

，在辅助功能属性窗口中的标签文字中输入“男”，如下图所示。

确定后则在单元格中插入了一个单选按钮。

设置刚插入的单选按钮的名称为sex，选定值为1，初始状态为“已勾选”，如图所示，

（11）用同样的方法在男的后面插入一个单选按钮，在“属性”面板中设置单选按钮的名称为sex，选定值为2，初始状态为“未选中”，并在该按钮后输入文本“女”。

最后效果如下图所示：

（12）将光标定位在籍贯后的单元格中。

单击“列表/菜单”按钮

，则在插入点添加一个菜单，在菜单的“属性”面板中设置名称为”jg”，类型为“菜单”。

在“列表值”对话框中添加项目如下图所示。

设置好列表值后，在“属性”面板中设置初始化时选定“四川”。

在菜单后输入文字“省（市）”。

最后效果如下图所示：

（13）用同样的方法设置出生日期如下图所示：

（14）参考昵称后文本字段的方法设置“电子邮箱”和“联系电话”，效果如下图所示：

（15）将光标定位在个人爱好后的单元格中，插入复选框。

将插入的复选框名称设置为hobby，选定值设置为internet，初始状态为“未选中”，并在复选框后输入文本“网络”。

用同样的方式插入其他复选框，名称都设置为hobby，选定值分别为：

music、travel、read、sports和draw。

外观效果如下图所示：

（16）将光标定位在照片后的单元格中，插入“文件域”。

外观效果如下图所示：

（17）将光标定位在备注后的单元格中，单击“文本区域”按钮

，在插入点添加一个文本区域对象。

在“属性”面板中设置插入文本区域的字符宽度为40，行数为5，换行为“默认”。

（18）在表格2的第13行右边单元格中输入以下文字：

1.请填写上面的的各项内容。

2.带星号的项目为必填项。

3.谢谢您提交以上重要信息。

（19）将表格2的第14行合并为一个单元格。

设置单元格水平对齐方式为“居中对齐”，背景颜色为“#DF3071”。

在单元格中输入文字“填写完成后，选择下面的”提交“按钮提交表单。

”，设置文字的大小为“14”像素，颜色为“白色”。

（20）将表格2的最后一行合并为一个单元格，在“插入”工具栏中单击按钮

，将插入的按钮值设为“提交”，动作设为“提交表单”，用同样的方法插入第二个按钮，将该按钮的动作设置为“重置表单”。

效果如下图：

（21）保存文件。

（22）设置超链接

打开Frameset.html文件。

在该框架文件的左边导航列表中选中文字“表单应用”，设置超链接文件为“bd.html”，目标为“mainFrame”。

属性如下图所示：

（23）在浏览器中预览效果。

4、行为应用

（1）制作网页内容

步骤：

①选择“文件”|“新建”命令，在弹出的对话框中新建一个网页，名为xw.html，在“文档”工具栏中将网页的标题设置为“行为应用”。

②插入一个3行1列表格，表格宽度为“98%”，边框为“0”。

③在表格的第一个单元格中输入文字“行为应用”，设置该文字字体为“隶书”，大小为“36”像素，前后都插入图片logo_3.jpg。

④在表格的第二个单元格中插入水平线，并输入文字，设置文字的字体为“隶书”，大小为“18”像素。

（2）制作弹出窗口。

①在文档窗口的标签选择器中选择标签。

如下图所示：

②选择“窗口”|“行为”命令打开“行为”面板。

单击“行为”面板上的“+”按钮，打开动作菜单。

从动作菜单中选择“打开浏览器”命令，在弹出的“打开浏览器窗口”对话框中设置参数。

如下图所示：

③保存文件并在浏览器中预览。

（3）设置状态行文本。

选中标记或一个链接。

单击“行为”面板上的“+”按钮，在打开的动作菜单中选择“设置文本”|“设置状态文本”命令，在弹出的“信息”对话框中输入需要的文本，

在“行为”面板中设置事件为“onLoad”。

（4）创建图像交换效果。

①将表格的第三行单元格水平对齐设置为“右对齐”。

在单元格中插入图片“bg.jpg”，将该图像的名称改为“begin”。

设置该图片的超链接为“mainframe.html”。

属性如下图所示

②选中该图片，单击“行为”面板上的“+”按钮，在打开的动作菜单中选择“交换图像”，在“交换图像”对话框中设置设定原始档为“end.jpg”,如下图所示：

③保存并在浏览器中预览效果。

5、层的应用

利用层布局制作以下效果网页

步骤：

（1）选择“文件”|“新建”命令，新建一个网页，将该网页保存为ceng.html，在“文档”工具栏中将网页的标题设置为“层的应用”。

在页面属性中设置超链接属性如下图所示：

（2）制作阴影字

①选择“插入”|“布局对象”|“层”命令，在网页中插入一个层（Layer1）。

将该层的属性设置如下图所示：

②在层中输入文字“层的应用”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“黑色”，前后都插入图片logo_3.jpg。

效果如下图所示：

③再插入一个层（Layer2），在层中输入文字“层的应用”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“#FD658E”。

④调节Layer2层的位置，将该层放在Layer1层中文字“层的应用”上方，达到阴影效果。

最后效果如下图所示：

（3）在层（Layer1）下方插入层（Layer3），在Layer3中插入图片“qczl5.jpg”。

（4）在层（Layer3）的右边插入层（Layer4）。

在该层中插入图片“dh.jpg”。

适当调整层的位置。

效果如下图所示：

（5）在层（Layer4）的上方插入层（Layer5）。

在Layer5中输入文字：

框架应用、表单应用、行为应用、层的应用。

设置文字字体为“隶书”，大小为“18”像素，颜色为黑色。

设置文字“框架应用”的超链接为文件“mainframe.html”，文字“表单应用”的超链接为“bd.html”。

效果如下图所示：

（6）插入层（Layer6），设置层的属性如下图所示：

（7）在层Layer6中放入flash动画“woso_flash_25.swf”。

设置动画的高为“500”，，宽为“400”，并设置背景为透明。

说明：

各层z轴顺序如下图所示：

布局效果如下图所示：

（8）保存文件并在浏览器中预览效果。

6、行为和层的综合应用——拼图游戏

说明：

此实例的目的是让大家了解行为和层的集合使用可以制作多种效果。

预览时将图片放到正确位置将会出现如下提示框。

步骤：

（1）新建一个网页，将该网页保存为“pt.html”。

（2）在网页中插入层（Layer1），在层中输入文字“拼图游戏”，设置该文字字体为“隶书”，加粗，大小为“36”像素，颜色为“黑色”，前后都插入图片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）在文档窗口的标签选择器中选择标签，单击“行为”面板上的“+”按钮，打开动作菜单。

从动作菜单中选择“拖动层”命令。

在弹出的拖动层对话框中设置层为“p1”，放下目标左为“180”，上为“150”。

靠齐距离为“50”，如下图所示。

（11）在拖动层对话框中选择“高级”选项卡，在放下时呼叫JavaScript的文本框中输入“alert（'你真棒'）”.其余设置不变。

（12）在行为面板中将拖动层的事件改为“onMouseOver”。

（13）用同样的方法设置拖动层p2和p3。

①P2拖动层行为设置如下图所示：

②P3拖动层行为设置如下图所示：

③高级选项卡设置如p1。

④行为面板如图所示：

（14）最后布局效果如下图所示：

（15）保存文件并在浏览器中预览效果。

说明：

以上各题操作完成后，站点结构如下图所示：

可在框架页中设置各文件的超链接，设置方式参考表单页的超链接设置。

完成后在浏览器中预览框架页效果。