当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > Dreamweaver MX 2004从零开始(2)

Dreamweaver
用代码“写”出扫描线效果图片
DHTML实例解析:用HTC统一定制表单样式
网页瘦身小技巧---“分割大法”
简单实用的网页表格特效
巧用样式表,让文本框与按钮变个样
网页工作原理
网页图片特效小技巧
如何防止及消除垃圾代码的产生
提高页面显示速度的秘技
用DW MX制作导航下拉菜单
Dreamweaver MX应用表格排序
Dreamweaver查找替换的技巧
用DreamWeaver定制网站的颜色
Dreamweaver MX进阶教程(七)创建基于框架的网页
Dreamweaver MX进阶教程(九)使用用于框架的“行为”
Dreamweaver MX进阶教程(八) 操作框架
Dreamweaver MX进阶教程(十)制作居中的网页
Dreamweaver MX进阶教程(十六)制作可拖动表格
Dreamweaver MX进阶教程(二十一)制作虚线
Dreamweaver MX进阶教程(十三)在Dreamweaver 中使用上标和下标

Dreamweaver MX 2004从零开始(2)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 35 ::
收藏到网摘: n/a

使用表格可以清晰地显示列表的数据,实际上表格的作用远远不止显示数据,它在网页定位上一直起着重要的作用,尤其是对于使用非IE浏览器的网友来说,使用表格定位的网页比使用图层定位的网页更具有优势。

  一、创建表格

  第一步:在Dreamweaver MX 2004中运行“Insert→Table”命令,弹出属性设置窗口,其中“Rows”和“Columns”分别对应着表格的行数和列数,“Table width”表示表格的宽度,而“Border thickness”则是边框的宽度,同时还可以设定表格的样式,根据自己的需要来设置表格的相应属性即可。

  小提示:表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义,比如设置宽度为窗口宽度的60%,那么当浏览器窗口大小变化的时候表格的宽度也随之变化;而如果设置宽度为400像素,那么无论浏览器窗口大小为多少,表格的宽度都不会变化。

  第二步:点击窗口中的“OK”按钮之后即可在Dreamweaver MX 2004中新建一个表格,而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行调整。

  二、基本使用

  在创建了上述的表格之后,我们就可以对它进行调整使用。比如我们需要制作图1所示的表格,就可以先插入一个四行三列的表格,然后对其进行下述操作。

  第一步:在表格第一列的上面两个单元格中按下并拖动鼠标,此时可以选中两个单元格。接着点击属性模板中的“Merges selected cells using spans”按钮,这样就把选中的两格合并成为一个单元格。按照这种方法再将表格第一行右侧的两个单元格合并为一个单元格。

  小提示:选中一个单元格之后点击属性面板中的“Splits cell into rows or columns”按钮可以把单元格拆分为多个行或者列。

  第二步:将表格第一列的三个单元格全部选中,再将属性模板中的背景颜色(Bg)一项设置为“#FFFF00”,这样表格第一列中的单元格背景全部变为黄色。

  第三步:在表格中输入相应的文本,为了美观可以在属性面板中进行居中设置。

  第四步:为了使表格产生立体效果,可以将整个表格选中,然后在属性面板中设定表格边框的宽度(Border)为7,并且将边框颜色(Border color)设置为蓝色即可。

  小提示:通常选取整个表格比较困难,在此提供四种常用的方法:1. 把鼠标移动到表格右边界外侧,按下鼠标之后往左拖拽,这样可以快速选取整个表格。2. 运行“Modify→Table→Insert Table”命令选择整个表格。3. 在单元格中右击鼠标,并且从弹出菜单中选择“Table→Insert Table”命令选取整个表格。4. 用鼠标点击任一个单元格,接着按两下“Ctrl+A”组合按钮选取整个表格。

  完成上述操作之后,我们就可以在Dreamweaver MX 2004中定制出颇具专业水准的表格了。