文章来源：N搜网-中国网上商店商品服务搜索门户 WWW.NSALL.COM 用户可以在浏览器中将已经制作好的 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 保存文件。
［N搜网-中国网上商店商品服务搜索门户］：［本文章由N搜网于2006-8-15录入系统，网址：www.nsall.com］
|
首页 
打印本页
放大字体
关闭本页
