div+css在思路和流程上实现结构与表现的分离

2016-02-19 23:39 44 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的div+css在思路和流程上实现结构与表现的分离,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)  内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div+css xhtml+css 纯代码的分离,思想上流程上,到底如何分离?

古老的话题:一首古诗的分离

  1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它的内容,进行结构的处理。用word排版之后,他有了结构
  2.这个结构其实包含了语义和表现
  3.用html进行结构化,抛开一切的表现形式,只考虑语义
  4.用CSS进行表现处理,包括html的默认表现,他拥有了视觉表现,这个表现体现出了结构化,也体现出了用户体验,用户体验中包含了交互的排版和视觉体验
  5.如果加上行为,比如点击注释序号,缓缓跳转到注释内容。

  再看看css禅意花园
  同样是上面的5个步骤,形成第一版本的css禅意花园
  而更多的模板提供者所做的工作是交互线稿+视觉设计。体现在网页上就是CSS

  可以看出从编码角度来讲
   第一步,内容处理为结构,纯HTML的编写
   第二步,结构处理为表现,纯CSS的编写
   第三步,给表现加上行为。

  从流程的角度来讲
   第一步,策划文档
   第二步,结构处理
   第三步,交互设计(交互样式构建)
   第四步,视觉设计(视觉样式构建)
   第五步,样式构建

  再逆向思维
  如果没有css禅意花园,设计师设计了几百张的设计稿,然后做成页面,HTML的结构会相同嘛?类比,如果你的策划,给两个交互和视觉设计师处理,页面构建的结构会相同嘛?答案是肯定的不会相同,为什么不会相同呢?这里讨论的根本所在,这是需要我们深入思考的问题!

来源:http://www.tulaoshi.com/n/20160219/1630319.html

延伸阅读
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。 1、首先会定义一...
标签: Web开发
CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化,越来越多的人在学习而很多初学者没有一个头绪,整理了一些学习的方法给大家。 一. CSS学习重在方法! 学习任何东西都是一样,从小学、中学、大学,除了学...
标签: Web开发
Web标准这个词听说好久了,但是到底什么是Web标准呢?我们该如何实现Web标准呢?DIV+CSS布局是Web标准吗?实现Web标准到底有什么好处呢? 不知上面这些问题大家以前是怎么认为的,至少我以前很傻乎乎的认为Div+CSS布局就是符合Web标准。下面是布鲁斯狼和其老友的一段聊天对话,看完后希望大家在对Web标准的理解上有进一步的提高和认识! ...
标签: Web开发
什么是CSS+DIV?  CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。 CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML ...
标签: Web开发
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW...

经验教程

426

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部