网页设计基本概念

第1讲网页设计基本概念引言Internet与WWW网页制作涉及的一些重要概念网页的内容网页的类型网页制作的编程语言与编辑工具设计Web站点的一般步骤2023/1/131a1.1引言

无论是在Internet上创建Web站点和发布主页，还是在Intranet上张贴文本和图形文件，都需要涉及设计Web站点和制作网页。本讲将首先介绍如下一些基本问题：•Internet与WWW；•网页制作涉及的一些重要概念；•网页制作的编程语言与编辑工具；•设计Web站点的一般步骤。2023/1/132a1.2Internet与WWW

20世纪60年代末，美国人开展计算机网络互联研究，拉开了计算机网络研究的序幕。20世纪80年代以来，随着计算机技术的发展和完善，全世界越来越多的计算机采用各种通信媒体连接起来，组成了一个超级的“网络”，这就是人们所称的“Internet”。2023/1/133a

Internet是世界上最大的互联网络。实际上它是把全世界各个地方已有的各种网络，例如计算机网、数据通信网以及公用电话交换网等互联起来，组成一个跨越国界范围的庞大的互联网，因此，也称为“网络的网络”，参见图1-1。2023/1/134a图1-1Internet的用户视图及内部具体结构2023/1/135a一、对Internet的理解1.从网络互联的角度来看Internet利用成千上万个具有特殊功能的专用计算机（称为路由器或网关），通过各种通信线路，把分散在各地的网络在物理上连接起来。2.从网络通信的角度来看Internet是一个用TCP/IP（TransmissionControlProtocol/InternetProtocol）协议把各个国家、各个部门、各种机构的内部网络连接起来的超级数据通信网。2023/1/136a3.从提供信息资源的角度来看Internet是一个集各个部门、各个领域内各种信息资源为一体的超级资源网。4.从网络管理的角度来看Internet是一个不受政府或某个组织管理和控制的，包括成千上万相互协作的组织和网络的集合体。2023/1/137a二、Internet的特点1.TCP/IP协议是Internet的核心2.Internet实现了与公用电话交换网的互联3.Internet是一个用户自己的网络2023/1/138a三、对WWW的理解WWW(WorldWideWeb)可以译为“环球网”、“万维网”，全国科学技术名词审定委员会推荐使用的译名为“万维网”。1984年提出了一种WWW所依存的超文本(hypertext)数据结构，1989年发展成为一种新型的信息传播与处理技术，1991年CERN向世界公布了WWW技术。2023/1/139a

WWW是一种分布式多媒体超文本系统。所谓“超文本”是指它的信息组织形式不是简单地按顺序排列，而是由指针连接的复杂的网状交叉索引方式。WWW的出现对Internet的发展起了巨大的推动作用，作出了重大的贡献。WWW本身是多种技术组合的产物，它可以不依赖于Internet的存在而运行。而WWW与Internet相结合，更使Internet如虎添翼，为Internet的进一步普及铺平了道路。2023/1/1310a四、WWW的运行机制WWW的运行机制是使用客户机/服务器模式。当用户查询信息时，便执行一个客户机程序，并输入一个统一资源定位地址(uniformresourcelocation，URL)，客户机程序也被称为“浏览器”（browser）程序。随后，浏览器程序将成为一个客户，该程序将负责对用户的直接服务。2023/1/1311a它将用户的要求转换成一个或多个标准的信息查询请求，通过Internet发送给远方提供信息的服务器；而服务器则执行一个服务器程序。Web的客户机程序与服务器程序之间通过超文本传输协议（hypertexttransferprotocol,HTTP)进行通信，如图1-2所示。2023/1/1312a图1-2WWW的客户机/服务器模式2023/1/1313aHTTP提供的功能包括实现Web客户机与服务器的连接，发出带文件名的访问请求，接收文件以及关闭连接等。为了使客户机程序能找到位于整个Internet范围内的某种信息资源，WWW系统使用统一的URL。客户机程序就是凭借输入的URL找到相应的服务器并与之建立联系和获得信息的。服务器提供的信息一般是用超文本标记语言（hypertextmarkuplanguage,HTML)写成的信息文件。2023/1/1314a由于HTML是一种统一的标准语言，所以，不管服务器程序如何不同，或者服务器所在站点的计算机操作系统存在多大差别，用HTML文件提供的信息最终总能为客户机程序所理解和显示。2023/1/1315a

