第1章 网页设计与网站建设认知
随着互联网的迅速推广,越来越多的企业和个人得益于网络的发展和壮大,越来越多的网站也如雨后春笋般纷纷涌现,但是人们越来越不满足于只有文字和图片的静态网页效果,所以动态网站的开发越来越占据网站开发的主流。
其实动态网站的开发与制作并不难,用户只要掌握网站开发工具的用法,了解网站开发的流程和相关技术,再加上自己的想象力,就可以创造出动态网站。本章就先来介绍网页设计与网站建设的基础知识,例如网页和网站的基本概念与区别、网页的HTML构成,以及HTML中的常用标记等。
本章要点(已掌握的,在方框中打勾)
* 熟悉什么是网页和网站。
* 熟悉网页的相关概念。
* 掌握网页的HTML结构。
* 掌握HTML常用的标签。
* 掌握制作日程表的步骤。
1.1 认识网页和网站
在创建网站之前,首先需要认识什么是网页、什么是网站,以及网站的种类与特点。本节就来介绍一下它们的相关概念。
1.1.1 什么是网页
网页是Internet(国际互联网,也称因特网)中最基本的信息单位,是把文字、图形、声音及动画等各种多媒体信息相互链接起来而构成的一种信息表达方式。
通常,网页中有文字和图像等基本信息,有些网页中还有声音、动画和视频等多媒体内容。网页一般由站标、导航栏、广告栏、信息区和版权区等部分组成,如图1-1所示。
在访问一个网站时,首先看到的网页一般称为该网站的首页。有些网站的首页只是网站的开场页,具有欢迎访问者的作用,单击页面上的文字或图片,可打开网站的主页,而首页也随之关闭,如图1-2所示。
图1-1 网站的网页 图1-2 网站的主页
网站的主页与首页的区别在于:主页设有网站的导航栏,是所有网页的链接中心。但多数网站的首页与主页通常合为一个页面,即省略了首页而直接显示主页。在这种情况下,它们指的是同一个页面,如图1-3所示。
图1-3 省略首页的网站
1.1.2 什么是网站
网站就是在Internet上通过超级链接的形式构成的相关网页的集合。简单地说,网站是一种通信工具,人们可以通过网页浏览器来访问网站,获取自己需要的资源或享受网络提供的服务。
例如,人们可以通过淘宝网站查找自己需要的信息,如图1-4所示。
图1-4 淘宝网网站
1.1.3 网站的种类和特点
按照内容和形式的不同,网站可以分为门户网站、职能网站、专业网站和个人网站等四大类。
1. 门户网站
门户网站是指涉及领域非常广泛的综合性网站,例如国内著名的三大门户网站:网易、搜狐和新浪。如图1-5所示为网易网站的首页。
2. 职能网站
职能网站是指一些公司为展示其产品或对其所提供的售后服务进行说明而建立的网站。如图1-6所示为联想集团的中文官方网站。
图1-5 门户网站示例图1-6 职能网站示例
3. 专业网站
专业网站是指专门以某个主题为内容而建立的网站,这种网站都是以某一题材的信息作为网站的内容的。如图1-7所示为赶集网网站,该网站主要为用户提供租房、二手货交易等同城相关服务。
4. 个人网站
个人网站是指由个人开发建立的网站,在内容形式上具有很强的个性化,通常用来宣传自己或展示个人的兴趣爱好。如现在比较流行的淘宝网,在淘宝网上注册一个账户,开一家自己的小店,在一定程度上就宣传了自己,展示了个人兴趣与爱好,如图1-8所示。
图1-7 专业网站示例图1-8 个人网站示例
1.2 网页的相关概念
在制作网页时,经常会接触到很多和网络有关的概念,如浏览器、URL、FTP、IP地址及域名等,理解与网页相关的概念,对制作网页会有一定的帮助。
1.2.1 因特网与万维网
因特网(Internet)又称国际互联网,是一个把分布于世界各地的计算机用传输介质互相连接起来的网络。Internet主要提供的服务有万维网(WWW)、文件传输协议(FTP)、电子邮件(E-mail)及远程登录(Telnet)等。
万维网(World Wide Web,WWW)简称为3W,它是无数个网络站点和网页的集合,也是Internet提供的最主要的服务。它是由多媒体链接而形成的集合,通常我们上网看到的内容就是万维网的内容。如图1-9所示,这是使用万维网打开的百度首页。
图1-9 百度首页
1.2.2 浏览器与HTML
浏览器是将互联网上的文本文档(或其他类型的文件)翻译成网页,并让用户与这些文件交互的一种软件工具,主要用于查看网页的内容。目前最常用的浏览器有两种:美国微软公司的Internet Explorer(通常称为IE浏览器),美国网景公司的Netscape Navigator(通常称为网景浏览器)。如图1-10所示是使用IE浏览器打开的页面。
HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言,也是制作网页的最基本的语言,它可以直接由浏览器执行。如图1-11所示为使用HTML语言制作的页面。
图1-10 使用IE浏览器打开的页面图1-11 使用HTML语言制作的页面
1.2.3 URL、域名与IP地址
URL(Uniform Resource Locator)即统一资源定位器,也就是网络地址,是在Internet上用来描述信息资源,并将Internet提供的服务统一编址的系统。简单来说,通常在IE浏览器或Netscape浏览器中输入的网址就是URL的一种,如百度网址http://www.baidu.com。
域名(Domain Name)类似于Internet上的门牌号,是用于识别和定位互联网上计算机的层次结构的字符标识,与该计算机的因特网协议(IP)地址相对应。但相对于IP地址而言,域名更便于使用者理解和记忆。URL和域名是两个不同的概念,如http://www.sohu.com/是URL,而www.sohu.com是域名,如图1-12所示。
IP(Internet Protocol)即因特网协议,是为计算机网络相互连接进行通信而设计的协议,是计算机在因特网上进行相互通信时应当遵守的规则。IP地址是给因特网上的每台计算机和其他设备分配的一个唯一的地址。使用ipconfig命令可以查看本机的IP地址,如图1-13所示。
图1-12 搜狐首页 图1-13 使用IPconfig命令查看IP地址
1.2.4 上传和下载
上传(Upload)是从本地计算机(一般称客户端)向远程服务器(一般称服务器端)传送数据的行为和过程。下载(Download)是从远程服务器取回数据到本地计算机的过程。
1.3 网页的HTML构成
在一个HTML文档中,必须包含标记(也称标签),并且该标记需放在一个HTML文档的开始和结束位置。即每个文档以开始,以结束。与之间通常包含两个部分,分别是标记和标记。HEAD标记包含HTML头部信息,例如文档标题、样式定义等。BODY标记包含文档主体部分,即网页内容。需要注意的是,HTML标记不区分大小写。
为了便于读者从整体把握HTML文档结构,下面通过一个HTML页面来介绍HTML页面的整体结构,示例代码如下:
网页内容
从上述代码可以看出,一个基本的HTML页由以下几个部分构成。
(1) 声明必须位于HTML5文档中的第一行,也就是位于标记之前。该标记用于告知浏览器文档所使用的HTML规范。声明不属于HTML标记;它是一条指令,告诉浏览器编写页面所用的标记的版本。由于HTML5版本还没有得到浏览器的完全认可,后面介绍时还采用以前通用的标准。
(2) 和说明本页面是使用HTML语言编写的,可使浏览器软件能够准确无误地解释、显示。
(3) 和是HTML的头部标记,头部信息不显示在网页中。在该标记内可以嵌套其他标记,用于说明文件标题和整个文件的一些公用属性,如通过
……
展开