学会Dreamweaver_1小时做好个人网站

Solutions学会Ｄｒｅａｍｗｅａｖｅｒ，１小时做好个人网站实例１：一小时创建个人网站网站实际上就是许多个网页的集合。个人网站与商业网站最大的区别之一，就是网页内容的规模大小之分，如果你有时间和精

Solutions

学会Ｄｒｅａｍｗｅａｖｅｒ，１小时做好个人网站

实例１：一小时创建个人网站

网站实际上就是许多个网页的集合。个人网站与商业网站最大的区别之一，就是网页内容的规模大小之分，如果你有时间和精力，同样能把个人网站做得像商业网站那样专业。

第一步：规划网站

首先要确定整个网站的内容结构。笔者是一个“红迷”，所以想建一个有关《红楼梦》的个人网站，初步确定的子栏目有“夜看红楼”、“红楼原文”、“诗情画意”、“书香之外”。大栏目下还会有一些小栏目，这里就不一一列举了。当然，你希望建一个软件下载站、音乐网站、图片网站等都可以，本例重点是网站制作的方法而非网站内容。

第二步：建立本地站点

１．在开始之前还要创建一个新的文件夹，用来管理和保存后面将要创建的网页及各种资源文件，本例是在Ｄ盘下创建了一个名为ＲｅｄＤｒｅａｍ的文件夹。

２．启动Ｄｒｅａｍｗｅａｖｅｒ　ＭＸ　２００４（以下简称Ｄｒｅａｍｗｅａｖｅｒ），如果是第一次运行它，将会弹出工作区设置窗口，选择“设计者”后单击“确定”按钮进入主界面（工作区设置以后还可以在“编辑→首选参数→常规→更改工作区”中修改）。单击菜单命令“站点→管理站点”，在打开的对话框中单击“新建→站点”，这时会显示出站点定义向导窗口。

３．按照向导提示，为站点取一个名称（本例为：“红楼逸梦”），单击“下一步”；接下来选择默认的“否，我不想使用服务器技术”，单击“下一步”；接下来选择“编辑我的计算机上的本地副本，完成后再上传到服务器”项，并单击下面的文件夹浏览图标，将“您将把文件存储在计算机上的什么位置？”项设置为前面新建的文件夹，本例中即“Ｄ：＼ＲｅｄＤｒｅａｍ＼”，单击“下一步”；将“您如何连接到远程服务器”项暂且设置为“无”（以后还可以修改的），单击“下一步”、“完成”，返回到管理站点窗口，再单击“完成”返回主界面（见图１）。

第三步：巧借模板资源快速建网站

网站要想设计得漂亮好看，需要一定美术功底，这对一般初学者来说可能有些难度，我们不妨四两拨千斤，借用一些现成模板快速创建出网站。

１．首先登录到ｈｔｔｐ：／／ｗｗｗ．ｍａｃｒｏｍｅｄｉａ．ｃｏｍ／ｓｏｆｔｗａｒｅ／

图１

ｄｒｅａｍｗｅａｖｅｒ／ｄｏｗｎｌｏａｄ／ｔｅｍｐｌａｔｅｓ／，这个网页上列有许多模板，单击每个模板下面的Ｐｒｅｖｉｅｗ可以预览，单击Ｄｏｗｎｌｏａｄ后面的ＭＡＣ（适用于苹果机）或ＰＣ（适当于ＰＣ机）可下载模板，本例下载的是名为Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ｈｉｓｔｏｒｙ的ＰＣ版模板（文件名为：ＤＷ＿Ｔｅｍｐｌａｔｅｓ＿Ｄｅｐａｒｔｍｅｎｔ．ｚｉｐ，也可以使用本文提供下载的素材包中的文件来练习）。

２．解开下载的压缩包文件，进入其Ｄｅｐａｒｔｍｅｎｔ　Ｓａｍｐｌｅ　Ｓｉｔｅ子目录中，全选里面所有的文件及子文件夹，复制粘贴到Ｄ：＼ＲｅｄＤｒｅａｍ中，此时回到Ｄｒｅａｍｗｅａｖｅｒ中，在右侧的文件浏览窗格中会自动显示出刚刚拷贝过来的文件及文件夹来（如果没有自动显示出来，可按Ｆ５键刷新一下即可）。

３．每个网站都有一个首页，不管是谁访问网站，第一个看到的总是首页。首页文件名一般为ｉｎｄｅｘ．ｈｔｍ，在刚刚拷贝过来的Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ｈｉｓｔｏｒｙ内，会发现也有一个ｉｎｄｅｘ．ｈｔｍ，右击它，从右键菜单中选择“设成首页”即可。接着双击ｉｎｄｅｘ．ｈｔｍ在左侧窗口中打开它，此时按下快捷键Ｆ１２在ＩＥ中预览一下，不费吹灰之力，一个漂亮的站点就建立完成了，点击上方导航按钮可以浏览多个网页（见图２）。

第四步：修改模板更新站点

