我们上一次是使用Dreamweaver实现了一个简单的网页，那接下来，我们在上次的基础上，继续进行新的开发。
首先，我们把上次在“首页.html”里插入的文字，图片先删除掉。然后我们点击菜单导航栏上方的“插入”，选择“模板对象”，然后选择“可编辑区域”。
创建可编辑区域
点击确定，将该文档转换为模板。
文档转换为模板
可编辑区域的名称自己可修改，我们选择默认的名称就行，点击确定。
设置可编辑区域名称
在我们原先编辑文字图片的区域就会出现这么一个可编辑的文本框，同样的可以在该区域内插入文字，图像和音频等。
可编辑区域创建成功
点击保存为模板。
模板保存
另存为这里的名称可以自己修改，然后继续点击保存。
模板名称设置
创建模板成功后可以发现右侧原先“练习”这个站点多了一个“Templates”文件夹，里面就存放了“首页.dwt”这个模板。
首页.dwt
我们点击新建一个基本页，选择HTML，单击进行创建。
创建空白网页
网页创建成功。
未命名网页
我们点击导航栏菜单的“修改”，选择下拉菜单里的“模板”，选择“套用模板到页”。
套用模板到页
选择我们刚创建的模板“首页”。
选择模板
可以看到，我们刚创建的空白网页变得跟模板差不多。
网页套用模板后效果
我们在下图最下方红色圈住的区域可以编辑文字，插入图像等。上方红色圈住的输入栏里输入我们这一网页的名称，它是网页的标题。
修改网页标题
点击保存为“春分立鸡蛋”。
网页保存及命名
按照相同的方法，继续创建新的网页。
创建其它网页
接下来，我们选中模板“首页.dwt”，单击一下该网页，选中我们红色圈住这个按钮，别名“矩形热点工具”，使用该工具创建热点。
选择矩形热点工具
选中“矩形热点工具”后，回到屏幕上会出现一个十字架，我们拉一个巨星框覆盖住“春分立鸡蛋”，然后下方的链接更改为我们刚创建的“春分立鸡蛋.html”。
修改热点链接
采用相同的方法，创建其它热点。
创建其它热点
然后点击保存全部。
保存全部
选择更新。
更新模板文件
更新完成后点击关闭。
更新页面成功
我们到浏览器里进行预览，效果如下。
首次网页效果
发现我们点击切换网页的时候会有一个蓝色线条的矩形框，影响网页的效果。我们回到Dreamweaver，进行修改。点击“首页.dwt”，单击代码，进入代码编辑界面。
“首页.dwt”代码
我们添加代码style=”outline:none”，如下图红色圈住的区域。然后点击全部保存。
添加代码
这个时候我们在浏览器里重新预览，发现问题得到解决。
第二次网页效果
下面是现在我们“练习”这个站点所包含的文件，红色圈住的为我们在浏览器浏览的主要网页。
“练习”站点
我们今天就暂且分享到这里，接下来小编还会继续分享相关技巧，进一步开发该站点。
网友评论