《网页设计.ppt》由会员分享，可在线阅读，更多相关《网页设计.ppt（32页珍藏版）》请在三一文库上搜索。
1、网 页 设 计,主讲：舒建文 E-mail:,2,第一章 网站规划及设计理念,3,第一章 网站规划及设计理念,网站设计是一个很大的课题。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。,4,教学重点与难点,网站的目录结构 网站的连接结构 网站创意 网站布局,5,1.1 定位网站的主题和名称,一、题材的选择 美国个人电脑杂志（PC Magazine评出的排名前100位的全美知名网站的十类题材，这对于读者进行网站设计，也许有一些参考价值。,6,第一类：网上求职 第二类：网上聊天/即时信息/ICQ 第三类：网站社区/讨
2、论邮件列表 第四类：计算机技术 第五类：网页/网站开发 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚,7,在选择题材时，可从下面几个方面进行考虑： 1主题要小而精 定位要小，内容要精。 2题材最好是自己擅长或者喜爱的内容。 3题材不要太滥或者目标太高。,8,二、网站名称的选择,1名称要正气。“主题站”比“万全站”更受人们喜爱。 2名称要易记。 3名称要有特色。名称平实可以接受，但如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。在体现网站主题的同时，要有这画龙点睛之笔。,9,1.2 定位网站的CI形象,CI（Corporate I
3、dentity）是借用广告词语，意思是通过视觉来统一企业的形象。 1.设计网站的标志（logo） 2.设计网站的标准色彩 3.设计网站的标准字体（中文宋体9磅） 4.设计网站的宣传标语,10,网站标志Logo,11,典型Logo案例,中国现车交易网（http:/） 形象手法就是采用与logo对象直接关联而具典型特征的形象。这种手法直接、明确、一目了然，易于迅速理解和记忆。最大的特点就是将网站的产品，形象化和 “车”字融合为一体，有效传递网站定位和核心产品。在用色上对比鲜明，图形格外醒目鲜艳，能给人以很强的视觉冲击效果且保持视觉平衡、线条流畅，整体美观、大方。,12,1.3 确定网站的栏目和版块
4、,一般的网站栏目安排要注意以下几个方面： 1一定记住要紧扣主题 2设一个最近更新或网站指南栏目 3设定一个可以双向交流的栏目 4设一个下载栏目或常见问题回答栏目,13,划分栏目需要注意:,栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。划分栏目需要注意的是： （1）尽可能将网站最有价值的内容列在栏目上。 （2）尽可能方便访问者的浏览和查询。 （3）尽可能删除与主题无关的栏目。,14,1.4 确定网站的目录结构和链接结构,一、网站的目录结构 建立目录结构的一些建议： 1不要将所有文件都存放在根目录下 2按栏目内容建立子目录。,15,在设置网站的目录结构时，需要注意的问题有：,（1
5、）不要使用中文名字的目录名。 （2）不要使用过长的目录名。 （3）尽量使用意义明确的目录名，尽量做到“见名知意”。 （4）目录的层次不要太多，建议不要超过3层。,16,二、网站的链接结构,一般情况下，建立网站的链接结构有以下两种基本方式： 1树状链接结构 2星状链接结构 链接结构的设计，在实际的网页制作中是非常重要的一环，采用什么样的链接结构将直接影响到版面的布局。,17,1.5 确定网站的整体风格和创意设计,一、 网站风格 风格是抽象的，是指站点的整体形象给浏览者的感受。 风格是独特的 风格是有人性的,18,如何树立网站风格 ？,（1）要肯定风格是建立在有价值内容之上的。一个网站有风格而没有
6、内容，就像绣花枕头一包草，像一个性格傲慢但目不识丁的人。所以首先必须保证内容的质量和价值。 （2）要彻底搞清楚自己希望站点给人的印象是什么。 （3）在明确自己的网站印象后，开始努力建立和加强这种印象。,19,二、网站创意,创意（idea）是网站生存的关键。 1创意是传达信息的一种特别方式 2创意是将现有的要素重新组合 创意的目的是更好地宣传推广网站。如果创意很好却对网站发展毫无意义，就像给奶牛穿高跟鞋，那么宁可放弃这个创意。,20,1.6 首页设计,（1）确定首页的功能模块。 网站名称（logo） 主菜单（menu） 新闻（whats new） 更新列表 搜索（search） 友情链接（lin
7、ks） 邮件列表（maillist） 计数器（count） 版权（copyright）,21,（2）设计首页的版面。 （3）处理技术上的细节。,22,1.7 版面布局,版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律。版面布局一般可分为以下步骤： 1草案 2粗略布局 3定案,23,1.8 网页色彩搭配,通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 在网页配色中，要注意的是：不要将所有颜色都用到，尽最控制在三种色彩以内。背景和前文的对比尽最要大，绝对不要用花纹繁复的图案作背景。,24,1.9 其他页面设计,和首页保持相
8、同的风格。 要有返回首页的链接。 目录结构不用超过四层。,25,优秀网站的八项基本要素,评选十大中文网站参考标准 1. 页面下载速度快 2. 使用方便 3. 保持系统正常运行 4. 无错误链接 5. 联系信息方便多样 6. 保护个人信息 7. 不同浏览器兼容性 8. 符合网络伦理,26,了解Web 技术,2007.9,27,1 Web是什么？,Web是World Wide Web（WWW）的简称，译为万维网，它是因特网上的一种信息服务系统，并已成为集成其他信息服务的门户。,28,2 Web系统由4个部分构成：,超文本传输协议HTTP（HyperText Transfer Protocol）；
9、超文本标记语言HTML（HyperText Markup Language）。 Web服务器； Web浏览器。,29,Web技术可以方便地集成:,信息发布 文件下载 电子邮件 讨论组 数据库检索 视频通信 网上聊天 互动游戏,30,中国互联网络发展状况统计报告,2005年1月，中国互联网络信息中心（CNNIC）发布了最新的中国互联网络发展状况统计报告(截止到2004年底):,上网计算机数: 4160万 上网用户数: 9400万 宽带用户数： 4280万 WWW站点数： 668900,31,3 Web的工作过程,在客户端浏览器中输入URL（Uniform Resource Locator）或点击页面的超链接。 浏览器向DNS域名服务器询问URL中域名的IP地址。 DNS返回询问的IP地址。 通过三次握手法，浏览器和Web服务器的80端口建立一个TCP连接。 浏览器向Web服务器发送HTTP请求消息（Request Message）。 Web服务器向浏览器返回HTTP响应消息（Response Message）。 浏览器解释显示页面文件。,32,Web浏览器和Web服务器之间的通信,Web系统采用客户机/服务器工作模式,