Dreamweaver提供的尺规与格线，可将网页的空间以精准的座标位置与经纬线表现出来，用来帮助网页内容的版面编排。

　　一般而言，我们多是以设定文字或物件在段落中的对齐方式，或是设定垂直/水平间距，来控制其在网页中的位置，不过这有一个缺点，就是无法直接精准的定位文字与物件在网页中的座标位置。

　　若想要精准定位网页中的元件，就必须要使用Layer。Layer很像是Word中的图文框，我们可以将文字、物件等网页内容放置在Layer中，而Layer则可以任意摆放在网页的任何位置，也就是可以精准的定位Layer的座标位置，如此网页的版面编排就更具弹性，也更接近平面排版的味道。（有关于Layer的介绍，可参考我们陆续推出的说明。）

使用尺规

　　勾选[View/Rulers/Show]命令，即可显示了Ruler（尺规）。相对地，取消勾选即隐藏尺规。

　　尺规的单位有像素、英寸、公分三种选择，在[View/Rulers]的次功能中勾选所要的单位即可（或是在尺规上按右钮勾选）。在网页环境中建议使用Pixels（像素）为单位。

　　另外，为了配合使用者不同的习惯，尺规的原点是可以改变的：

当尺规原点改变时，并不会影响Layer的定位，即Layer在Properties面板中的Left与Top栏位中的数值不会改变，一律以网页左上角为原点来定位。

使用格线

　　勾选[View/Grid/Show]命令，即可显示格线，若取消勾选即是隐藏格线。

1）网页内容贴紧网页边缘

　　当格线显示出来时，很明显可以看出网页内的左边界与上边界并没有紧靠网页边缘，若希望网页内容贴在网页边缘，只要在网页属性中设定左边界与上边界为0即可（在Page Properties交谈窗中设定，请参阅第5章说明）：

使用吸附功能

　　另外还有一项Snap To吸附功能，可以让Layer以固定距离来移动。吸附功能可以配合格线来使用，如此对齐Layer就快速又容易了。勾选[View/Grid/Snap To]命令即可启动吸附功能。

　　吸附功能是以格线左上角为原点，让Layer以固定的距离移动。所以启动吸附功能之后，移动Layer时，一次会移动5 Pixels（预设的移动距离是5 Pixles）。由于预设的移动距离是5 Pixles，而格线的预设间距则刚好是50 Pixels，因此Layer刚好可以吸附在格线上。如此一来只要将Layer拉曳贴齐格线，Layer间就很容易彼此封齐了。

设定格线与吸附功能

　　格线的间格与色彩，以及吸附功能移动的距离等等，可以执行[View/Grid/Setting]命令，在Grid Setting交谈窗中设定。

　● 使用蓝图与样板　　

　　在网页平面设计制作阶段，美术人员运用影像处理软体如Fireworks，Photoshop或是绘图软体如Freehand、Illustrator制作出网页的面貌之后，再依据网页制作需求，切割抽离出背景图、小图等网页元件交给网页制作人员。为了让图片等网页元件在网页中的位置能够与最初的平面设计吻合，可以运用Dreamweaver的Tracing Image功能，将网页平面设计图稿衬在网页底下，如此网页元件时就可以按设计图来对位摆放，不必费神计算座标位置了。

　　当然，网页元件若要能随意摆放在网页中，必须放在Layer之中才能作到。

　　我们将作为Tracing Image的图片，称作网页蓝图。在左方页网页（Left.htm)中，就是运用网页蓝图来对齐Layer的，请看下面示范。

1、执行[Modify/Page Properties]命令。

2、将内有超连结图片的Layer一一对准着网页蓝图上的图案位置拉曳过去。

3、若要确定是否对齐了网页蓝图中的图案，可以将网页中的Layer不断切换其显示及隐藏状态，用[眼睛]来判断是否对齐。

4、完成网页蓝图的对位工作之后，取消勾选[View/Tracing Image/Show]命令，即可隐藏网页蓝图，观看网页实际的面貌。

调整网页蓝图的位置

　　你可以执行[View/Tracing Image/Adjust Position]命令调整网页蓝图在网页上的位置：

　　若网页蓝图要回复在网页左上角的位置，执行[View/Tracing Image/Reset Position]命令即可。

　　Dreamweaver在网页排版上独步武林的功能，则非Templates（样板）功能莫属。Dreamweaver的样板功能拥有如平面印刷排版软体，例如PageMaker的主板一般优异的功能，其优点如下：

　　·需要经常或者大量制作同样面貌的网页时，如定期更新的电子报，你可以建立网页固定出现的部分，如背景、标题、表格等，然后存成样板，往后新增网页时就由样板来产生页面，所新增的网页就会呈现出样板中的元素，让网页拥有一致的面貌，而你只要填上更新的内容即可。

　　·你可以在样板中设定好可编辑与不可编辑的区域，那么套用样板的网页就只有可编辑区是可以填上内容的，不可编辑区域就不用担心会更动到，简化了网页制作复杂度。

　　·当样板更新时，所有套用样板的网页也会一同更新，提高网页制作效率。

　　Dreamweaver的样板功能让制作大型网站，或是经常性更新内容的网站变得有效率而且容易。本书范例网站中的卡片类、封面类网页等显示各分类作品的网页，就是套用样板来制作，现在就来看看样板可以增加多少网页制作效率。

建立样板

　　我们要直接将已完成的卡片类网页（Cards.htm）建立成样板，将来封面类、插画类、Flash效果类、网页效果类、平面设计网页类网页都可以直接套用此样板来产生。

1、执行[File/Save as Templates]命令，将卡片类网页（Cards.htm）储存成样板。

2、接下来是设定网页套用样板后的可编辑区域。

　　套用样板有两种方式，一是将已有的网页套上样板，二是直接依照样板来新增网页。

已有的网页套上样板

　　我们要套用display.dwt样板到封面类、插画类、Flash效果类、平面设计网页类、网页效果类网页上，下面以套用到封面类网页（covers.htm）来示范。

依照样板来新增网页

　　执行[File/New from Template]命令即可直接新增一个套用了样板的网页

　　样板还可以随意的更新，因为Dreamweaver会自动将所有套用样板的网页也一并更新，决不会耽误宝贵的时间。

　　我们要在display.dwt样板中增加一个Library元件。

1、开启display.dwt样板档案

2、在display.dwt样板中加入Library元件。

3、修改完成立即存档，这时Dreamweaver会请你更新套用样板的网页。