Dreamweaver 8项目开发教程.ppt

实 施 步 骤 步骤一：打开“index.html”建立选择器类型为【类】的CSS样式规则。 步骤二：保存文件，预览最终效果 情 境 设 置 子项目二中所采用方式创建的样式表，虽说同一个网页中不同标签都可以引用，但该样式表的有效范围也仅限于它所在的网页本身，其他网页不能引用到这个样式表。而实际情况中，同一个网站里的所有网页往往要保持样式的一致性，这就要求所有网页中的标签均采用相同的样式。因此接下来的项目中，我们采用了第三种样式表的创建和引用方式，使得不同的网页都可以引用同一个样式表。 另外该子项目中还要学习利用CSS的伪类样式表设置超链接标签的样式。 子 项 目 三 展 示 本子项目利用CSS技术最终制作的网页样张如下 子 项 目 三 目 标 能够建立CSS样式表文件，并在该文件中定义各种样式表 能够建立选择器类型为“伪类”的样式表 能够在网页文档中引用CSS样式表文件 子 项 目 三 分 析 具体工作任务： 1、打开网页文件“index.html”。 2、打开CSS面板，新建一个名为test.css的CSS样式表文件。 3、在该文件中建立一个选择器类型为“标签”的样式表，重新定 义body标签。 4、在该文件中建立选择器类型为“伪类”的样式表，改变超链接 的样式 。 实 施 步 骤 步骤一：建立选择器类型为“标签”的CSS样式并保存成样式表文件 ，并在该文件中重新设置body标签的样式。 步骤二：在样式表文件中建立伪类样式表 注意：这种创建样式表的方式也就是要将各种CSS样式设置单独保存成一个独立的文件，我们将这种文件称为样式表文件，其后缀为.css。 步骤三：保存文件，预览最终效果。 知 识 链 接 一、网页与样式表文件的关联 建立好的样式表文件如何被网页所引用哪？换句话说各个网页中的标签如何能按照样式表文件中的样式显示？这就需要将样式表文件和网页进行关联。关联方式为在网页的文档头head中用link标签，代码如下： link href=test.css rel=stylesheet type=text/css / link标签的“href”的属性用来设置关联样式表文件的存放位置和名称 。 正是通过这种关联的方式，使得不同的网页都可以采用同一个样式表文件中定义的各种样式，从而达到不同网页保持样式一致性的效果。 知 识 链 接 二、各种样式表的引用方式的特点 通过三个子项目我们学习了CSS样式表的三种创建和引用方式，第一种和第二种都是在网页文档本身的head标签中创建，并且都要放在style中，我们把这两种方式算作一种，称为内部文档头方式。另外一种就是单独创建一个样式表文件，并在该文件中设置样式表，需要使用其中样式的网页就关联此文件，我们把这种方式就做外部文件方式。除了此之外还有一种，就是利用HTML标签的“style”属性，直接将样式表定义在一个标签中，比如h1 style= “color: #00CCCC; text-decoration: line-through;”，我们称为直接插入式，这种方式定义的样式只能对该标签有效。 因此综合起来看，样式表的引用共三种： 1、内部文档头 （作用范围为当前网页） 2、外部文件（可以被任何网页关联使用） 3、直接插入式 （仅能被当前标签使用） 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 建立页面文件“index.html” 在页面上插入一个1行1列的表格，将标题放入表格中 插入三个段落文本 采用CSS滤镜制作发光的标题，并用CSS定位技术将标题居中 采用CSS设置样式，使三个段落均有立体感 。 。 。 。 小 结 本章通过三个子项目介绍了CSS的概念，它的出现极大的弥补了HTML标签样式单一的缺点。CSS有很多属性，正式通过设置这些属性不同的值，实现了丰富的样式。根据CSS选择器的不同，可以将CSS样式表分为三类：类、标签、伪类。第一种可以被任何HTML标签通过“class”属性使用，第二种能够对现有标签重新定义，第三种则可以改变超链接的样式。这三种样式表可以定义在独立的样式表文件中，被任何一个网页关联使用，也可以定义在网页的文当头中，作用于该网页，还可以将定义代码直接插入HTML标签内，改变这个标签的样式。对于样式表的创建，既可以自己编写代码，还可以利用Dreamweaver自动创建 。 项目十六 架设Web服务器发布网站 配合《Dreamweaver 8项目开发教程》使用 同系列《ASP.NET项目开发教