第2章网站整体策划与设计流程.ppt
- 文档编号:2122694
- 上传时间:2022-10-27
- 格式:PPT
- 页数:16
- 大小:1.13MB
第2章网站整体策划与设计流程.ppt
《第2章网站整体策划与设计流程.ppt》由会员分享,可在线阅读,更多相关《第2章网站整体策划与设计流程.ppt(16页珍藏版)》请在冰豆网上搜索。
第2章网站整体策划与设计流程教学目标教学目标:
本章以网站的整体策划与设计流程为导线,本章以网站的整体策划与设计流程为导线,系统的介绍系统的介绍网站设计网站设计所涉及的必须掌握的策划、设计与制作方面所涉及的必须掌握的策划、设计与制作方面的知识,的知识,为以后学习与制作各类网站打下基础。
为以后学习与制作各类网站打下基础。
教学重点和难点教学重点和难点1.了解网站策划了解网站策划(设计设计)的概念的概念2.掌握网站设计的基本流程掌握网站设计的基本流程3.掌握资料收集的基本方法掌握资料收集的基本方法4.能进行简单网站的设计能进行简单网站的设计v网站的规划设计与实现是一个系统的工程,网站的规划设计与实现是一个系统的工程,一个一个好的设计对网站的制作乃至今后的发展起着关键好的设计对网站的制作乃至今后的发展起着关键性的作用。
性的作用。
v网站的整体策划:
整体的网站设计叫做网站整体网站的整体策划:
整体的网站设计叫做网站整体策划。
策划。
设计设计如何将网站的需求信息很好地体现出如何将网站的需求信息很好地体现出来,并有效地传达给目标用户,使网站达到最好来,并有效地传达给目标用户,使网站达到最好的效果。
的效果。
2.1.1网站的建设流程网站的建设流程网站建设的基本流程一般可以分为以下部分:
网站建设的基本流程一般可以分为以下部分:
2.1网站的整体策划与设计流程网站的整体策划与设计流程1.网站立项与分析定位网站立项与分析定位(2.1.2)
(1)市场分析:
了解相关类型的网站、主要竞争者的网市场分析:
了解相关类型的网站、主要竞争者的网站的现状站的现状(功能、特点、优点、缺点等功能、特点、优点、缺点等),分析自,分析自身优势,提升网站竞争力。
身优势,提升网站竞争力。
(2)网站定位:
确定网站的功能网站定位:
确定网站的功能(3)确定技术方案:
发布位置确定技术方案:
发布位置(自主管理、主机托管、自主管理、主机托管、租用虚拟主机等租用虚拟主机等)、采用的、采用的OS、网络安全方面措、网络安全方面措施、静态或动态、动态网页技术、数据库技术等。
施、静态或动态、动态网页技术、数据库技术等。
目的:
对网站进行系统的了解。
目的:
对网站进行系统的了解。
2.资料收集,该过程同时可以完善先前的定位资料收集,该过程同时可以完善先前的定位(2.1.3)3.制作制作“网站总体建设方案书网站总体建设方案书”(2.1.4)4.视觉形象设计视觉形象设计(具体设计具体设计):
色彩设计、布局版式、页:
色彩设计、布局版式、页面元素等的设计。
面元素等的设计。
(2.2)5.网站制作网站制作(2.2)6.发布与上传:
上传、调试发布与上传:
上传、调试(不同的不同的OS、不同的分辨、不同的分辨率、不同的浏览器的兼容性测试及程序调试率、不同的浏览器的兼容性测试及程序调试)7.网站推广网站推广(QQ群、论坛、广告、群、论坛、广告、Meta标签、行业会标签、行业会议、公司宣传页、登录搜索引擎、交换链接等议、公司宣传页、登录搜索引擎、交换链接等)8.网站的更新与维护网站的更新与维护(内容、版式、问题、内容、版式、问题、DB维护维护)对于更新频繁、信息量大的网站考虑使用动态网对于更新频繁、信息量大的网站考虑使用动态网站,完成自动更新。
站,完成自动更新。
2.1.2网站的需求分析与定位网站的需求分析与定位分析:
根据网站的类型分析:
根据网站的类型(展示型、内容型、电子商务型、门户型展示型、内容型、电子商务型、门户型等等)、目标群体及特点、目标群体及特点得出得出网站的基本功能、开发与发布环境、网站的基本功能、开发与发布环境、维护需求等。
维护需求等。
2.1.3设计资料收集设计资料收集设计资料就类型来分可以分为文字类资料和图形类资料两种。
设计资料就类型来分可以分为文字类资料和图形类资料两种。
文字资料:
书、期刊、网络、内部材料、自写文字资料:
书、期刊、网络、内部材料、自写静态图形资料静态图形资料(JPEG和静态和静态GIF):
图库光盘、扫描、网络、:
图库光盘、扫描、网络、相机、自制相机、自制动态图形资料动态图形资料(动态动态GIF、FLASH动画、动画、AVI、RM、MOV等等):
网络、摄像机、自制:
网络、摄像机、自制注意事项:
在保证质量的同时,尽量将其容量缩小。
注意事项:
在保证质量的同时,尽量将其容量缩小。
注意版权的问题,尽是原创。
注意版权的问题,尽是原创。
2.1.4整体风格与内容规划整体风格与内容规划(一一)CI设计设计vCI的英文全称为的英文全称为CorporateIdentity,即企业形象即企业形象(系统系统),它,它包括包括VI(visualIdentity视觉识别系统视觉识别系统)、BI(BehaviorIdentity行为识别系统行为识别系统)、MI(MindIdentity观念识别系统观念识别系统)三三部分。
部分。
v理念识别(理念识别(MI):
就是一个企业由于具有独特的经营哲学、):
就是一个企业由于具有独特的经营哲学、宗旨、目标、精神、道德、作风等等而区别于其他企业。
宗旨、目标、精神、道德、作风等等而区别于其他企业。
MI是是CI的灵魂和整体系统的原动力,它对的灵魂和整体系统的原动力,它对BI和和VI具有决定作用具有决定作用并通过并通过BI、VI表现出来。
表现出来。
v行为识别行为识别(BI):
指企业理念统帅下企业组织及全体员工的言:
指企业理念统帅下企业组织及全体员工的言行和各项活动所表现出一个企业与其他企业的区别。
行和各项活动所表现出一个企业与其他企业的区别。
v视觉识别视觉识别(VI):
指一个企业由于独特的:
指一个企业由于独特的名称、标志名称、标志(LOGO)、标准字、标准色标准字、标准色等视觉要素而区别于其他企业。
研究表明,等视觉要素而区别于其他企业。
研究表明,人们获取信息的最主要途径是视觉,约占人们获取信息的最主要途径是视觉,约占80,因此,因此VI是整是整个企业形象识别系统中最形象直观、最具有冲击力的部分,个企业形象识别系统中最形象直观、最具有冲击力的部分,是网站设计中应该注意的部分是网站设计中应该注意的部分。
(二二)网站总体建设方案网站总体建设方案主要包括:
主要包括:
1、网站的整体设计思想、网站的整体设计思想(网站主题、网站类型、目标网站主题、网站类型、目标人群分析、风格和人群分析、风格和CI形象等形象等);2、网站需要实现哪些功能;、网站需要实现哪些功能;3、网站的栏目和板块;、网站的栏目和板块;可事先对人们希望阅读的信息进行调查可事先对人们希望阅读的信息进行调查在网站发布后调查人们对网站内容的满意度,以及时在网站发布后调查人们对网站内容的满意度,以及时调整网站内容。
调整网站内容。
4、站点结构和链接结构;、站点结构和链接结构;站点结构:
文件站点结构:
文件(夹夹)最好用英文名称最好用英文名称链接结构:
星型、树型、网型链接结构:
星型、树型、网型5、如果有数据库,进行数据库的概念设计;、如果有数据库,进行数据库的概念设计;数据库的类型、数据表结构等。
数据库的类型、数据表结构等。
6、网站交互性的实现;、网站交互性的实现;用户和网站间的交互采用什么方式(留言板、在用户和网站间的交互采用什么方式(留言板、在线交流、发电子邮件等)线交流、发电子邮件等)7、开发时间进度表;(名称、工作内容、时间、开发时间进度表;(名称、工作内容、时间、人员、验收负责人等)人员、验收负责人等)8、网站维护方案:
维护频率、维护内容、响应时、网站维护方案:
维护频率、维护内容、响应时间、维护制度等。
间、维护制度等。
2.2网站设计制作流程网站设计制作流程v将纸面文字上的思想转化成为真实的网站将纸面文字上的思想转化成为真实的网站-网站的设计与制作。
网站的设计与制作。
2.2.1草图阶段草图阶段使用笔和纸绘制草图依然有其优势和必要,我使用笔和纸绘制草图依然有其优势和必要,我们可以借助这样的传统工具快速勾勒出大脑中们可以借助这样的传统工具快速勾勒出大脑中一闪而过的美妙创意并迅速的完善。
一闪而过的美妙创意并迅速的完善。
2.2.2静态设计图阶段静态设计图阶段使用使用Photoshop、Firework等绘图软件在预定的页面等绘图软件在预定的页面尺寸内尺寸内绘制静态的页面设计稿绘制静态的页面设计稿。
借助软件强大的图形处理能力我们可以很快借助软件强大的图形处理能力我们可以很快看到成稿的看到成稿的大致样子大致样子,并,并及时的修改设计中的一些不足及时的修改设计中的一些不足之处。
之处。
2.2.3切片分割与图片优化阶段切片分割与图片优化阶段1、受受网网络络带带宽宽的的影影响响,当当网网页页文文件件太太大大时时,会会影影响响下下载载时时间间,所以应对大图片进行切片分割和优化。
所以应对大图片进行切片分割和优化。
2、网页中常用的图片格式、网页中常用的图片格式JPEG格式格式JPEG格式是一种提供格式是一种提供24位色彩的图形压缩格式,可以将较大位色彩的图形压缩格式,可以将较大的图形文件通过有损压缩的方式在损失一定图像质量的前提的图形文件通过有损压缩的方式在损失一定图像质量的前提下变得适合网页浏览。
但是这种格式不能支持透明图片。
下变得适合网页浏览。
但是这种格式不能支持透明图片。
适用场合:
色彩丰富的照片或图像适用场合:
色彩丰富的照片或图像GIF格式格式GIF格式最多支持格式最多支持8位色彩,也就是我们所说的位色彩,也就是我们所说的256色,无损压色,无损压缩格式。
这种格式在处理较大较复杂的图形中效果比较差,缩格式。
这种格式在处理较大较复杂的图形中效果比较差,但是它支持图片的透明背景和动画格式。
但是它支持图片的透明背景和动画格式。
适用场合:
色彩单纯的按钮、标题、小动画等适用场合:
色彩单纯的按钮、标题、小动画等PNG格式格式较晚出现的一种优秀图像格式,支持高级别无损耗压缩,兼较晚出现的一种优秀图像格式,支持高级别无损耗压缩,兼有有JPEG和和GIF的色彩模式,最多支持的色彩模式,最多支持48位的色彩。
位的色彩。
适用场合:
任意图片适用场合:
任意图片使用原则:
控制数量;在保证图像质量的前提下使图像尽可能使用原则:
控制数量;在保证图像质量的前提下使图像尽可能小。
小。
2.2.4Dreamweaver编辑阶段编辑阶段使用网页制作工具将所有的文字、图片、视频使用网页制作工具将所有的文字、图片、视频等资料按照设计方案逐页制作实现并测试。
等资料按照设计方案逐页制作实现并测试。
v本章实训和作业:
综合实训本章实训和作业:
综合实训2(6学时)学时)1、要求见教材、要求见教材2、上交的内容、上交的内容
(1)总体方案策划书:
写到作业本上。
总体方案策划书:
写到作业本上。
(2)网站:
网站:
所有内容放在一个文件夹内,文件夹的名字为网络所有内容放在一个文件夹内,文件夹的名字为网络姓名姓名1或信息姓名或信息姓名2(其中为学号后(其中为学号后3位)。
位)。
将文件夹压缩后上传(压缩包名同文件夹名)。
将文件夹压缩后上传(压缩包名同文件夹名)。
每位同每位同学大小控制在学大小控制在4M以内。
以内。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 整体 策划 设计 流程
![提示](https://static.bdocx.com/images/bang_tan.gif)