简述Dreamweaver中基于CSS的网站建设

2019-07-21 标签:CSS样式,网站建设 浏览数:1290

摘要: 计算机技术尤其是计算机网络技术的迅猛发展,推动了网站建设和网页制作的发展,网站已经成为各企业、单位或个人对外宣传、展示自我的手段。Dreamweaver作为众多网页制作工具之一,以其所见即所得的优点,以及强大的CSS样式功能,受到了广大网页制作人员的喜爱。灵活运用CSS进行网页制作可以帮助设计者实现更多的网页效果。

资讯主图

Dreamweaver是Macromedia公司推出的一款所见即所得的网页制作工具,也是目前使用最广泛的网站建设工具之一。CSS样式是Dreamweaver中用于设置网页的外观属性与内容格式的工具,熟练使用CSS样式可以是网页设计者必须掌握的基本技能,也是其设计制作出精美网页的基础。

1 CSS的含义

CSS是Cascading Style Sheet的简称,其中文含义是层叠样式表[1]。它是一系列格式规则,用于设置与调整网页的外观。它弥补了传统HTML文档单调烦琐的缺陷,设计者可以通过定义与设置CSS样式并将其加入在HTML文档中,从而简化繁杂的格式化文档的操作,CSS除了可以对HTML文档中的字体、字号、颜色等进行设置外,还可以设置一些比较特别的HTML属性,如对象位置、图片效果、鼠标指针等。此外,利用CSS不仅可以控制一篇文档中的文本格式,而且可以一次控制多个文档中的文本,并可通过改动CSS的格式,来更改应用此样式的所有文档中的样式。使用CSS定义页面文本的格式,将使工作量大大减少。通过一些好的样式表,使设计者更进一步对页面进行美化及对文本格式进行精确定制。


2 CSS的特点

2.1 将内容与格式进行分离

HTML语言定义了网页的内容以及各部分结构和各元素的功能,而层叠样式表通过将定义结构的部分和定义内容的部分分离,使设计者能够对页面的布局施加更多控制。HTML 仍可以保持简单明了的初衷,而层叠样式表代码独立地从另一个角度控制页面外观。

2.2 精确控制页面布局

在HTML文档的编写过程中,对于页面的控制很有限,在HTML中无法实现对象的精确定位,也无法精确定义字间距或行间距等,而通过层叠样式表的定义与设置,则可以轻松实现上述功能,使网页看起来更加规范更加美观[2]

2.3 制作更小、下载速度更快的网页

层叠样式表只是简单的文本,就像HTML代码那样,它不需要图像,不需要执行程序,不需要插件。使用层叠样式表可以减少表格标签及其他增加HTML 代码长度的代码,减少图像用量,从而减少文件大小。

2.4 同时更新多个网页,提高工作效率

较早版本的Dreamweaver软件,并没有CSS样式功能,如果想更新整个站点中所有文本的字体,必须逐页的修改每张网页。而层叠样式表最大的特点就是将HTML内容与格式分离开来。利用层叠样式表,可以将站点上所有的网页都指向单一层叠样式表文件,只有修改层叠样式表文件中的某一行,整个站点都会随之发生变化。

2.5 具有高度的兼容性

层叠样式表的代码具有较强的兼容性,对于浏览器的选择也没有太高的要求,对于不同品牌、不同版本的浏览器都可以完成页面内容的显示即使用户丢失了某个插件也不会发生中断。


3 CSS的基本类型

层叠样式表包含以下四种类型[3]

3.1 类样式

用户可以在文档的任何区域或文本中应用类样式,如果将类样式应用于一整段文字,那么会在相应的标签中出现Class属性,该属性值即为类样式名称。如果将类样式应用于部分文字上,那么会出现<span> 和</span> 标签,并且其中包含Cass属性。

3.2 包含特定ID 属性的标签

如果定义包含特定ID属性的标签格式,则这个标签的ID是唯一的,并且只应用于一个HTML元素。例如,在以下代码中:

#pen {font-family:”宋体”}

该层叠样式表只针对于页面中ID值为pen的页面元素有效,例如:

<div id=”pen”’ >content</div >

3.3 定义HTML 标签

可以针对某一个标签来定义层叠样式表,也就是说所定义的层叠样式表只应用于选择的标签。例如:如果为<body></body> 标签定义了层叠样式表,那么所有包含在body>< /body> 标签范围内的内容都将遵循所定义的层叠样式表。

3.4 复合内容

当用户创建或改变一个同时影响两个或多个标签、类或ID 的复合规则层叠样式表时,所有包含在该标签中的内容将遵循定义的层叠样式表的格式显示。常用的样式有四种,分别为a:link、a:active、a:visited、a:hover。

a:link:设置正常状态下链接文字的样式。

a:active:设置鼠标单击时链接文字的外观。

Avisited:设置访问过的链接文字的外观。

a:hover:设置鼠标放置在链接文字上时文字的外观。


4 添加CSS的方法

在HTML中添加CSS方法有三种,分别是行内样式、内嵌样式和外部样式。

4.1 行内样式

所谓行样式表就是样CSS样式代码写在具体网页中的一个标内,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。例如:

<p style=”color:#f00”>行内样式</p>

行内样式是通过使用属性style进行定义的,可以任意在一个p标签中,只有该行中的文字内容应用了该样式。使用行内样式可以灵活地对文字添加不同的样式,但如果涉及的文字内容较多,则会增加后期维护的难度,加大工作量。

4.2 内嵌样式

内嵌样式是将CSS样式添加在HTML的头文件中,即标记<head>与</head>之间,例如:

使用内嵌样式可以将所定义的样式应用到当前网页之中。

4.3 外部样式

外部样式是一个以.CSS为扩展名的样式文件,使用时在HTML标记中进行调用CSS文件,可以使用@import语句或link语句进行调用。例如:

其中@import url(css.css);语句的功能是在网页中调用css.css外部文件。

而使用link来调用外部的css文件需要在头文件中放置<link rel=”stylesheet” href=”css.css” type=”text/css” />来调用外部的css.css文件来实现html调用css文件。

总之,米维信息认为在网页设计与制作的过程中恰当运用CSS进行页面布局,可以将一个CSS样式表应用到网站的所有页面上,统一页面风格,避免麻烦的重复工作,提高工作效率。同时,还可以有效地减少网页的http请求,从而大大地提高了页面的性能,减少服务器的负荷,提高网站的性能。网页设计者应认真研究、合理规划,使其强大的功能得以充分发挥。


关键字: 衡阳网站建设,CSS样式

提供衡阳微信小程序开发,微信营销功能开发、公众号开发等开发服务
米维信息微信小程序二维码