Microsoft Word 新正文（网页）.doc

Size: px

Start display at page:

Download "Microsoft Word 新正文（网页）.doc"

裔否干
5 years ago
Views:

1 第 3 章 CSS 样式学习目标掌握 CSS 样式的概念学会 CSS 样式的创建与编辑方法学会使用 CSS 样式的常用操作引导案例旅游门户网站所包含的信息量大, 需要有多个子页, 要求整个站点保持视觉的一致性, 即每个网页的样式要一致 ; 另外该网站还需要定时更新显示样式, 以便防止旅友们对网站产生视觉疲劳 CSS 是专门用于定义各种各样的样式的一套规范, 通过它可以非常灵活方便地统一网页样式任务分析这是一个中型的网站, 需要通过 CSS 网页风格样式的设计与制作, 主要采用 CSS 对网页中的文本超链接等元素进行统一设置, 使整个站点保持视觉的一致性在网页风格更换时, 通过修改 CSS 文件而统一修改网页中的文字及超链接等对象相关知识 3.1 CSS 样式的概念 CSS 样式简介 CSS(Cascading Style Sheet, 层叠样式表或级联样式表 ) 是一组网页元素的格式设置规则, 用于控制网页的外观通过使用 CSS 样式设置网页页面的格式, 可将网页中的内容与表现形式分离网页中的内容使用 HTML 文档描述, 网页内容的表现形式使用 CSS 规则来定义 CSS 规则可以存放在另一个文件中或插入于 HTML 文档中 ( 通常为文件头部分 ) 将网页的内容与表现形式分离, 不仅可使维护站点的外观更加容易, 而且还可以使 HTML 文档代码更加简练, 缩短浏览器的加载时间 CSS 规则在说明 CSS 规则前, 可以举一个生活中的例子当我们想描述一个轿车时可以采用以下这种方式 : 上海大众 { 型号 :Polo;

2 第 3 章 CSS 样式 55 颜色 : 白色 ; 售价 :10 万 ; } 以上这种描述对象的方式其实包含了三个要素, 即对象名称属性和属性值通过这种方式就可以把一个对象的基本情况描述出来了 CSS 的功能就是设置网页的各个组成部分元素的表现形式将上面的案例元素替换成描述网页页面属性表, 大致如下 : 页面 { 宽 :800 像素 ; 高 :1000 像素 ; 字体 : 宋体 ; 大小 :12 像素 ; 背景色 : 灰色 ; } 再进一步, 如果把上面对网页页面的描述用英语表现出来, 即为如下形式 : Body{ width:800px; height:1000px; font-family: 宋体 ; font-size:12px; background-color: gray; } 这就是 CSS 代码可见,CSS 的原理很简单, 对于母语是英语的人来说, 写 CSS 代码是和平时说话一样简单的事对于我们, 只要熟悉了这些属性, 就可以掌握它 3.2 Dreamweaver 中使用 CSS 在 Dreamweaver 中使用 CSS, 可以使用可视化的方式来编辑创建 CSS (1) 打开新建 CSS 规则对话框在 Dreamweaver 中, 有 3 种方式可以设置 CSS 样式在打开的 HTML 文档中, 选择菜单栏中格式 CSS 样式新建命令选择菜单窗口 CSS 样式命令, 确认打开样式面板单击 CSS 样式面板底部的新建 CSS 规则按钮, 如图 3-1(a) 所示在 CSS 面板中, 单击面板标题栏右端的图标, 然后在弹出的菜单中选择新建命令, 如图 3-1(b) 所示使用以上三种方法中的任意一种, 都会打开新建 CSS 规则对话框, 如图 3-2 所示在前面提到的 CSS 组成部分中, 对象名称是很重要的, 它指明了对网页中的哪个元素进行设置因此, 在 CSS 样式中有一个专用的名称 : 选择器在新建 CSS 规则对话框中有 4 种选择器类型可供选择, 分别为类 ( 可应用于任何 HTML 元素 ) ID( 仅应用于一个 HTML 元素 ) 标签 ( 重定义 HTML 元素 ) 和复

56 网页设计与制作合内容 ( 基于选择的内容 ) (a) (b) 图 3-1 新建 CSS

用于创建自定义样式即创建一个可以作为 Class 属性应用于文本区域或文本块的样式 ID(

页面中使用一次, 针对性更强标签 ( 重定义 HTML 元素 ) 对指定的 HTML

基于选择的内容 ): 用于对特定的标签组合进行格式定义 (2) 在对话框中为新样式输入名字

3 56 网页设计与制作合内容 ( 基于选择的内容 ) (a) (b) 图 3-1 新建 CSS 样式的方法图 3-2 新建 CSS 规则对话框类 ( 可应用于任何 HTML 元素 ): 用于创建自定义样式即创建一个可以作为 Class 属性应用于文本区域或文本块的样式 ID( 仅应用于一个 HTML 元素 ): 与类选择器很相似, 但是 ID 选择器只能在 HTML 页面中使用一次, 针对性更强标签 ( 重定义 HTML 元素 ) 对指定的 HTML 标签的默认格式进行重新定义 ( 注意 : 使用重定义标签, 会改变许多页面的布局 ) 复合内容 ( 基于选择的内容 ): 用于对特定的标签组合进行格式定义 (2) 在对话框中为新样式输入名字选择标签或者选择标签组合样式的名字前边必须要有一个句点如果没有输入这个句点,Dreamweaver 会自动输入名字可以是任何字母和数字的组合, 例如 :.test

