01网站项目的策划和制作ppt课件

1、网站工程的谋划和制造裘森伟.网站工程工程进展过程 谋划阶段主题方案的设计过程HTML文件化操作 CSS运用以及上传测试网站开通 检测 如上所示，一个工程不仅仅是构建一个简单的网站。在进展一个工程时，要基于网站的理念和用途，先制造一份谋划案。然后根据谋划案开场实践制造，开通网站后还要进展检测等各项任务。.工程制造的第一步-谋划阶段与客户交流 制造网站之前，首先和客户交流网站的性质、理念、用途以及客户方担任人的选定等各种网站制造中的相关事项，然后以这些交流为根底，制造相当于设计图的谋划案和网站图、导游图等文件，搭建网站的框架。.工程制造的第一步-谋划阶段制造网站时需求和客户交流的事项网站的理念和用

2、途网站的菜单构造和内容构造方案效力器NT，Linux设定制造网站时需求的技术Flash，程序设计言语，动画相关Web Hosting效力器、域等相关事项实践任务时间和最终开通日期的设置客户方担任人的选定.工程制造的第一步-谋划阶段制造谋划案 谋划案是为了在工程进展过程中到达最高的效率而制定的方案。谋划案没有固定的格式，每个公司都持有不同的款式。有的谋划案是从主页到子夜详细进展阐明，而有的谋划案是以中心设计部分为框架来进展制造。.工程制造的第一步-谋划阶段谋划案中普通包括的事项组织框架图网站图设计导游图主、子页的设计构造界面导游设计版面设计颜色系统字体系统画面编码构造表目录构造规那么文件的命名规

3、那么.工程制造的第一步-谋划阶段程序逻辑图：对程序逻辑进展阐明.工程制造的第一步-谋划阶段组织构造图和网站图 组织构造图明晰的整理出了主菜单和子菜单的构造，而网站图更加详细的表达了组成菜单的显示方式。例如，网站图将会指定各个菜单的相关网页称号，并显示各自网页翻开的窗口方式。.组织构造图.工程制造的第一步-谋划阶段网格系统和版面设计构造 下面引见下谋划案中起到框架作用的网格系统和版面设计构造方式。构成根本版面之前要对许多网站进展定标比超。定标比超是在新版面的制造中提供创意的重要手段。将这种过程作为根底，先制造整体上最大框架网格系统后，再根据他整理导航位置子菜单位置，内容部分等事项，从而构成版面，

4、同时，设置版面设计中画面分辨率的基准以及各个区域的画面分割比例。画面分割可以设置为详细的数据。也可以将各个区域以3左区域，5内容区域，2右侧区域的比例进展分割。.工程制造的第一步-谋划阶段定标比超的概念 经过分析与目的网站具有一样性质的其他网站，从而搜集崭新的创意，内容以及导航系统构造等相关资料，不仅对于谋划者，对于普通的设计者来说这也是平常生活中需求积累的知识。网格 在网站的谋划阶段经常会涉及到“网格系统，版面设计“，等相关词汇，在这里的网格指的是格子方式，而网格系统可以了解为网站的整体构造，即构成版面的方式，经过网格系统可以分割区域。并决议各个内容的位置，从而构成复杂的版面.工程制造的第一

5、步-谋划阶段初步方案操作以及画面阐明 普通情况下是先提出谋划案，再以其为根底进展初步方案的操作。但有时候，也有能够在制造谋划案的过程中同时进展网站初步方案的操作。这是由于实践上客户最想知道的不只是谋划案等的文件，而更是以后所要制造的网站效果。假设谋划中包括了初步方案，不仅要具有和谋划案为根底的内容构造，而且还要添加对图像的设计性思想以及flash等运用部分的相关大纲阐明。并且也要添加整个网站的帧构造和运用到的技术，以及运用程序时所需的程序设计言语asp或php，效力器环境等相关阐明。.工程制造的第一步-谋划阶段颜色系统 颜色系统为整个网站构造决议一个与理想相符合的颜色构造规那么。经过反响网站性

