第一讲 网页设计概述

【教学内容】

• 本节课主要讲解了web相关概念，包括：web服务器及客户机、URl、常用协议、IP地址及域名等基础知识。
• 重点讲解了什么是网页、什么是网页设计以及超级链接、网站和主页的一些概念。
• 简单介绍了网页设计常用工具、网站建设的基本步骤及应注意的问题等知识。
• 网站建设评判标准
  　

【教学目的】

• 了解web服务器及客户机、URl、常用协议、IP地址及域名等相关概念
• 了解什么是网页、什么是网页设计以及超级链接、网站和主页的一些概念
• 了解网页设计常用工具
• 掌握网站建设的基本步骤
• 了解网站建设时应注意的问题
• 了解网站建设的评判标准
  　

【教学重、难点】

• 重点：网页设计中的若干术语 （web服务器及客户机、URl、常用协议、IP地址及域名、网页、网站、主页、超级链接）；网站建设的基本步骤。
• 难点：网站建设的基本步骤。
  　

【教学方式】

采取讲授、讨论和案例分析相结合的方式。

一、 网页设计相关概念

1.web简介

WWW是World Wide Web （世界宽边网络）的缩写，也可以简称为Web，中文名字为“万维网”。

20世纪40年代以来人们就梦想能拥有一个世界性的信息库。在这个数据库中信息能被全球的人们存取。随着科学技术的迅猛发展，人们的这个梦想已经变成了现实。目前正在使用的最流行的系统叫"WWW"(World Wide Web)万维网，她可以把全球很多资源互相连接，从而达到快速访问，信息共享的目的。

全世界目前大概有过亿的Web站，每个Web 站都可以通过超链结(Hyper link)与其它Web 站连接，任何人都可以设计自己的个人主页，放上Web 站，然后在你的个人主页上面进行链结，与他人的网页进行连接，或是连到其他的Web站点；别人也一样可以连到你的Home Page ，或是你的Web 站，整个信息网就这样编织了起来，形成一个巨大的信息网络。

典型的web站点有，新闻信息网站、娱乐网站、教育站点、电子邮件站点、服务站点、照片共享站点、社区、博客与维基等等，Web的使用已遍及了全球。从目前的情况来看，web仍具有巨大的发展潜力，未来其应用将涵盖从办公室共享信息到市场营销、服务等广泛领域。另外，web带来的电子贸易正改变着现今商业活动的传统模式，其提供的方便而广泛的互连必将对未来社会生活的各个方面带来影响。

2.web服务器及客户机

Web服务器：存储和管理供给全球各地用户浏览网页的服务器，软件支持如：运行在windows 2000 sever系统上的IIS（Internet Information System）Internet信息服务器，运行在unix系统上的apache等；其中最常见的是IIS，它是用于配置和管理WEB站点的软件，能响应客户端用户的请求从而下载网页到客户端；

客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件；目前主要是Internet Explorer（IE）和Netscape；

3.URl、常用协议、IP地址及域名

URL：统一资源定位符 (Uniform Resource Locator, URL)，是因特网上可以访问的文件的惟一的地址。对于Intranet服务器或万维网服务器上的目标文件，可以使用“统一资源定位符 (URL)”地址来确定它的位置。URL的一般格式为“scheme://host:port/path?query#fragment ”。

HTTP协议：（Hypertext Transfer Protocol，超文本传输协议）是TCP/IP协议的一部分，用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。

FTP：（File Transfers Protocol）文件传输协议，在互联网上上传或下载文件的协议；

IP地址：用于标识互联网上各类计算机和服务器的唯一地址，其由32位二进制组成，分成四段，每段8位，如：192.168.0.1；

域名：是替代枯燥乏味的IP地址的一种分层次的表示方式；如：www.ahip.cn；www.yahoo.com.cn ；

网页中使用HTTP协议和域名定义的资源地址（URL）典型事例：Http://www.sina.com.cn；使用IP地址定义资源地址（URL）的典型事例：http://61.157.243.4。

二、 网页、网页设计、网站和主页

1.什么是网页

我们学习的时静态网页设计，那么我们不免有这样的疑问，究竟什么是网页，网页使用来干什么的，他有什么作用？只有明白了网页的概念，我们才能进行所谓的设计。

先看下面几个图例：

图1-1  四川信息职业技术学院主页

图1-2 腾讯网站主页

