制作网页的步骤

在对网页设计的认识上，很多人似乎还停留在网页制作的高度。相信只要用好网页制作软件，就能把网页设计做好。

在对网页设计的认识上，很多人似乎还停留在网页制作的高度。相信只要用好网页制作软件，就能把网页设计做好。

事实上，网页设计是一个感性思维和理性分析相结合的复杂过程，其方向取决于设计任务，其实现取决于网页的制作。俗话说“功夫在诗外”，网页设计最重要的不是软件的应用，而是我们对网页设计的理解和设计制作的水平，以及我们自己对页面的美感和把握。

首先要明确网页设计的任务。

第一，设计的任务

设计是一种审美活动，成功的设计作品一般都具有艺术性。但艺术只是设计的手段，而不是设计的任务。设计的任务是实现设计师的意图，而不是创造美。

网页设计的任务是指设计者要表达的主题和要实现的功能。站点性质不同，设计任务也不同。从形式上看，网站可以分为以下三类。

第一类是资讯类网站，如新浪、网易、搜狐等门户网站。这种网站会给访问者提供大量的信息和大量的访问者。所以要注意页面分割、结构合理、页面优化、界面亲和力等问题。

第二类是信息和形象结合的网站，比如一些大公司和国内高校。这类网站在设计上要求较高，既要保证信息类网站的上述要求，又要突出企业和单位的形象。但就目前情况来看，这类网站涉嫌粗制滥造。

第三类是形象网站，比如一些中小公司或者单位。这类网站一般比较小，有的有好几个页面，需要实现的功能也比较简单。网页设计的主要任务是突出企业形象。这类网站要求设计师有较高的艺术水平。

当然，这只是从整体来看，具体情况需要具体分析。不同的站点应该区别对待。别忘了最重要的一点，那就是客户的要求，这也属于设计任务。

定义了设计任务之后，接下来要考虑的就是如何完成这个任务。

二、设计的实现

设计的实现可以分为两部分。第一部分是场地规划和草图绘制，可以在纸上完成。第二部分是网页的制作，在电脑上完成。

设计主页的第一步是设计布局。我们可以像传统的报纸杂志一样编辑网页，网页中包含文字、图像甚至动画。我们要做的就是把图片和文字以最合适的方式排列在页面的不同位置。除了有一台配置良好的计算机，软件也是必要的。不能简单的说一个软件的好坏，只要设计人员使用起来方便、得心应手，就可以称之为好软件。当然要符合设计师的要求。笔者常用的软件有Macromedia的Dreamweaver、Fireworks和Flash以及Adobe的Photoshop和imageready，都是非常不错的软件。接下来需要做的就是通过软件的使用将设计蓝图变成现实，最后的集成一般在Dreamweaver中完成。虽然我们已经在草图中定义了页面的大致轮廓，但灵感通常是在制作过程中产生的。设计作品一定要有创意，这是最基本的要求。没有创意的设计是失败的。在制作的过程中，我们会遇到很多问题，其中最敏感的就是页面的颜色。

第三，色彩的运用

颜色是一种奇怪的东西，它美丽而丰富，它能唤起人类心灵的感知。一般来说，红色是火的颜色，热情奔放；也是血的颜色，可以象征生命。黄色是亮度最高的颜色，华丽、高贵、明亮。绿色是天然植被的颜色，意味着纯净的自然和生长，象征和平与安全，如绿色食品。紫色是高贵的象征，有庄重感。白色能给人一种纯洁无邪的感觉，意味着和平与圣洁。

我们知道，颜色是由光的折射产生的，红、黄、蓝是三原色，其他颜色可以用这三种颜色混合。换一种思路，用色彩的变化来表现光影效果，无疑会让我们的作品更贴近现实。

颜色代表不同的情绪，有不同的象征意义。这些象征意义是人们思想交流中的一个复杂问题，因人的年龄、地域、时代、民族、阶级、经济区域、工作能力、受教育程度、风俗习惯、宗教信仰、生活环境、性别差异而异。