在实际运行中，当服务器接到客户机的信息查询请求之后，便完成相应的操作，将查出的结果通过Internet全部传送到客户机的计算机内存中。客户机再将服务器送来的结果转化为一定的显示格式，通过友好的图形界面（例如，Windows）展示给用户。这一过程用户是感觉不出来的。WWW是一种图形化的Internet服务，它的资源极其丰富。2023/1/1316a1.3网页制作涉及的一些重要概念制作网页的目的，一般说来是为了将其发布到网(局域网或者Internet)上，这就涉及到建立Web站点，并将站点发布到某一个WWW的Web服务器上。另外，网页制作好以后，需要用浏览器进行浏览。在浏览网页时，第一个页面通常称为主页。2023/1/1317a一、Web服务器在WWW中，Web是由成千上万台彼此可以通信的计算机组成的全球网络。其中，提供信息的每一台计算机均称为Web服务器，又称为主机。人们利用统一资源定位地址（URL）的标准格式，提供万维网中Web服务器的网址。如果使用超文本传输协议（HTTP）来提供万维网信息资源空间站点地址的话，则该地址的格式为“http：//…”。2023/1/1318a例如，“中国互联网络信息中心”在万维网中的站点地址是“”。如果用户在MicrosoftInternetExplorer或者NetscapeNavigator浏览器“地址”处输入该地址，便可以浏览到该站点主页的信息，参见图1-3。2023/1/1319a图1-3中国互联网络信息中心的主页面(用域名登录)2023/1/1320a

其中，“”是“中国互联网络信息中心”的域名。在该域名前面加上“WWW”仅表明该站点是Web服务器，并非用它来帮助确定其位置。所以，当我们寻找“中国互联网络信息中心”在万维网中的站点地址时，输入“”与输入“”是等价的。2023/1/1321a域名实质上是主机名字的一种标识，它与IP地址是一一对应的。例如，域名“”的IP地址是“9”。IP地址具有32位二进制数字。为了便于用户记忆，人们发明了利用域名代替IP地址的直接使用。因此，输入用IP地址表示的站点地址“http://9”，与输入用域名表示的站点地址“”，其效果是相同的，如图1-4所示。2023/1/1322a图1-4中国互联网络信息中心的主页面(用IP地址登录)2023/1/1323a:8001/Windows/project.html文件文件夹通讯端口服务器名称通讯协议URL(UniversalResourceLocator,全球资源定位法)，URL所代表的正是Web服务器的网址。2023/1/1324a协议URL所连接的服务实例http://ftp://mailto:Web服务文件传输服务/

mailto:wjy@表1-2URL所链接的服务2023/1/1325a二、Web浏览器在WWW中，Web浏览器是使其得以正常进行工作的关键组成部分之一。Web浏览器也是人们通过个人计算机浏览Internet时必需的工具软件。它在读取Web服务器上的HTML文件的同时，必须与组成万维网的成千上万台Web服务器中的一台进行通信联系。2023/1/1326a当我们的计算机与上述主机联系成功以后，该主机便会负责查找到我们所要的文件，并将其传回到我们的计算机上。另外，还会将在“index.htm”文件中所包含的一些相关的图像也传回来，而Web浏览器就将传回来的所有信息显示在计算机屏幕上。2023/1/1327a目前，Web浏览器的主要开发公司是微软(Microsoft)和网景(Netscape)。他们开发的两种主流浏览器MicrosoftInternetExplorer(简称IE)和NetscapeNavigator/Communicator，在可视化方面的差别甚微，但对一些特殊技术的支持却有很大差异，例如，对Java和ActiveX等。另外，虽然上述两种浏览器都支持HTML，但NetscapeNavigator/Communicator对HTML代码的解释要比IE严格得多。2023/1/1328a三、Web网页用浏览器从网上看到的信息统称为网页。一般来说，人们利用浏览器与Internet上某一个Web服务器连接成功以后，在浏览器上首先显示的文档就是该Web服务器的起始页，称为“主页”，其他的页面就是网页。2023/1/1329a图1-5“中国互联网络发展状况统计”的页面2023/1/1330aWeb服务器的最主要特征之一就是它具有使一个HTML文件链接到另一个HTML文件的能力，这种能力称为“超链接”。另外，Web服务器具有的这种超链接能力，还可以使位于世界不同地方的任何两台Web服务器中的信息连接起来。什么是超链接——一种与其它文件的链接，当用户点击后，所链接的信息就能显示出来。2023/1/1331a