6、质和理念的颜色规那么，可以表现出网站的整体性、一致性。在和客户的交流中，可以根据客户要求来构成适宜网站性质的颜色系统。颜色系统除了中心性主颜色以外，也可以根据各个区域子网页的性质，分别用独立的颜色群来表达。例如： Brown：传达深棕色系列的平整感强调网页以及内容的可信度。 gray：无颜色的灰色系列表达了符合菜单性质的颜色系列。 blue：具有清凉感的蓝色系列新颖并能刺激猎奇心的颜色.工程制造的第一步-谋划阶段字体系统 所谓字体系统指的是根据网站的需求预先制定将要运用到的字体大小和类型。普通要运用可读性较高的字体。在一个网站中最好把字体限制在34种以内，字体过多，能够会影响网站的一致性。.工

7、程制造的第一步-谋划阶段画面编码构造表 画面编码构造表是在实践任务中为了组员之间的意见交流而制定的一些规那么。投入的人力越多，一定要在画面编码构造的操作上控制执行错误的发生。普通情况下画面编码构造是为各种菜单分别赋予相关英文略称制造的。这是为了使一个类型所包含的各个目录及相关文件的称号具有一定的衔接性。.工程制造的第二步-主体方案的设计过程主体方案的设计过程 设置分辨率界面的分割网站要素的设计设置分辨率 在设计过程中，最先要做的就是设置分辨率。假设设置为1024768，操作文件最适宜的横向大小为995像素，而纵向大小事可调的。.工程制造的第二步-主体方案的设计过程界面的分割 界面分割时根据不同

8、要素的重要程度来分割界面大小的过程。通常运用的根本方式是分割为主图像界面、主导航界面、内容界面、banner或子菜单界面等34个界面方式。 留意：在进展界面分割的时候，重要的是在不破坏整体均匀的范围内进展界面分割。主图像不仅在主页当中，在子网页也是表现该页整体视觉效果的重要图像要素。.工程制造的第二步-主体方案的设计过程网站要素的设计主图片的图像设计 在网站的设计过程中，有时需求将图片进展一些修饰操作，将照片图像与网站的理念有机的结合起来。主导航器设计 利用flash来构成主导航器，最好先方案选择的flash方式。Banber以及子菜单设计 首先为了区分左侧区域和右侧区域，可以稍加一些变化，可

9、以利用photoshop的图层蒙版和阴影效果，在没有很大变化的形状下明显区分各个平面。4. 内容设计 网站主页的内容区域通常根据内容的重要性由上至下安排的。.工程制造的第三步-制造html文件为了把photoshop中设计的psd文件上传到网络上，首先要将他切割成几个小图像。通常这个过程称为限幅过程。假设将设计的整体文件一次性上传到网络中，读取的时间会过长，为了防止这种景象，需求把这种文件切割成多个部分，以最正确的文件方式上传，并且，为了在网站上添加运用程序或flash等各种功能，必需经过限幅操作，使文件优化为图像的方式。切割后的图像文件网站所需功能的相关程序设计过程以及flash文件等应该陈

10、列在表格中。表格的功能是把各个切割后的小图像文件和其他程序以及flash合并在一同。这一过程称之为html文件化操作。.工程制造的第三步-制造html文件Html文件化操作 photoshop等软件中设计的文件设置辅助线设置表格切割图像优化及保管图像在表格中嵌入文件详细设置表格测试.工程制造的第三步-制造html文件设置辅助线 在完成的文件中设置辅助线后，以设置的辅助线为基准切割图像，并在表格中放置各个图像。所以，在设置辅助线之前，首先要思索后面要设置的表格方式。再次，我们在设置辅助线之前，首先在白纸上直接绘制大约的表格外形，然后在进展操作。 需求辅助线来区分的区域主要有主图片图像和主导航界面

11、、主内容界面、banner以及子菜单界面。.工程制造的第三步-制造html文件设置根目录 设置根目录的方法主要有两种，一种是在机子的计算机中保管，而另一种是直接设置在效力器上，随时运用到网络中。 制造表格 根本表格：根据预先思索的设计方案制造的整体表格框架。按照在photoshop中添加的辅助线，构成详细的表格。集体表格可以制形成各种各样，但最好不要太复杂。.工程制造的第三步-制造html文件切割图像 完成表格构造后，根据photoshop中制造的辅助线切割并保管。切割图像之前最好将辅助线设置的原文件图层合并合并可见图层或合并图层。这是由于在photoshop中会运用到各种滤镜，假设将运用效果

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