第8章 CSS和模板(网页制作案例教程课件).ppt

网页制作案例教程 第1章：网站与网页概述 第2章：HTML入门 第3章：网页基本编辑 第4章：表格 第5章：框架 第6章：AP Div 第7章：表单 第8章：CSS和模板 第9章：网页图形处理工具Fireworks CS5 第10章：图像处理工具Photoshop CS5 第11章：动画制作工具Flash CS5 第12章：网站制作综合应用 第8章 CSS和模板 了解CSS和模板的基本概念。 掌握创建和应用。 掌握模板的创建和应用。 8.1 了解CSS 了解什么是CSS样式，它与HTML的区别。 了解CSS样式的优势 。 了解CSS样式的基本语法。 了解CSS样式的运用方式。 8.2 使用CSS面板 8.3 在Dreamweaver中创建与应用CSS 8.4 CSS属性 在“CSS规则定义”对话框的“分类”列表框中，共有类型、背景、区块、方框、边框、列表、定位、扩展等八大类。 8.5 设计时间样式表 设计时间样式表可以在设计网页时将已有的CSS样式表隐藏，显示并应用其它样式表。利用设计时间样式表这一功能，可以在文档中查看同一网页内容应用不同外部样式表的效果。 8.6 模板概述 8.7 创建模板 制作模板和制作一个普通的页面完全相同，只是不需把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公共部分，中间区域用各个页面的具体内容来填充。 可直接创建空白的模板，也可以将已有文档转换为模板 模板中至少还要创建一个可编辑区域，否则基于该模板的页面是不可编辑的 为了便于管理，将模板存放在站点根目录下的“Templates”文件夹中 8.8 模板的应用 8.9 小结 本章介绍什么是CSS、CSS的基本语法等基础知识，学习利用“CSS”面板管理规则。 本章介绍如何在Dreamweaver中创建与应用CSS样式表，同时结合实例讲解综合运用CSS的属性进行网页布局设计。 本章介绍了模板的基本概念、模板的特点和制作模板的方法，并介绍如何使用模板，为读者设计中、大型网站打下基础。 8.6.1 什么是模板 模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，能够极大的提高工作效率。它是一种特殊类型的文档，文件扩展名为“.dwt”。 P148 8.6.1 什么是模板 8.6.2 模板的优点 一、制作方便，利用模板可以制作具有相同外观结构的 网页，提高了制作效率。 二、更改方便，更改模板就使得整个网站采用相同模板 的页面都得到更新。 三、模板与基于该模板的网页文件之间保持连接状态， 对于相同的内容可保证完全的一致。 8.7.1 直接创建模板 一、通过“资源”面板直接创建模板 二、利用“资源”面板可以查看已有模板、新建模板、修改模板和删除模板 8.7.2 将已有文档转换为模板 “文件“/”另存为模板“: 另存为模板 8.7.3 创建可编辑区域 设计者可以决定模板中的哪些部分是可编辑的，而哪些是不可编辑的，这就要通过创建可编辑区域来实现上述功能。 建好模板、定好光标位置，“插入”/“模板对象”/“可编辑区域” ： 新建可编辑区域对话框 8.7.3 创建可编辑区域 8.8.1 应用模板创建新文档 8.8.2 将模板应用于现有文档 一、打开已经保存好的网页，运用“选择模板”对话框设 置，将模板应用于网页。 二、把资源面板中要应用的新模板拖到文档中即可应用 新模板。 三、 打开模板，点击“应用”按钮，即可应用新模板。 8.8.3 更新应用模板的文档 当模板中的内容发生改变时，保存模板后会自动弹出更新页面的对话框，点击更新按钮即可更新所有应用该模板的文档。 8.8.4 将文档从模板中分离 先从模板创建页面，然后再从模板中分离出来成为了独立的页面，并且保留网页中原内容。 “修改”|“模板”|“从模板中分离” 分离之后的文档就是普通的网页文档了，和模板再也没有任何联系，因此，模板再次修改也不会更新这些分离出来的文档了 。 实例应用——用模板创建网页 用模板的方法，实现网站的建设 * 学习目标： 8.1.1 什么是CSS CSS是“Cascading Styles Sheets”的缩写，中文 名称是层叠样式表。用于控制网页样式并允许将样式与 网页内容分离的一种标记性语言。 P137