网页与网站基础知识

网页与网站基础知识第一页，共四十九页，2022年，8月28日越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？在一个网站开发者眼中，如果脱离了网页的实用性来谈网页的美，是不实际的。设计制作一个网页，首先是高效科学地安排页面，然后才是对它进行进一步的美化。本课程就带领同学们如何做出一个美观而实用的网站。第二页，共四十九页，2022年，8月28日第一章网页与网站基础知识网页与网站的概念网页的设计网站的规划网站的开发流程第三页，共四十九页，2022年，8月28日

1.1网页与网站的概念Internet的概述WWW网页与网站域名与IP地址第四页，共四十九页，2022年，8月28日1.1.1Internet的概述

Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。第五页，共四十九页，2022年，8月28日Internet最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部高级研究计划署协助开发的ARPANET。最初是只允许国防部人员进入的封闭式网络。到1987年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的Internet主干网雏形NSFNET。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活。第六页，共四十九页，2022年，8月28日从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，在10多年的时间里，中国Internet发生了飞速的发展，截至2006年底，我国网民人数达到了1.37亿，即每十人中就有一人是网民。10%的网民普及率将是互联网发展的高速拐点，突破10%之后，中国互联网将迎来更快速的增长期。另外网站数、IP地址等也迅速增长，分别达到84.3万和9800万。从域名、网站数、IP地址等增长情况来看，我国互联网资源得到了全面提升。

Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物等等，而其中WWW和E-mail是最常用的服务。第七页，共四十九页，2022年，8月28日

WWWWWW(WorldWideWeb)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问Internet上的服务器端，迅速地获得所需的信息。如图所示。Internet浏览器WEB服务器HTTP网络协议第八页，共四十九页，2022年，8月28日●用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。●URL的一般格式如下：

〈通信协议〉：//〈主机域名〉/〈路径〉/〈文件名〉

其中，〈通信协议〉指提供该文件的服务器所使用的通信协议；〈主机域名〉指上述服务器所在主机的域名；〈路径〉指该文件在主机上的路径；〈文件名〉指文件的名称。例如

其中，http是WWW服务器与WWW客户之间遵循的通信协议。用来标识该文件存储在山西大学的WWW服务器上，第二部分是文件所在的路径，最后一部分sxuc1.htm这个文件的名称。

第九页，共四十九页，2022年，8月28日1.1.3网页与网站◆构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。◆通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。第十页，共四十九页，2022年，8月28日1.1.4域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔。比如：第十一页，共四十九页，2022年，8月28日1.2网页的设计网页主题网页的文字网页的色彩网页版式和布局第十二页，共四十九页，2022年，8月28日1.2.1网页主题

网页的主题指网页所要表现的最主要的思想内涵，可以说是网页的灵魂。主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。第十三页，共四十九页，2022年，8月28日网页的文字

文字是网页最主要的表达形式，尽管图形和解构的表格五彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此。所以，给浏览者一个亲和的文字界面是必要的。

为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px

和14.7px

这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px

的字号比较合适。第十四页，共四十九页，2022年，8月28日1.2.３网页的色彩

在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：色彩的鲜明性

网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。色彩的独特性

网站色彩的选择与搭配要与众不同，这样就可以使得访问者留下深刻的印象。第十五页，共四十九页，2022年，8月28日色彩的合适性

网站色彩的选择与搭配要与网站的内容气氛相适合。色彩的联想性

不同的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露出另外一种气息。页面中各处用色的选择

首先确定主色。主色是指页面中相对来说较大面积使用的色彩。主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。接下来是确定辅助色。辅助色可以有多种，其应用范围包括输入框的颜色，表格边框颜色、表格的底色、小图标用色、文字颜色以及链接色等等。第十六页，共四十九页，2022年，8月28日1.2.４网页版式和布局

版面设计的步骤

（1）画出页面的结构草图：只需画出页面的大体结构。注：分辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；

（2）布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调

（3）定格：确定出完美的布局方案，定格为最后的版式。

第十七页，共四十九页，2022年，8月28日T型结构同字结构川字结构三字结构常见网页布局

第十八页，共四十九页，2022年，8月28日T型结构第十九页，共四十九页，2022年，8月28日同字结构

第二十页，共四十九页，2022年，8月28日川字结构第二十一页，共四十九页，2022年，8月28日三字结构第二十二页，共四十九页，2022年，8月28日单一结构

第二十三页，共四十九页，2022年，8月28日1.3网站的规划定位网站主题和名称网站的风格网站的CI形象确定网站的栏目和版块确定网站的目录结构和链接结构第二十四页，共四十九页，2022年，8月28日1.3.1定位网站主题和名称设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。

对于题材的选择，应注意：（1）主题要小而精。定位要小，内容要精。调查结果也显示，网络上的“主题站”比“万全站”更受人们喜爱，就好比专卖店和百货商店。（2）题材最好是你自己擅长或者喜爱的内容。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。

（3）题材不要太滥或者目标太高。“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。

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

（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里举几个例子：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。

第二十六页，共四十九页，2022年，8月28日1.3.2网站的风格