一般来说，Web页面的元素有文本、列表、图像、超链接、书签、音频、视频、表格、表单和框架等。其中，表格、表单和框架属于复合元素，它们本身可以包含多种基本元素。这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些正是本课所要阐述的主题。2023/1/1332a1.4网页的内容请思考一下网页包含什么样的内容？2023/1/1333a1.5静态网页和动态网页

静态网页是指不应用程序而直接或间接制作成html的网页，这种网页的内容是固定的，修改和更新都必须要通过专用的网页制作工具，比如Dreamweaver、Frontpage等，而且只要修改了网页中的一个字符或一个图片都要重新上传一次覆盖原来的页面。2023/1/1334a

动态网页是指使用网页脚本语言，比如php、asp、、jsp等，通过脚本将网站内容动态存储到数据库，用户访问网站是通过读取数据库来动态生成网页的方法。网站上主要是一些框架基础，网页的内容大都存储在数据库中。当然可以利用一定的技术使动态网页内容生成静态网页，这样有利于网站的优化，方便搜索引擎搜索。

静态网页和动态网页最大的区别，就是网页是固定内容还是可在线更新内容。2023/1/1335a动态网页的实现

2023/1/1336a静态网页的实现

2023/1/1337a五、从事网页设计所需要的软、硬件硬件：一台配备64MB内存的Pentium计算机就够了，最多是再加上调制解调器，好将设计完毕的网页上传至Internet。网页编辑软件：网页编辑软件可以分成两种，一种是类似记事本，另一种则是可视化(Dreamweaver)网页编辑程序。2023/1/1338a图像动画处理软件：常见的影像处理软件有AdobePhotoShop、MacromediaFlash、Director、CorelDraw、UleadPhotoImpact、AppleQuickTimeVR、QuickDraw3D等。浏览器软件：目前常见的浏览器有NetscapeCommunicator及MicrosoftInternetExplorer网页空间：用来存放网页的存储空间，位于提供相关服务的网络服务器上。2023/1/1339a1.4网页制作的编程语言与编辑工具在1991年，当WWW刚刚问世的时候，Web网页就已经存在了。当时一些从事WWW研究的人士组织起来，制定了一些标准。由于有了这些标准，才使得全世界范围内的计算机可以相互交流信息。其中，一个十分重要的标准就是超文本标记语言（HTML)。HTML作为制作Web页面的编程语言，完全控制着文本和图像的显示方式。2023/1/1340a一、HTML：HTML是“HyperTextMarkupLanguage”的缩写，中文翻译为“超文本标记语言”。二、XML：XML是“ExtensibleMarkupLanguage”的缩写，中文翻译为“可扩展标记语言”。2023/1/1341a三、浏览器端的Script(描述语句)：Script是一段嵌在HTML原始代码内的小程度。2023/1/1342a四、服务器端的Script(描述语言)：目前常见的服务器端Script有ASP程序和CGI程度两种。ASP是“ActiveServerPages”的缩写，中文翻译为“动态服务器网页”。CGI是“CommonGatewayInterface”缩写，中文翻译为“通用网关接口”，2023/1/1343a五、Dreamweaver

MxDreamweaverMX是WEB

站点开发的中心环节。完全用户自定义控制可以迅速完成页面以及站点的设计。Javascript

行为库以及可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性。通过

Dreamweaver

与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布个电子商务网站的构建。到目前为止，全世界范围超过

60%

的专业网页设计师都在使用

Dreamweaver。

