网页制作案例教程 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 陈建孝 陆锡聪 余晓春 江玉珍 第8章 CSS和模板.pptVIP

网页制作案例教程 第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的属性进行网页布局设计。 本章介绍了模板的基本概念、模板的特点和制作模板的方法，并介绍如何使用模板，为读者设计中、大型网站打下基础。 “格式”|“CSS样式”|“设计时间”： 设计时显示 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 将文档从模板中分离 先从模板创建页面，然后再从模板中分离出来成为了独立的页面，并且保留网页中原内容。 “修改”|“模板”|“从模板中分离” 分离之后的文档就是普通的网页文档了，和模板再也没有任何联系，因此，模板再次修改也不会更新这些分离出来的文档了 。 实例应用——用模板创建网页 用模板的方法，实现网站的建设 * 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下