网页设计与制作项目六 框架页面设计与制作.pptVIP

项目活动六 框架页面设计与制作 复习回顾: 怎样在网页中插入层？ 插入层的步骤（两种方法） 1.“插入记录”中的“布局对象”中的“AP DIV” 2.“插入”面板中的“布局”选项卡中的绘制AP DIV 主要教学环节 项目活动六 框架页面设计与制作 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景） 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景） 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 主要教学环节 项目背景 1 项目分析 2 任务实施 3 任务拓展 4 作品展评 5 项目小结 6 布置作业 7 反思感悟 8 项目活动六 框架页面设计与制作 （一）项目背景 框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个在浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。框架的出现大大丰富了网页的页面的布局以及页面之间的组织形式。 返回 （二）项目分析 项目活动目标： 能够学会框架的创建，能够熟练对框架进行操作，培养学生的自主学习能力、合作探究能力和举一反三能力 教学重点： 创建框架 教学难点： 框架的操作 返回 （三）任务实施 应用框架创建一个“美食网站”的静态页面。 利用Dreameaver中框架创建一个“美食网站”的静态页面。 效果如下图所示。 【操作步骤】 1.新建框架 创建一个站点， 按ctrl+n 新建命令，弹出新建文档的对话框，在左侧的列表中选择“示例中的页”选项，然后选择框架集，在右侧的“示例页”中选择“上方固定，下方固定”的选项，点击创建。 2.保存框架集 选择“文件”——“保存全部”的命令，弹出“另存为” 对话框，在“文件名”处输入“index” 3.保存底部框架 单击保存按钮，会弹出一个保存对话框保存的框架为底部框 架，在文件名处填“bottom”然后点击确定 4.保存主框架 再次单击保存按钮会弹出一个对话框，此次访问的框架 是中间部分，在文件名处填“main”。 5.保存顶部框架 最后一个保存对话框的文件名“top”保存顶部的框架内容 6.设置页面属性 将光标置入顶部框架中，单击“修改”—“页面属性”弹出 的对话框，在对话框中将“左边距、右边距、上边距、下边距” 选项均设为0，完成页面属性的修改，用同样的方法设置顶部 的框架。在框架“属性”面板中“行”选项的数值框中输入“64”， 按Enter. 7.插入表格 将光标置入顶部框架，在插入面板中“常用”选项卡中单击 “表格”按钮，在弹出的“表格”对话框中进行设置。 8.插入图片 在顶端的边框内插入网页的表头图片 9. 插入图片 在中间框架内插入两列一行的表格，然后在表格中插入图片 10. 插入图片 最后在底部框架内插入底部图片 11.CTRL+S保存，按F12测试网站 1．框架和框架集 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗 口的其余部分中所显示内容无关的 HTML 文件。框架集是 HTML 文件，它定义一组框架的布局和属性，包括框架的 数目、大小和位置，以及在每个框架中初始显示