第14章 利用Dreamweaver进行CSS设计演示文稿.PPTVIP

第14章 利用Dreamweaver进行CSS设计 前面几章我们已经将现有的CSS技术介绍得差不多了，相信读者一定是跃跃欲试，急于把学到的知识应用在实际当中。实现这一目标有利的武器就是Dreamweaver，在网页制作方面占统治地位的软件。 本章将从Dreamweaver的应用出发，综合复习前面所学的CSS知识。 14.1 Dreamweaver介绍 在本书的第一章，出于让读者有些关于CSS感性认识的目的，附带介绍了Dreamweaver8的点滴知识，在本书接近结尾的时候，读者已经掌握了一定的CSS技巧，希望能够在工作中快速上手，就应该抓住目前业内的主流版本，实现技术的与时俱进。因此，本章将以Dreamweaver的最新版本CS3为蓝本，比较详细地讲述它在设计、编辑、管理网页CSS的方方面面，使读者的实际CSS设计能力迅速提高。 Dreamweaver，按照英文字面解释就是：“织梦人”的意思。确实，利用Dreamweaver确实可以非常好地将网页的创意、梦想通过使用者的双手变为现实中丰富多彩的网页。Dreamweaver既然是制作网页的利器，它的诞生和发展与互联网的飞速壮大密不可分，自1997年Macromedia公司将它推向市场后，一直大受欢迎，截至目前的版本有：Dreamweaver 1.0 (1997年12月推出) Dreamweaver 1.2 (1998年3月推出) Dreamweaver 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) Dreamweaver CS3 (2007年4月16日推出，版本号9.0) 14.1.1 如何获得Dreamweaver CS3 Dreamweaver CS3是一个非常强大的商业软件，因此要享用它的先进功能，必须通过合法购买的途径，价格大概是数千元。当然，对于我们初学者，可以通过下面的渠道获得试用版来进行学习。 一般来说，软件的新版本在诞生的时候，为了让用户能够体验到新版的优越性，促进销售，在其官方网站上都会有试用版的下载。这些试用版的软件在功能上和正式发售的版本没有很多差别，只是使用时间有限制，一般不超过45天。这样的时间间隔已经足够我们学习了。整个过程有点类似在购买汽车之前所进行的“试驾”。 14.1.2 Dreamweaver CS3的安装过程 打开“我的电脑”，找到刚才下载的安装文件所在位置，双击ADBEDRWVCS3_WWE.exe的图标，弹出解压缩安装文件的界面，按照图14-4的提示选择存放文件的文件夹位置，单击下一步，直到解压缩完成。 14.1.3 Dreamweaver CS3操作界面介绍 安装结束后，单击系统的“开始”? “所有程序”? Adobe Dreamweaver CS3启动软件，首先出现的是图14-6，由于我们所下载的是试用版本，因此如果购买了软件，需要将序列号填写在图中的文本框中，否则单击下方的单选框开始试用。值得注意的是该窗体左上方显示的就是Dreamweaver CS3的图标，由Dw两个字符组成。在本章中，也将用Dw来代表Dreamweaver CS3这个软件，请读者注意。 14.1.4 Dreamweaver CS3的代码编辑技巧 打开Dw，单击图14-8中Create New下方HTML字样，出现Dw的网页设计（Design）视图，其中包括一个空白的网页，所示中间白色背景的部分。我们将在这种编辑模式下，对这个新创建的网页进行修改。 14.2 在Dreamweaver中创建CSS 上一节我们已经利用Dw创建了一个非常简单的网页，包含一个链接、一个表格和一个Div标签。在本节中将在这个网页上添加CSS样式。 14.2.1 创建样式表 在CSS管理面板中单击右下角的小图标，创建一个新的CSS样式规则，具体图标位置见图所示。单击这一带有加号的小图标后，弹出如下对话框，如图所示。 14.2.2 创建外部样式表 在图中选择类型选择器，在随后的标签列表框中选择a标签，即链接，然后保持默认的定义为“新样式文件”，单击OK按钮，弹出图所示的文件保存对话框。 14.2.3 创建内部样式表