2023/1/1344a六、Microsoft

FrontPage

2000,2002(xp)使用Frontpage2000创立主页,你能真正体会到“功能强大,简单易用”的含义。

页面制作由Frontpage中的Editor完成,其工作窗口由3个标签页组成,分别是WYSIWYG（所见即所得）的编辑页,HTML代码编辑页,预览页。站点管理功能由Explorer完成.是2000的优势所在.预置了50种主题(Themes),便于设计者创立页面风格一致的站点。本站点也是用FP2000制作的，极力向你推荐的工具！2023/1/1345a1.5网站建立的一般流程一般来说，网页制作可分为三个阶段：1．前期工作准备阶段：在此阶段主要完成以下几个方面的工作：拟定网页主题、搜集相关资料、规划网页内容、绘制结构草图。2．中期制作阶段：在此阶段主要利用各种网页制作工具，开始制作网页，并不断地进行上传与测试，直到最后制作完毕。3．后期维护阶段：网页制作完成后，可进行发布和推广应用。根据需要，对网页进行更新与维护。2023/1/1346a介绍的主要内容一.Web网站设计规划二.总体设计方案主题鲜明三.网站的栏目板块及网站结构四.网站草图与网页布局五.设计导航结构及链接结构六.收集网站所需资料七.创建高浏览器兼容的站点八.网站测试2023/1/1347a一.Web网站设计规划创建Web网站的第一步是设计规划，在制作之前对网站进行规划是非常重要的。要明确设计网站的目的和用户需求，从而做出切实可行的设计计划。根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。2023/1/1348a在设计规划时我们应考虑

（1）建站的目的是什么?

（2）为谁提供服务和产品?（3）能提供什么样的产品和服务?

（4）网站的目的消费者和访问者的特点是什么?

（5）产品和服务适合什么样的表现方式（风格）?2023/1/1349a二.总体设计方案主题鲜明1.定位网站和主题Web网站主页应具备得基本成分：页头：准确无误地标识你的网站和企业标志E-mail地址：用来接收用户垂询

联系信息：比如普通邮件地址或电话版权信息：声明版权所有者等

2023/1/1350a2.定位网站CI形象所谓CI(CorporateIdentity)，是借用的广告界术语，意思是通过视觉来统一企业的形象。

一个杰出的网站，和实体公司一样，也需要整体的形象包装和设计。准确的、有创意的CI设计，对网站的宣传推广有事半功倍的效果。设计网站的标志（logo）

设计网站的标准色彩

设计网站的标准字体

设计网站的宣传标语

2023/1/1351a（1）设计网站的标志（logo）logo是你网站特色和内涵的集中体现

标志可以是中文、英文字母，可以是符号、图案，还可以是动物或者人物等等。

标志的设计创意来自你网站的名称和内容2023/1/1352a标志的设计创意来源①网站有代表性的人物、动物、花草，可以作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。②专业性的网站，可以以本专业有代表性的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。③最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。2023/1/1353a现实生活中的Logo2023/1/1354a（2）设计网站的标准色彩“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如：IBM的深蓝色，肯德基的红色条形，Windows视窗标志上的红蓝黄绿色块，都使我们觉得很贴切，很和谐。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱通常适于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色2023/1/1355a（3）设计网站的标准字体标准字体是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现网站的“与众不同”和特有风格，可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC机里没有安装你的特别字体，那么你的辛苦设计制作便会付之东流。2023/1/1356a（4）设计网站的宣传标语网站的宣传标语也可以说是网站的精神、网站的目标，可用一句话甚至一个词来高度概括，它类似于现实生活中的广告金句。2023/1/1357a三.网站的栏目版块及网站结构你是否能将最好的、最吸引人的内容放在最突出的位置以吸引更多的网友浏览网站？在制定栏目的时候，要仔细考虑，合理安排

网站的栏目

网站和版块

网站的目录结构

其他2023/1/1358a1．网站的栏目栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来一般的网站栏目安排要注意以下几方面：

