认识网页及网页元素

项目1　认识网页及网页元素

项目描述

在互联网已经渗透到我们社会生活的各个方面的今天，通过互联网我们可以了解新闻动态、气象及旅游信息、收发电子邮件、网上聊天、购物、炒股、查阅资料以及进行远程教育。互联网让我们方便快捷地共享网络资源以及进行信息交流。在学习创建网站、制作网页之前，需要先认识一下网页，了解网页的构成。

项目分析

该项目首先浏览几个精品网站，然后对这些网站的主页进行分析，了解网页的布局结构、色彩搭配、视觉效果，最后总结出构成网页的基本元素。因此，本项目可分解为以下任务：

任务1　打开网页并分析布局

任务2　了解构成网页的基本元素

项目目标

●掌握打开网页的方法

●了解网页的布局结构、色彩搭配以及视觉效果

●熟悉构成网页的基本元素

任务1　打开网页并分析布局

操作步骤

启动IE浏览器，在地址栏中输入新浪网的网址：www.sina.com.cn，并按回车键打开该网站，如图1-1所示。

该网页内容丰富，给人以清新、明快、温馨的感觉。首页的整体布局为上、中、下3个大板块，下半部的主体内容又分为左、中、右3个板块。颜色以黄色和蓝色为主。各板块按类别进行分布，布局合理。导航栏为黑色，背景为白色，引人注目。

贴心提示

要想上网浏览网站，首先启动浏览器Internet Explorer（简称IE）或者Netscape Naviga-tor，然后在地址栏中输入相应的网址并按回车键，就可以浏览该网站的主页。

下面再分析享誉世界的IT优秀企业联想集团网站。在地址栏中输入联想集团的网址：www.lenovo.com.cn，并按回车键打开该网站，如图1-2所示。

该网页给人简洁大方、直观明快的感觉。网页整体布局分为上下两大块，上部分的连续5张图片切换动画效果体现了联想集团的理念、品质，以及集团最近的新产品和促销活动；下部分的内容分为左、中、右3个板块，以图片的形式分别给出了集团生产的不同类型产品的链接。该网页背景以白色为主，颜色清新明快；导航栏以深蓝色和白色搭配，对比强烈，引人注目；二级导航采用弹出式横向排列。单击中右部黄色链接“更多文章”，可以打开关于公司情况介绍的页面，如图1-3所示，从中可以了解该公司的具体情况。

图1-1　新浪网首页

图1-2　联想集团网站主页

图1-3　联想集团情况介绍页面

贴心提示

如果不知道某个网站的网址，可以利用搜索引擎网站进行搜索。方法是：先打开搜索引擎网站，然后在搜索引擎的检索框中输入需要查询网站的关键词，再单击【搜索】按钮或按回车键就会列出许多与关键词相关的网站标题条目，在所列出的条目中找到所需网站的标题并单击就可以打开该网站，此时该网站的网址也就知道了。

常用的搜索引擎网站有：百度网（www.baidu.com），谷歌网（www.Google.com），搜狐网（www.sohu.com），网易网（www.163.com），新浪网（www.sina.com.cn）。

任务2　了解构成网页的基本元素

操作步骤

通过浏览网页可以知道，网页主要的内容是文本，然后加上丰富多彩的图像、制作精美的动画、引人注目的导航条、动听的音乐、炫目的视频以及各种超级链接。

对于布局规范的网页，还应该包括表格、框架；对于具有交互功能的动态网页，还应该包括表单。

除此之外，还包括横幅广告、字幕、悬停按钮、日戳、计数器、JavaApplet等元素。

知识百科

1.网页基础知识

1）Internet（因特网）

Internet是一个全球性的计算机互联网络，简称“互联网”，它是由不同地区、不同规模的网络相互联接而成的，如图1-4所示。

在Internet上，用户可以足不出户尽情浏览世界各地的信息，尽享网络资源。可以与朋友聊天、给远方的朋友发送电子邮件，进行网络购物、网上银行支付、网上炒股、看网上视频、听网上音乐、玩网络游戏等，如图1-5所示。

图1-4　Internet示意图

图1-5　使用Internet

2）网站

