作者：马翠翠
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
从零开始学HTML+CSS(含DVD光盘1张)试读：
内容简介本书采用通俗的语言全面讲解了HTML和CSS的绝大多数标签，可以说一册在手，万事无忧。
本书分为3篇，共12章。第1篇是HTML基础（第1～2章） ，第2篇是HTML应用篇（第3～10章） ，第3篇是CSS的使用（第11～12章） 。从网页最基础的部分开始着手，让读者不仅学习HTML，还能认识网页与网站的区别。本书的主要内容有：网页基础、HTML基础入门、使用文本样式、使用超链接、使用图像、使用列表、使用表格、使用表单、使用多媒体、使用框架、CSS样式表，以及在Dreamweaver中创建网页等。通过学习本书的内容，读者可以在较短的时间内理解HTML标签的使用，以及如何应用到网页中，为下一步做网页打下良好的基础。
本书最适合没有基础的HTML语言入门新手学习；对于有一定基础的读者，可以通过本书进一步了解HTML标签的使用；对于大、中专院校的学生和培训班的学员，本书也是一本很好的教材。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。
图书在版编目（CIP）数据
从零开始学HTML+CSS/马翠翠编著.—北京：电子工业出版社，2012.7（从零开始学编程）
ISBN 978-7-121-16943-4
Ⅰ.①从… Ⅱ.①马… Ⅲ.①网页制作工具 Ⅳ.①TP393.092
中国版本图书馆CIP数据核字（2012）第087633号策划编辑：胡辛征责任编辑：葛 娜特约编辑：赵树刚印 刷：北京东光印刷厂北京天宇星印刷厂装 订：三河市皇庄路通装订厂三河市皇庄路通装订厂出版发行：电子工业出版社 北京市海淀区万寿路173信箱 邮编 100036开 本：787×1092 1/16 印张：20.25 字数：519千字印 次：2012年7月第1次印刷印 数：4000册 定价：45.00元（含DVD光盘1张）
凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。
质量投诉请发邮件至zlts@phei.com.cn，盗版侵权举报请发邮件至dbqq@phei.com.cn。
服务热线：（010）88258888。Java技术与Web服务之间没有界限。——James Gosling（Java技术之父）
WWW（World Wide Web）是Internet发展最快的部分，每天都有许多新网站诞生。许多商业团体都把WWW作为展示自己的最新、最快的一个媒体，就像报纸、电视一样，人们越来越离不开网站。掌握HTML便可在WWW世界畅游。
HTML（Hyper Text Markup Language，超文本标记语言）是构成网页最基本的元素。虽然目前不断地产生了许多新技术（如JSP、ASP、ASP.NET技术等） ，但是它们都是建立在HTML基础上的，因此深入地学习网页应从HTML入手。HTML不是编程语言，而是一种标记语言，它建立在一些相互联系的基本概念上。所以，并非只有专家才能掌握。
网页设计技术分为静态页面和动态页面，而动态页面是以静态页面，特别是以HTML语言为基础的。HTML和CSS的结合，正好是静态页面布局的重要组合。
那么如何通过HTML进行网页设计呢？尽管有了很不错的网页制作工具，如Dreamweaver，但人们还是要学习HTML。一方面，这些软件不可能表达HTML的所有元素和组合；另一方面，如果不懂一点HTML，掌握这些工具也比较困难。实际上， Dreamweaver本身也没有放弃HTML，设计者可以直接修改HTML源码，以表达自己的意图。
学习HTML需要有一个简单的文本编辑器（文本文档） ，还要有一些专门为HTML开发的编辑器。
学习HTML还需要一个独立运行的Web浏览器（如Microsoft Internet Explorer）来查看设计的HTML网页。
在HTML语言出现的短短几年时间里，它的功能已经有了长足的进步。但是文档结构和样式显示的混合一直是HTML语言的一大缺陷。 1996年12月17日，标准化组织推出了CSS（层叠样式表单）规范。CSS对于设计者来说是一种非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，将文档的样式指定内容全部脱离出来。同时，微软为CSS设计了一套滤镜变换效果，令网页增色不少。
本书每章中都解释了HTML的关键概念，并给出一些有针对性的例子来说明HTML元素和属性的使用方法。有时还给出一些完整的例子，让读者领会设计网页的一些规范、常用方法。本书还让读者有自己发挥的空间，做一些尝试。这样，不仅掌握了HTML和网页设计中的关键概念和思想，而且也使学习过程变得简单、有趣。本书特色
为了帮助读者全面掌握HTML和CSS，特编写了本书。本书有如下鲜明的特色。
1．内容全
本书采用通俗的语言全面讲解了HTML和CSS的绝大多数标签，可以说一册在手，万事无忧。
2．实例多且丰富
每个标签都配有实例，且每个实例中涉及的内容都是一些古诗、生活中的常识、哲理、笑话等，让读者在学习HTML标签如何使用的同时，还能丰富阅历。再者，读者可以随时改变实例，达到举一反三的效果。
3．最直观的效果图
本书的效果很直观，有时会有对比的效果，让读者一目了然。本书内容及体系结构
第1篇 HTML基础（第1~2章）
本篇简单讲述了网页及HTML的有关基础知识，帮助大家对网页有一个感性认识，进而讲述了HTML的基本概念及基本元素。
第2篇 HTML应用篇（第3~10章）
本篇主要讲述了HTML的应用，利用HTML标签，设计出网页中的各个组成部分，如文本、链接、图片、列表、多媒体等。
第3篇 CSS的使用（第11~12章）
本篇讲述了CSS的相关知识，以及如何使用Dreamweaver制作网页。通过CSS的布局，使网页更加绚丽多彩、有条不紊。本书读者对象HTML语言初学者；初、中级网页设计人员；大、中专院校师生；培训班学员；HTML语言开发的爱好者。第1篇 HTML基础第1章 网页基础
本章首先介绍关于网页的基本知识，包括了解什么是网页、网站，网页的版块结构，网页包含哪些基本的要素等一系列关于网页的知识。下面将进行详细介绍。1.1 了解网站、网页1.1.1 网站
平时常见的网站有新浪、搜狐、网易等，还有一些个人网站，这些网站是存放网络服务器上的完整信息的集合体。网站中包含一个或多个网页，这些网页通过一定的链接方式链接在一起，成为一个整体，这个整体就是用来描述或达到某种宣传的效果，如图1-1所示。图1-1 新浪首页1.1.2 网页
网页可以看成是一个文件，文件里有文字、图像、音乐、视频等。网页是网站的一个组成部分，如新浪、搜狐、网易等。当访问它们时，最直接的就是网页，通过多个网页组成了一整个的站点，就是所说的网站。
网页的主要表现形式为：动态网页和静态网页。动态网页的客户端与服务器端发生交互，因为浏览器可以和服务器数据库之间进行实时的数据交流，并不是添加了动画效果。动态网页可以实现很多功能，如用户注册、登录、用户管理，搜索，查询等。静态网页的客户端和服务器端是不发生交互的，因为浏览器和服务器数据库之间并不能进行数据的交流。访问者只能被动地浏览网站建设者设置的网页内容。1.1.3 网页的版块结构
大家平时看到设计或制作的网页会有千千万万的差别，但是“万变不离其宗”，制作的网页通常是由几大版块组成的。
1．网站logo
网站logo其实就是一个图标或注册商标。它能体现一个网站的特色与内涵，通常把网站logo放在网站的左上角或其他醒目的位置。企业网站的网站logo常常使用企业的标志或注册商标。一个优秀的网站logo可以给浏览者留下很深的印象，并能为企业起到宣传的作用。
2．导航条
导航条是网页中的重要组成部分，通过导航条可以很清楚地了解该网页的内容。导航条的形式有多种，如文本导航条、图像导航条、动画导航条等。有的导航条使用特殊的技术设置为下拉菜单的特色。
3．网站banner
网站banner通常是网页中的广告，在网页中，大部分网页将banner放置在与导航条相邻处，或者其他醒目的地方引起浏览者的注意，如图1-2所示。图1-2 网站banner的位置
4．内容版块
网页中的内容版块是整个页面的组成部分。网页设计者通过页面的要求来设计不同的版块，每个版块有一个标题，且每个内容版块主要显示不同的文本信息。
5．版尾或版权版块
版尾就是页面最底端的版块，这里可以放置网页的版权信息，以及网页设计者及其他参与者的联系方式等。
还有的网站将网站的友情链接或其他导航条的信息也放在版尾处，如图1-3所示。图1-3 版尾的信息1.2 网页的基本构成元素
以上介绍了整体的网站及网页的相关知识点，具体到细节部分，网页包括哪些元素呢？这些元素是不是有一个规范去设计它……带着一系列的问题开始下面的旅程。
1．文本
网页中的信息大部分是以文本为主，但是和图片相比，文字虽然看上去很枯燥，也不能很快地引起读者的兴趣，但文字却能更准确地表达出信息的含义和内容。
2．图片
在网页中添加的图片经常用到的格式有BMP、GIF、JPEG、PNG等，其中，使用最广泛的是GIF和JPEG（JPEG文件的扩展名为.jpg）格式。
3．超链接
超链接是指从一个网页链接到另一个或多个网页，或者链接到图片、电子邮件地址、文件，甚至是一个应用程序。超链接在本质上属于一个网页的一部分，允许用户同其他网页或站点之间进行连接。
4．动画
在网页中为了更吸引读者的注意，很多的网站广告都做成了动画的效果。网页中的动画主要有两种形式：GIF动画和Flash动画。其中，GIF动画最多有256种颜色，主要用于简单的动画和图标。而Flash是一种交互式的动画设计，Flash把音乐、声音、动画等结合在一起，设计出高效的网页动态效果。
5．声音和视频
在网页中附加背景音乐，或添加多媒体视频，将会更加引起读者的兴趣。其中，声音文件的格式有多种，如MIDI、WAV、MP3、AIF、WMA。但是很多的浏览器不需要安装插件也能播放MIDI、WAV、AIF格式的文件，像MP3、MP4、RM等格式的声音文件就需要专门的浏览器来播放。
6．表格
在网页的设计中，常常会用布局来设计网页，让网页更有层次感。而表格就是用来控制网页的布局方式之一。
用表格来控制网页中信息的布局方式主要有两种：使用行和列的形式来布局网页；使用表格来精确地控制各种网页元素在网页中出现的位置。
7．表单
网页中的表单常常用来接收用户在浏览器端的输入，然后把这些信息发到网页设计者设计的目标端，这个目标可以是文本文件、Web页、电子邮件等。表单主要用来收集客户端提供的相关信息，如用户注册、登录、验证等，使网页具有交互的功能。1.3 设计网页常用的软件
设计网页常用的软件有文本编辑器、Dreamweaver网页设计软件、Flash网页设计软件、Fireworks网页图像处理软件等，只要掌握其中的一种软件就可以设计网页了。别小看这些软件，其实像文本编辑器就可以制作出一个网页来，不信？！请看下面的讲解。
1．文本编辑器
编写HTML代码在记事本中就可以进行，其实不是只有在记事本中能写HTML代码，在写字板、Word中也可以编写HTML代码，但保存时扩展名必须是.html（或.htm），如图1-4所示。图1-4 用记事本写的HTML代码
2．Dreamweaver网页设计软件
Dreamweaver网页设计软件是使用最广泛的网页设计工具之一，它是一个所见即所得的网页编辑器，支持最新的动态HTML和CSS标准。采用了多种新技术，能够高效地创建富有动态的网页效果，使网页的设计更加简单、方便，如图1-5所示。本书就是以Dreamweaver为主来介绍设计网页的相关知识点，下面将会详细介绍该软件的使用。
3．Flash动画设计软件
Flash动画设计软件是Macromedia公司开发的一款优秀的网页动画软件，它从简单的动画设计到复杂的交互式Web应用程序，可以让用户创建更多的作品，使Flash应用程序更加丰富多彩，如图1-6所示。图1-5 Dreamweaver软件界面图1-6 Flash软件界面
4．Fireworks网页图像处理软件
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，使用它可以轻松地制作出尺寸较小的图像、动画。在Web应用方面，Fireworks是最早提供切片功能的图像处理软件，如图1-7所示。图1-7 Fireworks软件界面1.4 网页设计原则
在设计网页时，一般要遵循以下原则。结构性：在设计网页时，须注意网页的标记结构，脚本语言结构，使用条列的方式，善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。遇到有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。差异性：多了解各种浏览器的差异之处，力求输出的结果尽可能一致。习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc键及Enter键等，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网页必须考虑的因素。适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在笔者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档。所以在设计完毕后，一定要多试几组不同平台的计算机，以确保网页的可行性。反复性：反复检查是否错误，是否有需注意文字大小写之处，以及名称是否正确。1.5 Dreamweaver简介
使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境及更为强大的代码编辑功能等卓越特性。
Dreamweaver MX 2004的操作界面主要由以下几部分组成：标题栏、菜单栏、插入栏、文档工具栏、属性面板及其他面板，如图1-8所示。图1-8 Dreamweaver MX 2004的界面布局1.5.1 标题栏
标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，还包括最小化按钮、最大化按钮及关闭按钮。
单击Dreamweaver标记打开系统菜单。在Dreamweaver标记后面显示程序名称，之后的中括号“[ ]”内是当前打开的文档的标题，小括号“()”内是该文件的名称。每次新建一个文档，Dreamweaver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。其中，文档的标题和文档的文件名称是不同的概念。文件的标题通常在文档的
菜单栏位于标题栏的下方，包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”10个菜单项，如图1-9所示。图1-9 菜单栏
下面简单介绍Dreamweaver中的各个菜单项。“文件”菜单：包含文件操作的标准菜单项，如“新建”、“打开”、“保存”等。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，如“在浏览器中预览”和“打印代码”。“编辑”菜单：包含文件编辑的标准菜单项，如“剪切”、“拷贝”和“粘贴”等。“编辑”菜单还包括选择和搜索命令“选择父标签”及“查找和替换”，并且提供对键盘快捷键编辑器、标签库编辑器和参数选择编辑器的访问。“查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐藏不同类型的页面元素和Dreamweaver 工具。“插入”菜单：提供插入面板的各项，用于将各种对象插入文档。“修改”菜单：用于更改选定页面元素或项的属性。使用该菜单，可以编辑标签属性，更改表格和表格元素，并且为库和模板执行不同的操作。“文本”菜单：用于设置文本的各种格式。
试读结束[说明：试读内容隐藏了图片]