DIV+CSS布局

网页主要由3部分组成:结构(Structur)、表现(Presentation)和行为(Behavior)。

W3C规定这3方面的表准为:

结构化标准语言主要包括:XHTML和XML

表现标准语言主要包括:CSS

行为标准语言主要包括:对象模型DOM、ECMAScript

采用标准的好处:

l         文件下载与页面显示速度更快。

l         内容能被更多的用户所访问(包括失明、弱视、色盲等残障人士)。

l         内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等)。

l         用户能够通过样式选择定制自已的表现界面。

l         所有页面都能提供适于打印的版本。

采用标准对网站所有者的好处:

l         更少的代码和组件,容易维护。

l         带宽要求降低(代码更简洁),成本降低。

l         更容易被搜索引擎找到。

l         改版方便不需要变动页面内容。

l         提供打印内容而不需要复制内容。

l         提高网站易用性。

HTML和XHTML页面都是由“结构、表现和行为”这3方面组成的。内容是基础,然后是附加上去结构和表现,最后再对它们加上“行为”。

抛弃表格布局的思维方式

最大的错误理解是:“DIV+CSS而已就是原来用表格的地方用层替代,原来是表格嵌套,现在是层嵌套”。WEB标准的目的是分离内容和表现,因此,制作者首先要做的事情,就是抛弃一个单元格接一个单元格放置图片和内容的思维方式。

页面里有的仅仅是内容,没有修饰的情况下,它看上去就是一张单调的页面,其中有一些文字和图片,这个图片是指内容中的图片。这些文字图片仅仅是依次罗列下来,没有任何样式。然后加上表现,将所有修饰的图片作为背景,用CSS来定义每一块内容和位置、字体、颜色等。

这样制作的页面才是内容与表现分离的,也就是说,当抽掉CSS文件,剩下的就是最本质的内容和结构。这样才能在文本游览器、手机、PDA等设备中阅读,才能随时修改CSS实现改版。

正确使用XHTML标签

XHTML的标签不是用来做“表现”的,而是用来定义结构的,因此,对不同的内容使用正确的XHTML标签对于建立良好的文档结构是重要的。何处使用<h1>与何处使用<p>都要合理,这样不仅便于理解文档内容,同时对于CSS的编写也很重要。

善于利用CSS

灵活的运用CSS不同的选择器进行CSS定义,将通用的样式写在外部CSS文件中,然后在页面内调用,同时还可以将不同的CSS定义分在几个文件中。

对于多次引用的样式可以用CLASS来定义,不需要每个元素都定义ID;也不是一定要用<div>,有的内容完全可以用<p>来代替,同样都是块级元素,一样有盒模型的7个参数,<div>仅仅方便浮动。

一个良好的CSS命名习惯是根据其若能而不是外观来命名。

添加注释有助于将来的修改。

元素最常用的分类有以下几种

块级元素(display:block)

每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、BODY等都是块级元素。块级元素只能作为其他块级元素的子元素,而且需要一定的条件。

内联元素(display:inline)

内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span、等都为内联元素。内联元素可以为任何其他元素的子元素。

列表项(display:list-item)

在HTML内只有li默认是此类型,此类元素的表现形式和列表类似。

隐藏元素(display:none)

当某个元素被设置为display:none的时候,浏览器会完全忽略掉这个元素,此元素将不会被显示,虽然存在于HTML文档内,但是在屏幕上完全不会显示出来,也不会占据位置。

IE浮动和对齐的错误

如果在CSS中将元素的float和text-align的方向设为一致,则在IE中边界会被显示为声明值的2倍。解决方法是设置元素的显示(display:inline)为内联

缩写CSS属性:

填充、边界、边框都有四个边可以使用“上右下左”。

缩写颜色类似于#006600可以缩写为#060

压缩属性:有些属性可以以空格分隔写到一行中。

利用通配符:

*{margin:0;pandding:0}这样是为了避免某些未声明的元素因为浏览器默认样式不同而造成错位的情况。

继承:

子元素自动继承父元素的属性值,因些不需要重复定义。

组合:

某些有相同属性的选择符可以统一定义。使用逗号隔开。如:body,#main,table{border:0;}

0px与0

无论什么单位,0=0px=0pt=0in

深刻理解CSS盒模型。

设计步骤:

Ø         观察图纸

Ø         设计分析

Ø         布局分析

Ø         拆分图纸
提取原料,这些原料包括尺寸坐标、颜色、背景图、装饰性的线框、特殊字体的文字、装饰图片等。

Ø         拆分页面
1.提取尺寸
2.分离背景图
3.分离图片(尽可能的使图片设置成背景透明)
4.输出文件

Ø         定义站点

Ø         整体布局

Ø         插入内容

Ø         CSS定位
1.先定义*{margin:0;padding:0;border-width:0}由于样式表遵循“就近”原则,所以在模式表最开始处定义了通用属性,即使有标签的属性不是在这里定义的大小也没关系,只要需要定义的时候再定义就可以了。
2.如果网站分中英文,则抽象出两格字体字号的共同部分放入此,把异同的地方放入它们单独的CSS中。
3.当元素居中时IE在其父元素中设置text-aliegn设置为center既可,而非IE中则把当前元素的margin设置为auto
4.W3C规定在文字后面加上sans-serif这一类字体的统称。

Ø         修整细节
1.页面标题。
2.各部分链接
3.为图片和链接加上标题属性

Ø         整理CSS

猜你喜欢

转载自blog.csdn.net/carlhelen/article/details/87626075