网站规划和设计.ppt
《网站规划和设计.ppt》由会员分享,可在线阅读,更多相关《网站规划和设计.ppt(44页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网站规划和设计网站规划和设计1学时学时概述概述网站设计,包含的内容非常多。大体分两个方网站设计,包含的内容非常多。大体分两个方网站设计,包含的内容非常多。大体分两个方网站设计,包含的内容非常多。大体分两个方面:面:面:面:一方面是纯网站本身的设计比如文字排版,图一方面是纯网站本身的设计比如文字排版,图一方面是纯网站本身的设计比如文字排版,图一方面是纯网站本身的设计比如文字排版,图片制作,平面设计,三维立体设计,静态无声图文,片制作,平面设计,三维立体设计,静态无声图文,片制作,平面设计,三维立体设计,静态无声图文,片制作,平面设计,三维立体设计,静态无声图文,动态有声影像等;动态有声影像等;动
2、态有声影像等;动态有声影像等;另一方面是网站的延伸设计,包括网站的主题另一方面是网站的延伸设计,包括网站的主题另一方面是网站的延伸设计,包括网站的主题另一方面是网站的延伸设计,包括网站的主题定位和浏览群的定位,智能交互,制作策划,形象定位和浏览群的定位,智能交互,制作策划,形象定位和浏览群的定位,智能交互,制作策划,形象定位和浏览群的定位,智能交互,制作策划,形象包装,宣传营销等等。包装,宣传营销等等。包装,宣传营销等等。包装,宣传营销等等。网站建设规划书网站建设规划书网站规划和设计的主要内容网站规划和设计的主要内容1.1.定位你的网站主题和名称;定位你的网站主题和名称;2.2.定位你的网站定
3、位你的网站CICI形象;形象;3.3.确定你的栏目和版块;确定你的栏目和版块;4.4.网站的整体风格创意设计网站的整体风格创意设计5.5.网站的层次结构和链接结构网站的层次结构和链接结构6.6.首页的设计首页的设计7.7.版面布局的窍门版面布局的窍门8.8.色彩的搭配色彩的搭配9.9.网页字体的设置网页字体的设置一、一、定位你的网站主题和名称定位你的网站主题和名称所谓主题也就是你的网站的题材。网络上的网站所谓主题也就是你的网站的题材。网络上的网站所谓主题也就是你的网站的题材。网络上的网站所谓主题也就是你的网站的题材。网络上的网站题材千奇百怪题材千奇百怪题材千奇百怪题材千奇百怪,琳琅满目。只要你
4、想的到,就可以把琳琅满目。只要你想的到,就可以把琳琅满目。只要你想的到,就可以把琳琅满目。只要你想的到,就可以把它制作出来。常见题材:它制作出来。常见题材:它制作出来。常见题材:它制作出来。常见题材:第第第第1 1 1 1类:网上求职类:网上求职类:网上求职类:网上求职第第第第2 2 2 2类:网上聊天即时信息类:网上聊天即时信息类:网上聊天即时信息类:网上聊天即时信息/ICQ/ICQ/ICQ/ICQ第第第第3 3 3 3类:网上社区讨论类:网上社区讨论类:网上社区讨论类:网上社区讨论 /邮件列表邮件列表邮件列表邮件列表第第第第4 4 4 4类:计算机技术类:计算机技术类:计算机技术类:计算机
5、技术第第第第5 5 5 5类:网页类:网页类:网页类:网页/网站开发网站开发网站开发网站开发 第第第第6 6 6 6类:娱乐网站类:娱乐网站类:娱乐网站类:娱乐网站 第第第第7 7 7 7类:旅行类:旅行类:旅行类:旅行 第第第第8 8 8 8类:参考类:参考类:参考类:参考 /资讯资讯资讯资讯第第第第9 9 9 9类:家庭类:家庭类:家庭类:家庭/教育教育教育教育 第第第第10101010类:生活类:生活类:生活类:生活/时尚时尚时尚时尚 一、一、定位你的网站主题和名称定位你的网站主题和名称题材的选择的建议:题材的选择的建议:1.1.主题要小而精。定位要小,内容要精。主题要小而精。定位要小,
6、内容要精。2.2.题材最好是你自己擅长或者喜爱的内容。题材最好是你自己擅长或者喜爱的内容。3.3.题材不要太滥或者目标太高题材不要太滥或者目标太高一、一、定位你的网站主题和名称定位你的网站主题和名称网站取名的建议:网站取名的建议:1.1.名称要正。其实就是要合法,合法。不能用反名称要正。其实就是要合法,合法。不能用反动的,色情的,迷信的,危害社会安全的名词语句。动的,色情的,迷信的,危害社会安全的名词语句。2.2.名称要易记。中文网站名称最好用中文名称,名称要易记。中文网站名称最好用中文名称,不要使用英文或者中英文混合型名称。另外,网站不要使用英文或者中英文混合型名称。另外,网站名称的字数应该
7、控制在六个字(最好四个字)以内,名称的字数应该控制在六个字(最好四个字)以内,比如比如“XXXX阁阁”“XXXX设计室设计室”,四个字的可以用成语,四个字的可以用成语,如如“一网打进一网打进”。字数少还有个好处,一般适合于。字数少还有个好处,一般适合于其他站点的链接排版。其他站点的链接排版。一、一、定位你的网站主题和名称定位你的网站主题和名称网站取名的建议:网站取名的建议:3.3.名称要有特色。如:音乐前卫,网页陶吧,名称要有特色。如:音乐前卫,网页陶吧,天籁绝音。在体现出网站主题的同时,能点出特天籁绝音。在体现出网站主题的同时,能点出特色之处。色之处。总之,定位题材和名称是设计一个网站的第总
8、之,定位题材和名称是设计一个网站的第一步,也是很重要的一部分。一步,也是很重要的一部分。二、二、定位你的网站定位你的网站CICI形象形象所谓所谓CICI,是借用的广告术语。,是借用的广告术语。(CI(CI是英文是英文corporate identitycorporate identity的缩写的缩写),意思是通过视觉,意思是通过视觉来统一企业的形象。如:可口可乐公来统一企业的形象。如:可口可乐公 司,全球司,全球统一的标志,色彩和产品包装,给我们的印象统一的标志,色彩和产品包装,给我们的印象极为深刻。极为深刻。一个杰出的网站,和实体公司一样,也需一个杰出的网站,和实体公司一样,也需要整体的形象
9、包装和设计。准确的,有创意的要整体的形象包装和设计。准确的,有创意的CI CI 设计,对网站的宣传推广有事半功倍的效果。设计,对网站的宣传推广有事半功倍的效果。在您的网站主题和名称定下来之后,需要思考在您的网站主题和名称定下来之后,需要思考的就是网站的的就是网站的CICI形象。形象。二、二、定位你的网站定位你的网站CICI形象形象网站网站CICI主要内容:主要内容:1.1.设计网站的标志设计网站的标志(logo)(logo)。logologo是你站点是你站点特色和内涵的集中体现,看见特色和内涵的集中体现,看见logologo就让大家联就让大家联想起你的站点。(不是指想起你的站点。(不是指88X
10、3188X31的小的小bannerbanner)标志可以是中文,英文字母,可以是符号,标志可以是中文,英文字母,可以是符号,图案,可以是动物或者人物等等。如:新浪用图案,可以是动物或者人物等等。如:新浪用字母字母sina+sina+眼睛作为标志。标志的设计创意来自眼睛作为标志。标志的设计创意来自你网站的名称和内容。你网站的名称和内容。二、二、定位你的网站定位你的网站CICI形象形象网站网站网站网站CICICICI主要内容:主要内容:主要内容:主要内容:2.2.2.2.设计网站的标准色彩。网站给人的第一印象来设计网站的标准色彩。网站给人的第一印象来设计网站的标准色彩。网站给人的第一印象来设计网站
11、的标准色彩。网站给人的第一印象来自视觉冲击,确定网站的标准色彩是相当重要的一步。自视觉冲击,确定网站的标准色彩是相当重要的一步。自视觉冲击,确定网站的标准色彩是相当重要的一步。自视觉冲击,确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果,并可能影响到访问者不同的色彩搭配产生不同的效果,并可能影响到访问者不同的色彩搭配产生不同的效果,并可能影响到访问者不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。的情绪。的情绪。的情绪。“标准色彩标准色彩标准色彩标准色彩”是指能体现网站型象和延伸内涵是指能体现网站型象和延伸内涵是指能体现网站型象和延伸内涵是指能体现网站型象和延伸内涵的色
12、彩。如:的色彩。如:的色彩。如:的色彩。如:IBMIBMIBMIBM的深蓝色,肯得基的红色条型,的深蓝色,肯得基的红色条型,的深蓝色,肯得基的红色条型,的深蓝色,肯得基的红色条型,windowswindowswindowswindows视窗标志上的红蓝黄绿色块。如果将视窗标志上的红蓝黄绿色块。如果将视窗标志上的红蓝黄绿色块。如果将视窗标志上的红蓝黄绿色块。如果将IBMIBMIBMIBM改用黄改用黄改用黄改用黄色呢?色呢?色呢?色呢?一般来说,一个网站的标准色彩不超过一般来说,一个网站的标准色彩不超过一般来说,一个网站的标准色彩不超过一般来说,一个网站的标准色彩不超过3 3 3 3种,太种,太种
13、,太种,太多则让人眼花缭乱。标准色彩要用于网站的标志,标题,多则让人眼花缭乱。标准色彩要用于网站的标志,标题,多则让人眼花缭乱。标准色彩要用于网站的标志,标题,多则让人眼花缭乱。标准色彩要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色主菜单和主色块。给人以整体统一的感觉。至于其它色主菜单和主色块。给人以整体统一的感觉。至于其它色主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主
14、。二、二、定位你的网站定位你的网站CICI形象形象网站网站CICI主要内容:主要内容:3.3.3.3.设计网站的标准字体。和标准色彩一样,标准设计网站的标准字体。和标准色彩一样,标准设计网站的标准字体。和标准色彩一样,标准设计网站的标准字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般字体是指用于标志,标题,主菜单的特有字体。一般字体是指用于标志,标题,主菜单的特有字体。一般字体是指用于标志,标题,主菜单的特有字体。一般我们网页默认的字体是宋体。注意:使用非默认字体我们网页默认的字体是宋体。注意:使用非默认字体我们网页默认的字体是宋体。注意:使用非默认字体我们网页默认的字
15、体是宋体。注意:使用非默认字体只能用图片的形式!只能用图片的形式!只能用图片的形式!只能用图片的形式!4.4.4.4.设计网站的宣传标语。也可以说是网站的精设计网站的宣传标语。也可以说是网站的精设计网站的宣传标语。也可以说是网站的精设计网站的宣传标语。也可以说是网站的精神,网站的目标。如:鹊巢的神,网站的目标。如:鹊巢的神,网站的目标。如:鹊巢的神,网站的目标。如:鹊巢的“味道好极了味道好极了味道好极了味道好极了”;IntelIntelIntelIntel的的的的“给你一个奔腾的心给你一个奔腾的心给你一个奔腾的心给你一个奔腾的心”。以上四方面:标志,色彩,字体,标语,是一个以上四方面:标志,色
16、彩,字体,标语,是一个以上四方面:标志,色彩,字体,标语,是一个以上四方面:标志,色彩,字体,标语,是一个网站树立网站树立网站树立网站树立CICICICI形象的关键,确切的说是网站的表面文章,形象的关键,确切的说是网站的表面文章,形象的关键,确切的说是网站的表面文章,形象的关键,确切的说是网站的表面文章,设计并完成这几步,你的网站将脱胎换骨,整体形象设计并完成这几步,你的网站将脱胎换骨,整体形象设计并完成这几步,你的网站将脱胎换骨,整体形象设计并完成这几步,你的网站将脱胎换骨,整体形象有一个提高。有一个提高。有一个提高。有一个提高。三、三、确定你的栏目和版块定位网站主题和确立网站的定位网站主题
17、和确立网站的定位网站主题和确立网站的定位网站主题和确立网站的CICICICI形象。是否该进入形象。是否该进入形象。是否该进入形象。是否该进入实质性的设计制作阶段呢?答案是:不能。经验告诉实质性的设计制作阶段呢?答案是:不能。经验告诉实质性的设计制作阶段呢?答案是:不能。经验告诉实质性的设计制作阶段呢?答案是:不能。经验告诉我们,建立一个网站好比写一篇文章,首先要拟好提我们,建立一个网站好比写一篇文章,首先要拟好提我们,建立一个网站好比写一篇文章,首先要拟好提我们,建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰;也好比造一座高纲,文章才能主题明确,层次清晰;也好比造一座高
18、纲,文章才能主题明确,层次清晰;也好比造一座高纲,文章才能主题明确,层次清晰;也好比造一座高楼,首先要设计好框架图纸,才能使楼房结构合理。楼,首先要设计好框架图纸,才能使楼房结构合理。楼,首先要设计好框架图纸,才能使楼房结构合理。楼,首先要设计好框架图纸,才能使楼房结构合理。在动手制作网页前,一定要考虑好以下三方面:在动手制作网页前,一定要考虑好以下三方面:在动手制作网页前,一定要考虑好以下三方面:在动手制作网页前,一定要考虑好以下三方面:1.1.1.1.确定栏目和版块;确定栏目和版块;确定栏目和版块;确定栏目和版块;2.2.2.2.确定网站的目录结构和链接结构确定网站的目录结构和链接结构确定
19、网站的目录结构和链接结构确定网站的目录结构和链接结构3.3.3.3.确定网站的整体风格创意设计确定网站的整体风格创意设计确定网站的整体风格创意设计确定网站的整体风格创意设计三、三、确定你的栏目和版块栏目的实质是一个网站的大纲索引,索引应该将栏目的实质是一个网站的大纲索引,索引应该将栏目的实质是一个网站的大纲索引,索引应该将栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔网站的主体明确显示出来。在制定栏目的时候,要仔网站的主体明确显示出来。在制定栏目的时候,要仔网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。细考虑,合理安排。细考虑,合理安
20、排。细考虑,合理安排。1.1.1.1.一定记住要紧扣你的主题!一定记住要紧扣你的主题!一定记住要紧扣你的主题!一定记住要紧扣你的主题!一般的做法是:将你的主题按一定的方法分一般的做法是:将你的主题按一定的方法分一般的做法是:将你的主题按一定的方法分一般的做法是:将你的主题按一定的方法分类并将它们作为网站的主栏目。例如上面的例子,可类并将它们作为网站的主栏目。例如上面的例子,可类并将它们作为网站的主栏目。例如上面的例子,可类并将它们作为网站的主栏目。例如上面的例子,可以将栏目分为动物动画,标志动画,三维动画,卡通以将栏目分为动物动画,标志动画,三维动画,卡通以将栏目分为动物动画,标志动画,三维动
21、画,卡通以将栏目分为动物动画,标志动画,三维动画,卡通动画等,在首页上标明最近更新的动画。记住:主题动画等,在首页上标明最近更新的动画。记住:主题动画等,在首页上标明最近更新的动画。记住:主题动画等,在首页上标明最近更新的动画。记住:主题栏目个数在总栏目中要占绝对优势,这样的网站显的栏目个数在总栏目中要占绝对优势,这样的网站显的栏目个数在总栏目中要占绝对优势,这样的网站显的栏目个数在总栏目中要占绝对优势,这样的网站显的专业,主题突出,容易给人留下深刻印象。专业,主题突出,容易给人留下深刻印象。专业,主题突出,容易给人留下深刻印象。专业,主题突出,容易给人留下深刻印象。三、三、确定你的栏目和版块
22、2.2.2.2.设一个最近更新或网站指南栏目设一个最近更新或网站指南栏目设一个最近更新或网站指南栏目设一个最近更新或网站指南栏目如果你的首页没有安排版面放置最近更新内容信如果你的首页没有安排版面放置最近更新内容信如果你的首页没有安排版面放置最近更新内容信如果你的首页没有安排版面放置最近更新内容信息,就有必要设立一个息,就有必要设立一个息,就有必要设立一个息,就有必要设立一个“最近更新最近更新最近更新最近更新”的栏目。如果你的栏目。如果你的栏目。如果你的栏目。如果你的主页内容庞大、层次较多,建议您设置的主页内容庞大、层次较多,建议您设置的主页内容庞大、层次较多,建议您设置的主页内容庞大、层次较多
23、,建议您设置“本站指南本站指南本站指南本站指南”栏目。栏目。栏目。栏目。3.3.3.3.设定一个可以双向交流的栏目设定一个可以双向交流的栏目设定一个可以双向交流的栏目设定一个可以双向交流的栏目不需要很多,但一定要有。比如论坛,留言本,不需要很多,但一定要有。比如论坛,留言本,不需要很多,但一定要有。比如论坛,留言本,不需要很多,但一定要有。比如论坛,留言本,邮件列表等,可以让浏览者留下信息。邮件列表等,可以让浏览者留下信息。邮件列表等,可以让浏览者留下信息。邮件列表等,可以让浏览者留下信息。三、三、确定你的栏目和版块4.4.4.4.设一个下载或常见问题回答栏目设一个下载或常见问题回答栏目设一个
24、下载或常见问题回答栏目设一个下载或常见问题回答栏目网络的特点是信息共享。如果你看到一个站点有网络的特点是信息共享。如果你看到一个站点有网络的特点是信息共享。如果你看到一个站点有网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料,你肯定希望能一次性下大量的优秀的有价值的资料,你肯定希望能一次性下大量的优秀的有价值的资料,你肯定希望能一次性下大量的优秀的有价值的资料,你肯定希望能一次性下载,而不是一页一页浏览存盘。载,而不是一页一页浏览存盘。载,而不是一页一页浏览存盘。载,而不是一页一页浏览存盘。至于其他的辅助内容,如关于本站,版权信息等至于其他的辅助内容,如关于本站,版权信息等至
25、于其他的辅助内容,如关于本站,版权信息等至于其他的辅助内容,如关于本站,版权信息等可以不放在主栏目里,以免冲淡主题。总结以上几点,可以不放在主栏目里,以免冲淡主题。总结以上几点,可以不放在主栏目里,以免冲淡主题。总结以上几点,可以不放在主栏目里,以免冲淡主题。总结以上几点,我们得出划分栏目需要注意的是:我们得出划分栏目需要注意的是:我们得出划分栏目需要注意的是:我们得出划分栏目需要注意的是:尽可能删除与主题无关的栏目尽可能删除与主题无关的栏目尽可能删除与主题无关的栏目尽可能删除与主题无关的栏目尽可能将网站最有价值的内容列在栏目上尽可能将网站最有价值的内容列在栏目上尽可能将网站最有价值的内容列在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 规划 设计
限制150内