裘森伟-网站项目的策划与制作课件

网站项目的策划和制作作者：裘森伟网站项目的策划和制作作者：裘森伟1网站项目项目进行过程

策划阶段→主题方案的设计过程→HTML文件化操作→CSS应用以及上传→测试→网站开通→检测如上所示，一个项目不仅仅是构建一个简单的网站。在进行一个项目时，要基于网站的理念和用途，先制作一份策划案。然后根据策划案开始实际制作，开通网站后还要进行检测等各项工作。网站项目项目进行过程2项目制作的第一步-策划阶段与客户交流制作网站之前，首先和客户交流网站的性质、理念、用途以及客户方负责人的选定等各种网站制作中的相关事项，然后以这些交流为基础，制作相当于设计图的策划案和网站图、向导图等文件，搭建网站的框架。项目制作的第一步-策划阶段与客户交流3项目制作的第一步-策划阶段制作网站时需要和客户交流的事项网站的理念和用途网站的菜单结构和内容结构方案服务器（NT，Linux）设定制作网站时需要的技术（Flash，程序设计语言，动画相关）WebHosting（服务器）、域等相关事项实际工作时间和最终开通日期的设置客户方负责人的选定项目制作的第一步-策划阶段制作网站时需要和客户交流的事项4项目制作的第一步-策划阶段制作策划案策划案是为了在项目进行过程中达到最高的效率而制定的计划。策划案没有固定的格式，每个公司都持有不同的样式。有的策划案是从主页到子夜详细进行说明，而有的策划案是以核心设计部分为框架来进行制作。项目制作的第一步-策划阶段制作策划案5项目制作的第一步-策划阶段策划案中一般包括的事项组织框架图网站图设计向导图主、子页的设计结构界面向导设计版面设计颜色系统字体系统画面编码结构表目录结构规则文件的命名规则项目制作的第一步-策划阶段策划案中一般包括的事项6项目制作的第一步-策划阶段程序逻辑图：对程序逻辑进行说明项目制作的第一步-策划阶段程序逻辑图：对程序逻辑进行说明7项目制作的第一步-策划阶段组织结构图和网站图组织结构图清晰的整理出了主菜单和子菜单的结构，而网站图更加详细的体现了组成菜单的显示方式。例如，网站图将会指定各个菜单的相关网页名称，并显示各自网页打开的窗口方式。项目制作的第一步-策划阶段组织结构图和网站图8组织结构图组织结构图9项目制作的第一步-策划阶段网格系统和版面设计结构下面介绍下策划案中起到框架作用的网格系统和版面设计结构方式。构成基本版面之前要对许多网站进行定标比超。定标比超是在新版面的制作中提供创意的重要手段。将这种过程作为基础，先制作整体上最大框架网格系统后，再根据他整理导航位置子菜单位置，内容部分等事项，从而构成版面，同时，设置版面设计中画面分辨率的基准以及各个区域的画面分割比例。画面分割可以设置为具体的数据。也可以将各个区域以3（左区域），5（内容区域），2（右侧区域）的比例进行分割。项目制作的第一步-策划阶段网格系统和版面设计结构10项目制作的第一步-策划阶段定标比超的概念通过分析与目标网站具有相同性质的其他网站，从而搜集崭新的创意，内容以及导航系统结构等相关资料，不仅对于策划者，对于一般的设计者来说这也是平常生活中需要积累的知识。网格在网站的策划阶段常常会涉及到“网格系统”，”版面设计“，等相关词汇，在这里的网格指的是格子形式，而网格系统可以理解为网站的整体结构，即构成版面的方式，通过网格系统可以分割区域。并决定各个内容的位置，从而构成复杂的版面项目制作的第一步-策划阶段定标比超的概念11项目制作的第一步-策划阶段初步方案操作以及画面说明一般情况下是先提出策划案，再以其为基础进行初步方案的操作。但有时候，也有可能在制作策划案的过程中同时进行网站初步方案的操作。这是因为实际上客户最想知道的不只是策划案等的文件，而更是以后所要制作的网站效果。如果策划中包括了初步方案，不仅要具有和策划案为基础的内容结构，而且还要添加对图像的设计性思维以及flash等应用部分的相关大纲说明。并且也要添加整个网站的帧结构和应用到的技术，以及应用程序时所需的程序设计语言（asp或php），服务器环境等相关说明。项目制作的第一步-策划阶段初步方案操作以及画面说明12项目制作的第一步-策划阶段颜色系统颜色系统为整个网站结构决定一个与理想相符合的颜色结构规则。通过反应网站性质和理念的颜色规则，可以表现出网站的整体性、统一性。在和客户的交流中，可以根据客户要求来构成适合网站性质的颜色系统。颜色系统除了中心性主颜色以外，也可以根据各个区域（子网页）的性质，分别用独立的颜色群来体现。例如：Brown：传达深棕色系列的平整感强调网页以及内容的可信度。gray：无色彩的灰色系列体现了符合菜单性质的颜色系列。blue：具有清凉感的蓝色系列新鲜并能刺激好奇心的颜色项目制作的第一步-策划阶段颜色系统13项目制作的第一步-策划阶段字体系统所谓字体系统指的是根据网站的需求预先制定将要使用到的字体大小和类型。一般要使用可读性较高的字体。在一个网站中最好把字体限制在3~4种以内，字体过多，可能会影响网站的统一性。项目制作的第一步-策划阶段字体系统14项目制作的第一步-策划阶段画面编码结构表画面编码结构表是在实际工作中为了组员之间的意见交流而制定的一些规则。投入的人力越多，一定要在画面编码结构的操作上控制执行错误的发生。一般情况下画面编码结构是为各种菜单分别赋予相关英文略称制作的。这是为了使一个类型所包含的各个目录及相关文件的名称具有一定的连贯性。项目制作的第一步-策划阶段画面编码结构表15项目制作的第二步-主体方案的设计过程主体方案的设计过程设置分辨率→界面的分割→网站要素的设计设置分辨率在设计过程中，最先要做的就是设置分辨率。如果设置为1024×768，操作文件最合适的横向大小为995像素，而纵向大小事可调的。项目制作的第二步-主体方案的设计过程主体方案的设计过程16项目制作的第二步-主体方案的设计过程界面的分割界面分割时根据不同要素的重要程度来分割界面大小的过程。通常使用的基本形式是分割为主图像界面、主导航界面、内容界面、banner或子菜单界面等3~4个界面形式。注意：在进行界面分割的时候，重要的是在不破坏整体均匀的范围内进行界面分割。主图像不仅在主页当中，在子网页也是表现该页整体视觉效果的重要图像要素。项目制作的第二步-主体方案的设计过程界面的分割17项目制作的第二步-主体方案的设计过程网站要素的设计主图片的图像设计在网站的设计过程中，有时需要将图片进行一些润饰操作，将照片图像与网站的理念有机的结合起来。主导航器设计利用flash来构成主导航器，最好先计划选择的flash形式。Banber以及子菜单设计首先为了区分左侧区域和右侧区域，可以稍加一些变化，可以利用photoshop的图层蒙版和阴影效果，在没有很大变化的状态下明显区分各个平面。4.内容设计网站主页的内容区域通常根据内容的重要性由上至下安排的。项目制作的第二步-主体方案的设计过程网站要素的设计18项目制作的第三步-制作html文件为了把photoshop中设计的psd文件上传到网络上，首先要将他切割成几个小图像。通常这个过程称为限幅过程。如果将设计的整体文件一次性上传到网络中，读取的时间会过长，为了避免这种现象，需要把这种文件切割成多个部分，以最佳的文件形式上传，并且，为了在网站上添加应用程序或flash等各种功能，必须经过限幅操作，使文件优化为图像的形式。切割后的图像文件网站所需功能的相关程序设计过程以及flash文件等应该排列在表格中。表格的功能是把各个切割后的小图像文件和其他程序以及flash合并在一起。这一过程称之为html文件化操作。项目制作的第三步-制作html文件为了把photoshop中19项目制作的第三步-制作html文件Html文件化操作photoshop等软件中设计的文件→设置辅助线→设置表格→切割图像→优化及保存图像→在表格中嵌入文件→具体设置表格→测试项目制作的第三步-制作html文件Html文件化操作20项目制作的第三步-制作html文件设置辅助线在完成的文件中设置辅助线后，以设置的辅助线为基准切割图像，并在表格中放置各个图像。所以，在设置辅助线之前，首先要考虑后面要设置的表格形式。再次，我们在设置辅助线之前，首先在白纸上直接绘制大概的表格形状，然后在进行操作。

