六. 布局.

Presentation on theme: "六. 布局."— Presentation transcript:

1 六. 布局

2 网页“排版”-布局 网页实现布局设计的方法很多，在课程会逐渐简述 1.表格 2.框架 3.DIV+CSS 4.图像设计工具（PS、FW等）
5.其它，如Flash 网页的布局设计、链接、CSS样式表是静态网页中必须掌握的三大内容。

3 六.表格和布局视图 第5章 在网页中使用表格和框架 1.在页面中使用表格 2.设置表格和单元格的格式 3.编辑表格和单元格
4.使用布局表格和单元格 5.设置布局单元格和表格的格式 6.设置布局视图参数

4 1.在页面中使用表格 （1）插入表格 百分比和像素的区别 一行只能有一个表格，就是说在表格的右边 不能再有表格 （2）在表格中添加内容
如果插入内容较多时，单元格将自动扩展

5 1.在页面中使用表格 （3）选择表格元素 ① 选择单个单元格：在单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格拖动，这是单元格出现黑色边框，表示选中。也可以ctrl键点击单元格。 ② 选择整个表格：单击表格左边线和上边线以外的任意表格线 ③ 选择一行或一列：可将光标移至单元格的左边线或上边线位置，当光标变为→或↓时单击鼠标。如果此时单击并拖动鼠标，则可同时选择多行或多列。

6 1.在页面中使用表格 ④ 要选择多个连续单元格，可将光标定位于第一个单元格后按下鼠标并拖动，或将光标定位在第一个单元格后，按下shift键单击其对角线上的单元格。 ⑤ 选择多个非连续单元格，使用ctrl键

7 2.设置表格和单元格的格式 （1）设置表格整体属性 （2）格式化行、列或单元格 当选择行、列或单元格后，进行属性设置 拆分或合并单元格：
合并时单元格区域必须为矩形而且连续

8 3.编辑表格和单元格 调整表格的整体尺寸、列宽和行高 鼠标拖动（shift键可以等比例调整表格大小） 添加和删除行、列和表格嵌套
可以一次复制和粘贴多个单元格，并且保留单元格的格式，也可仅复制与粘贴单元格的内容。

9 4.使用布局表格和布局单元格 切换到布局视图，可以在页面中添加布局表格和布局单元格，这些表格和单元格能够帮助用户设计页面布局
布局单元格不能存放在布局表格之外。在创建页面布局时可以在同一个布局表格中放置多个布局单元格，或创建多个布局表格，且布局单元格和布局表格不能相互重叠。同时在布局表格中可以嵌套其它的布局表格，并且在嵌套表格中的布局单元格的长宽变化不会受到外部表格的影响。

10 4.使用布局表格和布局单元格 在DW CS3、CS4要使用表格模式： “查看”--》“表格模式”-》“布局模式”
可以通过多种手段实现布局，如表格、图像工具、框 架、DIV+CSS，这些都会在课程内容里面逐渐介绍

11 4.使用布局表格和布局单元格 （1）绘制布局表格和布局单元格
① 绘制布局表格和布局单元格 先拖动绘制好表格，再绘制单元格。如果没有绘制表格而直接绘制了单元格，页面自动创建一个大的布局表格。 在一空白文档绘制布局表格，表格总能捕捉到页面窗口的左上角 DW可以帮助用户自动捕捉以有的单元边界。如果在绘制布局单元格时使用Alt键，则暂时不会使用自动捕捉功能。

12 4.使用布局表格和布局单元格 ② 在布局单元格中，既不能再绘制布局单元格，也不能再绘制布局表格，但在布局表格中，既可以绘制布局单元格，也可以嵌套布局表格。 ③ 如果页面已经存在内容，布局表格只能在内容的下方，也就是说表格不能是平行的，不能在布局表格的右边再画布局表格。（一行只能有一个表格）

13 4.使用布局表格和布局单元格 （2）移动和调整布局表格和单元格
在页面布局中，可以移动或调整单元格或表格的位置和尺寸，在操作时，可以使用网格线做向导辅助移动或调整。 （3）为布局单元格添加内容 绘制布局表格时，表格以灰色填充，表示该区域不能插入内容，因此，必须在表格中创建布局单元格，才能在布局单元格中插入所需要的文本和图像等。在单元格中插入较大元素，单元格尺寸会自动调整。（建议在布局视图绘制好后，切换回标准视图，进行相应的操作)

