网页设计的原则与页面风格.ppt

网页设计与制作,第二章,网页设计的原则与页面风格,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第一节 网站设计原则,一、网站设计的基本原则二、网站设计的国际专业流程,第一节 网站设计原则 网站设计的基本原则,创意,除了创意之外，在网站设计时还需要考虑以下基本原则：网页内容要便于阅读。注重色彩搭配。考虑带宽。要适当考虑不同浏览器、不同分辨率的情况。提供交互性。简单即为美。,第一节 网站设计原则 网站设计的基本原则,第一节 网站设计原则,一、网站设计的基本原则二、网站设计的国际专业流程,第一节 网站设计原则 网站设计的国际专业流程,初始探讨,站点构思,综合内容,页面布局,图形制作,内容流程,测试,验收交付,初始探讨,站点构思,综合内容,页面布局,图形制作,内容流程,测试,验收交付,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第二节 站点的整体风格,一、商业网站风格二、非商业组织网站的风格三、个人网站的风格,整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。,第二节 站点的整体风格 商业网站风格,1.Sony的网站,第二节 站点的整体风格 商业网站风格,2.Sun公司的网站,第二节 站点的整体风格 商业网站风格,3.微软公司的网站,第二节 站点的整体风格 商业网站风格,总结 商业网站的风格特征：1.公司LOGO应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。2.可以采用主题图形产品广告来突出公司形象与风格。位置放在网页中部偏上黄金位置。3.栏目以主题图形配搭文字说明的形式表现。4.必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。,第二节 站点的整体风格,一、商业网站风格二、非商业组织网站的风格三、个人网站的风格,整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。,1.北京电影学院的网站,2.北京航空航天大学的网站,3.清华大学的网站,第二节 站点的整体风格 非商业组织网站的风格,总结 非商业组织的风格特征：1.强调页面的主色调。2.主题图形要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼。3.超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。4.在主页直接放置信息查看板。,第二节 站点的整体风格,一、商业网站风格二、非商业组织网站的风格三、个人网站的风格,整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。,第二节 站点的整体风格 个人网站的风格,个人网站的基本风格有三种：主题图形式 信息发布式 介于两者之间的形式 这三种个人网站的风格在布局上有区别，尤其反映在主页上。,主题图形式,信息发布式,两者之间的网站,两者之间的网站,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第三节 站点的层次,网站的层次是指主页面（首页或一级页面）和二级页面、三级页面之间的结构关系。大部分网站制作的初学者不重视这种层次规划，以致于网页风格不统一，在网页导航上也出现了很多问题。按照专业网页设计流程，制作网页前应先设计好导航条，即需要事先规划好网页的层次结构。,第三节 站点的层次,几乎所有站点，在网页的层次结构上均可以用三级结构实现，也就是“首页目录页文章页”或“一级页面二级页面三级页面”结构。,在上述的三级结构中，二级页面之间、三级页面之间应保持风格一致。首页与二、三级页面之间的风格也有需要一致之处，但这种要求不十分严格，自由度稍大。,第三节 站点的层次,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第四节 站点的层次实例分析,通过实例理解站点的三个层次之间的关系。,商业网站非商业网站,IBM的站点 首页,第四节 站点的层次实例分析,商业网站非商业网站,通过实例理解站点的三个层次之间的关系。,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第五节 网站结构组织,站点目录结构的组织网站的链接结构的组织,第五节 网站结构组织 站点目录结构的组织,网站的目录是指你建立网站时创建的目录。,第五节 网站目录结构组织 站点目录结构的组织,1.不要将所有文件都存放在根目录；2.按栏目内容分别建立子目录；3.每个目录建立独立的images子目录；4.目录的层次不要太深；5.切忌使用中文目录；6.不要使用过长的目录；7.尽量使用意义明确的目录。,第五节 网站结构组织,站点目录结构的组织网站的链接结构的组织,第五节 网站结构组织 网站的链接结构的组织,网站的链接结构是指页面之间相互链接的拓扑结构。,用最少的链接，使得浏览最有效率。,第五节 网站结构组织 网站的链接结构的组织,一般地，建立网站的链接结构有两种基本方式：,1树形链接结构（一对一）,第五节 网站结构组织 网站的链接结构的组织,2星形链接结构（一对多）,第五节 网站结构组织 网站的链接结构的组织,首页和目录页之间用星形链接结构目录页和文章页之间用树形链接结构,商业站点结构示例,第五节 网站结构组织 网站的链接结构的组织,“您现在的位置是：首页财经新闻市场信息北京”,第五节 网站结构组织 网站的链接结构的组织,关于链接结构的设计，在实际的页面制作中是非常重要的一环。采用什么样的链接结构直接影响到版面的布局。,第二章 网页设计的原则与页面风格,第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结,第六节 小结,第六节 小结,首先，一个站点必须要有自己的风格，不落于俗套，给浏览者留下深刻的印象。站点内部必须要有统一的风格。对于不同目的、不同类型的站点的风格同时也要符合其自身的特点和角色要求。,第六节 小结,其次，把站点的信息通过三个层次来进行组织；每个层次的引导页面所对应的风格应该符合其角色的要求；同时在层次之间引导页面的风格也应该相互呼应。,第六节 小结,最后，把信息之间的关系设计称为站点的逻辑设计，而把对应到站点的文件上的设计称为物理设计。如何做好物理设计才能够使站点维护更方便。做好逻辑设计是用户访问得心应手的基础。不仅可以方便快速的浏览，更加注重个性化和相关性。,实践,上网查看实际网站，使用网站的设计原则评价站点。设计一个自我介绍的站点，要求包括至少三个栏目和一个主页面。对第一步查看的站点，分析其风格特征和结构类型。根据网站层次规划的原则规划一个介绍某种或某类熟悉的东西的网站，并做流程、时间、进度计划。,