仓酷云

标题: 来看看：网页制造教程:面向工具的CSS使用 [打印本页]

---

作者: 金色的骷髅    时间: 2015-1-15 23:28
标题: 来看看：网页制造教程:面向工具的CSS使用
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介：网页制造教程:面向工具的CSS使用.
甚么是面向工具的CSS

框架？工具？哲学？

Object-orientedCSSisacodingparadigmthatstyles"objects"or"modules"—nestable
chunksofHTMLthatdefineasectionofawebpage—withrobust,reusablestyles.

很像言语的退化

令CSS更壮大
有甚么分歧？

1. ul{...}ulli{...}ullia(②可是，布局在这里){①直至如今，我们只体贴这里}

复制代码

CSS约莫2005

意年夜利面条
CSS约莫2008

略微好一点
而不是使我们的代码变好

我们筑了年夜栅栏
功能呢？

公认的毒药中央
网站变慢

文件巨细和HTTP哀求未作优化
CSS约莫2009

面向工具的CSS

功能的最好理论、可扩大性、和最主要的-简单利用

• 创立工具而不是页面或模块
  
• 在内容工具上设置好的公用默许值
  
• 笼统重用元素
  
• 分别布局和皮肤(为两个class)
  
• 分别容器和内容(开放的编纂区)
  
• 利用承继
  
• 对看起来OO的使用多个class
  

9条最好理论

• 组件库：可重用和冗余
  
• 分歧性：制止地位依附(location-dependent)的款式
  
• 笼统化
  
• 优化图象和sprites
  
• 天真
  
• 学会爱栅格
  
• 制止非尺度的扫瞄器字体
  
• 制止高度对齐(alignment)
  
• 审慎矫饰你的手艺(chooseyourblingcarefully)
  

9个圈套

• 地位依附的款式
  
• 制止指定一个class的标签
  
• 制止用ID界说主内容地区内的款式
  
• 制止不划定规矩背景上暗影和圆角
  
• 不要拼合一切图片(触发只要多数几个页面)
  
• 制止高度对齐
  
• 笔墨就是笔墨，不要做成图片
  
• 冗余
  
• 制止过早优化
  

创立组件库

可重用的“乐高积木”
重用元素使得它们

功能“收费”
组件就像乐高积木

组兼并婚配来创立分歧的和风趣的页面
从组件库创立HTML

新的页面一样平常不必要分外的CSS
题目

依据你必要的语义来完成你想要的体现

列表

必需对页面中的一切模块可用

SIDE-WIDELOGES

• 题目
  
• 列表(好比actionlist,externallinklist,productlist,或featurelist)
  
• 模块headers和footers
  
• 栅格
  
• 按钮
  
• 圆角boxes
  
• Tabs,Carousel,toggleblocks
  

制止反复

在不克不及增添代价的元件上华侈功能资本
近似不异的模块

h3和h5太类似了

履历法例：

假如一个页面中的两个模块看起来太类似，它们在一个站点中太类似，选择一个！
例子

Yahoo!团体财经

2+分歧的tab作风。能用不异的图象吗？

3个元件的表面太类似了。选择一个。

模块宽度、背景致或背景图片的改动是个很好的模块复用的例子。
制止地位依附(location-dependent)的款式

沙盒比意年夜利面条好，不外引发了功能成绩
制止甚么？

运转地区

不时…

前往直径

损坏

在CSS中我们一向这么做

损坏

欠好的：

1. #weatherModuleh3{color:red;}#tabsh3{color:blue;}

复制代码

• h3的全局色彩不决义，将招致
  
  
  
  • 在新模块中没有界说款式
    
  • 开辟者自愿为不异的款式写更多CSS
    
  
  

保举：

1. h3{color:black;}#weatherModuleh3{color:red;}#tabsh3{color:blue;}

复制代码

• 界说了全局色彩(更好！)
  
• Weather和tabs掩盖了缺省的h3
  
  
  
  • h3的3种款式在统一模块中不克不及并存
    
  • 缺省款式不克不及用在weather和tabs除非有更高的优先级
    
  
  