这个模板里的网页内容虽然很丰富，但它并不是我们所需要的，我们要的只是网页框架，具体内容还得替换成自己的才行。

１．单击菜单“修改→页面属性”（快捷键Ｃｔｒｌ＋Ｊ），在打开的页面属性对话框中可以对网页进行多种设置，如设置

Solutions

中（见图３），按Ｆ５键刷新即可看到修改后的效果了。

图

２

背景图像、改变背景颜色、设置文本和链接的颜色等。单击左侧“标题／编码”项，然后可在右侧“标题”中输入网页的标题，如本例中输入的是“红楼逸梦”，它将出现在网页浏览器的标题栏上；将“编码”设置为“简体中文（ＧＢ２３１２）”。单击确定后返回主界面。

２．Ｄｒｅａｍｗｅａｖｅｒ是一款所见即所得的网页编辑器，许多操作与Ｗｏｒｄ比较相似。选取首页ＷＥＬＣＯＭＥ中的所有文字，删除后可直接在其中输入自己想要的内容。当然，最好的办法是打开Ｗｏｒｄ文件，选取相关文章内容后按Ｃｔｒｌ＋Ｃ组合键复制，再在Ｄｒｅａｍｗｅａｖｅｒ中按Ｃｔｒｌ＋Ｖ组合键粘贴，这样比较省事。选取文字后，可以在下方“属性”面板中设置文字字体、大小、颜色、风格等，与Ｗｏｒｄ操作相似，这里就不细说了。

３．网页上许多文字是以图形方式出现的，当点击某一对象后，如果光标变成闪烁的“Ｉ”形状，则所选对象是文字；如果对象周围出现一个黑框，并且右下方出现三个节点黑块，那它就是图形了，拖动节点可调整图像的大小。点击模板网页上面的“Ｕｎｉｖｅｒｓｉｔｙ　Ｏｆ　Ｓｏｍｅｗｈｅｒｅ”标志就会发现它实际上是一个图形，显然，这个标志不符合本例站点的要求，需要修改一下。

４．确保图形为选中状态，然后单击“属性”面板上“编辑”右侧的第一个图标即可调出相应的图像软件进行编辑了。虽然Ｍａｃｒｏｍｅｄｉａ有专门的网页图形处理软件Ｆｉｒｅｗｏｒｋｓ，不过我相信大多数人还是喜欢用Ｐｈｏｔｏｓｈｏｐ，可以在“首选参数”中设置一下，以便在Ｄｒｅａｍｗｅａｖｅｒ中编辑图形时可以随时调出Ｐｈｏｔｏｓｈｏｐ：单击菜单“编辑→首选参数”，在首选参数对话框中点选左侧的“文件类型／编辑器”项，再在右侧点选相应的文件扩展名，然后单击“编辑器”上面的“＋”号打开查找对话框，找到可执行文件Ｐｈｏｔｏｓｈｏｐ．ｅｘｅ后确定，再单击“设为主要”即可。本例中将后缀为ｇｉｆ、ｊｐｇ的这两种主要的网页图形格式都设置为用Ｐｈｏｔｏｓｈｏｐ编辑了。

５．通过Ｄｒｅａｍｗｅａｖｅｒ运行Ｐｈｏｔｏｓｈｏｐ后，它会自动打开标志图形，将其中的“Ｕｎｉｖｅｒｓｉｔｙ　Ｏｆ　Ｓｏｍｅｗｈｅｒｅ　”等文字改成“ＴｈｅＤｒｅａｍ　ｏｆ　Ｒｅｄ　Ｃｈａｍｂｅｒ　　红楼逸梦”，保存后返回到Ｄｒｅａｍｗｅａｖｅｒ

７．至此，首页就改造完成了，是不是很漂亮。不过，当光标从导航按钮上滑过时，你会发现按钮又变成英文的了。这是因为，这里的每个按钮都是由三张图片构成的，正常状态、光标悬停时状态、单击时状态会显示不同的图片。前面修改的是正常状态的图片，还需要将鼠标停靠在按钮上或单击时显示的图片也改过来。在Ｄｒｅａｍｗｅａｖｅｒ右侧的文件浏览窗格中，单击展开ｎａｖ文件夹，所有按钮图形都在这里了，依次双击打开图形修改即可。

第五步：上传网站文件到

Ｗｅｂ服务器

图４图３

６．原模板网页上方的四个导航按钮及左侧的ＩＭＡＧＥ占位符也都是图片，依据上面方法调用Ｐｈｏｔｏｓｈｏｐ进行修改，用自己的图形代替原有图形。本例中上面的四个导航按钮分别被改为“夜看红楼”、“红楼原文”、“诗情画意”、“书香之外”，左侧的ＩＭＡＧＥ占位符被换成一幅红楼梦图片及站长自己写的题诗了。修改完成后，按Ｆ１２键在浏览器中预览一下，最终效果如图４所示。

３８

２００５

年第１１期

Solutions

