使用CSS样式表美化网页.docVIP

PAGE 243 - 第10章 使用CSS样式表美化网页 CSS可以将网页和格式进行分离，提供对页面布局更强的控制能力以及更快的下载速度。在如今的网页制作中，几乎所有精美的网页都用到了CSS。有了CSS控制，网页便会给人一种尝新悦目的感觉。CSS虽然只是一些代码，得到的效果却不同凡响。Dreamweaver 8在CSS功能设计上做了很大的改进。这一章我们就来学习如何在Dreamweaver 8中利用CSS美化网页，提高网页制作的品质。 10.1 CSS快速入门 CSS是Cascading Style Sheet的缩写，可以翻译为层叠样式表或级联样式表。CSS是一个辅助HTML设计的新特性，能够保持整个HTML的统一外观。使用CSS可以在设置文本之前，制定整个文本的属性，比如颜色、字体和大小等，即可获得统一的外观。让我们先来了解一下在Dreamweaver 8中CSS的基本功能吧。 10.1.1 CSS新 如果要在网页中输入代码才能实现CSS的效果，相信很多人都会放弃使用CSS。正是因为Dreamweaver 8为用户提供了可视化的操作界面，所以受到越来越多人的喜爱。Dreamweaver 8在CSS功能设计方面为使用者带来的方便体现在：【属性】面板、页面属性、【CSS样式】面板和CSS语法提示。下面我们分别讲述： 1. 【属性】面板 　　在Dreamweaver 8【属性】面板中的【样式】选项中，我们可以在设计页面时添加的字体、颜色、大小等样式，【样式】选项会将这些格式自动记忆生成“Style1”、“Style2”样式。在下次重复使用可以直接在【样式】选项中套用样式，有了这个功能，我们在做网页设计时可以大大提高工作效率。如图10-1-1所示。 图10-1- SEQ 图10-1- \* ARABIC 1 【属性】面板中的【样式】选项 如果套用的CSS样式不是文字，而是表格或者表单，同样可以在【属性】面板中设置CSS。在【属性】面板中都有一个【类】选项，【类】选项会将我们对表格或表单的格式设置自动记忆生成“Style1”、“Style2 2. 页面属性 在Dreamweaver 8的【属性】面板中可以看到一个【页面属性】按钮，单击这个按钮，可以直接打开【页面属性】对话框。在对话框左边的分类中可以看到“外观”、“链接”、“标题”、“标题/编码”和“跟踪图像”选项，选中其中一个选项，在右边出现相应的设置内容。大家可以自己试试看这些选项中各个设置。 3. 【CSS 样式】面板 在Dreamweaver 8中界面最右边有一列各种选项面板，其中包括【CSS样式】面板，也可以按Ctrl+F11调出该面板，面板如图10-1-2所示。 图10-1- SEQ 图10-1- \* ARABIC 2 【CSS样式】面板 面板下方的一排按钮非常有用。包括了【附加样式表】、【新建CSS规则】、【编辑样式】和【删除CSS规则】。在网页制作过程中，我们经常会用到这些按钮。 另外，单击【属性】面板上【样式】选项后的【CSS】按钮可以在【CSS样式】面板中查看当前选中样式的摘要，如图10-1-3所示是选中“Style1”时的【CSS样式】面板。 图10-1- SEQ 图10-1- \* ARABIC 3 【CSS样式】面板的【正在】选项 4．CSS语法提示 我们【代码】视图中编辑CSS的时候，只要输入一个CSS的样式名称和冒号，Dreamweaver 8就会自动弹出一个列表，列出该样式可以使用的参数。我们只要在弹出的下拉列表中选择要编辑的CSS样式就可以了，省去自己输入代码的麻烦。如图10-1-4 图10-1- SEQ 图10-1- \* ARABIC 4 CSS语法提示 10.1.2样式表的引用方式 从上面的例子中，我们可以看到CSS的语句是内嵌在HTML文档内的。在以往，你可能需要用文本编辑工具来编写。比如Windows下的记事本和写字板或者专门的HTML文本编辑工具等。 但是在Dreamweaver 8里，我们根本不需要编写任何代码，就能创建CSS样式。那么你可能会问，独立编辑好的CSS文档怎样加入到HTML文档中呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。下面我们分别讲述： 1. 外部文件方式 外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。在Dreamweaver 8下创建CSS文件比较简单。你可以选择菜单【文件】|【新建】命令，在弹出的【新建文档】对话框中选择【类别】为“CSS样式表”，如图10-1-5所示。 图10-1- SEQ 图10-1- \* ARABI