网页设计中的 CSS 小技巧

在这一节知识点中，我将带领大家来学习 CSS 的一些技巧。当然， 有过 CSS 基础的同学们可能知道，CSS 的技巧有很多，我们今天所讲述的技巧算是入门的一些技巧。更深入的内容需要大家以后在实践中多多积累。那么本节知识点你会学习到哪些有意思的知识点呢？首先我们会讲解一下如何搭建页面的布局。然后讲解设置CSS类选择器。然后讲解控制页面中的文本。最后我们会讲解导航Navigator 标签的使用。好了，闲话不多说，让我们开始今天的学习吧！

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，其他选项按照之前的填写方法即可完成导航的创建/修改。

5. 小结

本节中，老师带领大家学习了如何搭建页面布局。要理解布局的重要性，布局好比页面的脚手架，网页设计大楼的基石。合理的布局能够直接影响用户的使用反馈，在商业网站中，甚至决定了你的用户量，日活，月活用户。

试想一下，如果移动端的网页某些信息放在了很难看到的地方，用户在使用手机浏览的时候是否会嫌弃？因此，各位同学要掌握页面布局设计的重要性。

其次是 CSS 的类选择器。，CSS 选择器的类型有几种常见的，其中类选择器就是其一。我们之前还学过标签选择器和 ID 选择器。它们的存在都帮助我们更好的控制页面中的元素。

从前端开发的角度，这有利于利用 JavaScript 设计更好的用户交互。因此同学们必须掌握类选择器的使用。在本节后续的内容中，老师还给大家讲解了页面文本的控制和 Navigator 标签的使用。，HTML 标签的一个易学之处就在于它大多数是见名知意的。对于标签的使用我们会使用其主要功能就可以。至于其他的复杂的属性还要在实际使用的时候去查阅相关的开发文档。