1 / 48

第八讲 CSS、 摸板和库项目

第八讲 CSS、 摸板和库项目. 内容简介： CSS 样式表是 Dreamweaver 中的重点和难点，通过本章的学习，大家要理解 CSS 样式表的作用。掌握如何建立 CSS 样式表，如何运用 CSS 样式表，如何设置 CSS 样式表的各项属性。 在 Dreamweaver MX 中利用摸板和库项目能够创建具有统一风格的网页，同时也能更方便地进行网站的维护。本章介绍模板与库项目的基础知识和应用：如何创建模板以及在网页设计中应用模板，如何创建和设置库项目以及向网页添加库项目等。. 学习目标. 掌握模板和库项目的创建方法； 掌握应用模板设计网页的方法；

tavi
Télécharger la présentation

第八讲 CSS、 摸板和库项目

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第八讲 CSS、摸板和库项目

  2. 内容简介： CSS样式表是Dreamweaver中的重点和难点，通过本章的学习，大家要理解CSS样式表的作用。掌握如何建立CSS样式表，如何运用CSS样式表，如何设置CSS样式表的各项属性。 • 在Dreamweaver MX中利用摸板和库项目能够创建具有统一风格的网页，同时也能更方便地进行网站的维护。本章介绍模板与库项目的基础知识和应用：如何创建模板以及在网页设计中应用模板，如何创建和设置库项目以及向网页添加库项目等。

  3. 学习目标 • 掌握模板和库项目的创建方法； • 掌握应用模板设计网页的方法； • 掌握将库项目添加到网页中的方法； • 掌握用模板和库更新页面的方法。

  4. 模板：实际上是一种特殊网页，可以通过模板页面产生许多形式相似的网页。模板：实际上是一种特殊网页，可以通过模板页面产生许多形式相似的网页。 • 库项目：指网站上经常重复使用或更新的页面元素（如图象、文本和其他对象），将它们存储在库中进行管理和维护。 • 在Dreamweaver MX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便的进行网站的维护。

  5. 8．1 创建模板 • 将现有文档存为模板 • 定义模板的可编辑区 • 修改模板

  6. 将现有文档存为模板 • 实例1 创建模板 • 建立站点 • 新建网页

  7. 网页另存为模板： 选择菜单→文件→另存为模板 • 单击保存按钮。在站点根目录下会自动增加一个文件夹Templates，新保存的模板就在该文件夹中。模板文件扩展名为 .dwt。 • 打开资源面板并单击“模板”按钮，可以看到新建模板。

  8. 8.1.2 定义模板的可编辑区 • 在模板中，有两种类型的区域：可编辑区域和锁定区域。在应用了模板的网页中，模板部分是锁定的，其中的内容都为不可编辑，所以必须在模板中定义可以编辑的区域以使用该模板来创建新的文档。 • 可以像普通网页一样在文档窗口中打开模板文件进行修改和编辑。

  9. 实例2 为模板index.dwt定义可编辑区域。 • 打开index.dwt模板； • 清理模板文档：只保留所有页面中都需要的公共元素； • 定义可编辑区域：选择菜单命令“插入→模板对象→可编辑区域”；或插入面板→选择模板标签→可编辑区域。

  10. 在模板页中，可编辑区域用下面的标记来表示：在模板页中，可编辑区域用下面的标记来表示： <!-- TemplateBeginEditable name="EditRegionMain" --> <!-- TemplateEndEditable --> • 在模板中，还有两个默认的可编辑区域：页面标题和页面头部中的区域。因此，应用了该模板的文档，可以更改文档的标题，可以在页面插入客户端脚本及定义CSS样式表，而其他区域均是不可编辑的。

  11. 8.2 使用模板 • 使用模板创建新文档 • 对现有文档应用模板 • 使用模板更新文档

  12. 8.2.1 使用模板创建新文档 • 实例３　利用模板index.dwt创建新文档。 • 选择菜单命令“文件→新建”，打开新建文档对话框，选择“模板”选项卡，选择站点模板，在右边的预览视图中给出模板示意图。如图所示：

  13. 选中“当模板改变时更新页面”选项，单击“创建”按钮，进入新文档设计视图。选中“当模板改变时更新页面”选项，单击“创建”按钮，进入新文档设计视图。 • 在新文档中，光标只能移动到可编辑区。 • 在可编辑区EditRegionMain中插入相应的表格、图象和文字。 • 可以更改文档标题。

  14. 8.2.2 对已有文档应用模板 • 实例 4 对下列表单 应用模板index.dwt。

  15. 打开表单网页文档； • 展开资源面板的模板窗口，选中模板index.dwt，单击面板下面的“应用”按钮。显示如下对话框：

  16. 其中提示当前页在模板中不存在相应的区域：Document body和Document head。这是由于在当前文档的头部（head）中不存在JavaScript函数，而在主体（body）中不存在内容的原因。 • 选中对话框中间窗口“名称”列下的可编辑区域“Document body”，在窗口下的“将内容移到新区域”下拉列表中选择“EditRegionMain”，其出现在窗口“已解析”列下对应行，即让当前页面的body部分内容位于应用模板的可编辑区域EditRegionMain中；再选中”Document head”将其移到head区域中，如图所示：

  17. 单击“确定”，得到如下所示页面设计视图。

  18. 8.2.3 使用模板更新文档 • 当需要对模板的某些方面进行修改，此时可在Dreamweaver MX中打开模板文件，按照需要进行相应的修改工作。在保存模板时会弹出如下对话框，询问是否需要更新使用该模板来创建的文件；选择“更新”，则自动对所有相关文件进行更新工作。

  19. 8.3 库项目及其应用 • 创建库项目 • 向网页添加库项目 • 利用库项目更新网站

  20. 8.3.1 创建库项目 • 在一个库项目中，可以包含文本、表格、表单、图象和多媒体等内容。创建库项目时，先选中文档中的需要作为库项目的对象，选择菜单命令“修改→库→增加对象到库”来创建项目，也可以在资源面板库类窗口中单击“新建库项目”按钮来创建。

  21. 实例 5 创建一个库项目，在项目中包含一个表格。 • 在Dreamweaver MX中，新建网页文件。 • 向网页中插入一个2行3列的表，设定表格边框为5，间距为2，边框颜色为蓝色。 • 选定页面上的表格，选择菜单命令“修改→库→增加对象到库”，在当前站点根目录下自动增加一个Library文件夹和文件“未命名.lbi”。在库类窗口中同时给出该库项目的样式图。

  22. 将新项目重命名为table，Library目录中的文件的名称也自动改变为table.lbi将新项目重命名为table，Library目录中的文件的名称也自动改变为table.lbi

  23. 8.3.2 向网页添加库项目 • 实例 6 将库项目添加到index.dwt中。 • 打开文档； • 确定插入位置； • 打开资源面板并切换到库类别，选中库项目table，单击面板底部的“插入”按钮，或者直接将库项目拖动到目标位置释放，该项目就插入到网页中。

  24. 8.3.3 利用库项目更新网站 • 在对库项目进行修改后，一般在保存该库项目时，就会打开如下对话框，询问是否更新添加了该库项目的文件，如果选择“更新”按钮，就会打开对话框如图所示。 • 使用模板和库，极大地提高了网站开发的速度和效率，也极大改善了网站的维护工作。

  25. 8.4CSS样式表概述什么是CSS样式 • CSS是HTML中用途最为广泛、功能最为强大的元素，为站点设计节省了时间，同时可以让站点整体风格保持一致。 • 层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。使用 CSS 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。

  26. 8.4CSS样式表概述什么是CSS样式 • CSS（Cascading Style Sheets）样式可以用来一次对若干个文档所有的样式进行控制而且当 CSS 样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新。 • CSS可以为文字创造出丰富多彩的效果；使用它的filter滤镜功能，可以为图形添加特效。 • CSS的不足在于只被IE和Netscape4.0以上版本的浏览器支持。

  27. 8.5 CSS的分类 • 外部链接样式表(External linking css):实际上是一个仅包含样式规则的外部文本文件，其后缀名为“CSS”，当编辑此文件时，所有与此样式表链接的文档将全被更新。 • 内嵌式样式表(Embedded CSS)：嵌在HTML代码的<style>标记之间。 • 内联式样式表(Inlink CSS):直接在某一HTML标记后添加样式代码。 • 优先程度：内联式>内嵌式>外部链接

  28. CSS的语法 • 样式表的一般形式： HTML标签{标签属性：属性值。标签属性：属性值 标签属性：属性值。……} 其中：HTML标签不带尖括号。 标签属性：属性值 两全参数是一一对应的，每个属性与属性值之间 用分号隔开。风属性名由两个或两个以上的单词构成 时，单词之间以“-”隔开。

  29. <style type=“text.css”> <!— P{font-family：”宋体”；font-size：9pt；color：#000000} Td{font-family：”楷体”；font-size：20pt；font-style；italic；font-weigh：800；text-decoration：blink；color：#000000}

  30. CSS样式面板 （1）显示“CSS 样式”面板的方式： 打开“窗口”菜单——“CSS”样式 （2）样式视图

  31. CSS样式在网页中的三种存在方式 • 外部文件方式：CSS以文件的形式存在，在HTML文档头通过文件引用进行控制。 CSS文件的引用是在<head></head>标签之间写下列语句: <link rel=“stylesheet” href=“文件名.CSS” type=“text/css”>

  32. 内嵌样式 不以文件的形式存在,仅作用于本文档,直接定义在 <head></head> 之间. <Style type=“text/css”> <!— P{font-family:“宋体” font-size:9pt;color:blue} H2{font-family: “宋体” ;font-size:13pt;color:red} --> </style>

  33. 直接插入式 • 只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。 • <table style=“color:red;font-size:10pt”> 在统一站点风格上，用第一方式，在某个网页风格统一上，用第二种方式，而在网页内部某个标签的具体调整上，用第三种方式。

  34. 创建新的 CSS 样式 创建新的 CSS 样式的步骤如下： （1）将添加点放在文档中，然后执行以下操 作之一打开“新建CSS 样式”对话框 （2）定义CSS 样式的类型 （3）选择定义样式的位置 • （4）单击“确定”。出现“CSS 样式定义”对话框。 （5）选择要为新 CSS 样式设置的样式选项。 （6）设置完样式属性后，单击“确定”。

  35. 创建自定义样式：名称须以.开头，并且可以包含任何字母和数字组合。例如 .myhead1。如果您没有输入开头的句点，Dreamweaver 将自动为您输入。 • 重定义HTML标签：重定义特定 HTML 标签的默认格式。对文档中的任何标签都可以应用 CSS 样式 . • 使用CSS选择器：重新定义一些标签的特定组合格式。 • 外部：将以文件的形式存在。 • 仅对该文档：内嵌式样式。

  36. 3. 应用自定义 (Class) CSS 样式 4．将自定义样式从选定内容中删除 5．创建和链接到外部 CSS 样式表 6．编辑 CSS 样式 7．设置 CSS 样式参数

  37. CSS的属性 • 字体：font-family • 大小：font-size • 粗细：font-weight • 样式：font-style • 行高：line-height • 修饰：text-decoration • 颜色：color

  38. 定义层叠样式表 • 类型：定义 CSS 样式的基本类型设置。 • 背景：对 CSS 样式的背景设置进行定义，可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。 • 区块：精确定义整段文本中文字的字距、对齐方式等属性。 • 盒子：可以定义特定元素的大小及其与周围元素的间距等属性。 • 边框面板：可以对控制元素周围边界的样式属性进行定义。 • 列表面板：定义列表的样式属性。 • 定位面板：定义层的样式属性。 • 扩展样式面板：主要是用来控制那些不被大多数浏览器所支持的功能。

  39. 注意：那些在 样式定义对话框中以星号（*）标注的样式属性是不会在 文档窗口中显示的，只有浏览器预览的时候才能看到。 • 应用样式表

  40. 使用CSS制作与鼠标动作相关的动态效果 • A:active :当超链接文字被选中时。 • A:hover:当鼠标移至超链接文字时 • A:link:当文字作为链接时 • A:visited:当其链接的网页已被浏览时

  41. 样式表滤镜对于图象的应用 • Blur（模糊）滤镜 • Blur(Add=true,Direction=90,Strength=120) • add指定是否产生印象派的模糊效果；direction指定模糊的方向；strength指定模糊半径。 • FlipH/FlipH（水平/垂直方向颠倒）滤镜 • Invert(颜色翻转）滤镜 • Gray(黑白）滤镜

  42. Alpha(半透明)滤镜 • Alpha(Opacity=70,FinishOpacity=70,Style=1,StartX=0,StartY=0,FinishX=150,FinishY=60) • Opacity代表透明值从0到100，0代表完全透明，100代表不透明；finishOpacity在设置渐变透明效果时指定结束的透明值。startX和startY代表透明效果开始的x,y坐标，finishX和finishY代表透明效果结束的x,y坐标。

  43. 滤镜特效有时为什么看不到 • 有几种滤镜的效果对文字作用时，必须在定义“box”中的Width参数之后，才能显示出来。这类滤镜包括：dropshadow,blur,glow ,alpha,wave等.

More Related