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

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

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

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

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

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

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

赞 (0)

相关推荐

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

    古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它的内容,进行结构的处理.用word排版之后,他有了结构 2.这个结构其实包含了语义和表现 3.用html进行结构化,抛开一切的表现形式,只考虑语义 4.用CSS进行表现处理,包括html的默认表现,他拥有了视觉表现,这个表现体现出了结构化,也体现出了用户体验,用户体验中包含了交互的排版和视觉体验 5.如果加上行为,比如点击注释序号,缓缓跳转到注释内容. 再看看css禅意花园 同样是上面的5个步骤,形成第一版本的cs

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

  • div+css与xhtml+css分别是什么意思?

    不知道从什么时候开始,在网络上到处可以看到div+css,到底什么是div+css呢?难道就是传说中的标准重构吗?标准从最简单的根源来说不是合理使用xhtml的标签吗?可为什么还是有这么多div+css呢?既然可以div+css,那为什么不可以叫span+css ul+css li+css等等呢? 疑问,满脑子的疑问!为了这个疑问,我把自己脑子里的东西从最底层翻了一遍. 在几年前大家都是用table来布局,一层套一层,没发现什么不妥,一直用到<网站重构>这本书出来后的不久开始看到很多人讨论重构

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合DIV+CSS架构的网页.(在网吧做网页的朋友,可以使用这个呀!)将常用的样式写了出来,做成DW的扩展插件多好,麻烦高手把他做成DW的扩展插件:小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子] ▒ 恋婷DIV+CSS编辑器 beta1.0 var sIni

  • asp.net利用存储过程和div+css实现分页(类似于博客园首页分页)

    asp.net利用存储过程和div+css实现分页(类似于博客园首页分页)

    首先声明以下几点: 1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13,小生不才: 2.如有什么不对的地方,还希望大家指出,一定虚心学习: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 首先说下思路,写一个存储过程,我也找了一个存储过程,不过不是我写的,出处:http://www.cnblogs.com/zhongweiv/archive/2011/10/31/JqueryPagination.html 这

  • 基于Jquery+div+css实现弹出登录窗口(代码超简单)

    具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • Div+CSS+JS树型菜单，可刷新

    搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了

  • div+CSS 兼容小摘

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

随机推荐