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

第5章 利用表格设计和制作网页 学 习 目 标 本 章 重 点 利用表格进行页面布局 使用表格进行布局时，首先应分析对表格的布局和拆分。关于页面布局尽量在设计时考虑周全，不全面时仍可以用拆分和合并来弥补。 基本步骤 新建(ctrl+n)一个网页文档，设置页面相关属性。例如，上边距值为10，网页标题为“多媒体班级网页”，并保存到本地站点。 （1）通过绘制表格来设计页面布局 （2）在表格中插入页面元素，如文本、图像等 （3）设置表格属性，如表格对齐方式、背景图 像和背景色等 创建表格和表格的基本操作 创建空白表格 步骤 （1）把光标定位到页面左上角（起始处） （2）执行下列操作之一： A、菜单插入?插入表格 B、对象面板上单击插入表格图标，或者从对象上把该图标拖到页面上想要插入表格的位置。 宽度后面的下拉列表是宽度的单位，其中有两个选择，一个是“百分比”，一个是“像素”。单位一般选择pixels(像素)，若选择百分比，当浏览器窗口大小调整时，表格也会随之调整，会影响整体布局。 注意： （1）把表格的边框设置为0时，浏览者就不会看出是表格制作的。（表格只起布局作用，不影响最后的视觉效果） （2）当表格制作完成后，该表格处于被选中状态。若要添加另外的表格，在表格外面单击空白处，再进行添加。 注意： 在DW中，要改变表格或单元格的高度和宽度，尽量要在属性面板中通过改变数值的方法进行，不要使用鼠标直接拖动表格边框来改变表格的大小。 合并与拆分单元格 2.拆分单元格 （1）鼠标单击表格中要拆分的单元格 （2）执行下列操作之一打开“拆分单元格对话框” A、在属性面板上单击“拆分单元格”按钮 B、菜单栏修改?表格?拆分单元格 C、单击右键，选择拆分单元格 （3）设置拆分的行或列数 （4）适当调整行或列高 （5）保存预览网页F12 插入行和列 通过插入行和列可以弥补表格少行少列 在表格中插入页面元素 单元格中的页面元素可以是文本、图像和表格等（同样可以给文本、图像添加超级链接）。 表格中插入图片，当图片大小超过单元格大小时，单元格自动调整以适应加入的图像。 设置表格属性 选择表格或单元格 对表格的操作都要先进行选中再操作才能生效。下面介绍几种表格的选择方法： 1.选中整个表格 （1）单击表格四周的任何一个地方（除了左边）即左上角，左下角，上边，右边或底边上的任何一个地方 （2）把光标置于表格中的任何一个地方，在菜单中选择“modify(修改)”?“table(表格)”?“select table(选择表格)” 被选中的表格周围出现选择手柄，同时标签选择器中的table标签变为加粗显示。 选择多个单元格 （1）连续选：先单击一个单元格，再按住shift键的同时用鼠标单击另一个单元格 （2）间断选：按住ctrl键的同时用鼠标依次单击所要选择的单元格 设置表格行、列及单元格属性 1.认识单元格属性面板:当光标定位在单元格中或是选中单元格时，属性面板显示的就是该单元格的属性。 2.对表格中的文本进行格式化 与对普通文本进行美化是一样的。 3.设置单元格的背景图像和背景颜色 选中要添加背景的单元格，在属性面板上进行添加！ 注：对单元格添加背景和背景图片也可能连续添加或间断添加 说明：在单元格中同时设置了背景色和背景图像时，在浏览器中只能显示出背景图片 4.设置单元格边框线的颜色 （1）将光标定位于单元格中 （2）在属性面板中设置边框颜色 注意：只有在边框线宽不为0时，设置的边框颜色才能起作用！ 设置表格的总体属性 1.设置表格的对齐方式 （1）选中表格，此时属性面板为表格的属性面板 （2）在表格的属性面板上单击对齐（align）的下拉菜单中选取“居中（center）”。 2.修改表格的边框线宽度及单元格间距和单元格空距使浏览的网页不显示表格的边框：将表格边框值设置为“0”，在DW中边框宽度为0时，编辑区中以虚线显示。 如何去掉单元格之间的空白呢？ 去掉了表格线，浏览时仍然会有表格的轮廓。去掉的方法是：将单元格间距和单元格空距均修改为0。没有值并不代表值为0!! 设置表格的背景图像和背景颜色 （1）选中表格，此时属性面板为表格的属性面板。 （2）在表格的属性面板上单击“背景（bg image）”后面的文件夹图标，选择背景图片；背景颜色的设置操作也在属性面板上，“bg color(背景颜色)”在颜色框选择背景色。 设置表格的边框线颜色 例如设置表格的边框线