《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件第六章 CSS样式与模板》由会员分享，可在线阅读，更多相关《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件第六章 CSS样式与模板（32页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS4 网页设计与制作,第六章 CSS样式与模板,CSS样式应用 模版 库,主要内容,掌握Dreamweaver CS4中的CSS样式表的基本语法 掌握内部样式表和外部样式表的建立 掌握使用模板建立网页 掌握库的操作,本章目标,CSS是“Cascading Style Sheet”的缩写，称为“层叠样式表”，一般简称为“样式表”，“层叠”是指多个样式可以同时应用于同一个页面或网页中的同一个元素。 样式表是万维网协会（W3C）定义的一系列格式设置规则。使用样式表可以非常灵活地控制网页的外观，从精确的布局定位到特定的字体和样式，都可以用CSS样式来完成。 层叠样式表 (CS
2、S) 是一组格式设置规则，用于控制 Web 页内容的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表示形式分离开。页面内容（即 HTML 代码）存放在 HTML 文件中，而用于定义代码表示形式的 CSS 规则存放在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时无需对每个页面上的每个属性都进行更新。将内容与表示形式分离还会可以得到更加简练的 HTML 代码，这样将缩短浏览器加载时间，并为存在访问障碍的人员（例如，使用屏幕阅读器的人员）简化导航过程。,6.1 CSS样式应用
3、,CSS的基本语法：选择符 样式属性：取值；样式属性：取值； 其中，选择符可以是多种形式的，例如要定义HTML标记中body的样式，可使用如下的代码： Body color : black 这段代码定义了页面主体部分（即HTML中标记中的内容）的样式，color表示主体部分文字的颜色属性，black是颜色的属性值。因此这段代码实现的功能是将页面中的文字显示为黑色。,6.1.1 CSS样式表的基本语法,CSS样式中的选择符可以有如下几种： 标签选择符 类选择符 ID选择符 包含选择符 高级样式,6.1.1 CSS样式表的基本语法,CSS样式表的定义位置主要有以下几种。 CSS样式表定义在HEAD
4、内部 CSS 样式表嵌入BODY内部 在独立的外部文件中定义,6.1.2 CSS样式表的定义位置,如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方以最后定义的为准。例如下面的样式定义： Body color: red; font-size: 9pt P color: blue 那么在页面显示时，段落文字的字号会继承body的9像素，而颜色则按照最后定义的蓝色显示。 不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级，ID选择符、类选择符和HTML标记选择符，因为ID选择符是最后加到元素上的，所以优先级最高，其次是类选择符。例如： P colo
5、r: black .blue color: green #id1 color: red 如果对页面中的一个段落同时设置这3种样式，那么会按照优先权最高的ID 选择符显示为红色的文字。,6.1.3 CSS样式的冲突,新建“内部样式表”,6.1.4CSS样式表操作,“CSS样式”面板 “新建CSS规则”对话框,应用“外部样式表”,6.1.4CSS样式表操作,“CSS样式”面板 “链接外部样式表”对话框,新建“外部样式表”,6.1.4CSS样式表操作,“新建文档”对话,编辑样式,6.1.4CSS样式表操作,“CSS样式”面板,在制作网页的过程中，会发现大量的重复操作，例如有些网页的布局大体一致：在网
6、页上方是标题图片，右面是Banner，在网页下方是版权声明。在各个分支栏目中也有很多相同的元素。在对这些网站进行设计时，如果每一个网页都要制作一次，并且在需要更新时，也要每一个网页都要更新一次的话，工作量是可想而知的，在Dreamweaver中使用模板可以减少制作网站、更新网站的工作量，尤其是对于制作大型站点、静态页面，特别是需要整个站点风格统一的用户来讲，模板是必需的选择。,6.2模版,模板是一种特殊类型的文档，用于设计“固定的” 页面布局；然后便可以基于模板创建文档，创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪
7、些页面元素可以由模板用户进行编辑。模板创作者可以在文档中包括数种类型的模板区域。 使用模板可以一次更新多个页面。从模板创建的文档与该模板保持连接状态（除非以后分离该文档）。可以修改模板并立即更新基于该模板的所有文档中的设计。,6.2.1模板概述,6.2.2创建模板,创建新模板,将普通网页保存为模板,模板实例 “另存模板”对话框,6.2.3 模板操作,“模板”面板,6.2.4 使用模板创建网页,“模板对象”下级菜单 “模板”面板,6.2.4 使用模板创建网页,从模板新建网页,所谓可编辑区域，就是利用模板生成的新文档中可以被编辑的区域，即用于放置各个文档之间不同内容的区域。所谓不可编辑区域，就是多
8、个文档之间共有内容所在的区域，也成为锁定区域，在创建模板时，新模板中的所有区域都是锁定的，要使该模板有用，必须先定义一些可编辑区域，在编辑模板时，可以对编辑区域和锁定区域进行修改。那些利用模板生成的新文档中，只能对文档的可编辑区域进行修改，文档的锁定区域是不能修改的，从而维护文档风格的统一,6.2.5 模板的可编辑区域,打开“模板”面板，在该面板的模板列表区， 选择模板“new2”,单击右下角的编辑按钮 ，打开这个模板，选择插入可编辑区域.,1.创建可编辑区域,执行下列操作之一插入可编辑区域： 单击菜单“ 插入”“ 模板对象”“ 可编辑区域”。 右键单击，然后在快捷菜单中选择“ 模板”“ 新建
9、可编辑区域”。 在“ 插入” 面板的“ 常用” 类别中，单击“ 模板” 按钮，然后从弹出菜单中选择“ 可编辑区域”。 执行上述操作以后，弹出“新建可编辑区域”对话框，在“名称”中输入“e1”，单击“确定”按钮，就建立一个可编辑区域“e1”， 建立可编辑区域的模板“new2.dwt”，新添加的可编辑区域上面有一个标签，标签上是可编辑区域的名称,1.创建可编辑区域,在模板文档和基于模板的文档中，都可以方便地标识和选择模板区域。 （1）在文档窗口中选择可编辑区域。单击可编辑区域左的选项卡。 （2）在文档中查找和选择可编辑区域。 选择“修改”“模板”，然后从该子菜单底部的列表中选择区域的名称。 可编辑
10、区域在文档中被选定。,2选择可编辑区域,如果已经将模板文件的某个区域标记为可编辑，现在想要重新锁定该区域（使其在基于模板的文档中不可编辑），请使用“删除模板标记” 命令。 （1） 单击可编辑区域左上角的标签以选中它。 （2） 请执行下列操作之一： 单击菜单“修改”“模板”“删除模板标记”。 右键单击，然后在快捷菜单中选择“ 模板”“删除模板标记”。 该区域便不再可编辑,3.删除可编辑区域,修改模板后， Dreamweaver CS4会提示更新基于该模板的文档，但可以根据需要手动更新当前文档或整个站点。手动更新基于模板的文档与重新应用模板相同。 将模板更改应用于基于模板的当前文档 （1） 在“文
11、档” 窗口中打开该文档。 （2）选择“修改”“ 模板”“更新当前页”。 更新整个站点或使用指定模板的所有文档可以更新站点的所有页面，也可以只更新特定模板的页面。,6.2.6更新基于模板的网页文件,应用模板后的文档并不是一成不变的，当需要修改整个页面时可以将其脱离模板的控制。而且总受模板的控制有时确实也不太方便，如果可以让使用了模板的文档脱离模板的控制，用户就可以修改可编辑区域的内容，也可以修改不可编辑区域的内容了。 在Dreamweaver CS4的主窗口，单击菜单“文件”“新建”，弹出“新建文档”对话框，在左侧列表中选择“模板中的页”，在站点“学院网站”的模板下面的列表框中列出已建立的模板，
12、选择“new2”，单击“创建”按钮，建立一个基于模板“new2”的网页文件。 单击菜单“文件”“另存为”，在“另存为”对话框中，选择保存目录为“/本书实例/学院网站/7/”，保存文件为“实例6.html”。 单击菜单“修改”“模板”“从模板中分离”，如图6-50所示，分离后，可编辑区域标签没有了，这时不可编辑区域会自动转变为可编辑区域。,6.2.7 页面与模板分离,库文件的作用是将网页中经常用到的对象转化为库文件，然后作为一个对象插入到其他的网页之中。这样能够通过简单的操作创建页面内容了。模板使用的是整个网页，而库文件使用网页上的局部内容。 库是一种特殊的 Dreamweaver 文件，其中包
13、含可放置到 Web 页中的一组单个资源或资源副本。库中的这些资源称为库项目。可在库中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件。每当编辑某个库项目时，可以自动更新所有使用该项目的页面。,6.3库,1使用“库”面板建立库 在Dreamweaver CS4主窗口，单击菜单“窗口”“资源”，将显示“资源”面板，在“资源”面板中，选择“库”类别， 单击面板底部的新建库项目 按钮，就建立一个文件名为“Untitled”的库. 2. 使用网页文件建立库 （1） 在“文档”窗口中，选择要保存为库项目的文档部分。 （2）执行下列操作之一： 将选定内容拖入“ 库” 类别 。 单击“
14、库”类别底部的“新建库项目” 按钮 。 选择“修改”“库”“增加对象到库”。 （3）为新的库项目键入一个名称，然后按 Enter。 Dreamweaver 将每个库项目作为一个单独的文件（文件扩展名为.lbi）保存在站点本地根文件夹下的 Library 文件夹中,6.3.1 库建立,在Dreamweaver CS4 中，对库的大部分操作主要是通过“库”面板实现的。在面板的左面单击“库按钮” 图标即可显示“库”面板。,6.3.2库操作,当向页面添加库项目时，实际内容将随该库项目的引用一起插入到文档中。 （1）在“文档”窗口中设置插入点。 （2）在“资源”面板中，选择“库”类别 。 （3）执行下列
15、操作之一： 将一个库项目从“资源”面板拖动到“文档”窗口中。 选择一个库项目，然后单击“插入”。,6.3.2 在网页中插入库,1更新当前文档以使用所有库项目的当前版本。 单击菜单“修改”“库”“更新当前页”。 2更新整个站点或所有使用特定库项目的文档 （1）单击菜单“修改”“库”“更新页面”。打开“更新页面”对话框，如图6-53所示。 （2） 在“查看”对应的列表框中，指定要更新的内容： 若要更新选定站点中的所有页面，以使用所有库项目的当前版本，请选择“整个站点”， 然后从相邻的列表框中选择站点名称。 图6-53“更新页面”对话框 若要更新当前站点中使用该库项目的所有页面，请选择“文件使用”，然后从相邻的从相邻的列表框中选择库项目的名称。 （3）在“更新”选项中选定“库项目”。 （4）如果不想查看 Dreamweaver 更新文件的记录，可取消选择“显示记录”选项；否则，可让该选项处于选中状态。 （5） 单击“开始”按钮更新文件。如果选择了“显示记录”选项，Dreamweaver 将提供关于它试图更新的文件的信息，包括它们是否成功更新的信息。 （6） 单击“关闭”按钮。,6.3.3 更新库,本部分结束,