• Weather和tabs的h3永久不克不及在其他模块中利用
  

分歧性

写更多划定规矩往重写之前的猖狂划定规矩。
好比题目在恣意模块的体现是可预感的。
用这个来取代

1. h1,.h1{...}h2,.h2{...}h3,.h3{...}h4,.h4{...}h5,.h5{...}h6,.h6{...}

复制代码

• 界说全局值
  
• 遵守语义(同时同意天真的视觉)
  

必要凌驾6个题目？

真的吗？没有反复？没有类似的？
仍旧必要更多题目？

1. .category{...}.section{...}.product{...}.prediction{...}

复制代码

• 经由过程工具自己的class扩大题目工具
  
• 制止利用承继来改动嵌套工具的体现
  

笼统

复用代码段
反复编码

是笼统分歧水准的语义失利所招致的
分别：

• 容器和内容
  
• 布局和皮肤
  
• 表面和背景
  
• 工具和夹杂物
  

分别容器和内容

界说每一个工具的界线
开放的编纂区

图象或flash

夹杂与婚配

容器和内容工具到达高功能计划
分别表面和背景

外部通明！
MAKINGITLOOKFAB

必要当心选择像素

思索PNG8来渐进加强


圈套

可变的或突变背景

防备圆角后的可变或突变背景
分别布局和皮肤

两个独自的class
示例：模块

布局

Slovesborwserbugs,positionspresentationalelems,andgenerallydoestheheavy
liftingofCSS

皮肤

弄大度些。
方针长短常明白的皮肤，庞大的被布局工具和跨网站共享所吸取(Thegoalisverypredictableskins,complexityis
absorbedbythestructureobjectandsharedacrossthesite)。

1. /*-----simple(extendsmod)-----*/.simple.inner{border:1pxsolidgray;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;}.simpleb{*background-image:url(skin/mod/corners.png);}

复制代码

甚么属于皮肤？

皮肤的每一个值应当是断定的，简单展望并丈量。

• 色彩
  
• 边框
  
• 图象
  

天真性

可延伸的高度和宽度

流动尺寸

Limitthewaysinwhichamodulecanberesued

学着爱上栅格

深信其会很美
教授OOCSS

给计划师和工程师
天然改善

从复杂到庞大的义务

一个实在案例

GonzaloCorderoYahoo!前端开辟工程师

必要思索的计划要素

• 跨扫瞄器兼容
  
• 多言语撑持
  
• 可会见性
  
• 定时完玉成部结构和功效
  

狐疑

WEB让步

• 为何“复杂的东东”变庞大？
  
• 为何要让步？
  
• 为何我们不克不及依流动的划定规矩和布局？像讲台上那样？
  

OOCSSSAVESTHEDAY

• 单个复杂的标签布局
  
• 跨扫瞄器撑持(乃至IE5.5！)
  
• 十分少的CSS
  
• 可剥离的，简单使用在多个计划上
  

译注

这不单单是OOCSS！
本文内容来历于：

• ObjectOrientedCSS高清视频下载
  
• WhatisObjectOrientedCSS?
  
• TheFastAndTheFabulous
  
• TheCascade,Grids,Headings,andSelectorsfromanOOCSSPerspective,AjaxExperience2009
  
• AfterYSlow“A”
  
• DesignFastWebsites
  

</p>
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。

---

作者: 小妖女    时间: 2015-1-17 05:32
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

---

作者: 谁可相欹    时间: 2015-1-20 13:41
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

---

作者: 再见西城    时间: 2015-1-29 08:04
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

---

作者: 爱飞    时间: 2015-2-6 00:14
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

---

作者: 飘飘悠悠    时间: 2015-2-14 13:32
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

---

作者: 冷月葬花魂    时间: 2015-3-11 17:51
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

---

作者: 分手快乐    时间: 2015-3-27 08:10
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

---

欢迎光临 仓酷云 (http://www.ckuyun.com/)

Powered by Discuz! X3.2