图1-3 联想网站主页

图1-4 163免费邮件主页

图1-5 淘宝网主页

图1-6 搜狐网站主页

看了这几个网页，我们可以总结出网页就是包含了文字、图片、动画、声音等内容的可以在网上传输的界面。他可以用来共享信息、宣传自己、服务用户等。比如：联想的网页上除了有对联想机型等的介绍，还包括了售后服务信息这个关键的模块；我们学院的网站上有我们学院的简介、最新动态，为宣传学校做出了突出的贡献，同时也给广大用户提供了信息的共享，让广大用户可以方便的了解到我们学院最近发生了哪些有意义的大事，另外网页上还有行政办公系统和教务办公系统，教师可以在网上办公，学生可以通过教务系统选课、查询成绩等，有效的服务了广大师生。

我们还了解到同样是网页，给我们的视觉效果是不一样的，给我们提供的信息也是不尽相同的。所以说不通类型的网页时不一样的，那么我们平常经常到音乐网站上听一些音乐，比如久久音乐网、一听音乐网等，同样是音乐，给我们的感觉是否完全相同哪？答案是否定的，这就是说，相同性质（类型）的网页也是不一样的，从而得出了一个结论，网页是丰富多彩的。那么这么丰富多彩的网页究竟如何设计的呢？下面我们就来解决网页设计的问题?

2.什么是网页设计

我们了解了“什么是网页，网页是干什么的”这个问题后， 我们来看一看什么是网页设计。

网页设计是一种建立在新型媒体之上的新型设计。它具有很强的视觉效果、互动性、互操作性、受众面广等其它媒体所不具有的特点，它是区别于报刊、影视的一个新媒体。它既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效；为了更好的体现网页这一新型设计的特点，将它和传统媒体进行比较，了解它的优势所在；一个成功的网页设计，首先在观念上要确立活跃的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网页的兴趣，在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。

网页设计区别与网页制作，是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；而网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。这就相当于一个干脑力活，一个是干体力活，但是一个优秀的网页设计师对着两到工序都是十分了解的，因为他要知道自己的设计稿，是否会为网页制作人员制作页面带来麻烦。

在网站设计的流程中我们还会听到说UI/UE的说法，这是两个较为重要的环节，主要都是为浏览者着想的。

UI(User Interface,用户界面): UI的意思是用户界面，是英文User Interface的缩写。既浏览者在浏览网页时，通过视觉所能观察到的一切事物，这些都是需要设计的部分，在互联网行业，做界面设计的人被贬义的称为“美工”。

其实我们一开始接触电脑时就应该对UI有很深的认识，从最早的DOS操作系统到Windows 1.0，再到Windows XP。我们开机所看到的就叫用户界面，DOS操作系统黑底白字的文本界面，Windows XP的经典蓝色界面，这些都是用户界面的发展历程。从简单到复杂，从庸俗到华丽，也证明了用户界面设计越发成熟。

UE(User Experience,用户体验):UE的意思是用户体验，英文叫做User Experience，缩写为UE, 或者UX。是指一个浏览者在访问一个网站或者使用一个产品时的印象和感受，对网站的布局、色彩、功能、感觉是否满意，在第一次访问离开后是否还想再回访，是否能发现明显的Bug（既网站在浏览过程中出现的错误）。

网页设计要注意一下几个方面：

1）内容及框架结构(Frame Sets)

2）图象区块(Image Maps)与flash

3）特效等

3.超级链接、网站和主页

超级链接：所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序 。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

什么叫超级链接呢？举个简单的例子；如果你在阅读某篇文章时，遇到一个不明白的词语，只要在这个词语上单击一下，即可出现它的详细说明，看完后点一下返回按钮，又可继续阅读，实现这种功能的方法就叫做超级链接 。这样的链接可以是文字，其他文档，声音，图片，数字电影等。

网站：网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

主页：网站中的众多网页通过超级链接的方式集合起来的。当我们打开网站时的映现在我们眼前的第一个网页通常被叫做主页，命名为“index”索引（目录）的意思，在他上面通过超级链接可以打开网站上的其他页面。

三、网页设计常用工具

• 网页美化工具（图像）：photoshop和fireWork等

• 网页美化工具（动画）：flash和swish等

• 网页排版工具：DreamWeaver和FrontPage等

Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。

