2.8 应用案例——为页面添加CSS样式

使用CSS可以减轻网页设计者的工作负担，CSS能够在恰当的地方集中一批命令，以实现某种可视效果，而不是将它们分散在整个文档中。下面通过一个网站页面的设计制作过程，向读者介绍CSS样式在网页设计中的应用方法和技巧，页面的最终效果如图2-19所示。

图2-19 页面的最终效果

源文件位置：源文件\第2章\2-8.html

视频位置：视频\第2章\2-8.mp4

2.8.1 设计分析

本案例设计制作了一个工作室网站页面，页面布局新颖，运用的色彩艳丽，页面中的背景以及图片的布局给浏览者一种神秘的感觉，不会因过于简单而不够美观。设计页面时结合了相应的配色原理，使页面具有独特的设计风格。

2.8.2 制作步骤

（1）执行“文件”→“新建”命令，弹出“新建文档”对话框，新建一个HTML文档，如图2-20所示。执行“文件”→“保存”命令，将页面保存为“源文件\第2章\2-6.html”。

图2-20 新建文档

（2）用相同的方法，新建两个CSS文件，并分别保存为“源文件\第2章\style\div.css”和“源文件\第2章\style\css.css”。

技巧

按“Ctrl+N”组合键，可以直接弹出“新建文档”对话框，从中进行新建页面的操作。

（3）执行“窗口”→“CSS设计器”命令，打开“CSS设计器”面板，单击面板上的“添加CSS源”按钮，在弹出的下拉列表中选择“附加现有的CSS文件”选项，继续弹出“使用现有的CSS文件”对话框，将刚刚新建的外部样式表文件div.css和css.css链接到页面中，如图2-21所示。

图2-21 链接外部样式表文件

（4）将页面切换到css.css文件，创建一个名为*的CSS规则，如图2-22所示。再创建一个名为body的CSS规则，如图2-23所示。

图2-22 名为*的CSS规则代码

图2-23 名为body的CSS规则代码

提示

这里的*为通配选择符。*的使用表示所有对象，包括所有不同id、不同class的HTML的所有标签。

（5）将光标置于页面视图中，单击“插入”面板上的“Div”按钮，弹出“插入Div”对话框，在ID下拉列表框中输入“box”，如图2-24所示，单击“确定”按钮，在页面中插入名为box的Div，页面效果如图2-25所示。

图2-24 “插入Div”对话框

图2-25 插入名为box的Div

（6）将页面切换到div.css文件，创建一个名为#box的CSS规则，如图2-26所示，页面效果如图2-27所示。

图2-26 CSS规则代码

图2-27 页面效果

（7）将光标移至名为box的Div中，将多余的文本内容删除，单击“插入”面板上的“Div”按钮，弹出“插入Div”对话框，在ID下拉列表框中输入“top”，如图2-28所示，单击“确定”按钮，在名为box的Div中插入名为top的Div，页面效果如图2-29所示。

图2-28 “插入Div”对话框

图2-29 插入名为top的Div

提示

在“插入Div”对话框中，通过“插入”选项，可以指定插入的Div位置。

· 在插入点：将Div插入在光标所在的位置。

· 在标签之前：将Div插入在所选标签的前面。

· 在开始标签之后：将Div插入在所选标签的开始标签之后。

· 在开始标签之前：将Div插入在所选标签的结束标签之前。

· 在标签之后：将Div插入在所选标签的后面。

（8）将页面切换到div.css文件，创建一个名称为#top的CSS规则，如图2-30所示，页面效果如图2-31所示。

图2-30 CSS规则代码

图2-31 页面效果

（9）将光标移至名为top的Div中，将多余的文本内容删除，输入相应文本，如图2-32所示，选中刚刚输入的文字，将页面切换到代码视图，添加列表代码，如图2-33所示。

图2-32 输入文字

图2-33 添加列表代码

（10）将页面切换到div.css文件，创建一个名称为#top li的CSS规则，如图2-34所示，页面效果如图2-35所示。

