01网站项目的策划和制作

1、网站项目的策划和制作作者：裘森伟网站项目目项目进行行过程策划阶段段主题题方案的的设计过过程HTML文件化化操作CSS应应用以及及上传测试网站开开通检检测如上所示示，一个个项目不不仅仅是是构建一一个简单单的网站站。在进进行一个项目目时，要要基于网网站的理理念和用用途，先先制作一一份策划划案。然后根根据策划划案开始始实际制制作，开开通网站站后还要要进行检检测等各项工工作。项目制作作的第一一步-策策划阶段段与客户交交流制作网站站之前，首先和和客户交交流网站站的性质质、理念念、用途途以及客客户方负负责人的的选定等等各种网网站制作作中的相相关事项项，然后后以这些些交流为为基础，制作相相当于设设计图的的策

2、划案案和网站站图、向向导图等等文件，搭建网网站的框框架。项目制作作的第一一步-策策划阶段段制作网站站时需要要和客户户交流的的事项网站的理理念和用用途网站的菜菜单结构构和内容容结构方方案服务器（NT，Linux）设定制作网站站时需要要的技术术（Flash，程序序设计语语言，动动画相关关）WebHosting（服服务器）、域等等相关事事项实际工作作时间和和最终开开通日期期的设置置客户方负负责人的的选定项目制作作的第一一步-策策划阶段段制作策划划案策划案是是为了在在项目进进行过程程中达到到最高的的效率而而制定的的计划。策划案案没有固固定的格格式，每每个公司司都持有有不同的的样式。有的策策划案是是从主

3、页页到子夜夜详细进进行说明明，而有有的策划划案是以以核心设设计部分分为框架架来进行行制作。项目制作作的第一一步-策策划阶段段策划案中中一般包包括的事事项组织框架架图网站图设计向导导图主、子页页的设计计结构界面向导导设计版面设计计颜色系统统字体系统统画面编码码结构表表目录结构构规则文件的命命名规则则项目制作作的第一一步-策策划阶段段程序逻辑辑图：对对程序逻逻辑进行行说明项目制作作的第一一步-策策划阶段段组织结构构图和网网站图组织结构构图清晰晰的整理理出了主主菜单和和子菜单单的结构构，而网网站图更更加详细细的体现现了组成成菜单的的显示方方式。例例如，网网站图将将会指定定各个菜菜单的相相关网页页名称

4、，并显示示各自网网页打开开的窗口口方式。组织结构构图项目制作作的第一一步-策策划阶段段网格系统统和版面面设计结结构下面介绍绍下策划划案中起起到框架架作用的的网格系系统和版版面设计计结构方方式。构构成基本本版面之之前要对对许多网网站进行行定标比比超。定定标比超超是在新新版面的的制作中中提供创创意的重重要手段段。将这这种过程程作为基基础，先先制作整整体上最最大框架架网格系系统后，再根据据他整理理导航位位置子菜菜单位置置，内容容部分等等事项，从而构构成版面面，同时时，设置置版面设设计中画画面分辨辨率的基基准以及及各个区区域的画画面分割割比例。画面分分割可以以设置为为具体的的数据。也可以以将各个个区域

5、以以3（左左区域），5（内容区区域），2（右右侧区域域）的比比例进行行分割。项目制作作的第一一步-策策划阶段段定标比超超的概念念通过分析析与目标标网站具具有相同同性质的的其他网网站，从从而搜集集崭新的的创意，内容以以及导航航系统结结构等相相关资料料，不仅仅对于策策划者，对于一一般的设设计者来来说这也也是平常常生活中中需要积积累的知知识。网格在网站的的策划阶阶段常常常会涉及及到“网网格系统统”，”版面设设计“，等相关关词汇，在这里里的网格格指的是是格子形形式，而而网格系系统可以以理解为为网站的的整体结结构，即即构成版版面的方方式，通通过网格格系统可可以分割割区域。并决定定各个内内容的位位置，从从

