第14章+利用Dreamweaver进行CSS设计.ppt

1、第14章 利用Dreamweaver进行CSS设计,前面几章我们已经将现有的CSS技术介绍得差不多了，相信读者一定是跃跃欲试，急于把学到的知识应用在实际当中。实现这一目标有利的武器就是Dreamweaver，在网页制作方面占统治地位的软件。 本章将从Dreamweaver的应用出发，综合复习前面所学的CSS知识。,14.1 Dreamweaver介绍,在本书的第一章，出于让读者有些关于CSS感性认识的目的，附带介绍了Dreamweaver8的点滴知识，在本书接近结尾的时候，读者已经掌握了一定的CSS技巧，希望能够在工作中快速上手，就应该抓住目前业内的主流版本，实现技术的与时俱进。因此，本章将以

2、Dreamweaver的最新版本CS3为蓝本，比较详细地讲述它在设计、编辑、管理网页CSS的方方面面，使读者的实际CSS设计能力迅速提高。 Dreamweaver，按照英文字面解释就是：“织梦人”的意思。确实，利用Dreamweaver确实可以非常好地将网页的创意、梦想通过使用者的双手变为现实中丰富多彩的网页。Dreamweaver既然是制作网页的利器，它的诞生和发展与互联网的飞速壮大密不可分，自1997年Macromedia公司将它推向市场后，一直大受欢迎，截至目前的版本有：Dreamweaver 1.0 (1997年12月推出) Dreamweaver 1.2 (1998年3月推出) Dr

3、eamweaver 2.0 (1998年12月推出，这也是作者最早接触的版本) Dreamweaver 3.0 (1999年12月推出) Dreamweaver UltraDev 1.0 (2000年6月推出) Dreamweaver 4.0 (2000年12月推出) Dreamweaver UltraDev 4.0 (2000年12月推出，适应了动态网页的发展趋势) Dreamweaver MX (2002年5月29日推出，版本号6.0) Dreamweaver MX 2004 (2003年9月10日推出，版本号7.0) Dreamweaver 8 (2005年9月13日推出，版本号8.0)

4、 Dreamweaver CS3 (2007年4月16日推出，版本号9.0),14.1.1 如何获得Dreamweaver CS3,Dreamweaver CS3是一个非常强大的商业软件，因此要享用它的先进功能，必须通过合法购买的途径，价格大概是数千元。当然，对于我们初学者，可以通过下面的渠道获得试用版来进行学习。 一般来说，软件的新版本在诞生的时候，为了让用户能够体验到新版的优越性，促进销售，在其官方网站上都会有试用版的下载。这些试用版的软件在功能上和正式发售的版本没有很多差别，只是使用时间有限制，一般不超过45天。这样的时间间隔已经足够我们学习了。整个过程有点类似在购买汽车之前所进行的“试

5、驾”。,14.1.2 Dreamweaver CS3的安装过程,打开“我的电脑”，找到刚才下载的安装文件所在位置，双击ADBEDRWVCS3_WWE.exe的图标，弹出解压缩安装文件的界面，按照图14-4的提示选择存放文件的文件夹位置，单击下一步，直到解压缩完成。,双击下载的安装包后，弹出的解压缩界面,14.1.3 Dreamweaver CS3操作界面介绍,安装结束后，单击系统的“开始” “所有程序” Adobe Dreamweaver CS3启动软件，首先出现的是图14-6，由于我们所下载的是试用版本，因此如果购买了软件，需要将序列号填写在图中的文本框中，否则单击下方的单选框开始试用。值得

6、注意的是该窗体左上方显示的就是Dreamweaver CS3的图标，由Dw两个字符组成。在本章中，也将用Dw来代表Dreamweaver CS3这个软件，请读者注意。,打开Dw时提示输入注册码或者开始试用,14.1.4 Dreamweaver CS3的代码编辑技巧,打开Dw，单击图14-8中Create New下方HTML字样，出现Dw的网页设计（Design）视图，其中包括一个空白的网页，所示中间白色背景的部分。我们将在这种编辑模式下，对这个新创建的网页进行修改。,Dw中的网页设计界面,14.2 在Dreamweaver中创建CSS,上一节我们已经利用Dw创建了一个非常简单的网页，包含一个链