图2-34 CSS规则代码

图2-35 页面效果

（11）单击“插入”面板上的“Div”按钮，弹出“插入Div”对话框，在ID下拉列表框中输入“top2”，如图2-36所示，单击“确定”按钮，在名为top的Div后插入名为top2的Div，如图2-37所示。

图2-36 “插入div”对话框

图2-37 插入名为top2的Div

（12）将页面切换到div.css文件，创建一个名称为#top2的CSS规则，如图2-38所示，页面效果如图2-39所示。

图2-38 CSS规则代码

图2-39 页面效果

（13）将光标移至名为top2的Div中，将多余的文本内容删除，单击“插入”面板上的“Image”按钮，将图像“源文件\第2章\images\2402.png”插入页面，如图2-40所示，再将光标移至图像后，按“Shift+Enter”组合键插入换行符，输入文本内容，如图2-41所示。

图2-40 插入图像

图2-41 输入文本内容

提示

在网页中插入的透底图片多以gif格式为主，但是由于gif格式的图片颜色信息较少，会使一些色彩较多的图片失真，这时就需要使用png格式来保存透底图片。但需要注意的是，IE7以下版本的IE浏览器不支持png格式。

（14）单击“插入”面板上的“Div”按钮，在名为top2的Div后插入名为main的Div，将页面切换到div.css文件，创建一个名称为#main的CSS规则，如图2-42所示，页面效果如图2-43所示。

图2-42 CSS规则代码

图2-43 页面效果

（15）将光标移至名为main的Div中，将多余的文本内容删除，单击“插入”面板上的“Div”按钮，在名为main的Div中插入名为main-left的Div，将页面切换到div.css文件，创建一个名称为#main-left的CSS规则，如图2-44所示，页面效果如图2-45所示。

图2-44 CSS规则代码

图2-45 页面效果

（16）单击“插入”面板上的“Image”按钮，将图像“源文件\第2章\images\2403.png”插入页面，如图2-46所示，将光标移至图像后，按“Shift+Enter”组合键插入换行符，输入文本内容，如图2-47所示。

图2-46 插入图像

图2-47 页面效果

提示

换行符在代码视图中显示为
。按“Enter”键可以插入段落符，在代码视图中显示为<p></p>。

（17）将页面切换到css.css文件，创建一个名称为.font01的CSS规则，如图2-48所示。选中“LimeWire下载”文字，应用刚刚新建的样式，页面效果如图2-49所示。

图2-48 CSS规则代码

图2-49 页面效果

提示

此处的CSS规则代码的意思为：字体大小为15px；字体为微软雅黑；行高为30px；字体颜色为#89b601。

（18）用相同的方法，插入名为main-main的Div和名为main-right的Div。其CSS规则代码如图2-50所示，页面效果如图2-51所示。

图2-50 CSS规则代码

图2-51 页面效果

（19）单击“插入”面板上的Div按钮，在名为main的Div后插入名为bottom的Div。将页面切换到div.css文件，创建一个名称为#bottom的CSS规则，如图2-52所示，页面效果如图2-53所示。

图2-52 CSS规则代码

图2-53 页面效果

（20）将光标移至名为bottom的Div中，将多余的文本内容删除，输入文本内容，如图2-54所示，将页面切换到代码视图，添加<span>标签，如图2-55所示。

图2-54 输入文字

图2-55 添加<span>标签

（21）将页面切换到div.css文件，创建一个名称为#bottom span的CSS规则，如图2-56所示，页面效果如图2-57所示。

图2-56 CSS规则代码

图2-57 页面效果

（22）完成页面的制作，执行“文件”→“保存”命令，保存页面。单击页面右下角的“预览”按钮，页面效果如图2-58所示。

图2-58 页面效果

2.8.3 案例总结

本案例通过设计制作一个工作室网站页面，讲解了在页面中添加CSS样式及控制页面元素的方法，读者在完成了本案例的制作后，需要能够掌握基本的CSS样式应用方法，并能应用到实际的工作中。

上一章目录下一章