Dreamweaver CS5 网页设计与应用(第2版)第8章CSS样式

第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。

但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。

本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。

（其实我们在前面的课程中已经接触到）作用：例子演示。

从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。

希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。

2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点：1）灵活控制网页中的每个元素的样式2）把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码＜head＞部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改█2）使用CSS样式面板打开“CSS样式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。

Dreamweaver CS3网页制作基础教程第8章习题答案dreamweavercs3网页制作基础教程第8章习题答案第8章使用css样式控制网页外观一、填空题1、（）就是“cascadingstylesheet”的简写，可译为“层叠样式表”或“级联样式表”。

恰当答案：css2、在dreamweaver中，根据选择器的不同类型，css样式被划分为3大类，即（）、标签和高级。

正确答案：类3、css样式表文件的拓展名叫“（）”。

恰当答案：.css4、设置活动超级链接的css选择器是（）。

恰当答案：a:active5、应用领域（），网页元素将依照定义的样式表明，从而统一了整个网站的风格。

恰当答案：css样式表二、选择题1、在【新建css规则】对话框的【选择器类型】单选按钮组中，挑选【类（可以应用于任何标签）】则表示（）。

a、用户自定义的css样式，可以应用领域至网页中的任何标签上，b、对现有的html标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新c、对某些标签女团或者就是所含特定id属性的标签展开再次定义样式d、以上观点都不对恰当答案：a2、在【新建css规则】对话框的【选择器类型】单选按钮组中，选择【标签（重新定义特定标签的外观）】表示（）。

a、用户自定义的css样式，可以应用到网页中的任何标签上，b、对现有的html标签展开再次定义，当建立或发生改变该样式时，所有应用领域了该样式的格式都会自动更新c、对某些标签组合或者是含有特定id属性的标签进行重新定义样式d、以上说法都不对恰当答案：b3、在【新建css规则】对话框的【选择器类型】单选按钮组中，选择【高级（id、伪类选择器等）】表示（）。

a、用户自定义的css样式，可以应用领域至网页中的任何标签上，b、对现有的html标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新c、对某些标签女团或者就是所含特定id属性的标签展开再次定义样式d、以上观点都不对恰当答案：c4、下面属于类选择器的是（）。

CSS混沌初开I：导航菜单素材的设计现在开始我们将学习如何一步一步的构建一张CSS页面。

本教程分成以下几个局部：第一讲主要是关于如何在PS中制作导航按钮素材；第二局部主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一局部是如何整合CSS和XHTML。

有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。

首先看一下完成的效果：玻璃质感导航图片的制作：首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮〞，并用灰色#ECECEC进行填充。

再新建一个图层命名为“高光〞，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。

然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：新建一个名为“网点〞的图层，用1px的铅笔工具在适当的位置绘制几个小点，例如中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：接着我们可以通过钢笔工具绘制路径创立选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。

整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？鼠标经过导航时的翻转图片：创立翻转效果图片，我们只要简单的在原有素材根底上调整色调就即可，关于文本的添加在这里就不细说了。

我们可以为每个图层调整色调，在例如中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。

这局部教程涉及到一些Photoshop的根本知识，如果你不是很了解，建议先学习一些PS的入门根底，毕竟Adobe合并了*之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。