网页版面设计

用户可以在浏览器中将已经制作好的 Scaal 主页打开，以便在自己操作的时候进行参考。

1	选择 File > Open，找到 Sites/Scaal_site 文件夹，选取 scaal_home.html，然后点击 Open。
2	敲击 F12，在浏览器中预览页面。
	主页出现在浏览器中。
	让浏览器窗保持开启状态，以便需要时参考。
3	点击文档窗，选择 File > Close 关闭文档。

 
添加层

层对于复杂的页面版式来讲是非常理想的辅助工具，这是因为层上的页面元素可以轻易地通过拖拽来改变其位置。通过使用层来布局页面，满意后再转换成表格，这样页面就可以在 3.0 和 4.0 版本的浏览器中精确地显示了。

如果文档中包含有嵌套层和重叠层的话就没办法转换成表格了。

1	选择 Window > Layers 打开层面板。
2	确定 Prevent Overlaps 选框被选。
3	点击文档窗，激活文档。
4	选择 Insert > Layer。
	一个层就添加到文档中了。
5	在对象面板的 Common 面板上，点击 Draw Layer 按钮。
6	移动游标到文档窗；游标会变成绘图工具。在第一层的下边，拖拽游标绘制新层。
7	重复 5 和 6，可以绘制许多新的层。
	你自己的页面要和下边的页面看上去很相似才可以。

 
选取并处理层

用户可以修改文档中层的位置和形状。

1	点击层的边框。
	被选层周围会出现句柄：
2	要改变层的大小，点击并拖拽句柄就可以改变层的大小了。
3	要想移动一个层，执行下列操作之一：
	使用箭头键。
	按住 Shift 键并使用箭头键每次可以将层移动 5 个像素的距离。移动的方向同使用的箭头键的方向一致。
	点击层左上角的标签可以将层拖到用户满意的位置。

 
添加图像

现在你就要向文档中添加 Scaal 的标志了。

1	点击最上边的层。将游标放到层上，但不选取该层。
	这时被激活的层和插入点看上去是这样的：
2	选择 Insert > Image。
3	在 Select Image Source (选取源图像)对话框中，找到 Sites/Scaal_site/Images 文件夹，找到 logo_scaal.gif 图像文件，点击 Select (Windows) 或 Choose (Macintosh)。
	图像就出现在层上了。

 
添加导航图像

现在你要往文档上添加用作导航按钮的图像了。

添加完按钮图像后，在图形之间加上空格；插入图像后再添加一个段落回车。

1	将插入点放在导航层(左边最下边的层)。
2	在对象面板的 Common 面板上，点击 Insert Image 按钮。
	这时会弹出 Select Image Source 对话框。
3	在 Scaal_site 文件夹中的 Images 文件夹中，找到 btn_ourstory_up.gif 文件，点击 Select (Windows) 或 Choose (Macintosh) 插入图像。
	在插入层上就出现了 Our Story 图像。
4	将插入点置于插入的图像之间，敲击回车键给图像之间添加空格。
5	点击对象面板上的 Insert Image 按钮，在随后弹出的对话框中找到 btn_products_up.gif 文件，点击 Select (Windows) 或 Choose (Macintosh)。
6	将插入点置于插入的图像之间，敲击回车键给图像之间添加空格。
7	点击对象面板上的 Insert Image 按钮，在随后弹出的对话框中找到 btn_thisweek_up.gif 文件，点击 Select (Windows) 或 Choose (Macintosh)。
	这时你所做的页面看上去差不多应该是这样的：

 
命名图像

用户要养成给文档中元素命名的习惯。这样以后当需要涉及或者选取某一图像、层或任何其它元素的时候，你就可以很快地找到。你在本章以后的学习制作过程中还要涉及到这些图像，所以现在就要先给它们起个名字。

1	在文档窗中点击 Our Story 图像，将其选取。
2	在属性面板的 Image 填框中填上 ourstory。
3	重复这些步骤，给其它图像也起个名字。第二幅图像起名 products，第三幅图像起名 thisweek。

 
添加文本

现在你要给剩下的层上添加文本了。

