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

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

今天图老师小编要向大家分享个Dreamweaver4简明教程(七、网页的排版4)教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

七、网页的排版

  新增的排版功能

  前面之所以以将图层与表格互换的功能一笔带过,是因为在DW4,推出了一个新的Layout排版功能,能够更加直接方便地对页面布局进行编排。在对象面板的最下方有四个按钮:

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

   标准视图(Standard View):默认状态下的视图;

   排版视图(Layout View):转入排版视图,就是这次要介绍的功能;

  按下  按钮后,上面的Layout的两个按钮就可以使用了:

   表格排版(LayOut Table):象画图一样在页面里面排版表格;

   单元格排版(LayOut Cell):在表格中画单元格。

  现在我们尝试利用以上的工具排版一个新页面: 新建一个页面,点  进入排版视图,点  在页面上画出表格,再点  ,在表格中画出单元格,其中表格会以绿色框表示,单元格会以蓝色表示,未确定的单元格会以灰色表示,如下图:

  在这里,每一个表格,单元格的大小都可以随意的调整。最后后点 回到标准视图,你会发现,刚才画的“Layout Table”已经全部转化为表格了。如下图:

 另外,在排版视图上的表格上有一个数字,表示的是表格的宽度,单击数字,可以看到以下菜单:

  Make Column AutoStretch:列自动伸缩,就是表格可以按照屏幕比例来自动调整宽度,相当于将表格的宽度定义为百分比。

  Add Spacer image/Remove Spacer Images:增加/移去透明图片。透明图片的作用就是撑住表格的宽度。

  Clear cell Heights:清除单元格高度。

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

  以下,就是goEway.com利用在利用Layout功能进行页面排版的情景,与标准视图相比,就直观得多了。

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

延伸阅读
标签: Web开发
八、为网页增添互动效果 制作更复杂的互动效果 在Dreamweaver中,更复杂的效果是通过一个叫Behaviors的功能实现的,Behaviors的从字面上理解是“行为”,我们又称为事件的响应。通过网页元素的变化,如鼠标的移动、点击等“事件” (Events),触发弹出窗口,关闭页面等“响应”(Actions),就是一个事件的响应。而值得高兴的是,...
标签: Web开发
    八、为网页增添互动效果 举例:如何打开一个没有工具栏的浏览窗口 在文字或图片的链接中,只要把Target设为“_blank”就可是使链接到的网页在一个新窗口中打开。但你是不是见过看到有的网页,开启的新窗口是不含工具栏,状态栏,网址栏的?这样的窗口是怎么做的呢? 先将光标选定在一个链接上(可以是图片链...
标签: Web开发
六、建立超级链接 超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系。通过点击链接,我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。 1、文字链接 在页面中选取需要建立链接的文字,如下图: 在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到...
FrontPage简明教程:网页布局 通常网页的布局使用到的是FrontPage中的表格和框架菜单栏里的命令。 表格(TABLE)是将页面中的内容以表格的形式排列,常用于单一页面内图片与文字的安排,是最常用的布局命令。 图3.1 框架(FRAMES)是在同一浏览器窗口中显示多个相互隔离的HTML页的结构。使用框架组织页面时,每个框...
标签: Web开发
    对于网页设计者来说,总是想把网页制作得更漂亮、更有动感,具有自己鲜明的特色,以便在众多的网站中脱R颖而出,吸引大家的注意力。然而各种特效往往是新技术运用的结果,对于初学者来说,让他们专门学习这些新技术,往往是不现实的,难道他们就无法设计出精美的网页吗?不,只要拥有了Dreamweaver 4,你就无需顾虑设计不出...

经验教程

782

收藏

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