阿飙专线Dreamweaver直通车──网页布局
#1?牐犚弧⒄莆毡砀?
?牐牨砀穸悦扛鋈死此刀际呛苋菀桌斫獾模擞们〉薄⒑侠怼⒏挥谥刃蛐裕春孟癫皇呛芗虻ィ芏嗯笥驯г笵reamweaver的表格不如Frontpage操作简单、易用。其实，这里面主要的一个原因是设计者缺乏整体的布局观，如果我们在刚开始就将要实现的布局在头脑里考虑一遍，下手的时候你会觉得非常容易的。就软件来说，每个软件都有各自的操作特点，一旦你理解了软件的工作方式，你自然会将它运用得得心应手些。我们以一个常见的网页结构为例介绍表格布局，此页面由顶部的Logo和Banner区，导航菜单区，页面内容区，底部版权区组成，如图1所示。
#2?牐?1.布局方法
?牐犛捎阡榔飨允疽趁婺谌菔笔窍略赝暌桓鐾暾谋砀窈蟛畔允敬吮砀裰械乃心谌荩虼宋颐怯?尽可能将表格分为多个各自独立的表格，这样可以加快显示速度，而不应将所有的页面内容都放置在一个大表格中。根据^43040702a^1所示，我们将我们的页面从上向下分为四个表格。
#2?牐?2.属性面板
?牐牬蚩狾bject面板，点击表格图标插入一个表格，根据需要我们插入一个单行双列的表格，宽度设为780。下面我们打开表格的属性面板，修改表格的各个参数如^43040702b^2所示：
?牐犑粜悦姘宓母飨畈问柚帽冉霞虻ィ赜谇宄ピ袷档挠梅ㄎ以诤竺婊峤樯堋Ｎ抑皇翘嵝汛蠹乙欢ㄒ厥覥ellPad和CellSpace的设置和作用，CellPad（单元格填充值），表示单元格的边框和它里面内容之间的空白；CellSpace（单元格间距值），表示单元格和单元格之间的距离。这两个值如果充分理解了，不仅可以实现单像素的边框，而且可以使你的页面内容布局更加丰富多彩，大家可以多试着练习一下这两个值的变化。如^43040702c^3，我们设定了顶部Logo和Banner所在表格的CellPad为10、CellSpace为0。
#2?牐?3.修改表格
（1）插入的默认表格我们还需要对它进行各种修改、合并、拆分，才能满足复杂页面的布局需要。如果你熟悉Word软件的用法，可以像操作Word表格一样进行表格的修改，在Dreamweaver中你可以对整个表格、单行、单列、多行、多列（相邻或相隔）、单个单元格、多个单元格（相邻或相隔）进行操作，例如设置多个选择范围的属性、复制多个单元格的内容、清除多个选择区的内容等等，你可以使用Ctrl、Shift键实现多个单元的选择，也可以用鼠标拖动选择多个单元格，如^43040702d^4所示。
（2）单元格之间的内容可以互相复制和移动，选定一个单元格中的内容，按住Ctrl键的同时拖动到另一单元格，即可将其复制过去。也可以一次选定多个单元格通过复制粘贴将其复制到相同布局的一组单元格中，但必须是布局相同的，例如将一组2×2单元的内容复制到另一组2×2单元组中，如^43040702e^5所示。
#2?牐?4.修改多个属性
?牐牭惫獗甓ㄎ辉诘ピ裰惺保颐强匆幌麓耸钡氖粜悦姘濉?
?牐犝饫锩嫘枰莆盏闹饕遣鸱趾投云胧粜浴Ｎ颐强梢越鼻暗牡ピ窠胁鸱郑部裳≡穸喔龅ピ窠泻喜ⅲ鏭43040702f^6所示。还可以设定多个单元格内容的对齐方式，朋友们最好使用对齐选项中的Horz（水平）和Vert（垂直）下拉框设定对齐方式，而少用右上角的对齐方式，因为那将增加一个<div>标签，这样可以减少源代码的数量。还有一点要注意的是尽量事先计划好表格的结构，避免反复多次的拆分和合并表格，这样会将表格变得复杂，给以后的工作造成很多麻烦。
#2?牐?5.嵌套表格
?牐犛捎谖颐前驯砀裰饕弊饕恢植季止ぞ撸虼硕砸恍┏９娴谋砀袷粜圆⑽醋飨晗附樯埽绫砀癖呖颉⒈砀裆省⒈砀癖尘暗鹊龋笥芽勺约毫废耙幌隆Ｎ寺阄颐且趁娴男枰颐浅３Ｐ枰斜砀袂短祝斜砀袂短字恍杞獗甓ㄎ辉谝桓竦ピ裰校缓蟛迦胍桓鲂碌谋砀窦纯伞Ｗ艿睦此登短妆砀窨梢宰畲蟪潭鹊芈阋趁娌季值囊螅鏭43040702g^7所示：
?牐牭潜砀竦那短滓灿幸恍┎焕蛩兀绻嗟那短子跋熹榔鞯慕馕觯跋煲趁娴南允舅俣龋虼私ㄒ楸砀竦那短撞灰?3层。在开始嵌套表格前最好计划好，避免反复的合并拆分、嵌套、取消，尽量少拖动表格来确定表格的大小，多注意底部标示选择器的标签状态，这样可以准确选择需要的单元格。
#1?牐牰⑸朴每蚣?
?牐牻樯芡瓯砀裎颐窃倮纯纯戳硪恢种饕牟季址绞剑饩褪强蚣芙峁笷rame。也许很多朋友已经注意到我们站点页面通常具有一个统一的外观，一些基本的导航菜单和网站Logo、Banner并不会在每个页面发生变动，页面中变化的只是一些具体的内容。针对这种情况，我们可以使用框架结构来将不变的导航放入一个页面，而将变化的内容放入各自的页面，再将这两部分组合起来即构成了框架结构外观。
#2?牐?1.创建框架结构
?牐牸热晃颐且丫揽蚣芙峁故怯梢恍┑ザ赖囊趁孀槌桑诖唇?框架结构页面前，最好先将组成词框架结构的各个单独页面做好，你也可以在Site（站点管理器）窗口中先生成需要的各个空白页面，例如顶部的导航页面Top.html，下部左侧的Left.htm和下部右面的Main.htm，这在前面的站点部分我们已经介绍过。在Dreamweaver4的Object面板中新增了Frames面板，如^43040702h^8所示。我们可以利用此工具方便快捷地创造框架页面集。
?牐牬蚩狹ain.htm页面，点击框架面板的“插入框架”图标，可在当前页面的左边和上边增加相应的框架集页面。此时需要打开Windows—>Frames，在此框架窗口可以统览整个框架集的组成情况。首先我们需要制定框架集的各个组成页面，用鼠标点击其中的一个组成部分，例如MainFrame，如^43040702i^9所示。在属性面板中的Src部分指定此页面是调用的Main.htm页面，顶部的topFrame是调用的Top.htm页面，左侧的LeftFrame是调用的Left.htm页面。此时属性面板中显示的各个页面的路径是类似file:///F/ExampleSite/main.htm形式，这时需要用鼠标在Frame面板中选定最外端的边框，然后执行File→Save Frameset将此框架页面命名保存
#2?牐?2.设定框架属性
?牐牨３挚蚣苊姘宓淖钔舛吮呖虮谎《ǎ蚩蚣苁粜悦姘澹谡饫锷瓒?框架的基本属性，如^43040702j^10所示。
?牐犛檬蟊暝谟也嘌《?框架中的一个组成部分，然后在左侧设定此部分在整个框架集中所占的高度Row为80pix，此部分不使用边框Borders-No。接下来将其余两部分的框架参数设定完成，记住首先需要在框架面板中选定对应的框架边框才可以。设定完框架集的属性后，在Frames面板点击其中一个框架页面，再来看看属性面板，如^43040702k^11所示。
?牐犖颐侵饕枰瓒⊿croll：滚动条是否出现；No Resize：框架尺寸是否可以在浏览时调整；Margin Width/Margin Height：框架边与内容之间所预留的间隔大小；FrameName：设定框架页的名称，这将在以后的文件之间互相链接时用到；Borders：设定当前框架是否出现边框。
#2?牐?3.设定框架集页面之间的互链
?牐牽蚣芤趁娴闹饕猛揪褪怯糜诘己剑勒叩慊饕桓隽唇邮保喙氐哪谌菀郴嵩诹硪桓隹蚣苤邢允境隼矗馄涫稻褪俏唇又付?了一个目标框架窗口。通过前面我们定义的框架的名称属性，我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个内容页到指定框架的链接，可以按照如下步骤：
?牐牐?1）选择链接文字或图片，如我们在顶端框架页中输入About Me文字。
?牐牐?2）选定这个文字内容，打开属性面板，在链接地址中（Link），输入相应的地址About.htm。在Target下拉框选择需要的窗口名称，如^43040702l^12所示。
?牐犝饫锵允镜氖堑鼻耙趁嫠拇翱谝约癉reamweaver预设的四个窗口名称，_blank：此选项将使链接在新窗口打开。_parent：此选项将使链接在当前窗口的上一级窗口打开。_self：此选项将使链接在本身所在的窗口打开。_top：此选项将使链接在整个框架集的最外端窗口打开。mainFrame：我们前面为右边窗口设定的名称，选择此项文档将在此窗口中打开。leftFrame：我们前面为左边窗口设定的名称。topFrame：我们前面为顶端窗口设定的名称。
?牐牐?3）在浏览器中浏览时，当点击About栏目后，相应的栏目内容将在右下方的MainFrame窗口打开。
#1?牐犎⒈酒诩记商崾?
?牐牴赜谝趁娌季值闹饕谌菥褪钦庑?，但是实际操作中肯定还会遇到很多问题，学习没有什么捷径，只有实践、实践再实践。朋友们有什么疑问可以到http://www.blueidea.com/bbs提出并讨论，下面我再总结几个页面布局阶段有用的技巧。
#2?牐?1.精确定位页面元素
?牐牳愎杓频呐笥讯继乇鹣Ｍ芫范ㄎ煌吃兀窍不睹扛鲈囟寄馨醋约旱脑竿范ㄎ弧?Dreamweaver自带的Grid功能可以有助于这种希望的实现。执行命令View—Edit Grid打开坐标辅助，可以选择网格状或者是点状显示，同时打开Snap to Grid，此后在插入或添加新的元素时，都会按你的设定精确定位。
#2?牐?2.表格的技巧
?牐牐?1）创建一个像素边框。有些朋友抱怨Dreamweaver无法做出单像素的表格边框，其实仔细利用表格的属性面板即可做出这种单像素表格。首先使用Object面板插入一个表格，定义表格宽、高及行数和列数。此时表格的默认CellPad和CellSpace、Border都为0。在属性面板中定义表格的Border为0，CellPad为5（这项可使单元格中的内容与单元格边缘之间保持5个像素）；CellSpace为1（此项使得单元格之间保持1个像素的间距）。设置表格的背景色为深色（如#999999），设置每一个单元格的背景色为浅色（如#FFFFFF）。在浏览器中观察效果即可。
?牐牐?2）导入数据表格。有时我们需要将一些在Execel文件中创建的表格导入Dreamweaver中，可以先将原来的Execel文件另存为带制表符分隔的.txt文本文件。在Dreamweaver中执行Insert→Tabular Date（见^43040702m^13）。
?牐牪问蠹纯山渲械氖莸既隓reamweaver的一个表格中。
?牐牐?3）格式化表格
?牐犎绻愣灾馗瓷瓒ǜ鞲龅ピ竦牟问械窖岱车幕埃褂肍ormat Table命令可以帮你快速格式化表格，此命令在Command菜单下，此命令内带多种表格配色方案，你可以选择一种，Dreamweaver会自动将色彩方案应用到你选定的表格上。
#1?牐?3.更新多个框架页面
?牐犛惺蔽颐切枰诘慊饕桓隽唇拥耐备铝硗饬礁龌蚨喔隹蚣芤趁婺谌荩饪梢酝ü韵虏街枥词迪帧?
?牐牐?1）选择链接的文字或图片。
?牐牐?2）打开行为面板（Behaviors），点击加号添加Go to URL行为（见^43040702n^14）。
?牐牐?3）在Go to URL对话框中显示了当前已有的所有框架窗口，我们分别选定一个窗口名称，可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*” 号，表示此框架窗口已设定了URL。