《网页设计与制作——Dreamweaver MX 2004 教学课件 ppt 作者 邓宁 5》由会员分享，可在线阅读，更多相关《网页设计与制作——Dreamweaver MX 2004 教学课件 ppt 作者 邓宁 5（24页珍藏版）》请在金锄头文库上搜索。
1、项目五 表格,项目提要 表格在网页设计中占有重要的地位，它既可以用于制作简单的图表，也可以用于安排网页文档的整体布局。表格的合理运用，可以使设计制作的网页的页面布局排版更加精美，使网站的建设更加专业化，下面我们将进一步系统地学习表格的制作及使用方法。 学习目标 熟练掌握表格的创建、编辑、格式化及其属性设置； 熟练掌握特殊形状表格制作的技巧； 熟练掌握表格在网页布局中的应用。,任务一 表格创建、编辑及属性设置,组成表格最基本的元素是单元格，在表格的单元格中可以添加文本、图像以及多媒体对象，而且还可以在单元格中再次嵌套表格。利用表格可以轻松实现网页各种元素的精确定位，使网页中的元素更加条理分明，易
2、于阅读与浏览。 Dreamweaver MX 2004提供了强大的表格控制功能，可以添加、删除、拆分及合并表格的行和列，以及修改表格、行或单元格属性，拷贝和粘贴单元格等。,操作一 创建表格,“表格”对话框,其中各项参数的含义如下： 行数：确定表格具体的行的数目； 列数：确定表格具体的列的数目； 表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度； 边框粗细：以像素为单位指定表格边框的宽度，默认情况下表格边框的宽度为1像素； 单元格边距：确定单元格边框和单元格内容之间的距离，单位为像素，默认情况下单元格边距为1像素； 单元格间距：确定相邻的表格单元格之间的距离，单位为像素，默认情况
3、下单元格间距为2像素。,插入的表格,操作二 编辑表格,选中连续的单元格,选中不连续的单元格,选中整行或整列单元格,选中整个表格,操作二 编辑表格,2在表格中插入行或列,单击鼠标右键进行行/列操作,“插入行或列”对话框,4合并拆分单元格,合并单元格,“拆分单元格”对话框,拆分单元格,操作三 设置表格及单元格属性,1设置表格属性,表格的属性面板,表格宽度和高度转换工具,单元格填充和单元格间距,操作三 设置表格及单元格属性,2单元格属性设置,单元格属性面板,调整单元格宽和高属性后的效果,操作三 设置表格及单元格属性,3格式化表格,“格式化表格”对话框,任务二 制作“商务网站”的主页面,“匡字型”结构
4、网页,操作一 用表格布局页面 操作二 制作页眉 操作三 制作页脚 操作四 制作主体区域,任务三 电子相册制作“新品推荐”及“特价商品”区,操作一 创建并编辑表格 操作二 插入图像及文字,制作“新品推荐”区域内容,任务四 常用表格技巧,操作一 制作细线边框表格,21CN首页上的细线边框表格,操作一 制作细线边框表格,1利用单元格间距创建细线边框表格,设置表格的属性,细线边框表格,操作一 制作细线边框表格,2利用单元格边距创建细线边框表格,设置表格属性,在表格的单元格内再插入一个新表格，将新表格的背景颜色设置为白色，宽度为100%，高度值为100，单元格填充和单元格间距均为0，得到的表格如图5-5
5、4所示。,图5-54 细线边框表格,操作二 制作标题栏,在大型的商业网站，常常可以看到如下图5-55所示的标题的样子，下面介绍这种标题栏的制作方法和步骤。,图5-55 搜狐主页上的标题栏,（1）创建间隔图像,操作二 制作标题栏,合并单元格后的表格,添加背景颜色后表格,插入间隔图像后的表格,将第一行左侧单元格的宽度设置为60像素，并在单元格中输入“网页”，右侧为空,操作三 制作圆角表格,1圆角表格（一） 如图5-61所示的就是一种比较常见的圆角表格，用户可以根据需要在表格的中间添加内容。,图5-61 圆角表格,操作三 制作圆角表格,（1）在图像处理软件（如Photoshop）中制作如图5-62所
6、示的圆角图片（颜色为天蓝色），并将做好的图片保存在站点根目录下的images目录中。 图片示例：,使用位置： 左上角 左下角 右上角 右下角,插入圆角图片后的表格,修改背景颜色后的圆角表格,操作四 制作立体表格,立体表格是指有立体感的表格，如图5-76所示的是常见的几种立体表格的效果。立体表格的制作主要是利用了表格的亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性的设置。,图5-76 立体表格,操作四 制作立体表格,新建一个文档，然后在文档中插入一个1行1列，宽度为150像素，边框为1，间距和边距均为0的表格。 选中表格，在“属性”面板中将表格的高度
7、设置为20像素，然后单击“快速标签编辑器”按钮。将光标放在代码的末尾，然后按一下键盘上的空格键，将打开一个列表，其中列出表格的全部属性，在列表中单击“bordercolorlight”，此时属性“bordercolorlight”将添加到表格的属性中，并将它的值设置为“#FF9900”（橙色），用相同的方法，在表格属性中添加“bordercolordark”属性，并将它的值设置为“#FFFFFF”（白色），此时，表格有了类似立体按钮的效果,属性列表,设置表格的亮边框和暗边框属性及立体效果,操作五 制作并排表格,（1）新建文档，插入一个1行3列，宽度为450像素，边框、间距和边距均为0的表格。 （2）在表格的各单元格中插入新表格并设置其属性，或将已制作好的复制表格中形成嵌套表格即可。,并排表格,项目拓展 制作商品分类页面,项目小结,本项目主要介绍了表格的应用，从创建表格、编辑表格、格式化表格、表格的应用技巧等方面详细阐述了表格的功能。并在制作首页中充分应用了表格布局的功能，制作出完整精美的网页文件。由此足以证明，表格在网页制作中是一种用途非常广泛而且很重要的工具。,
