网页设计中的 CSS 小技巧
在这一节知识点中,我将带领大家来学习 CSS 的一些技巧。当然, 有过 CSS 基础的同学们可能知道,CSS 的技巧有很多,我们今天所讲述的技巧算是入门的一些技巧。更深入的内容需要大家以后在实践中多多积累。那么本节知识点你会学习到哪些有意思的知识点呢?首先我们会讲解一下如何搭建页面的布局。然后讲解设置CSS类选择器。然后讲解控制页面中的文本。最后我们会讲解导航Navigator 标签的使用。好了,闲话不多说,让我们开始今天的学习吧!
1. 搭建页面布局
布局,主要是指对页面展示结果的内容进行物理上的分区。就像我们买菜大多数情况下都喜欢把不同的菜装到不同的塑料袋里一样,如果你都装在一个塑料袋里,回家是不是还要分类取出来才能烹饪使用。设计页面也是一个道理。如果所有的 HTML 内容都放在一个页面里,从开发角度讲,很不容易维护。出了问题你不能迅速判断是哪里的问题。这对于今后同学们可能接触的工程级项目是很不利的。
1.2 如何把握页面布局的原则?
布局原则这一块,多数情况下你有很多现有的商业网站案例可以参考。但要知道一点,不同类型定位的网站,它是有适合它的布局风格的。而从浏览网页的设备上分类,移动端,PC端又适合不同的布局。这里我们需要多多积累,在这一节知识点中我们不展开讲解,只是给大家一个基本的认知。
第一步:我们先创建一个空白 HTML 文档,创建空白文档的过程,具体参见之前的知识点。
第二步:我们保存这个文档。
第三步:单击 CSS 设计器,在源选项中选择在页面中定义(参考上一节知识点中的步骤),在选择器中继续新增一个选择器,比如 #topdiv ,然后我们定义这个选择器的样式,比如长度为 320 px ,宽度为 200 px 。然后插入一个 div,在插入的时候选择这个选择器,插入完成。
第四步:再次点击插入面板中的插入,插入一个 Div ,这次选择在弹出的对话框中插入一行中选择在标签后,后面的标签选择刚刚那个 ID = topdiv
的标签。之后在 ID 一栏填写一个自定义 ID 值,比如 maindiv 。点击确定完成:
从这里我们可以看到,页面被分为上下两部分,并且每个部分的大小空间都随着我们设置的不同 div 属性在实时变化。照此情景,你还可以再在底下设置一个 bottomdiv ,具体需要什么样的布局风格,实际情况下还要看你的网站类型,信息类型。
2. 设置 CSS 类选择器
这个知识点中我们讲解一下 CSS 的类选择器,在 CSS 的语法中,一般是将 #
开头的为 ID 选择器,由.
开头的一般为类选择器。类选择器,顾名思义,对应 HTML 元素的 class 属性。而我们今天并不是讲如何写 CSS 代码,而是如何利用 Dreamweaver CC 2018 来设置类选择器。其实大体步骤和设置 ID 选择器是一样的。
3. 控制页面中的文本
思维灵活的同学们想必已经猜到了文本的样式控制是如何完成的。其实就是把 HTML 元素中涉及字体的属性(大多数和 font 有关)进行编辑即可。
具体我们来看一下操作步骤:
4. 导航 Navigator 入门
这个最顶级分类往往就对应着我们这里说的导航信息。从小时候的 QQ 空间中那一行相册,说说,日志,留言板,到现在各种官网的信息公开,领导介绍等都是用导航来做的。
4.1 如何使用 Dreamweaver CC 2018 设置导航?
还记得我们之前经常点击的插入面板,没错,这里面就有我们要的 Navigator,其他步骤其实和之前创建别的元素一样。先创建一个选择器,然后在插入中点击Navigator,其他选项按照之前的填写方法即可完成导航的创建/修改。
5. 小结
从前端开发的角度,这有利于利用 JavaScript 设计更好的用户交互。因此同学们必须掌握类选择器的使用。在本节后续的内容中,老师还给大家讲解了页面文本的控制和 Navigator 标签的使用。,HTML 标签的一个易学之处就在于它大多数是见名知意的。对于标签的使用我们会使用其主要功能就可以。至于其他的复杂的属性还要在实际使用的时候去查阅相关的开发文档。