在 Dreamweaver 中你可以直接在层上输入文字，或者你可以从其它文档中剪切文本并粘贴到当前层上。在我们这个指南中，你可以从现有的文本文件中复制文本并粘贴到当前层上。

1	选择 File > Open；然后，在 Scaal_site 文件夹中，打开 DW3_copy.txt。
	DW3_copy.txt 会开启在一个新的文档窗中。DW3_copy.txt 就是你要复制的文本文件。
2	选择 Edit > Select All，选取文档文本。
3	选择 Edit > Copy，复制文本。
4	关闭 DW3_copy.txt。
5	在 my_scaal_home 文档中，将插入点置于右下层。
6	选择 Edit > Paste，将刚才复制的文本粘贴到层上。

 
文本格式化

通过在属性面板上设置属性你可以在文档窗对文本进行格式化。首先，选取要格式化的文本，然后应用修改。你也可以修改字体和字体大小。

1	如果属性面板是关闭着的就选择 Window > Properties。
2	将插入点置于层上的任意位置，敲击 Control+A (Windows) 或 Command+A (Macintosh)，选取所有文本。
3	在属性面板的第二个 Format 弹出菜单中，当前默认的是 Default Font，选取 Arial，Helvetica，sans-serif。
4	在 Size 弹出菜单中选择 3。
	文档中的文本会自动更新。

 
给层添加背景色

给层添加背景色同样可以使用属性面板来操作。颜色的选取可以通过颜色吸取器，也可以直接输入颜色的十六进制码。

1	点击文本层的边界，选取层。(在层被选中之后把柄会出现)
2	点击属性面板上的 BgColor 颜色框。
	这时调色板和滴管工具会出现。你可以用滴管“拾取”可视工作区的任意颜色，当然也可以从调色板上选取颜色。
3	移动滴管工具到 Scaal 标志，选取围绕着字母 S 的金黄色。
	文本层背景色更新。

 
定位层

现在你已经完成了页面设计了 — 使用层来布局页面 — 下边你就要将层转换成表格，这样这个页面才可以用 3.0 版本的浏览器浏览。

在将层转换成表格的时候，Dreamweaver 会自动创建表格的列、行和单元格来对应层。如果你想再转换的时候减少表格的列、行和单元格的生成数目，那么就要在转换工作开始之前先将层排列整齐。这一工作也是在属性面板上进行的。

首先，修改层的大小和位置；然后设定好两个较低层的位置，使它们排列在最上边。

1	拖拽把柄修改最上边层的大小，使这个层正好围住 Scaal 标志和后边的文字。
2	修改导航层的大小(最下边左边层)，使这个层正好将图像围住。
3	移动文本层到导航层的旁边。选取文本层，使用箭头键拖拽层标签。(由于前边我们已经在层面板上选取了 Prevent Overlap，所以这些层都不会重叠的，)
4	如果在属性面板上所有的层属性都看不到，点击属性面板右下角的扩展箭头。
5	选取包含有导航图像的层，按住 Shift 键，选取文本层。
	这时两个层都被选中。
6	在属性面板的 T 填框中填上 100px。这样就精确地将两个层与顶部的距离定为 100 像素。
	随便点击文档任意位置取消对层的选区，查看层排列的情况。

 
将层转换成表格

现在已经完成了页面排版了，可以将层转换成表格了，

1	选择 Modify > Layout Mode > Convert Layers to Table。
	弹出 Convert Layers to Table 对话框。
2	在对话框中，确认在 Table Layout 的下边的 Smallest: Collapse Empty Cells 和 Use Transparent GIFs 均被选中。
3	在 Layout Tools 的下边，确定 Prevent Layer Overlaps 被选中。
4	点击 OK。
	转换完毕。
	注意：Dreamweaver 会使用透明 GIF 图像来设置表格行和列之间的空格。在层转换成表格之后，你要查看一下站点根目录下的 tranparent.gif 文件。不要将这个文件移到你的 Images 文件夹；如果你这样做了，当你在浏览器中查看网页时就会看到许多坏掉的图像图标。
5	关闭层面板。
6	保存文件。