网页设计-5.ppt

表格应用
页面布局设计
作业
框架应用
层 应 用
1
页面布局设计
创建网页
表格应用
应用布局模式
框架应用
层应用
2
网页是在网站上显示的基本页面
利用“页面属性”命令设置页面的整体格式
利用“表格应用
页面布局设计
作业
框架应用
层 应 用
1
页面布局设计
创建网页
表格应用
应用布局模式
框架应用
层应用
2
网页是在网站上显示的基本页面
利用“页面属性”命令设置页面的整体格式
利用“属性”面板设置页面各个对象的格式
插入文本数据
普通文字输入或粘贴
特殊文字利用“插入/文本/字符”对象
导入外部数据（文件 / 导入 …… ）
插入多媒体数据
页面布局设计
创建网页
3
定位页面元素（如：页面分栏、文本和图像等）
创建表格（插入 / 表格）
利用“属性”面板设置表格对象格式
在已有的表格中，单击鼠标右键，通过“快
捷”菜单中的“表格”命令编辑表格。
页面布局设计
表格应用
4
当前插入点
示 例
5
表格提示框
间距
边框
① 设置表格属性
6
创建表格（插入 / 表格）
选定表格
编辑表格
表格嵌套
为表格添加内容
表格格式化
表格排序
应用示例
② 表格基本操作
7
页面布局设计
Dreamweaver提供了标准视图和布局视图两种创建表格方式来设计页面布局，前面介绍的即是在标准视图下创建表格的应用。
布局模式是指用可视化的方法在页面上绘制复杂的表格，可以在布局模式下任意地绘制表格，在表格中也可以任意地绘制单元格，给网页设计工作带来极大的方便，比在标准视图下使用表格更具有灵活性。
应用布局模式
8
在默认的情况下，文档窗口是以标准模式显示的。要使用布局视图，必须首先从Dreamweaver的标准视图模式进入到布局视图模式。
① 进入布局模式
9
句炳
插入点
嵌套表格
指向单元格时
移动表格时
应用示例
② 编辑表格或单元格
10
应用示例
在一新页面中插入一个3列的布局表格，其中左单元格使用固定像素，设置宽度为100；中间单元格使用百分比进行设置为“自动伸展”；右端单元格也使用固定像素，设置宽度为200。
在左端单元格存放一幅宽度为100的图片、右端存放一幅宽度为200的图片，而在中间单元格存放一个文本文件。
也就是说，将固定大小内容的对象放置到固定宽度的单元格中，不需要固定宽度的内容放到中间可变的宽度的单元格中。
这样就可以实现不同浏览器下动态调整页面内容，使页面达到最佳浏览效果。
③ 利用自动伸展特性
11
12
框架可以将浏览器窗口分割成不同的区域
创建框架（文件 / 新建文档 / 常规-框架集）
框架中的每一个区域都是一个独立的页面
整个框架由一个主文件控制
保存框架（主控文件和各个框架文件）
选中某个框架（按下Alt+单击区域）
添加或删除框架（拖拽边线）
在框架中打开文档（文件/在框架中打开）
页面布局设计
框架应用
13
① 创建框架
14
示 例
15
框架边框分割线
topFrame
mainFrame
leftFrame
具有一个上方固定、左侧嵌套的3个框架结构的框架集。
16
由于在框架集中的每个框架都是一个独立的页面，所以一个框架集可以包含若干个文档文件，创建好框架集后需要将每个框架保存成一个个独立的HTML文件和一个框架集文件（）。然后就可以在这些独立的文件中创建页面内容了。
Dreamweaver提供了多种保存框架页面的相关命令，随着用户当前的状态不同，给出的保存命令也有所不同。在执行保存命令之前，首先要选中要保存的对象。
通常，一个框架集具有 n+1个文件。
② 保存框架
17
输入框架文件名
提示保存的框架
示 例
18
框架集建立后，就可以往各个框架的区域存放内容了。
只要在文档窗口中的任意一个框架里单击一下就可置当前插入点为该框架内，然后就可以象编辑一般的页面一样，插入各种各样的文本、图片等网页元素。
当然，也可以直接打开某个框架文件独立进行页面编辑制作。
③ 添加内容
19
④ 设置框架或框架集属性
20
层应用
层是网页制作特色功能之一，提供了强大的网页控制能力，可以精确定位Web页面的各个元素。
层是网页中的一个区域，一个网页中可以有多个层，其特点是各个层之间可以重叠，并可以决定每个层是否可见，也可以定义各层之间的层次关系。
层的运用使创作者在处理图像时能够在多个“画布”上进行，从而大大提高创作者的工作效率，同时使创作出的作品效果更加丰富。
层技术属于动态H