6、而构成成复杂的的版面项目制作作的第一一步-策策划阶段段初步方案案操作以以及画面面说明一般情况况下是先先提出策策划案，再以其其为基础础进行初初步方案案的操作作。但有有时候，也有可可能在制制作策划划案的过过程中同同时进行行网站初初步方案案的操作作。这是是因为实实际上客客户最想想知道的的不只是是策划案案等的文文件，而而更是以以后所要要制作的的网站效效果。如果策划划中包括括了初步步方案，不仅要要具有和和策划案案为基础础的内容容结构，而且还还要添加加对图像像的设计计性思维维以及flash等应应用部分分的相关关大纲说说明。并并且也要要添加整整个网站站的帧结结构和应应用到的的技术，以及应应用程序序时所需需的

7、程序序设计语语言（asp或或php），服服务器环环境等相相关说明明。项目制作作的第一一步-策策划阶段段颜色系统统颜色系统统为整个个网站结结构决定定一个与与理想相相符合的的颜色结结构规则则。通过过反应网网站性质质和理念念的颜色色规则，可以表表现出网网站的整整体性、统一性性。在和和客户的的交流中中，可以以根据客客户要求求来构成成适合网网站性质质的颜色色系统。颜色系系统除了了中心性性主颜色色以外，也可以以根据各各个区域域（子网网页）的的性质，分别用用独立的的颜色群群来体现现。例如：Brown：传传达深棕棕色系列列的平整整感强调调网页以以及内容容的可信信度。gray：无色色彩的灰灰色系列列体现了了符合

8、菜菜单性质质的颜色色系列。blue：具有有清凉感感的蓝色色系列新新鲜并能能刺激好好奇心的的颜色项目制作作的第一一步-策策划阶段段字体系统统所谓字体体系统指指的是根根据网站站的需求求预先制制定将要要使用到到的字体体大小和和类型。一般要要使用可可读性较较高的字字体。在在一个网网站中最最好把字字体限制制在34种以以内，字字体过多多，可能能会影响响网站的的统一性性。项目制作作的第一一步-策策划阶段段画面编码码结构表表画面编码码结构表表是在实实际工作作中为了了组员之之间的意意见交流流而制定定的一些些规则。投入的的人力越越多，一一定要在在画面编编码结构构的操作作上控制制执行错错误的发发生。一一般情况况下画

9、面面编码结结构是为为各种菜菜单分别别赋予相相关英文文略称制制作的。这是为为了使一一个类型型所包含含的各个个目录及及相关文文件的名名称具有有一定的的连贯性性。项目制作作的第二二步-主主体方案案的设计计过程主体方案案的设计计过程设置分辨辨率界界面的分分割网网站要素素的设计计设置分辨辨率在设计过过程中，最先要要做的就就是设置置分辨率率。如果果设置为为1024768，操作文文件最合合适的横横向大小小为995像素素，而纵纵向大小小事可调调的。项目制作作的第二二步-主主体方案案的设计计过程界面的分分割界面分割割时根据据不同要要素的重重要程度度来分割割界面大大小的过过程。通通常使用用的基本本形式是是分割为为

10、主图像像界面、主导航航界面、内容界界面、banner或或子菜单单界面等等34个界面面形式。注意：在在进行界界面分割割的时候候，重要要的是在在不破坏坏整体均均匀的范范围内进进行界面面分割。主图像像不仅在在主页当当中，在在子网页页也是表表现该页页整体视视觉效果果的重要要图像要要素。项目制作作的第二二步-主主体方案案的设计计过程网站要素素的设计计主图片的的图像设设计在网站的的设计过过程中，有时需需要将图图片进行行一些润润饰操作作，将照照片图像像与网站站的理念念有机的的结合起起来。主导航器器设计利用flash来构成成主导航航器，最最好先计计划选择择的flash形式。Banber以以及子菜菜单设计计首先

