原创CSS网页布局三
在前两节教程中,我们学会了使用DW来创建包含文字,图片,视频,以及超级链接的网页.并且也掌握了如何使用HTML/XHTML来完成相同的工作.还有,用HTML/XHTML或DW来简单的对这些网页元素进行一个布局.[排版]
实际上,前两节教程的目的是让新手朋友对什么是网页,以及网页制作大概流程有个初步的了解,这样方便以后的知识吸收和掌握.理论知识是不可避免的,甚至在以后的教程中所占的比例会较大,但这是必须的,如果你渴望了解问题本质的话.叉子保证,不会很难,但要求你能静下心来.
·什么是W
·使用CSS的必要性
⒈减少网页代码体积,加快用户浏览,减少流量,硬盘,
⒉对搜索引擎友好,提高网站排名.
本节教程,我们就开始正式的学习如何使用CSS进行符合Web标准的网页布局了.
在了解什么是Web标准之前,我们先看看专业人士常说的内容,结构和表现.
内容,结构和表现 – [例1]
内容 – 即网页中实际要表达的信息,其他的都是辅助信息.不能被称为内容.
结构 – 对网页内容的分割,比如,标题,段落…
表现 – 可以理解为对网页整体的美化.
在这里叉子提醒大家,网页”内容”越多,页面的体积就越大,在网络上传输的也就越慢,所以,网页设计人员会在满足基本的内容和美观的同时尽量的减少页面的体积.
传统的网页布局
一般是使用表格来作为[容器],对网页内的元素进行位置的摆放.然后使用HTML代码对网页内文字的颜色,大小,居中方式进行控制.
比如：例2
这仅是一个网页的差距,为什么要要用户多余支付带宽呢?
不仅仅是这样,内容埋藏在烦琐的无意义的代码之间,对搜索引擎不友好,影响网站的排名.
另外,网页文件太大,对我们来说,来会增加带宽预算.
我们发现了传统布局的缺憾,发现HTML代码的滥用和乱用.有人也发现了,他们站出来号召行业内人士要遵从一个统一的标准,这样有利于行业的规范和发展,于是,Web标准就诞生了.
这群人就是W
·什么是W
·内容,结构和表现
·使用CSS的必要性
什么是CSS?
CSS的全称 – Cascading Style Sheets – 层叠样式表 – CSS样式表,是简化网站设计和开发的一种语言.简单地说,CSS控制的是网页的外观.我们使用CSS可以控制网页内文字的颜色,文字的样式,以及段落之间的距离…
网页内的元素：
⒈普通文字
⒉图片
⒊超级链接
⒋表格
⒌列表
⒍视频
⒎… …
网页布局需要掌握的：
⒈控制普通文字的大小,颜色,背景,以及样式.
⒉控制图片的大小.位置
⒊控制超级链接的文字大小,文字颜色,背景,以及样式.
⒋表格的边框
⒌列表的样式,文字大小,颜色…
⒍…
⒎元素之间的距离.
CSS规则
·规则 – CSS样式表无非是由若干的规则组成的一串代码. – 是由若干个声明的组成的.
·选择器 – 作用是将该规则应用给网页内某个或若干个的元素
·声明 – 具体的描述规则的内容 – 是由属性和属性值
·属性
·值
·注释
分组选择器 – 减少代码量
我们知道,有时间,网页内的某些不同元素的表现方式可能相同.如3800hk.这里我们可以书写2条CSS规则,但好象有点问题,我们可以通过分组选择器来将一条规则同时应用给2个或者若干个不同的网页元素.
计算机中的长度和量度
现实世界中,我们使用米,厘米,分米来做计量单位.在计算机中,一般是使用象素[px]来做计量单位的.
我们来看看我们的屏幕分辨率.
所以,我们设计网页时,要考虑到一些使用800 X 600 px的分辨率的用户.
上面的是绝对量度,现在我们在看下什么是相对量度.
百分比的概念大家一定都不陌生吧?
这里需要大家注意以下,百分比一定是相对某个元素的大小来说的.
将CSS样式表与网页[HTML文档]整和起来的4种方法：
⒈内嵌样式表
<style type="text/css">
CSS规则
</style>
<html>
<head>
<style type="text/css">
CSS规则
</style>
</head>
<body>
</body>
</html>
⒉外部样式表
<link href="" rel="stylesheet" type="text/css" />
浏览器的缓存机制
⒊导入样式表
@import url(123.css);
必须出现在其他的样式表之前,否则会失效
注意：旧式浏览器不支持该方法,我们可以利用这个特性来完成一些效果.后面给大家介绍.一般常用就是上面2种.
⒋内联样式
直接对某个元素增加CSS规则.
仿站咨询扫二维码
仿站教程推荐
- 相关链接：
- 教程说明：
原创CSS网页布局三
。
