互联网网站设计流程.pptx
《互联网网站设计流程.pptx》由会员分享,可在线阅读,更多相关《互联网网站设计流程.pptx(82页珍藏版)》请在咨信网上搜索。
1、第4章 网站设计流程教学提示:教学提示:教学提示:教学提示:前几章已经学习了网站的安装与配置、制作网页的基前几章已经学习了网站的安装与配置、制作网页的基础础HTMLHTML语言,本章将介绍网站的整体设计流程。语言,本章将介绍网站的整体设计流程。教学要求:教学要求:教学要求:教学要求:了解网站的设计流程,能够自己独立确定一个网站的了解网站的设计流程,能够自己独立确定一个网站的主题及风格。掌握网站界面设计及版面布局的方法。主题及风格。掌握网站界面设计及版面布局的方法。讲解提纲讲解提纲n n4.1 4.1 网站设计流程网站设计流程n n4.2 4.2 确定网站的类型确定网站的类型n n4.3 web
2、4.3 web站点的主题与风格站点的主题与风格n n4.4 4.4 网站内容的确定网站内容的确定n n4.5 4.5 网站界面设计网站界面设计n n4.6 4.6 实训:网上商城的规划设计实训:网上商城的规划设计n n4.7 4.7 习习 题题4.1 网站设计流程 网站是企业向用户和网民提供信息网站是企业向用户和网民提供信息(包括产品包括产品和服务和服务)的一种方式的一种方式,是企业开展电子商务的基础设是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被网站)去谈电子商务是不可能的。企业的网址被
3、称为称为“网络商标网络商标”,也是企业无形资产的组成部,也是企业无形资产的组成部分,而网站是分,而网站是InternetInternet上宣传和反映企业形象和文上宣传和反映企业形象和文化的重要窗口。企业网站设计显得极为重要,下化的重要窗口。企业网站设计显得极为重要,下面是一些网站设计的大致流程。面是一些网站设计的大致流程。(具体内容第一章具体内容第一章有详细介绍有详细介绍)。大致流程n n(1)(1)明确建立网站的目标和用户需求。明确建立网站的目标和用户需求。n n(2)(2)总体设计方案主题鲜明。总体设计方案主题鲜明。n n(3)(3)网站的版式设计。网站的版式设计。n n(4)(4)网站测
4、试和改进。网站测试和改进。n n(5)(5)内容更新与沟通。内容更新与沟通。4.2 确定网站的类型 随着随着InternetInternet的飞速发展,网络已经或正在成为人们的飞速发展,网络已经或正在成为人们学习、工作和生活中不可缺少的一部分,更重要的是学习、工作和生活中不可缺少的一部分,更重要的是InternetInternet潜在的商机已经日益显现。因此,不论个人还是潜在的商机已经日益显现。因此,不论个人还是团体,都希望在网络中找到适合自己的位置。于是,各团体,都希望在网络中找到适合自己的位置。于是,各种各样的网站如雨后春笋般地建立起来,综观种各样的网站如雨后春笋般地建立起来,综观Inte
5、rnetInternet上上数以百万计的网站,按照其功能和结构形式大体上可以数以百万计的网站,按照其功能和结构形式大体上可以分为以下几类。分为以下几类。分类n n(1)(1)门户网站。门户网站。n n(2)(2)普及型网站。普及型网站。n n(3)(3)电子商务类网站。电子商务类网站。n n(4)(4)媒体信息服务类网站。媒体信息服务类网站。n n(5)(5)办公事务管理网站办公事务管理网站 。n n(6)(6)商务管理网站。商务管理网站。4.3 web站点的主题与风格站点的主题与风格 4.3.1 4.3.1 确定网站的主题确定网站的主题 4.3.2 4.3.2 确定站点的整体风格确定站点的整
6、体风格4.3.1 确定网站的主题确定网站的主题 所谓网站的主题也就是网站的题材。现在网上比所谓网站的主题也就是网站的题材。现在网上比较知名的较知名的1010类题材有:网上求职、网上聊天类题材有:网上求职、网上聊天/ICQ/ICQ、网、网上社区上社区/讨论讨论/邮件列表、计算机技术、网页邮件列表、计算机技术、网页/网站开发、网站开发、娱乐网站、旅行、参考娱乐网站、旅行、参考/资讯、家庭资讯、家庭/教育、生活教育、生活/时尚。时尚。在选择网站题材的时候要注意以下几点在选择网站题材的时候要注意以下几点 1.主题要小,内容要精主题要小,内容要精 网站的定位要小。如果要想制作一个包罗万网站的定位要小。如
7、果要想制作一个包罗万象的网站,把所有认为精彩的东西都放在上面,象的网站,把所有认为精彩的东西都放在上面,会让人感觉没有主题和特色,样样都有却样样都会让人感觉没有主题和特色,样样都有却样样都很肤浅,而且会没有足够的能力去维护和及时更很肤浅,而且会没有足够的能力去维护和及时更新。新。网站的内容还得要新颖,创新的内容就是网站网站的内容还得要新颖,创新的内容就是网站的灵魂,没有新颖的内容,网站就失去了生命力。的灵魂,没有新颖的内容,网站就失去了生命力。2.2.网站的题材最好是自己擅长或者喜网站的题材最好是自己擅长或者喜爱的内容爱的内容一个企业要建立网站,要密切结合自己的业务范围来一个企业要建立网站,要
8、密切结合自己的业务范围来选择内容,而不要脱离业务主题去搞什么国内国际新选择内容,而不要脱离业务主题去搞什么国内国际新闻、娱乐动态等与本身业务不相关的东西,或者为了闻、娱乐动态等与本身业务不相关的东西,或者为了增加访问量而去办一些本身并不熟悉且技术难度又比增加访问量而去办一些本身并不熟悉且技术难度又比较大的栏目,比如网上聊天之类。较大的栏目,比如网上聊天之类。3.题材不要太滥,目标不要过高题材不要太滥,目标不要过高 “太滥太滥”是指到处可见,人人都有的题材,比如免费是指到处可见,人人都有的题材,比如免费信息,软件下载等;信息,软件下载等;“目标过高目标过高”是指在这一题材上已是指在这一题材上已经
9、有非常优秀、知名度很高的网站,要超过的话是很难经有非常优秀、知名度很高的网站,要超过的话是很难的。的。4.3.2 4.3.2 确定站点的整体风格确定站点的整体风格 网站的风格设计是最抽象、也是最头疼的一个问题。网站的风格设计是最抽象、也是最头疼的一个问题。许多网站的建设者都是从事计算机和网络技术的,他们许多网站的建设者都是从事计算机和网络技术的,他们非常熟悉网页制作技术,但是却少有想法创作一个既美非常熟悉网页制作技术,但是却少有想法创作一个既美观又有独特风格的主页。另一方面,专业的美工师通常观又有独特风格的主页。另一方面,专业的美工师通常都是传统的美工技术,对网页制作技术和网络知识知之都是传统
10、的美工技术,对网页制作技术和网络知识知之甚少,所以不知道如何设计最适合网络传输的图片。所甚少,所以不知道如何设计最适合网络传输的图片。所以,网站的风格设计并不简单,它是一项综合的技术。以,网站的风格设计并不简单,它是一项综合的技术。风格设计包含的内容很多,下面就色彩搭配和风格设计包含的内容很多,下面就色彩搭配和版面布局设计两个最为重要的方面来介绍一下网站版面布局设计两个最为重要的方面来介绍一下网站的风格设计。的风格设计。1)1)色彩的基础知识色彩的基础知识 网站的色彩是最影响整体风格的因素,也是网站美工网站的色彩是最影响整体风格的因素,也是网站美工设计中最令人头疼的问题。许多网页设计者都缺乏色
11、彩搭配设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基本知识,所以在制作网页之前往往有一个很好的想法,的基本知识,所以在制作网页之前往往有一个很好的想法,但是却不知如何搭配网页的颜色来表达预想的效果。因此,但是却不知如何搭配网页的颜色来表达预想的效果。因此,在介绍色彩搭配之前,先来看看色彩的基本知识。在介绍色彩搭配之前,先来看看色彩的基本知识。网页中的颜色通常采用网页中的颜色通常采用6 6位十六进制的数值来表位十六进制的数值来表示,每两位代表一种颜色,从左到右依次表示红色、示,每两位代表一种颜色,从左到右依次表示红色、绿色和蓝色。颜色值越高表示这种颜色越深,比如红绿色和蓝色。颜色值越高
12、表示这种颜色越深,比如红色,其数值为色,其数值为“#FF0000”#FF0000”,白色为,白色为“#FFFFFF”#FFFFFF”,黑,黑色为色为“000000”000000”。也可以采用。也可以采用3 3个以个以“,”相隔的相隔的十进制数来表示某一颜色,比如红色,其十进制表示十进制数来表示某一颜色,比如红色,其十进制表示为为Color(255,0,0)Color(255,0,0)。太阳光是彩色的,按颜色的色调通常将其划分为太阳光是彩色的,按颜色的色调通常将其划分为7 7种颜色:红、橙、黄、绿、蓝、青、紫。如果将这种颜色:红、橙、黄、绿、蓝、青、紫。如果将这7 7种颜色按这个顺序渐变为一条色
13、带的话,越靠近红色,种颜色按这个顺序渐变为一条色带的话,越靠近红色,给人的感觉越温暖,越靠近蓝色和紫色,给人的感觉给人的感觉越温暖,越靠近蓝色和紫色,给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调,青、越寒冷。所以红、橙、黄的组合又称为暖色调,青、蓝、紫的组合又称为冷色调。蓝、紫的组合又称为冷色调。除了冷暖的差别外,不同的单个颜色也会给人除了冷暖的差别外,不同的单个颜色也会给人除了冷暖的差别外,不同的单个颜色也会给人除了冷暖的差别外,不同的单个颜色也会给人带来不同的感觉,如下所述。带来不同的感觉,如下所述。带来不同的感觉,如下所述。带来不同的感觉,如下所述。n n红色红色=是一种激奋的色彩
14、。刺激效果,能使人产生冲动、愤是一种激奋的色彩。刺激效果,能使人产生冲动、愤怒、热情、活力的感觉。怒、热情、活力的感觉。n n绿色绿色=介于冷暖两种色彩的中间,显得和睦、宁静、健康、介于冷暖两种色彩的中间,显得和睦、宁静、健康、安全的感觉,它和金黄、淡白搭配、可以产生优雅舒适的安全的感觉,它和金黄、淡白搭配、可以产生优雅舒适的气氛。气氛。n n橙色橙色=也是一种激奋的色彩,具有轻快、欢欣、热烈、温馨、也是一种激奋的色彩,具有轻快、欢欣、热烈、温馨、时尚的效果。时尚的效果。n n黄色黄色=具有快乐、希望、智慧和轻快的个性,它的明度最高。具有快乐、希望、智慧和轻快的个性,它的明度最高。n n蓝色蓝
15、色=是最具凉爽、清新、专业的色彩。它和白色混合能体是最具凉爽、清新、专业的色彩。它和白色混合能体现柔顺、淡雅、浪漫的气氛现柔顺、淡雅、浪漫的气氛(像天空的色彩像天空的色彩)。n n白色白色=具有洁白、明快、纯真、清洁的感受。具有洁白、明快、纯真、清洁的感受。n n黑色黑色=具有深沉、神秘、寂静、悲哀、压抑的感受。具有深沉、神秘、寂静、悲哀、压抑的感受。n n灰色灰色=具有中庸、平凡、温和、谦让、中立和高雅的感觉。具有中庸、平凡、温和、谦让、中立和高雅的感觉。(2)网站的色彩搭配网站的色彩搭配n n(1)(1)网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理网页色彩搭配的原理n n色彩色彩
16、的鲜明性:网页的色彩要鲜艳,容易引人注目。的鲜明性:网页的色彩要鲜艳,容易引人注目。n n色彩的独特性:要有与众不同的色彩,使得大家对你的印色彩的独特性:要有与众不同的色彩,使得大家对你的印象强烈。象强烈。n n色彩的合适性:就是说色彩和表达的内容、气氛相适合,色彩的合适性:就是说色彩和表达的内容、气氛相适合,如用粉色体现女性类网站的柔性。如用粉色体现女性类网站的柔性。n n色彩的联想性:不同色彩会产生不同的联想,蓝色想到天色彩的联想性:不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和网站空,黑色想到黑夜,红色想到喜事等,选择色彩要和网站的内涵相关联。的内涵相
17、关联。(2)(2)网页色彩掌握的过程网页色彩掌握的过程 随着随着人们对网页制作经验的积累,用色有这样的一人们对网页制作经验的积累,用色有这样的一个趋势:单色个趋势:单色五彩缤纷五彩缤纷标准色标准色单色。一开始因为单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础后,就将自己收集的最好的图片,最满意在有一定基础后,就将自己收集的最好的图片,最满意的色彩堆砌在页面上,但是时间一长,却发现色彩杂乱,的色彩堆砌在页面上,但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站时,选择没有个性和风格;第三次重新定位自
18、己的网站时,选择切合自己的色彩,推出的网站往往比较成功;最后当设切合自己的色彩,推出的网站往往比较成功;最后当设计理念和技术达到顶峰时,则又返璞归真,用单一色彩计理念和技术达到顶峰时,则又返璞归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。甚至非彩色就可以设计出简洁精美的站点。(3)网页色彩搭配的技巧网页色彩搭配的技巧 n n用一种色彩。这里是指先选定一种色彩,然后调整透明度用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度或者饱和度(说得通俗些就是将色彩变淡或者加深说得通俗些就是将色彩变淡或者加深),产生,产生新的色彩,用于网页。这样的页面看起来色彩统一,有层新的色彩,用于网
19、页。这样的页面看起来色彩统一,有层次感。次感。n n用两种色彩。先选定一种色彩,然后选择它的对比色用两种色彩。先选定一种色彩,然后选择它的对比色(在在PhotoshopPhotoshop里按里按Ctrl+Shift+ICtrl+Shift+I键键)。这样整个页面色彩丰富但。这样整个页面色彩丰富但不花哨。不花哨。n n用一个色系。简单地说就是用一个感觉的色彩,例如淡蓝、用一个色系。简单地说就是用一个感觉的色彩,例如淡蓝、淡黄、淡绿,或者土黄、土灰、土蓝。淡黄、淡绿,或者土黄、土灰、土蓝。n n用黑色和一种彩色。比如大红的字体配黑色的边框感觉很用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳
20、跳”。在网页配色中,忌讳的是:不要将所有颜色都用到,尽在网页配色中,忌讳的是:不要将所有颜色都用到,尽在网页配色中,忌讳的是:不要将所有颜色都用到,尽在网页配色中,忌讳的是:不要将所有颜色都用到,尽量控制在量控制在量控制在量控制在3 3种色彩以内。种色彩以内。种色彩以内。种色彩以内。背景和前文的对比尽量要大背景和前文的对比尽量要大背景和前文的对比尽量要大背景和前文的对比尽量要大(绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案绝对不要用花纹繁复的图案作背景作背景作背景作背景),以便突出主要文字内容,如图,以便突出主要文字内容,如图,以便突出主要文字内容,如图,以便突出主
21、要文字内容,如图4.14.1所示。所示。所示。所示。图4.1 背景和前文对比示例总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。总之在设计网站风格的时候要注意以下几个问题。(1)1)将网站标志放在最突出的位置将网站标志放在最突出的位置(2)(2)突出标准色彩突出标准色彩(3)(3)使用标准字体使用标准字体(4)(4)使用统一的图片处理效果使用统一的图片处理效果4.4 网站内容的确定网站内容的确定 4.4.1 4.4.1 网页内容设计原则网页内容设计原则 4.4.2 4.4.2 一般网站就包含的几项内容一般网站就
22、包含的几项内容4.4.1 网页内容设计原则网页内容设计原则 网站要方便使用,并遵循一些设计惯例,因为用户网站要方便使用,并遵循一些设计惯例,因为用户在访问一个个网站时,难以记住任何特殊的交互诀窍,在访问一个个网站时,难以记住任何特殊的交互诀窍,于是会把更多的时间花在更方便使用的网站上。页面特于是会把更多的时间花在更方便使用的网站上。页面特别是主页经常是第一个别是主页经常是第一个(也有可能是最后一个也有可能是最后一个)吸引并留吸引并留住客户的机会,所以设计网站的页面,遵循一些原则显住客户的机会,所以设计网站的页面,遵循一些原则显得尤为重要。以下是在设计页面时需遵循的一些基本原得尤为重要。以下是在
23、设计页面时需遵循的一些基本原则则。1.日期、时间和数字日期、时间和数字 用户需要了解他们看到的信息是当前的,但是并不需要用户需要了解他们看到的信息是当前的,但是并不需要用户需要了解他们看到的信息是当前的,但是并不需要用户需要了解他们看到的信息是当前的,但是并不需要查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以查看每个条目的日期和时间。设计日期和数字时就要注意以下问题。下问题。下问题。下问题。n n(1)(1)仅对时间敏感的信息显示日期和时间,不要对没有时间仅对时间敏感的信息显示日期和时
24、间,不要对没有时间敏感的信息显示时间和日期;不必显示星期几。敏感的信息显示时间和日期;不必显示星期几。n n(2)(2)显示最后更新的时间,而不是计算机生成的时间。显示最后更新的时间,而不是计算机生成的时间。n n(3)(3)日期的书写。不要只用数字表示日期,比如日期的书写。不要只用数字表示日期,比如“01/02/0301/02/03”,它可能是,它可能是2 2月月1 1日,也可能是日,也可能是1 1月月2 2日,因为日,因为有些国家的习惯不同。有些国家的习惯不同。n n(4)(4)当显示一列数字时,要对齐小数点。当显示一列数字时,要对齐小数点。2.欢迎词欢迎词 很多网站都喜欢在主页上显示欢迎
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 网站 设计 流程
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【w****g】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【w****g】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。