项目一主页欣赏及页面分析吕宇飞版本Word格式.docx
《项目一主页欣赏及页面分析吕宇飞版本Word格式.docx》由会员分享，可在线阅读，更多相关《项目一主页欣赏及页面分析吕宇飞版本Word格式.docx（39页珍藏版）》请在冰豆网上搜索。
5、色彩运用
6、网页导航
7、视听元素
从资源图片上的网页效果分析和讨论网页的主题。
图1-2-1：
儿童娱乐天地
图1-2-2：
高尔夫球运动
图1-2-3：
精美咖啡文化
图1-2-4：
室内装饰设计
教师点评分析：
1、界面中随手涂丫的边框效果和云彩的简笔画非常贴近儿童的年龄特征。
2、卡通图片的运用及别致的登录区设计充分体现儿童喜好。
3、草绿渐变色的运用及花草的点缀显得回归自然，轻松愉悦。
1、界面上半部分中的高尔夫球图片和巧妙的菜单设计直奔主题。
2、运动场景图片呈现运动动感。
3、色彩选择让浏览者仿佛亲临球场。
1、咖啡杯及咖啡色的图片处理呈现主题。
2、文字和咖啡原料图片的错落有致展现文化色彩。
1、三幅精美图片的共性无言中向浏览者传达着室内装饰信号。
2、简洁有致的界面设计吸引着浏览者步入居室。
背景色调更显高贵典雅，从侧面映衬装饰水准。
设计时要注意主要原则之一：
主题鲜明。
如何做好主题的选择与定位
设计网页，主题的选择与定位是首先遇到的问题。
每个大类都可以继续细分，主题的选择也要服从设计网页所应有的实效性。
主题的选择应注意以下几点：
1、主题定位小，内容精。
网络的最大特点和优势就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。
如果你想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，比较肤浅，而您不可能有太多的精力去维护它。
2、主题贴近生活，题材最好是自己擅长或者喜爱的内容。
兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。
例如对游戏感兴趣，就可以建立一个游戏网站；
喜欢音乐，就可以创建一个音乐天地；
喜欢足球明星，则可以建立明星档案网等。
3、挖掘有特色的主题。
过于普通人人皆知的题材对浏览者缺乏吸引力。
通过学习，了解主题的重要性、掌握选择和设计主题的一些方法。
1、网页要鲜明地突出主题，具体还可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到，试思考程序员交流网站：
的表现主题。
2、自己选择一设计主题，思考从界面素材上如何表现主题。
以文字呈现为主，也可以自选一张网页页面进行说明。
组织学生思考与回答。
可以由学生自行进行点评
教师可以准备一些主题表现不理想的页面作为反例进行分析
1．3网站名称和CI形象
四．教学目标
掌握设计网站名称和网站CI形象的要点、标志（logo）设计常用的三种规格和Banner广告设计常用规格。
设计网站名称和网站CI形象的方法，并培养相应的审美能力。
五．教学分析与准备
网站名称和网站CI形象的设计要点
网站名称和网站CI形象的表现与审美
六．学习过程
网站名称（建议教学5分钟）
CI形象（建议教学5分钟）
学生利用因特网收集一些网站名称和网站CI（建议教学15分钟）
教师讲解需要注意的要点（建议教学8分钟）
观察与分析资源包提供的一系列网站名称。
网站名称要点：
1、网站名称要合法，合理，合情。
2、网站名称要简明扼要，容易记忆。
3、网站名称要有特色。
观察与分析资源包提供的CI形象。
创建网站的CI形象，首要是标志（logo）的设计。
标志（logo）往往能反映出网页的相关信息，便于网页浏览者识别，比单纯的文字形式更引人注意。
标志（logo）的设计可以是中文，英文字母，可以是符号，图案，甚至是动物或者人物等。
例如图1-3-14中的新浪网的标志，用字母sina+眼睛作为标志。
如图1-3-2到图1-3-14可以看出最常用和最简单的方式是用自己网站的英文名称作标志。
采用不同的字体，字母的变形，字母的组合可以很容易制作好自己的标志。
而图1-3-3标志图案是奔驰汽车的方向盘标志，这种以本专业为代表的物品作品例子还有图1-3-11展示中国银行的铜板标志等。
有些网站有代表性的人物，动物，花草，则可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。
在色彩处理方面以上标志均采用“标准色彩”，色彩对比度强，清晰明了。
图1-3-1为SONY公司网页，左上角的SONY标志则示范了标志一般在网页中所处的位置。
图1-3-15为太平洋电脑网中的一个banner条，示范了网站内容的宣传标语图片设计。
一般可以称之为Banner广告。
评议最好的网站名称和网站CI
网站CI形象主要包括标志、色彩、字体和标语，可以帮助提升网站整体形象。
1、标志（logo）设计
设计工具：
使用图像处理软件和动画制作软件即可完成标志的设计
国际标准规范：
为了便于Internet上的信息传播，关于Web的标志（logo）设计，目前已经形成了一系列国际标准。
常用的三种规格分别是：
（1）88X31这是Internet上最普遍的标志（logo）标准。
（2）120X60这种规格一般用于一般大小的标志（logo）。
（3）120X90这种规格一般用于大型的标志（logo）。
2、色彩
一般来说，适合于网页标准色的颜色有：
蓝色，黄/橙色，黑/灰/白色三大系列色。
例如IBM的深蓝色、康柏的红色、windows视窗标志上的红蓝黄绿色块。
一个网站的标准色彩一般不超过3种。
标准色彩一般用于网站的标志，标题，主菜单和主色块，形成整体统一的感觉，体现网站形象和延伸内涵。
其它色彩则只是作为点缀和衬托。
3、字体
标准字体是指用于标志，标题，主菜单的特有字体。
字体的选择：
一般网页默认的字体是宋体。
为了体现站点的特有风格，根据自己网站所表达的内涵可以选择和整体形象更贴切的其它字体。
例如为了体现专业而使用粗仿宋体、体现设计精美而使用广告体、体现亲切随意则使用手写体等。
实现：
目前常见的中文字体有二三十种，常见的英文字体有近百种，还有许多专用英文艺术字体。
可以通过Internet下载字体文件，一般安装字体只需要将该字体文件拷贝到系统目录中的字体文件夹中即可使用。
但要注意由于浏览者的工作环境不同，很可能他的计算机中没有安装设计时所需要的特殊字体，所以显示效果大打折扣。
因此为了使网页具有较强的兼容性，使用非默认字体设计时就需要考虑使用图片的形式。
4、标语
也可以把它称为Banner广告设计，它是作为网页内容宣传的最主要方式，大多数为GIF图形。
使用图像处理软件可以制作静态GIF。
制作动态GIF，可以安装Photoshop的动画插件，直接在Photoshop文件上生产动画。
或使用AdobeImageReady和MacromediaFireworks等制作软件。
设计时注意以下几点：
（1）将图像模式设为RGB模式，防止无法直接导出GIF格式的文件。
（2）注意度量单位为像素（Pixels）。
（3）常用规格为：
480X60、150X68、88X31
（4）为避免因个体浏览环境不同而出现的色彩差异，设计时尽量从Windows调色板预设颜色中选择安全色。
1、设计网站名称的要点。
2、网站CI形象主要包括标志、色彩、字体和标语
3、标志（logo）设计常用的三种规格分别是：
88X31、120X60、120X90
4、Banner广告设计常用规格为：
1、标志设计和Banner广告设计常用的规格分别是什么？
2、为自己选定的主题设计网站名称
3、使用AdobeImageReady设计一个符合自己网页主题的标志。
可以小组讨论，可以由学生自行进行点评
教师可以准备一些反例进行分析
1．4设计风格
七．教学目标
了解网页设计中形式与内容统一的重要性，掌握体现设计风格的方法。
理解体现设计风格的要点，并培养相应的审美能力。
八．教学分析与准备
体现设计风格的方法
设计风格的表现与审美
九．学习过程
教师点评分析（建议教学15分钟）
教师讲解需要注意的要点（建议教学23分钟）
和布置作业（建议教学2分钟）
观察与分析资源包提供的一系列不同风格网页的浏览。
网页风格的形成主要依赖于网页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。
是构成内容诸要素的内部结构或内容的外部表现，是形式的重要表现方式之一。
而内容则是指主题、形象、题材等构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；
一个优秀的设计必定是形式对内容的完美表现。
因此风格设计时要注意网页设计主要原则之二：
形式与内容统一。
根据主题的内容决定网页风格。
由于不同的设计领域和设计者差异，网页风格设计不尽相同。
例如政府部门的网页风格一般显得比较严肃庄重；
文化教育的网页风格倾向高雅大方；
娱乐行业的风格设计比较轻松活泼；
商务网页则贴近民俗，喜闻乐见，以功能性和理性见长。
风格设计中过于强调设计者的个性展示，或者只求内容而缺乏艺术表现，网页设计都会变得空洞无力。
同时风格设计中要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。
那样得到的效果可能会适得其反。
因为只有形式与内容的完美统一，才能体现出网页设计独具的分量和特有的价值。
观察图例中的网页效果，其中：
图1-4-1（软件公司\index.html）为公司形象和产品服务推广的企业网页，其风格设计就显得简洁、实用、追求功能上的严谨。
这与图1-4-2（动漫地带\index.html）轻松活泼的设计风格形成鲜明对比。
活泼的设计风格往往应用于儿童网页和一些文体娱乐网页设计中。
图1-4-3（女性网页\index.html）和图1-4-4（视觉设计工作室\index.html）用细线条来分割，用色块来产生空间力度，在增加神秘感的同时表现流行时尚，这对主题的体现无形中起了很好的衬托效果。
图1-4-5（一笑家园\index.htm）的小桥流水、诗情画意为点缀家园更添古朴风情，充分表现了特有的设计风格。
而图1-4-6（磊富艺术\index.htm）则采用装饰化、流行化的风格，通过运用色调等手段体现古典而不俗的装饰文化。
图1-4-7（个人笔记本\index.htm）和图1-4-8（闲雅斋\index.htm）打破常规，为浏览者创设了虚拟的电脑屏幕空间。
在功能元素的布置上却遵循了人们的操作习惯，在功能上使浏览者更加方便。
这种把握风格的独特性的同时兼顾到常规习惯的设计非常值得借鉴。
图1-4-9（温馨的家\index.htm）显得简洁而整齐属于较为普通的设计风格。
而图1-4-10（memo\default.htm）粗看非常凌乱，但贴近生活习惯，也容易被浏览者所接受。
这种设计风格因其追求新颖和强调个性特征而在个人网页设计上较为成功。
图1-4-11（吉日小居个人主页\index.htm）和图1-4-12（思维创意空间\index.htm）则超越现实，以幻想空间来表达意愿。
这样的设计风格使得网页环境往往显得特别优美，在体现一些倾向思维类主题的时候反而给浏览者超凡脱俗的感觉。
图1-4-13（简单生活\index.htm）和图1-4-14（爱情主页\index.htm）则采用更简洁的方式处理页面，去掉一些纷繁复杂的东西来突出所要表达的主题份量。
这种设计风格在网页构成元素的处理上显得有些苛刻。
在页面的布局上，采用自己独特的方式来约束网页中的应用元素，从而强化主题意境的呈现。
在需要表达的主题思想较为单一，而且特征性强容易体现的一些网页的风格设计中使用。
图1-4-15（音乐歌曲\index.html）和图1-4-16（游戏玩家\index.html）则更倾向于功能性表达的设计风格。
浏览者几乎通过网页页面上的任何一个元素都可以感知网页主题，并能通过页面特征非常容易涉入其中。
这种设计风格的网页不仅主题专一、内容有很强的专业性，而且在页面元素的设计上能给视觉极大的冲击力。
尽管专业性强，但是设计者往往会通过网页的外表，内容，文字，交流展示风格设计中包含的人性特点。
有些显得温文儒雅；
有些则执著热情或活泼易变；
甚至是无拘无束、放任不羁。
当然风格往往不是以很单纯的一种方式反映出来，有时候采用多种形式相互结合，呈现出丰富多彩的表达方式。
具体到网页设计，就要求设计者运用自己所拥有的各种方法和资源，包括所拥有的审美的素质、应用软件的能力、以及感受生活的敏锐的觉察力，来建立起自己独特的设计形式、独特的作风。
换句话说设计者也应该有自己的风格。
在当前网页设计流行趋势中，以下四类值得关注。
1、简约风格
2、简洁代码
3、大照片背景
4、无限滚动
一、明确风格和主题、内容的一致性。
二、思考希望网站给浏览者的印象。
（以下仅仅作为参考）
1、用一句话来描述网站点。
参考：
有创意、专业、有（技术）实力、有美感、有冲击力
2、网站可以联想到的色彩。
热情的红色、幻想的天蓝色、聪明的金黄色
3、网站可以联想到的画面。
一份早报、一辆法拉利跑车、人群拥挤的广场、杂货店
4、风格具有人性化，网站所拥有的个性。
思想成熟的中年人、狂野奔放的牛仔、自信憨厚的创业者
5、从设计者角度，希望网站给浏览者的印象。
敬业、认真投入、有深度、负责、纯真、直爽、淑女
6、用一种动物来形容网站。
雄鹰（目光锐利）、狮子（自信和威信）、兔子（聪明敏感）、猫（神秘高贵）
7、与其它网站的不同之处。
可以信赖、信息最快、交流方便
8、浏览者和你交流合作的感受。
参考：
师生、同事、朋友、长幼
三、网站的整体创意设计
创意思考的途径最常用的是联想，以下是网站创意的25种联想线索：
1、把它颠倒2、把它缩小3、把颜色换一下4、使它更长
5.、使它闪动6、把它放进音乐里7、结合文字音乐图画8、使它成为年轻的
9、使它重复10、使它变成立体11、参加竞赛12、参加打赌
13、变更一部分14、分裂它15、使它罗曼蒂克16、使它速度加快
17、增加香味18、使它看起来流行19、使它对称20、将它向儿童诉求
21、价格更低22、给它起个绰号23、把它打包24、免费提供
25、以上各项延伸组合
-------------（摘自樊志育《广告制作》）
四、明确网站印象后建立和加强这种印象。
找出最能体现网站风格的页面元素，作为网站的特色加以强化。
以下是一些参考方法：
1、强化标志（logo）于每个页面。
2、突出标准色彩。
文字的链接色彩、图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩。
3、突出标准字体。
在关键的标题、菜单、图片里使用统一的标准字体。
4、设计宣传标语，制作醒目banner。
5、语言中统一的语气和人称。
6、统一的图片处理效果。
例如阴影效果的方向、厚度、模糊度都必须一样。
7、创造一个特有、与众不同的符号或图标。
比如在一句链接前的一个点，可以使用,.。
☆※○◇□△→（参看区位码）等。
8、用自己设计的花边、线条和点。
五、网站整体风格的统一
1、网页的风格设计有哪些要点？
2、为自己选定的网站主题确定设计风格。
可以组织学生自行浏览。
部分组织学生思考与回答。
其中二、三部分可以设计一些问题给予学生思考或者让学生回答
1．5版式设计
一十．教学目标
了解网页设计中各种版式设计形式。
能够进行页面整体的版式设计，并培养相应的审美能力。
一十一．教学分析与准备
掌握各种版式设计形式
如何进行页面整体的版式设计和布局
一十二．学习过程
教师点评分析（建议教学10分钟）
教师讲解要点，同时让学生自行进行版式布局设计（建议教学15分钟）
课堂小结（建议教学2分钟）
布置作业（建议教学3分钟）
观察与分析资源包提供的一系列不同布局网页的浏览。
常用的几种布局格式：
"
T"
结构、"
口"
型、对比型、"
三"
型、POP布局
观察与分析资源包提供的一系列不同版式网页的浏览。
可以借鉴广告设计中版式设计的一些思考方法。
1、正常平衡---亦称"
匀称"
。
多指左右、上下对照形式，主要强调秩序，能达到安定、诚实、信赖的效果。
2、异常平衡---即非对照形式，但也要平衡和韵律，此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其它网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。
图片解说的内容，可以传达给浏览者的更多的心理因素。
关注手机网站页面。
操作步骤为：
1、草案
2、粗略布局
3、定案
1、网页设计主要原则之三：
整体原则。
2、常用的几种布局格式：
型结构、"
型结构、对比型结构和POP布局。
3、版式设计追求页面整体和谐，应兼顾的美学原则有连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整等。
1、了解常用的几种布局格式中"
型结构均有多种演变和组合格局，例如：
（1）“国”字型：
也可以称为“同”字型，常见于一些大型网站。
（2）拐角型：
（3）标题正文型：
应用于一些文章页面或注册页面
（4）框架型：
其中左右框架型是一种左右为分别两页的框架结构，一般左面为导航链接，右面为正文。
常见于一些大型论坛和一些企业网站；
上下框架型则是上下分为两页的框架；
综合框架型为上述两种类型的组合，是相对复杂的一种框架结构，较为常见的类似于“拐角型”的布局结构。
2、为自己选定的网站主题绘制布局草图。
或者给出已经设计好的主页，要求学生绘制其草案
1．6色彩运用
一十三．教学目标
了解色彩基础知识和常用的配色方案，掌握彩色属性、色彩的三原色和网络安全色。
能够进行配色方案的设计，并培养相应的审美能力。
一十四．教学分析与准备
色彩基础知识和常用的配色的掌握
如何进行页面整体的配色设计
一十五．学习过程
色彩基础知识讲解（建议教学5分钟）
教师点评分析网网页，并结合色彩知识点进行讲解（建议教学12分钟）
教师要点分析（建议教学5分钟）
网络安全色（建议教学4分钟）
网页配色软件的使用示范和讲解（建议教学9分钟）
观察与分析资源包提供的一系列网页的浏览。
１、色彩基本概念
任何一种彩色具有三个属性：
（1）色相（Hue）：
（2）饱和度（Saturation）：
（3）明度：
非彩色只有明度特征，没有色相和饱和度的区别。
２、色彩的三原色
色彩的三原色是指红、绿、蓝。
通过调整这三个基色RGB（红、绿、蓝）就可以调出其它的颜色。
3、色彩的感觉。
不同的颜色会给浏览者不同的心理感受。
红色——一种激奋色彩，代表热情、奔放、喜悦、庆典。
刺激效果使人产生冲动、愤怒、热情和活力的感觉。
绿色——介于冷暖两种色彩的中间，代表植物，富有生命和生机，从而显得和睦、宁静、健康。
和金黄、淡白搭配，可以产生优雅、舒适的气氛。
橙色——代表欢快，甜美与收获，是一种激奋色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。
黄色——代表高贵、富有，它的明度最高，具有快乐、希望、智慧和轻快的个性。
蓝色——代表天空、清爽，是最能体现凉爽、清新、专业的色彩。
和白色混合体现柔顺、淡雅和浪漫的气氛。
白色——代表纯洁、简单，具有洁白、明快、纯真和清洁的感受。
黑色——代表严肃、夜晚、沉着，具有深沉、神秘、寂静、悲哀和压抑的感受。
灰色——代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。
4、常用的配色方案：
（1）暖色调。
即红色、橙色、黄色、赭色等色彩的搭配。
这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。
（2）冷色调。
即青色、绿色、紫色等色彩的搭配。
这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
（3）相近色：
将色彩按"
红->
黄->
绿->
蓝->
红"
依次过度渐变可以得到一个色彩环。
即红、橙、橙黄、黄、黄绿、绿、青绿、蓝绿、蓝、蓝紫、紫、紫红、红。
（如下图24色的色彩环）
图1-6-15
色彩环中相邻的三种颜色即相近色。
升级会员 