模块一 鉴赏网页

【学习目标】

鉴赏各种不同的网页，从中感受不同类别的网站的风格与特色。从而了解网站发展的历史与现状，并熟悉了解一些网站的相关基础知识。

【任务分析】

鉴赏网页。

【任务实施】

任务一 鉴赏网页

1.网页与网站

（1）网页是Internet中最基本的信息单位，是构成网站的基本元素，是把文字、图形、声音及动画等各种多媒体信息相互链接起来的一种信息表达方式，是承载各种网站应用的平台。通常情况下，网页中有文字和图像等基本信息，有些网页中还有声音、视频和动画等多媒体内容。网页一般由网站LOGO、广告栏、导航栏和信息栏等部分组成，如图1.1所示。

在访问一个网站时，最先映入眼帘的网页称为网站的首页。网站的首页有的用于欢迎访问者，有的用于体现网站的个性，还有的用于选择网站语言等功能，如图1.2所示。

首页只是网页的开场页，单击首页上的文字或图片，即可打开网站的主页，如图1.3所示首页随之关闭。

网站主页与首页的区别在于：主页设有网站的导航栏，是所有网页的链接中心。但多数网站的首页与主页通常合并为一个页面，省略了首页而直接显示主页，这种情况下，首页与主页指的是同一个页面。

（2）网站就是在Internet上，根据一定的规则，使用HTML等工具制作的通过超级链接的形式构成的相关网页的集合。简单说，网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，也可以通过网页浏览器访问网站，获取自己需要的资源或享受网络提供的服务。

根据内容形式与功能结构的不同，基本可以将网站分成九大类别：资讯门户类网站、企业品牌类网站、交易类网站、社区网站、办公及政府机构网站、互动游戏网站、有偿资讯类网站、功能性网站和综合类网站等。

● 资讯门户类网站。

此类网站以提供信息资讯为主要目的，是目前最普遍的网站形式之一。这类网站虽然涵盖的工作类型多，信息量大，访问群体广，但所包含的功能却比较简单。其基本功能通常包含检索、论坛、留言，也有一些提供简单的浏览权限控制，如许多企业网站中就有只对代理商开放的栏目或频道。如新浪、搜狐、新华网等。

● 企业品牌类网站。

企业品牌网站建设要求展示企业综合实力，体现企业CIS和品牌理念。企业品牌网站非常强调创意，对于美工设计要求较高，精美的Flash动画是常用的表现形式。对网站内容组织策划，产品展示体验方面也有较高要求。网站利用多媒体交互技术和动态网页技术对目标客户进行内容建设，以达到品牌营销传播的目的。如联想、IBM、NIKE等企业品牌的官方网站。

● 交易类网站。

这类网站是以实现交易为目的，以订单为中心。交易的对象可以是企业（B2B），也可以是消费者（B2C）。这类网站有三项基本内容：①如何展示商品；②如何生成订单；③如何执行订单。因此，该类网站一般需要有产品管理、订购管理、订单管理、产品推荐、支付管理、收费管理、送发货管理、会员管理等基本系统功能。功能复杂一点的可能还需要积分管理系统、VIP管理系统、CRM系统、MIS系统、ERP系统、商品销售分析系统等。交易类网站成功与否的关键在于业务模型的优劣。企业为配合自己的营销计划搭建的电子商务平台，也属于这类网站。如淘宝、易趣、拍拍等。

● 社区网站。

社区网站指的是大型的拥有众多分类内容的，并有很多注册用户的网站，和BBS类似。如猫扑、天涯等，此外一些大的门户网站的论坛也属于社区网站类型。

● 办公及政府机构网站。

企业办公事务类网站主要包括企业办公事务管理系统、人力资源管理系统、办公成本管理系统和网站管理系统。

政府机构类网站利用外部政务网与内部局域办公网络而运行。其基本功能有：提供多数据源接口，实现业务系统的数据整合；统一用户管理，提供方便有效的访问权限和管理权限体系；可以灵活设立下位子网站；实现复杂的信息发布管理流程。

