学习情境1：制作一个典型的网站框架
工作任务：
制作一个典型的网站框架并将其应用于网页
技能目标
1、掌握创建和应用模板的方法
2、掌握使用CSS美化网页的方法
3、掌握网站的测试如发布
1.1 任务描述
在开发网站时，保持网站的风格一致是很重要的。或者说在设计网站时，有时候多个页面上存在内容相同的地方。这时候提高开发效率的一种方法就是先制作一个模板，其他页面使用这个模板进行进一步的设计。如图1-1和图1-2 是一个名为“WEB设计论坛”网站的两个页面，在页面的左上角是网站的Logo，及简单的搜索提示，接下来是网站的导航栏，中间部分是两个页面不同的地方，而最下面网站版权信息也是一样的。在制作这两个网页时，其实是先制作了一个模板，模板在DreamWeaver中的设计效果如图1-3所示，将不同的部分制作了一个可编辑区，从而实现了制作风格一致的网站的快速开发，本章我们就来学习模板的创建和使用，以及使用样式表美化网页，最后还要向大家介绍一下网站的测试与发布的知识。
图1-1 注册页面效果图
图1-2 网站首页效果图
1.2 任务实施
为了完成任务描述里的网页效果，需要先设计一个模板，然后其他页面套用这个模板，根据页面本身需要实现的功能在可编辑区域内进行编码设计。
1.2.1制作模板并应用到其他页面
1.创建模板
Step1：新建一个站点，命名为WebDesignForum。
Step2：在站点下添加一个新文件，命名为home.html,其设计效果如图1-3所示，执行“文件”—“另存为模板”命令，命名为home.dwt，则在站点根目录下会自动创建一个“Template”文件夹，模板文件home.dwt就存放在该文件夹下面。
2.定义可编辑区
可编辑区是指基于模板创建的页面中可以更改的内容，基于模板的页面中不可更改的部分成为“锁定区域”或“不可编辑区域”。锁定区域用来体现网站统一的风格，如网站的Logo、导航条等，可编辑区是不同网页不同内容的体现，创建模板必须创建可编辑区，否则模板便没有任何的意义。
设置可编辑区的方法如下：
Step1：打开模板文件home.dwt，将光标定位在网站导航条和版权信息之间。
Step2：执行“插入”—“模板对象”—“可编辑区与”命令。
Step3：在名称文本框中输入可编辑区的名称Content。
Step4：单击“确定”按钮，即在模板中创建一个可编辑区域。
说明：如果需要创建多个可编辑区域，操作方法同上面四步。
home.dwt代码如下：