【实验总结】CSS样式应用广泛,应在实践操作中积累经验,熟练掌握。 注意代码内容。
实验三
【实验目的】
1. 学会建立表单对象和表格
2. 能够按要求对表格进行美化处理
3. 掌握表单中各个表单对象的特殊设置及对表单的检查
【实验内容】
制作表单如下图4(form.html):
1、单元格1列和最后一行的背景颜色为#00CCFF,
2列的1-6行单元格边框颜色为#0000CC;
2、第1(多行),2,3,4文本域可输入的内容与提示相对应,并且是必需的;
当点击提交按钮(onsubmit)时会对输入内容进行检测,是否都有内容填入,
并检测2,3,4文本框是否输入的为数字、邮箱地址、0-5之间的数字。 3、出生年份:点击后面的下拉菜单,前面的文本域会显示所选择内容,其中下拉菜单从1900—2002年。
4、最后自己在最后一行表格的前面增加一个文件域。
图4
【实验步骤】 1.
点击,下图第一个按钮,添加表单。
2.在表单中插入表格,七行两列,合并最后一行单元格。 3.单元格1列和最后一行的背景颜色为#00CCFF,
2列的1-6行单元格边框颜色为#0000CC;
4.第一列输入图4内容,第六行第一列设置右对齐。
5.第二列第一行插入文本区域,标签文字内容为(不得多于18个字符),点选在表单项后。
6.第二列2,3,4,5行插入文本字段。5行插入代码片段,表单元素,下拉菜单,1900-2002,初始值设为2002。
7.第二列第六行插入四个复选框,标签文字如图4,第三、四个初始状态设为已勾选。
8.第七行插入按钮,居中,行为,检查表单,按要求设置。 9.点到第七行,在上边插入行,插入文件域,居中。 【实验结果】
【实验总结】表单是应用很广泛的网页内容,熟练掌握检查表单设置及各用户输入项的特点,掌握表格的美化技巧。
实验四
【实验目的】
1. 熟悉时间轴中行为的运用 2. 练习在层中插入图像 3. 掌握时间轴的使用
【实验内容】
图5
插入图像“holiday.gif”使得图像沿着下图5所示轨迹重复运动,并且实现
光标放在图像上时,图像停止运动,从图像移开时又重新运动。 (time.html)
【实验步骤】1.绘制层,层里插入图片。 2.将层拖到时间轴面板,调整,增加关键帧并拖动层到相应位置。 3.在时间轴面板上点选循环。
4.打开行为窗口,onMouthOver播放时间轴,onMouthOut停止时
间轴
【实验结果】
4. 【实验总结】熟悉时间轴中行为的运用,学会绘制层路径。
实验五
【实验目的】 1. 2. 3. 4.
【实验内容】
拼图游戏:对一副完整图片进行分割,分割成不得少于6部分的小图片;实
整幅图像的分割。
掌握在表格和层之间的转化。 练习空链接的使用。
掌握层行为(拖拉、隐藏和显示层)的使用。
现点击数字,相应图片显示,离开数字,相应图片隐藏,当选中相应图片时,按下鼠标左键屏幕上可以拖拉图片,并实现能拼成一幅图画的效果。
【实验步骤】1.使用fireworks工具将图片切片成九片,导出切片;
2.插入表格,三行三列,分别在九个单元格中按顺序插入切好
图片;
3.表格转换为层(修改-转换),设置层状态为hidden,可重叠; 4.插入表格,三行三列,按顺序在九个单元格中输入1-9九个
数,字分别设置空链接;
5.数字设置行为,onClick显示对应层,onMouthover隐藏层; 6.插入图片“开始”,设置onClick显示所有层;
7.设置所有层 拖动层。
【实验结果】
【实验总结】熟练掌握各种层状态设置及行为设置,会用fireworks进行图片修整。会建空链接。
实验六
【实验目的】
掌握为网页插入动态元素,如flash视频,flash文本,flash按钮等。