网页与网站基础知识幻灯片.ppt

《网页与网站基础知识幻灯片.ppt》由会员分享，可在线阅读，更多相关《网页与网站基础知识幻灯片.ppt（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页与网站基础知识第1页，共49页，编辑于2022年，星期二 越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？在一个网站开发者眼中，如果脱离了网页的实而美观的网站？在一个网站开发者眼中，如果脱离了网页的实用性来谈网页的美，是不实际的。设计制作一个网页，首先是用性来谈网页的美，是不实际的。设计制作一个网页，首先是高效科

2、学地安排页面，然后才是对它进行进一步的美化。本课高效科学地安排页面，然后才是对它进行进一步的美化。本课程就带领同学们如何做出一个美观而实用的网站。程就带领同学们如何做出一个美观而实用的网站。第2页，共49页，编辑于2022年，星期二第一章第一章 网页与网站基础知识网页与网站基础知识n网页与网站的概念网页与网站的概念n网页的设计网页的设计n网站的规划网站的规划n网站的开发流程网站的开发流程 第3页，共49页，编辑于2022年，星期二 1.1 网页与网站的概念网页与网站的概念nInternetInternet的概述的概述nWWWWWWn网页与网站网页与网站n域名与域名与IPIP地址地址第4页，共4

3、9页，编辑于2022年，星期二1.1.1 Internet的概述的概述 InternetInternet是由成千上万个网络、上亿台计算机通过特是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。息资源查询和信息资源共享的全球最大的信息资源平台。第5页，共49页，编辑于2022年，星期二nInternetInternet最初并不是为商业性和广泛使用而设计的。它最初并不是为商业性和广泛使用而设计的。它起源于起源于19691969年美国国防部高级研究计划署协助开发的

4、年美国国防部高级研究计划署协助开发的ARPANETARPANET。最初是只允许国防部人员进入的封闭式网络。到。最初是只允许国防部人员进入的封闭式网络。到19871987年，在美国国家科学基金会的推动下，将之主要从年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的军事用途转向科学研究和民事用途，形成了今天的InternetInternet主干网雏形主干网雏形NSFNETNSFNET。全球网络的发展是空前且出人。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活

5、。入我们的日常生活。第6页，共49页，编辑于2022年，星期二从国内从国内InternetInternet的发展现状来看，的发展现状来看，19941994年年4 4月，中科院计算机月，中科院计算机网络信息中心正式接入网络信息中心正式接入InternetInternet，在，在1010多年的时间里，中国多年的时间里，中国InternetInternet发生了飞速的发展，截至发生了飞速的发展，截至20062006年底，我国网民人数达到年底，我国网民人数达到了了1.371.37亿，即每十人中就有一人是网民。亿，即每十人中就有一人是网民。10%10%的网民普及率将是互联网的网民普及率将是互联网发展的高

6、速拐点，突破发展的高速拐点，突破10%10%之后，中国互联网将迎来更快速的增长期。之后，中国互联网将迎来更快速的增长期。另外网站数、另外网站数、IPIP地址等也迅速增长，分别达到地址等也迅速增长，分别达到84.384.3万和万和98009800万。万。从域名、网站数、从域名、网站数、IPIP地址等增长情况来看，我国互联网资源得地址等增长情况来看，我国互联网资源得到了全面提升。到了全面提升。InternetInternet所提供的服务主要是所提供的服务主要是WWWWWW、E-mailE-mail、FTPFTP、网上传呼、在、网上传呼、在线聊天、网上购物等等，而其中线聊天、网上购物等等，而其中WW

7、WWWW和和E-mailE-mail是最常用的服务。是最常用的服务。第7页，共49页，编辑于2022年，星期二1.1.2WWWnWWW(World Wide Web)WWW(World Wide Web)简称为简称为WebWeb或万维网，客户端只要通过或万维网，客户端只要通过“浏览器浏览器”（BrowserBrowser）就可以非常方便地访问）就可以非常方便地访问InternetInternet上的上的服务器端，迅速地获得所需的信息。如图所示。服务器端，迅速地获得所需的信息。如图所示。Internet浏览器浏览器WEB服务器服务器HTTP网络协议网络协议第8页，共49页，编辑于2022年，星期

