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

2016-02-19 20:49 13 1 收藏

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

【 tulaoshi.com - Web开发 】

  七、网页的排版

  表格的使用之二

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

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

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

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

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

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

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

  而实际的浏览效果为:

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

来源:http://www.tulaoshi.com/n/20160219/1624600.html

延伸阅读
标签: Web开发
    八、为网页增添互动效果 举例:如何打开一个没有工具栏的浏览窗口 在文字或图片的链接中,只要把Target设为“_blank”就可是使链接到的网页在一个新窗口中打开。但你是不是见过看到有的网页,开启的新窗口是不含工具栏,状态栏,网址栏的?这样的窗口是怎么做的呢? 先将光标选定在一个链接上(可以是图片链...
标签: Web开发
八、为网页增添互动效果 举例:如何打开一个没有工具栏的浏览窗口 在文字或图片的链接中,只要把Target设为“_blank”就可是使链接到的网页在一个新窗口中打开。但你是不是见过看到有的网页,开启的新窗口是不含工具栏,状态栏,网址栏的?这样的窗口是怎么做的呢? 先将光标选定在一个链接上(可以是图片链接,也可以是文字链...
FrontPage简明教程:网页布局 通常网页的布局使用到的是FrontPage中的表格和框架菜单栏里的命令。 表格(TABLE)是将页面中的内容以表格的形式排列,常用于单一页面内图片与文字的安排,是最常用的布局命令。 图3.1 框架(FRAMES)是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架组织页面时,每个框...
标签: Web开发
六、建立超级链接 超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系。通过点击链接,我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。 1、文字链接 在页面中选取需要建立链接的文字,如下图: 在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到...
标签: Web开发
二.XSL的转换 1.将XML转换成HTML XSL是如何将XML文档转换成HTML文件的呢?我们来看一个例子,下面是XML文档的一部分: ?xml version="1.0" encoding="ISO8859-1" ? CATALOG CD TITLEEmpire Burlesque/TITLE ARTISTBob Dylan/ARTIST COUNTRYUSA/COUNTRY COMPANYColumbia/COMPANY PRICE10.90/PRICE YEAR1985/YEAR /CD ... 然后...

经验教程

936

收藏

9
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部