网页设计与制作教案

淮安市辅仁职业技术学校一、序号 3 学科 执教者 常雪敏 二、授课类型： A (A 新授课、B 复习课、C 习题课) 三、授课章节、标题 项目一：创建框架网站 四、教学目标： 任务一 创建框架网页 五、重难点： 会构建框架网站（2016 年春学期电子档教案） 网页设计与制作 授课班级 1407第 4 周第 1 次课六、教学准备： 无 七、教学过程（含板书设计、作业布置等） ： 1、新课导入：在 Dreamweaver 中预定义了多种框架集，可以很方便地建立想要的框架网页。2、新课讲解： 择预定义的框架集将手动修改建立布局所必须的所有框架集和框架，它是迅速建立基于 框架布局的最简洁方式。创建框架集的详细操作方法如下。 1．选择菜单中的【文件】|【新建】命令，打开【新建文档】对话框，在对话框中选取 【常规】选项卡中的【类别】|【框架集】|【上方固定，左侧嵌套】选项。如图《网页设计与制作》课程电子档教案第 1 页，共 8 页 作者：常雪敏2.单击【创建】按钮，即可创建一下边固定，左侧嵌套的框架网页。如图,提示：还可以用以 下两种方式建立框架网站在【布局】插入栏中右键图标，在跳出的菜单中选取【左侧和嵌套的下方框架】选项，即可 创建框架网站。

如图 7-3： 选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命令，即可构建框架网站。插入预定义框架集 插入预定义框架集的详细操作方法如下。 1．标放置在头部框架中，选择菜单中的【修改】|【页面属性】命令，打开【页面属性】对 话框中将【左边距】设置为 0 像素， 【右边距】设置为 0 像素。如图《网页设计与制作》课程电子档教案第 2 页，共 8 页 作者：常雪敏2． 【确定】按钮。选中头部框架，在【属性】面板中右键【源文件】文本框右侧的【浏览文 件】按钮，打开【选择 HTML 文件】对话框，在对话框中选取 top1.htm。 3．单击【确定】按钮，插入文件。 4．将光标放置在右侧框架中，修改页面属性，在【属性】面板中右键【源文件】文本框右 侧的【浏览文件】按钮，在开启的【选择 HTML 文件】对话框中选择 leftl．htm制作框架网页教案，单击【确 定】按钮，插入文件。 5．将光标放置在左侧框架中，修改页面属性，在【属性】面板中右键【源文件】文本框右 侧的【浏览文件】按钮，在开启的【选择 HTML 文件】对话框中选择 right.htm，单击【确 定】按钮，插入文件。 保存框架和框架集文件 在浏览器中预览框架集之前， 必须保存框架集文件或者要在框架中显示的所有文档。

可以单 独保存每个框架集文件和带框架的文档， 也可以同时保存框架集文件和框架中出现的所有文 档。保存框架和框架集文件的详细操作方法如下。 1．新建一下边固定，左侧嵌套的框架网页。选择菜单中的【文件】|【保存全部】命令，打 开【另存为】对话框，此时整个框架集内侧出现阴影，所以询问的是框架集的名称，在【文 件名】文本框中键入 index.htm。《网页设计与制作》课程电子档教案第 3 页，共 8 页 作者：常雪敏2．单击【保存】按钮，打开第 2 个【另存为】对话框，因为左边框架外侧出现阴影，所示 询问的是左边框架的名称，在【文件名】文本框中键入 right.htm。如图 7-6：图 7-6 3．单击【保存】按钮，打开第 3 个【另存为】对话框，因为左边框架外侧出现阴影，所以 询问的是左侧框架的名称，在【文件名】丈本框中键入 left.htm。如图 7-7：《网页设计与制作》课程电子档教案第 4 页，共 8 页 作者：常雪敏图 7-7 4．单击【保存】按钮，打开第 4 个【另存为】对话框，因为头部框架外侧出现阴影，所示 询问的是头部框架的名称，在【文件名】文本框中键入 top.htm。如图 7-8： 5．单击【保存】按钮，至此整个框架保存完毕。