需要辅助线来区分的区域主要有主图片图像和主导航界面、主内容界面、banner以及子菜单界面。项目制作的第三步-制作html文件设置辅助线21项目制作的第三步-制作html文件设置根目录设置根目录的方法主要有两种，一种是在机子的计算机中保存，而另一种是直接设置在服务器上，随时应用到网络中。制作表格基本表格：根据预先考虑的设计方案制作的整体表格框架。按照在photoshop中添加的辅助线，构成具体的表格。集体表格可以制作成各种各样，但最好不要太复杂。项目制作的第三步-制作html文件设置根目录22项目制作的第三步-制作html文件切割图像完成表格结构后，根据photoshop中制作的辅助线切割并保存。切割图像之前最好将辅助线设置的原文件图层合并（合并可见图层或合并图层）。这是因为在photoshop中会使用到各种滤镜，如果将应用效果的部分切割并保存，则最后在html中这些部分可能会表现出不连续的感觉。切割方法：利用裁剪工具利用矩形选框工具选择切割区域后，在选择image>crop最后，在photoshop中选择file>saveforweb命令项目制作的第三步-制作html文件切割图像23项目制作的第三步-制作html文件提示：为了对photoshop中设计的文件进行切割后以最优化的状态进行保存，一般情况下是利用gif文件格式进行保存的。Gif文件以减少像素来缩小容量的方式，不仅减少了网络中读取的时间，而且可以得到高分辨率的图像。保存图像时，gif文件会提取经常使用到的256中颜色来制作颜色索引，并利用这256中颜色来表现整个图像，因此可以大大减少图像容量。项目制作的第三步-制作html文件提示：为了对photosh24项目制作的第四步-css应用及上传在html文件中应用css即把需要应用的所有设置事项保存到扩展名为css的文件中后，在以后执行html文件时，再导入应用这些设置。可以在html文件中导入css文件，在通过链接来应用这些设置项。例如<LINKhref=“img/style2.css”type=text/cssrel=stylesheet>可以确定这是导入css文件来应哟个设置项的。项目制作的第四步-css应用及上传在html文件中应用css25项目制作的第四步-css应用及上传上传html文件上传过程可以通过dreamweaver直接进行，也可以利用可接入到服务器的FTP软件来实现。一个网站若想在网络上正常使用，则需连接到网络中的服务器，各个方面都具备了才能正常使用网站。利用WS_ftp上传选择file>newsite在newsite对话框中输入和网站名称相连的主机（域地址或ip地址）然后“完成”。最后，输入有连接服务器权限的账户，即ID和密码，单机connect按钮。项目制作的第四步-css应用及上传上传html文件26网站项目的策划和制作作者：裘森伟网站项目的策划和制作作者：裘森伟27网站项目项目进行过程

