dreamweaver基础教程—使用dreamweaver设计css样式

《dreamweaver基础教程—使用dreamweaver设计css样式》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、使用Dreamweaver设计CSS样式使用Dreamweaver设计CSS样式Dreamweaver对于CSS技术的支持始于2002年的MX版本（6.0版本号），最初Dreamweaver 仅把CSS作为设置字体样式的一个辅助工具，新建CSS样式也被归为【文本】菜单项下。在新世纪最初的几年里，大家对于CSS技术的认识还是比较肤浅的，仅视其为一种雕虫小技。到了2004 年，当时的Macromedia公司逐渐意识到CSS技术的重要性，并在2005 年推出的Dreamweaver 0版本中完全升级对CSS技术的支持。此时，CSS在网页布局中的实践应用，以及各种支持CSS技术的工具也

2、雨后春笋般地冒出来。自从Adobe并购Macromedia公司之后，Adobe把支持CSS技术作为Dreamweaver 升级的核心，因此在Dreamweaver CS3、Dreamweaver CS4等版本中都会看到一个相对成熟的CSS技术应用环境。不管是可视化操作环境，还是CSS编码环境，与目前各种Web设计工具相比较，Dreamweaver 都应该算是最优秀的。很多高手排斥用Dreamweaver编写CSS样式，认为可视化操作多此一举。但是Dreamweaver 所提供的环境对于初学者来说绝对是不可缺少的：一是手脚并用（可视化操作和代码输入）能够提高开发速度；二是借助可视

3、化环境能够直观、准确地预览效果、排查错误；三是贴心的辅助工具帮助你节省大量宝贵时间。因此，本章将详细讲解如何使用Dreamweaver 来开发CSS样式表，以提高CSS编码的速度和质量。1从【CSS样式】面板开始Dreamweaver 从0版本开始把散乱的CSS技术支持功能集成到【CSS样式】面板中，从而为设计师节省了大量宝贵时间，所以本节也从【CSS样式】面板开始走入Dreamweaver 世界。1.1 认识【CSS样式】面板启动Dreamweaver，需要新建一个网页文档，然后选择【窗口】

4、【CSS样式】菜单命令，就会打开【CSS样式】面板，如图1所示。【CSS样式】面板包

5、含的所有功能可以使用一句话来概括：一个全能菜单、两种显示模式、三种属性视图、四个操作按钮。l一个全能菜单：CSS样式操作的所有功能都可以在面板菜单中找到。单击面板右上角的下拉菜单图标（），将弹出一个下拉菜单，该菜单显示了所有CSS操作功能。实际上，Dreamweaver 的所有面板都拥有这样一个全能菜单。当在面板中找不到所需要的操作按钮时，去面板菜单选择是一个不错的方法。l两种显示模式：所谓显示模式就是显示已定义样式的方式，包括【全部】和【正在】两种模式。在面板的顶部有两个按钮（），单击可以在这两种模式间进行来回159网页制作与网站开发从入门到精通切换。n【全部】模式将显示当前

6、文档中全部样式，包括外部样式、内部样式和行内样式，如图2所示。n【正在】模式将显示当前对象或选中内容所定义的样式，如图1所示。图1【CSS样式】面板和正在模式图2【CSS样式】的全部模式l三种属性视图：所谓属性视图就是显示属性列表的方式。在【CSS样式】面板底部左侧并列显示三个按钮（），它们分别对应显示类别视图（）、显示列表视图（）和只显示设置属性（）。具体说明如下。n【显示类别视图】：把CSS属性按类进行归类，这样按类选择属性，设置的样式会层次清晰，适合初学者使用，如图3所示。n【显示列表视图】：把所有CSS属性按字母顺序进行排序显示，设置样式时能够模糊检索，快速找到所需要的

7、属性，适合初步入门用户使用，如图4所示。图3显示类别视图图4显示列表视图n【只显示设置属性】：仅显示已经定义的属性列表，不再显示所有CSS属性，设置样式时简单快捷，避免干扰，适合熟练CSS的用户使用，如图5所示。l四个操作按钮：在【CSS样式】面板底部右侧并列显示四个按钮（），它们分别对应附加样式表（）、新建CSS规则（）、编辑样式（）和删除CSS属性（）。具体说明如下。160使用Dreamweaver设计CSS样式n附加样式表：单击该按钮可以打开【链接外部样式表】对话框，如图6所示，在该对话框中设置要导入的外部样式表文件、导入方式（如链接到文档还是导入到文档）和样式表的媒体类

8、型（即在什么环境中有效），从而实现把外部样式表导入到当前文档中。n新建CSS规则：单击该按钮将打开【新图8.5 只显示设置属性建CSS规则】对话框，所谓规则就是CSS样式的意思。在【新建CSS规则】对话框中可以设置样式的选择器类型和名称，以及该样式存放的位置，如图7所示。图6【链接外部样式表】对话框图7【新建CSS规则】对话框n编辑样式：单击该按钮可以打开【CSS规则定义】对话框，如图8所示，在该对话框中可以快速、直观地修改样式的属性和属性值，增加或删除属性。n删除CSS属性：在【CSS样式