dreamweaver cs3网页制作 第四章Word格式.docx
《dreamweaver cs3网页制作 第四章Word格式.docx》由会员分享,可在线阅读,更多相关《dreamweaver cs3网页制作 第四章Word格式.docx(23页珍藏版)》请在冰豆网上搜索。
![dreamweaver cs3网页制作 第四章Word格式.docx](https://file1.bdocx.com/fileroot1/2022-11/15/1ff96fda-e6e6-4626-9def-5f5c000db772/1ff96fda-e6e6-4626-9def-5f5c000db7721.gif)
表格的宽度是一个绝对值,大小不发生变化。
百分比:
表格的宽度是一个相对值,大小会随其父元素的改变而改变。
提示
①表格宽度为百分比时,最外层表格的父元素为浏览器窗口,嵌套表格的父元素为其所在的单元格。
②创建表格时,如果没有明确指定边框粗细、单元格间距和单元格边距的值,则大多数浏览器都按边框粗细和单元格边距为1、单元格间距为2来显示表格。
选择表格元素
选择整个表格
①标签选择器中单击<
table>
②选择“修改→表格→选择表格”命令
③右单击某个单元格,选择“表格→选择表格”
④单击表格的外边框
⑤光标定位表格中,按两次Ctrl+A快捷键
选择行
①直接用鼠标拖动
②单击行中的某个单元格,在标签选择器中单击<
tr>
③鼠标指向表格行的左边缘,指针变为“→”时单击
选择列
②鼠标指向列的上边缘,当鼠标指针变为“↓”时单击
③选择列中的某个单元格,在“列标题”菜单中选择“选择列”命令
选择单个单元格
①按住Ctrl键在单元格内单击
②将光标定位到单元格内,单击标签选择器上的<
td>
③将光标定位到单元格内,按Ctrl+A快捷键
选择连续单元格
①用鼠标从第一个单元格拖到最后一个单元格
②将光标定位到第一个单元格内,然后按住Shift键单击最后一个单元格
③选择不连续的多个单元格:
按住Ctrl键单击要选择的单元格、行或列,再次单击取消选择。
表格的基本操作
(1)调整表格的大小
鼠标指向控制柄呈双向箭头时拖动鼠标,即可调整整个表格的大小;
也可用表格“属性”面板精确指定表格的宽度和高度。
当调整整个表格的大小时,表格中所有单元格将按比例更改大小。
如果表格的单元格指定了明确的宽度或高度,则调整表格大小将更改“文档”窗口中单元格的可视大小,但不更改这些单元格指定的宽度和高度。
(2)调整表格中行或列的大小
更改列宽度并保持整个表格的宽度不变
用鼠标拖动要更改列的右边框,同时相邻列的宽度也随之更改,但整个表格的宽度没有发生变化。
更改某个列的宽度并保持其它列的大小不变
按下Shift键,用鼠标拖动要更改列的右边框,相邻列的宽度不会改变,表格的总宽度将被更改,以容纳正在调整的列。
调整行高
直接用鼠标拖动行的下边框。
(3)插入单行或单列
选中行或列,右单击,在弹出的快捷菜单中选择“表格→插入行”或“表格→插入列”命令。
单击某列的“列标题”菜单,选择“左侧插入列”或“右侧插入列”。
(4)插入多行或多列
选中行或列,右单击,在弹出的快捷菜单中选择“表格→插入行或列”命令,弹出“插入行或列”对话框,如下图所示。
设置要插入的行(列)数及位置,单击“确定”按钮。
(5)删除行或列
选中要删除的行或列,右单击在弹出的快捷菜单中选择“表格→删除行”或“表格→删除列”命令。
(6)合并单元格
①选择相邻的两个或两个以上的单元格
②选择“修改→表格→合并单元格”命令或按Ctrl+Alt+M快捷键或单击属性面板上的“合并单元格”按钮。
(7)拆分单元格
①将光标定位到要拆分的单元格中。
②执行下列操作之一,打开“拆分单元格”对话框。
选择“修改→表格→拆分单元格”命令。
按Ctrl+Alt+S快捷键。
单击属性面板上的“拆分单元格”按钮。
③设置要拆分的行数或列数,单击“确定”按钮。
(8)创建嵌套表格
嵌套表格是指在表格的单元格中插入新的表格。
若要在表格单元格中插入嵌套表格,只需将光标定位到该单元格中,然后再插入表格即可。
①嵌套表格的宽度受所在单元格宽度的限制。
②在网页表格中,表格嵌套层数不宜过多,否则会影响浏览速度。
(9)使用“列标题”菜单
当选定表格或表格中有插入点,默认情况下,DreamweaverCS3会显示表格宽度和每个表格列的列宽,宽度旁边是表格标题菜单与列标题菜单的箭头,使用这些菜单可以快速选择与表格相关的常用命令。
当页面处于“设计”视图时,如果创建表格后没有看到表格宽度和标题菜单箭头,可以选择“查看→可视化助理→表格宽度”命令调出。
4.2设置表格属性
表格属性的设置
单击表格外边框,选中整个表格,打开“表格”属性面板。
各选项的作用如下:
“表格Id”:
表格的Id,用来输入表格的名字。
“行”和“列”:
用来指定表格中行、列的数目。
“宽”:
以像素为单位或按百分比指定表格宽度。
“填充”:
指单元格边距,即单元格内容与边框之间的距离。
“间距”:
指单元格间距,即相邻单元格之间的像素数。
“对齐”:
用于设置表格相对于同一段落中其他元素的显示位置,包括“左对齐”、“右对齐”、“居中对齐”和“默认”4个选项。
“边框”:
指定表格边框的宽度,单位为像素。
“背景图像”:
设置表格的背景图像。
“背景颜色”:
设置表格的背景颜色。
“清除列宽”按钮:
从表格中删除所有明确指定的列宽。
“清除行高”按钮:
从表格中删除所有明确指定的行高。
“将表格宽度转换成像素”按钮:
将表格中每列的宽度设置为以像素为单位的当前宽度,同时将整个表格的宽度设置为以像素为单位的当前宽度。
“将表格宽度转换成百分比”按钮:
将表格中每列的宽度设置为按百分比表示的宽度,同时将整个表格的宽度设置为按百分比表示的宽度。
单元格属性的设置
“合并单元格”按钮:
将所选的单元格、行或列合并为一个单元格。
只有当所选择的区域为矩形时才可以合并这些单元格。
“拆分单元格”按钮:
将一个单元格拆分成多个单元格。
一次只能拆分一个单元格,如果选择的单元格多于一个,则此按钮禁用。
“水平”和“垂直”列表框:
设置单元格、行或列内容的水平对齐方式和垂直对齐方式。
“宽”和“高”:
用来设置所选单元格的宽度和高度。
“不换行”复选框:
如果选中了该复选框,当单元格内的数据超过单元的宽度时,单元格会自动加宽来容纳所有数据;
如果没有选中该复选框,则当单元格内的数据超过单元格的宽度时,自动换行。
“标题”复选框:
可以将所选的单元格格式设置为表格标题单元格。
默认情况下,表格标题单元格的内容为粗体且居中。
“背景”和“背景颜色”:
设置所选单元格、列或行的背景图像和背景颜色。
设置单元格的边框颜色。
表格格式设置优先顺序
在使用表格布局页面时,首先需要对页面中的各类元素作一个大致的规划,事先构思好布局的草图,这样可以在创建表格时节省大量的时间。
创建表格时,最外层表格宽度单位最好采用像素,内部嵌套表格宽度单位采用百分比。
为防止浏览过程中出现水平方向的滚动条,通常在800*600分辨率下,把表格宽度最大设置为778像素,在1024*768分辨率下最大设置为1002像素。
为提高浏览速度,整个网页不要放在一个表格里,表格的嵌套层次尽量要少。
4.3使用表格“布局”视图
表格三种视图模式
视图模式特点
标准模式表格默认的视图模式,表格及其内容的绝大部分操作适合在该模式下进行
扩展表格模式临时向文档中的所有表格添加单元格边距和间距,并且增加表格的边框可使编辑操作更加容易
布局模式主要用于绘制比较复杂的表格,可任意绘制布局表格和布局单元格
表格布局模式
选择“查看→表格模式→布局模式”命令切换到“布局”模式,如下图所示。
绘制布局表格
在“布局”模式下,单击插入栏“布局”类别中的“绘制布局表格”按钮,在编辑窗口中拖动鼠标绘制表格。
绘制布局单元格
单击插入栏“布局”类别中的“布局单元格”按钮,移动光标到要绘制单元格的位置,拖动鼠标绘制“布局单元格”。
如果要连续绘制多个布局单元格,只需在绘制过程中按下Ctrl键即可。
调整布局表格和布局单元格的大小
单击布局表格的边线选中布局表格,拖动布局表格的控制柄,即可改变布局表格的大小。
将鼠标指针移到布局单元格的蓝色线条处,布局单元格的线条会变成红色,此时单击布局单元格的线条,即可选中布局单元格,拖动单元格的控制柄,即可改变单元格的大小。
移动布局表格和布局单元格
选择布局表格和布局单元格后,用鼠标将其拖动到新的位置,也可按方向键移动,每按一次方向键,移动1个像素的距离,如果按住Shift键,每按一次方向键,移动10个像素的距离。
布局表格绘制后,整个表格呈灰色显示,不能在表格内插入图像或输入文本,要插入图像或输入文本,必须创建布局单元格。
绘制布局表格时,可以在网页的空白区域或其他布局表格内绘制布局表格。
如果页面已包含内容,则只能在现有内容的下方绘制新的布局表格。
移动布局表格时,只有嵌套在其他表格中才可以移动。
设置布局表格属性
选中布局表格后,打开“布局表格”属性面板。
“宽”选项区域:
包括“固定”和“自动伸展”两个单选按钮。
用来设置布局表格的背景颜色。
用来设置各布局单元格中插入对象距边线的距离。
用来设置各布局单元格的间距。
“删除所有间隔图像”按钮:
它在添加间隔图像后才会有效,单击可删除所有的间隔图像。
“删除嵌套”按钮:
单击可删除嵌套在布局表格内已选中的布局表格。
设置布局单元格属性
选中布局单元格后,打开“布局单元格”属性面板。
“水平”下拉列表框:
用来设置布局单元格内对象在水平方向的对齐方式,包括“默认”、“左对齐”、“居中对齐”和“右对齐”4个选项。
“垂直”下拉列表框:
用来设置布局单元格内对象在垂直方向的对齐方式,包括“默认”、“顶端”、“中间”、“底部”和“基线”5个选项。
选中该复选框后,可以取消外框线。
自动伸展和间隔图像
“布局”模式中的表格列可以具有固定的宽度,或者其宽度可以自动扩展以尽可能大的填充浏览器窗口(自动伸展)。
自动伸展列:
根据浏览器窗口的宽度自动进行调整。
间隔图像(也叫做间隔GIF)是透明的图像,用来控制自动伸展表格中的间距。
当设置某列自动伸展时,Dreamweaver将自动添加间隔图像,除非指定不使用任何间隔图像,也可以在每个列中手动插入和删除间隔图像。
在“布局”模式下,单击单元格宽度右边的箭头,打开单元格菜单,可以进行间隔图像的添加或删除,设置列宽为固定或自动伸展。
4.4框架(集)的基本操作
框架的基本概念
框架就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页内容。
框架的组成
框架集:
是一个HTML文件,定义了框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的URL。
单个框架:
指浏览器窗口中的一个区域,它可以显示与浏览器窗口的其他部分中所显示内容无关的HTML文档。
创建框架集
(1)选择“文件→新建”命令,弹出“新建文档”对话框,选择“示例中的页→框架集”选项,在“示例页”中选择一种框架集。
(2)单击“创建”按钮,弹出“框架标签辅助功能属性”对话框,保持默认设置,单击“确定”按钮。
在当前文档中创建框架集
在插入栏的“布局”类别中,单击“框架”按钮的下拉箭头,然后选择预定义的框架集。
选