11、为了了区分左左侧区域域和右侧侧区域，可以稍稍加一些些变化，可以利利用photoshop的图图层蒙版版和阴影影效果，在没有有很大变变化的状状态下明明显区分分各个平平面。4.内内容设计计网站主页页的内容容区域通通常根据据内容的的重要性性由上至至下安排排的。项目制作作的第三三步-制制作html文文件为了把photoshop中中设计的的psd文件上上传到网网络上，首先要要将他切切割成几几个小图图像。通通常这个个过程称称为限幅幅过程。如果将将设计的的整体文文件一次次性上传传到网络络中，读读取的时时间会过过长，为为了避免免这种现现象，需需要把这这种文件件切割成成多个部部分，以以最佳的的文件形形式上传传，并

12、且且，为了了在网站站上添加加应用程程序或flash等各各种功能能，必须须经过限限幅操作作，使文文件优化化为图像像的形式式。切割割后的图图像文件件网站所所需功能能的相关关程序设设计过程程以及flash文件件等应该该排列在在表格中中。表格格的功能能是把各各个切割割后的小小图像文文件和其其他程序序以及flash合并并在一起起。这一一过程称称之为html文件化化操作。项目制作作的第三三步-制制作html文文件Html文件化化操作photoshop等等软件中中设计的的文件设置辅辅助线设置表表格切切割图像像优化化及保存存图像在表格格中嵌入入文件具体设设置表格格测试试项目制作作的第三三步-制制作html文文

13、件设置辅助助线在完成的的文件中中设置辅辅助线后后，以设设置的辅辅助线为为基准切切割图像像，并在在表格中中放置各各个图像像。所以以，在设设置辅助助线之前前，首先先要考虑虑后面要要设置的的表格形形式。再再次，我我们在设设置辅助助线之前前，首先先在白纸纸上直接接绘制大大概的表表格形状状，然后后在进行行操作。 需要辅助助线来区区分的区区域主要要有主图图片图像像和主导导航界面面、主内内容界面面、banner以及及子菜单单界面。项目制作作的第三三步-制制作html文文件设置根目目录设置根目目录的方方法主要要有两种种，一种种是在机机子的计计算机中中保存，而另一一种是直直接设置置在服务务器上，随时应应用到网网

14、络中。制作表格格基本表格格：根据据预先考考虑的设设计方案案制作的的整体表表格框架架。按照在photoshop中中添加的的辅助线线，构成成具体的的表格。集体表表格可以以制作成成各种各各样，但但最好不不要太复复杂。项目制作作的第三三步-制制作html文文件切割图像像完成表格格结构后后，根据据photoshop中制作作的辅助助线切割割并保存存。切割割图像之之前最好好将辅助助线设置置的原文文件图层层合并（合并可可见图层层或合并并图层）。这是是因为在在photoshop中会使使用到各各种滤镜镜，如果果将应用用效果的的部分切切割并保保存，则则最后在在html中这这些部分分可能会会表现出出不连续续的感觉觉。

15、切割方法法：利用裁剪剪工具利用矩形形选框工工具选择择切割区区域后，在选择择imagecrop最后，在在photoshop中选择择filesave forweb命命令项目制作作的第三三步-制制作html文文件提示：为为了对photoshop中中设计的的文件进进行切割割后以最最优化的的状态进进行保存存，一般般情况下下是利用用gif文件格格式进行行保存的的。Gif文件件以减少少像素来来缩小容容量的方方式，不不仅减少少了网络络中读取取的时间间，而且且可以得得到高分分辨率的的图像。保存图图像时，gif文件会会提取经经常使用用到的256中中颜色来来制作颜颜色索引引，并利利用这256中中颜色来来表现整整个图像像，因此此可以大大大减减少图像像容量。项目制作作的第四四步-css应应用及上上传在html文件件中应用用css即把需要要应用的的所有设设置事项项保存到到扩展名名为css的文文件中后后，在以以后执行行html文件件时，再再导入应应用这些些设置。可以在html文件中中导入css文文件，在在通过链链接来应应用这些些设置项项。例如可以以确定这这是导入入css文件来来应哟个个设置项项的。项目制作作的第四四步-css应应用