Dreamweaver 4 简明教程(七、网页的排版2)

猫大仙儿958

猫大仙儿958

2016-02-19 20:49

下面是个Dreamweaver 4 简明教程(七、网页的排版2)教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

  七、网页的排版

  表格的使用之二

  根据上面对表格和单元格的参数,我们可以做出以下的表格:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并;单元格边距、单元格间距、表格线宽度都为10;表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色;

  在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是:

  宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为:

  可见,宽度为0的表格线就不会在浏览器显示。其实所谓的利用表格进行排版,就是使用表格线为0的表格,将页面划分为多个区域,从而达到定位排版的效果。另外,表格与表格是可以嵌套的,例如在上面表格中,在单元格2里再插入一个表格宽度为100%,表格线宽度为0的表格,并分别为单元格①②③设置不同的背景色,在编辑状态下可以看到:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  而实际的浏览效果为:

  表格的嵌套在网页制作中被经常使用到,尤其是在新浪、搜狐、网易等门户网站中,为了使大量的信息整齐地展示在浏览者面前,表格的嵌套就使用得最为频繁。下图是goEway.com的首页在编辑状态下的情况,可以看到,页面密密麻麻地布满了表格线:

展开更多 50%)
分享

猜你喜欢

Dreamweaver 4 简明教程(七、网页的排版2)

Web开发
Dreamweaver 4 简明教程(七、网页的排版2)

Dreamweaver4简明教程(七、网页的排版2)

Web开发
Dreamweaver4简明教程(七、网页的排版2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Dreamweaver 4 简明教程(七、网页的排版4)

Web开发
Dreamweaver 4 简明教程(七、网页的排版4)

Dreamweaver4简明教程(七、网页的排版)

Web开发
Dreamweaver4简明教程(七、网页的排版)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Dreamweaver4简明教程(七、网页的排版4)

Web开发
Dreamweaver4简明教程(七、网页的排版4)

Dreamweaver4简明教程(七、网页的排版3)

Web开发
Dreamweaver4简明教程(七、网页的排版3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

数据结构C语言实现系列——队列

数据结构C语言实现系列——队列

Win7系统开机提示系统自动修复无法正常进入的解决方案

Win7系统开机提示系统自动修复无法正常进入的解决方案
下拉加载更多内容 ↓