14 5.设置布局单元格和表格的格式 （1）格式化布局单元格 选择单元格进行属性设置 添加间隔图像：
当在一个布局单元格中插入相对较大的元素时，单元格宽度的改变会使其它单元格改变大小甚至消失。为了解决问题，可以在每一列中插入间隔图像。 （2）格式化布局表格

15 5.设置布局单元格和表格的格式 （3）设置布局表格（单元格）列宽度 在布局视图中，设置列宽度有两类：固定宽度和自由
伸缩。自由伸缩时根据浏览器窗口大小自动设置的。 （显示为波浪线） ① 自动伸缩 ② 固定宽度

16 5.设置布局单元格和表格的格式 ③ 使用间隔图像 间隔图像是透明图像，它不能在浏览器中显示，但是它在自动伸缩宽度的表格中用于控制列宽度。间隔图像保持着页面上的每一个表格和单元格的设置的宽度。如果在自动伸缩宽度的表格里没有选择间隔图像，列的宽度将无法控制。

17 6.设置布局视图的参数 “编辑”菜单－“首选参数”－“布局模式”

18 使用PS或FW进行网页设计 进行版面设计 “切片”处理 FW能做什么？

19 七.框架 第5章 在网页中使用表格和框架 1.创建框架 2.设置框架和框架页的属性 3.使用链接控制框架内容 4.处理浏览器不能显示的框架

20 七.框架 框架的作用就是把浏览器窗口划分为若干个区域，每 个区域可以分别显示不同的网页。框架主要由两个主
要部分:框架页（框架集）和单个框架组成。 ① 框架页是一个在文档内定义一组框架结构的HTML网页，它定义了一页网页显示的框架数，框架的大小，载入框架的网页源和其它可定义的属性等等。因此框架页并不显示在浏览器中，它只是存储了一些框架如何显示的信息。（父框架） ② 单个框架是指在网页上定义的一个区域。（子框架）

21 七.框架 如果某个页面被划分为两个框架，那么它实际上包含的是三个独立的文件，一个框架集文件和两个框架内容文件。
① 框架内容文件就是显示在页面框架中的内容。 ② 框架通常被用来定义页面的导航区和内容区域。 框架操作有时容易出现差错（其实有时不是并不是操 作出错的问题），开头创建好后马上测试，如果提示 出错，马上进行重新创建。

22 1.创建框架 （1）创建框架 “查看”->“可视化助理”->“框架边框” 使用预定义框架格式创建框架
“插入栏”－“布局”－“框架” 自定义：“修改”->“框架页” 或拖动框架的一条边（注意alt选择问题） 创建嵌套式框架页 可以简单通过插入栏插入框架 删除框架 任意拖拽框架边框离开页面或其他框架边框上

23 1.创建框架 （2）选择框架页或框架 框架页和框架都是独立的文档。要改变框架页或框 架，首先必须选中该框架或框架页。 “框架”面板
在文档中选择时，选择框架，可用alt键； 选择框架页，直接选择框架边线

24 1.创建框架 （3）保存框架和框架页文件 保存框架： 实际上就是在框架中打开的网页文件， 在框架中点击选中，“保存”
保存框架页：选中，“保存框架页”

25 2.设置框架和框架页属性 框架属性： 框架名称区分大小写，字母开头； 源文件是准备在框架中使用的源文件

26 3. 控制框架出现的内容 链接“目标”选项： 使用框架后，在链接的“目标”选项里面出现了页面存在的框架的名称，就是说可以控制链接的页面出现在具体的框架中。

27 4. 处理浏览器不能显示的框架 定义无框架内容： “修改”->“框架集”->“编辑无框架内容”（选择两次）

28 界面导航统一 不同页面调整，各个页面有同一导航内容 框架 框架结构缺点 使用内嵌（内联）框架Iframe

29 Iframe 如果使用框架，有时候框架可能没办法做出预想所要的效果界面，或者用框架的使用有时候某些效果界面比较繁琐。IE提供了内嵌框架iframe。 标签检查器的使用及属性设置

30 堂上练习 P 进阶实例—制作框架型日历