This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting ...

CSS核心基础 第0课《CSS设计彻底研究》简介
第1课 CSS与(X)HTML核心基础（上）
第1课 CSS与(X)HTML核心基础（中）
第1课 CSS与(X)HTML核心基础（下）
第2课 CSS禅意花园介绍 深入CSS盒子模型 第3课 深入理解盒子模型（上）
第3课 深入理解盒子模型（下）
第4课 浮动与定位（上）
第4课 浮动与定位（下）
第5课 文字与图像（上）
第5课 文...

昨天介绍了布局设计和视觉细节设计这两个步骤，今天进行下一步工作，也是这个系列的最后一次内容了。

接下来我们进行一些交互性的动态设计，这里主要是为网页元素增加鼠标经过时的效果。如下图所示，在鼠标指针经过主导航栏和次导航栏的时候，相应的菜 单项会发生变化，鼠标经过“登录帐号”或者“购物车”图像时，颜色也会变浅，这都是为了提示用户所进行的选择。此外，当鼠标经过图像时，图像周围的边框也 会发变化。

到...

下面应该进行的步骤是页面布局这一步骤，任务是把各种元素放到适当的位置，暂时不用涉及非常细节的因素。

具体来说，首先应该对页面的整体进行一些设置，把个各种浏览器中默认值不同的元素属性都设置为统一的值等等，以保证这些内容在各个浏览器中有相同表现。

接下来就依次对网页的各个部分进行布局设置，入页头、中间部分、页脚等等，此时的主要任务是把位置定好，例如下图中，可以看到，网页中间的内容已经实现了两列布局的效果，而具体的样式细节还没有设置。
...

在设计任何一个网页之前，都应该先有一个构思的过程，对网站的完整功能和内容作一个全面的分析。如果有条件，应该制作出线框图，这个过程专业上称为“原型设计”，例如，在具体制作页面之前，我们就可以先设计一个如下图所示的网页原型线框图。

网页原型设计也是分步骤实现的，先把一个页面分为若干个大部分，然后分别逐步细化。

如果是为客户设计的 网页，那么使用原型线框图与客户交流沟通是最合适的方式，既可以清晰地表明设计思路，又不用花费大量...

第1步要先想清楚这个网站的内容是什么？通过一个网页要传达给访问者什么信息？这些信息中哪些是最重要的？哪些是相对比较重要的？以及哪些是次要 的。这些信息应该如何组织呢？ 我们可以参考一些网上商店的网站，比如下图所示的是卓越沿马逊网上商店的首页，读者在研究一些成功网站的时候，不要仅仅关注这些网站的设计风格和技术细 节，更要从更深的角度观察它们，这样才能更好地掌握核心的东西。例如从图中可以看到，这个页面尽管内容非常多，但简单来说，就分为两大类——“分类链接&rdq...

经常有读者来信询问在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤，如下图所示。

在图中，这个过程分为了7个步骤，并且说明了这7个步骤相应使用的工具。这7个步骤依次为：

1. 内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，...