《第二章：网页设计的原则与页面风格》由会员分享，可在线阅读，更多相关《第二章：网页设计的原则与页面风格（61页珍藏版）》请在金锄头文库上搜索。
1、1 1小馬教學站小馬教學站 网页设计与制作网页设计与制作2 2小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格3 3小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 4 4小馬教學站小馬教學站 第一节第一节 网站设计原则网站设计原则一、网站设计的基本原则一、网站设计的基本原则二、网站设计的国
2、际专业流程二、网站设计的国际专业流程5 5小馬教學站小馬教學站 第一节第一节 网站设计原则网站设计原则 网站设计的基本原则网站设计的基本原则创意创意6 6小馬教學站小馬教學站 除了创意之外，在网站设计时还需要考虑以下基本原则：除了创意之外，在网站设计时还需要考虑以下基本原则： 网页内容要便于阅读。网页内容要便于阅读。 注重色彩搭配。注重色彩搭配。 考虑带宽。考虑带宽。 要适当考虑不同浏览器、不同分辨率的情况。要适当考虑不同浏览器、不同分辨率的情况。 提供交互性。提供交互性。 简单即为美。简单即为美。第一节第一节 网站设计原则网站设计原则 网站设计的基本原则网站设计的基本原则7 7小馬教學站小馬
3、教學站 第一节第一节 网站设计原则网站设计原则一、网站设计的基本原则一、网站设计的基本原则二、网站设计的国际专业流程二、网站设计的国际专业流程8 8小馬教學站小馬教學站 第一节第一节 网站设计原则网站设计原则 网站设计的国际专业流程网站设计的国际专业流程初始初始 探讨探讨站点站点 构思构思综合综合 内容内容页面页面 布局布局图形图形 制作制作内容内容 流程流程测试测试验收验收 交付交付初始初始 探讨探讨站点站点 构思构思综合综合 内容内容页面页面 布局布局图形图形 制作制作内容内容 流程流程测试测试验收验收 交付交付9 9小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原
4、则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 1010小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格一、商业网站风格一、商业网站风格二、非商业组织网站的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格整个网站所采用的整个网站所采用的结构布局结构布局、色调色调、文字文字、标志标志、图图案案等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。1
5、111小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格 商业网站风格商业网站风格1. Sony1. Sony的网站的网站1212小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格 商业网站风格商业网站风格2. Sun 2. Sun公司的网站公司的网站1313小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格商业网站风格商业网站风格3. 3. 微软公司的网站微软公司的网站1414小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格商业网站风格商业网站风格总结总结商业网站的商业网站的风格特征：风格特征：1.1.公司公司LOGOLOGO应当出现
6、在页面最上方，尽可能做到色彩醒目，应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。同时占用版面小。2.2.可以采用可以采用主题图形产品广告主题图形产品广告来突出公司形象与风格。位置来突出公司形象与风格。位置放在网页放在网页中部偏上黄金中部偏上黄金位置。位置。3. 3.栏目以栏目以主题图形主题图形配搭配搭文字说明文字说明的形式表现。的形式表现。4. 4.必须建立站内搜索引擎，以便浏览者在站内查找所需要的必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。信息。 1515小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格一、商业网站风格一、商业网站风格二、非商业组织网站
7、的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格整个网站所采用的整个网站所采用的结构布局结构布局、色调色调、文字文字、标志标志、图案图案等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。1616小馬教學站小馬教學站 1.1.北京电影学院的网站北京电影学院的网站1717小馬教學站小馬教學站 1818小馬教學站小馬教學站 2. 2.北京航空航天大学的网站北京航空航天大学的网站1919小馬教學站小馬教學站 2020小馬教學站小馬教學站 3.3.清华大学的网站清华大学的网站2121小馬教學站小馬教學站 2222小馬教學站小馬教學站 第二节第二节 站点的整体风格站
8、点的整体风格 非商业组织网站的风格非商业组织网站的风格总结总结非商业组织的非商业组织的风格特征风格特征：1. 1.强调页面的强调页面的主色调主色调。2.2.主题图形主题图形要求反映单位的风采，设计应有创意、要求反映单位的风采，设计应有创意、 有内涵，庄重中不乏活泼。有内涵，庄重中不乏活泼。3. 3.超级链接超级链接的分类一定要清晰，可采用图形，必要的分类一定要清晰，可采用图形，必要 时可建立站内搜索引擎。时可建立站内搜索引擎。 4. 4.在主页直接放置在主页直接放置信息查看板信息查看板。2323小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格一、商业网站风格一、商业网站风格二、
9、非商业组织网站的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格整个网站所采用的整个网站所采用的结构布局结构布局、色调色调、文字文字、标志标志、图案图案 等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。2424小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格个人网站的风格个人网站的风格个人网站的基本风格有三种：个人网站的基本风格有三种： 主题图形式主题图形式 信息发布式信息发布式 介于两者之间的形式介于两者之间的形式这三种个人网站的风格在布局上有区别，尤其反映这三种个人网站的风格在布局上有区别，尤其反映 在主页上。在主页上。2525小馬教
10、學站小馬教學站 主题图形式主题图形式2626小馬教學站小馬教學站 2727小馬教學站小馬教學站 信息发布式信息发布式2828小馬教學站小馬教學站 2929小馬教學站小馬教學站 两者之间的网站3030小馬教學站小馬教學站 两者之间的网站两者之间的网站3131小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 3232小馬教學站小馬
11、教學站 第三节第三节 站点的层次站点的层次网站的层次是指主页面（首页或一级页面网站的层次是指主页面（首页或一级页面 ）和二级页面、三级页面之间的结构关系。大部和二级页面、三级页面之间的结构关系。大部 分网站制作的初学者不重视这种层次规划，以致于网页风分网站制作的初学者不重视这种层次规划，以致于网页风 格不统一，在网页导航上也出现了很多问题。按照专业网格不统一，在网页导航上也出现了很多问题。按照专业网 页设计流程，制作网页前应先设计好导航条，即需要事先页设计流程，制作网页前应先设计好导航条，即需要事先 规划好网页的层次结构。规划好网页的层次结构。3333小馬教學站小馬教學站 第三节第三节 站点的层次站点的层次几乎所有站点，在网页的层次结构上均可以用三级结构实现几乎所有站点，在网页的层次结构上均可以用三级结构实现，也就是，也就是“首页首页目录页目录页文章页文章页”或或“一级页面一级页面二级页面二级页面三级页面三级页面”结构。结构。3434小馬教學站小馬教學站
