第5章 利用表格设计和制作网页

《第5章 利用表格设计和制作网页》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章利用表格设计和制作网页学习目标表格在网页制作中起着重大作用，它可以对页面元素进行定位和排版，很多大型网站如搜狐、网易等都是用表格进行页面布局。本章将学习表格的基本操作以及利用表格进行页面布局设计。本章重点表格的创建表格的设置制作水平线和垂直线导入和导出数据利用表格进行页面布局使用表格进行布局时，首先应分析对表格的布局和拆分。关于页面布局尽量在设计时考虑周全，不全面时仍可以用拆分和合并来弥补。基本步骤新建(ctrl+n)一个网页文档，设置页面相关属性。例如，上边距值为10，网页标题为“多媒体班级网页”，并保存到本地站点。（1）通过绘制表格来设计页

2、面布局（2）在表格中插入页面元素，如文本、图像等（3）设置表格属性，如表格对齐方式、背景图像和背景色等创建表格和表格的基本操作创建空白表格步骤（1）把光标定位到页面左上角（起始处）（2）执行下列操作之一：A、菜单插入插入表格B、对象面板上单击插入表格图标，或者从对象上把该图标拖到页面上想要插入表格的位置。设置表格行数设置表格边框宽度说明：浏览器在下载网页时先下载整个表格，再下载表格中的内容。当网页很大时就会拉下载速度，所以一般都用几个表格来布局。如果个人网页内容不是很多，则可用一个表格来制作。设置单元格边距（内容与单元格）设置单元格间距（单元格之间

3、）宽度后面的下拉列表是宽度的单位，其中有两个选择，一个是“百分比”，一个是“像素”。单位一般选择pixels(像素)，若选择百分比，当浏览器窗口大小调整时，表格也会随之调整，会影响整体布局。注意：（1）把表格的边框设置为0时，浏览者就不会看出是表格制作的。（表格只起布局作用，不影响最后的视觉效果）（2）当表格制作完成后，该表格处于被选中状态。若要添加另外的表格，在表格外面单击空白处，再进行添加。注意：在DW中，要改变表格或单元格的高度和宽度，尽量要在属性面板中通过改变数值的方法进行，不要使用鼠标直接拖动表格边框来改变表格的大小。行列数目表格的高宽两种

4、单位填充和间距是对表格进行设置清除高宽设置单位可以对表格设置背景颜色和背景图片两个同时设置时，只有图片设置生效1.合并单元格：先选中要合并的单元格，再单击属性面板上的合并单元格按钮（或者鼠标右建快捷菜单，通过菜单栏选择修改表格合并单元格）也可以实现合并的效果。合并与拆分单元格2.拆分单元格（1）鼠标单击表格中要拆分的单元格（2）执行下列操作之一打开“拆分单元格对话框”A、在属性面板上单击“拆分单元格”按钮B、菜单栏修改表格拆分单元格C、单击右键，选择拆分单元格（3）设置拆分的行或列数（4）适当调整行或列高（5）保存预览网页F12表格的嵌套指在

5、表格中的一个单元格中再插入一个表格。表格的复制与粘贴基本操作：（1）对表格进行选中，ctrl+c复制。（2）按向右的箭头“”把光标定位到表格的右边。（3）按ctrl+v粘贴表格，保存并预览效果。1.插入单行或单列办法：单击你要添加行列的单元格，单击鼠标右键在快捷菜单中选择表格插入行（插入列）。2.插入多行或多列方法和前面插入单行单列一样，单击鼠标右键在快捷菜单中选择表格插入行或列。插入行和列通过插入行和列可以弥补表格少行少列插入行或列对话框（可插入多行多列）删除表格或行1.删除整个表格：选中表格后，单击Del键即可删除整个表格。2.删除行或列：

6、方法一，选中所要删除的行或列，单击Del键即可。方法二，右键快捷菜单中可以删除光标所在行，或所在列。方法三，修改属性面板里的行列值。练习:完成下列网页的表格制作。1、要求单元格边距为5（即填充为5）。练习:完成下列网页的表格制作。2、在表格中插入页面元素单元格中的页面元素可以是文本、图像和表格等（同样可以给文本、图像添加超级链接）。表格中插入图片，当图片大小超过单元格大小时，单元格自动调整以适应加入的图像。设置表格属性选择表格或单元格对表格的操作都要先进行选中再操作才能生效。下面介绍几种表格的选择方法：1.选中整个表格（1）单击表格四周的任何一个地方

7、（除了左边）即左上角，左下角，上边，右边或底边上的任何一个地方（2）把光标置于表格中的任何一个地方，在菜单中选择“modify(修改)”“table(表格)”“selecttable(选择表格)”被选中的表格周围出现选择手柄，同时标签选择器中的

8、个单元格（2）间断选：按住ctrl键的同时用鼠标依次单击所要选择的单元格连续选间断选中单元格小技巧：在Dre