魔女宅急便 电影国语:用DreamWeaver打造留言板网页设计2

经过上一课的学习，我们对Dreamweaver MX的工作环境以及如何创建一个站点和编辑页面文档有了一个初步的认识。从这次课开始我们要系统的来学习如何创建一个留言板站点。通过这个留言板站点的建立，我们要讨论在Dreamweaver MX中经常用到的一些工具和命令。
　　
　　一、创建留言板动态站点
　　
　　上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）的动态站点。以下是创建步骤：
　　1、执行“站点/新建站点”命令，得到建站向导，在第1步中，给你的站点起个名字。比如是：liuyanban。
　　2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图1所示。
　　
　　
　　图1 建站向导——服务器脚本技术设置
　　
　　3、单击下一步，进入到建站向导的下一个画面，这个步骤是关于站点的URL的内容，如图2所示。
　　
　　
　　图2 建站向导——站点URL
　　
　　4、以下步骤按照建站向导的默认设置。最后单击完成按钮即可。
　　二、在站点中创建资源文件夹
　　▲在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内容时，这些资源将随时可用。
　　　 现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹中。
　　1、假设我们的留言板站点的根文件夹路径为：c:\Inetpub\wwwroot\liuyanban\。
　　2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单中执行“新建文件夹”命令。如图3所示。
　　按照这种方法，先创建两个文件夹：images（用来放图像文件）和swf（用来放Flash动画）。
　　
　　
　　图3 在站点视图创建新文件夹
　　
　　▲请下载以下资源，并把它们放在相应的文件夹中。在站点面板中可以象资源管理器一样管理文件和文件夹。
　　　●留言板系统用户头像图像(10个图像文件)。放在images文件夹中。下载（rar文件）
　　　●留言板系统导航条图像。放在images文件夹中。下载
　　　●Flash动画文件(1个)。放在swf文件夹中。下载
　　按照上面的步骤把站点中的资源文件部署好以后，在资源面板中就可以看到我们部署好的相应的资源，如图4所示。我们可以将资源面板中的资源直接拖放到站点文档中使用。
　　
　　
　　图4 资源面板
　　
　　三、创建留言板站点的第一个页面（文件名：shuoming.htm）
　　
　　下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。它用来对我们的留言板系统进行说明。
　　1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/html”，然后单击“创建”按钮，如图5所示。
　　
　　
　　图5 新建基本html文档
　　
　　2、编辑页面文档（页面效果参考）
　　●输入页面标题“留言板系统说明”。如图6所示。
　　
　　
　　图6 定义页面标题
　　
　　●输入页面文字内容并定义它们的字体、颜色等属性。具体的属性设置可以在属性面板中实现。
　　●关于连续空格的输入：执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择“允许多个连续空格”复选框，如图7所示。
　　
　　
　　图7 参数选择——允许多个连续空格
　　
　　●对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。可以这样实现：将中文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行文字内容的输入。
　　●关于段落：每按一次Enter（回车）键就代表一个新段落的开始。如果你想在段落中换行，请按“Shift+Enter”组合键。
　　●关于图像的插入，我们可以用以下两种方法中的任意一种：
　　①将光标定位到要插入图像的位置。用鼠标单击“插入栏”中“常用”标签下的图像按钮，如图8所示。然后找到要插入的图像文件。
　　
　　
　　图8 插入图像和水平线
　　
　　②打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。
　　●关于水平线的插入，如图8所示。我们还可以在属性面板设置它的简单属性，但不能直接在属性面板设置它的颜色。
　　插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：
　　选中水平线，切换到代码视图。将光标定位在br标签后，单击空格键，这时会弹出一个下拉菜单，如同9所示，我们再在其中双击color属性标签，这样就会弹出调色板，在其中选择你需要的颜色就可以了。
　　
　　
　　图9 在代码视图设置水平线颜色属性
　　
　　3、保存页面文档。执行“文件/保存”命令，把文档保存到站点的根目录下。文件名：shuoming.htm。只须输入主文件名 shuoming 就可以了，扩展名是系统自动加上的。