实验15使用CSS美化网页.docVIP

实验15 CSS选择器 1．实验目的 （1）掌握CSS不同选择器在网页中的使用方法。 （2）掌握在网页上应用CSS的方法。 2．实验内容 利用CSS对“网络与信息安全实验教学”网站首页进行美工设计，效果如图15-1所示。 图15-1首页效果图 3. 实验步骤 一．创建“网络与信息安全实验教学”站点 （1）将“实验14”文件夹中的syjx文件夹复制到D盘； （2）启动Dreamweaver，使用“站点｜新建站点”命令创建“网络与信息安全实验教学”站点，并指定syjx文件夹为“网络与信息安全实验教学”站点的本地根文件夹。 二．链接“首页”的CSS样式 （1）将实验14中定义好的网站首页的样式链接到首页，在CSS样式面板中选择附加样式表按钮，如图所示15-2所示。 图15-2 CSS面板 打开“链接外部样式表”对话框，选择已经定义好的CSS样式，如图所示15-3所示。 图15-3 “链接外部样式表”对话框 （2）方法2：在head区域添加link标签，通过设置其属性来链接外部样式表，代码如下所示：link href=css.css rel=stylesheet type=text/css /。 三．应用CSS样式表中的相关样式 （1）导航样式 选中导航菜单中的文字，在属性面板上选择样式中的“menu”样式，如图15-4所示。 图15-4 CSS菜单样式 （2）标题样式 选中每个模块的标题文字，在属性面板上选择样式中的“new_title”样式，如图15-5所示。 图15-5 CSS标题样式 （3）正文样式 选中每个模块的标题文字，在属性面板上选择样式中的“nr ”样式，如图15-6所示。 图15-6CSS正文样式 （4）表格样式 选中相应的布局表格，在属性面板上选择样式中的“table1”样式，如图15-7所示。 图15-7 CSS表格样式 （5）版权信息栏样式 选中相应的布局表格，在属性面板上选择样式中的“bq”样式，如图15-8所示。 图15-8 CSS版权信息栏样式 4．问题解答 （1）使用样式表有哪几种方式？ 使用样式表有4种方法，每种方法都有其不同的优点： ① 将样式表植入HTML文件中。 ② 将一个外部样式表链接到HTML文件上。 ③ 将一个外部样式表输入到HTML文件中。 ④ 将样式表加入到HTML文件行中。 （2）CSS的主要用途是什么？ 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到： ① 在几乎所有的浏览器上都可以使用。 ② 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 ③ 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 ④ 可以轻松地控制页面的布局。 ⑤ 可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 5．思考题 （1）如何应用不同的CSS选择器? （2）CSS中对段落控制的样式有哪些？ （3）链接外部CSS样式文件的方法有哪些？ （4）CSS中的伪类是什么，有何用处？