Dreamweaver网页设计与制作课件作者林晓峰王晓平Dreamweaver网页设计与制作第1-5章节教学课件第6章节.pptVIP

教学进程 6.3.7??定义项目符号和编号 （1）新建.xmfh的CSS规则 （2）定义规则的【列表】属性 （3）将项目符号应用到网页中 （4）应用项目符号后的效果 利用CSS定义“项目符号和编号” 1 教学进程 6.3.7??定义项目符号和编号 （1）准备作为项目符号的图片 自定义项目图片符号 2 （2）标记.xmfh CSS规则 ● 打开我们网站的wenxue_ziti_css.htm网页，在右边的表格中插入一个1×1的表格，然后把标题“想飞”放在表格中。 教学进程 6.3.8??CSS滤镜的应用 打开网页 1 编辑CSS样式 2 ● 将.style1的CSS规则定义给标题，首先在【CSS规则】面板里选择.style1自定义CSS规则，然后单击【编辑规则】按钮，弹出【.style1的CSS规则定义】对话框。在此对话框的【分类】中选择【扩展】，打开【滤镜】下拉列表，可以看到CSS样式表滤镜的多种属性。 ● 可以使用Blur滤镜为标题建立模糊效果，使用Glow滤镜为图片边界增加光效。Blur的语法是：Blur(Add=?,Direction=?,Strength=?)，其中有3个参数Add、Direction、Strength。 教学进程 6.3.8??CSS滤镜的应用 定义.style1的Blur滤镜 3 把Blur滤镜应用到标题上 4 ● 单击【确定】按钮，.style1规则已经被重新定义了，将.style1规则应用于标题所在的1×1表格上，这样Blur的CSS滤镜就已经应用到标题上了。 教学进程 6.3.8??CSS滤镜的应用 把滤镜应用到网页后的效果 5 ● 新建一个CSS规则，由于要建立的是有关文字、段落的规则，所以可以建立一个统一的【类】，在【名称】框中输入CSS规则的名称，在【定义在】中选择【新建样式表文件】。 教学进程 6.4?? 外部CSS样式表的应用 6.4.1??建立文字段落的CSS样式 建立外部样式表 1 保存样式表 2 ● 单击【确定】按钮，在弹出的【保存样式表文件为】对话框内，我们要确定以下内容：【保存在】——要保存文件的位置，【文件名】——要保存文件的名字。保存文件的时候，要尽可能地保存在站点内，命名也要尽量做到见名知意。 ● 单击【保存】按钮后，计算机中就生成了xinde.css这个外部样式表文件，同时弹出【.wenziduanluo的CSS规则定义（在xinde.css中）】对话框。 我们就开始定义这个外部CSS样式表了。可以这样定义文字和段落，在【分类】的【类型】面板中定义【字体】、【大小】、【行高】分别为：宋体、12像素、150%；【区块】面板中定义对齐方式为：顶部、左对齐，文字缩进为：2字体高。 教学进程 6.4?? 外部CSS样式表的应用 6.4.1??建立文字段落的CSS样式 定义样式表的文字和段落 3 ● 在【CSS样式】面板上单击【新建CSS规则】按钮，新建一个CSS规则。 可以把表格作为一个【类】来定义，同时也可以作为【标签】来定义。所以在弹出的【新建CSS规则】对话框中，我们把表格作为一个【标签】来定义，表格的标签为：table。 教学进程 6.4.2??建立表格的CSS样式 新建表格的CSS样式 1 定义表格的CSS样式 2 ● 单击【确定】按钮，就可以定义表格的样式了。本例中，我们可以把表格定义为边框宽度为“1”、样式为点划线的彩色表格。 ● 新建一个CSS规则。在【新建CSS规则】对话框中仍然把超级链接作为【标签】来定义，把它放到前面已经建立的外部CSS样式表文件中，超级链接的标签为a。 教学进程 6.4.3??建立超链接的CSS样式 新建超链接的CSS样式 1 定义超链接的CSS样式 2 ●单击【确定】按钮，在弹出的【a的CSS规则定义（在xinde.css中）】对话框中，可以定义网页中超级链接的样式。比如在【分类】的【类型】中定义【字体】、【大小】、【颜色】、【修饰】分别为：宋体、12像素、#FFFFFF、无；【背景】中定义背景颜色为#FFFF00。 ● 再建立一个CSS规则，在【新建CSS规则】对话框中这样定义：在【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】中选择【a:hover】，定义在xinde.css的外部样式表文件中， 教学进程 6.4.3??建立超链接的CSS样式 新建鼠标悬停时超链接的CSS规则 3 定义鼠标悬停时超链接的CSS规则 4 ● 单击【确定】按钮后，就可以添加超级链接的样式了。在本例中，我们在【分类】的【类型】中定义【颜色】为#000000；在【背景】中定义背景颜色为#00FF00。 ● 新建一个类，把它定义在外部CSS样式表中，命名为.teshuduanluo