photoshop图形图像处理项目5 制作框架网页电子教案 中职 高教版 网页制作项目实训教程.doc

《photoshop图形图像处理项目5 制作框架网页电子教案 中职 高教版 网页制作项目实训教程.doc》由会员分享，可在线阅读，更多相关《photoshop图形图像处理项目5 制作框架网页电子教案 中职 高教版 网页制作项目实训教程.doc（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学科教案本Teaching Plan20 年20年学年度学期The (1st/2na)Semester of the Academic Year from 20 to 20_网页制作项目实训教程 学校（School） 学科（Subject） _年级（Grade） _教师（Teacher） 网页制作项目实训教程目录注意：按住Ctrl键后单击每个任务即可跳转到对应的教案单击按钮可返回目录页面设置参数为：纸张：B5 页边距左：1.5页边距右：1.5项目5制作框架网页任务1活动1 利用框架制作成语故事集首页教学课题任务1 活动1 利用框架制作成语故事集首页课题类型理论+实作课时安排2上课时间教学目标1

2、.掌握框架网页的创建与保存2.掌握框架网页的链接操作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.文件域。2.列表与菜单。教学手段教学过程师生互动活动设计课件讨论实作课件举例讨论课件实作一、教师布置活动要求运用素材网页“Y5-01A.html”、“Y5-01B.html”、“Y5-01C.html”、“Y5-01D.html”、“Y5-01E.html”、“Y5-01F.html”、“Y5-01G.html”制作一个关于成语故事的框架网页，要求网页有标题，故事的题目以导航的形式表现，最终效果如下图所示。二、师生讨论学习新知识1、框架网页的创建依次单击“插入”-“HTML”-“框

3、架”菜单命令，在展开的下级菜单中可以根据需要选取合适的框架集，这样相应的框架网页就创建完成了。2、框架网页的保存每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来，下面我们以“上方及左侧嵌套”框架为例介绍框架网页的保存方法。（1）选择“文件”- “保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出 “另存为”对话框，我们将其命名为“index.html”，表示整个框架集的名称。（2）单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。（3） 单击“保存”按钮，依次弹出第3

4、个和第4个“另存为”对话框，分别命名为“left.html” 和“top.html”，表示左边框架和上方框架的文件名。3、框架网页的链接要在题目框架中使用链接打开正文框架中的文档，必须设置链接目标，在“属性”面板中的“链接”下拉列表中选择链接文档应在其中显示的框架或窗口。l _blank：打开一个新窗口显示目标网页。 l _parent：目标网页的内容在父框架窗口中显示。 l _self：目标网页的内容在当前所在框架窗口中显示。 l _top：目标网页的内容在最顶层框架窗口中显示。l mainFrame、leftFrame、topFrame：目标网页内容在新建的框架中显示。l三、教师演示活动实

5、施过程并让学生完成活动任务1、新建框架网页文件。启动Dreamweaver CS6软件，在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个空白HTML网页文件，然后通过“插入”菜单创建“上方及左侧嵌套”框架，插入的框架网页。2、编辑网页内容。在网页的上方框架网页内输入“成语故事”，左侧输入文本“亡羊补牢，掩耳盗铃，狐假虎威，井底之蛙，守株待兔，拔苗助长，胸有成竹”。3、创建网页链接（1）选中文本“亡羊补牢”，在属性面板的链接处选取素材文件Y5-01A.html，目标位置选择“mainFrame”，使目标文件显示在mainFrame框架内。（2）按照同样的方法为其它成语故事题目创建超链接。布置任务：让学生明确本次课的内容讨论：如何实现该案例效果阅读知识窗：框架网页的创建；框架网页的保存；框架网页的链接演示：教师演示活动实施过程实训活动：学生练习及点评作业布置填写提交实训报告和实训表格预习作业：预习下一节内容教学后记5