《网页设计的原则与页面风格.ppt》由会员分享，可在线阅读，更多相关《网页设计的原则与页面风格.ppt（61页珍藏版）》请在金锄头文库上搜索。
1、1 1小馬教學站小馬教學站小馬教學站小馬教學站 网页设计与制作网页设计与制作2 2小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章网页设计的原则与页面风格网页设计的原则与页面风格3 3小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 4 4小馬教學站小馬教學站小馬教學站小馬教學站 第一节第一节 网站设
2、计原则网站设计原则一、网站设计的基本原则一、网站设计的基本原则二、网站设计的国际专业流程二、网站设计的国际专业流程5 5小馬教學站小馬教學站小馬教學站小馬教學站 第一节第一节第一节第一节 网站设计原则网站设计原则网站设计原则网站设计原则 网站设计的基本原则网站设计的基本原则网站设计的基本原则网站设计的基本原则创意创意6 6小馬教學站小馬教學站小馬教學站小馬教學站 除了创意之外，在网站设计时还需要考虑以下基本原则：除了创意之外，在网站设计时还需要考虑以下基本原则：除了创意之外，在网站设计时还需要考虑以下基本原则：除了创意之外，在网站设计时还需要考虑以下基本原则： 网页内容要便于阅读。网页内容要便
3、于阅读。网页内容要便于阅读。网页内容要便于阅读。 注重色彩搭配。注重色彩搭配。注重色彩搭配。注重色彩搭配。 考虑带宽。考虑带宽。考虑带宽。考虑带宽。 要适当考虑不同浏览器、不同分辨率的情况。要适当考虑不同浏览器、不同分辨率的情况。要适当考虑不同浏览器、不同分辨率的情况。要适当考虑不同浏览器、不同分辨率的情况。 提供交互性。提供交互性。提供交互性。提供交互性。 简单即为美。简单即为美。简单即为美。简单即为美。第一节第一节第一节第一节 网站设计原则网站设计原则网站设计原则网站设计原则 网站设计的基本原则网站设计的基本原则网站设计的基本原则网站设计的基本原则7 7小馬教學站小馬教學站小馬教學站小馬教
4、學站 第一节第一节 网站设计原则网站设计原则一、网站设计的基本原则一、网站设计的基本原则二、网站设计的国际专业流程二、网站设计的国际专业流程8 8小馬教學站小馬教學站小馬教學站小馬教學站 第一节第一节第一节第一节 网站设计原则网站设计原则网站设计原则网站设计原则 网站设计的国际专业流程网站设计的国际专业流程网站设计的国际专业流程网站设计的国际专业流程初始初始初始初始探讨探讨探讨探讨站点站点站点站点构思构思构思构思综合综合综合综合内容内容内容内容页面页面页面页面布局布局布局布局图形图形图形图形制作制作制作制作内容内容内容内容流程流程流程流程测试测试测试测试验收验收验收验收交付交付交付交付初始初始
5、初始初始探讨探讨探讨探讨站点站点站点站点构思构思构思构思综合综合综合综合内容内容内容内容页面页面页面页面布局布局布局布局图形图形图形图形制作制作制作制作内容内容内容内容流程流程流程流程测试测试测试测试验收验收验收验收交付交付交付交付9 9小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 1010小馬教學站小
6、馬教學站小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格一、商业网站风格一、商业网站风格二、非商业组织网站的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格 整个网站所采用的整个网站所采用的整个网站所采用的整个网站所采用的结构布局结构布局结构布局结构布局、色调色调色调色调、文字文字文字文字、标志标志标志标志、图图图图案案案案等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。1111小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整
7、体风格站点的整体风格站点的整体风格 商业网站风格商业网站风格商业网站风格商业网站风格1 1 1 1. . . . S S S So o o on n n ny y y y的的的的网网网网站站站站1212小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整体风格站点的整体风格站点的整体风格 商业网站风格商业网站风格商业网站风格商业网站风格 2 2 2 2. . . . S S S Su u u un n n n公公公公司司司司的的的的网网网网站站站站1313小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整体风格站点的
8、整体风格站点的整体风格 商业网站风格商业网站风格商业网站风格商业网站风格3 3 3 3. . . . 微微微微软软软软公公公公司司司司的的的的网网网网站站站站1414小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整体风格站点的整体风格站点的整体风格 商业网站风格商业网站风格商业网站风格商业网站风格总结总结总结总结 商业网站的商业网站的商业网站的商业网站的风格特征：风格特征：风格特征：风格特征： 1.1.1.1.公司公司公司公司LOGOLOGOLOGOLOGO应当出现在页面最上方，尽可能做到色彩醒目，应当出现在页面最上方，尽可能做到色彩醒目，应当出现在页
9、面最上方，尽可能做到色彩醒目，应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。同时占用版面小。同时占用版面小。同时占用版面小。 2.2.2.2.可以采用可以采用可以采用可以采用主题图形产品广告主题图形产品广告主题图形产品广告主题图形产品广告来突出公司形象与风格。位置来突出公司形象与风格。位置来突出公司形象与风格。位置来突出公司形象与风格。位置放在网页放在网页放在网页放在网页中部偏上黄金中部偏上黄金中部偏上黄金中部偏上黄金位置。位置。位置。位置。 3. 3. 3. 3.栏目以栏目以栏目以栏目以主题图形主题图形主题图形主题图形配搭配搭配搭配搭文字说明文字说明文字说明文字说明的形式表现。的
10、形式表现。的形式表现。的形式表现。 4. 4. 4. 4.必须建立站内搜索引擎，以便浏览者在站内查找所需要的必须建立站内搜索引擎，以便浏览者在站内查找所需要的必须建立站内搜索引擎，以便浏览者在站内查找所需要的必须建立站内搜索引擎，以便浏览者在站内查找所需要的信息。信息。信息。信息。 1515小馬教學站小馬教學站小馬教學站小馬教學站 第二节 站点的整体风格一、商业网站风格一、商业网站风格二、非商业组织网站的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格 整个网站所采用的整个网站所采用的整个网站所采用的整个网站所采用的结构布局结构布局结构布局结构布局、色调色调色调色调、文字文字文
11、字文字、标志标志标志标志、图案图案图案图案等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。1616小馬教學站小馬教學站小馬教學站小馬教學站 1 1 1 1. . . .北北北北京京京京电电电电影影影影学学学学院院院院的的的的网网网网站站站站1717小馬教學站小馬教學站小馬教學站小馬教學站 1818小馬教學站小馬教學站小馬教學站小馬教學站 2. 2. 2. 2.北京航空航天大学的网站北京航空航天大学的网站北京航空航天大学的网站北京航空航天大学的网站1919小馬教學站小馬教學站小馬教學站小馬教學站 2
12、020小馬教學站小馬教學站小馬教學站小馬教學站 3.3.3.3.清华大学的网站清华大学的网站清华大学的网站清华大学的网站2121小馬教學站小馬教學站小馬教學站小馬教學站 2222小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整体风格站点的整体风格站点的整体风格 非商业组织网站的风格非商业组织网站的风格非商业组织网站的风格非商业组织网站的风格 总结总结总结总结 非商业组织的非商业组织的非商业组织的非商业组织的风格特征风格特征风格特征风格特征： 1. 1. 1. 1.强调页面的强调页面的强调页面的强调页面的主色调主色调主色调主色调。 2.2.2.2.主题图
13、形主题图形主题图形主题图形要求反映单位的风采，设计应有创意、要求反映单位的风采，设计应有创意、要求反映单位的风采，设计应有创意、要求反映单位的风采，设计应有创意、有内涵，庄重中不乏活泼。有内涵，庄重中不乏活泼。有内涵，庄重中不乏活泼。有内涵，庄重中不乏活泼。 3. 3. 3. 3.超级链接超级链接超级链接超级链接的分类一定要清晰，可采用图形，必要的分类一定要清晰，可采用图形，必要的分类一定要清晰，可采用图形，必要的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。时可建立站内搜索引擎。时可建立站内搜索引擎。时可建立站内搜索引擎。 4. 4. 4. 4.在主页直接放置在主页直接放置在主页直接
14、放置在主页直接放置信息查看板信息查看板信息查看板信息查看板。2323小馬教學站小馬教學站小馬教學站小馬教學站 第二节第二节 站点的整体风格站点的整体风格一、商业网站风格一、商业网站风格二、非商业组织网站的风格二、非商业组织网站的风格三、个人网站的风格三、个人网站的风格 整个网站所采用的整个网站所采用的整个网站所采用的整个网站所采用的结构布局结构布局结构布局结构布局、色调色调色调色调、文字文字文字文字、标志标志标志标志、图案图案图案图案等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。等要素带给浏览者的关于该网站的印象。2424小馬教學站
15、小馬教學站小馬教學站小馬教學站 第二节第二节第二节第二节 站点的整体风格站点的整体风格站点的整体风格站点的整体风格 个人网站的风格个人网站的风格个人网站的风格个人网站的风格 个人网站的基本风格有三种：个人网站的基本风格有三种：个人网站的基本风格有三种：个人网站的基本风格有三种： 主题图形式主题图形式主题图形式主题图形式 信息发布式信息发布式信息发布式信息发布式 介于两者之间的形式介于两者之间的形式介于两者之间的形式介于两者之间的形式 这三种个人网站的风格在布局上有区别，尤其反映这三种个人网站的风格在布局上有区别，尤其反映这三种个人网站的风格在布局上有区别，尤其反映这三种个人网站的风格在布局上有
16、区别，尤其反映在主页上。在主页上。在主页上。在主页上。2525小馬教學站小馬教學站小馬教學站小馬教學站 主题图形式主题图形式2626小馬教學站小馬教學站小馬教學站小馬教學站 2727小馬教學站小馬教學站小馬教學站小馬教學站 信息发布式信息发布式信息发布式信息发布式2828小馬教學站小馬教學站小馬教學站小馬教學站 2929小馬教學站小馬教學站小馬教學站小馬教學站 两者之间的网站两者之间的网站3030小馬教學站小馬教學站小馬教學站小馬教學站 两两两两者者者者之之之之间间间间的的的的网网网网站站站站3131小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则
17、与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 3232小馬教學站小馬教學站小馬教學站小馬教學站 第三节 站点的层次 网站的层次是指主页面（首页或一级页面）网站的层次是指主页面（首页或一级页面）网站的层次是指主页面（首页或一级页面）网站的层次是指主页面（首页或一级页面）和二级页面、三级页面之间的结构关系。大部和二级页面、三级页面之间的结构关系。大部和二级页面、三级页面之间的结构关系。大部和二级页面
18、、三级页面之间的结构关系。大部分网站制作的初学者不重视这种层次规划，以致于网页风分网站制作的初学者不重视这种层次规划，以致于网页风分网站制作的初学者不重视这种层次规划，以致于网页风分网站制作的初学者不重视这种层次规划，以致于网页风格不统一，在网页导航上也出现了很多问题。按照专业网格不统一，在网页导航上也出现了很多问题。按照专业网格不统一，在网页导航上也出现了很多问题。按照专业网格不统一，在网页导航上也出现了很多问题。按照专业网页设计流程，制作网页前应先设计好导航条，即需要事先页设计流程，制作网页前应先设计好导航条，即需要事先页设计流程，制作网页前应先设计好导航条，即需要事先页设计流程，制作网页
19、前应先设计好导航条，即需要事先规划好网页的层次结构。规划好网页的层次结构。规划好网页的层次结构。规划好网页的层次结构。3333小馬教學站小馬教學站小馬教學站小馬教學站 第三节第三节 站点的层次站点的层次 几乎所有站点，在网页的层次结构上均可以用三级结构实现，几乎所有站点，在网页的层次结构上均可以用三级结构实现，几乎所有站点，在网页的层次结构上均可以用三级结构实现，几乎所有站点，在网页的层次结构上均可以用三级结构实现，也就是也就是也就是也就是“首页首页首页首页目录页目录页目录页目录页文章页文章页文章页文章页”或或或或“一级页面一级页面一级页面一级页面二级页面二级页面二级页面二级页面三三三三级页
20、面级页面级页面级页面”结构。结构。结构。结构。3434小馬教學站小馬教學站小馬教學站小馬教學站 在上述的三级结构中，在上述的三级结构中，二级页面之间、三级页面之二级页面之间、三级页面之间应保持风格一致。首页与间应保持风格一致。首页与二、三级页面之间的风格也二、三级页面之间的风格也有需要一致之处，但这种要有需要一致之处，但这种要求不十分严格，自由度稍大。求不十分严格，自由度稍大。 第三节第三节 站点的层次站点的层次 3535小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风
21、格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 3636小馬教學站小馬教學站小馬教學站小馬教學站 第四节第四节 站点的层次实例分析站点的层次实例分析 通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。商业网站商业网站非商业网站非商业网站3737小馬教學站小馬教學站小馬教學站小馬教學站 IBMIBMIBMIBM的站点的站点的站点的站点 首页首页首页首页3838小馬教學站小馬教
22、學站小馬教學站小馬教學站 3939小馬教學站小馬教學站小馬教學站小馬教學站 4040小馬教學站小馬教學站小馬教學站小馬教學站 第四节第四节 站点的层次实例分析站点的层次实例分析 商业网站商业网站非商业网站非商业网站 通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。通过实例理解站点的三个层次之间的关系。4141小馬教學站小馬教學站小馬教學站小馬教學站 4242小馬教學站小馬教學站小馬教學站小馬教學站 4343小馬教學站小馬教學站小馬教學站小馬教學站 4444小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页
23、面风格网页设计的原则与页面风格 第一节第一节 网站设计原则网站设计原则 第二节第二节 站点的整体风格站点的整体风格 第三节第三节 站点的层次站点的层次 第四节第四节 站点的层次实例分析站点的层次实例分析 第五节第五节 网站结构组织网站结构组织 第六节第六节 小结小结 4545小馬教學站小馬教學站小馬教學站小馬教學站 第五节 网站结构组织站点目录结构的组织站点目录结构的组织网站的链接结构的组织网站的链接结构的组织4646小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 站点目录结构的组织站点目录结构的组织站点目录结构的组织站点目
24、录结构的组织 网站的目录是指你建立网站的目录是指你建立网站时创建的目录。网站时创建的目录。4747小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站目录结构组织网站目录结构组织网站目录结构组织网站目录结构组织 站点目录结构的组织站点目录结构的组织站点目录结构的组织站点目录结构的组织1.1.不要将所有文件都存放在根目录；不要将所有文件都存放在根目录；2.2.按栏目内容分别建立子目录；按栏目内容分别建立子目录；3.3.每个目录建立独立的每个目录建立独立的imagesimages子目录；子目录；4.4.目录的层次不要太深；目录的层次不要太深；5.5.切忌使用中文目录；切忌使用中
25、文目录；6.6.不要使用过长的目录；不要使用过长的目录；7.7.尽量使用意义明确的目录。尽量使用意义明确的目录。4848小馬教學站小馬教學站小馬教學站小馬教學站 第五节 网站结构组织站点目录结构的组织站点目录结构的组织网站的链接结构的组织网站的链接结构的组织4949小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织 网站的链接结构是指页面之间相互网站的链接结构是指页面之间相互链接的拓扑结构。链接的拓扑结构。 用最少的链接，使得浏览最有效率。用最少的
26、链接，使得浏览最有效率。5050小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织 一般地，建立网站的链接结构有两种基一般地，建立网站的链接结构有两种基本方式：本方式： 1 1树形链接结构树形链接结构（一对一）（一对一） 5151小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织 2 2星形链接结构（一
27、对多）星形链接结构（一对多） 5252小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织首页和目录页之间用首页和目录页之间用星形链接结构星形链接结构目录页和文章页之间用目录页和文章页之间用树形链接结构树形链接结构商业站点结构示例商业站点结构示例5454小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织“
28、您现在的位置是：首页您现在的位置是：首页财经新闻财经新闻市场信息市场信息北京北京”5555小馬教學站小馬教學站小馬教學站小馬教學站 第五节第五节第五节第五节 网站结构组织网站结构组织网站结构组织网站结构组织 网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织网站的链接结构的组织 关于链接结构的关于链接结构的设计，在实际的页面设计，在实际的页面制作中是非常重要的制作中是非常重要的一环。采用什么样的一环。采用什么样的链接结构直接影响到链接结构直接影响到版面的布局。版面的布局。5656小馬教學站小馬教學站小馬教學站小馬教學站 第二章第二章 网页设计的原则与页面风格网页设计的原则与页面风格
29、第一节 网站设计原则 第二节 站点的整体风格 第三节 站点的层次 第四节 站点的层次实例分析 第五节 网站结构组织 第六节 小结 5757小馬教學站小馬教學站小馬教學站小馬教學站 第六节 小结5858小馬教學站小馬教學站小馬教學站小馬教學站 第六节第六节 小结小结 首先，一个站点必须要有首先，一个站点必须要有自己的风自己的风格格，不落于俗套，给浏览者留下深刻的，不落于俗套，给浏览者留下深刻的印象。印象。 站点内部必须要有站点内部必须要有统一的风格统一的风格。 对于不同目的、不同类型的站点的对于不同目的、不同类型的站点的风格同时也要符合其自身的风格同时也要符合其自身的特点特点和角色和角色要求。要
30、求。5959小馬教學站小馬教學站小馬教學站小馬教學站 第六节第六节 小结小结 其次，把站点的信息通过其次，把站点的信息通过三个层次三个层次来进行组织；来进行组织； 每个层次的引导页面所对应的风格应每个层次的引导页面所对应的风格应该符合其该符合其角色的要求角色的要求； 同时在层次之间引导页面的风格也应同时在层次之间引导页面的风格也应该该相互呼应相互呼应。6060小馬教學站小馬教學站小馬教學站小馬教學站 第六节第六节 小结小结 最后，把最后，把信息之间的关系设计称为站点的信息之间的关系设计称为站点的逻辑设计逻辑设计，而把，而把对应到站点的文件上的设计称对应到站点的文件上的设计称为物理设计为物理设计
31、。 如何做好物理设计才能够使站点维护更方如何做好物理设计才能够使站点维护更方便。便。 做好逻辑设计是用户访问得心应手的基础。做好逻辑设计是用户访问得心应手的基础。 不仅可以方便快速的浏览，更加注重个性化和不仅可以方便快速的浏览，更加注重个性化和相关性。相关性。6161小馬教學站小馬教學站小馬教學站小馬教學站 实践实践 上网查看实际网站，使用网站的设计原则评价站点。上网查看实际网站，使用网站的设计原则评价站点。上网查看实际网站，使用网站的设计原则评价站点。上网查看实际网站，使用网站的设计原则评价站点。 设计一个自我介绍的站点，要求包括至少三个栏目设计一个自我介绍的站点，要求包括至少三个栏目设计
32、一个自我介绍的站点，要求包括至少三个栏目设计一个自我介绍的站点，要求包括至少三个栏目和一个主页面。和一个主页面。和一个主页面。和一个主页面。 对第一步查看的站点，分析其风格特征和结构类型。对第一步查看的站点，分析其风格特征和结构类型。对第一步查看的站点，分析其风格特征和结构类型。对第一步查看的站点，分析其风格特征和结构类型。 根据网站层次规划的原则规划一个介绍某种或某类根据网站层次规划的原则规划一个介绍某种或某类根据网站层次规划的原则规划一个介绍某种或某类根据网站层次规划的原则规划一个介绍某种或某类熟悉的东西的网站，并做流程、时间、进度计划。熟悉的东西的网站，并做流程、时间、进度计划。熟悉的东西的网站，并做流程、时间、进度计划。熟悉的东西的网站，并做流程、时间、进度计划。
