DreamWeaver cs6网页制作中CSS样式的应用研究

韩莹

摘要：DreamWeaver作为网页三剑客之首，是在网页制作领域中应用最为广泛且功能最为强大的工具之一，CSS是控制网页内容、外观的格式规则，在近年来的网页设计领域应用十分广泛。本文通过简要分析CSS样式表的使用方式，研究CSS样式在DreamWeaver cs6中的实践操作，给CSS样式表的灵活运用提供参考借鉴。

关键词：DreamWeaver；cs6；CSS样式；应用研究

中图分类号：TP393.09 文献标识码：A 文章编号：1007-9416（2017）01-0094-01

伴随着信息技术的发展，计算机与网络已经得到普及，网页制作与網站建设也逐步成为企业或是个人进行宣传的重要手段，网站建设作为一门涵盖了动态开发技术、网络技术以及数据库技术的交叉学科，对网站建设人才的需求量在逐步增大，而DreamWeaver cs6是目前最常用的网页制作软件，CSS样式则是该软件控制网页内容和外观的主要工具，可以实现对网页制作中各对象显示属性的控制。

1 CSS样式的具体使用方式

CSS在网页中的使用方式主要有三种：代码式、内嵌式和外联式。其中，代码式主要通过将一次性样式写入代码中，实现CSS的操作；而内嵌式和外联式则是通过分别控制一个或多个页面中元素的样式表来实现CSS的操作。在实际制作网页时，也有很多站点会综合三种方式来满足网页建设需要，不同浏览器、手持设备、统一浏览器的不同版本等需要的CSS解析方式也不相同。由此可见，CSS样式选择不是固定的，一定要根据实际情况选择相应的使用方式[1]。

2 CSS样式编写习惯

为了保证站点的寿命，使CSS适用于所有用户及浏览器，开发人员就需要规范自己的CSS样式编写习惯。对于代码式CSS来说，其作用主要是定位页面元素，或满足DHTML特效的需求，开发人员应尽量避免或减少使用代码式CSS。而内嵌式CSS只能控制一个页面中元素的样式，一旦出现页面丢失现象，就会影响整个站点的统一风格，增大页面体积，耗费较大的应用空间，减慢用户网页浏览速度，不方便站点的实际使用。所以，开发人员在编写CSS样式时应该尽量使用外联式CSS，保持站点页面风格的统一，同时也可以一次更新其他相关页面的外观，减小站点页面体积，提高用户的浏览速度。

3 CSS样式表在DreamWeaver cs6中的创建

3.1 创建样式表

DreamWeaver cs6中外部CSS样式表创建过程为：命名样式表→选择储存位置→Text→CSS style→New style sheet→New style sheet file；也可以编辑或重新定义现存的样式表。接着，将刚刚创建的CSS样式表附加到页面（模板）上：点击附加样式表（Attach style sheet），连接（link）或导入（import）先前创建或选择好的CSS样式表。

3.2 利用属性检查器切换CSS模式

属性检查器是DreamWeaver cs6中切换CSS模式的工具。属性检查器会在缺省情况下将原始HTML模式中的字体标签显示出来，这时，其下拉菜单旁会有小的“A”标识，点击此标识就能将字体标签变为当前状态下可以使用的各个CSS样式表，再次点击小“A”可以切换成原来的HTML模式字体标签[2]。

4 DreamWeaver cs6提供的CSS样式表的直接利用

4.1 CSS样式表的调用方式

DreamWeaver cs6中已经包含有部分制作完成的样式表，方便新用户使用和体验CSS样式表功能。一般情况下，新用户可以通过“点击菜单→选择File→点击NewCSS style sheets”的操作顺序找到所有可以使用的DreamWeaver cs6提供的CSS列表。需要注意的是，在使用时一定要遵循上文所述的编写习惯，选择标有“Accessible”的CSS样式表，并将其附加到文档中。

4.2 时间样式表的设计方法

由于DreamWeaver cs6已经提供了一些可被直接利用的CSS样式表，因此，用户可以更清晰、直观的认识到页面设计视图的整体效果。在用户创建样式表时，可以通过同时使用连接（link）、导入（import）两种方式来开发站点，实现不同样式表外观的自由切换，使CSS样式表的创建、实际运用更加便捷、高效。

4.3 变换网页链接

通过建立CSS样式表可以达到文字链接变换效果，使之拥有更加美观的动态效果。一般情况下，文本超链接会有下划线，要消除下划线需要遵循以下步骤：新建CSS样式表→仅对该文档→使用CSS选择器→选择a： link→确定。创建结束后要点击CSS样式表选项“分类” →修饰→无，也可以根据自己的需要选择其他修饰。

5 结语

综上所述，CSS样式可以实现对网页内容、外观的灵活控制，但在实际运用中，开发人员要遵循外联式CSS编写习惯来创建样式表以缩小站点体积，统一站点风格；同时可以用连接（link）、导入（import）两种方式来实现样式表的自由切换，方便站点网页建设的总体把控。

参考文献

[1]聂玉成.浅谈Dreamweaver网页制作中CSS样式的应用技巧[J].职业技术，2010（1）：94.

[2]阎月.运用Dreamweaver的CSS样式制作动态下拉菜单[J].辽宁师专学报（自然科学版），2014（1）：28-30.