听说Dreamweaver可是个网页大师，于是阿蒙就赶紧在自己的电脑里面装了一个。可是自己对这斯并不熟悉，怎么办呢？这日鸣涧路过家门，恰好被阿蒙抓了壮丁，于是一番甜言蜜语，鸣涧最受不了别人的吹捧了，几顶高帽带上，心甘情愿成了免费劳力——教阿蒙制作主页。

对于如你这样的初学制作主页的人来说，总是希望在最短的时间内就制作出自己的主页来，那我先来教你如何使用Dreamweaver快速地建立起自己的个人主页，不过这只是一个入门阶段，更精彩的以后慢慢讲给你。这边鸣涧摇头晃脑地正说着，那边阿蒙可急了，少废话……

定义本地站点

在开始制作网页前，需要先定义一个本地站点。也就是说在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便制作和管理。

执行主菜单“Site/New Site”命令，打开“Site Definition”对话框。在“Category”列表中选择“Local Info”选项，然后在右侧“Site Name”中输入站点名称：鸣涧动力，单击“Local Root”右侧的文件夹图标，选择E:\web作为网站本地存放目录。同时选中“Refresh Local File List Automatically”选项，这样可以在网站更新时自动刷新本地文件列表，选中“Use Cache to Speed Link Updates”为站点创建一个高速缓存文件。最后单击“OK”按钮完成。

站点管理器的使用

建立一个新站点后，会打开一个站点管理器对话框(如图1)，用鼠标右键单击根目录，弹出一个快捷菜单，执行“New Files”命令，建立一个名为“index.htm”的网站首页文件。然后再执行“New Folder”命令，建立一个image文件夹，用于存放站点内的图片文件。

图1

页面属性的设置

双击刚才建立的首页文件，在Dreamweaver主窗口中打开它，此时是一个空白页面，下面来设置网页页面的一些属性。按下“Ctrl+J”键，打开“Page Properties”对话框(如图2)。在“Title”中输入当前页面的标题文字，然后单击“Background Image”框右侧的“Browse”按钮，在打开的对话框中选择事先准备好的背景图案。在“Top”中还可以设置页面距顶边距离、“Left”为页面距左边距离、“Margin Height”表示边距高度、“Margin Width”表示边距宽度，可以根据实际情况设置好相应的数值。

图2

添加文字与格式编排

在网页中输入一段文字后，选中标题文字，按“Ctrl+F3”调出“属性面板”，点“居中”按钮，使文字居中对齐，然后点击“Size”下拉列表框，选择字号为6，设置文字颜色为蓝色，将文字加粗(如图3)。在正文文字前加两个空格的方法是，打开输入法，并设置为全角方式，按下空格键即可在段首前加空格了。

图3

加入图形

单击“Object 面板”中的“Insert Image”按钮，在弹出的对话框中选定一幅图片，点“Select”按钮，将图片插入到文档中。此时图片将段落分开了，需要进行对齐方式设置。选中图片，在属性面板中单击“Align”下拉列表框，选择“lEFT”，实现图文混排。此时文字和图片的间距太小了，可以在“属性面板”中的“H Space”框中输入“10”，按下回车，这样图的左右各出现10个像素的间距。同样，在“V Space”框中输入相应数值，使图的上下也与文字有一定的间距(如图4)。

图4

设计超链接

下面来为网页栏目设计链接，选中“原创作品”四个字，单击“属性面板”中“Link”列表框右侧的文件夹图标，选择已经做好的“text.htm”文件，再单击“Select”，这样文字的超链接做好了。然后点击“Target”列表框，选择“_blank”(如图5)，这样点击此链接后，页面会在一个新窗口中打开。图片的超链接制作方法是，选中图片，在属性面板的“Link”项中加入超链接地址。

图5

网页预览

保存当前网页，然后按下“F12”键，即可在一个新打开的网页浏览器中预览当前设计的网页了。此时需要做的，就是检查页面链接是否正常，同时还需要检查网页页面设计是否合理等因素。

阿蒙听得正入神，发现鸣涧揉揉眼睛，没有讲下去的意思了，心里好大的不痛快，不过今儿个倒是学会了快速建立自己的主页，那么下次教我什么阿？鸣涧诡秘地一笑，“当然是主页设计过程中最常用到的东东了，暂时保密，下次我来的时候，你自然就知道了……”

故事之二——表格的妙用

自从鸣涧上次给阿蒙卖了一个关子后，家里的电话总是响个不停，阿蒙按照上次鸣涧所说的方法制作出来的主页，总是感觉没有别人的好，版面格式编排设计也不满意，心里很不平衡。打了一百多个电话后，鸣涧终于不耐烦了，“好了，好了，我求求你千万别打电话了。在网页制作过程中，表格的应用是非常广泛的，在表格中组织和编排文本图形会更加灵活，可以制作别具一格的网页作品，我现在就告诉你如何使用表格吧。”

