xiebiji.com

上一篇文章简单描述了网站分工过程,其中其中第二步就是“前台设计”。而今天的这篇文章为什么叫前台设计0篇呢？原因是：我觉得一个人要是真的是零基础学做网站的话，对于前台设计还是需要了解一些必要而且基础的概念的。不然就会让学的人有一种“不知道从哪里开始学，需要学什么”的感觉。假如你已经很清楚“前台设计”是干什么，需要怎么开始的话，这篇文章可以先搁下来以后再看。

以下是我的个人见解：

前篇文章已经说过“前台设计”的主要步骤是“画”网页：1.绘画软件画草图；2.把图形代码化（HTML+CSS+JS特效化）。

现在这里具体说以下这两个步骤分别需要了解的知识（注意以下内容只是简短介绍）：

1.关于绘画软件画草图。这里的绘画软件有很多，每个人选择的也不尽一样，我个人是用photoshop(版本随便一个都OK)，当然不是一定要用他，你也可以用别的绘图软件，适合个人需要就好。因此需要了解的知识有：某个绘图软件（我推荐PS）；对于草图的要求：只要符合网站主的要求就OK了，色彩感觉是不能说出来的，看多了自然有感觉。

2.关于把图形代码化（HTML+CSS+JS特效化）。这个需要掌握的知识是我今天想说的重点。

首先明确几个概念：

HTML超文本传输协议：这个我自己理解为网页结构语言，是最基础的网页代码语言，我觉得是一定要了解的。这里提供关于  html.chm (273.1 KiB, 201 hits) 需注册下载，手册很短，一天可以看几遍。这里顺带提一下，HTML发展的最终形态是XML(目前暂时被用作数据储存)，而其中过度形态就是XHTML。

CSS，即 Cascading Style Sheets 层叠样式表：从命名就可以看出这个语言是负责网页样式的，在标准网页设计中CSS负责网页内容(XHTML)的表现.这个语言并不难，逻辑性不强，概念性的东西比较多。更多了解可以下载我这里提供的  css2.0.chm (258.6 KiB, 202 hits) 需注册，当然CSS语言页经历了几个版本，要是觉得有需要你可以上册查询最新的中文手册。

JS，即JAVASCRIPT 嵌入式脚本语言：在网页设计中这种语言我觉得主要用于特效，也可以算是负责样式的，可以放于HTML代码中的任意位置，JS语言相对来说，逻辑性比较强。目前很少人会用纯JS语言来写网页特效，通常都会引进一些JS框架，例如：JQUERY,MOOTOOLS…等。因为这类JS框架提供了整合好的JS功能，可以直接当JS类库用。这里不详细介绍JS，有兴趣的可以百度一下。

表现与结构分离原则：这个概念通俗的说就是“把用于表现和用于结构的代码分开来写，并放在不同的文件里面”，这是网页设计中一个设计模式，就如上篇文章所说的的“后台编辑”是需要一个用于指导的设计模式的。“前台设计”也一样，表明结构的文件我们用HTML写，表明样式的文件我们用CSS写，2个语言互不参杂，只是通过某接口在HTML代码中引进CSS文件（也被称为外链式CSS，例如HTML中的<link/>标签），当然在HTML中写CSS代码（那叫内嵌式CSS）也是有的，但是网页要标准的话并不推荐这种做法。你还可以参考：在网页中嵌入css的三种方法 其中的外链式CSS是最符合表现与结构分离这个原则的。（添加JS特效的时候并不背离这个原则，JS文件一样可以外链进来）

然后我们需要的编辑软件包括：

DW,Dreamweaver网页编辑器，这个软件的强大我就不说了，我们可以用他来编辑HTML和CSS，有代码提示很不错。当然你也可以用微软的Frontpage。

Aptana IDE ，这个软件我用于编写JS，个人觉得是最好的JS编辑器了。

FireFox浏览器，这个浏览器我觉得是每个做网页的人必备的，另外提醒：FireFox浏览器可以安装一个叫FireBug的插件，有了这个网页调试就得心应手了，用法可以百度一下FireBug用法。此外考虑到网页在不同浏览器的兼容问题，我们还需要多安装几个浏览器。

好了！以上说的你基本了解后，就不会模糊了。这样的话你应该明白要从什么学起，需要准备什么！^_^!希望我说清楚了。

今天说到这里。>_<!

转载请注明：作者Joe 地址:http://xiebiji.com/2008/09/huazhuang3