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

2016-02-19 19:53 5 1 收藏

今天图老师小编给大家介绍下Dreamweaver4简明教程(七、网页的排版2),平时喜欢Dreamweaver4简明教程(七、网页的排版2)的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

七、网页的排版

  表格的使用之二

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

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

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

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

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

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

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

  而实际的浏览效果为:

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

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

延伸阅读
标签: Web开发
八、为网页增添互动效果 制作简单的互动效果 在网页上经常看到这样的效果,当鼠标移到一张图片上的时候,原来的图片就切换为另一张图片,鼠标移开后,又恢复原来的模样,是怎么做的呢?在开篇的时候,提到Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在,我们就利用Dreamweaver制作这个最...
标签: 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 ... 然后...

经验教程

671

收藏

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