8、二 用户通过浏览器访问用户通过浏览器访问WEBWEB服务器的网页，那么如何查找这些网页呢服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即？通过在浏览器的地址栏中输入网址，即URLURL，统一资源定位器，统一资源定位器。URLURL的一般格式如下：的一般格式如下：通信协议通信协议：/主机域名主机域名/路径路径/文件名文件名 其其中中，通通信信协协议议指指提提供供该该文文件件的的服服务务器器所所使使用用的的通通信信协协议议；主主机机域域名名指指上上述述服服务务器器所所在在主主机机的的域域名名；路路径径指指该该文文件件在在主机上的路径；主机上的路径；文件名文件名指文件的名称。

9、指文件的名称。例如例如http:/ 其其中中，httphttp是是WWWWWW服服 务务 器器 与与WWWWWW客客户户之之间间遵遵循循的的通通信信协协议议。用用来来标标识识该该文文件件存存储储在在山山西西大大学学的的WWWWWW服服务务器器上上，第第二二部部分分是是文文件件所所在在的的路路径径，最最后后一一部部分分sxuc1.htmsxuc1.htm这这个个文文件件的的名名称。称。第9页，共49页，编辑于2022年，星期二1.1.3 网页与网站网页与网站构建构建WWWWWW的基本单位是的基本单位是网页网页。网页中包含所谓的。网页中包含所谓的“超链接超链接”，通过已经定义好的关键字和图形，只要

10、用鼠标轻轻，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了信息，从而实现网页之间的链接，从而构成了WWWWWW的纵横的纵横交织的网状结构。交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做则叫做网站网站。第10页，共49页，编辑于2022年，星期二1.1.4 域名与域名与IP地址地址n在在InternetInternet上的每台网络设备都要有一个唯一的地址才上的每台网络设备都要有

11、一个唯一的地址才能被访问到，这个地址就是能被访问到，这个地址就是IPIP地址地址。nIPIP地址是由地址是由32bits32bits的二进制数值构成，分成的二进制数值构成，分成4 4组，转化组，转化为十进制用点分隔。为十进制用点分隔。比如：比如：202.207.209.200202.207.209.200第11页，共49页，编辑于2022年，星期二1.2 网页的设计网页的设计n网页主题网页主题 n网页的文字网页的文字 n网页的色彩网页的色彩 n网页版式和布局网页版式和布局 第12页，共49页，编辑于2022年，星期二1.2.1 网页主题网页主题 n网页的主题指网页所要表现的最主要的思想内涵，可

12、以说是网页网页的主题指网页所要表现的最主要的思想内涵，可以说是网页的灵魂。的灵魂。n主题的概念是很模糊的，它是一种约束，是同一站点中各个主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。是将各个设计者的作品有机结合起来的力量。主题必须与主题必须与WebWeb页面主要推销或展示的产品或服务紧密相关，同时它又必须页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。有相当的吸引力。第13页，共49页，编辑于2022年，星期二1.2.21

13、.2.2网页的文字网页的文字 n文字是网页最主要的表达形式，尽管图形和解构的表格五文字是网页最主要的表达形式，尽管图形和解构的表格五彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此。所以，给浏心其他页面元素，甚至对导航系统也是如此。所以，给浏览者一个亲和的文字界面是必要的。览者一个亲和的文字界面是必要的。为了保证不同浏览器上字号保持一致，字号建议为了保证不同浏览器上字号保持一致，字号建议用点数用点数ptpt

14、和像素和像素pxpx来定义，来定义，ptpt一般使用中文宋体的一般使用中文宋体的9pt9pt和和11pt11pt，pxpx一般使用中文宋体一般使用中文宋体12px12px和和14.7px14.7px这是经过优化的这是经过优化的字号，黑体字或者宋体字加粗时，一般选用字号，黑体字或者宋体字加粗时，一般选用11pt11pt和和14.7px14.7px的字号比较合适。的字号比较合适。第14页，共49页，编辑于2022年，星期二1.2.1.2.网页的色彩网页的色彩 在制作网站的时候，色彩的选择和搭配十分重要，因为一个网在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选