纯色没有什么实际意义，搭配不同的颜色会有不同的效果。比如绿色与金色、浅白色的搭配，可以营造出优雅舒适的氛围。蓝色和白色的混合可以体现出柔和、优雅和浪漫的气氛。红色、黄色和金色的搭配可以渲染出节日的气氛。黄金和小米的结合会给人带来温暖。不同的设计任务做出不同的配色方案。考虑到网页的适应性，应该尽量使用网页安全色。

但是，色彩的运用并没有一定的规律。如果一定要用某种规则，效果只会适得其反。从经验上来说，我们可以先确定一个能表达主题的主色，然后根据具体需要，运用色彩近似和对比来完成整个页面的配色。整个页面在视觉上应该是一个整体，以达到和谐悦目的视觉效果。

第四，组合造型

在网页设计中，我们主要通过视觉传达来表达主题。造型是视觉传达中非常重要的元素。无论是图片还是文字，屏幕上的所有元素都可以作为屏幕的基本元素来对待，比如点、线、面。在一幅成功的作品中，需要点、线、面的组合和搭配来构成整个页面。

通常我们可以运用的组合手法有顺序、比例、平衡、对称、连续、间隔、重叠、重复、交叉、节奏、韵律、归纳、变奏、特写、倒影等。都有自己的特点。在设计中要根据具体情况选择最合适的表达方式，有利于主题的表现。

通过点、线、面的组合，突出页面上的重要元素，突出设计主题，增强美感，让观者在感受美的过程中理解设计主题，从而实现设计任务。

造型的巧妙运用不仅能带来巨大的美感，还能突出企业形象，有机地组织网页上的各种元素，甚至引导浏览者的视线。

动词 （verb的缩写）设计原理

设计是有原则的。无论用什么方法组合画面中的元素，都必须遵循五个原则:统一、连贯、分割、对比、和谐。

统一是指设计作品的整体性和一致性。设计工作的整体效果非常重要。在设计中，不要把所有的成分孤立分散，这样会让画面呈现出树枝藤蔓杂乱无章的效果。

连贯性是指注意页面之间的关系。在设计中，要利用内容上各组成部分的内在联系和表现形式上的相互呼应，注意整个页面设计风格的一致性，达到视觉和心理上的连贯，使整个页面设计的各个部分极其和谐，仿佛一气呵成。

分段是指将页面分成几个小块，视觉上不同，让浏览者一目了然。为了使观看者在信息很多的情况下看得清楚，需要注意对画面的有效分割。分段不仅仅是表达的需要。换个角度说，分段也可以看作是对页面内容的一种分类和归纳。

对比是通过矛盾冲突让设计更生动。对比手法很多，如:多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等。当使用对比时，我们应该小心。过于强烈的对比容易破坏美感，影响统一性。

和谐是指整个页面符合美的规律，浑然一体。如果一个设计作品只是颜色、形状、线条等的随意混合。，那么作品不仅没有“生活感”，也根本无法实现视觉设计的传达功能。和谐不仅取决于结构形式，还取决于作品形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的声音。这是设计成功的关键。

第六，网页的优化

在网页设计中，网页的优化是一个比较重要的环节。它的成功与否会影响页面的浏览速度和适应性，影响受众对网站的印象。

在资讯网站中，文字是页面最大的组成部分，因此字体优化尤为重要。有必要使用css样式表来指定文本的样式。通常我们指定字体为宋体，大小为12px，颜色取决于背景色。原则上要清晰，与整个页面和谐。在白底上，我们通常使用黑色，不容易产生视觉疲劳，可以保证访问者长时间浏览网页。

图片是网页中的重要元素。图片的优化可以在保证浏览质量的前提下最小化其大小，可以使网页的下载速度翻倍。使用Photoshop6或Fireworks4，可以将图片切割成小块，分别进行优化。输出格式可以是gif，也可以是jpeg，视具体情况而定。一般我们把颜色变化复杂的小块优化成jpeg，而颜色块简单的卡通式小块优化成gif，这是由这两种格式的特点决定的。

