第5章网页版面的布局相关技术.pptVIP

第5章网页版面的布局设计;;网页版面的布局设计;5.1使用表格布局网页;5.1.1创建表格; 表格对话框各选项含义如下： 行数和列数：设置表格的行数（Rows）、列数（Columns）。 表格宽度：可以设置像素或百分比两种单位，百分比是表格相对于整个页面宽度或其上级容器宽度的百分比。当使用百分比作单位时，表格的宽度会随着浏览器窗口的宽度改变；当使用像素作单位时，表格的宽度是固定的，不会随着浏览器窗口的宽度改变。 边框粗细：表格边框的宽度，默认为1像素。无边框设置值为0。 单元格边距：设定单元格文本内容和边线之间的距离值，代码为cellpadding。 单元格间距：设定表格内相邻的单元格之间的距离，单位为像素，代码为cellspacing。 页眉：可以选择一种作为新建表格的表头样式。被设置为页眉的单元格中的文字默认样式为黑体加居中。 标题：表格的标题。 对齐标题：设置标题和表格的位置关系，默认为顶部。 ;案例5-1-1 创建一个行数为3，列数为3的表格，设置宽度为500像素，单元格边距为20像素，间距为20像素。 制作步骤 （1） 单击工具栏上“常用”选项卡的按钮，打开如图5-1所示的“表格”对话框。设置表格的行数为3，列数为3的表格，设置宽度为500像素，单元格边距为20像素，间距为20像素。 （2）单击“确定”按钮，出现如图5-2所示的表格。从图中可以直观的理解单元格边距和单元格间距的概念。;5.1.2表格设置;3.单元格属性设置 光标定位在任一单元格中，显示“单元格属性”面板，如图5-4所示。单元格属性面板的上半部分是文本属性，可以对单元格中文字的字体、链接等进行设置，第三章已经讲过，这里不再赘述。下半部分则是对单元格进行参数设置。单元格属性还包括“行”或“列”属性。 图5-4 单元格属性面板 水平：设置单元格的水平对齐方式，有默认、左、右、居中对齐四种。 垂直：设置单元格的垂直对齐方式，有默认、顶端、居中、底部、基线对齐五种。 宽和高：可设置所选单元格的宽度和高度值。 不换行：如果不允许单元格中的内容换行显示，可以选择此项。 标题：???所选单元格设为标题单元格，此时字体默认居中、黑体。 背景颜色：为单元格设置背景颜色。 合并单元格：将选中的连续区域的单元格合并为一个单元格。 拆分单元格：将一个单元格分成多个，与“合并单元格”是逆操作。 ;4.表格基本操作 插入行（列）：将光标定位于要插入行（列）的位置，选择右键—“表格＞插入行/插入列”，即可在当前行（列）的上（左）边插入一行（列）。 插入多行（列）：将光标定位于要插入行（列）的位置，选择右键—“表格＞插入行或列…”，打开“插入行或列”对话框，如图5-5所示。 删除行（列）：将光标定位于要删除行（列）的位置，选择右键—“表格＞删除行”/“删除列”。;小知识： 设计网页时，在Dreamweaver中插入一个表格，若设置其“边框(Border)”为1，预览时其边框线较粗。对于不熟悉HTML语言的网页制作者，如何快速制作出细边线的表格呢？下面，介绍一个小技巧--巧用背景颜色和间距制作细边线表格。 以制作一个4行3列、边框线为红色细线的表格为例： （1）在Dreamweaver的设计视图中插入一个4行3列的表格。 （2）在“属性”面板中依照图5-6设置此表格的属性如下：边距(cellpadding)根据需要自行设置值(例如10)；间距(cellspacing)为1；边框(Border)为0，并设置其背景颜色(bgcolor)为红色。 （3）选中此表格的所有单元格，在“属性”面板中设置所有单元格的属性如下：背景颜色为白色或红色以外的其他颜色 。 ;最后，保存网页，按F12预览。怎么样，你已经成功设计了一个4行3列的红色细线表格！如图5-7所示。;（3）将光标定位在此表格中，在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。 （4）根据需要插入一个嵌套表格，此例设为4行3列，设置此嵌套表格的“边框”为0，“边距”和“间距”可以根据需要设置或不设置，其它属性可不进行设置。 如图5-8所示，外表格负责整体的排版，内表格的各个单元格中就可以插入文字、图片等其他网页元素了。;5.1.4使用表格布局页面; 制作步骤 （1）启动Dreamweaver，打开“文件面板”。如果没有站点，须按照案例3-1-2的操作步骤新建站点。 （2）在文件面板中，用鼠标选择站点文件夹ncpshop，单击右键，新建一个空白文档, 重命名为“ltable.html”。 （3）双击打开该文件进行编辑。 （4）点击“属性”面板中的“页面