第八讲 CSS 、摸板和库项目
内容简介: CSS 样式表是 Dreamweaver 中的 重点和难点,通过本章的学习,大家要理 解 CSS 样式表的作用。掌握如何建立 CSS 样 式表,如何运用 CSS 样式表,如何设置 CSS 样式表的各项属性。 在 Dreamweaver MX 中利用摸板和库项目 能够创建具有统一风格的网页,同时也能 更方便地进行网站的维护。本章介绍模板 与库项目的基础知识和应用:如何创建模 板以及在网页设计中应用模板,如何创建 和设置库项目以及向网页添加库项目等。
学习目标 1. 掌握模板和库项目的创建方法; 2. 掌握应用模板设计网页的方法; 3. 掌握将库项目添加到网页中的方法; 4. 掌握用模板和库更新页面的方法。
模板:实际上是一种特殊网页,可以通过模板页面产 生许多形式相似的网页。 库项目:指网站上经常重复使用或更新的页面元素 (如图象、文本和其他对象),将它们存储在库中进 行管理和维护。 在 Dreamweaver MX 中利用模板和库项目能够创建具有 统一风格的网页,同时也能更方便的进行网站的维护。
8 . 1 创建模板 1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板
1. 将现有文档存为模板 实例 1 创建模板 ① 建立站点 ② 新建网页
③ 网页另存为模板: 选择菜单 → 文件 → 另存为模板 单击保存按钮。在站点根目录 下会自动增加一个文件夹 Templates ,新保存的模板就在 该文件夹中。模板文件扩展名 为.dwt 。 打开资源面板并单击 “ 模板 ” 按 钮,可以看到新建模板。
8.1.2 定义模板的可编辑区 在模板中,有两种类型的区域:可编辑区 域和锁定区域。在应用了模板的网页中, 模板部分是锁定的,其中的内容都为不可 编辑,所以必须在模板中定义可以编辑的 区域以使用该模板来创建新的文档。 可以像普通网页一样在文档窗口中打开模 板文件进行修改和编辑。
实例 2 为模板 index.dwt 定义可编辑区域。 ① 打开 index.dwt 模板; ② 清理模板文档:只保留所有页面中都需要 的公共元素; ③ 定义可编辑区域:选择菜单命令 “ 插入 → 模 板对象 → 可编辑区域 ” ;或插入面板 → 选择 模板标签 → 可编辑区域。
④ 在模板页中,可编辑区域用下面的标记来表 示: ⑤ 在模板中,还有两个默认的可编辑区域:页 面标题和页面头部中的区域。因此,应用了 该模板的文档,可以更改文档的标题,可以 在页面插入客户端脚本及定义 CSS 样式表,而 其他区域均是不可编辑的。
8.2 使用模板 1. 使用模板创建新文档 2. 对现有文档应用模板 3. 使用模板更新文档
8.2.1 使用模板创建新文档 实例3 利用模板 index.dwt 创建新文档。 ① 选择菜单命令 “ 文件 → 新建 ” ,打开新建文档 对话框,选择 “ 模板 ” 选项卡,选择站点模板, 在右边的预览视图中给出模板示意图。如 图所示:
② 选中 “ 当模板改变时更新页面 ” 选项,单击 “ 创建 ” 按钮,进入新文档设计视图。 ③ 在新文档中,光标只能移动到可编辑区。 ④ 在可编辑区 EditRegionMain 中插入相应的表 格、图象和文字。 ⑤ 可以更改文档标题。
8.2.2 对已有文档应用模板 实例 4 对下列表单 应用模板 index.dwt 。
① 打开表单网页文档; ② 展开资源面板的模板窗口,选中模板 index.dwt ,单击面板下面的 “ 应用 ” 按钮。 显示如下对话框:
其中提示当前页在模板中不存在相应的区 域: Document body 和 Document head 。这 是由于在当前文档的头部( head )中不存 在 JavaScript 函数,而在主体( body )中不 存在内容的原因。 选中对话框中间窗口 “ 名称 ” 列下的可编辑区 域 “Document body” ,在窗口下的 “ 将内容移 到新区域 ” 下拉列表中选择 “EditRegionMain” , 其出现在窗口 “ 已解析 ” 列下对应行,即让当 前页面的 body 部分内容位于应用模板的可 编辑区域 EditRegionMain 中;再选 中 ”Document head” 将其移到 head 区域中, 如图所示:
④ 单击 “ 确定 ” ,得到如下所示页面设计视图。
8.2.3 使用模板更新文档 当需要对模板的某些方面进行 修改,此时可在 Dreamweaver MX 中打开模板文件,按照需要 进行相应的修改工作。在保存 模板时会弹出如下对话框,询 问是否需要更新使用该模板来 创建的文件;选择 “ 更新 ” ,则自 动对所有相关文件进行更新工 作。
8.3 库项目及其应用 创建库项目 向网页添加库项目 利用库项目更新网站
8.3.1 创建库项目 在一个库项目中,可以包含文本、表格、 表单、图象和多媒体等内容。创建库项目 时,先选中文档中的需要作为库项目的对 象,选择菜单命令 “ 修改 → 库 → 增加对象到 库 ” 来创建项目,也可以在资源面板库类窗 口中单击 “ 新建库项目 ” 按钮来创建。
实例 5 创建一个库项目,在项目中包含一 个表格。 ① 在 Dreamweaver MX 中,新建网页文件。 ② 向网页中插入一个 2 行 3 列的表,设定表格 边框为 5 ,间距为 2 ,边框颜色为蓝色。 ③ 选定页面上的表格,选择菜单命令 “ 修改 → 库 → 增加对象到库 ” ,在当前站点根目录下 自动增加一个 Library 文件夹和文件 “ 未命 名.lbi” 。在库类窗口中同时给出该库项目的 样式图。
④ 将新项目重命名为 table , Library 目录中 的文件的名称也自动改变为 table.lbi
8.3.2 向网页添加库项目 实例 6 将库项目添加到 index.dwt 中。 打开文档; 确定插入位置; 打开资源面板并切换到库类别,选中库项 目 table ,单击面板底部的 “ 插入 ” 按钮,或者 直接将库项目拖动到目标位置释放,该项 目就插入到网页中。
8.3.3 利用库项目更新网站 在对库项目进行修改后,一般 在保存该库项目时,就会打开 如下对话框,询问是否更新添 加了该库项目的文件,如果选 择 “ 更新 ” 按钮,就会打开对话框 如图所示。 使用模板和库,极大地提高了 网站开发的速度和效率,也极 大改善了网站的维护工作。
8.4 CSS 样式表概述 什么是 CSS 样式 CSS 是 HTML 中用途最为广泛、功能最为强大的元 素,为站点设计节省了时间,同时可以让站点整体 风格保持一致。 层叠样式表 (CSS) 是一系列格式规则,它们控制 网页内容的外观。使用 CSS 样式可以非常灵活并 更好地控制确切的网页外观,从精确的布局定位到 特定的字体和样式。
8.4 CSS 样式表概述 什么是 CSS 样式 CSS ( Cascading Style Sheets )样式可以用来 一次对若干个文档所有的样式进行控制而且当 CSS 样式有所更新或被修改之后,所有应用了该样式表 的文档都会被自动更新。 CSS 可以为文字创造出丰富多彩的效果;使用它的 filter 滤镜功能,可以为图形添加特效。 CSS 的不足在于只被 IE 和 Netscape4.0 以上版本的 浏览器支持。
8.5 CSS 的分类 外部链接样式表 (External linking css): 实际上是一个 仅包含样式规则的外部文本文件,其后缀名为 “CSS” ,当编辑此文件时,所有与此样式表链接的 文档将全被更新。 内嵌式样式表 (Embedded CSS) :嵌在 HTML 代码的 标记之间。 内联式样式表 (Inlink CSS): 直接在某一 HTML 标记后 添加样式代码。 优先程度:内联式 > 内嵌式 > 外部链接
CSS 的语法 样式表的一般形式: HTML 标签 { 标签属性:属性值。标签属性:属性值 标签属性:属性值。 ……} 其中: HTML 标签不带尖括号。 标签属性:属性值 两全参数是一一对应的,每个属性与属性值之间 用分号隔开。风属性名由两个或两个以上的单词构成 时,单词之间以 “-” 隔开。
<!— 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}
( 1 )显示 “ CSS 样式 ” 面板的方式: 打开 “ 窗口 ” 菜单 ——“ CSS ” 样式 ( 2 )样式视图 CSS 样式面板
CSS 样式在网页中的三种存在 方式 外部文件方式: CSS 以文件的形式存 在,在 HTML 文档头通过文件引用进 行控制。 CSS 文件的引用是在 标 签之间写下列语句 :
不以文件的形式存在, 仅作用于本文档, 直接 定义在 之间. <!— P{font-family:“ 宋体 ” font-size:9pt;color:blue} H2{font-family: “ 宋体 ” ;font-size:13pt;color:red} --> 内嵌样式
直接插入式 只需要在每个 HTML 标签后书写 CSS 属 性。作用范围只限于本标签。 在统一站点风格上,用第一方式, 在某个网页风格统一上,用第二种 方式,而在网页内部某个标签的具 体调整上,用第三种方式。
创建新的 CSS 样式的步骤如下: ( 1 )将添加点放在文档中,然后执行以下操 作之一打开 “ 新建 CSS 样式 ” 对话框 ( 2 )定义 CSS 样式的类型 ( 3 )选择定义样式的位置 ( 4 )单击 “ 确定 ” 。出现 “ CSS 样式定义 ” 对话 框。 ( 5 )选择要为新 CSS 样式设置的样式选项。 ( 6 )设置完样式属性后,单击 “ 确定 ” 。 创建新的 CSS 样式
创建自定义样式:名称须以. 开头, 并且可以包 含任何字母和数字组合。例如.myhead1 。如果您 没有输入开头的句点, Dreamweaver 将自动为您 输入。 重定义 HTML 标签:重定义特定 HTML 标签的默认格式。对文档中的任何标签 都可以应用 CSS 样式. 使用 CSS 选择器:重新定义一些标签的特 定组合格式。 外部:将以文件的形式存在。 仅对该文档:内嵌式样式。
3. 应用自定义 (Class) CSS 样式 4 .将自定义样式从选定内容中删除 5 .创建和链接到外部 CSS 样式表 6 .编辑 CSS 样式 7 .设置 CSS 样式参数
CSS 的属性 字体: font-family 大小: font-size 粗细: font-weight 样式: font-style 行高: line-height 修饰: text-decoration 颜色: color
定义层叠样式表 类型:定义 CSS 样式的基本类型设置。 背景:对 CSS 样式的背景设置进行定义,可以对网页 中的任何元素应用背景属性。例如,创建一个样式, 将背景颜色或背景图像添加到任何页面元素中,比如 在文本、表格、页面等的后面。还可以设置背景图像 的位置。 区块:精确定义整段文本中文字的字距、对齐方式等 属性。 盒子:可以定义特定元素的大小及其与周围元素的间 距等属性。 边框面板:可以对控制元素周围边界的样式属性进行 定义。 列表面板:定义列表的样式属性。 定位面板:定义层的样式属性。 扩展样式面板:主要是用来控制那些不被大多数浏览 器所支持的功能。
注意:那些在 样式定义对话框中以星号( * )标注的样式属性是不会在 文档窗口中 显示的,只有浏览器预览的时候才能看到 。 应用样式表
使用 CSS 制作与鼠标动作相关的动态效果 – A:active : 当超链接文字被选中时。 – A:hover: 当鼠标移至超链接文字时 – A:link: 当文字作为链接时 – A:visited: 当其链接的网页已被浏览时
样式表滤镜对于图象的应用 Blur (模糊)滤镜 – Blur(Add=true,Direction=90,Strength=120) – add 指定是否产生印象派的模糊效果; direction 指定模 糊的方向; strength 指定模糊半径。 FlipH/FlipH (水平 / 垂直方向颠倒)滤镜 Invert( 颜色翻转)滤镜 Gray( 黑白)滤镜
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 坐标。
滤镜特效有时为什么看不到 有几种滤镜的效果对文字作用时,必须在 定义 “box” 中的 Width 参数之后,才能显示出 来。这类滤镜包括: dropshadow,blur,glow,alpha,wave 等.