阿飙专线Dreamweaver直通车──页面设计
#1?牐犚弧⑸瓒ň返墓ぷ骰肪?
?牐牰杂谏杓剖?来说，精确的元素定位是首要的条件，在Dreamweaver中有多个有助于精确定位的功能，利用这些工具我们可以在灵活性与精确性之间运用自如。
?牐?1.网格（Grid）:网格对设计师来说不会陌生，各种图像处理和制作软件都有此项功能，这是页面元素精确定位的基础，通过设定一定数值的网格，可以使页面元素有规则的排列。选择“查看\网格\编辑网格”，可以设定自己需要的网格大小，也可以改变网格显示为点状显示，还可以设定将层吸附到网格（^45040701a^1）。
?牐?2.标尺（Rule）:标尺是设计师良好的参考工具。它在页面的上方和左方显示，单位可以是像素，英寸或厘米。通常我们用它作为页面元素定位的参考坐标，默认的原点在页面的左上角，我们可以拖动网格原点到页面的任何位置（^45040701b^2）：
?牐犎粢慊乖皆吹奈恢茫≡瘛安榭碶标尺\重设原点”即可。
?牐?3.页面边空:默认状态下，页面内容和页面边框之间空着大约10个像素的距离，我们需要在页面属性中设定这个间距为0。点击右键选择页面属性，将其中的left和top值修改为0。
#1?牐牰⒚枘⊥枷?
?牐犐瓒ê靡陨系墓ぷ骰肪澈螅涂梢钥嘉颐堑墓ぷ髁恕ＭǔＩ杓剖Χ际窃谕枷翊?理软件里做好他们的设计稿，在Dreamweaver中设计师不需从一张白纸继续他们的工作。利用Dreamweaver中的描摹图像功能，我们可以在设计稿的基础上开始页面制作，这个图片只是一个制作过程中的参考，并不会在最终的页面中出现。
?牐?1.使用描摹图像。选择View\Tracing Image\Load载入描摹图像，选择你希望载入作为描摹图像的设计稿，程序会自动打开页面属性面版，在这里你可以设定这个描摹图像的透明度（^45040701c^3）。
?牐?2.控制描摹图像显示。选择View\Tracing Image\Show可以在显示和隐藏描摹图之间切换。
?牐?3.改变描摹图像的位置。有时我们需要对描摹图像位置进行细微的调整，可以通过View\Tracing Image\Adjust Position命令设置描摹图像与原点的偏移值。
?牐犆枘⊥枷竦墓δ懿唤鼋鍪嵌哉鲆趁媸褂妹枘⊥迹颐且部梢远缘ザ赖囊桓鲆趁婢植渴褂茫缍砸桓霰砀袷褂靡徽诺ザ赖拿枘⊥迹紫任颐墙桓鲂〉拿枘⊥荚厝氲鼻耙趁妫缓笱《ㄐ枰褂妹枘⊥嫉囊桓鼍植浚缫桓霰砀瘢缓笾葱蠽iew\Tracing Image\Align With Selection即可将描摹图像的原点对齐到表格的左上角（^45040701d^4）。
?牐牻枘⊥级ê梦恢煤螅颐蔷涂梢哉兆琶枘⊥祭窗才盼颐堑囊趁嬖亍?
#1?牐犎⑹褂蒙杓剖油迹↙ayout View）进行设计
?牐犜贒reamweaver的旧版本中，我们除了利用表格进行页面布局，利用描摹图像进行辅助外，也可以直接用层进行布局，最后再将层转换为表格来满足各种浏览器，但这种方法一直不太便利，而且也不太严谨，在Dreamweaver4中，新增了一个功能:Layout View，此功能可以使我们的页面转换到一个设计视图中，并利用新的布局单元随意的布置页面元素。
?牐犜谡飧鲂碌纳杓剖油贾校颐强梢运嬉獾幕嬷撇季值ピ虿季直砀瘢谡庑┑ピ性侔凑瘴颐堑男枰迦胂嘤Φ囊趁嬖囟庑┎季值ピ诓迦牒蠡箍梢运嬉庖贫彼性囟挤胖迷诤鲜实奈恢煤螅颐强梢郧谢换乇曜际油迹械哪谌荻几髯宰楹显诓煌谋砀裰校╚45040701e^5）。
?牐犜谏杓剖油贾薪泄ぷ饔辛街植季址绞剑恢质谴硬季值ピ迹硪恢质谴硬季直砀窨迹堑墓ぷ鞣绞缴杂胁煌旅嫖依捶直鸾樯堋?
#2?牐?1.从布局单元开始
?牐牐?1）绘制布局单元。当我们打开设计视图时，可以直接在上面绘制布局单元，当我们绘制了第一个布局单元时，Dreamweaver会将整个当前文档空间作为一个布局表格，并在页面的左上角显示Layout Table标签（^45040701f^6）。
?牐牐?2）修改布局单元。蓝色高亮显示的就是布局单元，此布局单元可以随意移动，并可以通过鼠标拖动控制手柄来随意改变大小，也可以先选中布局单元，再在属性面板直接输入相应的数值来改变大小和位置。
?牐牐?3）移动布局单元。将鼠标放置在布局单元的边线上方，可以拖动布局单元到新的位置（^45040701g^7）。
?牐牐?4）添加内容。布局单元放置好位置后，我们就可以在中间放置我们各种页面元素。此时我们可以切换到标准视图看一下，发现Dreamweaver自动将布局单元转换为相应大小的一个表格。
#2?牐?2.从布局表格开始
?牐犜谏厦嬲庵址椒ㄖ校颐强吹紻reamweaver将整个文档作为一个大的容器，各个布局单元分别放置在合适的位置。而最终转换到标准视图时，这些布局单元都是一个大表格中的单元格。这样并不利于页面浏览时的速度，我们还可以通过另一个途径来实现这个目的，这就是从布局表格开始，逐步细化到布局单元。
?牐牐?1）绘制布局表格。我们可以根据页面内容将页面分为从上到下不同的多个布局表格，而且只能是从上到下平行排列的多个布局表格，不能从左往右排列。
?牐牐?2）插入布局单元。布局表格放好后，就可以在每个布局表格中分别放置各自的布局单元格（最后效果见^45040701h^8）。
?牐牐?3）嵌套布局表格。在设计视图中我们也可以方便的插入嵌套布局表格。首先我们需要明白，嵌套表格只能存在于未放置布局单元的布局表格空间中，从页面上来看，当插入一个布局表格时，Dreamweaver会以一种浅灰色表示布局表格的范围，而当插入一个布局单元时，这部分布局表格的空间会变为白色。明白了这一点就可以方便的绘制了，用布局表格工具在已有的灰色布局表格区域拖动，即可绘制出另一个嵌套的布局表格。在这个嵌套的布局表格中同样可以继续绘制布局单元，当我们切换到标准视图时就会发现这个区域是两层互相嵌套的表格。
?牐牐?4）取消嵌套表格。有时我们绘制了一些嵌套布局表格并插入了许多内容后，想取消这种嵌套关系，而将它们变为同一个布局表格中的内容。这需要先选中内部的嵌套表格，打开属性面版，点击Remove Nesting命令取消嵌套关系，但原有的内容并不会丢失，而是在原位转换为上一个布局表格中的一部分。
#2?牐?3.设计视图进阶应用
?牐牻樯芡瓴季质油贾械幕臼褂梅椒ê螅颐窃倮纯纯床季质油家桓鲋匾挠猛荆瓷杓瓶衫┱沟囊趁娼峁梗簿褪强梢运孀配榔鞣直媛首远谋浯笮〉慕峁埂?
?牐牐?1）改变布局表格为可伸缩。选中布局表格后打开属性面板，在Width（宽度）一项里选择Autostretch（自动伸展），Dreamweaver会有三种选择方法来继续下一步的操作，你可以选择新建一个空白图片或选择已有的一个图片或不使用空白图片来生成伸缩性布局表格，这个空白图片将在当前布局表格的下方新增一行，以此固定最左方的单元宽度为固定值，而右方的单元将会自动扩展到浏览器边缘。此时使用了透明图片固定的一列会标示出来（^45040701i^9）。
?牐牐?2）改变布局单元为可扩展。在布局表格的上方显示了每列布局单元格的宽度，我们可以点击其中一列的数值从弹出菜单中选择Make Column Autostretch将此列转换为自动扩展的，Dreamweaver会以一段波浪线表示此列，如^45040701j^10。
?牐牐?3）创建可伸缩页面。上面两种做法掌握后我们就可以制作可伸缩的页面了。通常我们会将需要固定宽度的表格列先设定好相应的固定值，然后将剩余不需特定数值的表格列设定为可扩展值（^45040701k^11）。我们看下面两种情况:
?牐牬吮砀裎笥医峁梗蟊叩牧猩瓒ㄎ潭?宽度值，右边的列设定为可扩展值（^45040701l^12）。
?牐牬吮砀裎笾杏医峁梗蟊吆陀冶呶潭?宽度列，中部列为可扩展宽度列。这两种表格都实现了自动适应浏览器分辨率。
?牐牐?4）编辑可扩展单元。对已经转换为可扩展的单元，我们还可以再将它转换为固定宽度，也可以将所有支撑表格宽度的透明图片取消，这两个命令可以从单元格上方的下拉菜单里找到（^45040701m^13）。有时由于我们来回修改布局表格，会使得一些单元的宽度值与实际值不同，这时会在单元的标示位置出现两个数值（^45040701n^14）。
?牐犖颐强梢缘慊鞔舜Υ拥霾说ダ镅≡馦ake Cell Widths Consistent，使得此单元的宽度值统一。
#2?牐?4.交互在两种视图中工作
?牐犐厦嫖颐墙樯芰嗽谏杓剖油贾薪幸趁娌季值牟街韬头椒ǎ枰⒁獾氖牵杓剖油贾杏行矶嘣厥粜圆⒉荒苤苯由瓒ê托薷模耸蔽颐强梢宰坏奖曜际油贾邪闯９娣绞缴瓒ㄕ庑┦粜灾担偎媸鼻谢换厣杓剖油迹街智榭龇浅＜嫒荩换岢鱿秩魏尾皇视Φ谋浠?
?牐牭秸饫镂颐墙樯芰松杓剖油贾械幕竟ぷ鞣椒ǎ釉谇懊嬉呀樯芰吮砀癫季址椒ㄖ庠俑蠹医樯苷庵址椒ǎ皇俏烁愦蟮纳杓剖μ峁┝硪桓龉ぷ鞯慕缑婧头绞剑豢煞袢希饬街止ぷ鞣绞礁饔杏湃钡悖劣诰咛迨褂媚闹址绞剑耆梢愿葑约旱南肮呃淳龆ā５嵌嗵醯缆范喔鲅≡瘢嘈哦嗾莆找恢址椒?可以给你更多更好的选择，也相信一定会有一种方法能适合你。朋友们有什么问题，可以到http://www.blueidea.com提出讨论。
#1 技巧提示:
#2?牐?1.快速改变视图辅助参数
?牐犖颐蔷Ｐ枰赝裣允尽⒖乇瓿呦允尽⒖孛枘⊥枷裣允荆耸辈恍枰艽酉吕说ブ葱姓饧柑趺睿诠ぷ鞔翱诘淖钌戏接幸桓隹焖倏爻＜油疾僮鞯陌磁ィ谡饫锟梢愿谋涑Ｓ玫氖油几ㄖ问?
#2?牐?2.快速居中对齐布局表格
?牐犜谏杓剖油贾校颐谴唇ǖ牟季直砀衲隙际蔷嘁趁孀蟊叩模獬：臀颐切枰木又蟹胖貌环颐峭ǔ６际乔谢坏奖曜际油祭锤谋湔飧錾柚谩Ｆ涫滴颐强梢匝《ㄕ飧霾季直砀瘢础癈trl+T”打开快速标签编辑窗口，直接输入Align=“center”，则此布局表格自动居中布置。
#2?牐?3.连续绘制多个布局单元。
有时我们需要不停地点击Object面板上的布局单元按钮，绘制多个布局单元，这样很繁琐。其实我们可以按住Ctrl健，就可以连续绘制多个布局单元。