策划阶段→主题方案的设计过程→HTML文件化操作→CSS应用以及上传→测试→网站开通→检测如上所示，一个项目不仅仅是构建一个简单的网站。在进行一个项目时，要基于网站的理念和用途，先制作一份策划案。然后根据策划案开始实际制作，开通网站后还要进行检测等各项工作。网站项目项目进行过程28项目制作的第一步-策划阶段与客户交流制作网站之前，首先和客户交流网站的性质、理念、用途以及客户方负责人的选定等各种网站制作中的相关事项，然后以这些交流为基础，制作相当于设计图的策划案和网站图、向导图等文件，搭建网站的框架。项目制作的第一步-策划阶段与客户交流29项目制作的第一步-策划阶段制作网站时需要和客户交流的事项网站的理念和用途网站的菜单结构和内容结构方案服务器（NT，Linux）设定制作网站时需要的技术（Flash，程序设计语言，动画相关）WebHosting（服务器）、域等相关事项实际工作时间和最终开通日期的设置客户方负责人的选定项目制作的第一步-策划阶段制作网站时需要和客户交流的事项30项目制作的第一步-策划阶段制作策划案策划案是为了在项目进行过程中达到最高的效率而制定的计划。策划案没有固定的格式，每个公司都持有不同的样式。有的策划案是从主页到子夜详细进行说明，而有的策划案是以核心设计部分为框架来进行制作。项目制作的第一步-策划阶段制作策划案31项目制作的第一步-策划阶段策划案中一般包括的事项组织框架图网站图设计向导图主、子页的设计结构界面向导设计版面设计颜色系统字体系统画面编码结构表目录结构规则文件的命名规则项目制作的第一步-策划阶段策划案中一般包括的事项32项目制作的第一步-策划阶段程序逻辑图：对程序逻辑进行说明项目制作的第一步-策划阶段程序逻辑图：对程序逻辑进行说明33项目制作的第一步-策划阶段组织结构图和网站图组织结构图清晰的整理出了主菜单和子菜单的结构，而网站图更加详细的体现了组成菜单的显示方式。例如，网站图将会指定各个菜单的相关网页名称，并显示各自网页打开的窗口方式。项目制作的第一步-策划阶段组织结构图和网站图34组织结构图组织结构图35项目制作的第一步-策划阶段网格系统和版面设计结构下面介绍下策划案中起到框架作用的网格系统和版面设计结构方式。构成基本版面之前要对许多网站进行定标比超。定标比超是在新版面的制作中提供创意的重要手段。将这种过程作为基础，先制作整体上最大框架网格系统后，再根据他整理导航位置子菜单位置，内容部分等事项，从而构成版面，同时，设置版面设计中画面分辨率的基准以及各个区域的画面分割比例。画面分割可以设置为具体的数据。也可以将各个区域以3（左区域），5（内容区域），2（右侧区域）的比例进行分割。项目制作的第一步-策划阶段网格系统和版面设计结构36项目制作的第一步-策划阶段定标比超的概念通过分析与目标网站具有相同性质的其他网站，从而搜集崭新的创意，内容以及导航系统结构等相关资料，不仅对于策划者，对于一般的设计者来说这也是平常生活中需要积累的知识。网格在网站的策划阶段常常会涉及到“网格系统”，”版面设计“，等相关词汇，在这里的网格指的是格子形式，而网格系统可以理解为网站的整体结构，即构成版面的方式，通过网格系统可以分割区域。并决定各个内容的位置，从而构成复杂的版面项目制作的第一步-策划阶段定标比超的概念37项目制作的第一步-策划阶段初步方案操作以及画面说明一般情况下是先提出策划案，再以其为基础进行初步方案的操作。但有时候，也有可能在制作策划案的过程中同时进行网站初步方案的操作。这是因为实际上客户最想知道的不只是策划案等的文件，而更是以后所要制作的网站效果。如果策划中包括了初步方案，不仅要具有和策划案为基础的内容结构，而且还要添加对图像的设计性思维以及flash等应用部分的相关大纲说明。并且也要添加整个网站的帧结构和应用到的技术，以及应用程序时所需的程序设计语言（asp或php），服务器环境等相关说明。项目制作的第一步-策划阶段初步方案操作以及画面说明38项目制作的第一步-策划阶段颜色系统颜色系统为整个网站结构决定一个与理想相符合的颜色结构规则。通过反应网站性质和理念的颜色规则，可以表现出网站的整体性、统一性。在和客户的交流中，可以根据客户要求来构成适合网站性质的颜色系统。颜色系统除了中心性主颜色以外，也可以根据各个区域（子网页）的性质，分别用独立的颜色群来体现。例如：Brown：传达深棕色系列的平整感强调网页以及内容的可信度。gray：无色彩的灰色系列体现了符合菜单性质的颜色系列。blue：具有清凉感的蓝色系列新鲜并能刺激好奇心的颜色项目制作的第一步-策划阶段颜色系统39项目制作的第一步-策划阶段字体系统所谓字体系统指的是根据网站的需求预先制定将要使用到的字体大小和类型。一般要使用可读性较高的字体。在一个网站中最好把字体限制在3~4种以内，字体过多，可能会影响网站的统一性。项目制作的第一步-策划阶段字体系统40项目制作的第一步-策划阶段画面编码结构表画面编码结构表是在实际工作中为了组员之间的意见交流而制定的一些规则。投入的人力越多，一定要在画面编码结构的操作上控制执行错误的发生。一般情况下画面编码结构是为各种菜单分别赋予相关英文略称制作的。这是为了使一个类型所包含的各个目录及相关文件的名称具有一定的连贯性。项目制作的第一步-策划阶段画面编码结构表41项目制作的第二步-主体方案的设计过程主体方案的设计过程设置分辨率→界面的分割→网站要素的设计设置分辨率在设计过程中，最先要做的就是设置分辨率。如果设置为1024×768，操作文件最合适的横向大小为995像素，而纵向大小事可调的。项目制作的第二步-主体方案的设计过程主体方案的设计过程42项目制作的第二步-主体方案的设计过程界面的分割界面分割时根据不同要素的重要程度来分割界面大小的过程。通常使用的基本形式是分割为主图像界面、主导航界面、内容界面、banner或子菜单界面等3~4个界面形式。注意：在进行界面分割的时候，重要的是在不破坏整体均匀的范围内进行界面分割。主图像不仅在主页当中，在子网页也是表现该页整体视觉效果的重要图像要素。项目制作的第二步-主体方案的设计过程界面的分割43项目制作的第二步-主体方案的设计过程网站要素的设计主图片的图像设计在网站的设计过程中，有时需要将图片进行一些润饰操作，将照片图像与网站的理念有机的结合起来。主导航器设计利用flash来构成主导航器，最好先计划选择的flash形式。Banber以及子菜单设计首先为了区分左侧区域和右侧区域，可以稍加一些变化，可以利用photoshop的图层蒙版和阴影效果，在没有很大变化的状态下明显区分各个平面。4.内容设计网站主页的内容区域通常根据内容的重要性由上至下安排的。项目制作的第二步-主体方案的设计过程网站要素的设计44项目制作的第三步-制作html文件为了把photoshop中设计的psd文件上传到网络上，首先要将他切割成几个小图像。通常这个过程称为限幅过程。如果将设计的整体文件一次性上传到网络中，读取的时间会过长，为了避免这种现象，需要把这种文件切割成多个部分，以最佳的文件形式上传，并且，为了在网站上添加应用程序或flash等各种功能，必须经过限幅操作，使文件优化为图像的形式。切割后的图像文件网站所需功能的相关程序设计过程以及flash文件等应该排列在表格中。表格的功能是把各个切割后的小图像文件和其他程序以及flash合并在一起。这一过程称之为html文件化操作。项目制作的第三步-制作html文件为了把photoshop中45项目制作的第三步-制作html文件Html文件化操作photoshop等软件中设计的文件→设置辅助线→设置表格→切割图像→优化及保存图像→在表格中嵌入文件→具体设置表格→测试项目制作的第三步-制作html文件Html文件化操作46项目制作的第三步-制作html文件设置辅助线在完成的文件中设置辅助线后，以设置的辅助线为基准切割图像，并在表格中放置各个图像。所以，在设置辅助线之前，首先要考虑后面要设置的表格形式。再次，我们在设置辅助线之前，首先在白纸上直接绘制大概的表格形状，然后在进行操作。

需要辅助线来区分的区域主要有主图片图像和主导航界面、主内容界面、banner以及子菜单界面。项目制作的第三步-制作html文件设置辅助线47项目制作的第三步-制作html文件设置根目录设置根目录的方法主要有两种，一种是在机子的计算机中保存，而另一种是直接设置在服务器上，随时应用到网络中。制作表格基本表格：根据预先考虑的设计方案制作的整体表格框架。按照在photoshop中添加的辅助线，构成具体的表格。集体表格可以制作成各种各样，但最好不要太复杂。项目制作的第三步-制作html文件设置根目录48项目制作的第三步-