《网页设计案例教程》-第1 章 HTML 基础

1.1什么是HTML1.1.1网页的基本概念想想看，人们是如何上网的？人们打开计算机，在浏览器地址栏中输入想要访问的网址（如“”），如图1-1所示，按回车键后屏幕上马上出现“网易”网站的主页，如图1-2所示。上网看似在一瞬间完成。其实，它要经过一个比较复杂的过程。人们上网的过程如图1-3所示。下一页返回1.1什么是HTML浏览器和Web服务器之间的通信联系是按事先约定好的规则（又称协议）进行的，这个协议叫作HTTP协议。当人们在地址栏中输入网址（如“”）时，就是向服务器发出了一个HTTP“请求”（request），告诉服务器登录“网易”网站。本地的Web服务器收到这个请求后，查看本机上是否有“网易”的主页，如果没有就向互联网其他Web服务器发出请求，直到找到“网易”网站并将该网站的主页发回到本地服务器为止。本地Web服务器将“网易”网站的信息以超文本标记语言（HyperTextMarkupLanguage，HTML）的形式发回浏览器。这时，人们就看到了图1-2所示的画面。何以见得服务器发回的是HTML文本呢？人们在浏览器的菜单栏的“查看”菜单下，选择“源文件”，就可以看到图1-4所示的HTML源代码。上一页下一页返回1.1什么是HTML1.1.2HTML的工作原理HTML是一种用来描述网页的语言。HTML文档，通过使用标记符告诉浏览器如何显示网页内容。例如<h1>标记是按1号标题显示文字、<img>是显示图片等。HTML文档以超链接的形式将各个页面组织在一起形成一个整体—网站。“超链接”并不是一个陌生的概念，它是人们获取信息的最常用的方法。例如，人们读书查找资料的时候经常是先看目录，然后直接翻找到由目录指定的页面；人们读报纸时，总是先看头版上的条目，然后再阅读刊载具体消息的页面。没有一个人读报时会按版次，从左上角读到右下角。这就是说，跳跃式或超链接式的阅读是人们获取信息的基本方法，人们早已熟悉这种方法。包含超链接的网页文本叫超文本（HyperText），超文本标记语言HTML是一种标签式语言，它用超链接将网页组织成网站。只有通过浏览器才能将HTML解释、转换成屏幕所显示的内容。上一页下一页返回1.1什么是HTML1.1.3HTML文档的结构超文本标记语言HTML的基本元素就是标记，这些标记必须以“<>”括起来。标记一般成对出现，由开始标记和结束标记组成，例如<b></b>是一对标记，<b>是开始标记，</b>是结束标记。说明：HTML标记符是不区分大小写的，也就是说，<BR>和<br>是同样的标记。一个完整的HTML文档都包含在<html>和</html>之中，其中又分为头部（head）和主体（body）两大部分。其格式如下：<html><head>...上一页下一页返回1.1什么是HTML</head><body>...</body></html>1．HTML的头部（head）结构HTML文档的头部标记为<head>和</head>。头部标记中一般包含文档标题、网页说明、CSS样式、JavaScript代码等。（1）标题标记title<title>标记用来显示HTML文档的标题，以便说明网页的用途。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。上一页下一页返回1.1什么是HTML（2）元信息标记<meta>在头部标记中另外一个比较常用的标记是<meta>，它用于说明网页的有关信息（meta的词义是“元”的意思，表示它是关于信息的信息），这些信息并不会显示在浏览器中，只能在源代码中读到。<meta>标记的常用属性有name、http-equiv和content。其中，name属性给出特性的名称；content属性给出特性的值；而http-equiv则指定HTTP相应的名称。<meta>中的信息一般定义页面关键字、页面描述、编辑工具、作者信息、页面文字及语言、页面定时跳转、限制搜索方式及网页的过渡等。上一页下一页返回1.1什么是HTML1）定义页面关键字。定义页面关键字是为了向搜索引擎说明网页的关键字，以便帮助搜索引擎在人工登录时对该网页进行查找和分类，它可以提高被搜索到的概率。搜索引擎检索时会限制关键字的数量，因此关键字不要设置太多，各关键字之间用逗号隔开。2）定义页面描述。设置页面描述也是为了便于搜索引擎的查找，主要是为了方便机器人自动搜索。页面描述用来描述网页的主题，与关键字一样，页面描述也不会在网页中显示出来。3）定义编辑工具。在<meta>中可以设置网页编辑软件的名称，如：<metaname=”generator”content=”Dreamweaver”>该语句说明网页编辑的软件是Dreamweaver。将该语句放在网页的头部<head></head>标记之中。上一页下一页返回1.1什么是HTML4）定义作者信息。在<meta>中还可以定义作者的姓名信息，如：<metaname=”author”content=”大海”>该语句说明网页的作者是“大海”。5）定义文字及语言。在网页中还可以设置语言的编码方式。这样浏览器就可以正确地选择语言，而不需要人工选取，如：<metahttp-equiv=”content-type”content=”text/html;charset=GB2312”>该语句说明本文档是文本类型HTML文件，使用简体汉字。6）定义网页的定时跳转。在浏览网页时经常会看到一些页面，在经过一段时间后，会自动转到其他网页中，这就是网页的跳转。上一页下一页返回1.1什么是HTML2．HTML的主体（body）结构HTML的主体标记以<body>开始，以</body>结束。人们在屏幕上看到的画面都是主体标记的内容。在主体标记中，可以设置背景、文字、图片、超链接等涉及整个页面的信息。这些属性在后面的章节中会详细介绍，这里不多作说明。上一页返回1.2网页制作的工具网页文件是文本类型的，也就是说任何编辑文本的工具都可以编写网页，例如记事本。但是，只有在所见即所得的编辑工具中才能立即看到网页的效果，常用的所见即所得工具有FrontPage、Dreamweaver等。本书以DreamweaverCS6为编辑工具。下面就介绍这种工具。1.2.1DreamweaverCS6的界面在Windows桌面上双击AdobeDreamweaverCS6图标（如图1-8所示）。下一页返回1.2网页制作的工具此时，打开DreamweaverCS6的引导界面。页面分为3栏，如图1-9所示。第一栏为“打开最近的项目”，这里将呈现出之前用过的历史页面。第二栏为“新建”，在这里可选择要编写语言的环境来建设一个页面，可以创建静态的HTML、CSS、JavaScript文件，也可以创建动态的PHP文件等。第三栏为“主要功能”，这里是对Dreamweaver软件自带功能的介绍。选择引导界面中“新建”栏的“HTML”，创建一个新的HTML网页。出现的工作界面如图1-10所示。DreamweaverCS6的工作界面分为菜单栏、插入栏、工具栏、状态栏、文档窗口和一系列的面板。上一页下一页返回1.2网页制作的工具1.2.2DreamweaverCS6的工具栏DreamweaverCS6的工具栏有插入工具栏、文档工具栏、标准工具栏和样式呈现工具栏。打开和关闭这些工具栏的位置是菜单栏中的“查看”菜单下的“工具栏”选项。在工具栏中有5个选项，凡是被选中的选项前面都有一个“√”，屏幕中会出现相应的工具栏，否则相应的工具栏就消失，如图1-11所示。1．插入工具栏插入栏用于插入各种常用的网页内容，如图1-12所示。它包括常用、布局、表单、数据、文本等多方面的内容。选择某项菜单项，就会出现相应的工具栏。这样，在进行操作时选择相应的工具栏，使用很方便，又不会过多地占用屏幕空间。上一页下一页返回1.2网页制作的工具2．标准工具栏标准工具栏主要是文件编辑过程中例行操作的简捷按钮，包括新建、打开、保存、打印文件，以及剪切、复制、粘贴、撤销、重做按钮，如图1-13所示。标准工具栏默认设置为隐藏。3．文档工具栏文档工具栏主要用于进行与文档有关的操作，如图1-14所示。文档工具栏直接控制着文档窗口，可以很方便地进行代码、设计和拆分视图的切换，可以控制在浏览器中浏览网页效果等。上一页下一页返回1.2网页制作的工具1.2.3文档窗口文档窗口是文档编辑的工作窗口。在DreamweaverCS6中编辑网页十分方便。一般来说，会用Word就会用DreamweaverCS6。文档窗口有4种视图：设计视图、代码视图、拆分视图和实时视图。设计视图是制作网页的前台界面，在设计视图下操作就和在Word中操作一模一样，不论是输入文字，还是插入表格、图片都用同样的方法。所以，不学HTML也能制作简单的网页。图1-15所示就是设计视图界面。上一页下一页返回1.2网页制作的工具网页有前台界面和后台代码。当用户在设计视图下随心所欲地制作网页时，DreamweaverCS6会自动地在后台添加代码。这些代码与前台网页中的内容是一一对应的。所以，编辑网页可以通过工具在设计视图界面下做，也可以在代码视图界面下通过编写HTML代码来完成。代码视图界面如图1-16所示。设计视图界面和代码视图界面的切换是通过文档工具栏中的按钮完成的。文档工具栏中还有一个非常有用的按钮：拆分按钮。当单击拆分按钮时，文档窗口被分为左、右两个部分，左边窗口是代码视图，右边窗口是设计视图。这就是拆分视图，如图1-17所示。在拆分视图下，不论是在设计视图界面用工具制作网页，还是在代码视图界面写入代码制作网页，两个窗口都同步动作，前台、后台界面非常直观。这对编辑网页来说非常方便，尤其对于初学者掌握HTML代码更是有利。输入代码同时就见到效果，使人很容易理解代码的含义。上一页下一页返回1.2网页制作的工具1.2.4面板组面板组位于屏幕的右部，如图1-18所示。面板实际上就是一个个小窗口，在这些小窗口中有各种操作的设置，所以，打开和关闭这些面板的操作就在“窗口”菜单，如图1-19所示。凡是被选中的窗口名称前面都有个“”，其都可以在屏幕上显示。如果要关闭某个已打开的窗口，只要在其名称前用鼠标左键单击一次，去掉“”，这时屏幕上就不会再显示该窗口面板了。上一页返回1.3页面属性的设置网页整个页面的属性实际上就是<body>标记的属性。因为它涉及全局，所以单独拿出来讨论。页面属性可以用属性面板来设置。细心观察就会发现，属性面板中有个按钮“”，单击这个按钮，打开“页面属性”面板（如图1-20所示），就可以设置整个页面的属性了。1.3.1定义网页背景色利用“页面属性”面板可以设置网页的背景颜色。在图1-20所示的“网页属性”面板中，单击“背景颜色”右边的“”，则弹出选择颜色的调色板对话框，如图1-21所示，从中选择需要的背景色即可。下一页返回1.3页面属性的设置1.3.2设置背景图片利用“页面属性”面板可以设置网页的背景图片。在图1-20所示的“网页属性”面板中，单击“背景图像”文本框右边的按钮“”，则弹出“选择图像源文件”对话框，如图1-22所示。选择所需图像文件，按“确定”按钮即可。1.3.3设置网页文字如果要设置整个网页文字的字体、字号、颜色，也可以用图1-20所示的“页面属性”面板。1）设置字体：在“页面属性”面板中，单击“页面字体”右边的下拉列表，选择所需字体即可，如图1-23所示。上一页下一页返回1.3页面属性的设置2）设置页面字号：在“页面属性”面板中，单击“大小”右边的下拉列表，如图1-24所示，选择所需字号即可。3）设置文字颜色：在“页面属性”对话框中，选择“文字颜色”右边的“”，则可打开调色板，选择文字的颜色。1.3.4设置背景音乐设置网页的背景音乐，可以使用<bgsound>标记。其HTML代码如下：<bgsoundsrc="01.梁祝.mp3"/>该代码要放在<body></body>中。上一页返回1.4DreamweaverCS6中的智能代码输入方法制作网页时要输入大量的HTML代码，这些代码有HTML标记、标记的属性及属性值。这些标记、属性和属性值多是英文单词或是组合拼写的英文字母，录入时很容易出错。再说HTML有哪些合法的标记、每个标记都各自有哪些属性和属性值，人们很难记得清楚。如果写错了一个字符就会出错。