1、网页设计与制作,网页美化1、页面属性2、 CSS技术创建和应用CSS样式,知识点拨,1、 页面属性,设置“外观”页面属性 设置“链接”页面属性 设置“标题”页面属性 【要点】注意几个易混的动作：变换图像链接指鼠标放在链接文字上活动链接指鼠标按住文字链接但没有松手已访问链接指鼠标按住文字连接后松手,例子,将myweb中的主页的链接设置为： 链接 黑色 变换图像链接 红色 活动链接 绿色 已访问链接 粉红色 无下划线,知识点拨,第4.2 使用css样式 4.2.1CSS技术概述 4.2.2 设置CSS属性 4.2.3 创建和使用CSS样式,课堂讲解,CSS样式简介 创建CSS样式 设置CSS样式
2、管理CSS样式 应用CSS滤镜效果 扩展的CSS支持,CSS样式简介,CSS（Cascading Style Sheets）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。,创建CSS样式,自定义CSS样式 HTML标签样式 CSS选择器样式,自定义CSS样式,自定义CSS样式可以对任何文本块或文本区域进行且需要用户手动进行应用。,HTML标签样式,该样式是对现有的HTML标记进行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新。,CSS选择器
3、样式,该样式是对某些特定的标记组合进行重新定义，如所有包含了特定ID属性的标记，设置完成此样式后Dreamweaver会自动应用该样式。,设置CSS样式,类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置,类型设置,类型设置应用实例-文字,样式-新建立样式-自定义样式-命名-设置 选择文字-应用,类型设置,类型设置应用实例-超级连接,样式-新建立样式-选择css样式表-命名-设置 (一般是超级链接的都会自动应用 除非已经重新定义文本的格式) 重新修改:文本-css样式-编辑,正常状态 已经访问过 鼠标经过 活动链接,类型设置应用实例-超级连接,1、锚的伪类 最常用的
4、是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态： Link：未访问的链接 Visited：已访问的链接 Hover ：鼠标停留在链接上 Active ：激活链接,正常状态 已经访问过 鼠标经过 活动链接,方框设置,“方框”设置可以定义控制元素在页面上的放置方式和属性等。,边框设置,“边框”设置包括定义元素周围边框的样式、宽度及颜色等。,边框设置,“边框”设置包括定义元素周围边框的样式、宽度及颜色等。,边框设置,“边框”设置包括定义元素周围边框的样式、宽度及颜色等。,会有什么样的效果?,背景设置,“背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否
5、滚动、背景图像相对于应用样式元素的位置。,区块设置,“区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。,列表设置,“列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。,定位设置,“定位”设置主要用于控制网页元素，特别是层的位置。,扩展设置,“扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。,管理CSS样式,修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 自定义CSS样式的应用 链接外部CSS样式,修改CSS样式,创建层叠样式后，可以修改样式中的某些参数。,删除CSS样式,在“
6、CSS样式”面板中，选择要删除的样式名称。 单击面板底部的“删除”按钮即可将样式删除。,复制CSS样式,复制一个已经创建完成的CSS样式，再对其参数进行修改，即可创建一个全新的CSS样式，这样可以提高工作效率。,重命名层叠样式,自定义CSS样式的应用,在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义层叠样式需要用户手动操作。 选择对象-应用样式,链接外部CSS样式,通过链接外部CSS样式可将其他网页中的样式应用到当前网页中。附加样式表-链接或者导入,应用CSS滤镜效果,CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的HTML元素上，使应用样式的
7、对象产生模糊、反转、发光等特殊效果。在Dreamweaver 8中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代码。,扩展的CSS支持,在Dreamweaver 8中，CSS面板设计成了统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。,上机实战,本课上机实战主要练习某公司站点的CSS样式定义。在练习中主要用到CSS样式的创建和添加外部CSS样式的链接等知识点，通过练习读者应充分掌握自定义样式、HTML标签样式等CSS样式的创建。在制作中主要分为创建标签样式、自定义文本样式以及创建超级链接样式这3个部分。,上机实战 ：学习园地,新建立站点:css 新建立站点
8、文件夹:pic 新建立文件:xxyd.htm 把图片hphoto .jpg复制到pic中,学习园地页面的制作,1、插入行列的表格，表格宽像素，边框和间距都为.表格居中，背景色为#D5ECB4插入内容如下图,学习园地页面的制作,、插入行列的表格，表格宽像素，边框和间距都为.表格居中，背景色为#00FF99插入内容如下图红框部分,、插入行列的表格，表格宽像素，边框和间距都为.表格居中，背景色为#99FF99插入内容如下图,、选择第一行背景色为#CCCC99插入内容如下图，在第一行的中间表格插入一个行列的表格。,、选择第一行背景色为#CCCC99插入内容如下图，在第一行的中间表格插入一个行列的表格。,样式使用,大小18像素,行高26,颜色#FF6633,样式使用,建立样式 名称:subHeader大小:11像素行高:22颜色:#993300 其它的标题文字也用这个样式,样式使用,建立样式 名称:td 大小:11像素 颜色:#666666 所有的单元格中的文字都会变成这样的文字,不用套用,样式使用,建立样式 名称:a 颜色:#993300 建立样式 名称:a:hover 颜色:#5c743d,所有的超级链接的文字都会变成这样的效果,不用套用,样式使用,建立样式 名称:bk 颜色:#333300 虚线细边框的设置,