7、接、一个表格和一个Div标签。在本节中将在这个网页上添加CSS样式。,Dw中CSS管理面板的位置,14.2.1 创建样式表,在CSS管理面板中单击右下角的小图标，创建一个新的CSS样式规则，具体图标位置见图所示。单击这一带有加号的小图标后，弹出如下对话框，如图所示。,创建新的内部样式表 创建新CSS规则的选项,14.2.2 创建外部样式表,在图中选择类型选择器，在随后的标签列表框中选择a标签，即链接，然后保持默认的定义为“新样式文件”，单击OK按钮，弹出图所示的文件保存对话框。,保存新建样式规则为外部样式表,14.2.3 创建内部样式表,接下来，我们回到图，如果在最后一个单选框中选择定义在文档

8、内部，则会创建内部样式表，选择类选择器，并在中间的列表框中输入test如图所示。单击OK按钮，则再次显示出图，可见和创建外部样式表一样殊途同归。这一对话框将在下一节中详细讲解。,创建内部样式表完成,14.2.4 创建行内样式表,在学习了创建内部样式表和外部样式表之后，读者可能会问，行内样式表又是在哪里创建呢？在图14-16中并没有行内样式表的选项。 由于行内样式表与标签紧密联系（就在标签内部书写），所以在创建行内样式表之前，首先要找到应用行内样式表的标签。一般来说，在设计视图选择一个标签更为直观，鼠标单击某标签即可。不过，如果网页可能比较繁杂，鼠标操作可能不容易选择一个细小的标签。笔者推荐下面

9、的技巧涸Dw的三种编辑模式下，在界面左下角，都可以看到一些HTML标签，这实际上就是光标所在位置HTML标签的层次关系，像一个项链一样，每一颗珠子代表一个标签，如果要选择它，只要单击串上的某一个标签即可，非常方便，如图所示。,在Dw中选择标签,14.3 在Dreamweaver中详细设置CSS规则,现在，我们在上一节已经为test.html设置了外部样式表、内部样式表和行内样式表，但是为了讲解的方便，外部样式表和内部样式表并没有实际设置，在本节中将修改这两个样式表，真正实现对网页的显示进行控制。 修改已有的CSS规则很简单，在CSS管理面板中选择任一已有CSS样式规则（注意不要选择样式表文件名

10、），再单击右下角的铅笔图标就可以实现，如图所示。单击铅笔图标后Dw就会弹出之前见过的图，下面对其每一设置进行讲解。,修改已有CSS规则,14.3.1 设置字体类型,打开设置/修改CSS规则后，默认页面就是设置字体类型，如图14-24。通过简单的选择，在页面中共可以进行如下样式属性的设置： Font列表框设置了font-family属性，即字体的名称。 Size列表框设置了font-size属性，即字体的大小。 Weight列表框设置了font-weight属性，即字体的粗细。 Style列表框设置了font-style属性，即字体的风格，斜体等。 Variant列表框设置了font-varia

11、nt属性。 Line height列表框设置了line-height属性，设置行高。 Case列表框设置了text-tranform属性，即字符的大小写。 Decoration列表框设置了text-decoration属性，即删除线，下划线，闪烁等特别效果。 Color列表框设置了color属性，即字体的颜色。,14.3.2 设置背景,页面中可以对如下属性进行设置： Background color选项设置了background-color属性，改变背景颜色。 Background image选项设置了background-image属性，改变网页背景图片。 Repeat列表框设置了backg

12、round-repeat属性，决定背景图片是否重复显示。 Attachment列表框设置了background-attachment属性，决定网页滑动时，背景是否跟着运动。 Horizontal position和vertical position综合起来设置background-position属性，决定背景图片相对于标签显示的大致位置。,14.3.3 设置块元素样式,Word spacing选项设置了word-spacing属性，用于改变单词之间的间距。 Letter spacing选项设置了letter-spacing属性，用于改变单词中字母之间的间距。 Vertical alignme

13、nt选项设置了vertical-align属性，改变在标签垂直方向内容的对齐方式。 Text align选项设置了text-align属性，改变在水平方向上内容的对齐方式。 Text indent选项设置了text-indent属性，改变文本在水平方向的缩进方式。 Whitespace选项设置了white-space属性，改变文本的换行方式。其中Nowrap表示不换行。 Display选项设置了display属性，改变标签的显示方式，inline和block是常用的两个值。,设置块元素样式,14.3.4 设置盒模型标签样式,该选项页可以设置如下的样式属性： Width列表输入框设置了width

