梨花布艺网站制作.doc.doc

技能训练教案 作者：王冬梅 训练课题：梨花布艺网站制作 ●理论分析 Dreamweaver中AP Div标签的添加 ●训练目标 ●知识目标：会使用Dreamweaver中AP Div标签布局网页 ●技能目标：能熟练添加网页素材 ●情感目标：培养学生良好的审美情趣 ● 训练过程 ● 项目设计： 1.新建站点，命名为“梨花布艺网站”，如下图所示： 2.新建网页index.html,然后选择【修改】/【页面属性】命令，在弹出的对话框中单击“浏览”按钮，将图像back.gif设置为背景，如下图所示： 3.在插入栏中选择“布局”选项卡，然后单击“绘制AP Div”按钮，在编辑区中绘制一个层，如下图所示： 4.双击apDiv1，将其修改为first,如下图所示： 5.使用相同的方法绘制所有的层，绘制完成后如下图所示： 6.分别为层命名，最后将其保存。 7.将光标定位在Logo层，在插入栏中单击“常用”插入栏中的“图像”按钮，在弹出的快捷菜单中选择“图像”命令，弹出“选择图像源文件”对话框，在查找范围下拉列表框中选择图像Logo.gif,单击确定按钮，如下图所示： 8.使用相同的方法，将001.png、002.png、003.png插入到网页中。 9.第二层是导航，首先将鼠标停留在图层2中，单击属性面板中的“右对齐”按钮。 10.在插入栏中单击“常用”选项卡中的“表格”按钮，弹出“表格”对话框，在“行数”文本框中输入“2”，在“列数”文本框中输入“3”，在“边框粗细”文本框中输入“0”，单击“确定”按钮。 11.选择表格，调整表格大小，合并第一列和第三列的单元格，然后在第一列和第三列中分别插入lift.png和right.png图片。 12.选择表格，单击“属性”面板中的“背景图像”文本框后的“文件”按钮，弹出“选择图像源文件”对话框，在“查找范围”下拉列表框中选择min.png文件，单击“确定”按钮。 13.选择需要插入动画的图层，然后在“属性”面板中将tu.jpg设置为背景，然后调整图层，让图片完全显示，选择【插入记录】/【媒体】/【Flash】命令，弹出“选择文件”对话框，在“查找范围”下拉列表框中选择fla.swf动画文件，单击“确定”按钮。 14.选择动画，在“属性”面板中的“宽”、“高”文本框中分别输入“800”、“192”，调整层的大小，然后在“属性”面板中单击“参数”按钮，在弹出的“参数”对话框的“参数”列中输入“WMODE”,在“值”列中输入“transparent”，单击“确定”按钮，如下图所示： 15.用同样的方法完成其他各层网页元素的添加，完成后预览效果如下图所示： ● 项目实施： 1.教师示范 2.学生练习 ● 项目应用：网站建设 项目效果： 教学反思： 计算机专业技能训练教案