CSS模板和库项目课程.ppt

8.4CSS样式表概述为什么用CSS样式 如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。 8.4CSS样式表概述什么是CSS样式 CSS（Cascading Style Sheet，层叠样式表 ）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 8.4CSS样式表概述什么是CSS样式 CSS样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式 ，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。 8.4CSS样式表概述认识CSS面板 显示所有样式 显示当前样式 内部样式表 样式名称 样式及属性值 8.5 CSS的分类 外部链接样式表(External linking css):实际上是一个仅包含样式规则的外部文本文件，其后缀名为“CSS”，当编辑此文件时，所有与此样式表链接的文档将全被更新。 内嵌式样式表(Embedded CSS)：嵌在HTML代码的style标记之间。 内联式样式表(Inlink CSS):直接在某一HTML标记后添加样式代码。 优先程度：内联式内嵌式外部链接 （1）显示“CSS 样式”面板的方式： 打开“窗口”菜单——“CSS”样式 （2）样式视图 CSS样式面板 第八讲 CSS、模板和库项目 CSS样式表是Dreamweaver中的重点和难点，通过本章的学习，大家要理解CSS样式表的作用。掌握如何建立CSS样式表，如何运用CSS样式表，如何设置CSS样式表的各项属性。 在Dreamweaver MX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便地进行网站的维护。本章介绍模板与库项目的基础知识和应用：如何创建模板以及在网页设计中应用模板，如何创建和设置库项目以及向网页添加库项目等。 本章内容 学习目标 利用CSS技术创建和应用CSS样式，对网页进行格式设置和特殊处理。 掌握模板和库项目的创建方法； 掌握应用模板设计网页的方法； 掌握将库项目添加到网页中的方法； 掌握用模板和库更新页面的方法。 模板：实际上是一种特殊网页，可以通过模板页面产生许多形式相似的网页。 库项目：指网站上经常重复使用或更新的页面元素（如图象、文本和其他对象），将它们存储在库中进行管理和维护。 在Dreamweaver MX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便的进行网站的维护。 8．1 创建模板 将现有文档存为模板 定义模板的可编辑区 修改模板 将现有文档存为模板 实例1 创建模板 建立站点 新建网页 网页另存为模板： 选择菜单→文件→另存为模板 单击保存按钮。在站点根目录下会自动增加一个文件夹Templates，新保存的模板就在该文件夹中。模板文件扩展名为 .dwt。 打开资源面板并单击“模板”按钮，可以看到新建模板。 8.1.2 定义模板的可编辑区 在模板中，有两种类型的区域：可编辑区域和锁定区域。在应用了模板的网页中，模板部分是锁定的，其中的内容都为不可编辑，所以必须在模板中定义可以编辑的区域以使用该模板来创建新的文档。 可以像普通网页一样在文档窗口中打开模板文件进行修改和编辑。 实例2 为模板index.dwt定义可编辑区域。 打开index.dwt模板； 清理模板文档：只保留所有页面中都需要的公共元素； 定义可编辑区域：选择菜单命令“插入→模板对象→可编辑区域”；或插入面板→选择模板标签→可编辑区域。 在模板页中，可编辑区域用下面的标记来表示： !-- TemplateBeginEditable name=EditRegionMain -- !-- TemplateEndEditable -- 在模板中，还有两个默认的可编辑区域：页面标题和页面头部中的区域。因此，应用了该模板的文档，可以更改文档的标题，可以在页面插入客户端脚本及定义CSS样式表，而其他区域均是不可编辑的。 8.2 使用模板 使用模板创建新文档 对现有文档应用模板 使用模板更新文档 8.2.1 使用模板创建新文档 实例３　利用模板index.dwt创建新文档。 选择菜单命令“文件→新建”，打开新建文档对话框，选择“模板”选项卡，选择站点模板，在右边的预览视图中给出模板示意图。如图所示： 选中“当模板改变时更新页面”选项，单击“创建”按钮，进入新文档设计视图。 在新文档中，光标只能移动到可编辑区。 在可编辑区EditRegionMain中插入相应的表格、图象和文字。 可以更改文档