如何使用CSS来进行网页排版(二)
发布时间：2012-12-29 发布： 分类：前端开发
CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。
1.定义DIV
分析一个典型的定义div例子：
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
如何使用CSS来进行网页排版(一)
发布时间：2012-12-29 发布： 分类：前端开发
前言
大家好！这个系列文章是按阿捷自己制作w3cn.org站点的过程编写的。之前阿捷也一直没有制作过一个真正符合web标准的网站。现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。好了，让我们开始吧。
第一天
开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码，可以看到第一行就是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义？一定要放置吗？
网页布局的步骤
发布时间：2012-12-29 发布： 分类：前端开发
一、一般步骤
1.构思
根据网站的内容整体风格，设计版面布局。你可以参考其他优秀的网站，调用0的各种知识储备，特别是艺术方面的，在大脑中不断地酝酿、碰撞，往往不经意间就有闪光的思想出现。这时你就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究细节，只要有一个轮廓就行。当然你也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。
2.初步填充内容
这一步就要把一些主要的内容放到网页中，例如网站的标志、广告条、菜单、导航条、计数器等，要注意重点突出，把网站标志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其它元素的放置。
3.细化
在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，你可以利用网页编辑工具把草案做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。
经过以上几步，相信你的网页布局已经初具规模了，让别人看一下，给你提些建议，再不断修改，一个很有特色的网页就要浮出水面了。
二、网页排版布局的原则
上面我们简要介绍了设计网页布局的步骤，事实上，在构思和设计的过程中，你还必须要掌握以下几项原则：
实践DIV＋CSS网页布局入门指南
发布时间：2012-12-29 发布： 分类：前端开发
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：
第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对 应的什么CSS语句。 当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
结构化HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
