返回首页

DIV布局入门

时间:2018-12-28 13:42来源:知行网www.zhixing123.cn 编辑:麦田守望者

使用DIV布局已经成为一种习惯,越来越感觉到得心应手了。总结一下整个学习过程,把这个思路写出来,希望能对初学者有所启发。

传统的表格布局的特点

1.表格布局的根本是结构层和表现层混杂在了一起,当我们只修改一些简单页面时,或者感觉没有什么影响。但如果在哪一天,我们需要重复修改成百上千的页面,问题就接踵而来了。假如由于某些原因我们需要把背景替换成黑色,边框变成1px黄色,文字变成白色,所有文字居中。使用表格布局的网页,可能就要一页一页的去修改。

2.我们在使用表格布局的时候通常会一个表格加一个表格嵌套的写下去,这样的代码冗长繁琐,维护麻烦,重复代码较多,增加了带宽的消耗和成本。

3.表格布局由于表现形式的要求,经常会出现表格的多重嵌套,而浏览器对于表格的解析是将一个表格全部全部下载解析后才会呈现出来,过多的嵌套严重影响网页打开的速度。

使用WEB标准布局的优势

1.数据的多样显示。制作的网站可以调用不同的样式表适应不同的设备,做到内容与设备无关。

2.保持整个站点的视觉一致性变得非常简单,在网站改版修改样式表就可以轻松改版。

3.由于结构清晰,网站数据的集成、更新和页面处理更加方便灵活。

4.代码简洁,对于页面打开速度有很大的改善。

5.关于两者的更多特点请看DIV布局和table布局的区别 。

DIV布局入门知识

刚开始的时候理解结构和表现的不同之处可能很困难,特别是初学的时候不习惯于思考文档的语义结构时。当结构和表现分离后,用CSS文档来控制表现就是很容易的一件事了。理论上讲,我们应该用一个HTML文档来保存内容与结构,用一个CSS文档来控制整个文档的表现。抽象点说,内容可以理解成最基础层,然后是附加上去结构层和表现层,最后再给他们加上“行为”,这样一个基本的网站页面就布局完成了。下面分别说下内容、结构、表现和行为的概念。

1.内容:内容就是页面实际要传达的真正信息,可以包含数据、文档或者图片等。注意这里强调的“真正”,是指纯粹的数据信息本身。比如一个不包含任何辅助的信息,比如导航菜单、装饰性图片、完全没有经过排版的古诗等。举个例子:我的博客的导航菜单“首页,SEO专题,WEB标准专题,关于我”些就是属于真正要传达的信息,这就是所谓的“内容”。

2.结构(Structure):我们可以看到上面的文本菜单是不经过排版的随便放置的,让人难以阅读和理解,我们必须给它格式化一下。比如我们看到许多古诗通常有标题、作者、章、节、段落和列表等内容,所有这些就是页面的结构。结构使页面内容更加具有逻辑性和易用性。

3.表现(Presentation):我们虽然定义了结构,但是内容还是原来的样式没有改变,例如导航的字体没有变大,导航也没有背景,没有任何修饰。所有这些用来改变内容外观的东西,我们称之为“表现”。下面的图片就是对上面的内容文本用表现处理过后的效果:
关于“表现”的范例图片

4.行为(Behavior):行为就是对内容的交互及操作效果。例如,我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来,可以判断一些表单提交,可以响应读者的一些操作等。我们在上网时经常遇到的留言版像这类动作都会用到行为。

小提示:网页标准并不是完全不使用表格

在我刚接触网页标准时,我进入了一个误区,那就是在布局网站时完全不再使用table标签。后来在遇到一些数据表时,比如公司员工联系表,产品与型号对应表等,发现在这个时候表格非常好用。园子想提醒大家,对于表格型数据,还是应该使用table。在HTML和XHTML里,表格不仅仅是行(row)和单元格(cell),还有很多其他元素,运用好这些元素,你就可以更好的设计出有亲合力的表格布局。

------分隔线----------------------------
标签(Tag):DIV布局
------分隔线----------------------------
  • 上一篇:web标准的一些概念
  • 下一篇:没有了
  • 推荐内容
  • css代码flex的布局使用详解

    flex布局的含义 flex布局又名为弹性布局,主要是通过设置的属性值自动调整元素的宽度...

  • html版权符号代码怎么写?

    相信不少开发人员都会遇见这个问题,基本上每个网站都会有版权声明,其中会用到版权符...

  • 网站打不开dns错误如何解决

    DNS解析就是把你的域名解析成一个ip地址,服务商提供的dns解析就是能够将你的域名解析...

  • HTTP状态码的含义图解教程

    HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码。我...

  • 如何得知golang代码覆盖率

    以前写程序时,很少关注单元测试。 即便写,也是草草了事。没有很认真的写过,更别谈...

  • 谈谈网站建设中网站导航设计的经验技巧

    当用户进入网站时,根据浏览习惯首先会先大概地扫视一遍进入的目标页面,其次则会开始...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8娱乐官网手机版
  • Photoshop龙8娱乐官网手机版
  • 3DMAX龙8娱乐官网手机版
  • AutoCAD龙8娱乐官网手机版
  • CorelDRAW龙8娱乐官网手机版
  • Matlab龙8娱乐官网手机版
  • 其他龙8娱乐官网手机版
  • .Net龙8娱乐官网手机版
  • Asp龙8娱乐官网手机版
  • Php龙8娱乐官网手机版
  • Jsp龙8娱乐官网手机版
  • Ajax龙8娱乐官网手机版
  • Android教程
  • 其他龙8娱乐官网手机版
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影