网页设计与制作——Dreamweaver MX 2004 教学课件 作者 邓宁 5.ppt

《网页设计与制作——Dreamweaver MX 2004 教学课件 作者 邓宁 5.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、项目五表格项目提要表格在网页设计中占有重要的地位，它既可以用于制作简单的图表，也可以用于安排网页文档的整体布局。表格的合理运用，可以使设计制作的网页的页面布局排版更加精美，使网站的建设更加专业化，下面我们将进一步系统地学习表格的制作及使用方法。学习目标熟练掌握表格的创建、编辑、格式化及其属性设置；熟练掌握特殊形状表格制作的技巧；熟练掌握表格在网页布局中的应用。任务一表格创建、编辑及属性设置组成表格最基本的元素是单元格，在表格的单元格中可以添加文本、图像以及多媒体对象，而且还可以在单元格中再次嵌套表格。利用表格可以轻松实现网页

2、各种元素的精确定位，使网页中的元素更加条理分明，易于阅读与浏览。DreamweaverMX2004提供了强大的表格控制功能，可以添加、删除、拆分及合并表格的行和列，以及修改表格、行或单元格属性，拷贝和粘贴单元格等。操作一创建表格“表格”对话框其中各项参数的含义如下：行数：确定表格具体的行的数目；列数：确定表格具体的列的数目；表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度；边框粗细：以像素为单位指定表格边框的宽度，默认情况下表格边框的宽度为1像素；单元格边距：确定单元格边框和单元格内容之间的距离，单位为像素，

3、默认情况下单元格边距为1像素；单元格间距：确定相邻的表格单元格之间的距离，单位为像素，默认情况下单元格间距为2像素。插入的表格操作二编辑表格选中连续的单元格选中不连续的单元格选中整行或整列单元格选中整个表格操作二编辑表格2．在表格中插入行或列单击鼠标右键进行行/列操作“插入行或列”对话框4．合并拆分单元格合并单元格“拆分单元格”对话框拆分单元格操作三设置表格及单元格属性1．设置表格属性表格的属性面板表格宽度和高度转换工具单元格填充和单元格间距操作三设置表格及单元格属性2．单元格属性设置单元格属性面板调整单元格宽和高属性后的效

4、果操作三设置表格及单元格属性3．格式化表格“格式化表格”对话框任务二制作“商务网站”的主页面“匡字型”结构网页操作一用表格布局页面操作二制作页眉操作三制作页脚操作四制作主体区域任务三电子相册——制作“新品推荐”及“特价商品”区操作一创建并编辑表格操作二插入图像及文字制作“新品推荐”区域内容任务四常用表格技巧操作一制作细线边框表格21CN首页上的细线边框表格操作一制作细线边框表格1．利用单元格间距创建细线边框表格设置表格的属性细线边框表格操作一制作细线边框表格2．利用单元格边距创建细线边框表格设置表格属性在表格的单元格内再插入

5、一个新表格，将新表格的背景颜色设置为白色，宽度为100%，高度值为100，单元格填充和单元格间距均为0，得到的表格如图5-54所示。图5-54细线边框表格操作二制作标题栏在大型的商业网站，常常可以看到如下图5-55所示的标题的样子，下面介绍这种标题栏的制作方法和步骤。图5-55搜狐主页上的标题栏（1）创建间隔图像操作二制作标题栏合并单元格后的表格添加背景颜色后表格插入间隔图像后的表格将第一行左侧单元格的宽度设置为60像素，并在单元格中输入“网页”，右侧为空操作三制作圆角表格1．圆角表格（一）如图5-61所示的就是一种比较常见

6、的圆角表格，用户可以根据需要在表格的中间添加内容。图5-61圆角表格操作三制作圆角表格（1）在图像处理软件（如Photoshop）中制作如图5-62所示的圆角图片（颜色为天蓝色），并将做好的图片保存在站点根目录下的images目录中。图片示例：使用位置：左上角左下角右上角右下角插入圆角图片后的表格修改背景颜色后的圆角表格操作四制作立体表格立体表格是指有立体感的表格，如图5-76所示的是常见的几种立体表格的效果。立体表格的制作主要是利用了表格的亮边框（bordercolorlight）和暗边框（bordercolordark）

7、两个属性的设置。图5-76立体表格操作四制作立体表格新建一个文档，然后在文档中插入一个1行1列，宽度为150像素，边框为1，间距和边距均为0的表格。选中表格，在“属性”面板中将表格的高度设置为20像素，然后单击“快速标签编辑器”按钮。将光标放在代码的末尾，然后按一下键盘上的空格键，将打开一个列表，其中列出表格的全部属性，在列表中单击“bordercolorlight”，此时属性“bordercolorlight”将添加到表格的属性中，并将它的值设置为“#FF9900”（橙色），用相同的方法，在表格属性中添加“borderco

8、lordark”属性，并将它的值设置为“#FFFFFF”（白色），此时，表格有了类似立体按钮的效果属性列表设置表格的亮边框和暗边框属性及立体效果操作五制作并排表格（1）新建文档，插入一个1行3列，宽度为450像素，边框、间距和边距均为0的表格。（2）在表格的各单元格中插入新表格并设置其属性