开启左侧

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

[复制链接]
发表于 2012-2-5 02:13:54 | 显示全部楼层 |阅读模式
  七、网页的排版
  表格的使用
  表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平。
  点击对象面板的 ,看到如下的对话框:

1225331537.gif   ① Rows:表格的行数;Columns:表格的列数;
  ② Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比)。按像素定义的表格大小是固定的,而按百分比定义的表格,会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别;
  ③ Border:表格线的宽度;
  ④ Cell Padding:单元格间距;Cell Spacing:单元格边距。所谓的单元格,就是表格里面的每一小格。
  按照如图的设置后,就得到下面这个表格:

1225331527.gif   在表格线上点一下,可以全选整个表格,此时可在属性面板看到:

1225331519.gif   ① Rows,Cols:表格的行和列;
  ② W,H:表格的宽和高,通常情况下,我们都不会定义表格的高度;
  ③ CellPad,CellSpace:单元格间距和单元格边距;Border:表格线的宽度;
  ④ Ailgn:表格的对齐方式,可以将表格靠左(Left)、置中(Center)、靠右(Right)
  ⑤ 1225331577.gif :消除行的高度设置;
    1225331585.gif :消除列的宽度设置;
    1225331603.gif :将表格宽度的设置由百分比转换为像素;
    1225331610.gif :将表格宽度的设置由像素转换为百分比;
  ⑥ Bg Color:设置表格的背景颜色;
  ⑦ Brdr Color:设置表格线的颜色;
  ⑧ Bg Image:设置表格的背景图,如果设置了背景图,背景颜色就失效了;点击后面的公文包按钮选择背景图;
  如果我们把光标移到其中一个单元格,此时看到的属性面板又有所不同:

1225331507.gif   ① 1225331641.gif :合并单元格(之前要先选择相应的需要合并单元格);
    1225331647.gif :拆分单元格,拆分为多行或多列;
  ② Horz:单元格内部的水平对齐方式,作用与
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 02:13:56 | 显示全部楼层
1225331657.gif 类似;
    Vert:单元格内部的纵向对齐方式;
  ③ W,H:单元格的宽度与高度;
  ④ Bg:单元格背景图;
  ⑤ Bg:单元格背景颜色;
  ⑥ Brdr:单元格边框颜色。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 02:13:59 | 显示全部楼层
  七、网页的排版
  表格的使用之二
  根据上面对表格和单元格的参数,我们可以做出以下的表格:

1225331076.gif   以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并;单元格边距、单元格间距、表格线宽度都为10;表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色;
  在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是:

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

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

1225331096.gif   而实际的浏览效果为:

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

1225331112.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 02:14:02 | 显示全部楼层
  层的使用
  如果你觉得用表格对页面元素进行定位太难掌握,不妨尝试利用层(Layer)这个好东西。点击属性面板的 1225330971.gif 按钮,光标会成为一个十字,在编辑窗口上拖动,就可以创建出一个层,我们可以在层上输入绝大部分的网页元素,例如图片、文字等。层的好处是可以放置在页面的任何位置,如下图:

1225330983.gif   选择一个层后,对应的属性面板如下:

1225330994.gif   ① Layer ID:层的名称,用于识别不同的层;
  ② L,T:层的位置,L是距离页面左边界的距离,T是距离页面上边界的距离;
    W,H:层的宽和高;
  ③ Z-Index:层的Z轴顺序;
  ④ Bg Image:层的背景图;
  ⑤ Vis:层的显示状态,其中的Hidden是将层隐藏,处于不可见状态;
  ⑥ Bg Corlor:层的背景颜色;
  ⑦ Tag:层使用的代码方式,一般使用默认的DIV即可;
  ⑧ Overflow如果层里面的文字太多,或图片太大,层的大小不足以全部显示的时候,可以选择:
    visible:超出的部分照样显示;
    hidden:超出的部分隐藏;
    scrool:不管有否超出,都显示滚动条;
    auto:有超出时才出现滚动条;
  例如我们选择auto,那么以上例子中的层,在浏览时会显示为:

1225331012.gif   层的优点很明显,但缺点也同样明显,例如难以制作一个适应不同分辨率的网页;当一个页面使用了多个层后,页面的复杂程度增加而导致编辑起来非常烦琐;编辑状态与浏览状态的实际效果有相当明显的差别等。通常人们是采用利用Layer进行排版,然后将层转换为表格的做法(Modefy > Convert > Layers to Table),具体操作在此就不多加叙述,大家可自己尝试一下。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 02:14:08 | 显示全部楼层
七、网页的排版
  新增的排版功能
  前面之所以以将图层与表格互换的功能一笔带过,是因为在DW4,推出了一个新的Layout排版功能,能够更加直接方便地对页面布局进行编排。在对象面板的最下方有四个按钮:

1225330455.gif   标准视图(Standard View):默认状态下的视图;
  排版视图(Layout View):转入排版视图,就是这次要介绍的功能;
  按下 按钮后,上面的Layout的两个按钮就可以使用了:
  表格排版(LayOut Table):象画图一样在页面里面排版表格;
  单元格排版(LayOut Cell):在表格中画单元格。
  现在我们尝试利用以上的工具排版一个新页面: 新建一个页面,点 进入排版视图,点 在页面上画出表格,再点 ,在表格中画出单元格,其中表格会以绿色框表示,单元格会以蓝色表示,未确定的单元格会以灰色表示,如下图:

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

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

1225330409.gif   Make Column AutoStretch:列自动伸缩,就是表格可以按照屏幕比例来自动调整宽度,相当于将表格的宽度定义为百分比。
  Add Spacer image/Remove Spacer Images:增加/移去透明图片。透明图片的作用就是撑住表格的宽度。
  Clear cell Heights:清除单元格高度。
  以下,就是goEway.com利用在利用Layout功能进行页面排版的情景,与标准视图相比,就直观得多了。

1225330398.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-5 02:14:09 | 显示全部楼层
今天 帖子 怪多来
当家的 把你 那 宝贝 传给我 吧
、我也想 要啊
改天 打包 传给我算了 我改天请你吃大餐 O(∩_∩)O~
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 02:14:11 | 显示全部楼层
帮你打包就行 titter.gif
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表