《Dreamweaver——框架和框架页面》教学设计
深圳市第一职业技术学校叶苑华
中等职业学校信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。下面，以“框架和框架页面”单元为例，以个人的观点简单介绍一下怎样针对学生的心理特点、结合学生的生活实际设计这两堂课。
（一）、课前系统部分
1、课标分析
《课程标准》对网页制作的学习提出了更高的要求，其中关于框架页面的要求有：了解框架的使用方法，包括创建框架、命名框架、设置框架以及保存框架等操作。在使用框架的过程中一定要明白框架的基本结构和基本应用。
2、教材内容分析
我教的两个就业班使用的教材是中国软件行业协会职业技术认定指定教材。教材中采用的网页制作软件是Dreamweaver 8。框架和框架页面是该教材第9章192页到209页的内容，它是制作网页的一个重要模块。能够将浏览器页面分割成几个不等的窗口，每个窗口相对独立，在同一页面的几个窗口同时浏览不同的网页文件或者相对保持某些窗口的内容。
3、学生分析
在这之前，就业班的学生已经学过了Word、Photoshop等软件。因此，对Dreamweaver 8的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。同时，学生已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力。网页制作单元就可侧重培养信息表达的能力，这对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。
4、教学目标
本单元的认知、能力和情感三种目标分述如下：
认识目标：
①理解框架结构的含义和用途
②掌握框架和框架集的含义，学会创建普通框架页面、创建嵌套框架结构页面、创
建浮动框架页面
③掌握框架属性的设置方法
④掌握框架网页的保存方法
能力目标：
①掌握建立网页框架及设置框架属性的能力
②能够应用网页框架建立简单的网页
情感目标：
培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力
5、教学的难点和重点
教学重点：
①网页框架的建立
②理解浮动框架页面的含义
教学难点：
①框架集和框架之间的关系
②了解框架集标记frameset、框架标记frame、浮动框架标记iframe，掌握框架相关
属性的设置：例如，调整框架大小、设置框架边界、改变边框线的宽度等
6、教学策略（或方法）
教师演示、任务驱动法、合作学习法、自主学习法和分组讨论法。
7、教学准备
①教师准备一些文字和图片素材
②教师提供一些制作框架网页的视频文件
③教师准备一些用网页框架制作的优秀作品
④采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率（二）、教学过程
1、课前探究
①访问推荐网页，形成小组、组织学生讨论网页内容和风格，分析网页框架和布局
②提供网页栏目划分建议
③组织各小组讨论
2、新课导入：
4、课堂总结
本节主要介绍框架页面的创建、框架和框架集的选择、框架的保存以及框架属性的基本设置，对于制作风格统一的页面有很大的优势。
5、课后作业
①什么是浮动框架？有什么好处？
②每组学生根据教师提供的素材，网页作为上、中、下结构的框架合并成一个完整的页面。各小组根据制作的内容，写一份实验报告，主要的内容有：
A、列出具体的制作内容。
B、列出本次实训掌握了哪些新的技术？
（三）教学后记
本单元教学采用了“演示法”、“任务驱动法”、“小组协作法”、“分层教学法”等多种教学方法相结合的教学模式，努力为学生创设一种相互协作、相互激励的学习环境，同时又能够让学生培养自主学习的能力和创新精神。在课堂上始终以学生为主体，通过多种教学方式驱使学生主动学习、主动参与、相互协作、相互激励、取长补短、共同提高。
在这两节课中，学生把学到的知识应用于一个实际作品的制作过程，是一个创作实践的过程。使学生感到自己是实践活动的主人，是学习的主体。学生在积极、主动的学习气氛中，有利于提高学生的学习兴趣，充分调动学生的学习积极性。
教师可以考虑把课件用网站的形式展现在学生面前，提高他们的对网站的感性认识，促使他们更容易接受本单元内容。
实验8 用Dreamweaver建立框架页面 实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。 实验步骤： 1. 启动Dreamweaver程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。单击“创建”按钮创建框架网页。 2. 选择菜单“窗口”“框架”命令，打开框架控制面板。 3. 用鼠标单击框架控制面板中的下部分，选中mainFrame框架。如图8-2所示： 图8-1 套用框架图11-2 选择框架集的子框架 4. 将鼠标放在选中的边框上，使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。如图8-3所示。
图8-3 把主框架切分为子框架 5. 在框架编辑窗口中，单击顶部框架，选择菜单“文件”→“保存框架”命令，保存框架为页面。 6. 将光标停放到下部分框架的左边框家中，选择菜单“文件”→“保存框架”命令，保存框架为页面。 7. 按同样的方法，将右边的框架保存为页面。 8. 单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。如图8-4所示： 图8-4选中整个框架
说明鼠标单击所选中的框架， 页面中的框架边框会出现虚线，所选 中的框架就是当前正在编辑的页面. 9. 选择菜单“文件”—>“保存 全部”命令，保存所有框架和框架集， 框架集文件名称为.如图8-5所示. 10. 单击框架面板上的topFrame框架，选中网页. 11. 打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”， 然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示. 图8-6 top框架的属性设置 说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否”表示不允许出现滚动条. 12. 单击top框架页面，在属性面板中单击“页面属性”按钮。 13. 打开“页面属性”对话框，在“左边框.右边框.上边框.下边框”各文本框中输入0，使网页边距都为0.单击“确定”返回框架页编辑窗口. 14. 单击“插入”面板上的“表格”按钮，插入2行4列，宽为100%的表格. 15. 打开属性面板，设置第2列两个表格背景颜色为“浅蓝色”（色标值为#E0E4F4），然后选择第4列单元格，设置同样的背景颜色；设置第3列单元格的背景颜色为“深蓝色”（色标值为#3A4593）
在Dreamweaver中应用框架是非常容易的事情，下面我们就来看看具体的应用。 增加新框架 要给框架页面增加新框架，就是像拆分表格的单元格一样，把一个框架分为两个框架。其操作如下： （1）按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。 （2）也可以通过命令来操作：首先单击要拆分的框架内部，选“框架”菜单中的“拆分框架”命令，在弹出的“拆分框架”对话框中单击“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮即可。 删除框架 若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。 改变框架属性 在设置好框架的整体布局后，我们还可以对每一框架的具体属性进行设置，操作如下：（1）单击需设置属性的框架，选择“框架”菜单中的“框架属性”，则弹出“框架属性”对活框。 （2）在对话框的“名称”文本框中可输入框架名，这样便于识别不同的框架；在“选项”区域中，若选中“在例览器中可以调大小”复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在“显示滚动条”下拉列表框中选择不同的描述项，可设置让滚动条是否出现。 （3）在“框架大小”区域中，可设置框架大小，可以定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，可选“相对”；在“边距”区域中，可设置内容页面与框架边框分隔的像素数值。 （4）要改变开始页面，可以在“初始网页”文本框中输入一个新的页面名字或URL。 （5）单击“框架网页”按钮，则弹出“网页属性”对话框。 （6）在该对话框的“框架”选项卡中，在“框架间距”文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不要选中“显示边框”复选框。 （7）单击“确定”按钮，关闭“网页属性”对话框，再单击“确定”按钮，关闭“框架属件”对话框，完成框架属性设置
《运用框架结构制作网页》教学设计 姓名：张莉 工作单位：南京市第四中学 邮箱：ihy0227@https://www.doczj.com/doc/664957553.html,
《运用框架结构制作网页》教学设计 一、设计意图 《运用框架结构制作网页》是初中信息技术（中国科学技术出版社出版）第二册中的内容，书中是以3个小任务的形式介绍了制作框架网页的详细操作步骤。若按书上内容用传统的教师讲解、学生操作的方式教学，会存在一些问题。 一、学生不理解为什么要用框架结构来制作网页；二、学生只是按任务要求及具体的操作提示而完成框架结构网页，并不知道这种结构的网页应用在什么场合，在什么情况下选用框架结构来设计网页呢？三、内容上没有学生喜欢的动态或多媒体元素，学生觉得只是按部就班地操作，提不起兴趣。所以在本节课的设计中要有心注意处理好以上三个问题，精心设计课件与学件，把提高学生信息技术素养，培养学生应用信息技术能力有机融于教学。 二、教材分析 从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页、运用表格制作网页和动态网页之后。通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用，因此本节课也是利用FrontPage2000制作网页部分的重点内容。希望通过学习，学生在自主设计网站时能灵活运用两种布局方法，相辅相成规划自己的网站。从教材的难易度分析，这部分知识点学生从来没有接触过，在前面学习其它的应用软件时也没有类似的地方，故而有一定难度，教学目标不能定的过高。另外，为了让学生知识模块更加清楚，教材中原本在该章节安排的横幅广告管理器内容已在前面动态网页制作中完成教学。 三、学情分析 对初二的学生来说，运用框架结构制作网页是有一定难度的，因为学生在前面学习网页制作过程中没有接触过；在初一学习网络基础知识时只注意
D r e a m w e a v e r试题 (四)带答案
Dreamweaver试题（四） 1. 安装( )是使用WWW最基本的条件 A、浏览器 B、IE C、操作系统 D、Dreamweaver 2. 在制作网站时，下面是Dreamweaver的工作范畴的是 A、内容信息的搜集整理 B、美工图像的制作 C、把所有有用的东西组合成网页 D、网页的美工设计 3. CSS表示( ) A、层 B、行为 C、样式表 D、时间线 4. 通常一个站点的主页默认文档名是 A、Index.html B、Main.html C、Webpage.html D、Homepage.html 5.
7. Dreamweaver打开代码检查器面板的快捷操作是( ) A、 F7 B、 F8 C、 F9 D、F10 8. 可以在（）中设置网页中链接文本不同状态的颜色 A、“插入”面板 B、“属性”面板 C、“页面属性”对话框 D、“编辑”菜单 9. 在Dreamweaver中，以下选项不属于“水平线属性”对话框中的属性有A A、颜色 B、宽度 C、高度 D、对齐方式 10. Dreamweaver的插入记录菜单中，表格表示( ) A、打开插入图象对话框 B、打开创建表格的对话框 C、插入与当前表格等宽的水平线 D、插入一个有预设尺寸的AP Div元素 11. 保存一张页面使用“文件”菜单的（）命令 A、新建 B、保存 C、打开 D、关闭 12. HTML文本显示状态代码中,表示( ) A、文本加注下标线 B、文本加注上标线 C、文本闪烁 D、文本或图片居中 13. 框架frame中“不能调整大小”的语法是下列哪一项 ( ) A、
教案精选：高中信息技术《网页制作》教学 设计 教案精选：高中信息技术《网页制作》教学设计 1、任务驱动 本单元的学习通过完成网页作品来实现。班级网页的信息来自学生生活的班集体，每个热爱班级、关心班级的同学都能产生一种急切地完成任务的动机，而完成任务又能给他们带来成就感和满足感。这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用，由“要我学”变成“我要学”。在教学中，教师通过创设情境，激发学生的创作欲望，把总任务划分到每节课，按照学生的制作进度来布置子任务，使学生在教师的引导下逐步达成教学目标。 2、小组协作 制作班级网页是个大任务，具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。每个学习小组由6-8人组成，每人负责制作1-2个页面，组合成一份班级网页。最后，各小组作品集中评比，选出优秀作品，上传到校园网上公布。
基于资源 要培养学生的信息能力，就必须为他们提供大量处理信息的机会。基于资源的学习就是让学生接触到丰富的学习资源，为学生的知识构建提供支撑。笔者采用ASP技术自主开发了一个信息技术学习网站，该网站具有强大的交互功能，不仅能为学生创设丰富的资源环境，还为每个注册用户提供个人空间，支持作品的上传或下载，并开辟了学生论坛和教师答疑，供师生们交流和讨论。网站的使用不仅方便学生的学，还能改善教师的教，也为师生间的交流提供了虚拟空间。 三、学习目标 本单元的认知、情感和动作技能三种目标分述如下： 认知目标 1、能简要陈述FrontPage2000主要功能，熟悉其操作界面 2、能用自己的话解释下列术语：HTML，URL，网页，主页，超链接 3、能主动获取、收集班级信息，并加以分类和整理 4、能客观评价网页的内容和风格，具备一定的审美能力 情感目标 1、具有集体荣誉感，愿意为班级的网页建设出谋划策 2、具有乐于助人、团结协作的精神
Dreamweaver概述：内联框架层的应用 内联框架层的应用 一、内联框架 内连框架 先建1个文件夹，再建1个主页面index，再建立一个几行几列的单元格，在要显示不同页面的单元格内添加内联框架代码（要在编辑视窗内），然后定义一个内联框架的名称，在要进行连接的部位的目标处输入内联框架的名称，连接到要显示的页面上即可。 一个内连框架的代码 源内连框架中的内容
规划网页布局教学设计 潘圣江 【教学目标】 知识与技能目标： 1、了解框架结构的特点与用途； 2、掌握框架网页建立的方法与步骤； 3、通过放手让学生自己看书学习，自主独立探索操作，培养学生自学探究能力，养成良 好的学习习惯； 4、使学生通过搜集整理各种动物网页素材，培养自己分类归纳与综合处理能力； 5、使学生通过网页设计制作，培养自己审美能力与创新能力，同时，让学生在制作过程 中，通过对各种动物的进一步认识与了解，培养学生爱护动物、保护环境的美好情 操。 知识与技能目标： 了解表格在网页设计中的作用。 掌握网页中表格的制作方法及其基本编辑方法。 区分表格属性和单元格属性，并掌握属性的设置。 了解嵌套表格的作用及制作方法 过程与方法目标： 利用对比学习，形成知识迁移的能力 通过用表格布局网页，进一步理解表格的作用、功能 通过对比学习与自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力 情感态度与价值观目标： 通过对用表格布局网页的学习，增强审美观，提高对学习网页制作的兴趣。 通过“保护动物”网站的制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 【教材内容分析】 框架网页制作是小学信息技术五年级下册的内容，它是制作网页的一个重要模块。框架网页能将浏览器页面分割成几个不等的窗口，使每个窗口能同时浏览不同的网页文件，并能保持相对独立。它与教材前面所学的表格布局网页相比，是一种全新的网页结构布局方式，使用简单，方便灵活。教材采中用图文并茂的方式，一步一步介绍了框架网页的设计思想与制作过程，思路清晰，条理清楚，非常适合学生自己看书操作学习。 【教学对象分析】 教学面向的是五年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术的知识和技能，大部分学生都会网上冲浪，能上网查找资料。且通过本学期前段时间学习，已初步掌握了用FrontPage制作简单网页与创建网站的基本知识，学生对学习网页制作有极浓的兴趣。许多学生都能制作出自己喜爱的图文并茂的网页作品，动手操作欲望高，都想自主探究学习，探索创新。 而本课的内容正好给学生提供了一个展现自我的操作平台，因此我采用了谈话引导与情景教学法，任务驱动法，合作学习与分组讨论法、自主探究学习法，利用建构主义的理论，创建学习环境，让学生在问题解决中学习。 【教学重难点】
《网页设计》课程教学大纲 一、课程说明： 课程类别：选修课 适用专业：工商管理、电子商务专业、信息管理与信息系统专业和计算机相关专业、艺术设计专业等。 计划学时：60学时（讲课24学时，上机实验36学时） 学分：4 先修课程：计算机基础 执笔： 审阅： 二、课程的教学目的 以培养应用型人才为目标，充分考虑远程教育学生的学习基础和学习特点。简单介绍HTML语言、CSS样式、javascript语言，全面介绍与网页设计制作有关的知识，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。并使学生具有解决一般网页制作问题的能力。掌握运用Dreamweaver CS6网页制作软件制作网页的方法，掌握运用Fireworks CS6、photoshop cs6图像处理软件进行网页中图形制作版式设计及切片的应用。掌握运用flash CS6动画制作软件设计网页中动画的方法，进而掌握将这四个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作工作打下基础。 三、课程教学基本要求： 1、课程重点 掌握网页制作三剑客Dreamweaver、Fireworks、flash及photoshop在网页设计过程中的应用，使学生具备网站策划、网页设计与制作、效果图设计与制作等方面的技能，提高学生分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。通过学习，使学生熟练掌握运用Dreamweaver网页制作软件制作网页，掌握运用Fireworks、Photoshop图形图像处理软件进行网页中图形图像的设计与制作，掌握运用flash动画制作软件设计网页中动画的方法。 2、课程难点 （1）理解HTML语言各种文本格式、字符格式、段落设置、列表、标记的作用； （2）理解CSS样式表中属性单位的作用和意义； （3）理解javascript语言脚本程序的工作方式； （4）深入理解超级链接、图形图像各种功能和应用； （5）深入理解表格、AP Div、框架、表单的作用； （6）深入理解模板、库、行为和脚本的高级应用； （7）理解网站测试的目的和测试方法； （8）深入理解“切片”和“热点”的涵义和应用； （9）深入理解动画的组成“时间轴”、“场景”、“帧”的涵义及各种动画的制作； （10）理解使用图像设计软件进行版式设计的方法。 3、能力培养要求 （1）了解HTML语言的基本内涵。理解基本标记的用法； （2）掌握在网页中添加CSS样式的方法。熟练使用CSS设置网页格式和列表的格式； （3）熟练掌握网页中文本的输入、特殊字符的插入及字符格式的设置方法； （4）掌握在网页中嵌入图象和多媒体的方法；
《Dreamweaver——框架和框架页面》教学设计 深圳市第一职业技术学校叶苑华 中等职业学校信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。下面，以“框架和框架页面”单元为例，以个人的观点简单介绍一下怎样针对学生的心理特点、结合学生的生活实际设计这两堂课。 （一）、课前系统部分 1、课标分析 《课程标准》对网页制作的学习提出了更高的要求，其中关于框架页面的要求有：了解框架的使用方法，包括创建框架、命名框架、设置框架以及保存框架等操作。在使用框架的过程中一定要明白框架的基本结构和基本应用。 2、教材内容分析 我教的两个就业班使用的教材是中国软件行业协会职业技术认定指定教材。教材中采用的网页制作软件是Dreamweaver 8。框架和框架页面是该教材第9章192页到209页的内容，它是制作网页的一个重要模块。能够将浏览器页面分割成几个不等的窗口，每个窗口相对独立，在同一页面的几个窗口同时浏览不同的网页文件或者相对保持某些窗口的内容。 3、学生分析 在这之前，就业班的学生已经学过了Word、Photoshop等软件。因此，对Dreamweaver 8的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。同时，学生已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力。网页制作单元就可侧重培养信息表达的能力，这对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。 4、教学目标 本单元的认知、能力和情感三种目标分述如下： 认识目标： ①理解框架结构的含义和用途 ②掌握框架和框架集的含义，学会创建普通框架页面、创建嵌套框架结构页面、创 建浮动框架页面 ③掌握框架属性的设置方法 ④掌握框架网页的保存方法 能力目标：
教学设计《运用框架结构制作网页》 南京四中张莉一设计意图《运用框架结构制作网页》是初中信息技术（中国科学技术出版社出版）第二册中的内容，书中是以个小任务的形式介绍了制作框架网页的详细操作步骤。 若按书上内容用传统的教师讲解学生操作的方式教学，会存在一些问题。 一学生不理解为什么要用框架结构来制作网页；二学生只是按任务要求及具体的操作提示而完成框架结构网页，并不知道这种结构的网页应用在什么场合，在什么情况下选用框架结构来设计网页呢？三内容上没有学生喜欢的动态或多媒体元素，学生觉得只是按部就班地操作，提不起兴趣。 所以在本节课的设计中要有心注意处理好以上三个问题，精心设计课件与学件，把提高学生信息技术素养，培养学生应用信息技术能力有机融于教学。 二教材分析从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页运用表格制作网页和动态网页之后。 通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕动态按钮以及动画插件等方法，令网页更加具有活力。 但是除了表格布局外，还有一种常见的布局形式，应用也相当广
泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用，因此本节课也是利用制作网页部分的重点内容。 希望通过学习，学生在自主设计网站时能灵活运用两种布局方法，相辅相成规划自己的网站。 从教材的难易度分析，这部分知识点学生从来没有接触过，在前面学习其它的应用软件时也没有类似的地方，故而有一定难度，教学目标不能定的过高。 另外，为了让学生知识模块更加清楚，教材中原本在该章节安排的横幅广告管理器内容已在前面动态网页制作中完成教学。 三学情分析对初二的学生来说，运用框架结构制作网页是有一定难度的，因为学生在前面学习网页制作过程中没有接触过；在初一学习网络基础知识时只注意了根据网址找到相应网站并浏览网页内容，很少会考虑或注意到不同网站的不同布局。 另外，初中学生正处在好动注意力不能长时间集中的年龄，所以教师在讲解知识点与操作技能时要精讲，注意时间的分配；在选用活动中的主题素材时尽量选学生感兴趣的内容，在教学活动中注意互动与评价环节。 四教学目标分析[知识与技能]（）理解框架的概念组成及用途；（）掌握框架网页的制作；（）掌握框架网页的保存；（）掌握框架网页中超级链接的设置；[过程与方法]（）通过分析，展示新浪网结构，体验
Dreamweaver制作框架 框架是将浏览器窗口划分成几个部分，将一些不需要更新的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。框架通常是由框架集和框架两部分组成，框架集实际上是一个页面，这个页面里包含了好多框架窗口，每个框架窗口可以单独显示一个HTML文档，这些HTML 文档之间可以通过超链接联系起来，下面我们就使用Dreamweaver CS3快速地创建框架。 一、框架网页 框架将一个浏览器窗口分为多个独立的区域，每个区域（框架）显示一个单独的可滚动页面，每个框架都是浏览器窗口内的一个独立窗口。典型的框架网页如图1所示，这是关于某个电子商务网站的“客户中心”服务页面。该网页由3个框架组成，每个框架单独显示一张网页。顶部框架用于显示横幅广告，对应于网页top.html；左侧框架放置客户中心的一些服务列表，用于页面导航，对应于页面left.html；右侧窗口用于显示具体某项客户中心服务的信息，对应于页面right.html。为了浏览方便，当浏览者单击左侧客户中心服务列表的超链接时，右侧窗口显示相应的客户中心服务信息。 图1 网页中的多个框架 二、制作框架网页
Dreamweaver CS3提供了多种创建框架的方法，用户可以使用Dreamweaver CS3提供的预置框架集，也可以自己通过手写HTML代码任意地建立框架集。使用Dreamweaver CS3如何实现如图1所示的结构清晰、风格统一的框架集页面？下面我们就使用Dreamweaver CS3预置的框架集通过操作来实现如图5.22所示的框架集页面。制作过程如下。 1.新建框架网页 要新建框架网页，请事先规划好网页的设计布局，然后执行如下步骤。https://www.doczj.com/doc/664957553.html, (1) 选择“文件”一“新建”命令。 (2) 在“新建文档”对话框中，选择“框架集”类别。 (3) 从“框架集”列表中选择一个合适的框架集，如图2所示。 图2 选择符合自己要求的框架集 (4) 单击“创建”按钮，结果如图3所示。 2.设置框架集属性 要设置框架集的属性，请执行如下步骤。 (1) 选中框架集：将鼠标指针移至某个框架的边框线上，然后单击，这时将选中整个框架集，如图3所示。 (2) 设置框架集的边框宽度：通过“框架集”属性检查器，可修改边框设置为“是”，边框宽度设置为“1”，这里我们不设边框。
网页设计和发布流程 第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布 第一节站点的规划与创建 【计划课时】：3课时 【授课班级】：计算机应用一班 【教学目的与要求】 【教学方法与手段】 多媒体教学：借助多媒体手段，进行课堂理论教学； 启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：。 重点知识： 【教学组织过程】 1．上讲回顾 2．教授新知 【授课内容】 一、规划站点 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。 本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。 建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。 1、规划站点结构 注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图） 2、规划站点的浏览机制 一般可采用以下的方法： ●创建返回主页的链接 ●显示网站专题目录 ●显示当前位置 ●搜索和索引 ●反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速 地将信息反馈到网站中） 二、创建一个站点 步骤： 1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令） 2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作
第六课框架结构 6-1 创建框架 第6章框架 一、什么是框架？ 一个框架就是一个区域，可以单独打开一个HTML文档。 多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的HTML文档。 多个框架就组成一个框架集。 这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架集是一个文件，图中我们用index.htm命名。框架中左边命名为L，指向的是一个网页A.htm。右边命名为R，指向的是一个网页B.htm。
2、多个框架就组成一个框架集。每个框架集结构是由多个网页文件组成的。点击每个框架结构分别显示独立的名字，点击框架边框线则显示框架集的名字。 拖动即可调整框架宽度3、如果设计框架集时看不到边框，可以点击“查看—可视化助力—框架边框”，使其显示出来。 4、单击每个框架，可以从下面属性面板中进行设置，与单个页面的编辑的方式相同。
5、保存框架集的时候，需要把框架集的每个框架结构分别保存成独立的网页。 框架集保存框架保存 保存后的站点目录文件 6-2 框架实例：电子书1 三、实例：网页书 知识点： 1、框架的作用 1．做网页的布局，将网页分成不同的部分 2．简化网页的编写：网页之间相同的内容只需要编写一次 3．加快网页的浏览：每次网页只更新那个变化的框架内容 2、设置框架和框架集的属性 1）框架集 选中框架集：鼠标单击框架的边框，虚线显示的部分就是选中的框架集 设置框架集属性： 边框，边框宽度，边框颜色 行：值，单位（像素，百分比，相对） 2）框架 选中框架：框架面板中单击要设置的框架或者按住【alt】键，在框架窗口内单击 设置框架属性： 框架名称，源文件，边框，滚动，不能调整大小 边框颜色，边界宽度，边界高度。 3、设置框架中的链接
[章节名称]：网页设计入门基础 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及 技术 2.了解网页的基本构成及最简单的html代码 3.了解网页设计的流程 [重点] 了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码 [难点] ； 掌握最基本的网页的构成及最简单的网页html代码 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：结合PPT课件的内容，讲解网络和网页的基本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。 ^ 环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的html 代码。 环节三：了解网页设计的流程 主要有以下几个步骤：
一. 网站规划 二. 素材资源收集 三. 选择开发工具 四. 站点建立与规划 五. 分模块进行网页设计 六. 网页源代码测试与特效添加 七. 申请域名与空间 . 八. 网页源代码上传 九. 定期的维护 环节四：对本节课的内容进行复习，让学生练习html的代码。并进行疑难解答" …
[章节名称]：html基础与应用1 [课堂类型]：理论■实训□练习■测试□ [学时安排]：2课时 [目的要求] 了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。 \ [重点] Html语言设置网页的背景音乐，图片，字体 [难点] Html语言设置网页的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 ： 《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。 环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
如何使用Dreamweaver制作一个网页? 2009-04-24 13:35 创建网页页面 1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。中文版的的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。 注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。 2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。 3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。 4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。 注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，
因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。注：在网页上打入空格的办法是：把输入法调为全角。 注：在网页上换行的办法是：shift+Enter。只按Enter则为换段。 下面拿一个现成的例子来给大家讲解一下： 现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图：在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了哪些东西。 □网页顶端的标题“我的主页”是一段文字。 □网页中间是一幅图片。 □最下端的欢迎词是一段文字。 □网页背景是一深紫红颜色。 构思好这个网页的结构，我们就可以开始制作了。 首先启动Dreamweaver，确保你已经用站点管理器建立好了一个网站（根目录）。 为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标
教学设计：制作网页（框架） 学习目标:制作框架网页在网页中插入字幕和超链接知识制作框架网页框架网页是一种特殊的网页，它将窗口划分成若干小窗口区域（框架）。 每个框架独立显示一个不同的网页（有自己的网页名字），整个框架网页有一个总的名字。 框架与表格在组织网页结构时相似。 表格是对页面区域进行划分，框架是对整个浏览窗口进行划分。 ·创建框架网页：单击菜单文件→新建→网页，选择框架网页标签→选择嵌套式层次结构·选中的框架边框为蓝色，在拆分或删除框架时应注意是否选中。 ·隐藏框架间的横线：右击框架网页→单击框架属性→在对话框中单击框架网页按钮，在网页属性对话框中选框架标签→设置显示边框为未选中状态。 ·按住键，拖动鼠标可以快速拆分框架。 ·删除框架：单击菜单框架→删除框架。 ·保存框架网页时注意要保存所涉及到的所有网页。 ·更改框架链接的网页：右击相应的超链接→在弹出的快捷菜单上选择超链接属性命令，打开超链接对话框→可直接选择列出的文件，或在框中输入网页的地址→单击目标框架右边的更改目标框架按钮，在当前框架网页中选择目标框架。
网页中插入字幕·插入字幕：光标定位插入点→单击插入→组件→字幕打开字幕属性对话框；→在文本框中输入文字，选择方向速度表现方式等；→选中字幕，拖动鼠标，调节字幕运动范围。 ·修改字幕：双击字幕，可以打开字幕属性对话框，对字幕属性进行修改。 超链接相关网页超链接是从一个网页指向另一个目标的连接。 一般在网页中的某文字或图片上设置超链接。 ·创建超链接：单击文字或图片→常用工具栏的超链接按钮，打开创建超链接对话框。 ·取消超链接：选中具有超链接的文本或图片，单击超链接按钮，在打开的对话框中将栏中的内容删除。 ·跟踪超链接：在超链接上右击，在打开的快捷菜单上选择跟踪超链接命令；或：在普通视图中，按住键，将光标移到超链接上，单击，会跟踪连接到超链接指向的目的位置。 ·设置超链接文本的颜色：网页中超链接文本的颜色共有种：未访问过的，当前正在访问的，已访问过的。 默认这种颜色分别为蓝色，红色深蓝色。 单击格式→背景→在网页属性对话框→选背景标签，选定超链接已访问过的超链接当前超链接的颜色。 作业：新建框架网页，建立超链接，在网页中插入字幕。 制作网页（框架）这一教案
“网页设计与评价”教学设计与思考 南召现代中学董麒麟 [摘要]中小学信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。本文以“网页设计与评价”单元为例，阐述了信息技术课教学设计的新思路，并就现行教材的编排组织提出了几点建设性意见。 [关键词]信息技术/网页制作/任务驱动 中学信息技术课程的任务是培养学生的信息素养，具体包括快速获取信息的能力，正确地评价信息，有效地利用信息和准确地表达信息。因此，信息技术课也应以信息处理为主线来展开，而不该成为单纯的计算机应用软件操作课。以“网页制作”为例，整个制作过程对学生获取、评价、表达和利用信息的各项能力都是一种培养和锻炼。下面，笔者就这一单元的教学设计做具体阐述。 一、教材分析 我校目前使用的教材是上海教育出版社编写的高二《网络技术应用》。网页设计与评价是其中第四章的教学内容。在这之前，学生已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力，网页设计与评价单元就可侧重培养信息表达的能力，这对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。 教材中采用的网页制作软件是FrontPage2000。由于FrontPage2000采用了与Word等其他Office软件相类似的图形操作界面，可以自动生成Html代码，轻松实现网页发布。在高一阶段，学生已经学过了Word字处理软件。因此，对FrontPage2000的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。 二、设计思想 1、任务驱动 本单元的学习通过完成网页作品来实现。班级网页的信息来自学生生活的班集体，每个热爱班级、关心班级的同学都能产生一种急切地完成任务的动机，而完成任务又能给他们带来成就感和满足感。这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用，由“要我学”变成“我要学”。在教学中，教师通过创设情境，激发学生的创作欲望，把总任务划分到每节课，按照学生的制作进度来布置子任务，使学生在教师的引导下逐步达成教学目标。 2、小组协作
网页设计 1、课程网站主页的创建 下面以制作《现代教育技术》课程网站为例，介绍Dreamweaver的基本操作。 （1）定义本地站点 开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。 ①在D盘根目录下新建一个文件夹，命名为“myweb”，这个文件夹将作为网站的站点文件夹，以后所有的网页文件、素材都放在这个文件夹下。 ②选择“站点/新建站点”命令（或“站点/站点管理”命令，单击“新建”按钮），弹出“定义站点”向导（图4-1-3所示），输入站点的名字“现代教育技术”，单击“下一步”； 图4-1-3 定义本地站点 ③选择“否，不想使用服务器技术”； ④在文件存储位置文本框中，设置文件存放路径：单击输入框右侧的文件夹图标，找到刚才在D盘新建的myweb文件夹，单击“选择”按钮。 ⑤“如何连接到远程服务器”选择“无”； ⑥单击“完成”按钮，站点的名字就出现在站点管理器中，如图4-1-4所示。
图4-1-4 站点文件管理窗口 （2）创建新文档 选择“文件>新建”命令，出现“新建文档”对话框，如图4-1-5所示。 图4-1-5 创建新文档 文档的创建有两种方式，一是通过“常规”选项卡直接创建，二是通过现有模板创建新文档。在“类别”列表中选择文档的类别，有“基本页”、“动态页”、“模板页”、“其他”、“CSS样式表”或“框架集”等；然后从右侧的列表中选择要创建的文档的类型。 选择“基本页/HTML”，单击“创建”按钮创建一个HTML页面。新文档在“文档”窗口中打开，选择“文件/保存”命令，将该文档保存为index.html。 （3）页面属性的设置 ①设置标题。在“文档”工具栏的“标题”文本框中输入标题，当用户浏览页面时，页面标题会在浏览器标题栏显示，可以帮助了解页面中的内容（图4-1-6）。 图4-1-6 设置页面标题 ②设置背景图片或颜色。选择菜单“修改>页面属性”命令或单击属性面板上的“页面属性”按钮，弹出“页面属性”对话框（图4-1-7）。选择“外观”分类，单击“背景图像”按钮给页面设置背景图像，从弹出的对话框中选择事先做好的背景图；“重复”用来设置背景图像在页面上的显示方式，包括：不重复、重复、横向重复、纵向重复，默认为图像在页面内重复显示，确定后可以看到页面背景。