风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。第二十七页，共四十九页，2022年，8月28日风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。如何树立网站风格呢？我们可以分这样几个步骤：

第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。

第二，你需要彻底搞清楚自己希望站点给人的印象是什么。

第三，在明确自己的网站印象后，开始努力建立和加强这种印象。

第二十八页，共四十九页，2022年，8月28日对于确定风格，这里提供一些参考：

1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。

2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。

3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色。

5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。

6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。

7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○

□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉。

8.用自己设计的花边，线条，点。

第二十九页，共四十九页，2022年，8月28日网站的CI形象

所谓CI，是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。标志，色彩，字体，标语是一个网站树立CI形象的关键，确切的说是网站的表面文章，设计并完成这几步，你的网站将脱胎换骨，整体形象就会有一个提高。

第三十页，共四十九页，2022年，8月28日在您的网站主题和名称定下来之后，需要思考的就是网站的CI形象。设计网站的标志(logo)如同商标一样，logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如：新浪用字母sina+眼睛作为标志。标志的设计创意来自你网站的名称和内容。比如：

(1).网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。

(2).网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。

第三十一页，共四十九页，2022年，8月28日新浪用字母sina+眼睛作为标志。北京亿恒伟业房地产开发有限公司的标志是以“亿恒伟业”四个汉字的变形为主体。“亿”字左半部变形为数字“1”，预示着公司将成为行业的龙头老大，也预示者公司全体员工永争第一的拼搏精神和“信誉第一、质量第一”的经营理念，同时也寓意着公司的发展一帆风顺。北京爱永恒影楼的标志是以英文字母“LOVE"和一颗红心为主体，红心中间是抽象的一男一女携手前进的图形，寓意着两个人一颗心，从而寓意着爱永恒。

第三十二页，共四十九页，2022年，8月28日北京市昌平区第一届机关运动会的会徽是以“昌平”的汉拼“CHANGPING”的第一个字母“C”和“机关”的汉拼“JIGUAN”的第一个字母“J”变形组合的绿色跑道和运动员为主题。整个标志充满活力和激情，寓意着昌平区各机关人员在区政府的正确领导下，各项事业蓬勃发展，充满生机！第三十三页，共四十九页，2022年，8月28日设计网站的标准色彩网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

“标准色彩”是指能体现网站型象和延伸内涵的色彩。举个实际的例子就明白了：IBM的深蓝色，肯得基的红色条型，windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。如果将IBM改用绿色或金黄色，我们会有什么感觉？一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。

第三十四页，共四十九页，2022年，8月28日设计网站的标准字体和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC里没有安装你的特别字体，那么您的辛苦设计制作便付之东流啦！设计网站的宣传标语网站的宣传标语可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的“味道好极了”；麦斯威尔的“好东西和好朋友一起分享”；Intel的“给你一个奔腾的心”。

第三十五页，共四十九页，2022年，8月28日1.3.4确定网站的栏目和版块在动手制作网页前，一定要考虑好以下三方面：

(1)确定栏目和版块

(2)确定网站的目录结构和链接结构

(3)确定网站的整体风格创意设计

第三十六页，共四十九页，2022年，8月28日(1)确定栏目和版块栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面：

①

一定记住要紧扣你的主题！

一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。

②

设一个最近更新或网站指南栏目

如果你的首页没有安排版面放置最近更新内容信息，就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客，让你的主页更有人性化。第三十七页，共四十九页，2022年，8月28日

③

设定一个可以双向交流的栏目

不需要很多，但一定要有。比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个“Emailme”的站点更具有亲和力。

④设定一个下载或常见问题回答栏目

网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下载，而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目，会得到大家的喜欢。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。

第三十八页，共四十九页，2022年，8月28日总结以上几点，我们得出划分栏目需要注意的是：

●尽可能删除与主题无关的栏目

●尽可能将网站最有价值的内容列在栏目上

●尽可能方便访问者的浏览和查询

第三十九页，共四十九页，2022年，8月28日上面说的是栏目，我们再看看版块设置。版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。第四十页，共四十九页，2022年，8月28日⑴在网站根目录中开设images

、common

、temp

三个子目录，根据需要再开设media

子目录.images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志logo、banner

条、菜单、按钮等等；common

子目录中放css、include

等公共文件；temp

子目录放客户提供的各种文字图片等等原始资料；media

子目录中放flash,

avi,

quick

time

等多媒体文件

。(2)网站的目录结构第四十一页，共四十九页，2022年，8月28日在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images

和media

的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。按栏目内容建立子目录。目录的层次不要太深。第四十二页，共四十九页，2022年，8月28日目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称.第四十三页，共四十九页，2022年，8月28日关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是动态菜单等等。链接结构第四十四页，共四十九页，2022年，8月28日图片的命名原则

图片的命名原则遵循以下几条规范

：

☆

名称分为头尾两两部分，用下划线隔开。

☆

头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等

☆

尾部分用来表示图片的具体含义。下面是几个样例，大家应该能够一眼看明白图片的意义：

banner_sohu.gif

banner_sina.gif

me