网页制作与规划实验教案.docx
《网页制作与规划实验教案.docx》由会员分享，可在线阅读，更多相关《网页制作与规划实验教案.docx（33页珍藏版）》请在冰豆网上搜索。
网页制作与规划实验教案
实验一站点的创建与基本HTML标记的应用
一、实验目的及要求
1.了解组成网页的基本元素
2.掌握文本元素的添加和编辑方法
3.掌握图像元素的添加和运用技巧
4.掌握几种链接的具体创建方法
5.掌握图像元素的添加和运用技巧
二、实验学时
4学时
三、实验内容
任务一：
在网页中基本页面元素的应用
1．准备工作
在c盘或其他盘新建一个文件夹作为站点文件夹，文件夹名称为myweb3。
复制给定的一个图像文件夹images和一个网页文件sx3-2.htm。
2．建立本地站点‘
用已学方法建立本地站点。
3．依据图3．38所示的效果，向网页中添加并编辑页面元素，具体操作步骤如下。
（1）在默认打开的网页中选择“修改”|“页面属性”菜单命令，设置使背景颜色为#CCCCCC。
（2）输入网页首行文本“老邮票知多少”，大小为48像素，颜色为#FFFF00，字体为“华文行楷”粗体，居中对齐。
（3）在网页第二行插入更新日期和版权信息，选择“插入”l“日期”菜单命令，将当前编辑日期插入网页，然后利用“插入”面板上“文本”选项卡中的晶按钮，插入多个空格，再输入版权信息“◎版权所有：
D．Wei@sohu．com”整行文字大小为18像素，颜色为#000000，字体为默认字体，粗体，居中对齐。
（4）在网页第三行选择“插入”|“水平线”菜单命令，插入一条水平线，高度为5，其他属性取默认值。
（5）在网页第四行、第七行各插入一行文本，内容分别为“纪33（C33）：
中国古代科学家、1955．8．25发行600万套、全套4枚、新票市场参考价￥550元。
”和“纪36（C36）：
中国工农红军胜利完成二万五千里长征二十周年、1955．12．30发行600万套、全套2枚、新票市场参考价￥850元。
”文字大小为18像素，格式为“项目列表”，其他属性取默认值。
（6）在网页第五行选择“插入”I“图像”菜单命令，插入四张邮票图像，文件名分别为0637.jpg、0638.jpg、0639.jpg、0640.ipg。
每张图像的宽为110、高为150，其他属性取默认值。
（7）在网页第六行插入一条水平线，宽为400像素，其他属性取默认值。
（8）在网页第八行插入两张邮票图像，文件名分别为0645.jPg、0646.ipg，图像宽高分别为150／110和110／150，其他属性取默认值。
4．保存网页
选择“文件”|“保存”菜单命令，在站点中将此网页保存为sx3-1．htm。
5．打开并编辑给定的网页文件sx3．2．htm，如图3-39所示。
（1）建立图像热点链接。
为此选中网页上方图像，利用“属性”检查器中的热点工具在图像上建立两个热点，如图3．40所示。
从左到右两个热点分别链接到sx3-2-1．htm和sx3-2-2．htm文件（两个文件可稍后建立）。
（2）插入命名锚记。
为此将光标放在网页标题“教育天地”后，选择“插入”I‘‘命名锚i6'’菜单命令，在输入对话框中输入锚记“A0"。
依此方法在网页右侧文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”处分别插入命名锚记，依次为A1～A7。
（3）创建锚点链接。
为此分别创建左列目录文本“教养员”、“教员”、“特级教师”、“助教”、“讲师”、“副教授”和“教授”与右列命名锚记A1～A7的锚点链接。
然后再将各段下方的文本“返回”与标题处锚记A0建立锚点链接。
（4）创建无址链接。
选中网页上方文本“教师篇”，在“属性”检查器的链接栏中输入“≠}”即可。
（5）创建邮件链接。
选中网页最后一行文本“联系”，然后在“属性”检查器的链接栏中输入“mailto：
abc@163．com'’即可。
如图3—41所示。
6．保存网页
选择“文件”I“保存”菜单命令，将此网页保存在站点中。
7建立其他网页
（1）新建一张网页，输入“名人看教育”，文件名为sx3-2-1.htm，保存在站点中。
（2）再新建一张网页，输入“教育话题”，文件名为sx3-2-2.htm，保存在站点中。
8．站点测试
按【F12】键在浏览器中预览，观察效果与样图是否一致。
单击建立的每个链接，以测试超链接是否都能够正确跳转。
任务二：
HTML基本标记的应用
1．准备工作
在C盘或其他盘符下新建一个工作夹，制作的所有页面都保存在这个文件夹内。
将给定的图像素材文件复制到工作文件夹中。
2．建立名称为了test.html的HTML页面，效果如图4-1所示。
页面功能要求为：
（1）页面标题为“基本标记测试”；
（2）页面内的所有标题文字均为标题2格式；
（3）单击链接文字时要求在新的浏览器窗口中，打开test.html页面自身；
（4）图片名称为1．gif，存放在工作文件夹中，与test．htm页面位于同一位置；
（5）依据图4—1所示样式，完成页面中的表格制作
3．建立名称为login．htm的HTMI。
页面，效果如图4—2所示。
页面功能要求为：
（1）页面标题为“表单标记测试”；
（2）“姓名”为单行文本框，宽10个字符，最多能填写20个字符；
（3）“性别”为单选按钮，传递的值为“男”和“女”，第一个按钮为默认选中；
（4）“职业”为下拉列表框，内容有“教师”、“工人”和“职员”；
（5）“爱好”为复选按钮，传递的值分别对应为1，2，3，4，第一个按钮为默认选中；
（6）“留言”为多行文本框，大小为5行40列，默认内容为“说几句吧!
”；
（7）“提交”按钮和“重置”按钮分别完成提交表单功能和重置表单功能，表单提交方式为get；
（8）页面上的所有文字默认为3号字。
4．页面测试
在浏览器中浏览所完成的页面，观察效果是否符合要求。
实验二表格、表单和框架的应用
一、实验目的及要求
1.掌握表格的基本用法
2.掌握表格布局页面的方法
3.学会用框架布局页面的方法
4.了解框架布局的特点
二、实验学时
10学时
三、实验内容
任务一：
表格的应用
1．准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。
输入你想要的站点名称，这里输入myweb5。
在此文件夹中新建一个图像文件夹images，并将给定图像素材复制到其中。
2．建立本地站点
用已学方法建立本地站点。
3．利用表格编辑首页
（1）在默认打开的网页中，选择“修改”l‘‘页面属性”菜单命令，设置背景颜色为#clclcl。
（2）在网页中插入一个2行2列的表格，参数设置如图5-21所示。
选中表格，在“属性”检查器的表格“高”输入框中输入100，单位为“％”。
将第一行两个单元格合并为一个，如图5-22所示。
．
（3）利用“属性”检查器调整3个单元格的宽度和高度。
将光标放在第一行单元格内，在“属性”检查器“高”输入框中输入110，“宽”不输入；将光标放在第二行第一个单元格内，在“属性”检查器“宽”输入框中输入250，“高”不输入；将光标放在第二行第二个单元格内，在“属性”检查器“宽”输入框中输入450，“高”不输入。
效果如图5-22所示。
（4）按样张（如图5-23所示）在第一行单元格中输入“饮食本草”，文字大小80像素，字体“华文彩云”，前两个字白色，后两个字颜色为#009900。
在文字下方插入一条水平线，属性取默认值。
（5）在第二行第一个单元格内插入一嵌套表格，表格相关属性分别为8行1列、表格高度和宽度均为100％、边框粗细为0、单元格边框为0、单元格间距为0。
如图5．23所示。
（6）在第二行第二个单元格内插入一嵌套表格，表格相关属性分别为3行3列、表格高度和宽度均为100％、边框粗细为2、单元格边框为0、单元格间距为0。
如图5-23所示。
（7）在左侧嵌套表格各行中分别输入图5．24所示内容，然后将8个单元格的高度均设置为50。
文字大小为36，字体为“华文新魏”，然后将每行文字均创建无址链接。
（8）在中侧嵌套表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150，注意：
当图片尺寸变小后，表格不会自动缩小，这时可以选中整个表格，在“属性”检查器中单击“清除行高”和“清除列宽”两个按钮来调整表格大小。
4．保存网页
选择“文件”！
“保存”菜单命令，将此网页保存在站点中。
5．站点测试
按【F12】键在浏览器中预览，观察效果是否与样张一样。
任务二：
框架的应用
1．准备工作
在C盘或其他盘新建一个文件夹，作为站点文件夹。
并将给定的图片文件和素材文件复制到站点文件夹中。
2．建立本地站点
用已学方法建立本地站点。
3．利用框架布局页面
站点首页部局效果如图15-15所示，页面制作步骤如下。
（1）在默认打开的网页中，选择“插入”面板上的“布局’’选项卡。
单击框架按钮的下拉箭头，从下拉菜单中选择
命令。
（2）将光标置于顶端框架内，选择“修改”|“页面属性”菜单命令，设置背景颜色为#C1C1C1。
同理将左框架和主框架的页面背景色都设置为#C1C1C1。
（3）选择“窗口“|‘‘框架”菜单命令，将“框架”面板调出来。
然后设置三个框架的大小。
“顶端框架”：
在“框架”面板中选定外层框架集，在“属性”检查器将顶端框架的高度设置为“120像素”，下面部分设置为“1”，单位为“相对”。
将“边框”设置为“是”，“边框宽度”设置为1’，边框颜色设置为“#CCCCCC”。
如图15—16所示。
“左侧框架”在“框架”面板中选定内层的子框架集，在“属性”检查器将左侧框+架的宽度设置为“250像素”，右侧主框架设置为“1”，单位为“相对”。
将“边框”设置为“是”，“边框宽度”设置为“1’，边框颜色设置为“#CCCCCC”。
如图15—17所示。
（4）在顶端框架内输入站点标题‘‘饮食本草”，文字大小为80像素，字体为“华文彩云”，前两个字白色，后两个字颜色为#009900，居中对齐。
（5）在左侧框架内插入一个表格，表格相关属性分别为9行1列、表格高度和为100％、宽度为100％、边框粗细为0、单元格边框为0、单元格间距为0、对齐方式为右对齐。
然后将9个单元格的高度均设置为50，在其中输入样张中的文字，文字大小为36，字体为“华文新魏”。
如图15．15所示。
（6）在右侧主框架中插入一个表格，表格相关属性分别为3行3列、表格高度和宽度任意、边框粗细为2、单元格边框为0、单元格间距为0、居中对齐。
按样张效果在表格中分别插入5张文件夹images中的图片，每张图片的宽度和高度均为150。
注意：
当图片尺寸变小后，要在“属性，，检查器中单击cc清除行高’’和“清除列宽”两个按钮，使表格调整到最小。
如图15—15所示。
4．保存框架网页
选择“文件”|“保存全部”菜单命令，按照保存窗口弹出的顺序，分别将框架集、右侧主框架、左侧框架、顶端框架命名为index．htm、main．htm、left．htm、top．htm。
注意以上文件均保存在本站点中。
5．建立导航链接
具体制作步骤如下。
（1）按导航栏目分别建立8个相关内容的页面，或者从提供的素材文件中获取。
（2）在左侧框架内选择“首页”文字，在“属性”检查器的链接栏中设置目标文件为本框架集页面．Index．htm，目标选择“parent'’。
（3）在左侧框架内选择“谷物篇”文字，在“属性”检查器的“链接”栏中设置目标文件为素材文件guwu．htm，“目标”栏选择右侧主框架的名称“mainframe”。
同理，将左侧框架内的各项导航内容分别链接到对应的素材文件，且“目标”均设置为“mainframe”。
（4）再次选择“文件”|“保存全部”菜单命令。
6．预览和测试站点
在打开的Index．htm文件中，按【F12】键在浏览器中预览，观察效果与样张是否一样，然后，测试各导航链接内容和显示位置是否正确。
效果如图15-18所示。
实验三网页图像和动画的设计与应用
一、实验目的及要求
1．掌握在Fireworks中创建动画的方法
2．掌握在Fireworks中制作蒙版的创建方法
3．掌握基本动画补间操作
二、实验学时
8学时
三、实验内容
任务一：
gif动画
1．准备工作
在c盘或其他盘新建一个文件夹，本次实训的内容将全部保存在该文件夹下。
2．一张向日葵画框图片的制作
（1）新建文件
打开Fireworks8，在“开始页”中选择“新建Fireworks文件”，新建一个空白文件。
在弹出的“新建文档”中设置画布的“宽”为360，“高”为400，画布颜色选择白色，然后单击“确定”按钮。
选择“文件”|‘‘另存为”菜单命令，将文件以“sx6—1．png”为文件名保存在指定文件夹下。
（2）制作图片
选择“文件”l‘‘导入”菜单命令，在“导入”对话框中选择需要导入的图片“画框．gif"。
此时光标的形状变为V-，在画布上单击鼠标左键，即可将该图片以原始大小导入（也可以按下左键拖放，将图片以不同的大小导入）。
此时可以在“层”面板中看到刚导入的对象。
用相同的方法导入第二张图片“向日葵．png”，将图片的大小调整合适，放入画框内，并调整整个图片的坐标，到此这个图片的制作就完成了。
单击“主要”工具栏上的“保存”按钮，保存文件。
（3）图片的优化和导出
选择“窗口”l“优化”菜单命令，打开“优化”面板，如图6-23所示的设置。
选择"文件”|“导出”菜单命令，在弹出的“导出”对话框中，“文件名”一栏输入文件名“sx6—1．jpg”，选择侏存类型为“仅图像”，单击“保存”按钮，该文件即可以JPEG的文件格式输出。
选择“文件”l砾存”菜单命令，保存源文件，单击“预览”按钮预览效果，如图6-24所示。
3．进一步编辑向日葵画框图片
（1）新建一帧
打开刚刚创建的向日葵画框，即“sx6—1．png”。
在“帧”面板，选择刚才已有的第一帧，将它拖到“新建／重制帧”按钮上释放，得到复制的一帧。
将新复制的第二帧选中，将原有的向日葵图片删除，重新导入另一幅图像“椰子树．jpg”，并调整大小使其居于画框内。
这样当前文件具有两个帧的画面，如图6—25所示。
（2）观看动画播放效果
单击位于工作窗口下方帧控制器的“播放”按钮，观看动画播放效果。
单击“停止”按钮，停止播放。
如果不满意，可以返回帧1或帧2进行修改。
如果想调整两帧的播放速度，可以在帧面板双击每帧右侧的数字“7”，将其修改成想要的值。
再次通过帧控制器观看动画播放效果，如果想再增加几帧，可以按上面的方法进行编辑，直至满意为止。
选择“文件”|“另存为”菜单命令，将文件以“sx6．2．png'’为文件名保存在指定文件夹下保存文件。
再选择“文件”|“图像预览”菜单命令，打开“图像预览”对话框，如图6—26所示。
选择导出的文件格式为“GIF动画”，然后再选择“导出”按钮，就可以导出GIF动画文件，文件名为“sx6．2．gift。
。
这样可以在Fireworks之外，同样看到动画效果。
任务二：
蒙版和动画的制作
1．准备工作
在c盘或其他盘新建一个文件夹，将给定图像素材复制到其中，本次实训的内容将全部保存在该文件夹下。
2．导入图像并调整画布
新建空白文档，大小、颜色均默认。
选择“文件”l“导入”菜单命令，将指定文件夹中的图像导入文档。
选中图片，在“属性”检查器中修改图片的宽、高值（500×400）。
然后单击画布之外，在“属性”检查器选择“符合画布”命令，使画布和图片一样大且对齐。
在“属性”检查器选择“画布”旁边的拾色器，把画布颜色改成自己喜欢的颜色。
3．制作矢量蒙版
选择椭圆工具，在窗口中画一个椭圆。
选择“编辑”I“剪切”菜单命令，椭圆消失，用鼠标再次选中导入的图像，然后选择“编辑”I“粘贴为蒙版”菜单命令，出现蒙版效果，如图9-36所示。
打开“层”面板，如图9-37所示。
单击层中图片与蒙版之间的链接@标记，可以使它消失，再次单击又会出现。
它的出现与消失决定着蒙版是否与图片链接在一起。
当未链接时，单击“层”面板中的蒙版图标，使它周围出现绿框。
如图9-38所示。
用鼠标移动画布上椭圆的位置，效果如图9-39所示。
把位置调整到理想状态后，选择“文件”|“另存为”菜单命令，将文件以“sx9-1．png'，为名保存在指定文件夹下。
4．修改蒙版效果
打开刚才新建的蒙版文件，在“层”面板选中蒙版。
在“属性”检查器中，选择“蒙版”为“灰度外观”，将方式改为“放射状”，并单击旁边的拾色器，将放射状填充的中心调整为透明（白色），边缘调整为不透明（黑色），如图9-40所示。
在“属性”检查器中，将“边缘”修改为“羽化”，值为“50'’，“描边”设置为“无”，如下图9-41所示。
在画布上适当调整椭圆填充的放射中心和幅度，最后达到如图9—42所示效果。
5．制作位图蒙版，
打开给定图像文件0258.jpg，另存为sx9-2.jpg。
把显示的缩放比例调整为66%。
单击“层”面板的“添加蒙版”按钮
，并在“层”面板选中蒙版图标。
在“工具”面板“颜色”部分中选择“渐变”工具
，然后按照图9-43设置蒙版的相关属性。
在图像中间拖动鼠标，使填充呈由中心向四周的放射形状。
图像产生了蒙版效果，同时“层”面板的蒙版图标也发生了变化。
如图9-44所示。
6.制作文本蒙版
打开给定图像文件0258.jpg，另存为sx9-3.jpg。
把显示的缩放比例调整为66%。
在“工具”面板“矢量”部分中选取“文字”工具。
输入文字“热带风情”，字体为华文行楷，大小150。
选中文字，选择“编辑”|“剪切”菜单命令，将其剪切。
在“层”面板中选择取位图标，然后选择“编辑”|“粘贴为蒙版”菜单命令。
图像产生了蒙版效果，同时“层”面板也出出了文本蒙版图标，如图9-45所示。
任务三：
风吹树叶
（1）新建Flash文件。
（2）修改背景颜色为“蓝色”。
（3）使用“文本工具”按钮
，创建文字“风吹效果”四个字，用
工具选中文字并按【Ctrl】+【B】一次，将四个字分解为个体。
如13-11所示。
（4）再次用工具
，选中“风"字然后选择“修改”|转换为元件”菜单命令。
在弹出转换为符号"对话框中，将元件名称改为“风”，如图13-12所示。
（5）重复步骤（4），将剩下的三个字“吹”、“效”、“果”也依次做成图形元件。
（6）选中所有的文字，然后鼠标右击，在弹出的上下文菜单中选择“分散到各层”，于是个字将分别处于四个不同的图层。
这样做是为了动画渐变能够正确的执行。
如果分散到各层后文字没有对齐，则可用“对齐面板”，将各层的文字重新排列好。
“对面板如图13-13所示，可以通过菜单“窗口”|对齐’’菜单命令打开“对齐”面板。
（7）在时间轴中第15帧处，给各层“添加关键帧”，选中第15帧。
（8）将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图13-14所示。
（9）选中所有元件，在“属性，，检查器中将颜色“Alpha”值设为“O”，如图13-15所示。
（1O）在“吹”、“效”、“果”三个元件所在层的第1帧处创建动画补间，如图13-16所示。
（11）按住【Ctrl】键，选择第二层的第2帧到最后一帧。
按住鼠标左键不放，将位置向后拖放一段距离，如图13-17所示。
（12）参照步骤（10）内容，将‘‘效”、“果”两个元件所在层的位置分别后移，如图13-l8所示。
（13）按【Ctrl】+【Enter】组合键查看效果。
任务四：
球的跳动
1.准备工作
在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。
本次初训的内容将全部保存在该文件夹下。
2．素材的导入
1）新建文件
打开Flash8，在“开始页”中选择“新建Flash文件”，以新建一个空白文件。
背景色为“白色’’。
选择“文件”|“保存”菜单命令，将文件保存为ex3.fla文件。
2）“球’’的导入
选择“文件”|“导入”|“导入到库”菜单命令将“球”导入到库，如图13-33所示。
3.元件的转换
选择“修改”|“转换为元件”菜单命令，将图片转换为“图形”元件，并命名为“球”。
13-34所示。
4．动作补间的设置
将元件“球”拖放到场景1的图层1中。
在图层1的第60帧处插入关键帧，如图13-35所示。
在第1帧处添加‘‘动画补-间，，效果，如图13-36所示。
在第1帧处处的“属性”检查器中，单击“缓动”旁边的“编辑”按钮，设置动作的“缓入|缓出”效果（通过缓入／缓出可以控制动画渐变的速度和状态）。
设置效果如图13-37所示。
在“自定义缓入／缓出”对话框定义各个帧处的动画补间速度和方向。
新建图形元件，命名为“阴影”，设置笔触色为“无”，填充色为“黑白渐变”，白色部分的alpha透明度为29％。
使用椭圆工具绘制一个椭圆，设置面板如图13-38所示，绘制的效果如13-39所示。
在场景1中新建图层2，将元件“阴影”拖放到第1帧处的恰当位置（在球落下的下方），并在第60帧插入关键帧，阴影位置如图13—40所示。
在图层2第1帧处设置元件“阴影”的A1pha透明度为20％，如图13-41所示。
在图层2第1帧处设置补间动作，如图13—42所示。
打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。
打开图层2第一帧处的“自定义缓入／缓出”面板，按ICtrl】+【V】组合键，将其粘贴到阴影动画补间中。
5．发布动画
使用“文件”|“发布”菜单命令进行发布。
实验四层叠样式与层的应用
一、实验目的及要求
1.掌握层的正确定位方法
2.学会利用层来制作弹出式菜单
3.了解时间轴的编辑特点和方法
4．学会定义和应用CSS样式
二、实验学时
6学时
三、实验内容
任务一：
利用层制作弹出菜单
步骤：
l准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。
将给定的素材文件存入其中。
2．建立本地站点
启动Dreamweaver·8，用已学方法建立本地站点。
3．利用图层制作下拉弹出菜单
（1）新建一个空白页面，选择“修改”I“页面属性”菜单命令，设置页面的背景颜色为#FFCC99，左边距为0，上边距为0。
（2）在文档第一行插入一行文字“电子信息职业技术学院”作为站点标题，字体为华文行楷，大小为48号字，颜色为#FF9933。
（3）在标题的下一行插入一个l行5列的表格，表格宽度800像素，边框粗细为l，高度30，平均分配各列（每列宽度为160像素），表格背景颜色为#9999FF。
（4）在表格的各列分别写入“首页”、“学院概况”、“师资建设”、“系部设置”、“招生就业”，各单元格文字对齐方式为居中对齐，文字为粗体显示。
如图16—16所示。
（5）在“学院概况”列中添加一个图层，命名为“Layerl”，注意不可见元素“层锚记”
应在此列当中。
如果不在，可用鼠标将其拖到此列中。
然后在图层中添加一个3行l列的表格，表格宽度为160像素，各行高度为30像素，边框粗细为1，单元格文字为居中对齐，表格背景颜色为#9999F’F，文字为粗体显示。
三个单元格内容为“学院简介”、“办学思想”、
“校园风景”，如图16．17所示。
（6）同样在其他几列中也分别添加图层，各自命名为“Layer2'’，“Layer3”，“Layer4”。
其中Layer2中插入3行1列的表格，表格属
升级会员 