层叠样式、模板与库.ppt

第5章层叠样式 模板与库 5 1层叠样式表5 2模板的应用5 3库的应用 1 CSS的概念CascadingStyleSheets的缩写 中文译为 层叠样式表 术语 层叠 是指对同一个元素或Web页面应用多个样式的能力 例如 可以创建一个CSS规则来应用颜色 创建另一个规则来应用边距 然后将两者应用于一个页面中的同一文本 层叠样式表 CSS 是一系列格式设置规则 它们控制Web页面内容的外观 使用CSS设置页面格式时 内容与表现形式是相互分开的 页面内容 HTML代码 位于自身的HTML文件中 而定义代码表现形式的CSS规则位于另一个文件 外部样式表 或HTML文档的另一部分 通常为部分 中 优点 CSS能够同时控制多个文档的格式 当CSS样式表被修改后 使用该CSS样式的网页文档格式都将自动更新 5 1层叠样式表 2创建CSS样式1 菜单 窗口 CSS样式 打开CSS样式面板 2 单击 CSS样式 面板右下角的 新建CSS规则 按钮 打开 新建CSS规则 对话框 在 选择器类型 选项中 可以选择创建CSS样式的方法包括以下三种 类 创建自定义样式 可以应用在文档窗口的任何区域或文本中 标签 重新定义特定标签的外观 重新定义HTML标记的的默认格式 即针对某一个标签来定义层叠样式表 也就是说定义的层叠样式表将只应用于选择的标签 例如 我们为和标签定义了层叠样式表 那么所有包含在和标签的内容将遵循定义的层叠样式表 高级 ID 伪类选择器等 为特定的组合标签定义层叠样式表 3 为新建CSS样式输入或选择名称 标记或选择器其中 对于类选择器 其名称必须以点 开始 如果没有输入该点 则DW会自动添加上 自定义样式名可以是字母与数字的组合 但 之后必须是字母 对于标签选择器 可以在 标签 下拉列表中输入或选择HTML标签 对于高级选择器 可以在 选择器 下拉列表中输入或选择需要的选择器 4 在 定义在 区域选择定义的样式位置可以是 新建样式表文件 或 仅对该文档 单击 确定 按钮 如果选择了 新建样式表文件 选项 会弹出 保存样式表文件为 对话框 给样式表命名 保存后 会弹出 CSS规则定义 对话框 如果选择了 仅对该文档 则单击 确定 后 直接弹出 CSS规则定义 在其中设置CSS样式 CSS规则定义 对话框 5 在 CSS规则定义 对话框中设置CSS规则定义主要分为类型 背景 区块 方框 边框 列表 定位和扩展8项 每个选项都可以对所选标签做不同方面的定义 可以根据需要设定 定义完毕后 单击 确定 按钮 完成创建CSS样式 3设置CSS样式 1 文本样式的设置新建CSS样式 选择器类型 为类 名称为 style1 定义在 仅对该文档 弹出 CSS规则定义 对话框 默认显示的就是对文本进行设置的 类型 项 字体 大小 大小就是字号 可以直接填入数字 然后选择单位 样式 设置文字的外观 包括正常 斜体 偏斜体 行高 这项设置在网页制作中很常用 设置行高 可以选择 正常 让计算机自动调整行高 也可以使用数值和单位结合的形式自行设置 颜色 2 背景样式的设置背景颜色背景图像重复 在使用图像作为背景的时 可以使用此项设置背景图像的重复方式 包括 不重复 重复 横向重复 和 纵向重复 附件 选择图像做背景的时候 可以设置图像是否跟随网页一同滚动 水平位置 可以 左对齐 右对齐 居中 垂直位置 可以选择 顶部 底部 居中 3 区块样式设置单词间距 英文单词之间的距离 字母间距 设置英文字母间距 垂直对齐 设置对象的垂直对齐方式 文本对齐 设置文本的水平对齐方式 文字缩进 中文文字的首行缩进就是由它来实现的 空格 对源代码文字空格的控制 选择 正常 忽略源代码文字之间的所有空格 选择 保留 将保留源代码中所有的空格形式 包括由空格键 Tab键 Enter键创建的空格 显示 指定是否以及如何显示元素 选择 无 则关闭它被指定给的元素的显示 4 方框样式的设置宽 通过数值和单位设置对象的宽度 高 通过数值和单位设置对象的高度 浮动 实际就是文字等对象的环绕效果 选择 右对齐 对象居右 文字等内容从另外一侧环绕对象 选择 左对齐 对象居左 文字等内容从另一侧环绕 无 取消环绕效果 清除 规定对象的一侧不许有层 可以通过选择 左对齐 右对齐 选择不允许出现层的一侧 如果在清除层的一侧有层 对象将自动移到层的下面 两者 是指左右都不允许出现层 无 是不限制层的出现 填充 和 边界 如果对象设置了边框 填充 是指边框和其中内容之间的空白区域 边界 是指边框外侧的空白区域 CSS盒子模式 5 边框样式设置边框样式设置可以给对象添加边框 设置边框的颜色 粗细 样式 样式 设置边框的样式 如果选中 全部相同 复选框 则只需要设置 上 样式 其它方向的样式与 上 相同 宽度 设置4个方向边框的宽度 颜色 设置边框对应的颜色 如果选中 全部相同 复选框 则其他方向的设置都与 上 相同 6 列表样式设置类型 设置引导列表项目的符号类型 可以选择圆点 圆圈 方块 数字 小写罗马数字 大写罗马数字 小写字母 大写字母 无列表符号等 项目符号图像 可以选择图像作为项目的引导符号 单击右侧的 浏览 按钮 找到图像文件即可 选择ul标签可以对整个列表应用设置 选中li标签可对单独的项目应用 位置 决定列表项目缩进的程度 选择 外 列表贴近左侧边框 选择 内 列表缩进 7 定位样式设置 定位 项实际上是对层的设置 但是因为DW提供了可视化的层制作功能 所以此项设置在实际操作中几乎不会使用 8 扩展样式的设置CSS样式还可以实现一些扩展功能 主要包括3种效果 分页 光标和过滤器 分页 通过样式来为网页添加分页符号 允许用户打印网页时指定在某元素前或后进行分页 光标 通过样式改变鼠标形状 鼠标放置于被此项设置修饰的区域上的时 形状会发生改变 具体的形状包括 Hand 手 crosshair 交叉十字 text 文本选择符号 wait Windows的沙漏形状 default 默认的鼠标形状 help 带问号的鼠标 e resize 向东的箭头 ne resize 指向东北方的箭头 n resize 向北的箭头 nw resize 指向西北的箭头 w resize 向西的箭头 sw resize 向西南的箭头 s resize 向南的箭头 se resize 向东南的箭头 auto 正常鼠标 过滤器 使用CSS语言实现过滤器 滤镜 效果 单击 过滤器 下拉列表框旁的按钮 可以看见有多种滤镜效果可供选择 见下表 CSS的文字特效 光晕字 Glow滤镜的语法格式为 Glow Color Strength 里面有两个参数 Color决定光晕的颜色 可以用如 FFFFFF的十六进制代码 或者用Red Yellow等单词表示 Strength表示发光强度 范围从0 255 在此 设置颜色为蓝色 Blue 发光强度为10 CSS的文字特效 阴影字Drowshadow滤镜的语法如下 DropShadow Color OffX OffY Positive 其中 Color表示投射阴影的颜色 OffX OffY分别代表阴影偏离文字位置的量 Positive为一个逻辑值 1代表为所有不透明元素建立阴影 0代表为透明元素建立可见阴影 CSS的文字特效 动感字Blur Add Direction Strength Add参数是一个布尔值 一般来说 当滤镜用于图片的时候取0 用于文字的时候取1 Direction代表模糊方向 单位是角度 Strength代表模糊移动值 在此定义Blur Add 1 Direction 90 Strength 150 预览可以看到如图所示的效果 4编辑与应用CSS样式 单击CSS样式面板右上方的扩展按钮 弹出下图所示的菜单 CSS的相关操作都是通过这个菜单上的项目来实现的 1 编辑CSS样式在CSS样式面板中 选中需要编辑的样式类型 选择上图扩展菜单中的 编辑 项在弹出的 CSS规则定义 对话框中修改相应的设置 编辑完成后单击 确定 按钮 CSS样式就编辑完成了 2 应用CSS自定义样式选定目标元素并在CSS样式面板中选择定义好的规则 然后选择扩展菜单中的 套用 项 鼠标右键单击在网页中被选中的元素 在弹出的快捷菜单中选择 CSS样式 在其子菜单中选择需要的自定义样式 选定目标元素 设置属性面板中的 样式 属性 3 附加外部样式表选择扩展菜单中 附加样式表 项 打开 链接外部样式表 对话框 文件 URL 设置外部样式表文件的路径 可以单击浏览按钮 在浏览窗口中找到样式表文件 添加为 选择 链接 将外部CSS样式表文件链接到当前网页文档中 选择 导入 将外部CSS样式表文件导入到当前网页文档中 附加外部样式表后 就可按照2 中方法套用定义好的样式 设置完毕后单击 确定 按钮 CSS文件即被导入到当前页面 5 2模板的应用 模板是一种事先设计好的网页样式 在制作风格相似的页面时 只要套用这种模板便可以设计出风格一致的网页 任何套用了同一模板的网页与模板本身都建立了一种链接关系 当模板改变时 所有套用该模板的网页都将随之改变 模板设置了可编辑区域和锁定区域 可以帮助设计者把网页的布局和内容分离 快速制作大量风格布局相似的网页 提高网页制作更新的效率和网页的规范性 1创建模板 模板的创建有三种方式 1 直接创建模板选择 窗口 资源 命令 打开 资源 面板 切换到模板子面板 如下图所示 单击模板面板上的 扩展 按钮 在弹出菜单中选择 新建模板 这是在浏览窗口出现一个未命名的模板文件 给模板命名 然后单击 编辑 按钮 打开模板进行编辑 编辑完成后 保存模板 完成模板建立 2 将普通网页另存为模板打开一个已经制作完成的网页 删除网页中不需要的部分 保留几个网页共同需要的区域 选择 文件 另存为模板 命令将网页另存为模板 3 从文件菜单新建模板选择 文件 新建 命令 打开 新建文档 对话框 然后再类别中选择 模板页 并选取相关的模板类型 直接单击 创建 按钮即可 见下图 2定义模板可编辑区域 模板创建好后 要在模板中建立可编辑区 只有在可编辑区里 我们才可以编辑网页内容 可以将网页上任意选中的区域设置为可编辑区域 在文档窗口中 选中需要设置为可编辑区域的部分 单击常用工具栏的 模板 按钮 在弹出菜单中选择 可编辑区域 项 见下图 在弹出的 新建可编辑区域 对话框中给该区域命名 然后单击 确定 按钮 新添加的可编辑区域有蓝色标签 标签上是可编辑区域的名称 如果希望删除可编辑区域 可以将光标置于要删除的可编辑区域内 选择 修改 模板 删除模板标记 命令 光标所在区域的可编辑区即被删除 定义可编辑区域的注意问题 表格布局的模板 可将整个表格或表格的某个单元格定义为可编辑区域 不能同时将多个单元格定义为一个单独的可编辑区域 层布局的模板 层设置为可编辑区域 可改变层的位置与层中内容 层内容为可编辑区域时 不能改变层位置 3创建基于模板的页面 新建一个网页文档 选择 窗口 资源 命令 打开 资源 面板 切换到模板子面板 选中一个模板文件 按住鼠标左键直接拖拽到网页文档窗口中 即可将该模板应用到该网页文档中 5 3库的应用 DM可以将文档中的任意内容存储为库项目 使它在其它地方被重复使用 当库项目编辑修改后 所有引用该库项目的网页能自动更新 1创建库项目 在文档窗口中选择需要保存为库项目的内容 选择 窗口 资源 命令 打开 资源 面板 单击资源面板 库 分类中右下角的 新建库项目 按钮 一个新的项目出现在资源面板 库 分类的列表中 预览框中显示预览的效果 还可以给该项目键入新名称 这样 一个库项目就创建好了 2插入库项目 将光标放在网页中需要插入库项目的位置 在资源面板 库 分类中选择需要插入的库项目 直接拖动到光标所在位置即可 3更改库项目 1 在库面板中修改库项目选择 窗口 资源 命令 打开 资源 面板 切换到库子面板 双击一个库项目 打开库项目的编辑窗口 完成修改后 选择 文件 保存 命令 弹出 更新库项目 对话框 询问是否更新网站中使用了该库文件的网页 单击 更新 按钮 将更新网站中使用了该库文件的网页 2 在网页上修改库项目在网页中选中已插入的库项目在库项目的属性面板中 单击 从源文件中分离 按钮 把一个库项目从网页中分离出来后 以后更新库项目时不会对网页上该库项目进行更新 修改库项目并保存 思考题 1 什么是CSS 它有何作用 2 什么是模板 它有何作用 3 什么是库项目 它有何作用