1. 3.7.2 网页设计的原则与页面风格 网站设计原则、站点的整体风格、层次、结构实例分析、网站目录组织结构。

2. 第一节 网站设计原则 一、网站设计的基本原则 （一）创意 网页是构成网站的基础，软件的使用是网站制作的最基本技能？ 软件由人使用，网站创作的灵魂在于站点建设者对网站的规划，网站的风格及网站的概念的理解。 良好的网站设计概念才能创造出优秀的网站，这是网站制作的核心。

3. 网页设计制作最重要最基本的原则（核心） —————— 创意（ idea ） 创意—— 指站点的整体创意 1 ．创意是传达信息的一种特别方式

4. 创意思考的五阶段： ⑴ ．准备期 ——研究所搜集的资料，根据旧经验，启发新创意； ⑵．孵化期 ——消化资料，使意识自由发展，任意结合； ⑶．启示期 ——意识发展并结合，产生创意； ⑷．验证期 ——修正产生的创意； ⑸．形成期 ——设计制作网页，将创意具体化。

5. 2 ．创意是将现有的要素重新组合 网站创意的 25 种联想线索： ⑴ ．把它颠倒； ⑵．把它缩小； ⑶．把颜色换一下； ⑷．使它更长； ⑸．使它闪动； ⑹．加入背景音乐； ⑺．结合文字音乐图画； ⑻．使它成为年轻的； ⑼．使它重复； ⑽．使它变成立体； ⑾．参加竞赛； ⑿．参加打赌； ⒀．变更一部分； ⒁．分裂它； ⒂．使用诙谐浪漫的语言； ⒃．使它速度加快； ⒄．增加香味； ⒅．使它看起来流行； ⒆．使它对称； ⒇．将它向儿童诉求； (21) ．价格更低； (22) ． 给它起个绰号； (23) ．把它打包； (24) ．免费提供； (25) ．以上各项延伸组合 . 摘自樊志育《广告制作》

6. 3 ．网站设计应遵循的基本原则 ⑴ ．网页内容便于阅读 信息科学的分类和组织 ⑵．站点、页面色彩的搭配 “简单为美”原则 ⑶．带宽 每幅网页（文件）应尽量短小精湛

9. 800  600 分辨率 1024  768 分辨率 640  480 分辨率

11. ⑸ ．提供与浏览者的交互 应提供 Email 、聊天室、电子论坛、留言板等。 ⑹ ．站点内容要精、专，更新要及时 ⑺ ．简单即为美

13. 国内外网站主页比较

15. 第二节 网站的整体风格 风格： 整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。 创意的实质就是要把网站建设得有自己独特的风格，让人一眼就能够识别。

17. 一、如何树立网站风格？ 风格是独特的 ，是站点与众不同的地方。 风格是有人性的 ，通过网站的外表，内容，文字，交流体现。 风格就是与众不同！

21. 3 ．设计网站的标准字体 标准字体 ——— 用于标志，标题，主菜单的特有字体。 一般中文网页默认的字体是宋体。 非默认字体只能用图片的形式，因为浏览者的 PC 若未安装你的特定字体，那他只能用默认字体来显示。

22. 4. 设计网站的宣传标语 一句话甚至一个词来高度概括网站的精神，网站的目标。 尽量用有人情味的语言。

24. ⑴ ．用一句话来描述你的站点； 有创意，专业，有（技术）实力，有感招力的语言。 ⑵ ．通过色彩 红色（热情），天蓝色（幻想），金黄色（聪明），紫色（神秘）。 ⑶ ．通过画面； ⑷ ．通过有个性的人物； ⑸ ．通过网站的内涵； ⑹ ．用一种动物来比喻： ⑺ ．通过与其他网站不同的特色； ⑻ ．通过与你的站点交流合作的感受。

25. 3 ．努力建立和加强自己的网站印象 ⑴ ．突出网站或企业的标志； ⑵ ．突出自己标准色彩； 文字的链接，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。 ⑶ ．突出自己或企业的标准字体； 关键的标题，菜单，图片里使用统一的标准字体； ⑷ ．一条能给人留下深刻印象的标语； ⑸ ．统一的语气和人称； ⑹ ．统一的图片处理效果； ⑺ ．创造站点特有的符号或图标； ⑻ ．用自己设计的花边，线条，点； ⑼ ．展示网站的荣誉和成功作品； ⑽ ．提供真实信息。