网站又称为Web站点，是指在网络上根据一定的规划，使用网页开发软件制作的用于展示特定内容的相关网页的集合，其中的第一页为首页。在互联网上，信息一般通过一个个网页呈现出来，网站设计者们将需要提供的内容和服务制作成多个网页，经过组织和规划，让这些网页相互链接在一起，从而形成网站，最后将其上传并发布到Web服务器上，此时用户就可以通过Internet，利用浏览器来访问这个网站了。

3）网页

网页又称为HTML文档，是一种可以在Internet上传输，能被浏览器识别并翻译成页面，从而显示出来的文件。用户看到的网页大都是以.html或.htm为扩展名的文件。当计算机用户在浏览器的地址栏中输入网址后见到的第一个页面为该网站的主页即首页，它是网站所有网页的索引页，通过单击该页面的超级链接可打开其他网页。

4）WWW服务

WWW是“World Wide Web”一词的缩写，其含义是全球网，也称为万维网。该网是以HTTP超文本传输协议为基础，提供面向Internet的信息查询服务。WWW服务可以让用户使用统一的界面来浏览、查询Internet上的各种信息。

WWW在服务上采用的是客户机/服务器模式，用户创建的网站及网页都存放在Web服务器上，当用户使用特定的Web客户端，即浏览器程序，请求访问Web服务器上的信息时，Web服务器接受并处理用户请求，然后向浏览器发送所要求的内容供用户浏览。Web服务器主要负责处理浏览器的请求。WWW服务的工作原理如图1-6所示。

从技术上讲，WWW包含3个基本的组成部分：URL统一资源定位器（即网址）、HTTP超文本传输协议、HTML超文本标记语言。

2.构成网页的基本元素

网页由文本、图像、动画、超级链接等基本元素构成。为今后方便读者运用这些元素制作网页，这里将对它们进行详细介绍。

图1-6　WWW服务工作原理

1）文本

网页中内容最多的就是文本，用户可以根据需要对这些文本进行字体、字号、字型、颜色、底纹、边框等属性进行设置。

贴心提示

建议用于网页正文的文本，字号不要太大，也不要使用过多的字体。中文文本一般使用宋体，字号一般使用9磅或12像素即可。

2）图像

丰富多彩的图像是美化网页必不可少的元素。用于网页上的图像一般为JPG格式或GIF格式。网页中的图像主要是用于点缀标题的小图片、介绍性的照片、代表企业形象或栏目内容的标志性图片，即Logo，以及用于营销宣传的广告，即Banner等形式。

3）超级链接

超级链接是网页的主要特色，它是从一个网页到另一个网页的链接。它也可以是相同网页的不同位置、一个下载的文件、一幅图片、一个E-mail地址等。用于超级链接的可以是文本、按钮、图片，当用鼠标指向超级链接时，鼠标指针会变成小手的形状。

4）导航条

导航条是一组超级链接，用来方便地浏览网页、站点。导航条一般由多个按钮或文本链接组成。

5）动画

动画是网页中最活跃的元素，制作精美、创意出众的动画是吸引浏览者眼球的有效方法之一。但是，如果网页中动画太多，也会物极必反，使人眼花缭乱，进而使用户产生视觉疲劳。

6）表格

表格是HTML语言中的一种元素，主要用于网页内容的布局、组织整个网页的外观。通过表格可以精确地控制各个网页元素在网页中的位置。

7）框架

框架是网页的一种组织形式，它将相互关联的多个网页的内容组织在一个浏览器窗口中显示。譬如，网页设计者可以在一个框架内放置导航条，而在另一个框架中的内容可以随着单击导航条中的不同链接而改变。

8）表单

表单是用来收集访问者信息或实现用户与网页交互的网页。浏览者填写表单的方式有输入文本、选中单选框或复选框、从下拉菜单中选择选项等。

网页中除了上述元素外，还包括音频、视频、横幅广告、字幕、悬停按钮、日戳、计数器、JavaApplet等基本构成元素。

项目小结

通过浏览精品网站，我们知道了Internet是全球互联网络，网站是由若干个网页组成的，而构成网页的基本元素有文本、图像、动画、超级链接、导航条、音频、视频、表格、框架、表单等。