好了，剩下的就是一个工作量问题了，在文件浏览窗格中打开其他网页文件，依照上面方法进行修改即可。网站文件都建好后，当然是要传到网上去了，否则放到自己的硬盘上孤芳自赏多没意思。

１．单击菜单“站点→管理站点”命令，点选一个站点（本例只有一个站点：“红楼逸梦”），单击“编辑”按钮，在打开的向导窗口中点击“高级”标签，再在左侧选择“远程信息”，然后在右侧设置远程服务器的各项参数。这些参数一般在你

图５

成的网页，只能在这些可编辑区域中添加、编辑自己的内容，其他地方的内容是改不了的。如果想把网页中某个部分指定为可编辑区域，可选中该处元素，或者在文档窗口状态栏的标志选择器中选择相应标志（如＜ｔｄ＞、＜ｉｍｇ＞等），然后单击菜单命令“插入→模板对象→可编辑区域”（快捷键为Ｃｔｒｌ＋Ａｌｔ＋Ｖ），在弹出对话框中随意取一个名称，确定即可。

申请Ｗｅｂ服务器空间的时候，由网管提供给你的。本例如图５所示，将“访问”设置“ＦＴＰ”后，下面会显示出相应选项，根据提示填写即可。设置完毕，可先单击“测试”按钮测试一下，如果一切正常，连续单击“确定”按钮返回即可。

图６

第三步：如果想删除可编辑区域，可右单击可编辑区域名称，再从右键菜单中选择“模板→删除模板标志”即可。修改好后单击菜单　“文件→保存”命令保存模板，如果已经使用此模板创建了多个网页，则会弹出如图７所示的对话框，显示哪些网页是应用了该模板的，是否需要更新为新模板，根据需要选择即可。

第四步：模板改好后，就可以使用它创建新网页了。单击菜单命令“文件→新建”，在新建文档窗口“常用”选项卡中是Ｄｒｅａｍｗｅａｖｅｒ内置的多个模板，如使用自己的模板，可单击“模板”选项卡，选择ｌａｙｏｕｔ模板，再单击“创建”，即可创建一个新网页，对新网页进行必要的编辑

图７

２．单击菜单“站点→上传”命令，将弹出一个对话框询问是否包含相关文件，当然选择“是”了，否则网页上的图形会显示不出来的。如果文件不多，一会就能传完了。其实也可以不用Ｄｒｅａｍｗｅａｖｅｒ的上传功能，网站文件制作完成后，使用ＣｕｔｅＦＴＰ或ＦｌａｓｈＦＸＰ之类的上传工具将所有文件传到服务器上也可以。

因为涉及到安全的问题，图５中所填写的都是虚拟数据（子目录是ｆｌｙ２ｓｐｒｉｎｇ，而非ｌｘｆ），本例真正的网址为：ｈｔｔｐ：／／ｗｗｗ．ｎｅｗｈｕａ．ｃｏｍ／ｃｆａｎ／ｆｌｙ２ｓｐｒｉｎｇ／，欢迎大家光临。

实例２：模板的真面目

实例１中多次提到的“模板”，实际上指的是别人制作好了的现存的网页，那只是笔者为了叙述方便。而真正的Ｄｒｅａｍｗｅａｖｅｒ模板，则是一些后缀名为ｄｗｔ的文件，它们指定保存在站点Ｔｅｍｐｌａｔｅｓ目录下面。

模板就是一个模具，使用它可以快速“拓”出多个内容一模一样的网页来，如果网页上有许多相同的内容固定不变（如本例中网站标志、导航按钮、左侧的图片及题诗等），使用模板就可以省去重复劳动之苦了。

第一步：实例１所使用的示例文件中已经包含了两个自定义的模板。在Ｄｒｅａｍｗｅａｖｅｒ主界面右侧的文件浏览窗格中，单击展开Ｔｅｍｐｌａｔｅｓ文件夹，双击其中的ｌａｙｏｕｔ．ｄｗｔ模板文件打开它。

第二步：可以像编辑网页一样在模板中插入表格、图形、文字、ＪａｖａＳｃｒｉｐｔ脚本等任何内容。不过模板比一般的网页多出了可编辑区域、锁定区域等概念。如图６所示，左上角带有名称的蓝线框，称为可编辑区域，通过模板生

修改后，保存即可（注意：网页一定要保存在当前站点文件夹内）。编辑新网页的过程中，你会发现，光标移出可编辑区域时，就变成Ｓｔｏｐ的图案，而成内容是不可更改的。

Ｄｒｅａｍｗｅａｖｅｒ中要学的东西还很多，不是三页的文章能说得完的，有兴趣的朋友请继续关注我们的杂志，将会刊出更多新鲜热辣的Ｄｒｅａｍｗｅａｖｅｒ使用技巧的。另外，朋友们有什么好建议也请告知我，邮件请发：ｍｅｄｉａ＠ｃｆａｎ．ｃｏｍ．ｃｎ。

　［ＹＹ１０］