图 7-8 在【框架】面板中选取框架或框架集 在【框架】面板中选取框架或框架集的详细操作方法如下。 1.选择菜单中的【窗口】|【框架】命令，打开【框架】面板，在面板中单击需要选用的框架， 框架的界限常常被虚线包围。如图 7-9：《网页设计与制作》课程电子档教案第 5 页，共 8 页 作者：常雪敏图 7-9 2.在【框架】面板中点击框架集的边框，也可以选择整个框架集，框架集的外侧出现虚线。 如图 7-10：图 7-10 在文档窗口中选取框架或框架集 在文档窗口中选取框架或框架集的详细操作方法如下。 1． 将光标放置在要选用的框架中， 按住<Alt>键点击光标左键， 框架边框两侧出现虚线，《网页设计与制作》课程电子档教案第 6 页，共 8 页 作者：常雪敏即可选取该框架。 2．将光标放置在任意框架中，按住<Alt>键，当光标指针靠近框架边线时，出现上下或左右 箭头时，单击键盘左键，框架集内侧出现阴影，即可选中整个框架集。如图 7-11：图 7-11 使用框架【属性】面板可以查看和修改大多数框架属性。选中一个框架，选择菜单中的【窗 口】|【属性】命令，打开【属性】面板中显示选中的框架属性。

框架【属性】面板参数如下。如图 7-12：图 7-12 【框架名称】 ：用于为当前框架命名。 【源文件】 ：确定框架的源文档，可以直接键入名字，或点击文本框右边的固按钮查 找并选择文件。 【滚动】 ：当框架内的内容显示不下的之后能否发生滚动条，包括【是】 、 【否】 、 【启动】和 【默认】4 个选项。 【不能调整大小】 ：限定框架宽度，防止用户拖动框架边框。 【边界宽度】 ：设置以像素为单位的框架边框和内容之间的左右间距。 【边界高度】 ：设置以像素为单位的框架边框和内容之间的上下宽度。 【边框】 ：用来控制当前框架边框，包括【是】 、 【否】和【默认】3 个选项。 【边框颜色】 ：设置与当前框架相邻的所有框架的边框样式。 设置框架集属性 选中框架集，打开【属性】面板，在【属性】面板中修改框架集的属性。《网页设计与制作》课程电子档教案第 7 页，共 8 页 作者：常雪敏框架集【属性】面板参数如下。如图 7-13：图 7-13 边框】 ：设置是否有边框，包括【是】 、 【否】 、 【默认】3 个选项。选择【默认】选项制作框架网页教案，将由 浏览器端的修改来决定。 【边框厚度】 ：设置整个框架集的边框厚度，以像素为单位。

【边框颜色】 ：用来修改整个框架集的边框样式。 【行或列】 ： 【属性】面板中显示的是行或列，是由框架集的构架而定。 【单位】 ：行、列尺寸的单位，包括【像素】 、 【百分比】 、 【相对】3 个选项。 技巧提高 如何隐藏滚动条 在【属性】面板中修改【边框】和【滚动】都为【否】 ，框架的边框是隐藏的，勾选【不能 调整大小】复选框，即可隐藏滚动条。 如何微调框架边框的粗细 选择整个框架集，打开框架集【属性】面板，将【边框厚度】设置为 0，则不显示边框， 想要调整边框粗细，设置【边框厚度】即可。 如何准确地选择所需的框架 在制作框架网页时，往往不就能准确地选择某个框架集，对制作框架网站来说非常不便于， 准确地选择所需的框架的详细操作方式如下。 选择菜单中的【窗口】|【框架】命令，打开【框架】面板，在面板中单击想要选用的框架， 框架的界限常常被虚线包围。 如何微调框架大小 选中要微调大小的框架集，选择菜单中的【窗口】|【属性】命令，打开【属性】面板，在 面板的 【行列选择范围】 显示框中点击右侧标签或底部标签分别选取要微调框架所在的行或 列，然后在【值】文本框中键入数值，在前面的下拉列表中选取【值】的单位。 3、师生研讨：让同学们自己动手新建以自己的框架网页。 4、作业布置：利用框架知识制作课本上习题的页面效果。《网页设计与制作》课程电子档教案第 8 页，共 8 页 作者：常雪敏

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/ruanjian/article-127492-1.html