15、择与搭配是否适当，一般的情站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：况下，从以下几个方面来考虑色彩的选择：n色彩的鲜明性色彩的鲜明性网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。意，而且在访问者的记忆中驻留的时间也比较长。n色彩的独特性色彩的独特性网站色彩的选择与搭配要与众不同，这样就可以使得访问者留网站色彩的选择与搭配要与众不同，这样就可以使得访问者留下深刻的印象。下深刻的印象。第15页，共49页，编辑于2022年，星期二n色彩的合适

16、性色彩的合适性网站色彩的选择与搭配要与网站的内容气氛相适合。网站色彩的选择与搭配要与网站的内容气氛相适合。n色彩的联想性色彩的联想性不同的色彩会产生不同的联想，在网站的设计中多运用具有美不同的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露出另外一种气息。好联想的色彩，可以使你的网站流露出另外一种气息。n页面中各处用色的选择页面中各处用色的选择首先确定主色。首先确定主色。主色是指页面中相对来说较大面积使用的色彩。主色主色是指页面中相对来说较大面积使用的色彩。主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。可以反映出整个网页的风格，亦可使页面内容以

17、色彩语言表达出来。接接下来是确定辅助色。下来是确定辅助色。辅助色可以有多种，其应用范围包括辅助色可以有多种，其应用范围包括输入框输入框的颜色的颜色，表格边框颜色表格边框颜色、表格的底色表格的底色、小图标用色小图标用色、文字颜色文字颜色以以及及链接色链接色等等。等等。第16页，共49页，编辑于2022年，星期二1.2.网页版式和布局网页版式和布局 n版面设计的步骤版面设计的步骤（1 1）画出页面的结构草图）画出页面的结构草图 ：只需画出页面的大体结构。注：分辨率为：只需画出页面的大体结构。注：分辨率为640*480640*480时，页面显示尺寸为时，页面显示尺寸为620*311620*311；分

18、辨率为；分辨率为800*600800*600时，页面显时，页面显示尺寸为示尺寸为780*428780*428；分辨率为；分辨率为1024*7681024*768时，页面显示尺寸为时，页面显示尺寸为1007*6001007*600；（2 2）布局细化和调整：将需要放置的功能模块安排在页面上，注意突）布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调出重点和平衡协调（3 3）定格：确定出完美的布局方案，定格为最后的版式。）定格：确定出完美的布局方案，定格为最后的版式。第17页，共49页，编辑于2022年，星期二nT T型结构型结构 n同字结构同字结构 n川字结构川字结构 n三

19、字结构三字结构 常见网页布局常见网页布局 第18页，共49页，编辑于2022年，星期二T型结构型结构第19页，共49页，编辑于2022年，星期二同字结构同字结构 第20页，共49页，编辑于2022年，星期二川字结构川字结构第21页，共49页，编辑于2022年，星期二三字结构三字结构第22页，共49页，编辑于2022年，星期二单一结构单一结构 第23页，共49页，编辑于2022年，星期二1.3 网站的规划网站的规划n定位网站主题和名称定位网站主题和名称 n网站的风格网站的风格n网站的网站的CICI形象形象 n确定网站的栏目和版块确定网站的栏目和版块 n确定网站的目录结构和链接结构确定网站的目录结

20、构和链接结构 第24页，共49页，编辑于2022年，星期二1.3.1 1.3.1 定位网站主题和名称定位网站主题和名称n设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。就是你的网站的题材。对于题材的选择，应注意：对于题材的选择，应注意：（1 1）主题要小而精。定位要小，内容要精。调查结果也显示，网络上的）主题要小而精。定位要小，内容要精。调查结果也显示，网络上的“主题站主题站”比比“万全站万全站”更受人们喜爱，就好比专卖店和百货商店。更受人们喜爱，就好比专卖店和百货商店。（2 2）题材最好是你自己擅长或者喜爱的

