第6章 网页布局1

第1篇 网页设计与制作基础 篇
6.4CSS样式表 样式表
5.在Dreamweaver中创建与应用 中创建与应用CSS 中创建与应用
①新建CSS文件 ②新建CSS规则 ③应用CSS
2011-5-2
16
第1篇 网页设计与制作基础 篇
6.4CSS样式表 样式表
6. CSS属性 属性
在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、 方框、 边框、列表、定位、扩展等八大类。
表格参数设置页 面
2011-5-2
3
第1篇 网页设计与制作基础 篇
6.1使用表格 使用表格
3.插入嵌套表格
嵌套表格就是在已经存在的表格中插入的表格。插入嵌套 表格的方法与插入表格的方法相同。
2011-5-2
4
第1篇 网页设计与制作基础 篇
6.1使用表格 使用表格
4.编辑表格
选择整个表格； 选择整个表格；选择表格中的 行或列；选择单个单元格； 行或列；选择单个单元格；选 择单行或矩形单元格块； 择单行或矩形单元格块；选择 不相邻的单元格 剪切、拷贝和粘贴 剪切、 单元格；排序表格； 单元格；排序表格； 导入表格式数据； 导入表格式数据； 导出表格式数据 • 选择表格 • 表格的编辑操作 • 表格的其他操作 • “扩展表格”模式 切换”扩展表格” 切换”扩展表格” 模式退出” 模式退出”扩展表 格”模式
2011-5-2
17
第1篇 网页设计与制作基础 篇
本章小结
本章的学习，读者应首先了解在Dreamweaver cs4中运 本章的学习，读者应首先了解在Dreamweaver cs4中运 用表格和框架对网页进行整体布局，利用模板和库项目设 计网页，其中的主要内容包括： 表格的基本操作，如创建表格、在表格中插入页面元素、 设置表格属性等。 在网页页面中创建框架和框架集，并对页面布局进行调整， 通过设置框架和框架集的属性来改变框架网页的外观。 模板和库项目的创建与应用。 CCS样式表的基础知识及应用。 CCS样式表的基础知识及应用。 这些都是初学者应该掌握的基本网页布局工具。
2011-5-2 1
第1篇 网页设计与制作基础 篇
6.1使用表格 使用表格
1.表格的概念
表格（Table）在网页制作中是一个非常重要的概念，是由不 同的行、列、单元格组成的一种能够有效描述信息的组织方 式。
2011-5-2
2
第1篇 网页设计与制作基础 篇
6.1使用表格 使用表格
2.插入表格
两种方法： 插入” ”表格” 两种方法：① “插入”→”表格”命令 “表 ②单击“插入”面板的”常用”类别中的 单击“插入”面板的”常用” 按钮上，打开“表格”对话框。 格”按钮上，打开“表格”对话框。
2011-5-2
18
CSS的应用方式有以下两种： 外部CSS样式表 内部CSS样式表
2011-5-2
14
第1篇 网页设计与制作基础 篇
6.4CSS样式表 样式表
4.使用 使用CSS面板 面板
创建和管理CSS规则： ◆所有模式与当前模式； ◆ 切换、移动CSS规则； ◆ 删除CSS规则； ◆ 重命名
2011-5-2
15
框架是将浏览器窗口划分为多个区域，每个区域可以分别显示不同的网 页，并且各个框架之间不存在干扰，在网页模板出现之前，框架技术是 最常用的布局网页工具之一。
1.框架的概念
• 框架网页的功能 • 框架的结构 • 框架结构的优缺点
2011-5-2
6
第1篇 网页设计与制作基础 篇
6.2
Dreamweaver中使用框架 中使用框架
创建框架网页过程：选择“文件”→“新建”命令，打开“新建文档” 对话框，设置选中框架样式后，单击“创建”按钮即可
2.布局网页文档
在HTML网页文档中应用框架（参见教材P92）
2011-5-2 7
第1篇 网页设计与制作基础 篇
6.2
Dreamweaver中使用框架 中使用框架
3.保存框架
三种保存框架和框架集的具体方法： （1）保存框架集文件 （2）保存框架中显示的文档 （3）保存与一组框架关联的所有文件：
2011-5-2 5
调整表格合适大小；更改列 调整表格合适大小； 宽和行高；添加和删除行、 宽和行高；添加和删除行、 拆分和合并单元格； 列；拆分和合并单元格；设 置表格属性；设置单元格、 置表格属性；设置单元格、 行和列的属性
第1篇 网页设计与制作基础 篇
6.2
Dreamweaver中使用框架 中使用框架
1. CSS概述 概述
CSS是“Cascading Styles Sheets”的缩写，中文名称是层叠样 式表。用于控制网页样式并允许将样式与网页内容分离的一种 标记性语言。CSS可将网页的内容与表现形式分开，使网页的 外观设计从网页内容中独立出来单独管理。要改变网页的外观 时，只需更改CSS样式。
9
第1篇 网页设计与制作基础 篇
6.3使用模板和库
1.模板的使用
模板是一种特殊类型的文档，扩展名为.dwt，用于设计“固定的”页面布局。
相关操作： 相关操作： • 创建模板 • 设计模板文档的页面属性 • 定义模板区域 • 应用模板 • 管理模板
2011-5-2
10
第1篇 网页设计与制作基础 篇
6.3使用模板和库
2.库的使用
库项目是避免重复输入具有相同格式和内容的文档元素组合。
相关操作： 相关操作： • 库项目是避免重复输入具有相同格式和内容的文档元素组合。 • 创建库项目 • 编辑库项目 • 应用库项目 • 脱离库项目
2011-5-2
11
第1篇 网页设计与制作基础 篇
6.4Байду номын сангаасSS样式表 样式表
第1篇 网页设计与制作基础 篇
第6章 网页布局 章 学习目标: 学习目标
了解表格的基本概念。 掌握创建和编辑表格的方法。 掌握设置表格属性的方法。 掌握创建和保存框架的方法。 掌握设置框架和框架集属性的方法。 掌握模板的创建和应用。 掌握库项目的创建和应用。 掌握CSS样式表的使用。 掌握CSS样式表的使用。
2011-5-2
8
第1篇 网页设计与制作基础 篇
6.2
Dreamweaver中使用框架 中使用框架
• 创建嵌套框架 • 选择框架和框架集 • 调整框架网页大小
4.编辑框架
（具体过程参见教材P93）
5.设置框架和框架集属性
• 设置框架属性 • 设置框架集属性
2011-5-2
（具体过程参见教材 P94）
2011-5-2
12
第1篇 网页设计与制作基础 篇
6.4CSS样式表 样式表
2. CSS的基本语法 的基本语法
CSS的样式规则由两部分组成：选择器和声明。
新建CSS规则页面 规则页面 新建
2011-5-2
13
第1篇 网页设计与制作基础 篇
6.4CSS样式表 样式表
3. CSS的应用方式 的应用方式