第9章 Dreamweaver基础演练
- 格式：doc
- 大小：1.18 MB
- 文档页数：36
第三部分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- 1 表格的结构在HTML中，表格中的所有结构和数据都被包含在表格标记符中，<Table>和</Table>之间。
<Table>标记符包含了大量的属性，决定表格宽度和高度，以及边框、页面对齐和背景颜色。
也可以控制单元格之间的间隔和在单元格中添加对象的多少。
如下所示为一段标准表格的HTML代码。
<table width="400" border="1"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table>9.1.2 在页面中插入表格在Dreamweaver 8插入一个表格的方法非常简单，只需要通过简单的设置即可快速地得到一个相应的表格对象。
1. 打开Dreamweaver 8，按【Ctrl+F2】调出【插入】面板，可以看到【常用】选项，如图9-1-2所示。
如果出现的不是【常用】选项，可以按左边的黑色三角符号选择【常用】。
图9-1- 2 【插入】面板的【常用】选项2. 单击【表格】按钮，弹出如图9-1-3所示的【表格】对话框。
图9-1- 3 【表格】对话框3. 进行如下的设置：【表格大小】●【行数】：在该选项的文本框中输入要创建表格的行数。
●【列数】：在该选项的文本框中输入要创建表格的列数。
●【表格宽度】：在该选项的文本框中输入相应的表格宽度的数值，在右侧的【单位】下拉列表中选择“像素”选项，作为表格宽度的单位。
当选择“百分比”选项时，表格的宽度将按照当前显示页面尺寸的百分比进行显示。
当浏览器窗口的尺寸发生变化时，表格的宽度也将按照相应的比例进行变化。
●【边框粗细】：当定义了表格后，在该选项的文本框中可以定义不同粗细的边框尺寸。
如图9-1-4所示为不同边框粗细的表格对象。
图9-1- 4 不同边框粗细的表格对象●【单元格边距】：定义了表格后，当输入文字或其他对象时，元素和单元格的边距上会出现一个边距间隔，在该选项的文本框中输入一个数值，确定单元格边框和单元格内容之间的像素数。
如图9-1-5所示为不同单元格边距的表格。
图9-1- 5 不同单元格边距的表格●【单元格间距】：当定义了表格后，每一个单元格之间的像素数值，虽然未显示默认值，当Dreamweaver会显示两个像素的单元格间距，也可以在该选项的文本框中输入要定义的不同的单元格间距。
如图9-1-6所示为不同单元格间距的表格。
图9-1- 6 不同单元格间距的表格【页眉】●“无”：对表不启用列或行标题。
●“左侧”：可以将表的第一列作为标题列，以便为表中的每一行输入一个标题。
●“顶部”：可以将表的第一行作为标题行，以便为表中的每一列输入一个标题。
●“两者”：能够在表中输入列标题和行标题。
提示：当选中除“无”以外的不同选项时，在表格中输入内容时，会自动定义文字为居中对齐和粗体选项。
如图9-1-7所示为顶部【页眉】方式输入文字后的效果。
图9-1- 7 顶部【页眉】方式【辅助功能】●【标题】：在该文本框中可以输入该“表格”的标题文字，可以直接在该文本框输入，相应的文字将按照【对齐标题】选项定义的位置出现在表格的相对位置上。
如图9-1-8所示。
图9-1- 8 自动添加的标题●【对齐标题】：在该下拉列表中可以选择到“标题”对象和“表格”的相互关系。
●【摘要】：在该文本框中输入表格的说明。
屏幕阅读起可以读取摘要文本，但是该文本不会显示在浏览器中。
4. 设置完毕后，单击【确定】按钮创建表格对象。
9.1.3 设置表格属性当要对一个表格对象进行设置时，就要用到【属性】面板。
当要使用【属性】面板对表格对象进行设置时，可以将整个表格或表格中一部分选中，选择【窗口】|【属性】命令或按Ctrl+F3将面板调出，当选中表格时【属性】面板如图9-1-9所示。
图9-1- 9 【属性】面板【属性】面板中的有些选项在前一小节中已经进行详细的讲解，在这里就不再赘述了。
下面我们来看一下一些新的选项。
●定义表格的名称当要对表格对象添加一个名称，为更加高级的操作提供方便时，可以将表格对象选中，在【属性】面板中的【表格Id】框中输入要使用的名称即可。
●设置表格的对齐方式当表格创建完毕后，表格对象在“默认”的情况下在整个的窗口中靠近左侧对齐，当要调整表格的对齐方式时，可以在【对齐】下拉列表中选择相应的选项，如“左对齐”、“居中对齐”以及“右对齐”。
注意：这里的对齐方式的设置，只是应用到表格对象和浏览器窗口之间的对齐方式，和表格中文字的对齐方式没有任何关系，所以不要混淆。
●使用快速调整表格的按钮【清除列宽】：单击该按钮时，将清除表格列宽度的设置。
【清除行高】：单击该按钮时，将清除表格行高度的设置。
【将表格宽度转换成像素】：单击该按钮时，将表格宽度设置的单位转换为像素，单击该按钮原有的尺寸并不会发生任何的变化。
【将表格高度转换成像素】：单击该按钮时，将表格高度设置的单位转换为像素，单击该按钮原有的尺寸并不会发生任何的变化。
【将表格宽度转换成百分比】：单击该按钮时，将表格宽度设置的单位转换成百分比，单击该按钮原有的尺寸并不会发生任何的变化。
【将表格高度转换成百分比】：单击该按钮时，将表格高度设置的单位转换为百分比，单击按按钮原有的尺寸并不会发生任何的变化。
●定义表格的颜色在默认的情况下，表格的颜色采用“白色”。
当要调整表格的颜色时，可以通过【属性】面板中的相应设置进行调整。
选中要调整的行、列或整个表格对象，单击【背景颜色】或【边框颜色】右侧的按钮，在弹出的面板中选择要使用的颜色，也可以在其右侧的文本框中输入“十六进制颜色代码”，可以将选中的颜色定义到相应的位置上。
●在表格中定义背景图像在默认的情况下表格对象的颜色采用单色填充，如果要使用更加丰富的填充，可以使用背景图像填充到表格中。
单击【背景图像】选项右侧的【浏览文件】按钮，在弹出的如图9-1-10所示的【选择图像源文件】对话框中选择要使用的背景文件。
单击【确定】按钮将该图像定义到表格对象的背景中。
按下F12键在浏览器中浏览表格对象的效果如图9-1-11所示。
图9-1- 10 【选择图像源文件】对话框图9-1- 11 定义了背景图像的表格对象提示：1. 除了上面介绍的定义图像的方法外，也可以直接在【属性】面板中的【背景图像】选项中的文本框中直接输入图像文件的链接。
也可以拖拽右侧的【指向文件】按钮到【文件】面板中要使用的图像文件上。
2. 为表格对象定义背景图像时，背景图像的尺寸如果没有表格对象的尺寸大，将进行重复的放置。
当背景图像的尺寸比表格对象的尺寸大时，图像将进行裁切。
合并单元格当需要将两个或多个单元格合并成一个单元格时，使用鼠标将要合并的单元格同时选中，如图9-1-12所示。
图9-1- 12 选中要合并的单元格这时的【属性】面板如图9-1-13所示，按下左下方的【合并所选的单元格】按钮即可实现合并，合并后的表格对象如图9-1-14所示。
图9-1- 13选中单个或多个单元格时的【属性】面板图9-1- 14 合并单元格后的表格拆分单元格当需要将一个单元格拆分成两个或多个单元格时，使用鼠标将要拆分的单元格选中。
这里选中的是表格中的第一个单元格，点击【属性】面板左下方的【拆分单元格为行或列】按钮，弹出的对话框如图9-1-15所示。
图9-1- 15 【拆分单元格】对话框选择“列”单选框后实现了把第一个单元格拆分成两列，效果如图9-1-16所示。
图9-1- 16 拆分单元格后的表格提示：当将单元格进行拆分时，如果单元格中包含文字，拆分后并不会分别放置到相应的位置上，而是统一放置到一个单元格中。
另外，当选择单个单元格时，可以在【属性】面板中设置它的背景，可以是单色也可以是图像，操作和给表格添加背景是一样的。
还有一些这里没有说明的选项，读者可以自己去设置以逐步熟悉【属性】面板。
9.2 使用层层的概念和平面设计软件中的层概念比较相似，可以将层放置到页面的任何位置上，层和层之间同样会出现层叠的现象，即使当多个层同时出现在一个位置上时先创建的“层”会被后创建的层遮盖。
在一个层中可以继续创建“子层”，“子层”会继承“父层”的属性。
9.2.1 创建“层”Dreamweaver 8可以随时自定义、精确创建层。
在Dreamweaver软件中创建层的HTML 标签可以是<div>、<span>、<layer>和<ilayer>四种标签，在这里传见的标签前两个是由W3C 所认证的，可以在IE和Netscape两种常用的浏览器中正常察看，后面的<layer>和<ilayer>两种标签只会被Netscape浏览器所识别。
