第一篇：网页制作与规划实验教案大全
实验一 站点的创建与基本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)新建文件
打开Fireworks 8，在“开始页”中选择“新建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)在时间轴中第1 5帧处，给各层“添加关键帧”，选中第15帧。(8)将四个字全部选中，使用鼠标向上移动一段距离，选择“修改”|变形”|“水平翻转”菜单命令，将四个字水平翻转一下，然后调整字体的位置，用“对齐’’面板排列字体，如图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)按【Ctrl】+【Enter】组合键查看效果。任务四：球的跳动 1.准备工作
在c盘或其他盘新建一个文件夹，并将给定的图片文件和素材文件复制到站点文件夹中。本次初训的内容将全部保存在该文件夹下。
2．素材的导入
1)新建文件
打开Flash 8，在“开始页”中选择“新建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％，如图1 3-4 1所示。
在图层2第1帧处设置补间动作，如图1 3—42所示。
打开图层1第一帧“属性”，检查器的“自定义缓入／缓出”面板，按键【Ctrl】+【c】复制缓动效果。打开图层2第一帧处的“自定义缓入／缓出”面板，按I Ctrl 】+【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列的表格，表格属性与Layerl中的相同，内容为“队伍建设、名师风采、优秀教师”；L,ayer3中插入5行l列的表格，表格属性与L,ayerl中的相同，内容为“机电技术系、电子技术系、计算机应用系、计算机网络系、计算机软件系”；Layer4中插入2行1列的表格，表格属性与Layerl中的相同，内容为“招生信息、就业信息”。如图16—18所示。
(7)调整各层的位置。注意：层的调整非常重要，不同的浏览器窗口大
小，不同的分辨率，层的位置显示都不是一样。即使在同一个机器上调整浏览器的窗口大小，都会出现位置的变动。Dreamweaver中并不是所见即所得，需要我们来精确定位才会达到满意的效罘。为此，首先固定表格的宽度，本例中将表格固定为宽度800，高度30。然后固定层的位置，这
个位置需要计算一下，计算公式并不是很难。本例中表格总宽度为800，共有5列，这样每列的横坐标起始位置的计算公式为：
800÷5*(当前列一1)对于“Layerl”，当前列为2，所以结果为160。
最后加上一个将要创建的层与原表格列偏移值，那么计算各列下属的层的横坐标公式变为：
800--5x(当前列-1)+偏移量
这个偏移量需要通过大家试验来最终确定，因为不同的字体和宽度这个值是不同的。这里测试满意的效果是-1，所示Layer1的实际工资起始横坐标为159据这个公式将各个层的位置设定好，最好不要用鼠标禾移功定位。要使用“属性”检查器来设置。(8)打开“层，面板，将Layerl～Layer4都设置为隐藏状态。．
(9)在窗口左下方选中第2列“学院概况”所在单元格的标签选择器
(10)更改行为的触发事件为“onMouseOver”。(11)再次选中第二列的标签选择器
(12)重复步骤9～1l，为第三列、第四列、第五列添加显示与隐藏图层的行为。
4．保存与预览
保存文件为Index．html，然后按IFl2]键进行预览。当移动鼠标到菜单时，将显示当前菜单项所属的子菜单内容，当鼠标离开显示的子菜单时，子菜单隐藏，返回初始状态。最终效果如图16—20所示。
5．为下拉菜单设置超级链接
(1)根据菜单内容，建立相应的其他页面文件。(2)为各菜单项设置跳转到这些页面的超级链接。(3)再次保存文件并预览效果。任务二：时间轴 步骤：
1．准备工作
在C。盘或其他盘新建一个文件夹，作为站点文件夹。在此站点中再建一个images子文件夹，将给定的素材存入其中。2．建立本地站点
启动Dreamweaver 8，用已学方法建立本地站点。
3.利用时间轴使层做直线运动
(1)打开给定的网页文件sx17-1-1.htm，在网页上插入一个层”Layerl",并将其位置调整好，然后在其中插入给定的图片imgl．gif,图片大小为64×64。如图17-9所示.(2)打开“时间轴”面板，把图层Layerl拖到“时间轴’’面板上，单击最后一帧关键帧，并将其拖到第100帧的位置。再单击图层Layerl，将 Layerl水平拖动到页面的右侧。如图17-10所示。
(3)选中“时间轴”面板上的“自动播放”和“循环”选项。
(4)将文件另存为sxl7-1-3．htm，并在浏览器中预览，即可看到小猪从页面左侧运动到 右侧，并循环播放。
4．利用时间轴使层做轨迹运动
(1)打开刚才保存的sxl7-1-3．htm文档，再插入一个图层Layer2，并将给定的图片img2．Gif插入其中，设置图片和层的大小均为100*100，如图17-11所示。
(2)右击“时间轴”面板的动画通道，在弹出的快捷菜单中选择“添加时间轴”命令，新添加的时间轴为“Timeline2'’。
(3)选中页面中的图层Layer2，并单击右键，在弹出的快捷菜单中选择
“记录路径”命令，紧接着用鼠标拖动层左上角的标记在页面上移动绘制路径，释放鼠标，在页面上出现了一条灰色的路径。同时，时间轴上也出现了一个有多个关键帧的动画条。如图17-12所示。
(4)选中“时间轴”面板上的“自动播放”和“循环”选项。
(5)保存文件，并在浏览器中预览，即可看到小猪从页面左侧运动到右侧的同时，另一小猪在页面上按绘制的轨迹进行移动，并循环播放。5．给移动的小猪添加行为和超级链接
(1)选中页面中的Layer2，打开“行为”面板，单击“+”按钮，从弹出的菜单中选择“时间轴”I“停止时间轴”命令。然后从对话框中选择“1'imeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseover。(2)再次单击“行为”面板的“+”按钮，从弹出的菜单中选择“时间轴”}“播放时间轴”命令。然后从对话框中选择“Timeline2'’，单击“确定”按钮。在“行为”面板中将事件改为onMouseout。
(3)选中Layer2层中的图片，在“属性”检查器的链接栏中输入“sxl7-1-2．htm'’(预先编辑好的网页)，在替代栏中输入“单击有惊喜”。
(4)保存文件，并在浏览器中预览，即可看到当鼠标指向小猪时，小猪停止移动；当鼠标离开小猪时，小猪继续移动。当鼠标单击小猪时，跳转到sxl7-1-2．htm页面。
任务三：利用CSS样式改变页面风格 步骤：
1．准备工作
在c盘或其他盘新建一个文件夹，作为站点文件夹。将给定的网页文件及素材文件夹存入该文件夹中。
2．建立本地站点
启动Dreamweaver 8，用已学方法建立本地站点。3．自定义样式的定义及应用
(1)打开站点中给定的sx20．1．1．htm文档。(2)选择“窗口”I‘‘样式”菜单命令，将“CSS样式”面板打开。(3)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框。在选择器类型处选择“类(可应用于任何标签)”，名称处输入“ysl”，定义在处选择“仅对该文档”。单击“确定”按钮。
(4)在弹出的“ysl的CSS样式定义”对话框中，进行如图20-25所示的样式定义(类型：字体为隶书，大小为36像素，颜色为#0033FF；区块：文字对齐为居中)。
(5)用同样的方法定义样式“ys2”，定义内容如图20-26所示(类型：
字体为华文新魏，大小为24像素；区块：文字对齐为居中)。
(6)用同样的方法定义样式“ys3”，定义内容如图20—27所示(类型：字体为隶书，大小为36像素，粗细为粗体，#00CC33；区块：文字对齐为居中)。
(7)下面开始应用已定义的样式。选中第一行标题“唐诗欣赏”，单击右键，选择“CSS样式ysl，(或者用前面介绍的其他方法来应用ysl)，这时标题已变成所定义的样式了。用同样的方法，将每首诗的诗文内容应用
‘‘ys2’’，将每首诗的标题段落应用“ys3”。效果如图20-28所示。
(8)修改页面的背景风格。首先为页面设置背景图像(站点中images文件夹中的bj．jpg文件)，效果如图20-29所示。由于选择的背景图像的尺寸不够大，在页面中图像会以不断重复的形式铺满整个页面，视觉效果不够理想。
(9)在“CSS样式”面板新建自定义样式“ys4”，在样式定义对话框中，背景样式的设置如图20—30所示(背景：重复为不重复，附件为固定，水平位置为居中，垂直位置为居中)。
(10)选择文档窗口左下方的标签选择器<．body>，然后单击右键，从下拉列表中选择“设置类，ys4”，文档应用样式ys4后的效果如图20-31所示。当预览时会发现背景图像居中并不再重复，且当用鼠标滚动游览文字时，背景图像保持静止，而不随文字的滚动而滚动。
4．重定义特定标签外观
(1)单击“CSS样式”面板下方的“新建(；SS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“ln定义在处选择“仅对该文档”。单击“确定”按钮。
(2)在弹出的“li的CSS样式定义”对话框中，进行如图20-32所示的样式定义(类型：字体为华文新魏，大小为24像素；列表：项目符号图像为0001．gif)。
(3)单击“确定”按钮，发现页面列表外观发生了变化。效果如图20-33
所示。
(4)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“标签(重定义特殊标签的外观)”，标签处下拉列表选择“a”，定义在处选择“仅对该文档”。单击“确定”按钮。
(5)在弹出的‘‘a的cSS样式定义”对话框中，进行定义，其中类型分类中只将修饰选择为‘‘无”。单击“确定”后，页面中超级链接的下划线处的修饰没有了，如图20-33所示。
5．链接文字技术
(1)单击“CSS样式”面板下方的“新建CSS样式”按钮，打开新建样式对话框，选择器类型处选择“高级(ID、伪类选择器等)”，选择器处下拉列表选择“a：link”，定义在处选择“仅对该文档”。单击“确定”按钮。
(2)在弹出的“a：link的(；SS样式定义”对话框中，进行如图20—34所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#CC0099，修饰为无)。
(3)再次单击“CSS样式”面板下方的“新建CSS样式”按钮，在对话框中其他选项不变，只将选择器选为“a：hover'。然后在“a：hover的CSS样式定义”对话框中，进行如图20—35所示的样式定义(类型：字体为华文新魏，大小为24像素，颜色为#FF0000，修饰为下划线)。
(4)单击“确定”按钮，关闭定义对话框。预览时可以看到当鼠标指针移到超级链接文字时，文字变为红色且出现下划线修饰。
(5)将网页另存为Index．．html，按【F12】预览网页，观察各种样式的应用效果。
实验五
网页综合设计
一、实验目的及要求
利用所学的网页设计的方法来设计一个个性化的网站，网站的内容一定要合理，内容健康，页面美观。
二、实验学时
6学时
三、实验内容
自己设计
第二篇：电子政务网页设计与制作实验教案
《电子政务网页设计与制作》实验教案
实验名称 IIS的安装与调试
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握检测不同版本Windows操作系统IIS的安装与否； 2.掌握在Windows操作系统中安装IIS的方法；
3．掌握利用IIS设置虚拟目录调试ASP程序的初步方法。
二、实验重点、难点
利用IIS设置虚拟目录调试ASP程序
三、实验原理
ASP模型的运行原理是：当浏览器向Web服务器请求.asp文件时，服务器端脚本开始运行，WEB服务器调用.asp文件，将运行结果发送到浏览器。
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况
无
六、实验的基本操作与实验重要步骤
1、实验前先观看指导老师的演示；
2、如果计算机未安装IIS，使用安装程序安装IIS；
3、利用记事本编写教材P13 1－1的ASP程序并存盘；
4、在IIS中建立虚拟目录，调试ASP程序，找出并解决问题，确保调试成功，并相互访问；
5、学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项
对于因操作系统本身的原因，无法安装调试好IIS，需重新安装系统。
十、课外实验或思考题
教材P13 练习1-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
实验名称 HTML网页编辑
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握HTML基本标记的使用； 2.掌握HTML中超级链接的使用方法；
3．掌握HTML中特殊符号、图片链接的使用方法。
二、实验重点、难点
HTML中特殊符号、图片链接的使用方法
三、实验原理 HTML标记语言
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况 无
六、实验的基本操作与实验重要步骤
1.实验前先观看指导老师的演示；
2.利用记事本编写教材P34 2－1的HTML程序并存盘； 3.调试；
4.学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项
注意热点链接的使用，调试出问题时，多从连接文件的上下级目录上找原因。
十、课外实验或思考题
教材P34 练习2-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
实验名称 Vbscript对象编程
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握Vbscript的基本数据类型、常量、变量、表达式和常用函数； 2.掌握在HTML中插入Vbscript编码的方法； 3．掌握事件驱动程序的编制。
二、实验重点、难点
事件驱动程序的编制，面向对象的程序设计思想的掌握。
三、实验原理
Vbscript事件驱动程序编制。
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况
无
六、实验的基本操作与实验重要步骤
1.实验前先观看指导老师的演示；
2.利用记事本编写教材P74练习4－1题的程序并存盘； 3.调试；
4.学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项
对象编程的思想，对象事件的编程方法。
十、课外实验或思考题
教材P74 练习4-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
实验名称 表单设计
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。
二、实验重点、难点
掌握DHTML中INPUT控件的使用
三、实验原理 DHTML语言
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况
无
六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；
2.利用记事本或Dreamweaver等软件编写表单程序并存盘； 3.调试；
4.学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项 Dreamweaver集成化工具的使用
十、课外实验或思考题
教材P121 练习6-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
实验名称 Response对象应用
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握Response对象中Write方法的使用； 2.掌握Response对象中Redirect方法的使用； 3．掌握Response对象中End方法的使用。
二、实验重点、难点
Response对象中Write方法的使用
三、实验原理
ASP中Response对象应用
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况
无
六、实验的基本操作与实验重要步骤
1.实验前先观看指导老师的演示；
2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项
对于ASP的内置对象，注意代码的编写规范性。
十、课外实验或思考题
教材P142 练习7-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
实验名称 交互式表单程序设计
实验类型：演示型√ 验证型□ 综合型□ 设计型□ 实验类别：基础√ 专业基础□ 专业□ 实验要求：必做√ 选做□ 实验学时：2 实验对象：本科生
一、实验目的
1．掌握交互式表单程序设计的方法； 2.掌握Response对象中Write方法的使用； 3.掌握Request对象中Form集合的应用。
二、实验重点、难点
Request对象中Form集合的应用
三、实验原理
ASP交互式表单程序设计
四、实验设备、实验教学软件介绍
个人PC，Windows 2000,IIS 5.0,记事本
五、实验分组及组织情况
无
六、实验的基本操作与实验重要步骤 1.实验前先观看指导老师的演示；
2.利用记事本或Dreamweaver等软件编写程序并存盘； 3.打开IIS并设置虚拟目录进行调试； 4.学生独立完成相应的实验报告。
七、实验教学，如实验教学内容设计、时间设计、实验教学手段设计、实验指导设计等；
参照上述实验内容，分模块讲解各业务流程的作用和操作方法
八、预期的实验效果
多数学生能独立完成实验，掌握基本原理和方法。
九、实验中应注意事项
注意对于Form集合的运用，代码要规范。
十、课外实验或思考题
教材P163 练习8-1
十一、实验教材及实验参考资料
《ASP网页数据库短训教程》、刘瑞新主编，机械工业出版社，2005年出版
十二、实验后记
学生独立完成实验报告
第三篇：网页制作社团规划
网页制作社团规划
一、活动的类型、方法和原则 参加活动的成员
高中一年级学生自愿报名参加。类型
科技实践活动。活动方法
任务驱动法、探究学习法、自学辅导法、合作交流法。活动的原則
理论与实践结合的原则。普遍性的原则。
坚持共性与个性相统一的原则。活动的目的
(1)让学生体会信息技术的应用价值,培养学生应用信息技术的意识和观念。
(2)增强学生学习信息技术的兴趣，学会团结合作，培养学生获取、存储、分析、加工、利用、评价、传递信息的能力,提高学生合作探究解决问题的综合实践能力。
(3)培养学生的动手实践能力和创新精神，要让学生成为新技术的主人。
6.活动的目标
培养学生使用信息技术的能力，特别是信息的组织和发布能力。树立学生全面正确的信息技术认识观。通过网页制作活动使学生不仅要认识到信息技术与人们的生活和工作密切相关；认识到信息技术为其他学科的学习和人的全面发展可以提供强大的支持。
激发学生学习信息技术的兴趣。网页制作活动中,结合学生学习、生活的实际,加强信息技术教育的实 践性,学生自主学习的探索性、创新性,这无疑克服了传统活动中内容的枯燥、方法的呆板,对于提髙学生的学习兴趣有巨大作用。
树立学生学好信息技术的自信心。活动中注重用学生容易理解和接受的方式传授信息技术，这些对增强 学生学好信息技术的自信心有着独特的作用。
二、中学生网页制作社团活动设计的特点和开展方式 网寊制作社团活动设计的特点
趣味性：活动的全过程都要注意保护和培养学生学习、使用信息技术的热情。如：作品的选题都来自于学生的日常生活和他们感兴趣的事务；活动中引人比赛等 形式增强趣味性。
技术性：网页制作科技实践活动的过程，就是信息技术水平不断提高的过程。学生除了要掌握好 frontpage这一应用软件,还要能够熟练地结合信息技术课堂所学内容,使用网络查找资料,并恰当应用。
实践性：网页制作科技实践活动的进行,几乎都是在计算机上完成的，因而学生的动手能力是活动能否成功的重要因素。
多样性:作品的选题丰富多样。如：自我介绍、环 境保护、情感故事、国内外大事等。同时,作品的表现形式 也将异彩纷呈。模拟性：考虑到学生的实际情况，作品最后的发布方式宜先在局域网上模拟发布，待学生再经过后续知识的学习后,再发布到因特网上去,并时时维护和更新自己的网贞。
综合性：网页制作要涉及许多其它学科的知识。如：文字编辑要用到语文知识，页面设计要用到美术知识,背景音乐设置要用到音乐知识,等等，协作性：活动过程中把学生分成若干个学习小组，培养他们互助协作的精神和品质。
创新性创新是民族兴旺的灵魂，是一个国家兴旺发达的不竭动力(江泽民语)。”为此,应时时鼓励作品形式和风格的多样性，密切关注制作技术的深度和广度。
2.网頁制作社团活动的开展方式
学校领导重视，成立领导小组，校长经常过问，主管校长亲自督查指导。
活动以建构主义学习理论为指导，采用支架式、任务驱动等教学方法,活动中突出以学生为主体、以教师为主导的活动原则。
采用以自学为主、辅导为辅的活动方式。
采用个人独立完成与小组协作完成相结合的活 动方式。采用课内与课外相结合的活动方式。将学生在课堂所学的各门知识自觉应用到作品制作中。
采用校内与校外相结合的活动方式。学生可在遇到问题时通过电话、QQ、E-mail等工具与教师、同学取得联系，寻求帮助，还可请社会上的有关人士帮忙解决。
三、中学生网页制作社团活动实施方案
第一阶段:结合教材，学习网页制作的基础知识。
这一阶段主要是提高学生运用信息技术的兴趣,体会到信息技术的价值,享受到信息技术学习的乐趣,增强完成作品的信心。由于刚开始接触一个新的软件，所以采用分散知识点，由易到难地掌握教材内容，贴近学生认知水平，贴近学生实际。本阶段主要目标是掌握网页制作所 要用到的基本技术和技能。
第二阶段:安排相关的典型案例，让学生初步掌握制作网页的基本方法。
通过典型案例的讲解，使学生了解到网页设计的基本步骤、制作时应考虑的基本因素。此阶段主要目标是为学生完成作品提供一个支架，帮助学生把对网页制作的理解和认识引向深入，为下一阶段的活动做好准备。
第三阶段:完成作品。通过网页制作活动,培养学生的科学素质，提高创新能力。
网页制作活动是制作者对各种能力的综合应用，它涉及对相关知识的掌握程度，以及观察、分析、综合、比较、概括等各种科学思维方法的综合应用。为此,在这一阶段，师生应组成“共同体”,在教师的点拨指导下，以小组为单位开展活动，同时提高学生独立工作和相互合作的能力。教师重点在解决问题的方法上给予点拨和总结，并让学生大胆地去实践，增强应用信息技术的意识和能力，提高学生的应用能力和创新能力。
第四阶段:作品展评。通过作品展评,提高学生的审美素养和审美能力。
这一阶段可先在小组内对每个作品进行评价，选出 代表作品，再参与整个大组的展评。评价可采用作者自评、组间互评、教师点评等方式，可从思想性、创造性、艺术性、技术性等方面来进行综合评价。
四、开展中学生网页制作社团活动的初步成果
做到了将培养应用信息技术的意识贯彻在活动的全过程之中。在活动中通过引人贴近现实生活、生产和其他学科为实际背景的选题，使学生明确了信息技术与人类社会密不可分，信息技术将会影响到他在信息社会中的立足和发展，从而体现信息技术的实际应用价值和信息技 术的社会功能。
以网页制作活动为手段，激发了学生学习信息技术的积极性，学会了团结协作，建立良好人际关系、相互合作的工作能力。
以网页制作活动为核心，培养了学生的动手能力和创新精神。通过网页设计过程中的作品呈现形式的多 样性，丰富了学生的思维，激发学生的创新，从而为学生将来成为具有创造性思维的人才奠定了基础。
通过网页制作活动,培养学生的自我评价能力。通过自评、互评和教师点评，可以更好地培养学生的自我评价能力和审美、鉴别能力。学生正是在这种不断修改不断完善的过程中，来完善自己，充实自己，从而形成独立思考的习惯和良好的自我评价能力。
通过活动培养了学生顽强拼搏的精神。活动中 引人了学生喜欢的竞赛评比机制，维持了学生认真持久开展活动的积极性。有的学生为了髙质量地完成任务，放弃了休息和娱乐的时间，主动与游戏告别，一心扑在任务上。
五、中学生网页制作社团活动中的新亮点
活动过程中出现了意料之外的重大收获。有一天，在观察学生制作的过程中，发现张耕畅同学的作品比其他同学多了一些有趣的内容：如浏览网页时停留时间的统计、礼花效果、BBS论坛等特效和难度很大的内 容出现在他的网贞上。经了解，这些都是他通过自学、引用免费代码设计产生的效果。据他讲，起初他在浏览别人网页时，发现有一些教师没有讲的特效，他就试着研究这些效果是如何产生的，结果还真的找到了一条捷径。由此可见，开展科技实践活动确实能收到意想不 到的效果。
六、中学生网页制作社团活动继续深化还应注意的问题 适合中学生水平的信息技术作品制作活动理论与方法，需作进一步研究。
活动时间合理安排和探讨。
维持学生持续的兴趣在活动中有一定难度，还需进一步实践。教师自身素质提高的问题。在实践中，我感到教师的素质和水平是活动能否成功的关键。我们应积极投身到实施和推进素质教育的各项活动中去，不断积累和更 新专业知识。关于活动的评价。如何对参与者及其作品进行更有效的评价,还值得研究。
七、对未来研究的展望
信息技术教育是全面素质教育中一个必不可少的环节。信息技术与人类社会密不可分,信息技术与科学息息相关，信息技术为其它学科的发展提供了条件和基础。学好信息技术对中学生素质教育有着重要的作用，提高学生信息素养是我们长期面临的任务。我们应继续做好信 息技术社团活动及对策的研究工作，并将研究成果及时运用到实践活动中，提高信息技术社团活动的水平，努力开创信息技术社团活动的新局面！
第四篇：网页设计与制作教案
《网页设计与制作教案》
教师：系部：信息技术工程系专业：计算机应用班级：计机
湄洲湾职业技术学院
2008-2009学年第一学期
唐 俊 奇
电子信息
07（1）信息07（1）08（2）
1.3 网页中所使用的技术
1.3.1 HTML语言和XML语言
1、HTML语言
ØHTML只使用SGML中很小一部分标记
ØHTML语言（Hyper Text Markup Language 超文本标记语言）
ØHTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具
2、XML语言
XML（eXtensible Markup Language）1.3.2 动态网页
1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序
1.4 制作网页的基本方法
1.4.1 制作网页的基本步骤
1、确定网页的内容
2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法
1.4.2 制作网页时要注意的问题
1、网页的标题要简洁，明确。
2、在文本中要使用水平线，以分割不同部分。
3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明，以便关闭图像时查看。
6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】
通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。
第二讲 HTML的基本标志与格式标志
【教学内容】
讲解HTML基本标志对和格式标志。【教学目的】
使学生标志对与格式标志对的使用。【教学重点】
格式标志的使用。【教学难点】
* 使学生掌握超级链接标志的使用。【教学重点】
* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入。【教学难点】
* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.2 插入文字
2.2.1 划分段落 格式
段落内容
2.2.2 插入标题文字 格式设置基准字号：
2.2.6
文本修饰
......，文字以粗体显示。......，文字显示为斜体。......，显示下划线。
......，中心线贯穿文字。< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
2.3.2 图片的属性
2.4 建立超级链接
2.4.1 指向一个目标
1、建立超级链接
2、为图片建立超级链接
3、链接到邮件和多媒体文件 链接到邮件
请与我联系 2.4.2 使用锚点
Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。Ø建立锚点：
Ø锚点文字 Ø使超级链接指向已定义的锚点。Ø文字 Ø文字 2.4.3 新窗口和基准链接
1、打开新窗口 Target=“window-name”>开一个新窗口
2、基准链接
在
与 之间设定BorderColor=“#008000“ >
2.7.3 子窗口属性设置
-2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页