表格是页面中的重要元素，是页面布局的主要手段。我们可以设置表格的宽度、高度、边框、背景颜色、对齐方式等参数。很多时候，我们将表格的边框设置为0来定位页面中的元素，或者确定页面中元素的相对位置。我们知道浏览器在读取网页的原始html代码时，只在读取了整个表格后才显示。如果一个大表包含多个子表，则在读取大表后，子表只能一起显示。我们在访问一些网站的时候，等了很久都没有结果。这就是我们按下“停止”键，突然显示页面的原因。因此，在设计页表时，要尽量避免将所有元素嵌套在一个表中，表的嵌套层数要尽可能少。使用Dreamweaver制作网页时，每个td中会自动添加一个空字符" "。如果单元格中没有填充其他元素，这个空字符将会保留，在指定td的宽度或高度后可以从源代码中删除。

网页的适应性很重要。我们会在不同的系统、不同的分辨率、不同的浏览器上看到不同的结果，所以设计的时候要统筹考虑。一般我们做网页都是800*600，最好的浏览效果也是在800*600分辨率。其他情况下，只要保证基本一致，就不会有大问题。

说了这么多，只是希望能对做“网页设计”的人有所帮助，希望他们在做网页的时候，能有全局观，对得起“设计”二字。

更好的建立自己网站的步骤☆。

必须注意的是，建立自己的网站是一个庞大的工程，一般比较麻烦。所以我们应该按照一定的步骤一步一步来。

我认为车站可以按照以下步骤来建设:

1.首先，设置一个本地文件夹作为网站的存放位置。最好的名字是“我的网站”。

2.在网站文件夹中创建一些文件夹，包括“图片”(存储图片、文件等。)，并根据网页内容多创建几个文件夹。(您也可以在每个内容文件夹中创建用于存储图片和文件的文件夹。)

3.打开你的网页编辑程序(如FP、Dreamwear等。)，新建一个网页，保存为“index”(首页)，重复以上步骤，创建“搜索”、“地图”(站点地图)、“index02”(网站介绍等)。)在网站文件夹里。

4、按照上面的步骤，然后在网站分类文件夹里创建很多网页(然后把内容输入到网页里)。

做了这么多，我们该准备内容了。在硬盘上再创建一个文件夹“File”，把准备好的文档、图片、程序、文件、网页特效都放进去。(可以添加一些动态网页)

6、慢慢把这些文件一个一个放到网页里(掌握技巧)

7、丰富网站，就差不多了。这时候你要申请一个域名(免费空间，收费)。并且把自己的网站放到搜索引擎里，在各种留言板上推广。

8.把网站上传到空间，删除备考文档，就OK了！

但是你也可以用FP来建立一个这样的站:

1.在FP中选择一个新站点。

2.然后在导航中设置页面名称和标题。

3.准备文档、图片、程序、文件、网页特效，充实到网站中。

4、申请域名(免费空间，收费)。并且把自己的网站放到搜索引擎里，在各种留言板上推广。

5.上传网站到空间，删除备考文档。完毕。

如果用Dreamwear建站，会更高级！Dreamwear很厉害，装过的朋友可以研究一下。

在网站设计中，纯HTML格式的页面通常被称为“静态页面”，早期的网站一般都是由静态页面构成的。静态网页的URL形式通常是:www.example.com/eg/eg.htm,也就是说，它的后缀是。htm，。html，。shtml，。xml等。在HTML格式的网页上，还可以出现各种动态效果，比如。GIF格式，FLASH，滚动字母等。这些“动态效果”只是视觉上的，和下面要介绍的动态网页是不同的概念。

在《网络营销基础与实践》第二版第三章“面向网络营销的企业网站建设”中，提出了使用静态网页对搜索引擎的影响。对静态网页本身的介绍很少，尤其是静态网页的特点。在线营销教学网站(www.wm23.com)简单总结静态网页的特点如下:

(1)静态网页每个网页都有一个固定的URL，网页URL的后缀是常见的形式如。htm，。html，。shtml，并且不包含" "；

(2)网页内容一旦发布到网站服务器上，无论用户是否访问，每个静态网页的内容都保存在网站服务器上，即静态网页是实际保存在服务器上的文件，每个网页都是一个独立的文件；

(3)静态网页内容相对稳定，容易被搜索引擎检索到；

(4)静态网页没有数据库支持，网站制作和维护工作量大，网站信息量大时很难完全依靠静态网页制作；

(5)静态网页的交互在功能上有很大的局限性。