第4章网页布局设计

② 按键调整的方法：按住【Ctrl】键，同时按【→】或【←】键，可使 AP Div 水平增加或减少一个像素； 每按【↓】或【↑】键一次，可使 AP Div 垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光 标移动键，可每次增加或减少五个像素。
③ 利用 AP Div“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位 是像素），即可调整 AP Div 的宽度和高度。
见，即根据图像大小自动调整 AP Div 的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出 AP Div 的范围后，超出的部分不显示）、“Scroll”（当图像超出 AP Div 的范围后，加滚动条）和“Auto”（根据 AP Div 中的内容能否超出 AP Div 的范围，决定是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示 效果如图 4-1-11 所示。注意：在网页页面设计视图窗口内显示的都与图 4-1-11（a）一样。
所示。单击其中的一个命令，即可获得相应的对齐效果。 例如，选中多个 AP Div，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各 AP Div 以最后选中
的 AP Div（控制柄是实心）的下边线为基准进行对齐，如图 4-1-8 所示。
图 4-1-7 “排列顺序”的下一级菜单
图 4-1-8 对齐下缘后的多个 AP Div
（6）调整 AP Div 的位置可以采用如下方法：
① 鼠标拖动调整的方法：将鼠标指针移到 AP Div 的边框上，当鼠标指针变为 形状时拖动，即可移动 AP Div。
Байду номын сангаас
② 按键调整的方法：每按一次【→】或【←】键，可使 AP Div 向右或向左移动一个像素；每按一次【↓】 或【↑】键，可使 AP Div 向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整 AP Div 的位置，每次移动五个像素。

4.1 表格的基本操作创建表格（1）打开“表格”对话框，如下图：·选择“插入记录→表格”命令。

·选择插入栏“常用”类别中的“表格”按钮。

·按Ctrl+Alt+T键。

（2）设置表格的行数、列数、宽度和边框等属性后，单击“确定”按钮，即可创建一个表格。

“表格”对话框·行和列：设置插入表格的行数和列数。

·单元格边距：指单元格容和单元格边框之间的距离，单位为像素。

·单元格间距：指相邻单元格之间的距离，单位为像素。

·边框：表格边框线的宽度。

表格宽度单位像素：表格的宽度是一个绝对值，大小不发生变化。

百分比：表格的宽度是一个相对值，大小会随其父元素的改变而改变。

提示①表格宽度为百分比时，最外层表格的父元素为浏览器窗口，嵌套表格的父元素为其所在的单元格。

②创建表格时，如果没有明确指定边框粗细、单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距为1、单元格间距为2来显示表格。

选择表格元素选择整个表格①标签选择器中单击<table>②选择“修改→表格→选择表格”命令③右单击某个单元格，选择“表格→选择表格”④单击表格的外边框⑤光标定位表格中，按两次Ctrl+A快捷键选择行①直接用鼠标拖动②单击行中的某个单元格，在标签选择器中单击<tr>③鼠标指向表格行的左边缘，指针变为“→”时单击选择列①直接用鼠标拖动②鼠标指向列的上边缘，当鼠标指针变为“↓”时单击③选择列中的某个单元格，在“列标题”菜单中选择“选择列”命令选择单个单元格①按住Ctrl键在单元格单击②将光标定位到单元格，单击标签选择器上的<td>③将光标定位到单元格，按Ctrl+A快捷键选择连续单元格①用鼠标从第一个单元格拖到最后一个单元格②将光标定位到第一个单元格，然后按住Shift键单击最后一个单元格③选择不连续的多个单元格:按住Ctrl键单击要选择的单元格、行或列，再次单击取消选择。

第4章
蒋凤翔
1、 框架概述
框架是页面中用到的一种非常流行的布局技术。利用它可以 将浏览器的窗口随意地分成多个部分，并在每个部分中独 立地显示一个HTML文档。由于各文档间可以毫无关联， 所以这些窗口有各自独立的的背景、滚动条和标题等。再 通过在这些不同的HTML文档间恰当地设置超链接，就可 以在浏览器窗口中呈现出有动有静的奇妙效果。框架在网 页中最常见的就应用就导航。也就是在浏览器窗口显示的 一组框架中，包含一个含有导航条页面的框架和一个导航 条中各单元所对应的主要内容的框架。现在的网站有这样 的框架结构：上面的框架中包含该企业的名称、标志以及 一些广告语句；左边较窄的框架中显示该站点的导航信息；
3.创建框架
（ 1 ）新建一 HTML 文档，查看 —-- 可视化助理 —-- 框 架边框（这时在设计视图的文档窗口四周将出现一 圈边框）。 （2）修改----框架集-----……
（3）如果需要进一步拆分则可以将光标放置在要拆分 的框架内，然后选修改 --- 框架集 ----…… 也可按住 ALT直接拖动边框线进行水平拆分或垂直拆分。如 果要将一个框架拆分为4个框架，可按住ALT直接拖 动边框的一角。
如果要将此框架集文件另存为新文件，可选文件---框架 集另存为…… b. ② 保存在框架中显示的文档 框架集和页面文档同时保存 将光标放置在要保存的框架内---文件---保存框架…… 在新的框架集定义完成后----文件---保存全部，此时屏幕 上将弹出一系列另存为对话框，DW会自动保存框架集 中的所有文档。
6.框架的嵌套
在一个框架集内部插入另一个框架集叫做框架的嵌套。在DW 中 允许在一个框架集内部嵌套多个框架集，而且大多数在页面中 应用的框架集都使用了框架的嵌套。预定义的框架集大多有嵌 套。总之，如果要使在一组框架集中不同的行或者不同的列之 间含有的单个框架的数目步一样，就需要使用框架集的嵌套。 ①将插入点放置在需要进行的嵌套操作的父框架内，击修改 --框架集----……

边框成脊形
dashed 虚线
inset
使整个方框凹陷，即在外框内嵌入一个立体边框
solid
实线
outset 使整个方框凸起，即在外框内嵌外一个立体边框
double 双实线
➢ border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。
在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通 过border-top、border-right、border-bottom、border-left分别设置。
举例 演示
【实例6-2】border边框属性的设置。
2 边距属性
边距属性分为：内边距padding和外边距marign两种。
比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。 ➢ padding也遵循值复制的原则，与border属性类似。 ➢ 当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right
（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。
表示4个边框的宽度都为3像素。 表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。