第4章 网页布局表格.docx
《第4章 网页布局表格.docx》由会员分享，可在线阅读，更多相关《第4章 网页布局表格.docx（17页珍藏版）》请在冰豆网上搜索。
第4章网页布局表格
第4章网页的版面设计和布局
在确定了网站的主题和结构之后，就可以开始着手网页的制作了。
为了提高网页的视觉吸引力，有效地传达信息，给人以审美的感受，在制作网页之前，进行网页的设计和布局就显得尤为重要。
网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计原则。
但是，由于表现形式、运行方式和社会功能的不同，网页设计和布局又有其自身的规律。
本章将探讨如何对网页的版面进行设计和布局。
4.1网页的版面设计
一个成功的网页版面首先需要优秀的设计，然后辅以优秀的制作。
设计是网页的核心和灵魂，一个相同的设计方案可以有多种制作表现的方式。
网页的主要目的不仅是向人们传递它的信息，同时也向获取这些信息的人们传递着自己蕴含的文化。
例如：
众所周知的新浪网、网易、谷歌等网站的页面设计都非常朴实，没有太多花哨的效果，但它们的页面只需要看一眼就能够让人马上识别它是谁，就是因为它们不仅向访问者传达了网页的信息，更显示出自己独特的风格。
网页版面的设计，是技术与艺术的结合，内容与形式的统一。
设计布局合理、美观大方的页面是每个网页设计者的目标。
目前，网页排版布局常用的技术一般有以下几种：
1．使用CSS控制整体格式
使用CSS（Cascading StyleSheets，层叠样式表）布局技术能完全精确的定位文本和图片。
它最大的特点是可以使网页的表现和版面结构相脱离，大量减少网页中重复使用的HTML代码，从而减小网页的体积，这对于在网上传输非常有利。
同时CSS可以使用外接*.CSS文件的方法使一次性修改大批量的网页成为可能，这就意味着用户可以经常改变网站的界面（包括文字、色彩、背景图片等），而每次只需要上传一个体积很小的CSS文件就行了。
目前，CSS运用的好坏也是判断一个网站优秀与否的重要指标。
2. 使用表格定位
利用表格工具，用户可以通过绘制并重新安排页面结构来快速地设计页面。
使用表格来定位文字和图片，制作直观，而且效果也不错。
但值得注意的是，当页面很大的时候，一定不要在整个网页上用一个大的表格嵌套很多小表格，用户最好先将页面分用几个小表格。
这样，在用户浏览网页的时候收到多少表格显示多少表格，浏览者可以在等待的时候先看收到的部分。
但是如果觉得分别显示页面会破坏整体的美感，那就选用大表格吧。
3．选择使用框架
框架（Frame）也叫帧页，是制作网页时较为常用的一种技术。
该技术可以把浏览器窗口划分为几个小窗口，每一个窗口都显示一个网页的内容，并分别设置大小、有无滚动条等信息。
这样就方便了设计网站的结构，可以在上方的框架里放置网站的LOGO，在左边的框架里显示导航栏，而在下方的框架里安置版权信息。
当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。
而且浏览时，可以指定链接的网页在哪个框架里显示，从而避免了网页上相同内容的重复下载。
4.使用模板
在完成了所有的构思以后，可以先做一个模板网页，在这个网页里包括了所有网页的公共元素，如：
LOGO、导航栏、更新时间、推荐栏目、外接的CSS样式表的链接、加入收藏夹、返回首页、站点地图、E-mail地址、滚动的状态栏、广告条、版权信息等等。
之后，用户就可以基于模板创建新的页面，然后在模板更改时自动更新这些页面的布局。
4.2用表格布局网页
表格在网页设计中占据着重要的地位。
它是处理数据时最常用的一种形式。
同时，表格也是Dreamweaver对文本和图形进行页面布局时强有力的工具。
能否熟练地运用表格将直接影响到网页作品外观的好坏，因此学习运用表格也是学习制作网页的一个重要内容。
通过表格可以精确地控制各网页元素在网页中的位置,通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面，使得网页中的元素得以方便地固定在设计的位置上。
表格由一行或多行组成；每行又由一个或多个单元格组成。
当选定了表格或表格中有插入点时,Dreamweaver会显示表格宽度和每个表格列的列宽,宽度旁边是表格标题菜单与列标题菜单的箭头。
使用这些菜单可以快速访问与表格相关的常用命令,用户可以启用或禁用宽度和菜单。
图4-1显示表格宽度和表格列宽度
4.2.1创建表格
利用Dreamweaver创建新表格时，可执行下述具体步骤。
1）在“文档”窗口的“设计”视图中，将插入点放在需要创建表格的位置。
2）执行下列操作之一：
方法一：
选择主窗口“插入”菜单中的“表格”命令。
方法二：
在“插入”面板的“常用”类别中，单击“表格”按钮。
方法三：
按组合键Ctrl+Alt+T。
3）在弹出的“表格”对话框中设置“表格”的属性,如图4-9所示,然后单击“确定”创建表格。
图4-2表格设置对话框
“表格”对话框中各主要选项的功能如下：
（1）“行数”：
用来设置生成表格的行数。
（2）“列数”：
用来设置生成表格的列数。
（3）“表格宽度”：
用来设置生成表格的宽度，可以填入数值，宽度的单位有两个选项——百分比和像素。
当选择百分比时，表格的宽度会随浏览器窗口的大小而改变。
例如设置宽度为窗口宽度的60％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化，但是无论浏览器窗口怎么变化，都不会出现水平滚动栏；如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。
当浏览器窗口特别小（即其宽度不足以显示一个完整的表格）时，浏览器窗口就会出现水平滚动栏。
（4）“边框粗细”：
用来设置生成表格的边框宽度，以像素为单位。
如果没有明确指定边框粗细的值,则大多数浏览器都将其默认为1；如果不想在浏览器窗口中显示表格的边框，可将边框粗细定义为0。
（5）“单元格边距”：
用来设置单元格边框与单元格内容之间的像素数。
如果没有明确指定单元格边距的值,则大多数浏览器都将其默认为1；如果不想在浏览器窗口中显示单元格边距，可将单元格边距定义为0。
（6）“单元格间距”：
用来设置单元格与单元格之间的像素数。
如果没有明确指定单元格间距的值,则大多数浏览器都将其设置为2；如果不想在浏览器窗口中显示单元格间距，可将单元格间距定义为0。
（7）“标题”：
定义页眉样式，“无”表示对表格不启用列或行标题；“左对齐”表示可以将表格的第一列作为标题列，以便为表格中的每一行输入一个标题；“顶对齐”表示可以将表格的第一行作为标题行，以便为表格中的每一列输入一个标题；“两者兼有”表示用户能够在表格中输入列标题和行标题。
（8）“标题”：
定义一个显示在表格外的表格标题。
（9）“摘要”：
可以在这里对表格进行注释。
屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。
4.2.2设置表格属性
1.设置表格属性
选中一个表格后，可以通过“表格属性”面板再次编辑表格属性，如图4-3所示。
图4-3“表格属性”面板
“表格属性”面板中的各项参数的功能介绍如下：
（1）“行”和“列”：
用来设置表格中行和列的数量。
（2）“宽”：
表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比，宽度的单位可以通过图标
或
设置。
（3）“填充”：
用来设置单元格边距，即单元格内容与单元格边框之间的像素数。
（4）“间距”：
用来设置单元格间距，即相邻的表格单元格之间的像素数。
（5）“对齐”：
用来确定表格相对于同一段落中的其它元素的显示位置，即设置表格的对齐方式，默认的对齐方式一般为左对齐。
（6）“边框”：
用来设置表格边框的宽度。
（7）“类”：
对该表格设置一个CSS类。
（8）“清除列宽”
和“清除行高”
：
从表格中删除所有明确指定的行高或列宽。
（9）“将表格宽度转换成像素”和“将表格高度转换成像素”
：
将表格中每列的宽度或高度设置为以像素为单位的宽度，还可以将整个表格的宽度设置为以像素为单位的宽度。
（10）“将表格宽度转换成百分比”和“将表格高度转换成百分比”
：
将表格中每个列的宽度或高度设置为按占“文档”窗口宽度百分比表示的宽度，还可以将整个表格的宽度设置为按占“文档”窗口宽度百分比表示的宽度。
2.设置单元格、行或列属性
把光标移动到某个单元格内，或选定行或列，就可以利用相应的属性面板对单元格、行或列的属性进行设置，如图4-4所示。
图4-4“单元格属性”面板
“单元格属性”面板中各项参数的主要功能介绍如下：
（1）“水平”：
用来设置单元格内元素的水平对齐方式。
用户可以将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式（通常，常规单元格为左对齐，标题单元格为居中对齐）。
（2）“垂直”：
用来设置单元格内的垂直对齐方式，用户可以将内容对齐到单元格的顶端、中间、底部或基线，或者指示浏览器使用其默认的对齐方式（通常是居中对齐）。
（3）“高”、“宽”：
用来设置单元格的宽度和高度，可以像素为单位或百分比为单位。
若指定百分比，则需在值后面使用百分比符号；若要让浏览器根据单元格的内容或根据其它列和行的宽度和高度来确定适当的宽度或高度，将此域留空即可。
默认情况下，浏览器选择行高和列宽的依据是能够在列中容纳最宽的图像或最长的行。
（4）“不换行”：
可以防止单元格中较长的文本自动换行，从而使给定单元格中的所有文本都在一行上。
如果启用了“不换行”，则当用户键入数据或将数据粘贴到单元格时，该单元格会加宽来容纳所有数据。
通常，单元格在水平方向扩展以容纳单元格中最长的单词或最宽的图像，然后根据需要在垂直方向进行扩展以容纳其它内容。
（5）“标题”：
使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。
默认情况下，表格标题单元格的内容为粗体并且居中。
（6）“背景颜色”：
使用颜色选择器设置背景单元格的背景颜色。
4.2.3表格的基本操作
对于表格、行、列、单元格属性的设置首先是以选择这些对象为前提的。
1.选择表格元素
1）选择整个表格
方法一：
单击表格的左上角、表格的上边缘或下边缘的任何位置或者行或列的边框。
需要注意的是，当用户可以选择表格时，鼠标指针会变成表格网格图标。
方法二：
单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择
标签。方法三：
将光标置于表格中的某个单元格中，然后选择“修改”菜单下的子菜单“表格”中的“选择表格”命令。
方法四：
将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“选择表格”命令。
方法五：
将光标置于表格中的某个单元格中，再按两次组合键Ctrl+A。
2）选择单个单元格
方法一：
将光标置于所要选择的单元格中，按一次组合键Ctrl+A。
方法二：
将光标置于所要选择的单元格中，向右拖动鼠标。
方法三：
将光标置于所要选择的单元格中，选择“编辑”菜单中的“全选”命令。
方法四：
按住Ctrl键，单击所要选择的单元格，若再单击一次，则取消对单元格的选择。
方法五：
单击单元格，然后在“文档”窗口左下角的标签选择器中选择
标签。 3）选择多个单元格 方法一： 按住Ctrl键，单击所要选择的所有单元格。 方法二： 将光标置于单元格中，拖动鼠标，选择多个单元格。 方法三： 如果要选择整行，将光标置于该行的左边缘，当光标变成“→”形状时单击鼠标左键。 方法四： 如果要选择整列，将光标置于该列的上边缘，当光标变成“↓”形状时单击鼠标左键。 4）选择全部单元格 方法一： 将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。 方法二： 将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。 方法三： 将光标置于第1行的左边缘，当光标变成“→”形状时，向下拖动鼠标至最后一行。 方法四： 将光标置于第1列的上边缘，当光标变成“↓”形状时，向右拖动鼠标至最后一列。 2.更改表格结构 1）在现有的表格中插入单元行 方法一： 将光标移到要插入单元行的下一行，选择“修改”菜单下“表格”子菜单中的“插入行”命令。 方法二： 将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行”命令。 方法三： 在表格的最后一个单元格中按Tab键会自动在表格最后另外添加一行。 2）在现有的表格中插入单元列 方法一： 将光标移到在插入单元列的右边一列，选择“修改”菜单下子菜单“表格”中的“插入列”命令。 方法二： 将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入列”命令 3）如果想在现有的表格中添加多行或多列，可执行以下操作： 首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“插入行或列”命令，或是选择“修改”菜单下子菜单“表格”中的“插入行或列”命令，将弹出如图4-5所示的“插入行或列”对话框。 在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。 图4-5“插入行或列”对话框 4）删除整行或整列 方法一： 先选择欲删除的整行或整列，直接按Del键，即可删除。 方法二： 先将光标移到要删除的行或列中，选择“修改”菜单下“表格”子菜单中的“删除行”或“删除列”命令。 方法三： 将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”中的“删除行”或“删除列”命令。 5）合并单元格 首先在表格中选择需合并的单元格，属性面板变成“单元格”属性面板，然后执行下列操作之一： 方法一： 选择“修改”菜单下“表格”子菜单中的“合并单元格”命令。 方法二： 单击鼠标右键，在弹出的快捷菜单中选择“表格”中“合并单元格”命令。 方法三： 单击“单元格”属性面板上的合并单元格图标 。 6）拆分单元格 首先在表格中选择需拆分的单元格，执行下列任何一种操作： 方法一： 选择“修改”菜单下子菜单“表格”中“拆分单元格”命令。 方法二： 单击鼠标右键，在弹出的下拉菜单中选择“表格”中“拆分单元格”命令。 方法三： 单击属性面板上的拆分单元格图标 。 另外，在“拆分单元格”对话框中，可以选择拆分成行或列以及拆分的数量。 3.修改表格大小 1）设置表格的宽度及高度 方法一： 通过鼠标拖曳法可以粗略地调整表格的大小。 方法二： 通过“表格属性”对话框可以精确地调整表格的大小。 在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。 2）设置单元格的宽度及高度 在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。 如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。 在属性面板上可以改变单元格默认的宽度和高度。 将光标置于需要设置宽度或高度的单元格中，此时属性面板显示为单元格属性。 在属性面板上的“宽”或“高”文本框中输入适当的数值即可，这时单元格宽度与高度的单位使用像素；如果要指定单元格宽度与高度的单位使用百分比，需要在值后面使用百分比符号（%）。 4．表格数据操作 1）导入表格数据 Dreamweaver还支持将外部的数据导入表格，这些数据文件一般是纯文本或者Excel等工具创建的文件，一般是以制表符、逗号、分号等作为分隔符的格式。 方法一： 选择“文件”菜单下“导入”子菜单中的“表格式数据”命令，出现如图4-6所示的对话框。 图4-6“导入表格式数据”对话框 “数据文件”： 填写要导入的文件的名称。 单击“浏览”按钮可以选择一个文件导入。 “定界符”： 填写要导入的文件中所使用的分隔符。 “表格宽度”： 选择“匹配内容”，使每个列足够宽以适应该列中最长的文本字符串；选择“指定宽度”，可以像素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。 “格式化首行”： 用于确定应用于表格首行的格式设置，有四个选项中可供选择： 无格式、粗体、斜体或加粗斜体。 方法二： 在“插入”面板的“数据”类别中，单击“导入表格式数据”图标，也会出现如图4-6所示的对话框。 方法三： 选择“插入”菜单下“表格对象”子菜单中的“导入表格式数据”命令，同样会出现如图4-6所示的对话框。 2）导出表格数据 可以将表格数据从Dreamweaver导出到文本文件中，相邻单元格的内容由分隔符隔开，可以将逗号、冒号、分号或空格用作分隔符。 选择“文件”菜单下“导出”子菜单中的“表格”命令，出现如图4-7所示的对话框。 图4-7“导出表格数据”对话框 “定界符”： 指定应该使用哪种分隔符在导出的文件中分隔表格数据； “换行符”： 用于选择将在哪种操作系统中打开导出的文件，是Windows、Macintosh还是UNIX。 若使用的是Windows操作系统，则在换行符框内选择“Windows”，单击“导出”按钮，打开保存文件窗口执行保存操作。 3）表格排序 在Dreamweaver中，可以根据表格单个列的内容进行排序，也可以根据两个列的内容执行更加复杂的表格排序。 对表格数据进行排序的方法如下： 定位光标到表格内，选择“命令”菜单下的“排序表格”命令，出现如图4-8所示的对话框，设置选项后，单击“确定”按钮开始排序。 图4-8“排序表格”对话框 排序按： 选择按哪一列的值对表格的行进行排序。 顺序： 有“按字母顺序”和“按数字顺序”两种方式，并可选择按升序（英文字母是按A到Z，数字是按从小到大）或降序排列。 需要说明的是，当列的内容是数字时，一般选择“按数字顺序”。 如果按字母顺序数字进行排序，则会将这些数字作为单词进行排序（排序结果如1、10、2、20、3、30），而不是将它们作为数字进行排序（排序结果如1、2、3、10、20、30）。 再按： 按上面排序后有并列数据时，再设置另一列数据进行排序时使用的排序依据。 排序包含第一行： 勾选此项，对表格的首行也排序。 若表格的首行是标题单元格，则应清除勾选。 排序标题行： 如果表格有表头，则对其排序。 排序脚注行： 如果表格有脚注行，则对其排序。 完成排序后所有行颜色保持不变： 勾选此项，表格排序后原表格的颜色不随顺序的变化而变化。 用于指定排序之后表格行属性（如颜色）应该与同一内容保持关联。 如果表格行使用两种交替的颜色，则不要选择此项，以确保排序后的表格仍具有颜色交替的行。 如果行属性特定于每行的内容，则选择此项，以确保这些属性与排序后表格中正确的行保持一致。 4.2.4使用可视化助理进行布局 1、设置标尺 标尺常用于帮助用户测量、组织和规划布局。 标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。 1）标尺有两种状态，即“显示”和“隐藏”。 若想在这两种状态之间切换，应选择“查看”菜单下的“标尺”子菜单，单击“显示”命令。 2）默认情况下，标尺的原点坐标位于“设计”视图中“文档”窗口的左上角。 如果要更改原点，可以将标尺原点图标拖到页面上的任意位置。 3）如果要将原点重设至它的默认位置，可以选择“查看”菜单下“标尺”子菜单中的“重设原点”选项，跟踪图像随即返回到“文档”窗口的左上角（0,0）；也可以在“文档”窗口的左上角单击右键，在快捷菜单中选择“重设原点”选项。 4）用户也可以更改标尺的度量单位，具体操作是： 选择“查看”菜单中“标尺”子菜单，然后根据自己的需要选择“像素”、“英寸”或“厘米”。 2、设置布局辅助线 辅助线是用户从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。 还可以使用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分。 为了帮助用户对齐元素，Dreamweaver允许将元素靠齐到辅助线，以及将辅助线靠齐到元素。 需要说明的是，只有在将元素绝对定位的情况下，才可使用靠齐功能。 当然，用户还可以锁定辅助线，以防止其他用户不小心移动它们。 1）创建水平辅助线或垂直辅助线 直接用鼠标拖动水平或垂直辅助线到“文档”窗口中的适当位置，然后松开鼠标按钮；如果需要重新定位“文档”窗口中辅助线，只需再次拖动该辅助线即可。 值得注意的是，在默认情况下，Dreamweaver用绝对像素度量值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。 若要以百分比的形式记录辅助线，可在创建或移动辅助线时按住Shift。 2）显示或隐藏辅助线 显示或隐藏辅助线，可以使用“查看”菜单中“辅助线”子菜单下的“显示辅助线”命令切换实现。 3）将元素靠齐辅助线 方法一： 若要将元素靠齐到辅助线，可以选择“查看”菜单中“辅助线”子菜单下“靠齐辅助线”命令。 方法二： 若要将辅助线靠齐元素，可以选择“查看”菜单中“辅助线”子菜单下“辅助线靠齐元素”命令。 需要注意的是，用户在调整绝对定位的元素（如AP元素）、表格或图像的大小时，所调整的元素也会靠齐辅助线。 4）查看辅助线并将其移至特定位置 首先应该将鼠标指针停留在辅助线上以查看其位置，然后双击该辅助线，最后在“移动辅助线”对话框中输入新的位置，然后单击“确定”即可。 5）更改辅助线设置 若要更改辅助线的设置，可以选择“查看”菜单中“辅助线”子菜单下“编辑辅助线”命令，在弹出的辅助线窗口中设置如下选项，如图4-9所示，然后单击“确定”即可。 图4-10“辅助线”窗口 3.使用布局网格 网格在“文档”窗口中显示为一系列的水平线和垂直线，常用于精确地放置对象。 可以让经过绝对定位的页面元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。 无论网格是否可见，都可以使用靠齐。 1）显示或隐藏网格 选择“查看”菜单中“网格设置”子菜单下的“显示网格”命令。 2）启用或禁用靠齐 选择“查看”菜单中“网格设置”子菜单下的“靠齐到网格”命令。 3）更改网格设置 首先选择“查看”菜单中“网格设置”子菜单下的“网格设置”命令，在弹出的“网格设置”窗口中设置相关选项，如图4-11所示，然后单击“确定”应用更改。 图4-11“网格设置”窗口
展开阅读全文
相关搜索
|