第八讲CSS-模板和库项目ppt课件

1、第八讲 CSS、模板和库工程 CSS款式表是Dreamweaver中的重点和难点，经过本章的学习，大家要了解CSS款式表的作用。掌握如何建立CSS款式表，如何运用CSS款式表，如何设置CSS款式表的各项属性。 在Dreamweaver MX中利用模板和库工程可以创建具有一致风格的网页，同时也能更方便地进展网站的维护。本章引见模板与库工程的根底知识和运用：如何创建模板以及在网页设计中运用模板，如何创建和设置库工程以及向网页添加库工程等。本章内容学习目的利用CSS技术创建和运用CSS款式，对网页进展格式设置和特殊处置。掌握模板和库工程的创建方法；掌握运用模板设计网页的方法；掌握将库工程添加到网页中

2、的方法；掌握用模板和库更新页面的方法。模板：实践上是一种特殊网页，可以经过模板页面产生许多方式类似的网页。库工程：指网站上经常反复运用或更新的页面元素如图象、文本和其他对象，将它们存储在库中进展管理和维护。在Dreamweaver MX中利用模板和库工程可以创建具有一致风格的网页，同时也能更方便的进展网站的维护。81 创建模板将现有文档存为模板定义模板的可编辑区修正模板将现有文档存为模板实例1 创建模板建立站点新建网页网页另存为模板：选择菜单文件另存为模板单击保管按钮。在站点根目录下会自动添加一个文件夹Templates，新保管的模板就在该文件夹中。模板文件扩展名为 .dwt。翻开资源面板并单

3、击“模板按钮，可以看到新建模板。8.1.2 定义模板的可编辑区在模板中，有两种类型的区域：可编辑区域和锁定区域。在运用了模板的网页中，模板部分是锁定的，其中的内容都为不可编辑，所以必需在模板中定义可以编辑的区域以运用该模板来创建新的文档。可以像普通网页一样在文档窗口中翻开模板文件进展修正和编辑。实例2 为模板index.dwt定义可编辑区域。翻开index.dwt模板；清理模板文档：只保管一切页面中都需求的公共元素；定义可编辑区域：选择菜单命令“插入模板对象可编辑区域；或插入面板选择模板标签可编辑区域。在模板页中，可编辑区域用下面的标志来表示： 在模板中，还有两个默许的可编辑区域：页面标题和页

4、面头部中的区域。因此，运用了该模板的文档，可以更改文档的标题，可以在页面插入客户端脚本及定义CSS款式表，而其他区域均是不可编辑的。8.2 运用模板运用模板创建新文档对现有文档运用模板运用模板更新文档8.2.1 运用模板创建新文档实例利用模板index.dwt创建新文档。选择菜单命令“文件新建，翻开新建文档对话框，选择“模板选项卡，选择站点模板，在右边的预览视图中给出模板表示图。如下图：选中“当模板改动时更新页面选项，单击“创建按钮，进入新文档设计视图。在新文档中，光标只能挪动到可编辑区。在可编辑区EditRegionMain中插入相应的表格、图象和文字。可以更改文档标题。8.2.2 对已有文

5、档运用模板实例 4 对以下表单 运用模板index.dwt。翻开表单网页文档；展开资源面板的模板窗口，选中模板index.dwt，单击面板下面的“运用按钮。显示如下对话框： 其中提示当前页在模板中不存在相应的区域：Document body和Document head。这是由于在当前文档的头部head中不存在JavaScript函数，而在主体body中不存在内容的缘由。选中对话框中间窗口“称号列下的可编辑区域“Document body，在窗口下的“将内容移到新区域下拉列表中选择“EditRegionMain，其出如今窗口“已解析列下对应行，即让当前页面的body部分内容位于运用模板的可编辑区

6、域EditRegionMain中；再选中Document head将其移到head区域中，如下图：单击“确定，得到如下所示页面设计视图。8.2.3 运用模板更新文档当需求对模板的某些方面进展修正，此时可在Dreamweaver MX中翻开模板文件，按照需求进展相应的修正任务。在保管模板时会弹出如下对话框，讯问能否需求更新运用该模板来创建的文件；选择“更新，那么自动对一切相关文件进展更新任务。8.3 库工程及其运用创建库工程向网页添加库工程利用库工程更新网站8.3.1 创建库工程在一个库工程中，可以包含文本、表格、表单、图象和多媒体等内容。创建库工程时，先选中文档中的需求作为库工程的对象，选择菜

