第章网页布局表格模板.doc

第4章 网页版面设计和布局
 在确定了网站专题和结构以后, 就能够开始着手网页制作了。为了提升网页视觉吸引力, 有效地传达信息, 给人以审美感受, 在制作网页之前, 进行网页设计和布局就显得尤为关键。网页作为传输信息一个载体, 同其她出版物如报纸、 杂志等在设计上有很多共同之处, 也要遵照部分设计标准。不过, 因为表现形式、 运行方法和社会功效不一样, 网页设计和布局又有其本身规律。本章将探讨怎样对网页版面进行设计和布局。
4.1网页版面设计
一个成功网页版面首先需要优异设计, 然后辅以优异制作。设计是网页关键和灵魂, 一个相同设计方案能够有多个制作表现方法。
网页关键目不仅是向大家传输它信息, 同时也向获取这些信息大家传输着自己蕴含文化。比如: 众所周知新浪网、 网易、 谷歌等网站页面设计都非常朴实, 没有太多花哨效果, 但它们页面只需要看一眼就能够让人立即识别它是谁, 就是因为它们不仅向访问者传达了网页信息, 更显示出自己独特风格。
网页版面设计, 是技术与艺术结合, 内容与形式统一。设计布局合理、 美观大方页面是每个网页设计者目标。现在, 网页排版布局常见技术通常有以下多个:
1．使用CSS控制整体格式 
使用CSS（Cascading Style Sheets, 层叠样式表）布局技术能完全正确定位文本和图片。它最大特点是能够使网页表现和版面结构相脱离, 大量降低网页中反复使用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）选择整个表格
方法一: 单击表格左上角、 表格上边缘或下边缘任何位置或者行或列边框。需要注意是, 当用户能够选择表格时, 鼠标指针会变成表格网格图标。
方法二: 单击某个表格单元格, 然后在“文档”窗口左下角标签选择器中选择 <table> 标签。
方法三: 将光标置于表格中某个单元格中, 然后选择“修改”菜单下子菜单“表格”中“选择表格”命令。
方法四: 将光标置于表格中某个单元格中, 单击鼠标右键, 在弹出快捷菜单中选择“表格”中“选择表格”命令。
方法五: 将光标置于表格中某个单元格中, 再按两次组合键Ctrl+A。
2）选择单个单元格
方法一: 将光标置于所要选择单元格中, 按一次组合键Ctrl+A。
方法二: 将光标置于所要选择单元格中, 向右拖动鼠标。
方法三: 将光标置于所要选择单元格中, 选择“编辑”菜单中“全选”命令。
方法四: 按住Ctrl键, 单击所要选择单元格, 若再单击一次, 则取消对单元格选择。
方法五: 单击单元格, 然后在“文档” 窗口左下角标签选择器中选择 <td> 标签。
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 “网格设置”窗口