网站面向社会公众，既可提供办事指南、政策法规、动态信息等，也可提供网上行政业务申报、办理，相关数据查询等。目前很多单位的内联网网站还只能算简单的资讯类网站，还需要为其加上一个多级的权限控制功能，采用B/S结构构建OA系统，即Web OA系统，才会变成办公类网站。如首都之窗、北京税务局网站。

● 互动游戏网站。

这是近年来国内逐渐风靡起来的一种网站。这类网站的投入根据所承载游戏的复杂程度来定，其发展趋势是向超巨型方向发展，有的已经形成了独立的网络世界，让玩家乐不思蜀，欲罢不能。

● 有偿资讯类网站。

这类网站与资讯类网站有点相似，也是以提供资讯为主。所不同者在于其提供的资讯要求直接有偿回报。这类网站的业务模型一般要求访问者按次、按时间或按量付费。

● 功能性网站。

这是近年来兴起的一种新型网站，Google即为其典型代表。这类网站的主要特征是将一个具有广泛需求的功能扩展开来，开发一套强大的支撑体系，将该功能的实现推向极致。看似简单的页面实现，却往往投入惊人，效益可观。如百度。

● 综合类网站。

这类网站的共同特点是提供两个以上典型的服务，如新浪、搜狐。这类网站可以看做一个网站服务的大卖场，不同的服务由不同的服务商去提供。其首页在设计时尽可能地将所能提供的服务都包含进来。

2.网站的风格与布局

（1）在对网页插入各种元素、修饰效果之前，要先确定网页的风格。网页的风格是指网站给浏览者的整体形象，包括站点的CI（标志、色彩和字体）、版面布局、浏览方式、交互性、文字、内容及网站荣誉等诸多因素。例如，网易网站给人的感觉是平易近人的，迪士尼网站给人的感觉是生动活泼的，IBM网站给人的感觉是专业严肃的。

根据不同的网页风格，可以将网页分成商业网页和个人网页。商业网页内容丰富、信息量大，一般都有统一的布局设计；个人网页风格多样、内容专一、形式灵活，更容易创造出美感，如图1.4所示。

确定网页风格后，要对网页的布局进行整体规划，也就是网页上的网站标志、导航栏及菜单等元素的位置。不同网页的各种网页元素所处的位置也不同，通常情况下，重要的元素应放在突出的位置。

（2）常见的网页布局有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、海报型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。

● “国”字形布局。

如图1.5所示，也可以称为“同”字形，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上最常见的一种结构类型。

● “匡”字形布局。

如图1.6所示，这种结构与“国”字形布局其实只是形式上的区别，它去掉了“国”字形布局的最右侧部分，为主内容区释放了更多空间。这种布局中最上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。

● “三”字形布局。

如图1.7所示，这是一种简洁明快的网页布局，国外网站用得较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。

● “川”字形布局。

如图1.8所示，整个页面在垂直方向上分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。

● 海报型布局。

如图1.9所示，这种类型基本上常出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种布局类型常用在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉。

● Flash布局。

如图1.10所示，这种布局是指整个网页就是一个Flash动画，本身就是动态的，画面一般比较绚丽有趣，是一种比较新潮的布局方式。其实这种布局与海报型布局类似，不同的是借助Flash强大的功能，页面所能表达的信息更丰富。其视觉效果及听觉效果如果处理得当，将会是一种非常有魅力的布局。

● 标题文本型布局。

如图1.11所示，标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的东西，下面是正文，如一些文章页面或注册页面等就是这一类。

● 框架型布局。

框架布局结构中常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受欢迎的，有些企业网站也有应用。

● 变化型布局。

即上述几种类型的结合与变化。

【知识链接】

1.网页制作技术

近来，网页已随处可见，网页的功能与用途也已发展到一定程度，与此同时网页开发技术也在不断发展着。

