Dreamweaver基础演练.docVIP

第三部分 Dreamweaver网页布局美化篇 虽然用Photoshop和ImageReady已经能成功地完成网页制作，但这样的网页并不是十分完美，在浏览器中会发现网页并未填满整个窗口，右侧露出大片空白，这样显得很不协调。从这一点来看，有些功能还是需要使用其他网页编辑软件来完成。ImageReady CS制作出的HTML网页可以使用FrontPage、Dreamweaver等网页设计软件做进一步的编辑。 第9章 Dreamweaver基础演练 本章介绍Dreamweaver 8网页制作的基本操作。这些都是使用Dreamweaver 8进行网页制作的基础。 通过本章的学习，读者可以对Dreamweaver 8有一个深刻的认识，同时，全面系统地了解网页制作的基本操作，为更好地学习后面章节打下坚实的基础。 9.1 创建表格对象 表格的格式控制能力使设计师可以使用表格来构成网页的框架。先使用较大的表格对页面的版面进行大致的控制，再使用嵌套的表格对细节进行调整。表格在设计师的思维中已经不仅是一种简单对象，而是一种版面控制和制作模板的强有力工具。 9.1.1 表格由三个主要部件构成：行、列和单元格。行贯穿表格的左右，列则是上下方式的。单元格是行和列交汇的部分，它是输入信息的地方。单元格会自动扩展到输入的信息相适应的尺寸。如果已经启动了表格边框，浏览器会显示表格边框和其中包含的所有单元格。如图9-1-1所示是表格的结构。 图9-1- SEQ 图9-1- \* ARABIC 1 表格的结构 在HTML中，表格中的所有结构和数据都被包含在表格标记符中，Table和/Table之间。Table标记符包含了大量的属性，决定表格宽度和高度，以及边框、页面对齐和背景颜色。也可以控制单元格之间的间隔和在单元格中添加对象的多少。如下所示为一段标准表格的HTML代码。 table width=400 border=1 tr tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr /table 9.1 在Dreamweaver 8插入一个表格的方法非常简单，只需要通过简单的设置即可快速地得到一个相应的表格对象。 1. 打开Dreamweaver 8，按【Ctrl+F2】调出【插入】面板，可以看到【常用】选项，如图9-1-2所示。如果出现的不是【常用】选项，可以按左边的黑色三角符号选择【常用】。 图9-1- SEQ 图9-1- \* ARABIC 2 【插入】面板的【常用】选项 2. 单击【表格】按钮，弹出如图9-1-3所示的【表格】对话框。 图9-1- SEQ 图9-1- \* ARABIC 3 【表格】对话框 3. 进行如下的设置： 【表格大小】 【行数】：在该选项的文本框中输入要创建表格的行数。 【列数】：在该选项的文本框中输入要创建表格的列数。 【表格宽度】：在该选项的文本框中输入相应的表格宽度的数值，在右侧的【单位】下拉列表中选择“像素”选项，作为表格宽度的单位。当选择“百分比”选项时，表格的宽度将按照当前显示页面尺寸的百分比进行显示。当浏览器窗口的尺寸发生变化时，表格的宽度也将按照相应的比例进行变化。 【边框粗细】：当定义了表格后，在该选项的文本框中可以定义不同粗细的边框尺寸。如图9-1-4所示为不同边框粗细的表格对象。 图9-1- SEQ 图9-1- \* ARABIC 4 不同边框粗细的表格对象 【单元格边距】：定义了表格后，当输入文字或其他对象时，元素和单元格的边距上会出现一个边距间隔，在该选项的文本框中输入一个数值，确定单元格边框和单元格内容之间的像素数。如图9-1-5所示为不同单元格边距的表格。 图9-1- SEQ 图9-1- \* ARABIC 5 不同单元格边距的表格 【单元格间距】：当定义了表格后，每一个单元格之间的像素数值，虽然未显示默认值，当Dreamweaver会显示两个像素的单元格间距，也可以在该选项的文本框中输入要定义的不同的单元格间距。如图9-1-6所示为不同单元格间距的表格。 图9-1- SEQ 图9-1- \* ARABIC 6 不同单元格间距的表格 【页眉】 “无”：对表不启用列或行标题。 “左侧”：可以将表的第一列作为标题列，以便为表中的每一行输入一个标题。 “顶部”：可以将表的第一行作为标题行，以便为表中的每一列输入一个标题。 “两者”：能够在表中输入列标题和行标题。 提示：当选中除“无”以外的不同选