21、内容。这样在制作时，才不）题材最好是你自己擅长或者喜爱的内容。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。设计制作出杰出的作品。（3 3）题材不要太滥或者目标太高。）题材不要太滥或者目标太高。“太滥太滥”是指到处可见，人人都是指到处可见，人人都有的题材；有的题材；“目标太高目标太高”是指在这一题材上已经有非常优秀，知名度是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。很高的站点，你要超过它是很困难的。第25页，共49页，编辑于2022年，星期二n网站名称的

22、选择也是非常重要的。和现实生活中一样，网站名称是否网站名称的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：建议是：（1 1）名称要正名称要正。也就是要合法，和理，和情。不能用反动的，。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。色情的，迷信的，危害社会安全的名词语句。（2 2）名称要易记名称要易记。根据中文网站浏览者的特点，除非特定需要，。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合

23、型名称。网站名称最好用中文名称，不要使用英文或者中英文混合型名称。（3 3）名称要有特色名称要有特色。名称平实就可以接受，如果能体现一定的。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里举几个例子：音乐前卫，网页陶吧，天籁绝音。在体现出网站主举几个例子：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。题的同时，能点出特色之处。第26页，共49页，编辑于2022年，星期二1.3.2 1.3.2 网站的风格网站的风格n风格风格(style)(style)是抽象的。是抽象的。是

24、指站点的整体形象给浏览者的是指站点的整体形象给浏览者的综合感受。综合感受。这个这个“整体形象整体形象”包括站点的包括站点的CICI（标志，色（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。语气，内容价值，存在意义，站点荣誉等等诸多因素。第27页，共49页，编辑于2022年，星期二n风格是独特的，是站点不同与其他网站的地方。或者色彩，风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你或者技术，或者是交互方式，能让浏览者明确分辨出这

25、是你的网站独有的。的网站独有的。n如何树立网站风格呢？我们可以分这样几个步骤：如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。一个网站有风第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。本的，无须置疑。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第三，在明确自

26、己的网站印象后，开始努力建立和加强这种第三，在明确自己的网站印象后，开始努力建立和加强这种印象。印象。第28页，共49页，编辑于2022年，星期二n对于确定风格，这里提供一些参考：对于确定风格，这里提供一些参考：1.1.将你的将你的标志标志logologo,尽可能的出现在每个页面上。或者页眉，或者页脚，尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。或则背景。2.2.突出你的标准色彩突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。框等色彩尽量使用与标准色彩一致的色彩。3.3.突出你的标准字体突出你

27、的标准字体。在关键的标题，菜单，图片里使用统一的。在关键的标题，菜单，图片里使用统一的标准字体。标准字体。4.4.想一条朗朗上口想一条朗朗上口宣传标语宣传标语。把它做在你的。把它做在你的bannerbanner里，或者放在里，或者放在醒目的位置，告诉大家你的网站的特色。醒目的位置，告诉大家你的网站的特色。5.5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。同一个人写的。6.6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。糊度都