14、属性，改变盒模型的宽度。 Height列表输入框设置了height属性，改变盒模型的高度。 Float列表框设置了float属性，绝对标签是否向左漂移还是向右漂移等。 Clear列表框设置了clear属性，定义是否允许两边可以有浮动对象，具体有如下几个值可以设置： None：允许两边都可以有浮动对象 Both：不允许有浮动对象 Left：不允许左边有浮动对象 Right：不允许右边有浮动对象 Padding等几个列表输入框分别设置了padding，padding-left,padding-top，padding-bottom，padding-right等属性，改变盒模型的内间距。 Margin

15、等几个列表输入框分别设置了margin，margin-left，margin-top，margin-bottom，margin-right等属性，改变盒模型的外边距。,14.3.5 设置边框样式,第五个选项页是对边框的样式进行设置，如图14-28所示。在其中，可对如下一些属性进行修改： Style列表输入框对border-style属性进行设置，用于控制边框线型。如果去掉所有都一致的选择框，则可单独为border-left-style这样，每一个方向上的边框进行具体设置。 Width列表输入框和Color列表输入框则分别设置border-width和border-color属性。如果去掉所有都

16、一致的选择框，能够单独地设置每一边的宽度和颜色。,设置边框样式,14.3.6 设置列表样式,第六个选项页则对列表样式进行设置，如图14-29所示。界面中： Type列表框可以设置list-style-type属性，控制列表每一项目开头的标记样式。 Bullet image列表框设置list-style-image属性，控制列表每一项目开头标记是否用图片来表示。 Position列表框设置list-style-position属性，控制列表的显示位置。,14.3.7 设置标签定位,Type列表框设置了position样式属性，决定标签的位置，可以选择的值有：static、absolute、rel

17、ative和fixed几种。 Visibility列表框设置了visibility样式属性，决定标签是否显示，可以有inherit、visible和hidden三个值。 Width和Height列表框则设置了待定位标签的width和height属性。 Z-index列表框设置了标签的前景背景显示，当两个绝对定位的标签位置相同时，数值小的将遮盖数值大的标签。 Overflow列表框设置了标签内容超出标签范围的处理，有visible、hidden、scroll、auto四个选项，规定这种情况发生时，标签如何显示。 Placement区域可以对四个方向的数值进行设置，规定具体大小以及与已有的父标签的

18、距离。 Clip区域可以对四个方向上的数值进行设置，控制标签的可视区域，在所设定方框区域之外的内容将被剪切隐藏。必须将前面所述的position属性值设为absolute，此属性才可生效。,14.3.8 设置扩展效果,最后一个选项页设置了标签或者页面的扩展效果，可以进行如下的操作： Page break属性可以设置是否在标签之前（page-break-before）或者标签之后（page-break-after）插入页分隔符。可以选择的属性值有auto、always、avoid、left、right、 null几种。 Visual effect中的Cursor属性设置了标签或者页面内光标的形状

19、，可供选择的光标有等待的沙漏、输入文本时常见的光标等等。 Filter列表框可以设置标签所使用的滤镜，选择每一个滤镜后，根据需要在列表框中填写滤镜的参数。,14.3.9 完成CSS设置,本节把CSS样式规则定义窗口逐页讲述了一遍，由于每页的具体属性在本书各个章节中都有涉及，在这里正好进行了一下总结和复习。Dw中通过这样一个全面的设置界面，降低了繁杂的样式属性名称对于制作者记忆力的要求，很大的提高了制作效率。 当样式规则设置完成后，在CSS管理面板下方，我们可以看到当前选择器的所有属性，如图14-32所示，如果还有不足，直接修改属性后面的值、单击铅笔图标都可进行修改。,14.3.10 应用CSS样式规则,现在，test.html的CSS样式规则已经创建完毕，如何在页面中应用它们呢？ 方法也很简单，也很多，这里举出一个通过标签属性窗口应用样式的方法，如图所示。 当然，Dw是一个强大的商业软件，还有其它很多种方法