还别说，阿蒙一边听着电话那边鸣涧说，一边在电脑上操作，就基本掌握表格使用了，“哈哈，原来如此简单”。放下电话后，阿蒙决定自己再温习一下，仔细琢磨琢磨如何在Dreamweaver中使用表格。

插入第一个表格

我们要设计的网页的布局是，在页面最上方放置Logo和Banner广告条，中间的部分为栏目导航，下方为网页正文。单击“对象面板”中的插入表格图标，弹出“Insert Table”对话框（如图1）。设置Rows(行数)为“1”，Columns(列数)为“2”，表格Width(宽度)为“75Percent”， Border(表格线宽度)为“0”，完成后单击“OK”按钮。

图1

表格的属性

将光标放置在表格的第一个单元格中，此时在状态栏左侧的标签选择器处会显示“{body}{table}{tr}{td}”，如果点击“table”则选择整个表格，“tr”选中当前行，“td”选中单元格，现在“td”被加粗显示，说明光标处在单元格内。单击一下{table}，此时表格周围显示一圈黑线，表示表格被选中，四周同时有黑色方块，可以拖动来改变表格的大小。

选中表格后，打开“属性”，可以查看表格属性，如果要改变表格属性，可以在“属性”中进行相关的修改(如图2)。

图2

插入图形

在第一个单元格内插入Logo图片，然后选中图片，发现图片宽度为205个像素，然后调整此单元格宽度也为205像素，这样单元格刚好可以容纳刚才插入的图形。完成后，再次选中图片，在“属性”中设置图形“Border”值为“1”。同样道理将Banner图形插入第二个单元格，同时选择第二个单元格，并在“属性”面板中单击“居中对齐”方式，使Banner图形居中显示。

制作栏目导航

打算设计栏目为5个，所以插入一个1行5列的表格，此时设置表格“boder”值为1，“Cell Spacing(单元格间距)”为“0”。选中插入的表格，在“属性”面板中设置表格高度(H)为“30 Pixels”(如图3)。

图3

制作立体导航

选中表格，在“属性”面板中设置“Cellspace”为“1”，设置“Bg Color(背景颜色)”值为“#000000”，“Brdr color”为“#FFFFFF”。接着单击状态栏“tr”，选中当前行，在“属性”面板中，设置“BG”为“#99CC99”，“Brdr”为“#FFFFFF”（如图4），这样就可以制作出一个带有立体效果的单航边框了。然后在表格中加入栏目名称，并使文字居中显示。

图4

设计正文区

在正文区域插入一个3行2列的表格，然后选中第一行两个单元格，点击鼠标右键，执行“Table/Merge cell”命令合并两个单元格并设置其背景色(BG)为“#CCCC99”。接着调节第2、3行的列宽，并合并2行2列、3行2列，并将正文插入到合并后的表格中。再设定左侧1列BG值为“#009966”，同时还可以根据自己的需要插入新的表格，并设定相关的内容，这里就不多说了。

基本设计好了，阿蒙觉着自己的主页漂亮多了。于是赶紧向鸣涧报告战果，当然啦，还得告诉鸣涧下次可得快些去他那里，否则电话就别想消停^_^。

故事之三——巧用框架

且说阿蒙那日学会使用表格进行网页排版后，心里高兴的很。前几天见了鸣涧就炫耀自己的网页，不过过了一会儿又说，使用表格进行网页排版的确非常好，也很容易制作出美观大方的网页来，可是有没有更加简单的方法可以制作网页呢？当然有啦，鸣涧诡秘地一笑，嘿嘿，我还留了一手，今儿个心情好，就一并告诉你吧，除了可以使用表格制作网页外，还可以使用框架，这里所说的框架就是可以把浏览器窗口划分为若干个区域，而每个区域可以分别显示不同的网页内容。

建立框架

首先打开“Object”面板，单击“Common”下拉菜单，选择“Frames”命令，这里提供了可以制作不同格式框架的命令按钮。单击“Insert Top Frame”按钮，此时整个页面就被分为上下两个部分了。框架上部名称为topFrame，下部为mainFrame。选中topFrame即可选定此框架，还可以对其进行编辑。选中mainFrame，然后单击“Object”对话框中的“Insert Left Frame”按钮，此时即可将下部的框架拆分为左右两部分(如图1)。

图1

框架的属性

首先我们需要制作好4个网页，分别为top.htm、left.htm、1.htm、2.htm，分别作为填充框架的页面。然后选中页面上部的topFrame，打开“属性”面板，如果要修改框架名称，可以在“Framename”中命名，链接此框架页面文件，可以单击“Src”文本框右侧的文件夹按钮(如图2)，在打开的对话框中选择“top.htm”后，即可在上面的框架中显示了。框架与内部网页之间有一段空隙，显得很不美观，可以将其去掉。选中上部框架，然后在属性面板中设置“Margin Width”、“Margin Height”值为“0”，可以使用框架刚好容纳内部网页。

图2