7、单命令“修正库添加对象到库来创建工程，也可以在资源面板库类窗口中单击“新建库工程按钮来创建。实例 5 创建一个库工程，在工程中包含一个表格。在Dreamweaver MX中，新建网页文件。向网页中插入一个2行3列的表，设定表格边框为5，间距为2，边框颜色为蓝色。选定页面上的表格，选择菜单命令“修正库添加对象到库，在当前站点根目录下自动添加一个Library文件夹和文件“未命名.lbi。在库类窗口中同时给出该库工程的款式图。将新工程重命名为table，Library目录中的文件的称号也自动改动为table.lbi8.3.2 向网页添加库工程实例 6 将库工程添加到index.dwt中。翻开文档；

8、确定插入位置；翻开资源面板并切换到库类别，选中库工程table，单击面板底部的“插入按钮，或者直接将库工程拖动到目的位置释放，该工程就插入到网页中。8.3.3 利用库工程更新网站在对库工程进展修正后，普通在保管该库工程时，就会翻开如下对话框，讯问能否更新添加了该库工程的文件，假设选择“更新按钮，就会翻开对话框如下图。运用模板和库，极大地提高了网站开发的速度和效率，也极大改善了网站的维护任务。8.4CSS款式表概述为什么用CSS款式如今网页排版格式越来越来复杂，假设要对多个网页的同样格式一一进展设计，那么就会给制造人员带来很多的任务量，所以处理方法是采用CSS款式来一次性对假设干个文档的格式进展

9、控制。8.4CSS款式表概述什么是CSS款式CSSCascading Style Sheet，层叠款式表 技术是一种格式化网页的规范方式，它扩展了HTML的功能，使网页设计者可以以更有效的方式设置网页格式。8.4CSS款式表概述什么是CSS款式CSS款式存于款式表文件中，然后在多个网页中同时运用该款式表中的款式 ，就能确保多个网页具有一致的格式，并且可以随时更新只需更改款式表文件就可以使一切网页自动更新，从而大大降低了网站的开发和维护任务量。8.4CSS款式表概述认识CSS面板显示一切款式显示当前款式内部款式表款式称号款式及属性值8.5 CSS的分类外部链接款式表(External linki

10、ng css):实践上是一个仅包含款式规那么的外部文本文件，其后缀名为“CSS，当编辑此文件时，一切与此款式表链接的文档将全被更新。内嵌式款式表(Embedded CSS)：嵌在HTML代码的标志之间。内联式款式表(Inlink CSS):直接在某一HTML标志后添加款式代码。优先程度：内联式内嵌式外部链接1显示“CSS 款式面板的方式： 翻开“窗口菜单“CSS款式 2款式视图 CSS款式面板CSS款式在网页中的三种存在方式外部文件方式：CSS以文件的方式存在，在HTML文档头经过文件援用进展控制。 CSS文件的援用是在标签之间写以下语句: 不以文件的方式存在,仅作用于本文档,直接定义在 之间

11、.内嵌款式直接插入式只需求在每个HTML标签后书写CSS属性。作用范围只限于本标签。 在一致站点风格上，用第一方式，在某个网页风格一致上，用第二种方式，而在网页内部某个标签的详细调整上，用第三种方式。 假设是新建CSS文件,有两种方法:方法一:可以经过菜单文件/新建/CSS款式方法二:经过进入CSS面板,点击右下角的新建CSS款式接下来,我们来看第二种方法 创建新的 CSS 款式创建自定义款式(也就是选择器类型中选择类)：称号须以.开头，并且可以包含任何字母和数字组合。例如 .myhead1。假设您没有输入开头的句点，Dreamweaver 将自动为您输入。在定义在:的选项中,有两个选择,第一

12、个表示新建CSS文件,这时,他在刚刚的称号:后面的文本框中输入的就是CSS文件名;假设他选择仅对该文档,那么是以形如.myhead1方式出如今代码中.重定义HTML标签：重定义特定 HTML 标签的默许格式。对文档中的任何标签都可以运用 CSS 款式 .acronym从字义上了解，是取首字母的缩写词，abbr是缩写，在运用过程中，两个标签看起来差不多，但还是有区别的。Cascading Style Sheetsphotoshop上面这两行代码是放在页面中的.然后再设置 abbr或acronym标签留意:IE6中能够不支持,IE7支持更多的HTML标签的信息请阅读附录:html标志大全选择高级：

13、重新定义一些标签的特定组合格式。共有四种: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 款式的背景设置进展定义，可以对网页中的任何元素运用背景属性。例如，创建一个款式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。区块：准确定义整段文本中文字的字距、对齐方式等属性。 盒子：可以定义特定元素的大小及其与周围元素的间距等属性。 边框面板：可以对控制元素周围边境的款式属性进展定义。列外表板：定义列表的款式属性。定位面板：定义层的款式属性。