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