(以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，如图所示