文档介绍：实验五 利用CSS技术、模板和库设计网页
学号： 姓名： 日期：
1、实验目的：
了解CSS技术、模板和库的相关概念和操作方法，理解站点统一风格的重要性。
2、实验环境：
Windows XP、Dreamweaver
3、实验内容：
利用CSS设置文字效果
利用CSS+DIV布局网页
利用模板统一站点风格
利用库制作网站统一logo
4、实验过程：
一、<style type="text/css">
body{background-color:#FFCCCC}
h3{color:#00FFFF}
</style>
二、<style type="text/css">
<!--
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
#container {width:100%}
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
-->
</style>
</head>
<body>
<<div id="container">哎，好好学****天天向上…
<div id="Header">怎么办啊！
</div
<div id="PageBody">你看不懂吗！不会把
<div id="Sidebar">哈哈哈哈哈哈
</div>
<div id="MainBody">大家好
</div>
</div>
<div id="Footer">层和CSS的应用
</div>
</div>
三、保存模板
执行菜单“File→Save As Template”命令，选择“另存为模板”，在打开的系统对话框中输入模板名称后单击“Save”按钮。保存后，此时窗口中的标题栏已经发生变化，在标题栏中出现了“<>”的字样，表示当前编辑的页面已经是模板了。
设置模板可编辑区
最重要的工作就是设置模板可编辑区域，否则的话，使用此模板生成的页面将是无法编辑的。首先我们选中页面标题区的单元格，然后执行菜单“Modify/Templates/New Editable Region”命令建立一个新的可编辑区。此时会打开一个对话框(如图2)，输入可编辑区域名称为“edit1”，然后按下“OK”按钮，这样页面中就生成了一个{}包围的可编辑区域的标记，表示当前区域为可编辑区。同样道理设置好正文可编辑区域。并将模板保存退出。
应用模板
在Dreamweaver中建立一个新页面，然后执行菜单“Window/Templates”命令打开模板控制面板，在模板列表区域选择一个已经建立好的模板，然后单击面板上的“Apply”按钮即可将此模板