将鼠标指针放在上下框架的分界线上，当变为上下双箭头时，按下鼠标左键进行拖动，改变框架高度以适应网页页面大小。同样道理，填充其他两个框架。

右下方属于正文区域，如果网页页面过长，会影响浏览的效果，此时可以为其设置滚动条。选择右下方框架，然后在属性面板中，在Scroll列表中选择“Auto”选项，此时框架就会自动出现滚动条了。设计的效果如图3所示。最后执行“File/Save all Frame”命令，将主框架体保存为frame.htm。

图3

框架的链接

那么如何实现点击左侧框架中的主题，会在右侧的框架中显示呢？这里就来介绍一下框架之间的链接。首先选择左侧框架中需要链接的图片热点，然后打开属性面板，在Link对话框右侧单击文件夹框中选择网页文件2.htm，然后单击“target”列表框，选择要显示此内容的框架名“mainframe”(如图4)，此时只要单击左侧链接，即可在右侧打开相应的网页了。使用此方法可以建立多个栏目导航或者文章页面导航选单，而且使用也非常方便。

图4

框架的分隔线

为了使页面更加美观，我们可以将框架的分隔线去掉。首先选取整个框架集，然后在属性面板上，从“Borders”下拉菜单中选择“No”(如图5)。另外，如果将框架体的“Borders”宽度值设置为“No”，也可以取消框架边线。相反，如果在“Borders”下拉菜单中选择“YES”，并设置了框架体的边框宽度“Borders”后，可以恢复框架的边框。

图5

充分使用框架，并结合使用表格，可以制作出更加美观的网页页面，阿蒙迫不及待地想试试了，“你小子还真有两下子！”他捶了鸣涧一下，然后不管鸣涧在一边嘟嘟囔囔地抚摩自己受伤的手臂自顾自地修改主页去了……

故事之四——用图层导航

阿蒙一日上网游玩，发现一些网页上有一些动态导航下拉选单，不禁来了兴趣，琢磨着该如何在自己的主页上加入这种效果。鸣涧来的真不是时候，本来是打算找阿蒙一起出去玩，不想被他抓了个正着，好在这种效果实现也不是很麻烦，只要使用Dreamweaver提供的图层工具就可以了，于是耐着性子给阿蒙做了一个范例。

那么图层是什么呢？其实图层就好比多张叠放在一起的包含有文字、图形等对象的层，在这里可以放置诸如文本、图片、表格、插件等多种对象，而且还可以在页面上精确定位。

建立菜单项

选择“Insert”选单上的“Table”选项，插入一个1行5列的表格，分别为表格各个单元格填写导航栏目名称。然后选定表格，设定表格背景色为灰色。完成后选择单元格，设定字色为蓝色(如图1)。这样即可得到一个导航选定栏。

图1

增加选单选项

单击工具箱的图层按钮，在第一个菜单栏下方画出一个图层区域。选中此图层，在图层中输入此选项文字选项。移动此图层的位置，使之刚好位于选定栏的正下方。然后选择图层属性面板，设置图层的背景颜色。同样道理，制作出其他几个菜单项的子选单(如图2)。

图2

设置选定的可视性

我们可以通过“显示/隐藏层”属性来实现动态菜单的制作，这也是为什么要使用图层来制作子菜单的原因。按下“F2”键，打开“Layers”层窗口，由于我们不需要在网页打开时显示子菜单，可以在层窗口中将两个层设置为不可见。只要用鼠标单击层窗口中的眼睛图标，并使其闭上即可。同时，还需要选取“Prevent Overlaps”复选框，以防止层的重叠(如图3)。

图3

如何显示子菜单

为了使浏览者将鼠标指向选单项时出现对应的子菜单，可以执行“Window/Behaviors”命令打开“Behaviors”窗口，然后从导航选单栏中选择一个选单项，比如“软件.net”，然后单击Behaviors窗口中的“+”按钮，在弹出的菜单中选择“Show-Hide Layers”选项命令，此时会打开一个“Show-Hide Layers”对话框，选择Layer1，并单击“Show”按钮以设置“Layer1”为显示方式，同时设置Layer2为“隐藏(Hide)”方式。完成后单击“OK”按钮。然后单击Behaviors窗口中的(如图4)下三角按钮，在打开的事件选单中选取“onMouseOver”事件，这样就可以设置鼠标指向“软件.net”后会显示对应的子菜单了。同样道理，可以分别设置其他几个菜单选项的对应子菜单。

图4

设置链接和预览

最后我们还需要将子选单中项目指向对应的栏目页面，同设置超链接的方法一样，选中文字后，在属性对话框中单击“文件夹”按钮，选择指向的网页就可以了。最后按下“F12”键即可预览最后的网页设计效果了。

阿蒙看着最后的效果，不觉嘿嘿地笑了起来，呵，没想到Dreamweaver还有这么一手啊，不知道还有些什么？鸣涧怕他再捶自己，赶紧躲到一边去了，休息休息吧，下次见了:)。

故事之五——巧用模板