- 相关推荐
Dreamweaver中编写CSS必须掌握的技巧
在日常学习、工作和生活中，大家对CSS都再熟悉不过了吧，下面是小编为大家整理的Dreamweaver中编写CSS必须掌握的技巧，希望对大家有所帮助。
一般地讲，样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS：
代码式(Inline)：
写入到代码中的一次性的样式。
内嵌式(Embedded)：
可控制一个页面中所有元素的样式表
外联式(External)：
可控制许多页面中的元素的样式表
事实上，许多站点都根据需要把这三种方式结合起来使用。
在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器，基于电视的浏览器以及Palm pilot和TTY(teletypewriter，远程打字机)一类的手持设备。
最佳习惯是指什么?
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于：
1：增加站点的寿命
不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。
2：让你的站点对所有的用户以及浏览器都适用。
有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。
3：让站点更新和维护更加轻松。
使用方式得当的话，CSS可让你在一个页面中的调整快速应用到所有页面中去。
你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时，对不同样式表的分析如下：
Inline CSS;简单地说，你应该尽量避免使用。除了一些其他的缺点之外，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”)，或者为了使用某个DHTML特效，它需要使用Inline 样式的javascript来改变一个对象的属性。
Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响。在更新的过程中，如果某一个页面丢失，将会使站点的风格不一致;另外，当用户浏览你的站点时，每一页都要下载一次样式表信息。
External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领，更改一次，轻松更新所有相关页面;让你的页面体积更小，浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。
在DW MX中创建CSS样式表
在DW MX中创建CSS样式表时(Text 》CSS Style 》New style sheet)，在弹出的对话框中，你有两个选择：新样式表文档(New Style Sheet File) 和只用于当前页(This Document Only)。选中“New Style Sheet File ”你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项，This Document Only，则会直接把相关代码写入到页面的部分。
你也可以在“新样式(New style)”对话框中选择一个现存的样式表来编辑或添加新的定义。
应该连接到External CSS还是导入?
创建外部样式表以后，你需要把它附加在每个页面上(或是模板)。要这样做，可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽，此时会弹出连接外部样式表 (Link External Style Sheet)对话框，在上面可以浏览到你的目标样式表的名字，找到以后，你可以选择连接(link) 或者导入(import )此外部样式表。
连接是最常用的方式，选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记：
所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到”这个样式表的话，就要采用下面的方法。
如果你选择“导入”选项，所用的标记为：
NetSscape4会完全忽略导入的CSS，而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能，不必担心浏览器的兼容性问题了。
CSS属性检查器
在DW MX的属性检查器中可以轻易切换到CSS模式。缺省情况下，属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”，你就可以看到目前可用的CSS样式表，而不是字体标签列表。
同时，你也可以轻松切回到HTML模式。
现成的CSS样式表
DW MX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File > New，在弹出的新文档对话框中选择选中CSS style sheets，在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯，选择一个标记为“Accessible”的。
将文档保存在站点文件夹内，然后就可以用上述的方法来把CSS附加在你的文档中了。
设计时间样式表(Design Time style sheets)
DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面，让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲，这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述)，附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时，你可以轻松更改为另一个样式表。
对于要将CSS应用于服务器端(比如ASP, PHP, or ColdFusion)或是要在客户端通过javascript来存取的开发者来说，设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中，这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果，所以你可在DW MX中以可视界面工作。另外一个好处就是当你上传站点文件时，你不必再检查整个站点寻找冗余的样式表了。
验证
无论你是自己创建样式表还是编辑现有的样式表，验证可以确保你不会误用不标准的标签或错误的代码。DW MX本身不包含CSS验证程序，你可以使用W3C站点提供的验证服务。在DW MX内你可以验证HTML 或DHTML标签( File > Check Page > Validate Markup (for HTML) 或 File > Check Page > Validate as XML for XHTML.)。在开发基于CSS的站点时，DW MX提供了很多辅助工具。有了MW MX的帮助，再加上对CSS良好的理解，你就可以开发出能经受时间考验的站点了。
Dreamweaver中编写CSS必须掌握的技巧
1. 搭建页面布局
在这个知识点中将学习如何利用 DreamWeaver 2018 CC 来构建页面布局。在这里我们先说下为什么要页面布局？
1.1 为什么要做页面布局？
布局，主要是指对页面展示结果的内容进行物理上的分区。就像我们买菜大多数情况下都喜欢把不同的菜装到不同的塑料袋里一样，如果你都装在一个塑料袋里，回家是不是还要分类取出来才能烹饪使用。设计页面也是一个道理。如果所有的 HTML 内容都放在一个页面里，从开发角度讲，很不容易维护。出了问题你不能迅速判断是哪里的问题。这对于今后同学们可能接触的工程级项目是很不利的。
1.2 如何把握页面布局的原则？
布局原则这一块，多数情况下你有很多现有的商业网站案例可以参考。但要知道一点，不同类型定位的网站，它是有适合它的布局风格的。而从浏览网页的设备上分类，移动端，PC端又适合不同的布局。这里我们需要多多积累，在这一节知识点中我们不展开讲解，只是给大家一个基本的认知。
1.3 如何用 Dreamweaver CC 2018 来设置页面布局？
第一步：我们先创建一个空白 HTML 文档，创建空白文档的过程，具体参见之前的知识点。
第二步：我们保存这个文档。
第三步：单击 CSS 设计器，在源选项中选择在页面中定义（参考上一节知识点中的步骤），在选择器中继续新增一个选择器，比如 #topdiv ，然后我们定义这个选择器的样式，比如长度为 320 px ，宽度为 200 px 。然后插入一个 div，在插入的时候选择这个选择器，插入完成。
第四步：再次点击插入面板中的插入，插入一个 Div ，这次选择在弹出的对话框中插入一行中选择在标签后，后面的标签选择刚刚那个ID = topdiv的标签。之后在 ID 一栏填写一个自定义 ID 值，比如 maindiv 。点击确定完成：
第五步：两个div添加好后，我们点击 CSS 设计器，在选择器一栏中新建一个选择器，名称对应刚刚设置的 maindiv，为这个选择器设置长和宽等属性。然后实时地看页面中的变化。
从这里我们可以看到，页面被分为上下两部分，并且每个部分的大小空间都随着我们设置的不同 div 属性在实时变化。照此情景，你还可以再在底下设置一个 bottomdiv ，具体需要什么样的布局风格，实际情况下还要看你的网站类型，信息类型。
以上就是使用 Dreamweaver CC 2018 构建布局的过程。操作步骤数量适中，又由于有不少回顾知识点，大家只要跟着操作一遍，相对比较容易掌握。
2. 设置 CSS 类选择器
这个知识点中我们讲解一下 CSS 的类选择器，在 CSS 的语法中，一般是将#开头的为 ID 选择器，由.开头的一般为类选择器。类选择器，顾名思义，对应 HTML 元素的 class 属性。而我们今天并不是讲如何写 CSS 代码，而是如何利用 Dreamweaver CC 2018 来设置类选择器。其实大体步骤和设置 ID 选择器是一样的。
第一步：我们要先建一个空白页面。
第二步：我们打开 CSS 设计器，点击源，添加一个 style 。
第三步：在选择器那一行中，点击 + 添加一个选择器，输入的时候由之前的 #testelement 改为.testelement，设置好属性后，这样就完成了一个类选择器的创建/修改：
3. 控制页面中的文本
在这个知识点中，将带领大家学习如何控制页面中的文本。
思维灵活的同学们想必已经猜到了文本的样式控制是如何完成的。其实就是把 HTML 元素中涉及字体的属性（大多数和 font 有关）进行编辑即可。
具体我们来看一下操作步骤：
第一步：在第一个知识点中的页面布局中的 maindiv 中加入一段文字，然后在 CSS 设计器的选择器中选择这个 maindiv 在属性面板中切换到文本类属性，改变里面的值，观察效果即可。
4. 导航 Navigator 入门
导航是我们在使用很多网站中都有的一个模块，因为任何网站的设计者在设计其网站的时候都会把信息通过页面进行一个统一的分类，我们暂且成为最顶级分类。
这个最顶级分类往往就对应着我们这里说的导航信息。从小时候的 QQ 空间中那一行相册，说说，日志，留言板，到现在各种官网的信息公开，领导介绍等都是用导航来做的。
因其功能的通用性和实用性，我们就有了一个标签来实现这一非常好用的功能。Navigator 标签。那么具体这个标签是如何使用的呢？我们通过下面的说明来了解一下。
4.1 如何使用 Dreamweaver CC 2018 设置导航？
还记得我们之前经常点击的插入面板，没错，这里面就有我们要的 Navigator，其他步骤其实和之前创建别的元素一样。先创建一个选择器，然后在插入中点击Navigator，其他选项按照之前的填写方法即可完成导航的创建/修改。
【Dreamweaver中编写CSS必须掌握的技巧】相关文章：
在Dreamweaver中如何使用模板10-26
网页设计必须掌握哪些技能05-25
什么是CSS11-08
PS必须掌握的七大调色模式12-30
新手开车转弯要掌握的技巧01-20
Dreamweaver路径介绍09-23
网页设计css教学02-07