2023年网页设计与制作精品讲义.pdf

网页设计与制作课程电子档教案第1页，共8页 常雪敏 淮安市辅仁职业技术学校 2016 年春学期电子档教案 一、序号 3 学科 网页设计与制作 授课班级 1407 第 4 周第 1 次课 执教者 常雪敏 二、授课类型：A (A 新授课、B 复习课、C 习题课)三、授课章节、标题 项目一：创建框架网页 四、教学目标：任务一 创建框架网页 五、重难点：会创建框架网页 六、教学准备：无 七、教学过程含板书设计、作业布置等：1、新课导入：在 Dreamweaver 中预定义了多种框架集，可以很方便地创建想要的框架网页。2、新课讲解：择预定义的框架集将自动设置创建布局所需要的所有框架集和框架，它是迅速创建基于框架布局的最简单方法。创建框架集的具体操作步骤如下。1选择菜单中的【文件】|【新建】命令，打开【新建文档】对话框，在对话框中选择【常规】选项卡中的【类别】|【框架集】|【上方固定，左侧嵌套】选项。如图 网页设计与制作课程电子档教案第2页，共8页 常雪敏 2.单击【创建】按钮，即可创建一上方固定，左侧嵌套的框架网页。如图,提示：还可以用以下两种方法创建框架网页 在【布局】插入栏中单击按钮，在弹出的菜单中选择【左侧和嵌套的下方框架】选项，即可创建框架网页。如图 7-3：选择菜单中的【插入】|【HTML】|【框架】|【左侧及下方嵌套】命令，即可创建框架网页。插入预定义框架集 插入预定义框架集的具体操作步骤如下。1标放置在头部框架中，选择菜单中的【修改】|【页面属性】命令，打开【页面属性】对话框中将【左边距】设置为 0 像素，【右边距】设置为 0 像素。如图 网页设计与制作课程电子档教案第3页，共8页 常雪敏 2【确定】按钮。选中头部框架，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，打开【选择 HTML 文件】对话框，在对话框中选择 top1.htm。3单击【确定】按钮，插入文件。4将光标放置在左侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择 HTML 文件】对话框中选择 leftlhtm，单击【确定】按钮，插入文件。5将光标放置在右侧框架中，修改页面属性，在【属性】面板中单击【源文件】文本框右侧的【浏览文件】按钮，在打开的【选择 HTML 文件】对话框中选择 right.htm，单击【确定】按钮，插入文件。保存框架和框架集文件 在浏览器中预览框架集之前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。保存框架和框架集文件的具体操作步骤如下。1新建一上方固定，左侧嵌套的框架网页。选择菜单中的【文件】|【保存全部】命令，打开【另存为】对话框，此时整个框架集内侧出现阴影，所以询问的是框架集的名称，在【文件名】文本框中输入 index.htm。网页设计与制作课程电子档教案第4页，共8页 常雪敏 2单击【保存】按钮，打开第 2 个【另存为】对话框，因为右侧框架内侧出现阴影，所示询问的是右侧框架的名称，在【文件名】文本框中输入 right.htm。如图 7-6：图 7-6 3单击【保存】按钮，打开第 3 个【另存为】对话框，因为左侧框架内侧出现阴影，所以询问的是左侧框架的名称，在【文件名】丈本框中输入 left.htm。如图 7-7：网页设计与制作课程电子档教案第5页，共8页 常雪敏 图 7-7 4单击【保存】按钮，打开第 4 个【另存为】对话框，因为头部框架内侧出现阴影，所示询问的是头部框架的名称，在【文件名】文本框中输入 top.htm。如图 7-8：5单击【保存】按钮，至此整个框架保存完毕。图 7-8 在【框架】面板中选择框架或框架集 在【框架】面板中选择框架或框架集的具体操作步骤如下。1.选择菜单中的【窗口】|【框架】命令，打开【框架】面板，在面板中单击需要选择的框架，框架的边界就会被虚线包围。如图 7-9：网页设计与制作课程电子档教案第6页，共8页 常雪敏 图 7-9 2.在【框架】面板中单击框架集的边框，也可以选择整个框架集，框架集的内侧出现虚线。如图 7-10：图 7-10 在文档窗口中选择框架或框架集 在文档窗口中选择框架或框架集的具体操作步骤如下。1 将光标放置在要选择的框架中，按住键单击鼠标左键，框架边框内侧出现虚线，网页设计与制作课程电子档教案第7页，共8页 常雪敏 即可选择该框架。2将光标放置在任意框架中，按住键，当鼠标指针靠近框架边线时，出现上下或左右箭头时，单击鼠标左键，框架集内侧出现阴影，即可选中整个框架集。如图 7-11：图 7-11 使用框架【属性】面板可以查看和设置大多数框架属性。选中一个框架，选择菜单中的【窗口】|【属性】命令，打开【属性】面板中显示选中的框架属性。框架【属性】面板参数如下。如图 7-12：图 7-12【框架名称】：用于为当前框架命名。【源文件】：确定框架的源文档，可以直接输入名字，或单击文本框右边的固按钮查 找并选取文件。【滚动】：当框架内的内容显示不下的时候是否出现滚动条，包括【是】、【否】、【启动】和【默认】4 个选项。【不能调整大小】：限定框架尺寸，防止用户拖动框架边框。【边界宽度】：设置以像素为单位的框架边框和内容之间的左右边距。【边界高度】：设置以像素为单位的框架边框和内容之间的上下边距。【边框】：用来控制当前框架边框，包括【是】、【否】和【默认】3 个选项。【边框颜色】：设置与当前框架相邻的所有框架的边框颜色。设置框架集属性 选中框架集，打开【属性】面板，在【属性】面板中设置框架集的属性。网页设计与制作课程电子档教案第8页，共8页 常雪敏 框架集【属性】面板参数如下。如图 7-13：图 7-13 边框】：设置是否有边框，包括【是】、【否】、【默认】3 个选项。选择【默认】选项，将由浏览器端的设置来决定。【边框宽度】：设置整个框架集的边框宽度，以像素为单位。【边框颜色】：用来设置整个框架集的边框颜色。【行或列】：【属性】面板中显示的是行或列，是由框架集的结构而定。【单位】：行、列尺寸的单位，包括【像素】、【百分比】、【相对】3 个选项。技巧提升 如何隐藏滚动条 在【属性】面板中设置【边框】和【滚动】都为【否】，框架的边框是隐藏的，勾选【不能调整大小】复选框，即可隐藏滚动条。如何调整框架边框的粗细 选择整个框架集，打开框架集【属性】面板，将【边框宽度】设置为 0，则不显示边框，想要调整边框粗细，设置【边框宽度】即可。如何准确地选择所需的框架 在制作框架网页时，往往不能够准确地选择某个框架集，对制作框架网页来说非常不方便，准确地选择所需的框架的具体操作方法如下。选择菜单中的【窗口】|【框架】命令，打开【框架】面板，在面板中单击想要选择的框架，框架的边界就会被虚线包围。如何调整框架大小 选中要调整大小的框架集，选择菜单中的【窗口】|【属性】命令，打开【属性】面板，在面板的【行列选择范围】显示框中单击左侧标签或顶部标签分别选定要调整框架所在的行或列，然后在【值】文本框中输入数值，在后面的下拉列表中选择【值】的单位。3、师生研讨：让同学们自己动手新建以自己的框架网页。4、作业布置：利用框架知识制作课本上例题的页面效果。