28、必须一样。7.7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用可以使用,.,.。（区位码里自己参看）等等。虽然很简单（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉。的一个变化，却给人与众不同的感觉。8.8.用自己设计的花边，线条，点。用自己设计的花边，线条，点。第29页，共49页，编辑于2022年，星期二1.3.31.3.3网站的网站的CICI形象形象 n所谓所谓CICI，是借用的广告术语。，是借用的广告术语。(CI(CI是英文是英文corporate corporate identity

29、identity的缩写的缩写)，意思是通过视觉来统一企业的形象。，意思是通过视觉来统一企业的形象。n标志标志，色彩色彩，字体字体，标语标语是一个网站树立是一个网站树立CICI形象的关键，形象的关键，确切的说是网站的表面文章，设计并完成这几步，你的确切的说是网站的表面文章，设计并完成这几步，你的网站将脱胎换骨，整体形象就会有一个提高。网站将脱胎换骨，整体形象就会有一个提高。第30页，共49页，编辑于2022年，星期二在您的网站主题和名称定下来之后，需要思考的就是网站的在您的网站主题和名称定下来之后，需要思考的就是网站的CICI形形象。象。n设计网站的标志设计网站的标志(logo)(logo)如同

30、商标一样，如同商标一样，logologo是你站点特色和内涵的集中体现，看是你站点特色和内涵的集中体现，看见见logologo就让大家联想起你的站点。就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如：新浪用字母是动物或者人物等等。比如：新浪用字母sina+sina+眼睛作为标眼睛作为标志。标志的设计创意来自你网站的名称和内容。志。标志的设计创意来自你网站的名称和内容。比如：比如：(1).(1).网站有代表性的人物，动物，花草，可以用它们作为网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以

31、卡通化和艺术化，例如迪斯尼的米老鼠，设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。(2).(2).网站有专业性的，可以以本专业有代表的物品作为标志。网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。第31页，共49页，编辑于2022年，星期二n新浪用字母新浪用字母sina+sina+眼睛作为标志。眼睛作为标志。n北京亿恒伟业房地产开发有限公司的标志是以北京亿恒伟业房地产开发有限公司的标志是以“亿恒伟业亿恒伟业”四个汉字的变形为

32、主体。四个汉字的变形为主体。“亿亿”字左半部变形为数字字左半部变形为数字“1”“1”，预示着公司将成，预示着公司将成为行业的龙头老大，也预示者公司全体员工永为行业的龙头老大，也预示者公司全体员工永争第一的拼搏精神和争第一的拼搏精神和“信誉第一、质量第一信誉第一、质量第一”的经营理念，同时也寓意着公司的发展一帆风的经营理念，同时也寓意着公司的发展一帆风顺。顺。n北京爱永恒影楼的标志是以英文字母北京爱永恒影楼的标志是以英文字母“LOVE“LOVE和一颗红心为主体，红心中间是和一颗红心为主体，红心中间是抽象的一男一女携手前进的图形，寓意着抽象的一男一女携手前进的图形，寓意着两个人一颗心，从而寓意着爱

33、永恒。两个人一颗心，从而寓意着爱永恒。第32页，共49页，编辑于2022年，星期二 北京市昌平区第一届机关运动会的会徽是以北京市昌平区第一届机关运动会的会徽是以“昌平昌平”的汉拼的汉拼“CHANGPING”CHANGPING”的第一个字的第一个字母母“C”C”和和“机关机关”的汉拼的汉拼“JIGUAN”JIGUAN”的第的第一个字母一个字母“J”J”变形组合的绿色跑道和运变形组合的绿色跑道和运动员为主题。整个标志充满活力和激情，动员为主题。整个标志充满活力和激情，寓意着昌平区各机关人员在区政府的正确寓意着昌平区各机关人员在区政府的正确领导下，各项事业蓬勃发展，充满生机！领导下，各项事业蓬勃发展

34、，充满生机！第33页，共49页，编辑于2022年，星期二n设计网站的标准色彩设计网站的标准色彩网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。者的情绪。“标准色彩标准色彩”是指能体现网站型象和延伸内涵的色彩。举个实是指能体现网站型象和延伸内涵的色彩。举个实际的例子就明白了：际的例子就明白了：IBMIBM的深蓝色，肯得基的红色条型，的深蓝色，肯得基的红色条型，windowswindows视视窗标志上的红蓝黄绿

35、色块，都使我们觉得很贴切，很和谐。如果窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。如果将将IBMIBM改用绿色或金黄色，我们会有什么感觉？改用绿色或金黄色，我们会有什么感觉？一般来说，一个网一般来说，一个网站的标准色彩不超过站的标准色彩不超过3 3种，太多则让人眼花缭乱。种，太多则让人眼花缭乱。标准色彩要用标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一般来说，适合于网页标准色的颜色有：

36、蓝色，黄一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑橙色，黑/灰灰/白色三大系列色。白色三大系列色。第34页，共49页，编辑于2022年，星期二n设计网站的标准字体设计网站的标准字体和标准色彩一样，标准字体是指用于标志，标题，主菜和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。单的特有字体。一般我们网页默认的字体是宋体。一般我们网页默认的字体是宋体。为了体现站点为了体现站点的的“与众不同与众不同”和特有风格，我们可以根据需要选择一些特别字体。和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告例如，为了体现专业可以使用

37、粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。体，体现亲切随意可以用手写体等等。需要说明的是：使用非默认需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的字体只能用图片的形式，因为很可能浏览者的PCPC里没有安装你的里没有安装你的特别字体，那么您的辛苦设计制作便付之东流啦！特别字体，那么您的辛苦设计制作便付之东流啦！n设计网站的宣传标语设计网站的宣传标语网站的宣传标语可以说是网站的精神，网站的目标。用网站的宣传标语可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：

38、鹊巢的例如：鹊巢的“味道好极了味道好极了”；麦斯威尔的；麦斯威尔的“好东西和好朋好东西和好朋友一起分享友一起分享”；IntelIntel的的“给你一个奔腾的心给你一个奔腾的心”。第35页，共49页，编辑于2022年，星期二1.3.4 1.3.4 确定网站的栏目和版块确定网站的栏目和版块 n在动手制作网页前，一定要考虑好以下三方面：在动手制作网页前，一定要考虑好以下三方面：(1)(1)确定栏目和版块确定栏目和版块 (2)(2)确定网站的目录结构和链接结构确定网站的目录结构和链接结构 (3)(3)确定网站的整体风格创意设计确定网站的整体风格创意设计第36页，共49页，编辑于2022年，星期二(1)

39、(1)确定栏目和版块确定栏目和版块n栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面：栏目安排要注意以下几方面：一定记住要紧扣你的主题！一定记住要紧扣你的主题！一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主栏目。主题栏目个数在总栏目中要占绝对优势，这样的

40、网站显的专业，主题突出，容易给人留下深刻印象。题突出，容易给人留下深刻印象。设一个最近更新或网站指南栏目设一个最近更新或网站指南栏目 如果你的首页没有安排版面放置最近更新内容信息，就有必如果你的首页没有安排版面放置最近更新内容信息，就有必要设立一个要设立一个“最近更新最近更新”的栏目。这样做是为了照顾常来的访客，的栏目。这样做是为了照顾常来的访客，让你的主页更有人性化。让你的主页更有人性化。第37页，共49页，编辑于2022年，星期二 设定一个可以双向交流的栏目设定一个可以双向交流的栏目 不需要很多，但一定要有。比如论坛，留言本，邮件列表不需要很多，但一定要有。比如论坛，留言本，邮件列表等，可

41、以让浏览者留下他们的信息。有调查表明，提供双向交等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个流的站点比简单的留一个“Email me”Email me”的站点更具有亲和力。的站点更具有亲和力。设定一个下载或常见问题回答栏目设定一个下载或常见问题回答栏目 网络的特点是信息共享。网络的特点是信息共享。如果你看到一个站点有大量的如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下载，而不是一优秀的有价值的资料，你肯定希望能一次性下载，而不是一页一页浏览存盘。页一页浏览存盘。“将心比心将心比心”在你自己的主页上设置一个在你自己的主页上设置一个资料下载栏目，

42、会得到大家的喜欢。另外，如果您的站点经资料下载栏目，会得到大家的喜欢。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。以学习。第38页，共49页，编辑于2022年，星期二n总结以上几点，我们得出划分栏目需要注意的是：总结以上几点，我们得出划分栏目需要注意的是：尽可能删除与主题无关的栏目尽可能删除与主题无关的栏目 尽可能将网站最有价值的内容列在栏目上尽可能将网站最有价值的内容列在栏目上 尽可能方便访问者的浏览和

43、查询尽可能方便访问者的浏览和查询 第39页，共49页，编辑于2022年，星期二n上面说的是栏目，我们再看看版块设置。上面说的是栏目，我们再看看版块设置。版块比栏目的概念要大一些，每个版块都有自己的栏目。版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目一般的个人站点内容少，只有主栏目(主菜单主菜单)就够就够了，不需要设置版块。了，不需要设置版块。第40页，共49页，编辑于2022年，星

44、期二 在网站根目录中开设在网站根目录中开设images、common、temp三个子目录，三个子目录，根据需要再开设根据需要再开设media子目录子目录.nimages目录中放不同栏目的页面都要用到的公共图片，例目录中放不同栏目的页面都要用到的公共图片，例如公司的标志如公司的标志logo、banner条、菜单、按钮等等；条、菜单、按钮等等；ncommon子目录中放子目录中放css、include等公共文件；等公共文件；ntemp子目录放客户提供的各种文字图片等等原始资料；子目录放客户提供的各种文字图片等等原始资料；nmedia子目录中放子目录中放flash,avi,quicktime等多媒体文

45、件等多媒体文件。(2)网站的目录结构网站的目录结构第41页，共49页，编辑于2022年，星期二n在根目录中按照首页的栏目结构，在根目录中按照首页的栏目结构，给每一个栏目开设一个给每一个栏目开设一个目录目录，根据需要在每一个栏目的目录中开设一个，根据需要在每一个栏目的目录中开设一个imagesimages和和mediamedia的子目录用以放置此栏目专有的图片和多媒体文件，的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。的再开设其他目录。按栏目内容建立子目录。按栏目内容建立

46、子目录。目录的层次不要太深。目录的层次不要太深。第42页，共49页，编辑于2022年，星期二n目录、文件的名称全部用小写英文字母、数字、下划线的目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录请尽量以英文为指导，不到万不得已不要以拼音作为目录名称名称.第43页，共49页，编辑于2022年，星期二n关于链接结构的设计关于链接结构的设计，在实际的网页制作中是非常重要，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。一环。

47、采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，例如你的主菜单放在什么位置，是否每页都需要放置，是否需要加入返回首页的链接。在连接结构确定后，再是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是动开始考虑链接的效果和形式，是采用下拉表单，还是动态菜单等等。态菜单等等。链链 接接 结结 构构第44页，共49页，编辑于2022年，星期二图片的命名原则图片的命名原则 n图片的命名原则遵循以下几条规范图片的命名原则遵循以下几条规范：名称分为头尾两两部分，用下划线隔开。名称分为头尾两两部分，用下划线隔开。头部分表示此图

48、片的大类性质，例如广告、标志、菜单、头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等按钮等等尾部分用来表示图片的具体含义。尾部分用来表示图片的具体含义。下面是几个样例，大家应该能够一眼看明白图片的意义：下面是几个样例，大家应该能够一眼看明白图片的意义：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpgpic_hill.jpg.第45页，共49页，编辑于2022年，星期二一般来说一般来说:n放置在页面顶

49、部的广告、装饰图案等长方形的图片我们放置在页面顶部的广告、装饰图案等长方形的图片我们取名：取名：bannern标志性的图片我们取名为：标志性的图片我们取名为：logon在页面上位置不固定并且带有链接的小图片我们取名为在页面上位置不固定并且带有链接的小图片我们取名为:buttonn在页面上某一个位置连续出现，性质相同的链接栏目在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：的图片我们取名：menun装饰用的照片我们取名：装饰用的照片我们取名：picn不带链接表示标题的图片我们取名：不带链接表示标题的图片我们取名：title第46页，共49页，编辑于2022年，星期二文文件件命命名名

50、原原则则 n每一个目录中应该包含一个缺省的每一个目录中应该包含一个缺省的htmlhtml文件，文件名统一用文件，文件名统一用index.htm index.htm n文件名称统一用小写的英文字母、数字和下划线的组合。文件名称统一用小写的英文字母、数字和下划线的组合。n命名原则的指导思想一是使得你自己和工作组的每一个命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用件夹中使用“按名称排例按名称排例”的命令时，同一种大类的文件的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换