第 3 章 CSS 样式 57 要重新定义 HTML 标签样式, 可以键入一个 HTML 标签或者从弹出菜单中选择一个选择高级后, 可以输入任何一个有效的表达式 ( 例如,td 或 #textstyle), 或者从弹出菜单中选择可供选择的有 :a:active( 激活超链接 ),a:hover( 光标位于超链接上 ),a:link( 超链接没有任何动作时 ) 和 a:visited(

4 第 3 章 CSS 样式 57 要重新定义 HTML 标签样式, 可以键入一个 HTML 标签或者从弹出菜单中选择一个选择高级后, 可以输入任何一个有效的表达式 ( 例如,td 或 #textstyle), 或者从弹出菜单中选择可供选择的有 :a:active( 激活超链接 ),a:hover( 光标位于超链接上 ),a:link( 超链接没有任何动作时 ) 和 a:visited( 访问过的超链接 ) 若选择第一项, 即使用类选择器, 要在名称输入框中输入一个名称, 注意在名称前面一定要放置一个点, 例如.test, 加点的作用是让浏览器知道这是一个样式类 (Class), 而不是 HTML 的标签符, 如图 3-3 所示图 3-3 设置选择器名称 (3) 选取要定义的样式出现的位置 : 定义在某个文件中或仅对本文档在此, 选择仅限该文档 (4) 单击确定按钮, 出现样式定义对话框, 如图 3-4 所示图 3-4 CSS 规则定义对话框在这个对话框中可以定义样式的属性 Dreamweaver 把这些属性分成了 8 类, 在对话框左

5 58 网页设计与制作侧的分类栏中可以选择某一类属性, 然后在右侧对这一类属性进行设置对于文本样式, 设定前 3 类属性, 即类型背景和区块就足够了要注意的是, 虽然有很多属性可以设置, 但并不是每一个属性设置后就一定有效例如有的属性与字体有关, 事实上, 同一种字体都有不同的样式, 如倾斜加粗等, 如果系统的字库缺少相应的版本, 即便设定了某种属性也没有效果另外, 如果访问者的系统没有相应的字体, 也会看不到设定的效果, 因此在设定各种属性时应该尽量使用最普通最常见的属性这里简单介绍一些属性的作用, 这些属性都在类型背景页中区块页里的属性也很有用, 但通常要和表格与图层共同使用 (5) 类型面板如图 3-4 所示 Font-family( 字体 ): 设置样式的字体 Font-size( 大小 ): 文本的大小这里可以精确到以像素为单位设置文本大小, 就不像用属性面板那样只有很少的几种固定大小供选择了, 方法是在大小输入框中输入数值, 并在右边的下拉列表中选择像素作为单位还可以选择其他单位, 如点数厘米等除了这些单位之外, 字母高 (ems) 也很有用,1 个 ems 就是一个字母 m 的宽度, 设定时可以用小数, 如 1.3ems, 即一个字母 m 的宽度的 1.3 倍最好使用像素 Pixels 作为单位, 这样可以阻止浏览器中的文本变形 Font-style( 样式 ): 定义字体样式为 Normal( 正常 ) Italic( 斜体 ) 或 Oblique( 倾斜 ) Line-height( 行高 ): 设置文本的行高这个属性很有用, 用它就可以设定文本的行间距如果选取 Normal, 行高是根据字体大小自动计算的, 可以自己键入一个精确的数值并选取一个计量单位 Text-decoration( 修饰 ): 添加 underline( 下划线 ),overline( 上划线 ),line-through ( 整行划线 ),blink( 命令文本闪烁 ) Font-weight 粗细 : 给字体指定粗体字的磅值 Normal 等同于 400;Bold 等同于 700 Font-variant( 变形 ): 选取字体的变种, 例如 small caps( 小型大写字母 ) Font-transform( 形式 ): 将选区中每个单词的第一个字母转为大写, 或者令单词全部大写或全部小写以及上标下标显示 Color( 颜色 ): 定义文本颜色 (6) 背景面板如图 3-5 所示 Background-color( 背景颜色 ): 设置元素的背景色 Background-image( 背景图像 ): 设置元素的背景图像 Background-repeat( 重复 ): 背景图片重复放置的方式, 包括 no-repeat( 不重复 ) repeat( 重复 ) repeat-x( 横向重复 ) 和 repeat-y ( 纵向重复 ) 这 4 种方式 no-repeat 表示图片不平铺,repeat 表示图片在水平和垂直方向均平铺,repeat-x 表示仅在水平方向平铺,repeat-y 表示仅在垂直方向平铺 Background-attachment( 附件 ): 确定背景图像是固定在原来位置 (fixed) 还是随内容的滚动而滚动 (scroll) Background-position(X) 水平位置和 Background-position(Y) 垂直位置 : 指定背景图像相对于元素的初始位置如果这两个选项都选择居中, 那么背景图像将在页面中居中对齐

6 第 3 章 CSS 样式 59 图 3-5 CSS 规则定义对话框中的背景面板 (7) 区块面板如图 3-6 所示图 3-6 CSS 规则定义对话框中的区块面板 Word-spacing( 单词间距 ): 设置单词间的距离 Letter-spacing( 字母间距 ): 设置字符间的距离 Vertical-align( 垂直对齐 ): 指定元素的垂直对齐属性, 通常是与它的母元素相比较而言 Text-align( 文本对齐 ): 确定文本在元素内如何排列对齐 Text-indent( 文本缩进 ): 确定段落第一行的缩进值负值用于将段落第一行向外拉. White-space( 空白间距 ): 确定如何处理元素内的空白间距 (8) 方框面板如图 3-7 所示

7 60 网页设计与制作图 3-7 CSS 规则定义对话框中的方框面板 Width/Height( 宽度 / 高度 ): 设置元素边界宽度与高度 Float( 浮动 ): 设置元素的对齐方式 Padding: 设置元素内的内容与方框边界的上右下左的距离 Margin: 设置元素边界距其他元素上右下左的距离 (9) 边框面板如图 3-8 所示图 3-8 CSS 规则定义对话框中的边框面板 Style( 样式 ): 确定边界框样式 Width( 宽度 ): 设置边框宽度 Color( 颜色 ): 设置边界框的颜色可以分别对每条边界设置颜色 (10) 列表面板如图 3-9 所示

8 第 3 章 CSS 样式 61 图 3-9 CSS 规则定义对话框中的列表面板 List-style-type( 类型 ): 确定无序列表或有序列表的外观 List-style-image( 项目图像 ): 为无序列表指定一幅自定义图像单击浏览按钮查找图像, 或直接输入图像的路径 List-style-Position( 位置 ): 确定列表项排列是根据缩进量换行 (outside), 还是根据页边距换行 (inside) (11) 定位面板如图 3-10 所示图 3-10 CSS 规则定义对话框中的定位面板定位面板用于将被选文本的标签或块转到一个使用了默认标签的新层上去 Position( 类型 ): 确定浏览器定位层的方法 : absolute: 根据在定位框中所输入的相对于页面左上角的坐标来放置层 relative: 根据在定位框中所输入的相对于文档中对象位置的坐标来放置层 static: 将层置于文本流程中自己的位置

9 62 网页设计与制作 Visibility( 显示 ): 确定层的最初显示状态如果没有指定这一属性, 在默认情况下多数浏览器会继承原始的变量值 Inherit: 继承层的载体的显示属性如果层没有载体, 它将是可视的 Visible: 显示层的内容, 不管层的载体的属性如何 Hidden: 隐藏层的内容, 不管层的载体的属性如何 Z-Index(Z 轴 ): 确定层的堆叠顺序编号较大的层会显示在编号较小的层上边, 可以是正值也可以是负值 Overflow( 溢出 ):( 仅对 CSS 层有效 ) 确定如果层的内容超出了层的大小时如何处理浏览器经常放大文本从而使它与在 Dreamweaver 的 Document 窗口中相比更占地方该属性就是控制如何处理这种情况的 Visible: 增加层的大小, 从而将层的所有内容显示出来层的扩大是向下和向右进行 Hidden: 保持层的大小不变, 将超出层的内容剪裁掉不提供滚动条 Scroll: 不管层的内容是否超出了层, 都强制给层添加一个滚动条 Auto: 只有在内容超出层的边界时才显示滚动条 Placement( 定位 ): 指定层的位置和大小浏览器如何解释层的位置取决于 Type 的设置如果内容超出层的范围, 尺寸大小的值就不予考虑了层的位置和大小的默认单位是像素对 CSS 层而言, 可以指定下列计算单位 :pc(picas, 十二点活字 ), pt(points, 磅值 ),in(inches, 英寸 ),mm(millimeters, 毫米 ),cm(centimeters, 厘米 ),ems( 与当前字体中的 m 字母宽度比较 ),exs( 与当前字体中的 x 字母高度比较 ) 或 %(percentage of the parent's value, 与层中的字母大小的百分比 ) 单位缩写必须紧跟着设定值而不能有空格, 如 3mm Clip( 剪辑 ): 定义层的可视部分如果指定了剪辑区域, 可以使用 JavaScript 之类的脚本语言读取并通过属性设置创建出特殊的效果 ( 例如 : 擦去效果 ) (12) 扩展面板如图 3-11 所示图 3-11 CSS 规则定义对话框中的扩展面板扩展面板是用来控制某些扩展的功能分页 : 在打印的时候强迫在样式控制的对象前后换页

第 3 章 CSS 样式 63 视觉效果 : Cursor( 光标 ): 当光标滑过样式控制的对象时改变光标的图像 Filter( 滤镜 ): 给由样式控制的对象应用特效, 包括模糊和倒置等滤镜效果各参数说明如下 : Alpha: 设置不同的透明度变化效果 Blur: 建立模糊效果 DropShadow: 建立一种偏移的影像轮廓,

10 第 3 章 CSS 样式 63 视觉效果 : Cursor( 光标 ): 当光标滑过样式控制的对象时改变光标的图像 Filter( 滤镜 ): 给由样式控制的对象应用特效, 包括模糊和倒置等滤镜效果各参数说明如下 : Alpha: 设置不同的透明度变化效果 Blur: 建立模糊效果 DropShadow: 建立一种偏移的影像轮廓, 即投射阴影 FlipH: 水平翻转 FlipV: 垂直翻转 Glow: 为对象的边界增加色彩光效 Gray: 将图片以灰度形式显示 Invert: 将色彩饱和度以及亮度值完全反转, 类似底片效果 Light: 在一个对象上进行灯光投影 Mask: 为一个对象建立彩色透明遮罩 Shadow: 为对象建立轮廓的倒影效果 Wave: 在 X 轴和 Y 轴方向利用正弦波打乱图片 Xray: 只显示对象的轮廓应用 CSS (1) 在文档中, 选择要应用 CSS 样式的文本或其他网页元素可以执行下列操作之一 : 在 CSS 样式面板中, 右击要应用的样式的名称, 然后从上下文菜单选择套用, 如图 3-12(a) 所示在属性栏中, 从类下拉菜单中选择要应用的样式在编辑网页时可以给文档附加或链接一个 CSS 样式表来应用样式当对一个 CSS 样式表进行了编辑后, 所有使用该 CSS 样式表链接的文档都会根据修改进行更新 (a) (b) 图 3-12 应用 CSS (2) 附加外部 CSS 样式表文件要附加样式表文件, 就要有建立好的样式表文件建立样式表文件, 就是在新建样式时,

64 网页设计与制作选择规则定义的位置, 不是当前文档而是新建样式表文件, 如图 3-13 所示并将样式作为一个单独的文件保存在网页所在的相应文件夹中, 如图 3-14 所示图 3-13 新建样式表文件图 3-14 存储样式表文件有了样式表文件后就可以给相应的网页元素附加相应的样式表文件了选择窗口 CSS 样式

11 64 网页设计与制作选择规则定义的位置, 不是当前文档而是新建样式表文件, 如图 3-13 所示并将样式作为一个单独的文件保存在网页所在的相应文件夹中, 如图 3-14 所示图 3-13 新建样式表文件图 3-14 存储样式表文件有了样式表文件后就可以给相应的网页元素附加相应的样式表文件了选择窗口 CSS 样式命令, 打开 CSS 样式面板在 CSS 样式面板中, 右击窗口, 从弹出的菜单中选择附加样式表命令也可以单击 CSS 样式面板底部的附加样式表图标, 如图 3-15 所示在弹出的对话框中, 选择附加样式标的方式链接或导入输入文件名或通过浏览查找需要附加的样式表文件, 如图 3-16 所示单击确定按钮

第 3 章 CSS 样式 65 (a) 图 3-15 附加样式表 (b) 图 3-16 链接外部样式表对话框注意

12 第 3 章 CSS 样式 65 (a) 图 3-15 附加样式表 (b) 图 3-16 链接外部样式表对话框注意附加的样式表中不包含仅适用于本文档的样式编辑 CSS 1. 编辑网页中的样式 (1) 打开 CSS 样式面板 (2) 单击要编辑的样式以选中它 (3) 单击位于 CSS 样式面板底部的编辑样式表按钮 (4) 打开 CSS 样式定义对话框, 进行修改 (5) 修改完毕后, 单击确定按钮所作的更改将立即应用于当前文档 2. 修改 CSS 样式表文件 (1) 在 CSS 样式面板中, 单击要编辑的样式表文件, 选中要修改的样式的名称 (2) 单击位于 CSS 样式面板底部的编辑样式表按钮, 所选 CSS 样式表的样式随即出现在对话框中 (3) 在对话框中选择要编辑的样式, 然后单击编辑按钮, 出现 CSS 样式定义对话框 (4) 根据需要修改样式, 然后单击确定按钮

66 网页设计与制作页面中如果修改的样式表文件为多个网页文档使用的 CSS 样式表, 所作的更改将反映在相应的 3.3 CSS 的应用 3.3.1 使用 CSS 设置文字格式下面在 Dreamweaver 中通过 CSS 样式面板给保定旅游网中的首页设置 CSS 样式, 主要是对网页中的字体字号颜色背景色行高等进行设置 1.

13 66 网页设计与制作页面中如果修改的样式表文件为多个网页文档使用的 CSS 样式表, 所作的更改将反映在相应的 3.3 CSS 的应用使用 CSS 设置文字格式下面在 Dreamweaver 中通过 CSS 样式面板给保定旅游网中的首页设置 CSS 样式, 主要是对网页中的字体字号颜色背景色行高等进行设置 1. 标题文字样式设置 (1) 先对网页中的文章标题文字保定景点介绍的样式进行设置在 Dreamweaver 中, 选中保定景点介绍标题文字 (2) 选择菜单栏中的窗口 CSS 样式命令, 或单击属性面板中的打开 CSS 面板按钮, 或者按 Shift+F11 组合键, 打开 CSS 样式面板 (3) CSS 样式面板顶部是全部和正在两个切换按钮, 可以在两种模式之间切换这里默认的是正在模式, 现在单击全部按钮 (4) 此时的 CSS 样式面板未做任何设置, 单击 CSS 样式面板底部的新建 CSS 规则按钮, 准备创建 CSS 规则 (5) 单击新建 CSS 规则按钮后, 就会弹出新建 CSS 规则对话框, 在该对话框中名称右边的方框内输入 CSS 样式的名称.title, 定义在列表处单击仅对该文档单选按钮, 如图 3-17 所示图 3-17 为文档标题新建 CSS 规则 (6) 单击确定按钮, 弹出.title 的 CSS 规则定义对话框 (7) 在分类选项列表中默认的是类型, 这里保持默认, 在右边设置区的字体列表中选择要定义的某种字体 (8) 如果字体列表中没有所需要的字体, 单击字体列表中的编辑字体列表选项, 就会弹出编辑字体列表对话框, 从右边的可选字体列表中选择字体, 单击向左按钮添加到左边的选择的字体列表中

第 3 章 CSS 样式 67 (9) 把所有需要的字体都添加到左边的选择的字体列表中, 如果左边有些字体不需要, 可以将其选中后单击向右按钮, 从列表中删除 (10) 字体添加到选择的字体列表后, 单击确定按钮, 添加的字体出现在字体列表中选择了需要的字体后, 设置 Font-family 为黑体 Font-size 为 24 Line-height 为 :26

14 第 3 章 CSS 样式 67 (9) 把所有需要的字体都添加到左边的选择的字体列表中, 如果左边有些字体不需要, 可以将其选中后单击向右按钮, 从列表中删除 (10) 字体添加到选择的字体列表后, 单击确定按钮, 添加的字体出现在字体列表中选择了需要的字体后, 设置 Font-family 为黑体 Font-size 为 24 Line-height 为 :26 Color 为 #F33( 橘红 ), 如图 3-18 所示图 3-18 标题文字样式设置 (11) 单击确定按钮, 至此对文本标题的样式.title 的设置就完成了 2. 网页中标题以外文字样式的设置现在来设置内容文本样式, 设置的方法与设置标题文本样式一样只是样式名称要另取一个以便与标题样式区分例如可以设置为.text 这里可以通过对页面样式设置, 设置网页中除了标题以外的其他文字样式 (1) 新建 CSS 规则, 选择器类型为标签 ( 重新定义 HTML 元素 ) ; 选择器名称为 body( 对整个页面样式进行设置 ); 规则定义的位置为 lianxi1.css 样式文件中如图 3-19 所示图 3-19 通过 body 样式设置页面文字样式

title 对文字标题设置的 CSS 规则 body 对网页中的所有文字设置的 CSS 规则现在,body 中的对文字的 CSS 规则已经起了作用除了使用前面例子中.test 所修饰的文字以外, 其他文字均应用了 body 中的样式 (4) 接着在网页中文档标题使用.

15 68 网页设计与制作 (2) 对 body 中的文字进行设置, 如图 3-20 所示 Font-family 为宋体 ;Font-size 为 14px;Line-height 为 25px;color 为 #060( 绿色 ) 图 3-20 设置 body 中的文字样式 (3) 此时 CSS 样式面板如图 3-21 所示有前面例子中建立的.test CSS 规则, 还有 lianxi1.css 样式文件, 其中有三个样式, 分别为.lianxi1 对边框进行设置的 CSS 规则.title 对文字标题设置的 CSS 规则 body 对网页中的所有文字设置的 CSS 规则现在,body 中的对文字的 CSS 规则已经起了作用除了使用前面例子中.test 所修饰的文字以外, 其他文字均应用了 body 中的样式 (4) 接着在网页中文档标题使用.title 样式首先, 选中标题, 在对应的属性栏中设置类为 title, 如图 3-22 所示图 3-21 CSS 样式面板图 3-22 CSS 样式应用 (5) 删除第一段文字前面应用的.test CSS 规则选中第一段文字, 在属性栏类中选择无, 如图 3-23 所示最后保存文档, 浏览该文档查看效果 3. 编辑样式通过浏览发现, 网页中的文档标题应用了.title 样式其他文字都应用了 body 样式中定义的样式文档中大标题没有居中对齐, 每个段落都没有进行首行缩进, 而且整个网页靠左显示

面板, 编辑区块面板中的 Text-indent 为 2ems, 即首行缩进 2 字符的宽度, 如图 3-26 所示单击方框, 打开方框面板, 设置 Width 为 800px;Padding 项勾选全部相同复选框, 将 top right bottom left 设置为 5px, 即网页中的元素距离 body 区域边框的距离上右下

16 第 3 章 CSS 样式 69 ( 希望居中 ) 为此要对上面创建的样式文件进行修改图 3-23 取消类 CSS 规则应用 (1) 在样式面板中选中需要修改的 CSS 样式规则.title, 双击或单击 CSS 样式面板下方的修改按钮, 如图 3-24 所示弹出 CSS 规则定义面板, 选择分类中的区块, 设置 Text-align 为 center, 如图 3-25 所示图 3-24 编辑已有样式图 3-25 编辑 title 的区块面板 (2) 双击 body 样式, 打开 body 的 CSS 规则定义面板, 编辑区块面板中的 Text-indent 为 2ems, 即首行缩进 2 字符的宽度, 如图 3-26 所示单击方框, 打开方框面板, 设置 Width 为 800px;Padding 项勾选全部相同复选框, 将 top right bottom left 设置为 5px, 即网页中的元素距离 body 区域边框的距离上右下左均为 5 个像素设置 Margin 项中 Top 与 Bottom 的值为 0px,Right 与 Left 的值为 auto, 即使 body 区域与浏览器上下没有距离, 并水平居中, 如图 3-27 所示此时网页中应用样式的相应元素外观发生了变化, 按 F12 键预览, 可以看到大标题居中显示, 同时每个段落首行缩进了两个字符, 网页内容居中显示, 如图 3-28 所示对 body 样式的定义也可以同过属性面板中的页面设置按钮打开页面设置对话框进行设置和编辑网页中的字体等元素的 CSS 规则, 这里不再叙述

70 网页设计与制作图 3-26 body 样式中区块设置图 3-27 body 样式中方框设置图 3-28 文字设置效果 3.3.2 使用 CSS 设置图片格式 1. 创建图片样式.p1 接着为首页中的图片设置样式打开 CSS 样式面板, 新建样式.

17 70 网页设计与制作图 3-26 body 样式中区块设置图 3-27 body 样式中方框设置图 3-28 文字设置效果使用 CSS 设置图片格式 1. 创建图片样式.p1 接着为首页中的图片设置样式打开 CSS 样式面板, 新建样式.p1, 如图 3-29(a) 所示在方框面板中设置图片的宽和高 Width:300px,Height:100px, 设置图片的对齐方式为左对齐 Float:left;Margin:Top 为 5px;Margin:right 为 20px;Margin:bottom 为 5px,

Width:4px; 线条颜色设为橘色 Color:#F63, 如图 3-29(c) 所示 (a) (b) (c) 图 3-29.p1 的 CSS 规则设置 2. 应用.

18 第 3 章 CSS 样式 71 即设置图片边框与上下和右边网页元素的距离设置 Padding 的 Top Right Bottom Left 的值都相同, 为 2px, 即使得图片边框与图片内容有 2px 的间隔如图 3-29(b) 所示在边框面板中设置图片上下左右的边框为实线 Style:solid; 线条为两个像素宽 Width:4px; 线条颜色设为橘色 Color:#F63, 如图 3-29(c) 所示 (a) (b) (c) 图 3-29.p1 的 CSS 规则设置 2. 应用.p1 样式在 Dreamweaver 中选中要应用样式的图片, 在属性栏的类中选择要使用的样式, 如图 3-30 所示, 网页整体效果如图 3-31 所示图 3-30 图片样式应用

景点介绍人文风情图片浏览四个文字导航打开 CSS 样式面板打开新建 CSS 规则对话框, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 a:link, 如图 3-32 所示图 3-32 新建超链接 CSS 规则选择器的选择 (2) 单击确定按钮, 弹出 a:link 的 CSS 规则定义对话框设置超链接在正常状态下的文字样式

19 72 网页设计与制作图 3-31 图片样式应用效果使用 CSS 设置超链接格式下面在 Dreamweaver 中通过 CSS 样式面板给网页中顶部的首页景点介绍人文风情图片浏览四个超链接设置 CSS 样式使超链接文字在正常浏览状态下不加下划线文字颜色为深绿色加粗 ; 鼠标经过超链接时文字颜色变为橘色加下划线 ; 单击后使超链接文字去掉下划线保持橘色 (1) 选中网页顶部的首页景点介绍人文风情图片浏览四个文字导航打开 CSS 样式面板打开新建 CSS 规则对话框, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 a:link, 如图 3-32 所示图 3-32 新建超链接 CSS 规则选择器的选择 (2) 单击确定按钮, 弹出 a:link 的 CSS 规则定义对话框设置超链接在正常状态下的文字样式 Font-family( 字体 ): 宋体 ;Font-size( 字号 ):14px;Font-weight:bold( 粗体 );Color( 字符颜色 ):#06f;Text-decoration:none( 字符装饰为无 ), 如图 3-33 所示 (3) 用同样的方法, 设置鼠标经过时超链接文字的样式新建 CSS 规则, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 a:hover, 在弹出的对话框中设置鼠标经过时超链接的样式 Font-family( 字体 ): 宋体 ;Font-size( 字号 ):14px;Font-weight: bold( 粗体 );Color( 字符颜色 ):#F63;Text-decoration:underline( 字符装饰为下划线 ), 如图 3-34 所示

20 第 3 章 CSS 样式 73 图 3-33 a:link 类型面板设置超链接正常状态样式图 3-34 a:hover 类型面板设置鼠标指向超链接文字样式 (4) 用同样的方法设置访问后的超链接文字样式新建 CSS 规则, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 a:visited, 在弹出的对话框中设置鼠标经过时超链接的样式 Font-family( 字体 ): 宋体 ;Font-size( 字号 ):14px;Font-weight:bold( 粗体 ); Color( 字符颜色 ):#F63;Text-decoration:none( 字符装饰为无 ), 如图 3-35 所示图 3-35 a:visited 类型面板设置超链接访问过后的样式同一页内设置不同的超链接另外, 还要给网页文档中的一级标题文字加上超链接, 并设置与导航不同的超链接样式

21 74 网页设计与制作要求在正常状态文字为橘色并带有下划线, 当鼠标指向时文字变为蓝色没有下划线等装饰当超链接访问过后文字为黑色, 没有下划线等装饰此时, 当把一级标题文字设置为超链接时, 它们均应用了刚才我们针对 <a> 标记设计的 a:link,a:hover,a:visited 的 CSS 规则为了区分此时的超链接样式不是刚才的超链接样式, 可以利用复合选择器来实现即因为网页中文档的一级标题超链接文字对应的标签是包含在 <h4></h4> 中的 <a></a>,(<h4> <a > 一白洋淀 </a></h4>), 因此可以通过使用复合选择器 h4 a:link 来区别于 a:link, 这种方式就可以区别同一页面中的不同超链接对象, 为超链接设计应用不同的 CSS 样式 1. 设置一级标题的正常状态超链接样式 (1) 新建 CSS 规则, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 h4 a:link, 如图 3-36 所示图 3-36 复合选择器 (2) 在弹出的对话框中设置鼠标经过时超链接的样式 Font-family( 字体 ): 宋体 ;Font-size ( 字号 ):14px;Color( 字符颜色 ):#F63( 橘色 );Text-decoration:underline( 加下划线 ), 如图 3-36 所示图 3-37 设置一级标题的正常状态超链接样式

22 第 3 章 CSS 样式设置一级标题的鼠标指向状态的超链接样式 (1) 新建 CSS 规则, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 h4 a:hover (2) 在弹出的对话框中设置鼠标经过时超链接的样式 Font-family( 字体 ): 宋体 ;Font-size ( 字号 ):14px;Color( 字符颜色 ):#06F( 蓝色 );Text-decoration:none( 字符装饰为无 ), 如图 3-37 所示图 3-38 设置一级标题的鼠标指向状态超链接样式 3. 设置一级标题的访问过状态的超链接样式 (1) 新建 CSS 规则, 将选择器类型设置为复合内容 ( 基于选择的内容 ), 选择器名称为 h4 a:visited (2) 在弹出的对话框中设置鼠标经过时超链接的样式 Font-family( 字体 ): 宋体 ;Font-size ( 字号 ):14px;Color( 字符颜色 ):#000( 黑色 );Text-decoration:none( 字符装饰为无 ) 按 F12 键可以预览网页效果, 如图 3-39 所示图 3-39 超链接效果预览

CSS 网页风格样式的设计与制作, 主要采用 CSS 对网页中的文本图片超链接等元素进行统一设置, 使整个站点保持视觉的一致性在网页风格更换时, 通过修改 CSS 文件而统一修改网页中的文字及超链接等对象根据以上任务, 通过下面几个步骤制作保定旅游网 1.

23 76 网页设计与制作 3.4 实践与运用保定旅游网的设计与制作通过以上对 CSS 基本概念 CSS 样式的创建 CSS 样式的应用等内容的学习, 我们对 CSS 样式的设置与应用有了一个简单的认识下面通过一个具体的实例, 将网页内容设计 (html) 与网页表现设置 (CSS) 等内容综合起来, 完成保定旅游网的设计与制作在制作网站之前, 首先对保定旅游网任务进行分析这是一个中型的网站, 需要通过 CSS 网页风格样式的设计与制作, 主要采用 CSS 对网页中的文本图片超链接等元素进行统一设置, 使整个站点保持视觉的一致性在网页风格更换时, 通过修改 CSS 文件而统一修改网页中的文字及超链接等对象根据以上任务, 通过下面几个步骤制作保定旅游网 1. 创建本地站点选择站点新建站点命令, 在站点名称文本框中修改站点名称为保定旅游网站, 选择保存网站的路径在站点文件夹下建立 images 文件夹 CSS 文件夹和子页文件夹 ZY, 将网页所用图片放入 images 文件夹中, 网页中的 CSS 样式文件放到 CSS 文件夹中, 网页中的所有子页放到 ZY 文件夹中, 如图 3-40 所示 2. 使用 Dreamweaver 设计制作网页 (1) 制作网页之前需要确定网页的布局, 本网站的所有网页都是按照一种方式布局的, 如图 3-41 所示主要 banner( 使用做好的图片 ) 将网页的主旨显示出来 ; 导航由文字超链接构成, 方便浏览 ; 网页内容区域由图片和文字构成 ; 网页的最下面是版权信息, 如图 3-41 所示图 3-40 站点文件及文件夹设置图 3-41 页面布局设置 (2) 网页使用表格布局选择插入表格命令在弹出的表格的对话框中, 设置表格为 4 行 1 列表格宽为 800 像素边框粗细设为 0, 如图 3-42 所示 ( 第 1 行放置 banner 图片, 第 2 行放置导航文字, 第 3 行放置网页主要内容, 第 4 行放置版权信息 )

jpg 的宽为 800, 高为 200, 如图 3-43 所示图 3-43 网页页头设计 (4) 在第 2 个单元格内写入导航文字首页景点介绍人文风情图片浏览并给它们加上超链接单击第 2 个单元格,

24 第 3 章 CSS 样式 77 图 3-42 使用表格布局 (3) 插入 banner 图片在表格中第 1 个单元格内插入图片单击表格内部的第 1 个单元格, 选择插入图像命令, 先后选择 images 文件中的 banner.jpg 选中图片, 在对应的属性栏中修改图片的大小, 设置 banner.jpg 的宽为 800, 高为 200, 如图 3-43 所示图 3-43 网页页头设计 (4) 在第 2 个单元格内写入导航文字首页景点介绍人文风情图片浏览并给它们加上超链接单击第 2 个单元格, 在属性栏中设置单元格背景颜色为 #333333, 如图 3-43 所示 (5) 编辑正文内容, 单击第 3 个单元格将正文文字及图片导入, 选中正文中的大标题文字, 在属性栏中设置格式为标题 1; 分别选中正文中的二级标题, 在属性栏中设置格式为标题 4, 并分别给它们设置超链接, 使其链接到不同的子页中另外再给第 3 个单元格加上背景颜色为 #FFFFFF( 白色 ), 如图 3-44 所示

25 78 网页设计与制作图 3-43 网页导航设计图 3-44 设置标题及单元格背景色 (6) 在表格的第 4 个单元格中插入版权和联系方式等信息, 并设置单元背景颜色为深灰色 (#333333), 如图 3-45 所示图 3-45 网页页脚设计使用相同的方法创建首页中提到的八个景点相应的子页, 在此不再详细叙述

; 如图 3-46 所示, 单击确定按钮图 3-46 选择 body 标记为样式选择器 (2) 打开将样式表文件另存为对话框, 将其存放在站点根目录下的 CSS 文件夹中, 文件名为 Style.

26 第 3 章 CSS 样式使用 CSS 格式化网页外观 (1) 为网页整体设置样式打开 CSS 样式面板, 单击新建样式按钮, 打开新建 CSS 规则对话框选择器类型选择标签 ( 重新定义 HTML 元素 ) ; 选择器名称选择 body; 规则定义选择新建样式表文件 ; 如图 3-46 所示, 单击确定按钮图 3-46 选择 body 标记为样式选择器 (2) 打开将样式表文件另存为对话框, 将其存放在站点根目录下的 CSS 文件夹中, 文件名为 Style.css, 如图 3-47 所示, 单击保存按钮图 3-47 将样式表文件另存为对话框 (3) 在弹出的 body 的 CSS 规则定义对话框中设置页面样式在类型选项卡中设置字体 Font-family: 宋体 ; 字号 Font-size:14px; 字体颜色 Color:#000, 如图 3-47(a) 所示选择背景选项卡, 设置背景颜色 Background-color 为浅灰色 :E8E8E8, 如图 3-47 (b) 所示在区块选项卡中设置首行缩进 Text-indent 为 2em, 如图 3-47(c) 所示

27 80 网页设计与制作 (a) (b) (c) 图 3-47 body 样式设置 (4) 给表格的第 1 个单元格设置样式 TD1, 将首航缩进 text-indent 的值设置为 0,margin 和 padding 的值设置为 0, 使之结合紧密, 过渡自然, 如图 3-48 所示

28 第 3 章 CSS 样式 81 (a) (b) 图 3-48 TD1 第 1 个单元格样式设置 (5) 新建正文图片的样式.p1 按照节中所述的方式, 设置图片格式, 在此不再详细介绍 (6) 新建超链接的样式按照节和节中所述的方式分别设计网页中导航文字超链接样式和正文中一级标题的超链接样式, 使其正常状态为黄色, 鼠标经过时为橙色加下划线, 访问过后文字颜色为白色 ; 正文中一级标题的超链接正常状态为蓝色并加有下划线, 鼠标经过时为橙色, 访问过后为绿色, 在此不再详细介绍 (7) 新建网页正文中大标题样式.title 和页脚文字样式.footer 按照节叙述的方法将标题样式.title 设置为宋体,24 号, 加粗, 橙色, 居中将页脚文字样式.footer 设置为宋体, 12 号, 白色, 居中, 在此不再详细叙述 (8) 新建单元格的样式 TD2 使第 2 第 3 第 4 个单元格中的内容与单元格边框上下左右均保持 5 个像素的距离打开新建 CSS 规则对话框, 选择方框, 如图 3-49 所示

82 网页设计与制作图 3-49 内容单元格样式 (9) 设置子页应用 Style.css 样式文件, 统一网页外观打开相应子页, 在 CSS 样式面板中单击附加样式表按钮, 弹出链接外部样式表对话框, 选择文件路径, 添加为链接如图 3-50 所示, 使子页中对应的元素应用 Style.css 中的样式图 3-50 链接外部样式表对话框 4.

29 82 网页设计与制作图 3-49 内容单元格样式 (9) 设置子页应用 Style.css 样式文件, 统一网页外观打开相应子页, 在 CSS 样式面板中单击附加样式表按钮, 弹出链接外部样式表对话框, 选择文件路径, 添加为链接如图 3-50 所示, 使子页中对应的元素应用 Style.css 中的样式图 3-50 链接外部样式表对话框 4. 保存网页分别保存子页和首页, 此时, 单击 F12 键就可以预览网站效果了复习思考题一选择题 1. 在新建 CSS 规则对话框中, 有 ( ) 种选择器类型可供选择 A.3 B.4 C.5 D.2 2. 在 CSS 中 margin:2px 4px 4px 2px, 请问这 4 个值分别属于 ( ) 方位的 A. 上右左下 B. 上左下右 C. 左上右下 D. 上右下左 3. 在 CSS 中, 通过 ( ) 在同一页面上设置不同的超链接 A. 伪类 B. 类 C. 行内元素 D. 对象

30 第 3 章 CSS 样式通过 Dreamweaver 设置页面属性窗口可以设置的页面链接属性是 ( ) A. 活动链接的颜色 B. 链接的下划线样式 C. 图片的颜色 D. 默认文本的字体 5. 在 Dreamweaver 中, 不可对已有的样式进行的操作是 ( ) A. 链接外部样式表 B. 修改样式表 C. 无 D. 删除样式表二判断题 1.CSS 样式可以保存为 CSS 样式表, 其后缀名为.css ( ) 2.CSS 样式表修改后所有应用样式表的网页都会自动更新 ( )

使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布

使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布使用 CSS+Div 布局网页实训目的常见网页布局方式有表格布局框架布局和使用 CSS+DIV 布局等方式使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术熟练掌握 CSS+DIV 布局方式, 是网页设计者必备的技能实训目的 : 掌握网页界面设计流程 ; 掌握与网页元素定位相关的 CSS