(以2课时为单元) 课序：5 第四章第1一3节 目的要求， 了解页面版式的基础，掌握表格排版的技术 教学内容： 1.页面版式基础 2.表格排版 3.表格排版实例 重点与难点： 重点：页面版式基础和表格排版的应用 难点：表格排版的应用 教学方法：多媒体教学 手段：课堂讲授为主。 教学步骤， 个网页实例，然后展开理论教学： 页面版式的基础 表格排版的技术 复习提问 创建站点 作业题目： 预习内容： 层排版 课时分配： 「教学环节复习提问新课讲解课堂讨论小节 作业布置 时间分配3 84 10 3 0
（以 2 课时为单元） 课序：5 第四章 第 1—3 节 目的要求： 了解页面版式的基础，掌握表格排版的技术。 教学内容： 1．页面版式基础 2．表格排版 3．表格排版实例 重点与难点： 重点：页面版式基础和表格排版的应用 难点：表格排版的应用 教学方法： 多媒体教学 手段： 课堂讲授为主。 教学步骤： 引入一个网页实例，然后展开理论教学： 页面版式的基础 表格排版的技术 复习提问： 创建站点 作业题目： 预习内容： 层排版 课时分配： 教学环节 复习提问 新课讲解 课堂讨论 小节 作业布置 时间分配 3 84 10 3 0
第4章设计页面布局 本章主要介绍了几种不同的网页布局的方法：表格排版、层排版、框架排版，还介绍了 利用Dreamweaver内部行为制作网页特效。 【本章学习目的】 木意诵讨几个典型实例的介绍.面占讲解了网页版面布局的技术。诵过木意的学习，读 了解排版网页技术的异同性，同 一、网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页 面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素， 1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主 要内容的排版等。经常用到的版面布局结构主要有以下几种： 1. “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为 菜单条的背景较深，整体效果类似英文字母“T”,这是网页设计中用的最广泛的一种布局 方式。这种布局的优点是页面结构洁晰，主次分明。是初学者最容易上手的布局方法。缺点 是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 2.“口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情 连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤， 不够灵活。 3.“三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分 割为四部分，色块中大多放广告条。 4.POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择 多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设 计页面：表格、层、框架和CSS+DIV,本章只介绍前三种方式。 二、实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在
第4章 设计页面布局 本章主要介绍了几种不同的网页布局的方法：表格排版、层排版、框架排版，还介绍了 利用 Dreamweaver 内部行为制作网页特效。 【本章学习目的】 本章通过几个典型实例的介绍，重点讲解了网页版面布局的技术。通过本章的学习，读 者应掌握网页的排版技术：表格排版、层排版、框架排版，了解排版网页技术的异同性，同 时还要掌握利用 Dreamweaver 内部行为制作网页特效的技巧。 一、网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页 面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现 800*600 像素， 1024*768 像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主 要内容的排版等。经常用到的版面布局结构主要有以下几种： 1. “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为 菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局 方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点 是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 2. “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情 连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤， 不够灵活。 3. “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分 割为四部分，色块中大多放广告条。 4. POP 布局 POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心。常用于时尚类站点，比如 ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择 多大？怎样放置网页的网页元素？在 Dreamweaver 中提供了四种主要的方法用于规划和设 计页面：表格、层、框架和 CSS+DIV，本章只介绍前三种方式。 二、实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在
一起，使整个网页井井有条而不至于杂乱无章。 在本实例中，主要涉及以下知识点 ·页面采用表格进行整体布局，表格划分为若干个单元格，在单元格内填充网页元素， 实现网页的布局： ·通过定义网页的背景图片达到美化网页的效果： ·该页的栏目导航采用“导航条”效果。 三、使用表格排版 表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为 单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。 在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用：另一种是在布局 网页时用。当表格被用作布局时，需要对表格的属性进行设置。 1、插入表格和编辑表格 表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。 ·插入独立表格 ·插入嵌套表格 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表 格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元 格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。 ·编辑表格 (1)增加行与列 (2)删除行或列 (3)格式化表格 4)排序表格 5)导入与导出表格数据 2、表格及单元格属性设置 ● 表格属性设置 ·单元格属性的设置 3、使用表格排版网页 表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合 并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。 使用表格构造网页布局时应遵循如下原则： ● 要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。 ●从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。 。在外部使用绝计像素方法，在内部使用相对百分比方法。 4、在布局模式下插入表格和单元格 为了简化使用表格进行页面布局的过程，在Dreamweaver提供了布局模式。在布局模 式下，使用布局表格作为基础结构来设计网页，在布局表格中创建布局单元格，然后插入网 页元素。 在布局模式下，使用表格进行布局具有定位简单、容易调整等优点
一起，使整个网页井井有条而不至于杂乱无章。 在本实例中，主要涉及以下知识点： ⚫ 页面采用表格进行整体布局，表格划分为若干个单元格，在单元格内填充网页元素， 实现网页的布局； ⚫ 通过定义网页的背景图片达到美化网页的效果； ⚫ 该页的栏目导航采用 “导航条”效果。 三、使用表格排版 表格是由一些被线条分开的单元格组成。线条即表格的边框，被边框分开的区域被称为 单元格，数据、文字、图像等网页元素均可根据需要放置在相应的单元格中。 在网页中使用表格一般有两种情况：一种是在需要组织数据显示时用；另一种是在布局 网页时用。当表格被用作布局时，需要对表格的属性进行设置。 1、 插入表格和编辑表格 表格在网页中通常存在两种形式：一种是独立的形式存在，二是以嵌套的形式存在。 ⚫ 插入独立表格 ⚫ 插入嵌套表格 在网页中为了保证各部分内容之间相对独立性，而不会因为编辑其它内容的同时被修改，表 格的嵌套形式在网页中普遍存在。一般，网页有一个大的外层表格，按区域划分为若干单元 格，然后在区域单元格中再插入嵌套表格，这样各区域的排版即规范又灵活。 ⚫ 编辑表格 (1) 增加行与列 (2) 删除行或列 (3) 格式化表格 (4) 排序表格 (5) 导入与导出表格数据 2、表格及单元格属性设置 ⚫ 表格属性设置 ⚫ 单元格属性的设置 3、使用表格排版网页 表格是能将网页元素按设计者要求的方式显示的一种排版技术。通过单元格的拆分、合 并以及在单元格中插入嵌套表格等方法对网页元素进行更细致的控制。 使用表格构造网页布局时应遵循如下原则： ⚫ 要规划好再运行，甚至要进行无数次的实验和重复运行才能制作出好的页面框架。 ⚫ 从外向内工作。先建立最大的表格，再在它内部创建嵌套的较小表格。 ⚫ 在外部使用绝计像素方法，在内部使用相对百分比方法。 4、在布局模式下插入表格和单元格 为了简化使用表格进行页面布局的过程，在 Dreamweaver 提供了布局模式。在布局模 式下，使用布局表格作为基础结构来设计网页，在布局表格中创建布局单元格，然后插入网 页元素。 在布局模式下，使用表格进行布局具有定位简单、容易调整等优点
·绘制布局表格与布局单元格 ·布局表格和单元格属性的设置 表格 版实 的制作过程 本小节讲解【例4.1】利用表格进行网页布局的制作过程。作为专业的设计者，首先利 用图形制作软件如：Fireworks、Photoshop等，绘制一张网页草图，然后根据网页草图 利用表格对网页进行排版。 (以2课时为单元) 课序：6 第四章第1一3节 目的项求」 通过本节的实操练习，加深了解页面版式的基础和学握表格排版的技术。 教学内容： 1.页面版式基础 )。表格排版 3.表格排版实例 重点与难点： 重点：页面版式基础和表格排版的应用 难点：表格排版的应用 教学方法：上机实训 手段：学生实操为主，教师辅导为辅 教学步骤： 引入一个网页实例，然后进行实操练习： 页面基础、表格排版等。 复习提问： 作业题目： 预习内容：
⚫ 绘制布局表格与布局单元格 ⚫ 布局表格和单元格属性的设置 1、 表格排版实例的制作过程 本小节讲解【例 4.1】利用表格进行网页布局的制作过程。作为专业的设计者，首先利 用图形制作软件如：Fireworks、Photoshop 等，绘制一张网页草图，然后根据网页草图 利用表格对网页进行排版。 （以 2 课时为单元） 课序：6 第四章 第 1—3 节 目的要求： 通过本节的实操练习，加深了解页面版式的基础和掌握表格排版的技术。 教学内容： 1．页面版式基础 2．表格排版 3．表格排版实例 重点与难点： 重点：页面版式基础和表格排版的应用 难点：表格排版的应用 教学方法： 上机实训 手段： 学生实操为主，教师辅导为辅。 教学步骤： 引入一个网页实例，然后进行实操练习： 页面基础、表格排版等。 复习提问： 作业题目： 预习内容：
课时分配： 教学环节复习提问新课讲解课堂讨论小节 作业布置 时间分配 上机实训 1.背景知识 根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创建站点及编辑网 页的知识，进行网页不同排版方式的练习。 2.实训准备工作 实训素材和网页草图发送到学生的主机中，以供学生参考使用。 3.实训腰求 ()根据网页草图1，如图所示，利用表格设计网页布局，在单元格中添加网页元素。 Sunoasis 发经济剂人为 公司简分 图表格排板网页草图 4.实训指导 (1)表格设计网布局 步豫1 首先创 一个本地站点，新建一个文档（其余几个实训是一样的，这是必须的 一个步骤)，然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，单 击“跟踪图像”选项卡，将草图导入到跟踪图像中，改变透明度为50%。 步骤2选择“插入”栏1“布局”选项丨“布局模式”按钮，切换到布局模式，单击 “布局表格”按钮，绘制三个表格（上中下），表格的宽度与草图总的宽度相同：853，每一 个布局表格左侧插入布局单元格，单元格的宽度与绿色色块相同：161，如图所示
课时分配： 教学环节 复习提问 新课讲解 课堂讨论 小节 作业布置 时间分配 上 机 实 训 1. 背景知识 根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创建站点及编辑网 页的知识，进行网页不同排版方式的练习。 2. 实训准备工作 实训素材和网页草图发送到学生的主机中，以供学生参考使用。 3. 实训要求 (1) 根据网页草图 1，如图所示，利用表格设计网页布局，在单元格中添加网页元素。 图 表格排版网页草图 4. 实训指导 (1) 表格设计网页布局 步骤 1 首先创建一个本地站点，新建一个文档（其余几个实训是一样的，这是必须的 一个步骤），然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，单 击“跟踪图像”选项卡，将草图导入到跟踪图像中，改变透明度为 50%。 步骤 2 选择“插入”栏｜“布局”选项｜“布局模式”按钮，切换到布局模式，单击 “布局表格”按钮，绘制三个表格（上中下），表格的宽度与草图总的宽度相同：853，每一 个布局表格左侧插入布局单元格，单元格的宽度与绿色色块相同：161，如图所示
步骤3插入网页元素。最后打开“页面属性”对话框，删除跟踪图像，保存网页。 一个布局表格，左测相 绿色色块 公司标志 入一个布局单元格 导航栏 广告横解 个布局表格，左侧拥 入一个布局单元格 绿色色块 公可简介 一个布局表格左侧括 厂入一个布局单元格 图利用表格布局网页结构图 (以2课时为单元) 课序：7 第四章_第46节 目的要求： 掌握使用层进行页面的排版 和行为的应用 教学内容： 1.使用层进行页面的排版 2.层与时间轴的结合制作网页特效 3.行为的应用 4.使用框架技术进行页面排版 重点与难点： 重点：使用层进行页面的排版和利用框架进行排版 难点：时间轴与层的结合制作网页特效 教学方法：多煤体教学 手段：学生上机实操练习为主，教师辅导为辅 教学步骤： 引入一个用层排版的网页实例，然后引导学生利用层排版，并制作网页特效等。 引入一个用框架进行排版的网页实例，然后讲解利用框架排版的技巧。 复习提问： 上一节表格排版的特点是什么？
步骤 3 插入网页元素。最后打开“页面属性”对话框，删除跟踪图像，保存网页。 图 利用表格布局网页结构图 （以 2 课时为单元） 课序：7 第四章 第 4-6 节 目的要求： 掌握使用层进行页面的排版 了解时间轴的概念和行为的应用 掌握利用框架技术进行页面排版 教学内容： 1．使用层进行页面的排版 2．层与时间轴的结合制作网页特效 3．行为的应用 4．使用框架技术进行页面排版 重点与难点： 重点：使用层进行页面的排版和利用框架进行排版 难点：时间轴与层的结合制作网页特效 教学方法： 多媒体教学 手段： 学生上机实操练习为主，教师辅导为辅。 教学步骤： 引入一个用层排版的网页实例，然后引导学生利用层排版，并制作网页特效等。 引入一个用框架进行排版的网页实例，然后讲解利用框架排版的技巧。 复习提问： 上一节表格排版的特点是什么？ 绿色色块 公司标志 导航栏 广告横幅 绿色色块 公司简介 一个布局表格，左侧插 入一个布局单元格 一个布局表格，左侧插 入一个布局单元格 一个布局表格，左侧插 入一个布局单元格
作业题目： 1-2 预习内容： 课时公配， 字外 ☐复习提问新课讲解课堂讨论☐小节 作业布置 时间分配■3 82 10 3 2 四、使用层排版 除了表格以外，层是另外 一种定位网页元素的方法。本节介绍层的概念和操作，并通过 一个实例说明如何利用层进行页面布局的设计。 1、实例导入：层排版网页 Dreamweaver中的层是一种网页元素定位技术，它可以包含文字、图像、表格、插件甚 至其它层。 一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每 个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与“时间轴 及行为的结合，能够实现动态交互效果。 本实例采用了层排版网页，时间轴与行为结合制作了网页动态效果。 在本实例中，主要涉及以下知识点： ●以层作为页面布局的工县，设置层的背层领色、大小及位置 ● 调整层与层间的相对关系，通过“Z 值设置层的叠放 序 问层内添加图像、LASH动圆、文本、表格等网页元系： ·利用时间轴和行为制作网页动态效果。 2、插入层和编辑层 ·插入层 ·层的关系 如果两个层有交叉，它们有两种关系：重叠与嵌套。重叠就是位置上有重叠，但两个层 是独立的， 一个层发生变化时，不影响另外一个层，而嵌套时，子层会随着父层的某些属性 的变化而变化，而父层不随子层发生变化， ·创健嵌套层 层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层 ·层的属性设置 。设置层的属性时，首先要选中层，通过“属性”面板进行属性设置 ·层的操作 1)层的移动 (2)层的对齐
作业题目： 1-2 预习内容： 课时分配： 教学环节 复习提问 新课讲解 课堂讨论 小节 作业布置 时间分配 3 82 10 3 2 四、使用层排版 除了表格以外，层是另外一种定位网页元素的方法。本节介绍层的概念和操作，并通过 一个实例说明如何利用层进行页面布局的设计。 1、实例导入：层排版网页 Dreamweaver 中的层是一种网页元素定位技术，它可以包含文字、图像、表格、插件甚 至其它层。一个网页中可以含有多个层，层的特点在于各个层之间可以重叠，并可以决定每 个层是否可见，还可以定义各个层之间的层次关系。层可以转换成表格，通过与“时间轴” 及行为的结合，能够实现动态交互效果。 本实例采用了层排版网页，时间轴与行为结合制作了网页动态效果。 在本实例中，主要涉及以下知识点： ⚫ 以层作为页面布局的工具，设置层的背景颜色、大小及位置； ⚫ 调整层与层间的相对关系，通过“Z”值设置层的叠放顺序； ⚫ 向层内添加图像、FLASH 动画、文本、表格等网页元素； ⚫ 利用时间轴和行为制作网页动态效果。 2、插入层和编辑层 ⚫ 插入层 ⚫ 层的关系 如果两个层有交叉，它们有两种关系：重叠与嵌套。重叠就是位置上有重叠，但两个层 是独立的，一个层发生变化时，不影响另外一个层，而嵌套时，子层会随着父层的某些属性 的变化而变化，而父层不随子层发生变化。 ⚫ 创建嵌套层 层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。 ⚫ 层的属性设置 ⚫ 设置层的属性时，首先要选中层，通过“属性”面板进行属性设置。 ⚫ 层的操作 (1) 层的移动 (2) 层的对齐
(3)改变层的顺序 4)品示和隐意层 层与表格的相互转 3、使用层排版网页的制作过程 本小节讲解【例4.2】利用层技术进行网页布局的制作过程，分辨率设置为1024*768， 此网页共创建了5个层相互重叠 五、时间轴特效及行为 时间轴是一条贯穿时间的线 ,用于表示网页存活时间中发生的各种状态。通过在这条时 间轴上的不同时间放置的不同内容，就可以实现网页元素的动态效果。 Dreamweaver提供了一种简洁而且快捷的方式，无须编写任何代码便可以快速在HTML 代码中嵌入JavaScript脚本语言实现特效，这就是行为。 1、实例导入：网页中的时间轴特效及行为的应用 在【例42】中 ,行为相结合实 现动态交互效果 当浏览网页时，有一幅卡通图像在页面上动态飘动，当单击了该图像后，则出现了“欢 迎光临八珍美食”的提示信息，当用户单击“确定”按钮后，卡通图像继续飘动。该网页特 效实例主要涉及了以下几个知识点： 层与时间轴合制作动画： 为网市 元素定义“行为”特效】 2、利用时间轴制作动态特效 ·创建时间轴 ·什么是关键帧？ 。修改关键顿 ·拖动路径创建时间轴 Dreamweaver可以将拖动层的轨迹记录下来，利用层的拖动创建图像随时间轴飘动的动 态效果。 2、应用Dreamweaver内部的行为 ·行为的概念 行为主要有3部分组成：对象、事件和动作。对象是行为的主体，在网页中的对象主要 有文本、图像、窗口等 事件是针对某一对象所执行的特定的操作。如当鼠标指针指向超链接时，会生成一个 OnMouseOver事件：当单击超链接时，会生成一个OnClick事件。不同的对象通常会产生 不同的事件。 动作主要是由JavaScript编写的实现特定功能的代码组成。一旦动作与某一特定事件关 (OnLoad)的过 ·Dreamweaver内部的行为 ()调用JavaScript
(3) 改变层的顺序 (4) 显示和隐藏层 (5) 层与表格的相互转换 3、使用层排版网页的制作过程 本小节讲解【例 4.2】利用层技术进行网页布局的制作过程，分辨率设置为 1024*768， 此网页共创建了 5 个层相互重叠 五、时间轴特效及行为 时间轴是一条贯穿时间的线，用于表示网页存活时间中发生的各种状态。通过在这条时 间轴上的不同时间放置的不同内容，就可以实现网页元素的动态效果。 Dreamweaver 提供了一种简洁而且快捷的方式，无须编写任何代码便可以快速在 HTML 代码中嵌入 JavaScript 脚本语言实现特效，这就是行为。 1、实例导入：网页中的时间轴特效及行为的应用 在【例 4.2】中利用层、时间轴、行为相结合实现动态交互效果。 当浏览网页时，有一幅卡通图像在页面上动态飘动，当单击了该图像后，则出现了“欢 迎光临八珍美食”的提示信息，当用户单击“确定”按钮后，卡通图像继续飘动。该网页特 效实例主要涉及了以下几个知识点： ⚫ 层与时间轴配合制作动画； ⚫ 为网页元素定义“行为”特效。 2、利用时间轴制作动态特效 ⚫ 创建时间轴 ⚫ 什么是关键帧？ ⚫ 修改关键帧 ⚫ 拖动路径创建时间轴 Dreamweaver 可以将拖动层的轨迹记录下来，利用层的拖动创建图像随时间轴飘动的动 态效果。 2、应用 Dreamweaver 内部的行为 ⚫ 行为的概念 行为主要有 3 部分组成：对象、事件和动作。对象是行为的主体，在网页中的对象主要 有文本、图像、窗口等。 事件是针对某一对象所执行的特定的操作。如当鼠标指针指向超链接时，会生成一个 OnMouseOver 事件；当单击超链接时，会生成一个 OnClick 事件。不同的对象通常会产生 不同的事件。 动作主要是由 JavaScript 编写的实现特定功能的代码组成。一旦动作与某一特定事件关 联，则当产生事件的同时会触发相应的动作，以实现特定的功能。比如要在窗口载入 （OnLoad）的过程中打开新的窗口，则可以将 OnLoad 事件与打开新窗口的动作相关联。 ⚫ Dreamweaver 内部的行为 (1) 调用 JavaScript
(2)播放声音 弹出信息 设置文4 5】 显示弹出式菜单 (6)打开浏览器窗口 3、推荐制作网页特效的软件 《有声有色》 《网页特效精灵》 六、使用框架排版网页 其成为 1、实例导入：框架排版网页 本实例所涉及到的主要知识点包括以下几点： 。使用框架技术布局和制作网页： 该网页的布局是一个包括三个框架(topframe.m 上框架始 但持不动 当浏览者单击左 的导航 示在右边区 使用框架技术的关键是：在使用链接时，必须指定链接的目标位置。 2、创建与编辑框架结构 ● 框架物成及设置 一个框架实际上是由多个HM文档所构成的，其中一个页面专门负责框架的集成， 比如是分行型还是分列型，或者是混合型：行和列的尺寸如何等， 一般被称为框架集页面 其它的是普通的HML文档，分别被放置到框架结构中，被称为框架页，当链接到设置柜 架的HTML文档时，整个框架以及各HML文档就会一起显示在浏览器中。 ·创建框架 #超巴 更内 2的■清 图创建框架集 ·编辑框架
(2) 播放声音 (3) 弹出信息 (4) 设置文本 (5) 显示弹出式菜单 (6) 打开浏览器窗口 3、推荐制作网页特效的软件 ⚫ 《有声有色》 ⚫ 《网页特效精灵》 六、使用框架排版网页 框架可以把一个浏览器窗口划分多个区域，每个区域显示不同的网页，它的这个特性使 其成为一种常用的页面排版技术。 1、实例导入：框架排版网页 本实例所涉及到的主要知识点包括以下几点： ⚫ 使用框架技术布局和制作网页； ⚫ 该网页的布局是一个包括三个框架（topframe,leftframe,mainframe）的框架集 frameset， 上框架始保持不动，当浏览者单击左边的导航栏时，相应的内容显示在右边区域； ⚫ 使用框架技术的关键是：在使用链接时，必须指定链接的目标位置。 2、创建与编辑框架结构 ⚫ 框架构成及设置 一个框架实际上是由多个 HTML 文档所构成的，其中一个页面专门负责框架的集成， 比如是分行型还是分列型，或者是混合型；行和列的尺寸如何等，一般被称为框架集页面， 其它的是普通的 HTML 文档，分别被放置到框架结构中，被称为框架页，当链接到设置框 架的 HTML 文档时，整个框架以及各 HTML 文档就会一起显示在浏览器中。 ⚫ 创建框架 图 创建框架集 ⚫ 编辑框架
用户可对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框 架，或是移动框架的边框来改变框架显示的范围大小。 )拆分框 (2)删除框架 (3)改变框架的行高和列宽 。选择框架 ·设置框架属性 ()设置框架集属性 (2)设置框架的属性 ·设置超链接目标框架 。所谓超链接目标框架，是指当单击超链接时，超链接的目标网页文件在哪个框架中显示 例如：对于一般左窄右宽的列式框架结构，一般是在左边框架的网页中包含超链接的导 航信息，而在右边的框架中显示超链接的目标网页文件。 ·保存框架和框架集 创建好框架结构，设置好框架的属性后，就要保存框架。此时用户可以单独保存一个框 架集文件，或一个框架文件，或保存所有打开的框架文件和框架集文件 3、框架排版网页的制作过程 本小节讲解利用框架技术进行排版网页的制作过程，本网站是一个以销售电子类产品的 企业，网站建设的目的是让企业新老客户了解产品的详情，并能在网上及时下载最新的支持 资料。由于产品种类非常多，因此将展示产品的这部分网页用框架结构排版，主要的作用是 增强产品的导航功能。 (以2课时为单元) 课序：8 第四章第46节 目的要求： 通过本节的实操练习，要求学生掌握使用层和框架进行页面的排版 教学内容： 使用层和框架排版网页的实例练习 重点与难点： 重点：利用层进行排版和制作框架结构的页面
用户可对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框 架，或是移动框架的边框来改变框架显示的范围大小。 (1) 拆分框架 (2) 删除框架 (3) 改变框架的行高和列宽 ⚫ 选择框架 ⚫ 设置框架属性 (1) 设置框架集属性 (2) 设置框架的属性 ⚫ 设置超链接目标框架 ⚫ 所谓超链接目标框架，是指当单击超链接时，超链接的目标网页文件在哪个框架中显示。 例如：对于一般左窄右宽的列式框架结构，一般是在左边框架的网页中包含超链接的导 航信息，而在右边的框架中显示超链接的目标网页文件。 ⚫ 保存框架和框架集 创建好框架结构，设置好框架的属性后，就要保存框架。此时用户可以单独保存一个框 架集文件，或一个框架文件，或保存所有打开的框架文件和框架集文件。 3、框架排版网页的制作过程 本小节讲解利用框架技术进行排版网页的制作过程，本网站是一个以销售电子类产品的 企业，网站建设的目的是让企业新老客户了解产品的详情，并能在网上及时下载最新的支持 资料。由于产品种类非常多，因此将展示产品的这部分网页用框架结构排版，主要的作用是 增强产品的导航功能。 （以 2 课时为单元） 课序：8 第四章 第 4-6 节 目的要求： 通过本节的实操练习，要求学生掌握使用层和框架进行页面的排版 教学内容： 使用层和框架排版网页的实例练习 重点与难点： 重点：利用层进行排版和制作框架结构的页面