26. 4. 实现网站风格的一些具体方法 基本方法： 把网页内容模块化。 实现步骤： ⑴ . 收集有代表性的元素 ( 文本、徽标插图、附加图形及各种动画、视频）； ⑵ . 确定各元素的大小，文本的风格（字体、大小、颜色和各种效果），要把各元素看成一个个模块； ⑶ . 根据组织信息的原则和网页的风格来决定各个模块在网页中的位置； ⑷ . 把各模块化的内容布置到网站的各个网页中，尽量保持一致，仅做必要的改动。

27. 二、各类网站的风格特征 1 ．商业网站的风格 ⑴ ．主页上方有色彩醒目的企业微标或商标 应尽可能做到色彩醒目，同时占用版面小。 ⑵ ．采用主题图形产品广告来突出公司形象与风格 主题图形或产品广告应精心设计，给浏览者以良好的第一印象。如百事可乐。 ⑶ ．主要栏目一般采用图文并茂的超级链接实现 主要栏目图片、文字之间的色彩配合，与主题图形的相互衬托。

29. EPSON 公司网站（ www.epson.com.cn ）

31. 1 ．商业网站的风格 ⑷ ．主、次要栏目应分开 主要栏目和次要栏目不要放置在同一个页面。 ⑸ ．应有固定的栏目页面 ⑹ ．应建立站内搜索引擎或导航策略 必须建立站内搜索引擎，以方便浏览者在站内查找所需要的信息。

32. 两种站点导航策略： 导航条、网站导航图 导航条 ——— 实际上就是一组链接。 例 ： Yahoo 网站标志的下面就是导航条，内容为：“首页、商业与经济、公司、新闻与媒体、杂志”。 网站导航图 ——— 将网站的主要栏目在一个网页中集中体现。 例 ： 中华商埠、等网站

34. 网站导航图 网站导航图

37. 3 ．个人站点的主要风格 ⑴ ．主题图形式个人网站 主页上有一个醒目的图形（自制的图形或个人照片）。 主页上的超级链接和大段的文本不多，详细文本信息多在下一级页面。 ⑵ ．信息发布式个人网站 以提供大量信息为目的。设计上应避免华而不实。 网站主题图形基本上采用类似广告条的样式以便于浏览者访问，主页上有三多：信息多、更新信息多、链接多。 ⑶ ．介于两种类型之间的网站 网站组织形式不鲜明，既想突出个人形象，又想发布大量信息。

38. 主题图形式个人网站

39. 信息发布式个人网站

42. 网站的三级结构 反 馈 内 容 搜 索 主 页 新 闻 产 品 服 务 新闻 1 新闻 2 新闻 3 产品 1 产品 2 产品 3 服务 1 服务 2 服务 3

43. 首页 大多采用大主题图形配以少量文字介绍的方法。除大型的门户网站外，其他站点都不采用大量超链。因此，制作主页主要是主题图形的制作以及页面构图。 二级页面是每个栏目起始页 ，应有醒目的各栏目对应的主题图形。 三级页面是信息页 ，以文字信息为主，图片不宜太多。文字最好直接用色彩、字体的文本信息表现，少用特效字。将有限的页面空间留给那些无法用文本表现的装饰图片。

44. 商业网站首页

45. Canon （ www.Canon.com.cn ） 网站的技术支持网页

46. 第二、三层页面上应设置通向其他栏目的链接和返回首页或上一层页面的链接。

47. 二、网站目录结构组织 1 ．网站目录结构组织的原则 ⑴ ．不要将所有文件都放在根目录下； ⑵ ．按栏目内容分别建立子目录； ⑶ ．在每个主目录下都建立独立的 images 目录； ⑷ ．目录的层次不要太深； ⑸ ．切忌使用中文目录； ⑹ ．不要使用过长的目录； ⑺ ．尽量使用意义明确的目录。

48. 2 ．网站的链接结构 ⑴ ．树形链接结构（一对一） 类似 DOS 的目录结构，首页链接指向二级页面，二级页面链接指向三级页面。 优点： 条理清晰，访问者不会“迷路”。 缺点： 浏览效率低，栏目间的跳转须绕经首页。 网站的链接结构 —— 页面之间相互链接的拓扑（几何）结构。

49. 2 ．网站的链接结构 ⑵ ．星形链接结构（一对多） 每个页面之间都建立相互链接。 优点： 浏览方便。 缺点： 链接太多，浏览者容易迷路。 实际设计中可混合使用两种结构。 推荐： 首页和二级页面之间用星形链接结构，二级和三级页面之间用树形链接结构。

50. 易犯的错误 主 页 反 馈 内 容 搜 索 新闻 1 新闻 2 新闻 3 产品 1 产品 2 产品 3 服务 1 服务 2 服务 3 结构层次太浅： 给人以网站组织混乱的印象。 主 页 新 闻 产 品 服 务 反 馈 内 容 搜 索 新闻 1 新闻 2 新闻 3 产品 1 产品 2 产品 3 服务 1 服务 2 服务 3 网站层次太深： 使有价值的信息被埋没在层层的链接之后，访问者很少有耐心找到它，他们会在三次单击之后放弃。 服务 1 服务 2 服务 3 服 务

52. 一、传统的推广方式 ⑴ ．公司印刷品 印刷品宣传资料、 印刷品广告 ⑵ ．报刊杂志 ⑶ ．户外广告 路边标牌、汽车车身广告（网易、 M18 、 Yahoo! 等） ⑷ ．传统媒体 Lycos.com 创立之初，为扩大其影响，曾在四个不同电视频道的黄金时间持续 12 周播出“ Get Lycos or get lost” 的广告语。

53. 二、注册到搜索引擎 到搜索引擎上注册是网上推销网站最流行、最简便的方法。 1. 搜索引擎的类型 目录索引式： yahoo.com linkstar.com wwwyellowpage.com 目录索引式多采用手工方式收录网址。 蜘蛛索引式： Excite.com Altavista.com Lycos.com 蜘蛛索引式多采用机器人（软件）方式收录网址。

54. 在著名搜索引擎网站注册（免费） 七大著名搜索引擎： Y ahoo www.yahoo.com www.cn.yahoo.com Alta Vista www.altavista.com Excite www.excite.com (IE 默认） Infoseek www.infoseek.com Webcrawler www.webcrawler.com Hotbot www.hotbot.com Lycos www.lycos.com 理想的目标： 在搜索引擎上能获得较靠前的搜索排名

55. 2. 两种注册方法 手工注册： 网站管理人员上网访问各个搜索引擎，按其要求填写注册单并进行提交； 自动注册： 网站管理人员通过特定的注册软件向各个搜索引擎注册，无需亲自填写注册单。

56. 二、注册到搜索引擎 ⑴ ． 手工注册 几大著名搜索引擎的注册网页地址： Yahoo ： help.yahoo.com/help/url AltaVista ： ww.altavista.digital.com/av/content/addurl.htm Excite ： www.Excite.com/info/add_url.html InfoSeek ： www.in1foseek.com/AddUrl?pg-Dcaddurl.html HotBot ： www.hotbot.com/addurl.html Lycos ： www. Lycos.com/addasite.html 一般来说，应该到上述几个搜索引擎手工注册，以确保效果。

57. 二、注册到搜索引擎 ⑵ ．自动 注册 自动注册软件很多，应用较广的如 AddWeb ，它可以使我们同时向 1758 个搜索引擎提交网站注册申请表，并且可以分析网站在搜索引擎中的排名情况，然后提出改进意见。

58. 三、利用网络广告和有偿链接 1. 网络广告 （ Web Advertisement ) 从法律的角度定义： 广义： 本办法所称网络广告，是指因特网信息服务提供者通过因特网在网站或网页上以 旗帜、按钮、文字链接、电子邮件 等形式发布的广告。 北京市工商局 《北京市网络广告管理暂行办法》 从法律的角度定义： 狭义： 本法所称广告，是指商品经营者或者服务提供者 承担费用 ， 通过一定媒介或形式 直接或间接地介绍自己所 推销的商品或者所提供的服务 的 商业 广告。 《中华人民共和国广告法》第二条第二款 广告的法定特征： 1 ． 有偿性 ； 2 ． 依附性； 3 ． 目的性； 4 ． 商业性。

59. 定义： 凡符合广告的法定特征，及符合有偿性、依附性、目的性、商业性特点的网上信息均可界定为网络广告。 2. 网络广告的主要形式 ⑴ ．旗帜广告（ banner ） ⑵ ．文本链接广告（ text link ） ⑶ . 电子邮件广告 ⑷ . 插播式广告（ Interstitial)