HTML语言是一种早期的用于Web页制作的编程语言，用于描述超文本文件的部分内容，以编写程序代码为主，生成一些简单的文本以及图像链接点，该代码可以直接在记事本中编写。HTML语言有着简单精炼的语法、极易掌握的通用性与易学性。

层叠样式表（Cascading Style Sheets，CSS），可定义HTML元素如何被显示，类似font标签在HTML中所起到的作用。样式通常被保存在HTML文档之外的文件中。外部样式表使用户有能力仅仅通过编辑一个简单的CSS文档来改变网站内所有页面的外观和布局。如果用户曾经尝试过进行某些改变，如同时改变站内所有网页标题的字体或颜色，就会明白CSS如何能够达到事半功倍的效果。

XHTML——HTML的未来，XHTML指可扩展超文本标记语言（Extensible HyperText Markup Language）。XHTML源自W3C的最新的HTML标准。它于2000年1月26日成为正式的推荐标准（Recommendation）。W3C Recommendation意味着其规范的稳定性，同时其规范目前已成为一种Web标准。XHTML是一种使用XML进行重构的HTML 4.01，并可以通过遵循一些简单的指导方针立即在现有的浏览器中投入使用。

XML——用于描述数据的工具，扩展标记语言（XML）并不是HTML的替代品。在未来的Web开发中，XML会被用来描述和存储数据，而HTML会被用来显示数据。对XML最合适的描述是，一个跨平台的、独立与软硬件的，信息存储和传输工具。对Wed来说， XML的重要性不亚于HTML，并且将会成为最重要的数据处理和传输工具。

客户端脚本是一种有关因特网浏览器行为的编程。应先学习JavaScript后才能有能力传递更多的动态网站内容：JavaScript是为HTML设计者提供的一种的编程工具，JavaScript是一种语法非常简单的脚本语言，几乎任何人都能够把某些JavaScript的代码片断放入HTML页面中，JavaScript可以在HTML页面中放入动态的文本。

结构化查询语言（SQL）是对下列数据库进行访问的通用标准：SQL Server、Oracle、Sybase以及Access。任何Web管理员都应当明白，对于Web上的数据库来说，SQL是一种真正的引擎。

2.网页制作工具

● Microsoft FrontPage。

如果对Word很熟悉，那么用FrontPage进行网页设计将会非常顺手。使用FrontPage制作网页，将能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的Editor完成，其工作窗口由三个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage将跟踪文件并复制新版本的文件。FrontPage是现有网页制作软件中唯一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。

● Netscape编辑器。

Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果用Netscape浏览器上网，那么使用Netscape编辑器将非常简单方便！当用Netscape浏览器显示网页时，单击“编辑”按钮，Netscape就会将网页存储在硬盘中，然后就可以开始编辑了。也可以像使用Word那样进行编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等操作。但是，Netscape编辑器对复杂的网页设计就显得功能有限，甚至连表单创建、多框架创建都不支持。Netscape编辑器是网页制作初学者很好的入门工具。如果网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。如果对HTML语言有所了解的话，能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句，也可以弥补Netscape编辑器的一些不足。

● Dreamweaver CS3。

Dreamweaver CS3是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，支持动态HTML （Dynamic HTML）的设计，使得页面没有plug-in也能够在Netscape和IE浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。Dreamweaver CS3还采用了Roundtrip HTML技术。这项技术使得网页在Dreamweaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。Dreamweaver CS3最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

● Fireworks。

Fireworks的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器（Export功能）。它增强了与Dreamweaver的联系，可以直接生成Dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片。

● Flash。

Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。Flash可以用其生成动画，还可在网页中加入声音。这样就能生成多媒体的图形和界面，而文件的体积却很小。Flash虽然不能进行直接编程，但用其内置的语句并结合JavaScript，也可做出互动性很强的主页来。

【教学评价】

【模块作业】

浏览Internet网，感受网页的强大功能，并注册一个E-mail信箱，深切体会网页的强大动态交互功能。

【问题探究】

如果由自己来制作一个“个人网站”，该如何制订网站的风格和布局。