接触DW4的网页排版—Layout

　　网页排版是网页制作的一项很重要的工作，他往往决定着网页设计的成败，不知有多少人为此花费了大量的精力。Dreamweaver4的设计大师们真是急人之所急，在Dreamweaver4中首创了一个革命性的功能—Layout!他使我们从繁杂的劳动中解放出来，把更多的精力放在网页的设计创意中去。Layout能够方便地在一个空白页面上随心所欲地画版，并能自动转换为表格，且可创建一个1*1的透明图象，加载到表格中,以定死单元格的宽度，他会自动根据单元格的宽度来改变图象的宽度，这一切，您只是点点鼠标而已，实在是有点玄乎，不信！跟我试试：
　　1、打开Dreamweaver4，可看到他的对象面板比Dreamweaver3的对象面板增加一些内容，比较明显的是下半部多出了一截，如下图所示：

　　图1 Dremweaver4对象面板

　　2、上边的对象面板上半部分似乎和Dreamweaver3没有什么区别，实际上也增加了一些东东，今天暂不讲这些，下半部分多了一个“Layout”（网页排版）栏，包括两个按钮，可看出现在不起作用，看起来象蒙了一层纱，待一下我将掀起他的盖头来作周详介绍。再往下是“Viem”（视图）栏，其中是标准视图Standard View：也就是默认状态下的视图。我们主要就是在这个状态下编辑网页；是Layout View，排版视图也就是我要讲的主要内容。
　　3、我们按下LayOut View按钮，上面的Layout栏里的两个按钮的面纱被揭去，就能够使用他们了。如下图所示：


　　4、先看：LayOut Table 排版表格，实际上就是画表格，和DW3的1*1表格类似。您能够象切图相同在页面上面画上排版表格，这是个大体的页面布局框架。
　　5、页面的排版光有几大块是不够的，要进行细分就得用另一个按钮：Layout Cell 排版单元格，用他您能够在表格中画上单元格。这个功能比原来表格中的单元格要强多了，虽然在原理上仍然是表格的单元格，但他加了一个自动增加匹配单元格的功能，因此使得可对单个单元格进行操作，以达到能够随意定义单个单元格的大小而不用顾及会影响到周围的单元格。他是通过自动增加单元格来和周围单元格在长、宽上匹配的。这给我们减少了不少合并、拆分单元格的操作。一个简单网面页的排版视图如下图所示。



　　6、每个排版表格的左上角都有一个“Layout Table”标签，绿色边框是表格；表格中白色的是单元格，灰色部分是空白区，画单元格只能在空白区画；已画好的单元格能够用鼠标拖动他的边框改变长和宽，在其长宽改变时不影响周边的单元格，这是和在标准视图下的表格不同的。
　　7、每列单元格的宽度都在表格的顶部标出来，一目了然。在表示单元格宽度数字的边上有一个小三角形按钮，按下后将弹出一个菜单，如下图所示：


　　上图各菜单项的含义是：
　　Make Column AutoStretch：列自动伸缩。就是表格能够按照屏幕比例来自动调整宽度。好比是表格的宽度定义为百分比。
　　Add Spacer image：增加透明图片。透明图片的作用就是撑住表格的宽度。这是我们惯用的办法，在这里点一下鼠标就完成了。
　　Remove All Spacer Images：移去任何透明图片。
　　Clear cell Heights清除单元格高度。
　　8、在排版结束后，点一下对象面板上的“Standard View”，就又回到了网页编辑状态，我们设计好的排版格式就变成了表格，如下图所示：


　　在编辑网页的过程中，若感到需要改变版面，只要点一下“Layout View”按钮，就能够修改版式面了，很方便。由于我们加上了透明图片来确定单元格的大小，因此就能够任何单元格的宽度定义，以减少代码的数量。我感到这是使用这个功能比较突出的好处。把繁杂的排版工作变为随手画版，这对高手来说是无所谓的，但对一般的网页制作者确是个福音。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有