62. 468*60 全尺寸动态 Banner

63. 120*60 按钮 #2

64. 其它尺寸、格式：

65. NOKIA 的全屏广告（ big page ）

66. Sohu 背投广告

67. 电子邮件广告 具有针对性强、费用低廉的特点，且广告内容不受限制。可针对具体受众发送特定的广告。 一般采用文本格式或 html 格式。文本格式的兼容性最好。 例： 台湾阿贵网站的新闻邮件（ html 格式）。

68. 插播式广告（ Interstitial) sina 主页上的插播式广告

70. 4 ．利用 BBS 和新闻组 目前新闻组主要有以下几种类型： comp —— 代表电脑网络、软件等 sci —— 代表自然科学 rec —— 代表业余活动和休闲娱乐 soc—— 代表人文科学 talk —— 代表一般性的问题 alt —— 代表可供选择的讨论主题 misc —— 代表一些较难分类的主题 humanities —— 代表艺术和人文科学中的专业和非专业人士的讨论区 优越性： 针对性强、容易取得信任

71. ⑴ ．国内公共新闻组服务器 北京电信： news.bta.netcn ，只限北京用户； 上海电信： news.sta.net.cn ，只限上海用户； 广州网易： news.nease.net ，数百新闻组； 湛江碧海银沙： 202.96.140.45 ， 200 个新闻组； 中网公司： news.netchina.com.cn ； 中国之路： news.chinaroad.com.cn ； 凯利新闻组： 202.96.217.57 ； 东方网景： news.east.cn.net 。

72. ⑵ ．国内一些高校新闻组服务器 北京大学： news.pku.edu.cn 上海交通大学： news.shnet.edu.cn 电子科技大学： news.nesti.edu.cn 西安交通大学： news.xanet.edu.cn 华南理工大学： news.gznet.edu.cn 华中理工大学： S1000e.whnet.edu.cn

73. ⑶ ．港台地区新闻组服务器 news.school.net.hk ； Taurus.hkstar.com ； 香港星光： news.starzine.com www.glink.com.hk （ 可在此网站查找香港最新的新闻组服务器） 台湾 PC Home ： 202.77.203.62 台大计中： bumy.ntu.edu.tw 交大资工： news.csiec.nctu.edu.tw news.iie.ncku.edu.tw