您当前的位置: 站长圈 > 技术文章 > 网页前端 > 阿Q老师CSS基础课程第一课CSS布局

阿Q老师CSS基础课程第一课CSS布局

来源:站长圈 作者:adminzzq 点击: 0
CSS布局基础(配套视频教程见路航网站视频栏目


 关键字: css 布局 网页编辑软件 html 文档申明 标签 导入 样式表
 

一,为什么要用CSS布局:
 1,结构,表现,行为分离
  结构:html代码.
  表现:页面的外观呈现.用CSS语言来完成
  行为:指用户与页面元素的交互.比如点按钮弹出对话提示.通常用javascript来体现
 2,解决html代码可读性的问题.
  在用table布局的时候,由于大量的table.tr,td重复嵌套,如果不借助于DW等可视化编辑器,阅读一份html文档比阅读一个php的类复杂的多,对于复杂的网页,简直就是一个不可能完成的任务.采用css布局的关键是要有一份结构良好的html文档.不仅人可读,机器也可读.
  而且精简了大量的无意义的表现元素,提高了搜索引擎爬虫爬行的效率.能够在最短的时间内爬完整个页面.这对收录质量有一定的好处.
  由于能高效的爬行,就会受到爬虫的喜欢,这对收录数量有一定的好处.很多推广的文章称,搜索引擎一般不抓取三层以上的表格嵌套,当然这一点没有得到搜索引擎官方的证实.但根据目前掌握的情况来看,爬虫遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面.

 3,有以上两条足够我们在做网页的时候使用CSS布局.当然使用CSS布局还有其他的好处,大家可以搜索一下.这里就不多废话了.

二,工欲善其事,必先利其器.
 使用CSS布局必备的几个软件:
  1,浏览器:firefox,chrom,opera,ieTester.
   firefox下载地址:http://firefox.com.cn/
   chrom下载地址:http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI
   opera下载地址:http://cn.opera.com/
   ietester下载地址:http://www.my-debugbar.com/wiki/IETester/HomePage
    几个浏览器的作用:
  2,插件:
   firebug:对于网页开发人员将firebug称为神器并不为过.他是firefox的一个插件.ie和谷歌浏览器也有类似的插件,但是和firebug相比要差很多.
   安装,简单功能演示.
  3,编辑器:
   由于我们的目的是要编写可读性良好的html文档,所以使用什么编辑器无所谓,自己喜欢就好.
   我个人比较喜欢vim,editplus,phpstorm这几款编辑器.可能我们很多人喜欢使用dreamweaver,当然这也没问题.DW也是一款较好的网页编辑器.我个人认为DW的主要特点是:有用的功能太少.无用的功能太多.
  4,听课的方法:
   我觉得听课主要是要听懂,明白自己要干什么,而不是跟着老师抄代码。如果是一行一行的跟着老师抄代码,那这课程就会拖的太长了,大家也疲劳,会失去学习的兴趣。
   上课的时候听懂了,课后有兴趣,可以跟着老师的思路,自己做一遍实例。

三,使用css布局页面的布骤:
 1,根据需求(也可以说:根据效果图)编写html,也就是结构了.
 2,根据效果图编写css,也就是表现了.
 3,编写js,也就是行为了.

四,编写html的规则:
 1,编写一份html文档,首先我们不要忘记了写上文档申明.也就是告诉浏览器这个页面渲染的标准.
  这里我们推荐使用最新html5文档申明.好处是:所有浏览器都认识,而且会引发所有浏览器以标准模式解析页面.他的写法是:
  
 
 2,写了文档申明之后,就是html根元素了.

 3,书写一个简单的html页面.顺便介绍常用的html的标签,强调注重标签的语义.

 4,导入CSS文件.
  1,外部样式.
  2,内联样式.
  3,行内样式.