作者：孙良军,胡秀娥
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML+CSS+JavaScript网页设计与布局实用教程试读：
前言
近年来随着网络信息技术的广泛应用，越来越多的个人、企业等纷纷建立自己的网站，利用网站来宣传推广自己。网页制作技术已经成为使用网络的青年学生必备的知识技能。目前大部分制作网页的方式都是运用可视化的网页编辑软件，这些软件的功能相当强大，使用非常方便。但是对于高级的网页制作人员来讲仍需了解HTML、CSS、JavaScript等网页设计语言和技术的使用，这样才能充分发挥自己丰富的想象力，更加随心所欲地设计符合标准的网页，以实现一般的网页设计软件不能实现的许多重要功能。
主要内容
本书共19章分为5篇，主要内容介绍如下。
第1篇 HTML基础篇
本篇由第1章至第7章组成，主要讲述了HTML文件的基本结构、HTML文件编写方法、HTML基本标记、文字设置、段落与列表、图像和多媒体的创建、超链接和表单、表格和框架的创建等。
第2篇 CSS基础篇
本篇由第8章至第12章组成，主要介绍CSS的基本概念和添加方法。用CSS设计丰富的文字效果、设计图像和背景、设计更富灵活性的表格和表单、制作实用的菜单和网站导航。
第3篇 CSS布局篇
本篇由第13章和第14章组成，主要介绍网站与Web标准、盒子模型、元素的定位方式、CSS布局理念以及常见的布局类型。
第4篇 JavaScript篇
本篇由第15章至第17章组成，主要讲述JavaScript语法基础、JavaScript中的事件以及JavaScript中的函数和对象。教会读者使用JavaScript制作丰富多彩的特效网页。
第5篇 综合实例篇
本篇由第18章和第19章组成，采用最流行的CSS+DIV布局的方法，综合讲述个人网站、企业网站的制作方法。教会读者如何将各个知识点应用于一个实用系统中，避免学习的知识停留于表面、局限于理论。
主要特色● 知识全面、系统。本书内容完全从网页创建的实际角度出发，将
HTML、CSS和JavaScript的元素进行归类，每个标记的语法、属
性和参数都有完整详细的说明，信息量大，知识结构完善。● 典型实例讲解。每章都配有大量实用案例，将基础知识综合贯穿
起来，力求达到理论知识与实际操作完美结合的效果。● 配合Dreamweaver进行讲解。本书以浅显的语言和详细的步骤介
绍了在可视化网页软件Dreamweaver中，如何运用HTML、CSS
和JavaScript代码来创建网页，使网页制作更加得心应手。在最
后一章向读者展示了完全不用编写代码，即可在Dreamweaver中
创建完整网页的内容。● 配图丰富，效果直观。对于每个实例代码，本书都配有相应的效
果图，读者无需自己进行编码，也可以看到相应的运行结果或者
显示效果。在不便上机操作的情况下，读者也可以根据书中的实
例和效果图进行分析和比较。本书代码下载地址：http://
www.wenyuan.com.cn。● 习题强化。每章后都附有针对性的练习题，通过实训巩固每章所
学的知识。
读者对象● 网页设计与制作人员。● 网站建设与开发人员。● 大中专院校相关专业师生。● 网页制作培训班学员。● 个人网站爱好者与自学读者。
本书是集体的结晶，参加本书编写的人员均为从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师。具体人员包括孙良军、胡秀娥、刘贵国、李小龙、冯雷雷、何琛、王东柱、范青蓝、王东霞、邓托、赵云飞、王张名、周林生、王洪东、尚振波、郭娜、谭海波、张晓亮、杨爱艳、郭鹏、李平生、范晓霞等。由于作者水平所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正！ 第1篇HTML基础篇● HTML入门● HTML基本标记● 用HTML设置文字、段落与列表● 用HTML创建精彩的图像和多媒体页面● 用HTML创建超链接和表单● 用HTML创建表格● 创建框架结构网页第1章HTML入门【学习目标】
在制作网页时，大都采用一些专门的网页制作软件，如FrontPage、Dreamweaver，这些软件都是所见即所得的，使用非常方便。使用这些编辑软件工具不用编写代码，在不熟悉HTML语言的情况下，照样可以制作网页。这是网页编辑软件的最大成功之处，但也是它们的最大不足之处，受软件自身的约束，将产生一些垃圾代码，这些垃圾代码将会增大网页体积，降低网页的下载速度。一个优秀的网页设计者应该在掌握可视化编辑工具的基础上，进一步熟悉HTML语言以便清除那些垃圾代码，从而达到快速制作高质量网页的目的。这就需要对HTML有个基本的了解，因此具备一定的HTML语言的基本知识是必要的。
本章主要内容包括：● 了解HTML的基本概念。● 掌握HTML文件的文档结构。● 掌握HTML文件的编写方法。● 熟悉网页设计与开发的过程。1.1 什么是HTML
上网冲浪（即浏览网页）时，呈现在人们面前的一个个漂亮的页面就是网页，它是网络内容的视觉呈现。网页是怎样制作的呢？其实网页的主体是一个用HTML代码创建的文本文件，使用HTML中的相应标签，就可以将文本、图像、动画及音乐等内容包含在网页中，再通过浏览器的解析，多姿多彩的网页内容就呈现出来了。
HTML的英文全称是Hyper Text Markup Language，中文通常称作超文本标记语言或超文本标签语言，HTML是Internet上用于编写网页的主要语言，它提供了精简而有力的文件定义，可以设计出多姿多彩的超媒体文件。通过HTTP通信协议，HTML文件以在万维网（World Wide Web）上进行跨平台的文件交换。
1. HTML的特点
HTML文档制作简单，且功能强大，支持不同数据格式的文件导入，这也是WWW盛行的原因之一，其主要特点如下。（1）HTML文档容易创建，只需一个文本编辑器就可以完成。（2）HTML文件存储量小，能够尽可能快地在网络环境下传输与显示。（3）平台无关性。HTML独立于操作系统平台，它能对多平台兼容，只需要一个浏览器，就能够在操作系统中浏览网页文件。HTML文件可以在广泛的平台上使用，这也是WWW盛行的另一个原因。（4）容易学习，不需要很深的编程知识。（5）可扩展性，HTML的广泛应用带来了加强功能、增加标识符等要求，HTML采取子类元素的方式，为系统扩展提供了保证。
2. HTML的历史
HTML 1.0——1993年6月，由互联网工程工作小组(IETF)发布。
HTML 2.0——1995年11月发布。
HTML 3.2——1996年1月W3C推荐标准。
HTML 4.0——1997年12月W3C推荐标准。
HTML 4.01——1999年12月W3C推荐标准。
HTML 5.0——2008年8月W3C工作草案推荐标准。1.2 HTML文件的文档结构
编写HTML文件时，必须遵循一定的语法规则。一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素。HTML使用标签来分隔并描述这些元素，整个HTML文件其实就是由元素与标签组成的。1.2.1 HTML文件的结构
HTML的所有标签都由“<”和“>”符号括起来，如。在起始标签的标签名前加上符号“/”便是其终止标签，如，夹在起始标签和终止标签之间的内容受标签的控制。超文本文档分为头和主体两部分，在文档头部，对文档进行了一些必要的定义，文档主体是要显示的各种文档信息。
基本语法：
网页头部信息网页主体正文部分语法说明：
其中在最外层，表示这对标签间的内容是HTML文档，一个HTML文档总是以开始，以结束。
之间包括文档的头部信息，如文档标题等，若不需要头部信息则可省略此标签。标签一般不能省略，表示正文内容的开始。下面就以一个简单的HTML文件来熟悉HTML文件的结构。
实例代码：
这是我的第一个网页，简单的HTML文件结构!
这一段代码是使用HTML中最基本的几个标签组成的，运行代码在浏览器中预览效果，如图1.1所示。图1.1 HTML文件结构
下面解释一下上面的例子。● HTML文件就是一个文本文件。文本文件的后缀名是.txt，而
HTML文件的后缀名是.html。●
EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1- transitional.dtd ">
代表文档类型，大致的意思就是遵循严格的XHTML1.0的格式书
写。● HTML文档中，第一个标签是，这个标签告诉浏览器这是
HTML文档的开始。● HTML文档的最后一个标签是
，这个标签告诉浏览器这是HTML文档的终止。● 在
和标签之间的文本是头信息，在浏览器窗口中，头信息是不显示在页面上的。● 在
窗口的标题栏中。● 在
和标签之间的文本是正文，将显示在浏览器中。●和
标签代表段落。1.2.2 编写HTML文件注意事项HTML由标签和属性构成，在编写文件时，要注意以下几点。（1）“<”和“>”是任意标签的开始和结束。元素的标签要用这对尖括号括起来，并且在结束标签的前面加一个“/”斜杠，如
2010年上海世博会
其中align为h1的属性，right为属性值，元素属性出现在元素的< >内，并且和元素名之间有一个空格，属性值可以直接书写，也可以使用" "括起来，如下面的两种写法都是正确的。
2010年上海世博会
2010年上海世博会
（5）要正确输入标签。输入标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示信息。（6）在HTML源代码中注释。注释语句只出现在源代码中，不会在浏览器中显示。1.3 HTML文件的编写方法由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一个文本编辑器来打开并编写HTML文件，例如Windows系统中自带的记事本。如果使用Dreamweaver、FrontPage等软件，则能以可视化的方式进行网页的编辑制作等。1.3.1 使用记事本编写HTML页面
HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows自带的记事本中编写。HTML文档以.html为扩展名，将HTML源代码输入到记事本并保存，可以在浏览器中打开文档以查看其效果。使用记事本手工编写HTML页面的具体操作步骤如下。（1）在Windows系统中，打开记事本，在记事本中输入以下代码，如图1.2所示。
图1.2 在记事本中输入代码说明：如果还不知道怎么新建记事本，可以在你的电脑桌面上或者我的电脑硬盘中空白位置单击鼠标右键，选择“新建”|“文本文档”命令。（2）编辑完HTML文件后，选择“文件”|“另存为”命令，弹出“另存为”对话框，将它存为扩展名为.htm或.html的文件即可，如图1.3所示。图1.3 保存文件说明：注意是“另存为”，而不是“保存”，因为如果选择“保存”的话，Windows系统会默认地把它存为.txt记事本文件。.html是个扩展名，注意是个点，而不是句号。（3）单击“保存”按钮，这时该文本文件就变成了HTML文件，在浏览器中浏览效果如图1.4所示。图1.4 浏览网页效果1.3.2 使用Dreamweaver编写HTML页面在Dreamweaver CS5的“代码视图”中可以查看或编辑源代码。为了方便手工编写代码，Dreamweaver CS5增加了标签选择器和标签编辑器。使用标签选择器，可以在网页代码中插入新的标签；使用标签编辑器，可以对网页代码中的标签进行编辑，添加标签的属性或修改属性值。在Dreamweaver中编写代码的具体操作步骤如下。（1）打开Dreamweaver CS5软件，新建空白文档，在“代码视图”中编写HTML代码，如图1.5所示。图1.5 编写HTML代码（2）在Dreamweaver中编辑完代码后，返回到“设计视图”中，效果如图1.6所示。图1.6 设计视图（3）选择“文件”|“保存”命令，保存文档，即可完成HTML文件的编写。1.4 网页设计与开发的过程
创建完整的网站是一个系统工程，有一定的工作流程，只有遵循这个流程，按部就班地来，才能设计出满意的网站。因此，在设计网页前，先要了解网页设计与开发的基本流程，这样才能制作出更好、更合理的网站。1.4.1 明确网站定位
在创建网站时，确定站点的目标是第一步。设计者应清楚建立站点的目标定位，即确定它将提供什么样的服务，网页中应该提供哪些内容等。要确定站点目标定位，应该从以下3个方面考虑。
1. 网站的整体定位
网站可以是大型商用网站、小型电子商务网站、门户网站、个人主页、科研网站、交流平台、公司和企业介绍性网站、服务性网站等。首先应该对网站的整体进行一个客观的评估，同时要以发展的眼光看待问题，否则将带来许多升级和更新方面的不便。
2. 网站的主要内容
如果是综合性网站，那么对于新闻、邮件、电子商务、论坛等都要有所涉及，这样就要求网页要结构紧凑、美观大方；对于侧重某一方面的网站，如书籍网站、游戏网站、音乐网站等，则往往对网页美工要求较高，使用模板较多，更新网页和数据库较快；如果是个人主页或介绍性的网站，那么一般来讲，网站的更新速度较慢，浏览率较低，并且由于链接较少，内容不如其他网站丰富，但对美工的要求更高一些，可以使用较鲜艳明亮的颜色，同时可以添加Flash动画等，使网页更具动感和充满活力，否则网站没有吸引力。
3. 网站浏览者的受教育程度
对于不同的浏览者，网站的吸引力是截然不同的，如针对少年儿童的网站，卡通和科普性的内容更符合浏览者的品味，也能够达到网站寓教于乐的目的；针对学生的网站，往往对网站的动感程度和特效技术要求更高一些；对于商务浏览者，网站的安全性和易用性更为重要。1.4.2 收集信息和素材
首先要创建一个新的总目录(文件夹），比如D:\我的网站，来放置建立网站的所有文件，然后在这个目录下建立两个子目录：“文字资料”、“图片资料”。放入目录中的文件名最好全部用英文小写，因为有些主机不支持大写和中文，以后增加的内容可再创建子目录。
1. 文本内容素材的收集
具体的文本内容，可以让访问者清楚地明白作者的网站页面中想要说明的东西。我们可以从网络、书本、报刊上找到需要的文字材料，也可以使用平时的试卷和复习资料，还可以自己编写有关的文字材料，将这些素材制作成Word文档保存在“文字资料”子目录下。收集的文本素材既要丰富，又要便于有机地组织，这样才能做出内容丰富、整体感强的网站。
2. 艺术内容素材的收集
只有文本内容的网站对于访问者来讲，是枯燥乏味、缺乏生机的。如果加上艺术内容素材，如静态图片、动态图像、音像等，将使网页充满动感与生机，也将吸引更多的访问者。这些素材主要来自于4个方面。● 从Internet上获取。可以充分利用网上的共享资源，可使用百
度、雅虎等引擎收集图片素材。● 从CD-ROM中获取。在市面上，有许多关于图片素材库的光盘，
也有许多教学软件，可以选取其中的图片资料。● 利用现成图片或自己拍摄。既可以从各种图书出版物（如科普读
物、教科书、杂志封面、摄影集、摄影杂志等）中获取图片，也
可以使用自己拍摄和积累的照片资料。● 自己动手制作一些特殊效果的图片，特别是动态图像，自己动手
制作往往效果更好。可采用3 ds Max或Flash软件进行制作。
鉴于网上只能支持几种图片格式，所以可先将以上途径收集的图片用Photoshop等图像处理工具转换成JPG、GIF形式，再保存到“图片资料”子目录下。另外，图片应尽量精美而小巧，不要盲目追求大而全，要以在网页的美观与网络的速度两者之间取得良好的平衡为宜。1.4.3 规划栏目结构
合理地组织站点结构，能够加快对站点的设计，提高工作效率，节省工作时间。当需要创建一个大型网站时，如果将所有网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很困难，因此合理地使用文件夹管理文档就显得很重要。
网站的目录是指在创建网站时建立的目录，要根据网站的主题和内容来分类规划，不同的栏目对应不同的目录，在各个栏目目录下也要根据内容的不同对其划分不同的分目录，如页面图片放在images目录下，新闻放在news目录下，数据库放在database目录下等，同时要注意目录的层次不宜太深，一般不要超过三层，另外给目录起名的时候要尽量使用能表达目录内容的英文或汉语拼音，这样会更加方便日后的管理和维护。如图1.7所示为企业网站的站点结构图。图1.7 企业网站的站点结构图1.4.4 设计页面方案
在规划好网站的栏目结构和搜集完资料后就需要设计网页图像了，网页图像设计包括Logo、标准色彩、标准字、导航条和首页布局等。可以使用Photoshop或Fireworks软件来具体设计网站的图像。有经验的网页设计者，通常会在使用网页制作工具制作网页之前设计好网页的整体布局，这样在具体设计过程中将会胸有成竹，大大节省工作时间。如图1.8所示为网页整体图像。图1.8 设计网页图像1.4.5 制作页面
具体到每一个页面的制作时，首先要做的就是设计版面布局。就像传统的报纸杂志一样，需要将网页看作一张报纸、一本杂志来进行排版布局。
版面指的是在浏览器中看到的完整的一个页面的大小。因为显示器的分辨率不同，所以同一个页面的大小可能出现640×480px、800×600px或1024×768px等不同尺寸。目前主要以1024×768px分辨率的用户为主，在实际制作网页时，应将网页内容宽度限制在778px以内（可以用表格或层来进行限制），这样在用1024×768px分辨率的显示器进行浏览时，除去浏览器左右的边框后，刚好能完全显示出网页的内容。
布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。这是一个创意的过程，需要一定的经验，当然也可以参考一些优秀的网站来寻求灵感。
版面布局完成后，就可以着手制作每一个页面了，通常都从首页做起，制作过程中可以先使用表格或层对页面进行整体布局，然后将需要添加的内容分别添加到相应的单元格中，并随时预览效果并进行调整，直到整个页面完成并达到理想的效果。然后使用相同的方法完成整个网站中其他页面的制作。
网页制作是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要灵活运用模板，这样可以大大提高制作效率。如果很多网页都使用相同的版面设计，就应为这个版面设计一个模板，然后就可以以此模板为基础创建网页。以后如果想要改变所有网页的版面设计，只需简单地改变模板即可。如图1.9所示为制作的网页。图1.9 制作的网页1.4.6 实现后台功能
页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块，网站中常用的功能模块有留言板、搜索功能、新闻信息发布、在线购物、技术统计、论坛及聊天室等。下面简要介绍4种常用功能。
1. 留言板
留言板、论坛及聊天室是为浏览者提供信息交流的地方。浏览者可以围绕个别的产品、服务或其他话题进行讨论。顾客也可以提出问题、提出咨询，或者得到售后服务。但是聊天室和论坛是比较占用资源的，一般不是大中型的网站没有必要建设论坛和聊天室，如果访问量不是很大的话，做好了也没有人来访问，如图1.10所示为留言板页面。图1.10 留言板页面
2. 搜索功能
搜索功能是使浏览者在短时间内，快速地从大量的资料中找到符合要求的资料。这对于资料非常丰富的网站来说非常有用。要建立一个搜索功能，就要有相应的程序以及完善的数据库支持，可以快速地从数据库中搜索所需要的职位。
3. 新闻发布管理系统
新闻发布管理系统可以提供方便直观的更新维护界面，提高工作效率、降低技术要求，非常适合用于经常更新的栏目或页面，如图1.11所示为新闻发布管理系统界面。图1.11 新闻发布管理系统界面
4. 购物网站
实现电子交易的基础，用户将感兴趣的产品放入自己的购物车，以备最后统一结账。当然用户也可以修改购物的数量，甚至将产品从购物车中取出。用户选择结算后系统自动生成本系统的订单。如图1.12所示为购物网站。图1.12 购物网站1.4.7 网站的测试与发布
在将网站的内容上传到服务器之前，应先在本地站点进行完整的测试，以保证页面外观和效果、链接和页面下载时间等与设计相同。站点测试主要包括检测站点在各种浏览器中的兼容性，检测站点中是否有断掉的链接。用户可以使用不同类型和不同版本的浏览器预览站点中的网页，检查可能存在的问题。
在完成了对站点中页面的制作后，就应该将其发布到Internet上供大家浏览和观赏了。但是在此之前，应该对所创建的站点进行测试，对站点中的文件逐一进行检查，在本地计算机中调试网页以防止包含在网页中的错误，以便尽早发现问题并解决问题。
在测试站点过程中应该注意以下几个方面。● 在测试站点过程中应确保在目标浏览器中，网页如预期地显示和
工作，没有损坏的链接，以及下载时间不宜过长等。● 了解各种浏览器对Web页面的支持程度，不同的浏览器观看同一
个Web页面，会有不同的效果。很多制作的特殊效果，在有些浏
览器中可能看不到，为此需要进行浏览器兼容性检测，以找出不
被其他浏览器支持的部分。● 检查链接的正确性，可以通过Dreamweaver提供的检查链接功能
来检查文件或站点中的内部链接及孤立文件。
网站的域名和空间申请完毕后，就可以上传网站了，可以采用Dreamweaver自带的站点管理上传文件。1.5 本章小结
HTML是目前网络上应用最为广泛的语言，也是构成网页文档的基本语言。本章介绍了HTML的基本概念、编写方法和HTML页面基本标签以及网页设计与开发的基本流程。通过本章的学习，使读者对HTML有个初步的了解，从而为后面设计制作更复杂的网页打下良好的基础。1.6 练习题【答案链接】
1. 填空题（1）一个HTML文档总是以_____开始，以_____结束。_____之间包括文档的头部信息，如文档标题等，若不需头部信息则可省略此标签。_____标签一般不能省略，其表示正文内容的开始。（2）由于HTML语言编写的文件是标准的ASCII文本文件，因此可以使用任意一个文本编辑器来打开并编写HTML文件，例如Windows系统中自带的_____。如果使用_____、_____等软件，则能以可视化的方式进行网页的编辑制作等。
2. 操作题（1）用IE浏览器打开网上的任意一个网页，选择“查看”|“源文件”命令，在打开的记事本中查看各代码，并试着与浏览器中的内容进行对照。（2）分别利用记事本和Dreamweaver创建一个简单的HTML网页。（3）简述网页设计与开发的一般步骤。第2章HTML基本标记【学习目标】
作为各种声明信息的包含元素出现在文档的顶端，并且要先于出现。而用来显示文档主体内容。本章就来讲解这些基本标记的使用，通过它们可以了解网页的基本结构及其工作原理。本章主要内容包括：● HTML页面主体标记。● 头部标记。2.1 HTML页面主体标记
在
和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等。标记有自己的属性，包括网页的背景设置、文字属性设置和链接设置等。设置标记内的属性，可控制整个页面的显示方式。2.1.1 定义网页背景色对大多数浏览器而言，其默认的背景颜色为白色或灰白色。在网页设计中，bgcolor属性用于设置整个HTML文档的背景颜色。
基本语法：
语法说明：
背景颜色有两种表示方法。● 使用颜色名指定，例如红色、绿色等分别用red、green等表示。● 使用十六进制格式数据值#RRGGBB来表示，RR、GG、BB分别
表示颜色中的红、绿、蓝三基色的两位十六进制数据。
实例代码：
上面代码中加粗部分的代码标记是为页面设置背景颜色，在浏览器中预览效果，如图2.1所示。背景颜色在网页上非常常见，如图2.2所示的网页使用了大面积的绿色背景。图2.1 设置页面的背景颜色图2.2 使用背景颜色的网页2.1.2 设置背景图片
为网页添加背景图片可以衬托网页的显示效果，从而取得更好的视觉效果。背景图片的选择不仅要注意好看，而且还要注意不能“喧宾夺主”，影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本，或者是浅色的背景图片配合深色的文本。background属性用来设置HTML网页的背景图片。
基本语法：
语法说明：
background属性值就是背景图片的路径和文件名。图片的地址可以是相对地址，也可以是绝对地址。在默认情况下，用户可以省略此属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。
实例代码：
上面代码中加粗部分的代码标记为设置的网页背景图片，在浏览器中预览可以看到背景图像，如图2.3所示。图2.3 页面的背景图像
在网络上除了可以看到各种背景色的页面外，还可以看到一些以图片作为背景的网页。如图2.4所示的网页使用了背景图像。图2.4 使用了背景图像提示：网页中可以使用图片做背景，但图片一定要与插图以及文字的颜色相协调，才能达到美观的效果，如果色差太大时会使网页失去美感。为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。2.1.3 设置文字颜色
通过text可以设置body体内所有文本的颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。
基本语法：
语法说明：
在该语法中，text的属性值与设置页面背景色相同。
实例代码：
公司主要经营：乔木类：国槐、黄金槐、龙爪槐、刺槐、香花槐、毛槐、合欢、黄山栾、黄连木、重阳木、椿树、红叶椿树、青桐、法桐、火炬树、五角枫、三角枫、丝棉木、金丝柳、秋桐、大叶女贞、各种杨树等。
花灌木类：河南桧及各种造型、雪松、月季、木槿、紫荆、紫薇、红端木、红叶李、侧柏、铺地柏、海棠、木瓜、洒金柏、白玉兰、红玉兰、黄玉兰、广玉兰、爬山虎、腊梅、红梅、绿梅、榆叶梅、石楠、红叶石楠、棕榈、丁香、迎春、地棣、金银木、桂花、樱花、金叶女贞、连翘、探春、寿星桃、碧桃、红叶桃、火棘、竹子、红叶小檗、鸢尾草、红花草、早熟禾、本特四号、马尼拉、白三叶、黑麦草、地被石竹等几百个品种。
我们的宗旨：以诚信为本、服务于严格要求的客户，同样的品种给您合理的价格、同样的价格给您满意的品种。服务诚信永远、公平实力竞争。欢迎前来看苗考察。同时公司拥有货运一条龙服务。为您解决了后期的后顾之忧。
上面代码中加粗部分的代码标记为设置的文字颜色，在浏览器中预览可以看到文档中文字的颜色，如图2.5所示。图2.5 设置文字的颜色
在网页中需要根据网页整体色彩的搭配来设置文字的颜色，如图2.6所示的文字和整个网页的颜色相协调。图2.6 文字的颜色2.1.4 设置链接文字属性
为了突出超链接，超链接文字通常采用与其他文字不同的颜色，超链接文字的下端还会加一条横线。网页的超链接文字有默认的颜色，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字则颜色变为暗红色。在
标记中也可自定义这些颜色。基本语法：
语法说明：
这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页中所有未单独设置的元素起作用。
实例代码：
上面代码中加粗部分的代码标记是为链接文字设置颜色，在浏览器中预览效果，可以看到链接的文字已经不是默认的蓝色，如图2.7所示。图2.7 设置链接文字的颜色
使用alink可以设置鼠标单击超链接时的颜色，举例如下。
上面代码中加粗部分的代码标记是为单击链接的文字时设置颜色，在浏览器中预览效果，可以看到单击链接的文字时，文字已经改变了颜色，如图2.8所示。图2.8 单击链接文字时的颜色
使用vlink可以设置已访问过的超链接颜色，举例如下。
上面代码中加粗部分的代码标记是为链接的文字设置访问后的颜色，在浏览器中预览效果，可以看到单击链接后文字的颜色已经发生改变，如图2.9所示。图2.9 访问后的链接文字的颜色
在网页中，一般文字上的超链接都是蓝色（当然，也可以设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页。如果已经浏览过某个超链接，这个超链接的文本颜色就会发生改变。如图2.10所示为网页中的超链接文字颜色。图2.10 网页中的超链接文字颜色2.1.5 设置页面边距
有的朋友在做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，这是怎么回事呢？因为一般的制作软件或HTML默认的设置都是topmargin、leftmargin值等于12，如果你把它们的值设为0，就会看到网页的元素与左边距离为0。
基本语法：
语法说明：
通过设置topmargin/leftmargin/rightmargin/bottommargin不同的属性值来设置显示内容与浏览器的距离。在默认情况下，边距的值以像素为单位。● topmargin：设置到顶端的距离。● leftmargin：设置到左边的距离。● rightmargin：设置到右边的距离。● bottommargin：设置到底边的距离。
实例代码：
设置页面的上边距
设置页面的左边距
上面代码中加粗部分的代码标记是设置上边距和左边距，在浏览器中预览效果，可以看出定义的边距效果，如图2.11所示。图2.11 设置的边距效果提示：一般网站的页面左边距和上边距都设置为0，这样看起来页面不会有太多的空白。2.2 head部分标记
HTML中的head标记是网页标记中一个非常重要的符号，head标记中包含的内容基本上描述了所属页面的基本属性，包括标题、字符集、站点信息、网站作者信息、站点描述、站点关键字、刷新及跳转、样式表链接以及其他一些有用的附加功能。做好head标记中的内容对整个页面有着非常重要的意义，下面介绍head标记中比较常用的一些东西。2.2.1 标题标记
不管是用户或者是搜索引擎，对一个网站的最直观的印象往往来自于这个网站的标题。用户通过搜索自己感兴趣的关键字，来到搜索结果页面，决定用户是否单击的关键字往往在于网站的标题。在网页中设置网页的标题，只要在HTML文件的头部
基本语法：
语法说明：
页面的标题只有一个，它位于HTML文档的头部，即
和之间。实例代码：
关键字是描述网站的产品及服务的词语，选择合适的关键字是建立一个高排名网站的第一步。选择关键字的一个重要的技巧是选取那些人们在搜索时经常用到的关键字。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。
基本语法：
语法说明：
在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。
实例代码：
上面代码中加粗的代码标记为插入关键字。提示：● 要选择与网站或页面主题相关的文字。● 选择具体的词语，别寄望于行业或笼统词语。● 揣摩用户会用什么作为搜索词，把这些词放在页面上或直接作为关键字。● 关键字可以不止一个，最好根据不同的页面，制定不同的关键字组合，这样页面被搜索到的概率将大大增加。2.2.3 定义页面描述
描述标签是description，网页的描述标签为搜索引擎提供了关于这个网页的总括性描述。网页的描述标签是由一两个语句或段落组成的，内容一定要有相关性，描述不能太短、太长或过分重复。
基本语法：
语法说明：
在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面说明，在content中定义具体的描述语言。
实例代码：
现在有很多编辑软件都可以制作网页，在源代码的头部可以设置网页编辑工具的名称。与其他meta元素相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。
基本语法：
语法说明：
在该语法中，name为属性名称，设置为generator，也就是设置编辑工具，在content中定义具体的编辑工具名称。
实例代码：
上面代码中加粗部分的标记为定义编辑工具。2.2.5 定义作者信息
在源代码中还可以设置网页制作者的姓名。
基本语法：
语法说明：
在该语法中，name为属性名称，设置为author，也就是设置作者信息，在content中定义具体的信息。
实例代码：
上面代码中加粗部分的标记为设置作者的信息。2.2.6 定义网页文字及语言
在网页中还可以设置语言的编码方式，这样浏览器就可以正确地选择语言，而不需要人工选取。
基本语法：
语法说明：
在该语法中，http-equiv用于传送HTTP通信协议的标头，而在content中才是具体的属性值。charset用于设置网页的内码语系，也就是字符集的类型，国内常用的是GB码，charset往往设置为GB2312，即简体中文。英文是ISO-8859-1字符集，此外还有其他的字符集。
实例代码：
上面代码中加粗部分的标记是设置的网页文字及语言，此处设置的语言为日语。2.2.7 定义网页的定时跳转
在浏览网页时经常会看到一些欢迎信息的页面，经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。用http-equiv属性中的refresh不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转过程。通过设置meta对象的http-equiv属性来实现页面跳转。
基本语法：
语法说明：
在该语法中，refresh表示网页的刷新，而在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间以秒为单位。
实例代码：
上面代码中加粗部分的标记是设置的网页的定时跳转，这里设置为10秒后跳转到index1.html页面。在浏览器中预览可以看出，跳转前的页面如图2.12所示，跳转后的页面如图2.13所示。图2.12 跳转前的页面图2.13 跳转后的页面2.3 综合实例——创建基本的HTML文件
本章主要学习了HTML文件整体标记的使用，下面就用所学的知识来创建最基本的HTML文件。
具体的操作步骤如下。（1）使用Dreamweaver CS5打开网页文档，如图2.14所示。图2.14 打开原始文档（2）进入拆分视图，在代码
试读结束[说明：试读内容隐藏了图片]