用出网页表格的“精彩”

属出网 表格的J 嗣页表格看似简单 、平淡．其实它蕴藏着很大 的 “玄机 它不仅仅能准确进行元素定位、页面布 局．你还能借助一些样式晤法和表格标记．来灵活 运用表格．让它能玩出更多的精彩来 为方便叙述+ 本文下面的所有J 容都是先通过DreamW~gver、 F ro ntpag e等软件来完成设计准备工作，再通过局部 修改源代码的方式来选到设计 的的。 一 ． 设计一细横线 这是表格的一种最基本应用 在设计闷页时 ． 常常需要在页面中插入一绑横线，来达到页面排版 美观的目的；要是使用图像软件来专门设计一横线． 未免有点小题大作了；因为你只要按下面方法．变 通一下表格，就能激计出一细横线 ，让网页变得更 简练、高效 1打开D re amW e a v e r程序．在页面中．执行 li'lSe rt ／“Table”命令．在页面中插入一表格； 2在 c图 1)界面中．将表格设置为一行一列． 同时设置单元格边距、单元格问距以及表格边距设 置为 CI 3．在编辑区域中，选中插入的表格，打开表格的 属性设置面板．在这里你将表格的高度设置为 “l pixel，I可时将表格的背景设置为#000D0IJ(圈2)； 4．将编辑区域切换到源代码窗121．将 “&nb sp；” 代码去掉．重新返回到正常的阿页犏辑状态．你就 能看到阿页中生成一细横线了 【圈3)： 。 ℃l— 支，奇妙天堂 5．谣细横线其实就是高为 “I 像素的表格．要 。 。。 。 。 。 。 — — 。 。 — — ‘ 。 —— — 。 。 — — 。 — — — — — — — —— — — — — ’ 。 。 。 。 。 。 。 。 。。 — — 一 — — 。 。 。 。 。 。 。。 。 ‘ 。 。 。 。 ‘ 。 。 ‘ — — ‘ 。 。 。 。 — — — 。。 。 。 。 _ ～ 一 )r T r I'；· n ． pi：，_1 r- r h ·ln∞mn 是想生成其他颤色的细横线的话，体只需要将表格 的背景色修改一下就行了。 二．设计圈形角度的表格 所谓圆形角度的表格其实就是将网页表格的四 个角设计为圆形．这种设计方法将使表格变得更活 泼一点。具体设计方法为： 1酋先使用Photo shop之类的图像工具．设计出 一 个圆角小图像。并让该图像垂直翻转一下．就能 得到舄外一个圆角小图攮； 2 在这两十厕角小图像中间．插^一十与圆角 小图像色彩相同的背景色的表格，同时将表格与圈 角小图像的长度设置为相同； 3．打开该表格 的届性设置面板 ． 将表格的单元格边 距 殳置为 “1 ，其 他 参数 柞设 置为 Il ： 4此时再在表 格 属性 设 置 界面 中 将表格中的单 元格背景颜色设置 为白色，这样你就 4 能得到一个圆角表格了，然后你可以在表格中间输 ^需要的文字内容 ( 4) 三．隐角表格中的栏线 在网页搜计的过程中．有时为了能选到与网页 整体效果的匹配，你需要隐藏表格中的所有行线或 者列线 ．下面就是快速隐藏行线或者列线的技巧 一 1．． 维普资讯 http://www.cqvip.com D 7 1．首先在 D reamWeaver Frontpage的程序编辑 界面中，用鼠标选定需要隐藏栏线的目标表格．选 中后，再将编辑界面切换到 h【mI源代码窗口中； 2．此时鼠标的光标就对自动出现在你所选中表 格的标签处．你可以在这个标签中潘加一个 “ruIe s”参数．并设置 “rule s”参数的属性值； g．要是设置 rnIe s=col s”的话，休就能将当前 衰格中的所有行线隐藏起来，这样表格就只能显示 所有的列线了；要是设置 rule s=t'OWB”时．你可以 将表格的列线隐藏起来．让表格自动显示所有的行 线 ；要是取消表格中的所有行线和列线时，你可以 设置 “roles=none 《图5)； ¨ ^●⋯ 四．让表格包■文字 ’止表格包围文字常常杖用于设计表格环绕标题 的效果 c圈6)。那么如何让表格分割开来．将文字 插入其中昵 还是来看看下面的实现步骤吧。 潞 攫 磊； Lj星 塞组方 ．fi 姆 t 1％印 斥颦口 焦 j墼垫耋一 L_首先在DreamWeaver、Frontpage的程序编辑 界面中．按照普通的方法插八表格 ，然后将插人的 表格遗中．同时将编辑界面切换到嘲页的 htm1源代 码宙121中，此时鼠标的光标会出现在被选中表格的 源代码处； 2．找到源代码中的(I d>标签，然后在这个标签 后面。添加上与

这两个标签。 小■示：它们的作用茈是 ‘破’井表格线，来让 你插 八标题 文字的 3．耍实现上面的效果的碡，你只要在标签 后添加如下的源代码： ‘’< eldset>tl=表格包围文字 这种表格效果，看到过吗?还是自 己来亲自体验一下吧! p>设计起来很方便，field sel 与legend标签能帮你轻橙摘定(，cen【er>(，fieId set> 。 五．设计不完t的衰格 所谓不完整的表格 ．就是指表格的底边或者顶 边。甚至是其他边框不存在的那种特殊表格 要设 计这种表格特效的暗．你可以按照下面的方法来宴 l运行 F rontPage程序，打开其编辑捍面．在其 中执行插入 表格 命々．当程序打开 “插入表格 没置界面时，你可以在其中将表格的边框粗细设置 为 0 2．用鼠标单击左下方的 样式”按钮，继续单击 “格式 按钮．在弹出的页面中选中 “边框”选项； 3你将能看到一个标题为 边框与阴影”的设置 窗口，单击该窗口的 “自定义”图例．并进上一种 需要的颧色，对于线型你可以不必理会，因为在没 有 迎 线 的 表 格中．无论进 择 什 么 线 型 者lI是 无 关 紧 要 的 ； 4 单 击 预览 图倒 四 周的 边 框 按钮，需要哪一边则单击哪边的按钮 ．下面你可以 很轻橙地一路单击 “确定 按钮+最后就能得到边 怄不完整的特殊表格了 c图 7 J。 六．让格式文本 。变形 为衰梧 在实际排版过程中．常常需要将有统一显示格 式的文字生成表格来显示+这样可以更直观一点 ； 此时你可以按照下而的方法，来快速将具有固定显 示格式的文字 变形”为表格。 I在嗍页的编辑界面中．输^具有圊定显示格 式的文率内容 并确保每一段中的文字内容用空格 分隔开来 2琏中所有需要转变为表格的文率内容，执行 FrontPage程序中的 表格”菜单项．选择 “转换 菜 单 3再从右侧打开的下级菜单中．执行 “文本到表 格 命令，当打开 “将文 本转换为表格”的设置 界面时．你可以在 分硒 文本在 单选框中选择 “其他 选项．打开 ( 8)的界面 4．在这里．你可以墒 ^一个空格 ．最后单击 “确定 按钮．FrontPage 程序就能根据文本中的空格以及段落．来将文字分 酮成几行几列的表格了 ◆ ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ， ， ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ， ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ， ● ● 维普资讯 http://www.cqvip.com