第八讲CSS-模板和库项目

第八讲CSS、模板和库项目•CSS样式表是Dreamweaver中的重点和难点，通过本章的学习，大家要理解CSS样式表的作用。掌握如何建立CSS样式表，如何运用CSS样式表，如何设置CSS样式表的各项属性。•在DreamweaverMX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便地进行网站的维护。本章介绍模板与库项目的基础知识和应用：如何创建模板以及在网页设计中应用模板，如何创建和设置库项目以及向网页添加库项目等。本章内容学习目标•利用CSS技术创建和应用CSS样式，对网页进行格式设置和特殊处理。•掌握模板和库项目的创建方法；•掌握应用模板设计网页的方法；•掌握将库项目添加到网页中的方法；•掌握用模板和库更新页面的方法。•模板：实际上是一种特殊网页，可以通过模板页面产生许多形式相似的网页。•库项目：指网站上经常重复使用或更新的页面元素（如图象、文本和其他对象），将它们存储在库中进行管理和维护。•在DreamweaverMX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便的进行网站的维护。8．1创建模板1.将现有文档存为模板2.定义模板的可编辑区3.修改模板1.将现有文档存为模板•实例1创建模板①建立站点②新建网页③网页另存为模板：选择菜单→文件→另存为模板•单击保存按钮。在站点根目录下会自动增加一个文件夹Templates，新保存的模板就在该文件夹中。模板文件扩展名为.dwt。•打开资源面板并单击“模板”按钮，可以看到新建模板。8.1.2定义模板的可编辑区•在模板中，有两种类型的区域：可编辑区域和锁定区域。在应用了模板的网页中，模板部分是锁定的，其中的内容都为不可编辑，所以必须在模板中定义可以编辑的区域以使用该模板来创建新的文档。•可以像普通网页一样在文档窗口中打开模板文件进行修改和编辑。•实例2为模板index.dwt定义可编辑区域。①打开index.dwt模板；②清理模板文档：只保留所有页面中都需要的公共元素；③定义可编辑区域：选择菜单命令“插入→模板对象→可编辑区域”；或插入面板→选择模板标签→可编辑区域。④在模板页中，可编辑区域用下面的标记来表示：!--TemplateBeginEditablename=EditRegionMain--!--TemplateEndEditable--⑤在模板中，还有两个默认的可编辑区域：页面标题和页面头部中的区域。因此，应用了该模板的文档，可以更改文档的标题，可以在页面插入客户端脚本及定义CSS样式表，而其他区域均是不可编辑的。8.2使用模板1.使用模板创建新文档2.对现有文档应用模板3.使用模板更新文档8.2.1使用模板创建新文档•实例３利用模板index.dwt创建新文档。①选择菜单命令“文件→新建”，打开新建文档对话框，选择“模板”选项卡，选择站点模板，在右边的预览视图中给出模板示意图。如图所示：②选中“当模板改变时更新页面”选项，单击“创建”按钮，进入新文档设计视图。③在新文档中，光标只能移动到可编辑区。④在可编辑区EditRegionMain中插入相应的表格、图象和文字。⑤可以更改文档标题。8.2.2对已有文档应用模板•实例4对下列表单应用模板index.dwt。①打开表单网页文档；②展开资源面板的模板窗口，选中模板index.dwt，单击面板下面的“应用”按钮。显示如下对话框：其中提示当前页在模板中不存在相应的区域：Documentbody和Documenthead。这是由于在当前文档的头部（head）中不存在JavaScript函数，而在主体（body）中不存在内容的原因。•选中对话框中间窗口“名称”列下的可编辑区域“Documentbody”，在窗口下的“将内容移到新区域”下拉列表中选择“EditRegionMain”，其出现在窗口“已解析”列下对应行，即让当前页面的body部分内容位于应用模板的可编辑区域EditRegionMain中；再选中”Documenthead”将其移到head区域中，如图所示：④单击“确定”，得到如下所示页面设计视图。8.2.3使用模板更新文档•当需要对模板的某些方面进行修改，此时可在DreamweaverMX中打开模板文件，按照需要进行相应的修改工作。在保存模板时会弹出如下对话框，询问是否需要更新使用该模板来创建的文件；选择“更新”，则自动对所有相关文件进行更新工作。8.3库项目及其应用•创建库项目•向网页添加库项目•利用库项目更新网站8.3.1创建库项目•在一个库项目中，可以包含文本、表格、表单、图象和多媒体等内容。创建库项目时，先选中文档中的需要作为库项目的对象，选择菜单命令“修改→库→增加对象到库”来创建项目，也可以在资源面板库类窗口中单击“新建库项目”按钮来创建。•实例5创建一个库项目，在项目中包含一个表格。①在DreamweaverMX中，新建网页文件。②向网页中插入一个2行3列的表，设定表格边框为5，间距为2，边框颜色为蓝色。③选定页面上的表格，选择菜单命令“修改→库→增加对象到库”，在当前站点根目录下自动增加一个Library文件夹和文件“未命名.lbi”。在库类窗口中同时给出该库项目的样式图。④将新项目重命名为table，Library目录中的文件的名称也自动改变为table.lbi8.3.2向网页添加库项目•实例6将库项目添加到index.dwt中。•打开文档；•确定插入位置；•打开资源面板并切换到库类别，选中库项目table，单击面板底部的“插入”按钮，或者直接将库项目拖动到目标位置释放，该项目就插入到网页中。8.3.3利用库项目更新网站•在对库项目进行修改后，一般在保存该库项目时，就会打开如下对话框，询问是否更新添加了该库项目的文件，如果选择“更新”按钮，就会打开对话框如图所示。•使用模板和库，极大地提高了网站开发的速度和效率，也极大改善了网站的维护工作。8.4CSS样式表概述为什么用CSS样式•如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。8.4CSS样式表概述什么是CSS样式•CSS（CascadingStyleSheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。8.4CSS样式表概述什么是CSS样式CSS样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。8.4CSS样式表概述认识CSS面板显示所有样式显示当前样式内部样式表样式名称样式及属性值8.5CSS的分类•外部链接样式表(Externallinkingcss):实际上是一个仅包含样式规则的外部文本文件，其后缀名为“CSS”，当编辑此文件时，所有与此样式表链接的文档将全被更新。•内嵌式样式表(EmbeddedCSS)：嵌在HTML代码的style标记之间。•内联式样式表(InlinkCSS):直接在某一HTML标记后添加样式代码。•优先程度：内联式内嵌式外部链接（1）显示“CSS样式”面板的方式：打开“窗口”菜单——“CSS”样式（2）样式视图CSS样式面板CSS样式在网页中的三种存在方式•外部文件方式：CSS以文件的形式存在，在HTML文档头通过文件引用进行控制。CSS文件的引用是在head/head标签之间写下列语句:linkrel=“stylesheet”href=“文件名.CSS”type=“text/css”不以文件的形式存在,仅作用于本文档,直接定义在head/head之间.Styletype=“text/css”!—P{font-family:“宋体”font-size:9pt;color:blue}H2{font-family:“宋体”;font-size:13pt;color:red}--/style内嵌样式直接插入式•只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。•tablestyle=“color:red;font-size:10pt”在统一站点风格上，用第一方式，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。如果是新建CSS文件,有两种方法:方法一:可以通过菜单”文件/新建/CSS样式”方法二:通过进入CSS面板,点击右下角的”新建CSS样式”接下来,我们来看第二种方法创建新的CSS样式•创建自定义样式(也就是选择器类型中选择”类”)：名称须以.开头，并且可以包含任何字母和数字组合。例如.myhead1。如果您没有输入开头的句点，Dreamweaver将自动为您输入。在”定义在:”的选项中,有两个选择,第一个表示新建CSS文件,这时,你在刚才的”名称:”后面的文本框中输入的就是CSS文件名;如果你选择”仅对该文档”,则是以形如”.myhead1”方式出现在代码中.•重定义HTML标签：重定义特定HTML标签的默认格式。对文档中的任何标签都可以应用CSS样式.•acronym从字义上理解，是取首字母的缩写词，abbr是缩写，在应用过程中，两个标签看起来差不多，但还是有区别的。acronymtitle=cssCascadingStyleSheets/acronymabbrtitle=psphotoshop/abbr上面这两行代码是放在页面中的.然后再设置abbr或acronym标签注意:IE6中可能不支持,IE7支持•更多的HTML标签的信息请浏览附录:html标记大全•选择高级：重新定义一些标签的特定组合格式。共有四种:a:link,a:visited,a:hover,a:active•a:link当文字作为链接时,a:visited当其链接的网页已被浏览时,a:hover表示光标移向链接文字时,a:active当超链接文字被选中时•在网页中练习这四种的效果•外部：将以文件的形式存在。•仅对该文档：内嵌式样式。CSS的属性•字体：font-family•大小：font-size•粗细：font-weight•样式：font-style•行高：line-height•修饰：text-decoration•颜色：color定义层叠样式表•类型：定义CSS样式的基本类型设置。•背景：对CSS样式的背景设置进行定义，可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。•区块：精确定义整段文本中文字的字距、对齐方式等属性。•盒子：可以定义特定元素的大小及其与周围元素的间距等属性。•边框面板：可以对控制元素周围边界的样式属性进行定义。•列表面板：定义列表的样式属性。•定位面板：定义层的样式属性。•扩展样式面板：主要是用来控制那些不被大多数浏览器所支持的功能。•注意：那些在样式定义对话框中以星号（*）标注的样式属性是不会在文档窗口中显示的，只有浏览器预览的时候才能看到。•应用样式表课堂作业•对上海凯泉生物科技有限公司主页的CSS样式导出为独立文件。滤镜特效有时为什么看不到•有几种滤镜的效果对文字作用时，必须在定义“box”中的Width参数之后，才能显示出来。这类滤镜包括：dropshadow,blur,glow,alpha,wave等.