Fireworks是由Macromedia公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。
作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的 网络图像生成器。用户可以从http://www. macromedia.com／站点下载该软件。

Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。

FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便。

Swish软件可以对指定的文字进行各种特效处理，控制文字的移动和位置，最后可以输出swf格式的文件，并能导入到Ｆlash动画中加以编程。虽然目前Swish只提供了一些文字效果的制作，但据开发该软件的公司说以后将有图片、声音、按钮和矢量图支持。

Dreamweaver是Macromedia公司推出的一款大众化的网页制作软件，它具有可视化编辑界面，用户不用编写复杂的HTML源泉代码就可以生成　跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网页制作人员所掌握。市面上有许多种网页编辑软件，有的重视效率，有的强调版面设计，而这些功能在Dreamweaver中都可以很方便地实现。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页。所以，Dreamweaver是网页设计者的首选工具。

Dreamweaver支持动态HTML技术，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态　HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果。而Rpundtrip HTML技术能够让用户轻松编辑械，不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计与制作工具。

四、网站建设的基本步骤及应注意的问题

网站的制作与建立并不复杂，但要制作一个优秀的网站并非易事。一个优秀的网站是依靠完美的规划、出色的设计理念、技术与软件等多方面合作完成的。网站的制作主要包括网页制作，网站的建立过程还包括事前企划，事后维护更新等工作，即要有一个合理的网站制作流程。

一个网站的制作流程和一个电视节目的制作过程很相像，包括策划、制作、广告宣传，以及每天更新等。如果要制作一个个人网站就简单多了。

网站制作的基本流程与顺序是十分重要的。因为网站的制作流程可以明确工作目标和方向，提高工作效率，使网站结构清晰。
　

1.网页设计基本步骤

A 进行用户调研，确定网页的内容（主体）：确定网站的名称什么，也就是说确定我们要做的究竟是一个什么网站；确定在这个名称主题下，用户要表现的主要内容是什么，即用户的意图，用户想从那个侧面来表现他的主题。

B 设计网页栏目及组织结构：网站结构一般包括三种，即层状结构、线性结构、Web结构（网状结构）。

• 层状结构：层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息；

• 线性结构：线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求；

• Web结构：Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。

C 准备素材：收集与整理相关资料

D 界面设计：根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构

E 网页排版（页面实现）:根据所设计的界面进行网页排版。

F 网页测试与发布：网页测试包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后, 方可正式在Internet上发布。网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。

G 网页推广与维护：网站建成之后，随后的工作就是进行推广。网站如果不进行推广，就容易成为信息的孤岛，长期没有多少人访问，渐渐地失去了建站的意义。

2.制作网页时要注意的问题

A 网页的标题要简洁，明确。

B 对重点内容要强调显示。

C 网页中插入的图片要尽量的小。

D 图形要附加文字说明，以便关闭图像时查看。

E 网页中引用的资料及商标（或图标），不能侵犯版权。

五、网站建设的评判标准

     根据我们课程建设团队老师的多年的项目经验，并容纳一些企业建站思想，我们总结了如下评判标准，在网页设计时可做参考：

【课后小结】

通过对web相关概念的讲解，使学生了解web服务器及客户机、URl、常用协议、IP地址及域名等基础知识。通过典型网站案例分析和讨论使同学们明白了网页、网站、主页的区别，了解了网页设计及超级链接的概念。本节课还简单地介绍了网页设计常用工具、网站建设的基本步骤及应注意的问题等知识。

【练习题】

填空题：

1.Internet是在__________经过不断发展变化而形成的。
2.ＷＷＷ是__________的缩写，也可以简称为Ｗeb，中文名字为“万维网”。
3.为了区别各个站点，必须为每个站点分配一个唯一的地址，这个地址即称__________
4.ｃ类地址的表示范围为__________，默认网络掩码为__________。
　

选择题：

1．下列不属于Macromedia公司产品的是（）。
A．DreamweaverB．FirewoksC．FlashD．Frontpage
　

问答题：

1.常见的网页元素有哪些？

2.上网浏览一些著名网站（如搜狐、网易、新浪、腾讯(QQ)等）的主页，并这些网页和我们学院的主页在结构和版面等方面有什么区别？

3.请浏览我院主页，至少说出两种网页中包含的主要网页元素。
4.常见的网页制作工具有哪些？
5.列举你所了解的美化网页工具。
6.总结建立网站的基本流程。