（1）记住一定要紧扣你的主题即将你的主题按一定的方法分类并将它们作为网站的主题栏目（2）设立一个最近更新或网站指南栏目（3）设立一个可以双向交流的栏目（4）设立一个下载或常见问题回答栏目2023/1/1359a2．网站和版块版块比栏目的概念要大一些，每个版块都有自己的栏目。关于版块方面，主要是门户网站等较大ICP需要考虑的问题。设计时应注意：（1）各版块要有相对独立性。（2）各版块要相互关联。（3）版块的内容要围绕网站主题。2023/1/1360a3．网站的目录结构网站的目录是指你建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于网站本身的上传维护、内容及未来的扩充和移植有着重要的影响。组织好网站的结构会便于以后的管理和维护工作。2023/1/1361a常用的方法在本地计算机上创建一个专门放置网站所有文件的文件夹，然后在该文件夹中制作和编辑Web页。当发布网站时，你就可以复制该文件夹到Web服务器上，以便让更多的人可以访问到你的网站。将你的网站内容以目录结构组织起来以方便维护和导航，将相关的文件放置在同一个文件夹里。2023/1/1362a需要注意的是：（1）不要将所有文件都存放在根目录下。所有文件都存放在根目录下，会造成文件管理混乱从而影响工作效率，另外还会影响上传速度。（2）按栏目内容建立子目录。子目录首先按主菜单栏目建立。对于次要栏目，需要经常更新的栏目可以建立独立的子目录。而不需要经常更新的栏目，可以合并放在一个统一目录下。所有程序一般都存放在特定目录下。所有需要下载的内容也最好放在一个目录下。（3）在每个主目录下都建立独立的images目录为每个主目录建立一个独立的images目录是最利于管理的。根目录下的images目录放首页和一些次要栏目的图片。目录的层次不要太深，为了维护方便，建议不要超过3层。2023/1/1363a（4）其他注意方面①不要使用中文目录名，使用中文目录名可能对网址的正确显示造成困难。②不要使用过长的目录名，太长的目录名不便于记忆。③尽量使用意义明确的目录名，你可以用Flash、Dhtml、Javascript来建立目录名，也可以用1，2，3来建立目录名，但是哪一个更明确，更便于记忆和管理呢?显然是前者。2023/1/1364a四.网站草图与网页布局：一般是在纸上绘制出网站的布局和大致外观，也可在特定的软件中（如Freehand和Fireworks）精确地绘制草图。当具体制作网站内容时，将一切参考网站草图进行。：DreamweaverMX提供了重复使用页面布局的简便方法，即制作网站时使用模板。使用模板技术不但可以提高网页制作的效率，而且当我们决定修改整个网页布局时，仅需更改模板即可。网站草图网页布局2023/1/1365a五.设计导航结构及链接结构Web网站设计中，导航结构的设计一直是网页设计者比较关心的问题。导航栏对整个网站内容有提纲的作用，同时，一些广告和网站更新通知也经常放置在导航栏中，导航栏往往需要随时改变。2023/1/1366a1．导航结构的设计导航栏一定要清晰、醒目。通常导航栏要在“第一屏”能显示出来，横向放置的导航栏要优于纵向的导航栏。下面这些方法会非常有用：（1）“当前位置”：在每一页的顶部提示当前所在页所处的位置，以便让浏览者知道身在何处，并可轻松地返回到上一层页面。（2）“搜索和索引”：在网站中添加搜索和索引功能，可以让浏览者快速查找到所需要的内容。（3）“反馈信息”：提供电子邮件地址或电话等信息，以便让浏览者能联系到网站的网管人员。遇到任何问题都可以快速得到反映并解决。2023/1/1367a2．链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点链接，也可以和多个点链接。这些点并不是分布在一个平面上，而是存在于一个立体的空间中。我们研究网站的链接结构的目的在于用最少的链接，使得浏览最有效率。2023/1/1368a链接结构的两种基本方式树状链接结构（一对一）首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。星状链接结构（一对多）每个页面相互之间都建立有链接。立体结构像东方明珠电视塔上的钢球。优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。2023/1/1369a六.收集网站所需资料网站最忌讳多而杂，在搜集资料时不要追求内容多而全，而应追求精、专、新，包括图像、文本及多媒体（Flash、