《Web网站设计与管理基础杨威课件》由会员分享，可在线阅读，更多相关《Web网站设计与管理基础杨威课件（72页珍藏版）》请在金锄头文库上搜索。
1、局域网组建、管理与维护,杨 威 山西师范大学网络信息中心,电子工业出版社,新编计算机类本科规划教材,（第2版）,第4章 Web网站设计与管理基础,问题思考,Web主页设计原则有哪些？ Web网站设计包括那些方面？,学习目标 （1）理解主页制作原则，熟悉主页框架组织、造型组合，基本掌握主页配色设计，包括色彩体系、色彩三要素、色彩对比和调和。 （2）理解主页视觉效果，熟悉面向公众的不同行业门户网站主页风格设计。 （3）基本掌握 Web 网站发布，以及 Web 网站测试与维护的方法。,第4章 Web网站设计与管理基础,重点知识： 网页设计原则 主页风格设计 Web网站测试 Web网站维护 难点知识：
2、 色彩体系 色彩对比与调和,第4章 Web网站设计与管理基础,网站策划 网站配色设计 主页风格设计 Web网站发布 Web网站测试 Web网站维护,第4章 Web网站设计与管理基础,4.1 网站策划,4.1.1 网站目标 4.1.2 网页设计原则 4.1.3 网站框架组织 4.1.4 网页造型 4.1.5 网页可访问性,4.1.1 网站目标,网站目标 为了在众多同类网站中脱颖而出，需要明确网站的主题，针对性要强，题材要新颖。对于企业宣传、医院、银行、学校等不同性质的网站，弄清网站的目标，确定网站所应达到的预期目标。之后才可以恰当的设计网页的风格，并确定网站的功能。采用相关技术和配置的服务器、数
3、据库。,1. 形式与内容的统一 形式构成内容 内容决定形式,4.1.2 网页设计原则,2. 强化主题 大多数人在短暂记录中只能同时把握47独立的信息，过多的信息会令人产生记忆上的模糊或淡忘。视觉表现要突出主题，吸引浏览者的注意力，切忌内容过于杂乱。,4.1.2 网页设计原则,3. 整体与变化的统一 强调网站的整体性，在内容和形式上和谐统一，但又不能太过死板，否则不能唤起用户的浏览欲望。还要有一定的变化层次，但又不能过于杂乱。,4.1.2 网页设计原则,4. 技术与设计的协调,4.1.2 网页设计原则,初学时笨手笨脚,之后炫耀技术,最后沉淀,1. 链状结构,4.1.3 网站框架组织,上一页,下一
4、页,2. 树状结构,4.1.3 网站框架组织,3. 网状结构,4.1.3 网站框架组织,4. 大学网站内容的组织框架,4.1.3 网站框架组织,1. T型结构,4.1.4 网页造型,2. “三”字型结构,4.1.4 网页造型,3. “口”字型结构,4.1.4 网页造型,4. 网格结构,4.1.4 网页造型,5. Pop结构,4.1.4 网页造型,1. 为视觉与听觉内容提供等义的替代 所有呈现给网民的内容，在视觉、听觉上都必须提供功能、语义上的替代。比如当网页中的图片、电影、声音、Flash等信息不能正常呈现时，最好提供相关的文字内容信息。,4.1.5 网页可访问性,2. 不要只依靠色彩来提供信
5、息 为使一些使用黑白显示器的用户、或者有些许色盲的用户也能正常访问网页，适当增加网页色彩的对比度，布局干净利落。前景、背景对比适当，既不过分刺激，又要有一定的对比效果。,4.1.5 网页可访问性,3. 恰当地使用HTML和CSS 超文本标识语言HTML是有语义的。如H1代表标题一，Cite代表引用，A代表超级链接，P代表段落文字。标记多半会有自己的属性，如A的href属性指定超级链接的目的页 谷歌搜索 可以用CSS（样式表语言）控制布局和外观表现。,4.1.5 网页可访问性,4. 讲明使用何种语言 - - 山西师范大学 - - 2011版 - - SXNU . . ,4.1.5 网页可访问性,
6、5. 创建干净利落的表格 山西师范大学某班级学生成绩表 姓名 英语 计算机 排名 均分 小华 95 97 1 96 小白 90 88 2 89 班级均分 92.5 ,4.1.5 网页可访问性,5. 创建干净利落的表格,4.1.5 网页可访问性,6. 确保页面能够在目前的先进技术下良好地呈现,4.1.5 网页可访问性,Flash,CSS,HTML,框架,JS,其它技术,4.1.5 网页可访问性,7. 提供清晰的内容导航条 在页面的明显位置提供清晰一致的导航条，如当前位置、导航条、菜单、站点地图等，这样浏览者在网站上可以快速而精确地找到所需要的信息。,4.2 网站配色设计,4.2.1 色彩体系 4
7、.2.2 色彩三要素 4.2.3 色彩对比与调和,三原色、色谱 三原色：红（Red）、绿（Green）、蓝（Blue）,4.2.1 色彩体系,色轮,色谱,间色、复色,4.2.1 色彩体系,1. 色相,4.2.2 色彩三要素,红色，最能激起人的生理反应，容易让人心跳加快。在光谱中，红光波长最长，在雾气中穿透性最好。绿色分布在光谱中央，明度不高，给人一种平静温和的感觉。白色是全部色彩的总和，当所有颜色照在物体表面时，它呈现的不是五颜六色，而是纯洁的白色。在网页设计中，通常会留一片空白区域，俗称留白，这样的布局给人感觉有秩序、有韵律。,2. 明度,4.2.2 色彩三要素,3. 饱和度,4.2.2 色
8、彩三要素,1. 色相对比,4.2.3 色彩对比与调和,色相对比是指不同种类的颜色因为色相的不同而形成的差异对比。两种不同色相的颜色对比，如果颜色越接近，对比效果就越柔和。在色轮上，直径两端的颜色，其色相对比效果就比较强烈，也更醒目，因此一些户外广告牌，其文字与背景就采用这种色相对比效果。,2. 明度对比,4.2.3 色彩对比与调和,明度对比是指两种颜色在明度上的差异所形成的对比效果。当同色相的两种不同明度的颜色，如深绿、淡绿搭配在一起的时候，便形成一种明度对比。而黑、白、灰三种颜色搭配在一起的时候，通常就是明度对比。,3. 纯度对比,4.2.3 色彩对比与调和,未经调色的原色的纯度是最高的，因
9、此称为高纯度颜色。间色的纯度较原色差一些，一般称为中纯度颜色。色轮上其他区域的颜色属于低纯度的色彩。,4. 冷暖对比,4.2.3 色彩对比与调和,不同色彩有着不同的冷暖感觉。像红、橙、黄这样的色彩能引起人们血压升高的颜色，将它们归入暖色系。而蓝、绿、紫这样能引起血压降低的色彩，将它们归入冷色系。,5. 纯度对比,4.2.3 色彩对比与调和,两种高纯度的颜色搭配在一起，在色轮上的距离越远，对比就越强烈，给人的视觉冲击力也就越大。,6. 面积对比,4.2.3 色彩对比与调和,两种颜色搭配的时候，谁占的面积大，谁就决定这幅画面的整体风格。其他面积小的颜色则起着调和、柔化、装饰的作用。面积的多少比例不
10、同，造成的调和效果也不尽相同。面积大小越接近，对比越强烈。,4.3 主页风格设计,4.3.1 资讯主页 4.3.2 娱乐主页 4.3.3 企业主页 4.3.4 教育主页 4.3.5 政府主页 4.3.6 商务主页,4.3.1 资讯主页,在页面的明显位置提供清晰一致的导航条，如当前位置、导航条、菜单、站点地图等，这样浏览者在网站上可以快速而精确地找到所需要的信息。这类网页适合在1024768或者更高分辨率的显示设备上浏览，通常拖动垂直滚动条滚屏要在35屏才可以完整地浏览，基本上不需要拖动水平滚动条。最顶端有一行水平快捷工具条，通常包含会员注册、邮箱登录、设为首页等链接。紧接着下方宽矩形的区域，在
11、左侧小块区域中放置网站的Logo图片，右侧则罗列出网站的大多数栏目，整齐而有序地水平排列，需要突出的栏目可以通过变换粗体、颜色等办法，来引起浏览者的注意。通常采用 “三”字型框架布局，整个网页从上到下排列整齐，通过鼠标滑过特效，将一些相似的栏目重叠在一个区域位置，页面显得有序、充实、饱满。网页底端提供站点地图、帮助、联系方式及版权信息。通常对于一些宽屏显示器来说，还会在网页左右两侧的空白区域内悬浮红色醒目的对联式的图片广告，而这类广告的图片边缘显示一个“关闭”按钮，单击可以关闭该广告，以免影响使用小屏幕显示器的用户。,4.3.1 资讯主页,网易主页 ,4.3.2 娱乐主页,娱乐类网站主要针对青
12、少年，近几年也在向成人靠拢。为消费群体提供娱乐、游戏、音乐、影视等方面的信息或功能，如娱乐新闻、广告、帮助、下载、在线娱乐、在线交易等，内容较为丰富，并且娱乐性极强。主页风格设计较为大胆，不拘泥于某种约束，形形色色的结构布局、色彩搭配令人眼花瞭乱，刺激着人们的视听感观，印象非常深刻，排在所有类别网站之首。游戏类网站通常会运用矢量卡通、三维成型及Flash技术。框架结构丰富多样，极其没有规律。色彩或者大胆刺激，或者诡异独特。除儿童游戏以外大多色彩以阴暗色调为主，辅以暖色烘托对比。神秘的色彩、前卫的图片、柔和的阴影，加上深色背景或肌理图案，给人们强大的视觉冲击力。儿童类游戏网站则会用一些可爱卡通的
13、色彩搭配方案，如绿色、黄色、橘色等，辅以矢量卡通角色吸引着儿童的眼球。,4.3.2 娱乐主页,TeamRage主页,4.3.3 企业主页,CI是英文Corporate Identity的缩写，直译为企业识别，是指一个企业所能标识自己、区别外界的内在特点和个性，简单来说就是企业形象。大多稍具规模的公司、企业、商店，都会有一个像样的企业网站，这一类网站大多为了突出企业形象，功能简单，规模较小，就像一部广告画册一样，基本上是在介绍这个企业。这类网站设计要求上比较自由，颜色运用上比较出彩，也有一些企业网站画面风格很绚丽，总的来说都是为了展现公司形象，更进一步地传扬企业精神。企业网站在宣传企业和产品、推
14、广企业形象的时候，在页面上通常会突出显示企业Logo、名称等，而汽车、手机、服装等行业的网站会稍有不同。,4.3.3 企业主页,奥迪中国官网,4.3.4 教育主页,教育主页设计较出色的有一些民办学校、教育产品销售、出版社、博物馆等网站。这类网页风格简洁明快、色彩亮丽不花哨，较多采用明快的橙、蓝、绿等颜色。以宣传为主的民办学校网站大多采用高亮度的暖色调，如橙色。配以少年儿童的图片，风格欢快、积极健康向上。而一些中学、高校的网站则通常采用清爽、干净的色调，如蓝色。也有个别学校使用一些大胆的色彩，如清华大学的主页使用了跟校园建筑一样的紫色，很有标志性。这些学校通常会在主页上放置一些学校的标志性建筑或
15、雕塑。,4.3.4 教育主页,学大教育主页,4.3.5 政府主页,政府、社会团体等机构类网站，由于其网站性质的特殊性，这一类网站设计较为严谨、稳健，甚至会有一些人评价这一类网站设计死板、颜色过时等。政府类网站一般或者说是基本上结构最为工整，“三”字型布局是这一类网站的不二之选。政府类网站会在网页顶部显要位置放置网站名称或国徽。色彩方面也是较为“死板”，配色大多会使用跟中华人民共和国国旗接近的颜色：红色、黄色、橙色，配色方面没有太过花哨，局部也没有啰唆的装饰，一切都以稳健、庄重为原则。,4.3.5 政府主页,广东省人民政府主页,4.3.6 商务主页,商务网站主要为网上交易类型的，如B2C、B2B
16、。这里以我们熟知的网上购物类型的网站为例进行介绍。现在淘宝网、当当网、卓越网已经深入我们的生活，网上购物已经成为一种时尚。这一类网站是以传统商业模式为基础，通过网络技术搭建一种网站交易平台。在网上交易的物品除了商品、二手物品、房产、汽车外，还出现一类出售有价值的信息的网站。而在美国有一个网民通过这类平台竟然神奇地用一根小小的曲别针跟别人互相交换物品，各取所需，最后的结果是他可以免费住一个月的豪宅，这就是商务类网站或者说交易类网站的神奇之处。这类网站通常会有详细的分类索引、产品搜索，附以一张或多张照片说明产品。如果你曾经有过网购的经历，那么你一定不会陌生。设计这类网站的时候，要求导航清晰，交互性好，操作功能要求不高。,4.3.6 商务主页,Perfume Point 主页,4.3.6 商务主页,Perfect Order 主页,4.4 Web网站发布,4.4.1 发布前的测试 4.4.2 取得相应的权限 4.4.3 网站发布,4.4.1 发布前的测试,当网站的大多内容、功能集合在一起成为一个整体后，必须进行详细而完备的测试。这样做并不是要多花时
