第二章 常见网站鉴赏与分析
第三讲 常见网站类型分析(2)
第三讲常见网站类型分析（2）【教学内容】∙商业网站分析∙个人网站分析【教学目的】∙掌握设计各类网站的基本原则和基本配色规则。
【教学重、难点】∙重点：网站风格如何表现难点：实际的运用【教学方式】讲授一、生物网站分析生物网页不同于一般的网站，由于其特殊的目的，所制作出来的网页具备的特性也会有所不同。
一般情况下，生物网站总的看起来比较清新、自然、色泽比较明朗。
由于大自然的美丽，网页的制作首先需要表现出来自然的一种神态。
其次要注意网站制作的目的。
有的网页是为了环境保护而做的宣传，有的则属于商业性网站或旅游性网站，比如某一家动物园或者植物园。
下面我们来分析一些设计较好的本类网页。
图3-3-1如图3-3-1，动物网站不能简单地将图片罗列，本例中很好的将动物图片及整个页面有机地结合在一起，画面简洁明快，使人看了感到思路清晰，而且分类清楚。
从色彩搭配、取色的绘画角度看，各部分过渡非常自然，能以有限的版面体现更大容量的信息。
图3-3-2如图3-2-2，这是个植物网站，这个页面的亮点在于植物图片和整个版面背景的搭配，和谐自然。
页面采用土黄色系配以植物的绿色，给人一种清新自然的感觉。
二.儿童类网站图3-3-3如图3-2-3，这个网页给人整体的感觉是可爱清晰，因为用了大幅的手绘图做素材，颜色采用绿色，给人以健康向上的感觉。
图3-3-4如图3-3-4，这也是个儿童类的网站，页面采用粉红色系，给人可爱的感觉，素菜选用了一张非常可爱的儿童照片，更把可爱的主题进一步阐释。
三.体育类网站图3-3-5如图3-3-5，这是一个滑雪专题网站，因为是专题网站，内容不会非常多，所以在首页上只是给出了一些简单的信息，真个页面以一幅滑雪场的图片作背景，将一个正在滑雪的人物素材放到页面右边，正好和背景结合起来，同时大幅的素材也正好把网站主题加以突出。
页面采用蓝白色，正是蓝天、雪花的颜色，符合主题的同时给人以清爽悠远的感觉，和前面人物素材产生对比，突出滑雪运动的动感。
精品网页设计欣赏及评析
精品网页设计欣赏及评析精品网页设计欣赏及评析1.商业清爽型国外现在较流行的风格，国内也有不少模范者，可是往往在色彩调配和细节方面有所欠缺。
图一图二特点：利用方框构图，简介明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明色彩方面多使用大面积浅灰度和白色，以衬托logo 和配图的色彩鲜艳，配以高明度小小色块（如导航处）。
因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo 和点缀出现，多用简洁明快的几何图形结合。
一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。
在大面积背景压住的情况下，图片明度越高越爽。
画面应该有一个主色调。
注意图二左下脚的logo，有意与背景色调相同，以免抢了视觉中心，这是很多人常犯的错误。
图三注意细节图案的使用，这是大多数设计者弱点所在，细直线条与箭头、方块、园点不要乱用，每个点的存在你都要有理由。
2. 商业门户型现在的商业门户网站在几乎都是三栏，上面是logo ＋banner 。
其实门户网站因为信息大，更新频繁，在设计时应该充分考虑可扩展性，我认为可以充分利用下拉特性，充分考虑左上位置的设计，主体争取结构明了简洁。
下面我们一起来看看几个门户网站的设计。
图四所示的这个网站是卡通网站，广告栏很大，但通过精心设计使之醒目而不凌乱。
图片统一使用斜角，统一又不呆板。
图五所示网站使用曲线与直线的结合，蓝灰色主色，画面沉静而不脏，这里的色彩难度很高，需要细心调试，色块分割，简单明了。
图六所示网站主题部分简之又简，在背景上做足了功夫，轻轻的灰度变化，是现在国际流行的风格，高雅，不花，充分烘托主体。
图四图五图六3. IT 企业实用模板图七图八图九图十4. 时尚企业网站模板图十一图十二5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。
美食业务主题网站，布局合理大方，整体设计“色香味”俱全，主题鲜明，功能齐全。
网站赏析
网站的赏析(6)(2006-08-19 09:51:33)五、延伸:接下来,同学们可以自由浏览一些其他的网站,把你认为较好的网站推荐给大家.(请学生互相介绍网站,并用传奇学生机系统播放学生演示)六、,总结下面我们来一起回顾一下这节课我们都学了哪些内容.1、首页在网站中起着关键的作用,它主要有四个共有的模块:他们人别是Logo,Banner,导航,还有版权和联系方式;2、首页的布局主要有三种样式,一种是"口"字型,一种是"厂"字型,还有一种是"POP"型;3、网页的在色彩的选择上也要为表现主题服务;4、网站的要有一个明确的主题,要以内容为核心,以形式为辅助,内容和形式共同为表现主题服务.好,有了以上的知识作为奠基,你就可以充分发挥你的想象,好好描绘一下你的网站的蓝图了。
对《网站赏析》教学设计讨论 SunnySmile 发表于 2005-10-28 2:48:00请大家看后留下意见！我会更加感谢你们的！高中信息技术课教案设计课题：网站赏析教学内容：信息技术第二册第二章第一节（泰山出版社P50—53）教学目标：1、通过对网站的赏析活动，进一步认识网站、首页，为网页制作做知识储备。
2、培养学生的合作学习能力、探究问题的兴趣与能力。
3、培养学生的鉴赏能力。
4、激发学生为祖国信息产业的发展作贡献的爱国情感。
教学重点：1、首页的地位和作用2、首页的功能模块3、网站的形式、内容与主题之间的关系教学难点：正确理解网站的形式、内容与主题之间的关系课时：1课时教学准备：硬件准备：微机室、投影软件准备：1、安装传奇学生机系统2、发放学生学习材料3、教学课件教学过程：一、激情：近年来，我国的信息产业飞速发展，人们的经济文化水平日益提高，越来越多的家庭拥有了个人电脑，网络也由昔日的谢玉堂前燕飞入了寻常百姓家。
足不出户，鼠标轻轻一点，你就可以浏览到世界各地的信息，就可以和世界各地的朋友们聊天，你还可以给世各地的朋友们发E-mail。
《网页赏析》课件
结论和要点
1 2 3 4 5 6 7
网页设计的重要性 互联网用户体验 色彩搭配与排版设计 响应式设计的优势 创意和原创性的追求 最佳实践和案例分析 结论和要点
最佳实践和案例分析
网页加载速度
通过优化图片和整理代码可以 大幅度提高网页加载速度。
1. 压缩图片大小 2. 减少HTTP请求 3. 使用缓存机制
用户友好的界面
基于用户行为和反馈优化网页 设计，提供更好的用户体验。
• 清晰的导航栏 • 易于操作的按钮 • 响应式设计
品牌一致性
在整个网站中保持品牌一致性， 使用统一的颜色和字体风格。
响应式设计可提高网站的搜索引擎排名，并增加网站流量和曝光率。
3 节省维护成本
通过一套代码管理多个版本，可以减少维护工作量和时间成本。
创意和原创性的追求
1
创意的力量
结合创意和技术，可以打造出突破传统的独特用户体验。
2
引领潮流
追求原创性和独特性，可以使网页设计在激烈的竞争中脱颖而出。
3
适度创新
不断探索新的设计趋势和技术，保持创新性，但也要注意用户习惯。
《网页精品赏析》PPT课 件
网页设计的重要性
互联网用户体验
用户至上
用户体验应始终放在设计的核心位置，以提供 无缝且愉悦的用户体验。
导航友好
清晰的导航设计可以让用户轻松快速地找Leabharlann 他 们需要的信息。界面简洁
清晰简洁的界面设计可提高用户的操作效率， 减少混淆和干扰。
速度优化
优化网站的加载速度可以提高用户留存率和整 体满意度。
色彩搭配与排版设计
色彩搭配
网站内容及分析
1、我们的优势Ａ－技术优势我们官网、官博，从技术，设计、布局、美工、稳定性上，都比我爱推门要好很多。
爱推门的官网，有点个人主页的性质，而且对页面的处理也谈不上美化，页面不紧凑，留白太多，形成“上多小少”的格局，从用户的体验上，我们要优于爱就推门网。
Ｂ－速度优势我们官网、官博的网页打开速度相当快，而据我个人的评测，爱就推门在晚上20:00-22:00的网速相当慢，加之其首页不够精简，需要加载的东西较多，影响了网页的反应速度和打开时间。
我们官博更新的效率，为每周5-6篇，以公司最新的动态为主，比较爱就推门，我们在即时消息的更新上极有优势。
C－规范优势我们官网、官博各栏目、频道、子项的内容都是连贯和有序的，统一和规范化的管理，内容实行的是严格的审核制，没有随意性的，爱就推门就缺乏一个系统性，页面间缺少内在的联系，给人较凌乱的感觉。
有些地方相当的离谱，甚至有ADMIN这样不规范的代码和文字显现，自毁形象。
如图2、我们的不足Ａ－群首效应不足爱就推门的运营者，很明显有强烈的工科的背景，所以，对于布局和结构比较熟练。
说实话，爱就推门某种意义上：有点技术论坛的味道。
对电子商务、当下流行的B2C等知识跟踪和分析很透彻，同时擅于打“CEO”牌，试图将其打造成为“传统玩具电子商务化”的业界领袖，让众民敬仰，膜拜。
这种风格，明显的与木玩的内敛、深厚的底蕴不相融，不过，还是很能吸引影球的。
比如：其有限的几篇动态文字报导中，基本都是公司的高层来执笔的。
类似于个人博客，但相当的具有感召力，是自己的真凭实感，由此流量和点击率都比较高。
爱就推门，强调的是个性，是自身价值观念的传播和输出。
这和其定位是一样的，毕竟他们目前是以加盟做为主旨，而直营店只有区区的一二家（也只是样本店）反思：我们目前遇到的困境，在于稿源的贫瘠，大家都很忙，忙于部门及自身的工作，很少有时间去进行自我的沉淀。
这个是值得我们警醒的。
希望从公司的高层开始，能坚持让自己每月、每周都写一些东西，零散的、心得的、生活的、团队的，都可以，体裁不限、字数不限，目的只有一个：就是给我们的潜在的客户和消费者，一个真正的、活生生的木玩！同时，希望公司的高层，也能适当的提高：曝光度。
网站鉴赏与设计
6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都 必须一样。
7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点， 可以使用。☆※○◇□△→（区位码里自己参看）等等。虽然很简单的一个 变化，却给人与众不同的感觉，(为什么我没有想到呢？)
网站鉴赏基础—风格与定位
定位 如何定位网站风格呢？我们可以分这样 几个步骤：
网站鉴赏基础—风格与定位
第一，确信风格是建立在有价值内容之上的。 一个网站有风格而没有内容，就好比绣花枕头 一包草，好比一个性格傲慢但却目不识丁的人。 你首先必须保证内容的质量和价值性。这是最 基本的，无须置疑。 第二，你需要彻底搞清楚自己希望站点给人的 印象是什么。可以从这几方面来理清思路：
网页设计实战
当网站的结构、形象等都确定好了，就 该设计主页了。主页的设计首先要确定它 所提供的功能，比如说网站标志、导航条、 横幅广告、更新列表、栏目介绍、搜索、友 情链接、版权信息等。要做好网页布局，设 计好各要素的摆放位置，突出重点，平衡协 调。然后再根据网页制作的技巧对整个布 局精雕细琢，以达到更好的效果。其他页面 的设计就没有主页那么复杂了。主要是和 主页风格保持一致，页面设计美观，要有返 回主页的链接等。
“匡”字形布局 华军软件园：/
“三”字形布局
/ “川”字形布局
http://www.diocean.co.kr/ 封面型布局
/ Flash布局
http://www.evtm.co.kr/ 标题文本型布局
8.用自己设计的花边，线条，点 9.展示你网站的荣誉和成功作品。 10.告诉网友关于你的真实的故事和想法。 风格的形成不是一次定位的
网站内容分析报告.doc
网站内容分析报告一、搜索引擎类网站（百度、谷歌、有道、即刻）1、网站内容特色分析：百度logo是一个熊掌，有猎手的意思，就是表达用户在百度里能够找到有用的与自己需要的东西。
百度首页的搜索栏内容很多，在搜索栏下还附有时事热点、导航、新鲜事的内容推荐，布局合理，内容上给人感觉很全面。
谷歌的标志就是简单的英文组合，他的页面是谷歌搜索和手气不错两个标志显得简约大方，在栏目下方给人们两种选择：中文/英语，方便不同语言的人查找内容。
有道的logo就是将有道拼音化，方便人们记忆与查找；有道的内容格局是:网页、图片、热闻、购物、音乐、视频、词典、翻译，给用户一种一目了然的感觉。
即刻的logo是用不同几何图形组成的即刻拼音，尖锐的棱角给人一种锋利快速的感觉也许这就是即刻所要表达的含义：快速与尖锐。
即刻的网页内容只是新闻网页图片和视频，虽然给用户选择面不多但基本满足大众的需求。
2、网站的优劣势比较：百度的知名度很高，在中国几乎没有人不知道它的存在。
谷歌虽然在国际上有很高知名度但在中国这个市场是远比不过百度的威力。
谷歌的强势在于具有强大的搜索功能，宣称在谷歌里没有搜不到的信息，因为有这种大量的信息量优势，使得它成为在中国与百度相抗衡的对手。
而相比较后发现有道与即刻虽然也在朝这些方面努力但最终在信息量与知名度上不具有优势。
3、网站的推广工具：百度和谷歌的知名度都很高，早期推广中都是通过对自己的强大信息系统宣传，使用户方便获取信息而逐渐建立起自己的品牌。
随后，百度与谷歌也开始通过页面广告形式让更多人知道自己。
搜索引擎一般是通过与各大网站合作，为网站提供搜索功能来推广自己，同时建立属于自己的网页。
4、推广工具比较：四个搜索引擎的推广手段都差不多，因为百度与谷歌的较高知名度使得即刻和有道的推广显得很困难，尤其在与各大网站合作的方面优势太小。
5、结论：各方面比较后，我还是觉得百度在搜索类中比较突出，它知名度高，操作也简单，内容全面，谷歌当然也不错只是我个人觉得百度更加贴近大众生活。
网站赏析
北京市通州区第六中学 云 雪 连
网页设计的几要素
●网页的基本元素：
文本、图片、超级链接、动画、音频、视频、表单
●网页的版面布局：
页眉（网站标识 导航）、主要内容、页脚
●
网站标识、导航等
主要内容
基本信息、联系方式、版权声明等
拐角型
网站标识、导航等
链接
导 航 链 接
主要内容
基本信息、联系方式、版权声明
标题正文型
网站标识、导航等
正文
左右框架型
网站标识、导航等
导 航 链 导 接 航 链 接
正文
封面型
flash型
Flash型
分析下列网页的结构布局类型
1./ 2./ 3./ 4./ 5./liuqishi 6./ 7./ 8./home/ 9./ 10./ 11./rss/start_reg1.rs 12/s/book/0/15/15670/1.shtml
●网页配色中最忌讳的:
1.不要将所有的颜色都用到, 尽量控制在三种颜色内。
2.背景和前文对比尽量要大 (绝对不要用花纹繁复的图 案作背景),以便突出主题.
●色彩搭配的技巧：
• 网站的主色调应首先确定下来。主色调需根据网站的对象来确定 1 、 2 、 3、 • 网站标识需突出，使浏览者能够在众多的网页元素中一眼就看到 它。标题可以使用网页内容的反色或与网页内容差异较大的字体 和颜色。2
• 导航栏所在区域，可把菜单背景颜色设置暗一些，然后依靠较亮 的颜色、比较强烈的图形元素或独特的字体等将网页内容和菜单 区分开来。1、2
• 在同一页面中，要在两种截然不同的色调之间过渡，可搭配灰、 白或黑色。1、 • 网页中的文字颜色和背景颜色对比度要高，一般是白底黑字，如 果是黑底，可用较淡的颜色来搭配。1
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
深，整体效果类似文字"厂",所以我们称之为"厂"形布局。 这是网页设计中用的最广范的一种布局方式。
“POP”型： POP引自广告术语，就是指页面布局象一张
宣传海报，以一张精美图片作为页面的设计中心 。
主题色与配色
网页在色彩的选择上要为表现主题服务。
一般情况下，要突出显示或强调的内容， 均采用颜色较深的色调；而不必突出显示或 强调的内容，则采用浅色的色调。
请欣赏以下三个网站：
1、上海仙霞高级中学网站（网址：）
2、网站（网址：）
小组内合作，讨论分析以下三个问题：
1、这些网站的首页的布局各有什么特点？
2、各网站的主题色和配色有什么特点？
3、网站的形式、内容与主题之间有什么关系呢？
浏 览
信息技术课
常见网站鉴赏与分析
基本概念
1、网站的主题
网站的主题是指网站向大众或特 定的人群传达的主要内容或建立网站 的意图。
2、网站的首页
网站的首页是指你打开一个网站 后看到的第一页。
分别登陆以下站点：
A、新浪网站（网址：） B、铜仁信息港 (网址：)
小组讨论、分析以下三个问题：
1、每个网模块？
网站的主题
1、新浪网站的主题：
新浪网是一个综合型的网站，主要向浏览者提供包 含国内外新闻事件以及各方面的内容（例如：财经、科 技、教育、体育等方面）在内的综合信息。
首页的地位与作用 首页是浏览者打开一个网站后 第一眼看到的网页，网站能不能吸 引浏览者，在很大程度上取决于首 页做得怎么样。 问题：请你用一个最恰当的词语来 概括一下首页的地位与作用？
首页的功能模块
首页一般有四个共有的模块：
1) 徽标（logo）和网站的名称 一般位于左上角，是一个形象化的标志，其作用类似 于商品的商标。 2) 首页大标题（banner） 一般放网站主题词或图片，商业性的网站放置广告条。 3)导航栏 一般放置在网页的顶部，只有有了清楚、明晰的导航， 才能让浏览者知道自己身处网站的什么位置。 4)版权和联系方式 一般放在网页的底部，主要功能是版权声明和听取浏 览者的意见或建议。
5、网站要有一个明确的主题，要以内容为核心，以 形式为辅助，内容和形式共同为表现主题服务。
感
想
通过对《常见网站鉴赏与分析》 这节内容的学习，结合这些知识，请 同学们谈谈这对我们以后的学习、工 作和生活有何积极意义？
课后练习 请同学们在课后上网的时候， 分别浏览几个网站，巩固一下我们 今天所学的内容。
布局特点
首页的布局主要有三种样式：
“口”字 这是一个象形的说法，就是页面一般上下各 有一个广告条，左（右）面是主菜单（内容列表）， 型：
右（左）面放友情连接等，中间是主要内容。整体效 果类似文字“口”。
“厂”字 指页面顶部为横条网站标志+广告条，下方左 面为主菜单，右面显示内容的布局，因为菜单条背景较 型：
内容、形式与主题
网站要有一个明确的主题，要
以内容为核心， 以形式为辅助， 内容和形式共同为表现主题服务。
总
结
1、网站的主题和首页的概念；
2、首页在网站中起着关键的作用，它主要有四个共 有的模块：他们分别是Logo，Banner，导航，还有版 权和联系方式；
3 、首页的布局主要有三种样式，一种是“口”字型， 一种是“厂”字型，一种是“POP”型 。 4、网页在色彩的选择上也要为表现主题服务；