详情
全书一共分为15章，内容包括网页和网站的基础知识、html基础、css样式基础、div+css布局入门、设置页面背景图像、设置页面中的图像、css文本内容排版、设置表单样式、设置列表样式、设置页面超链接样式、使用javascript搭建动态效果、css与xml和ajax的综合使用、html5.0与css高级运用。
北京
熟练掌握了Dreamweaver的基本功能后，可能会发现制作的网页有些问题，例如文字不能添加在图片上、段落之间不能设置行距。有时即使懂得一些HTML标记，但是还不能随意改变网页元素的外观，无法随心所欲地编排网页。因此W3C协会颁布了一套CSS语法，用来扩展HTML语法的功能。CSS是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的标记主要是定义网页的内容，而CSS决定了这些网页内容如何显示。CSS和Div的结构被越来越多的人采用，很多人都抛弃了表格而使用CSS来布局页面，目前绝大多数网站已经开始使用Div+CSS来布局制作，因此，学习Div+CSS布局制作网站已经成为网页设计制作人员的必修课。它的好处很多，可以使结构简洁，定位更灵活，CSS布局的最终目的是搭建完善的页面架构。
本书读者对象
● 网页设计与制作人员
● XHTML和CSS 开发初学者和前端开发爱好者
● 喜欢网页设计的大中专院校的学生
● 各种培训学校的相关学生
● 前端开发工程师
● 网站重构工程师
● 从事后端开发但对前端开发感兴趣的人员
● 网页设计人员、站长、网站编辑或网站运营
本书是集体的结晶，参加本书编写的人员均为从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师。由于时间所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正。
编者
怎样才能设计开发一个吸引人的网站，除了需要设计师的聪明才智之外，网页设计和开发知识也是设计师应该注重和掌握的方面。为了能够使网页制作初学者对设计和开发网站有一个总体的认识，本章讲解一些基础知识。
学习目标
了解网站开发设计需要什么
通过Dreamweaver开发Div+CSS
一个简单的网页需要包含什么
仅仅学会了网页制作工具是不能制作出好的网站的，还需要了解网页标记语言HTML（超文本置标语言）、网页脚本语言JavaScript、CSS（层叠样式表）样式表等。
HTML作为一种标记语言，它本身不能显示在浏览器中。标记语言经过浏览器的解释和编译，才能正确地反映HTML标记语言的内容。HTML从HTML1.0到HTML5经历了巨大的变化，从单一的文本显示功能到多功能互动。许多特性经过多年的完善，HTML已经成为了一种非常成熟的标记语言。
HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。如文字以什么颜色、大小来显示等，这些都是利用HTML标记完成的。其最基本的语法就是<标记符>内容</标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。如在 HTML 中用<I></I>标记符来定义文字为斜体字，用<B></B>标记符来定义文字为粗体字。当浏览器遇到<I></I>标记时，就会把<I></I>标记中的所有文字以斜体样式显示出来，遇到<B></B>标记时，就会把<B></B>标记中的所有文字以粗体样式显示出来。
完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些统称为HTML元素。一个HTML文件的基本结构如下。
<html>文件开始标记
<head>文件头开始的标记
……文件头的内容
</head>文件头结束的标记
<body>文件主体开始的标记
……文件主体的内容
</body>文件主体结束的标记
</html>文件结束标记
从上面的代码可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为<>，结束标记为</>，在这两个标记中间添加内容。
Div 最大的优势在于其灵活性，它可以放置到页面中的任何一个位置，甚至可以隐藏在页面的边线内。因此，使用Div比使用表格可以更方便地实现页面的排版，而且Div有许多功能是表格不能实现的。
最初的页面排版是完全平面式的，在 HTML2.0 以后，表格得到了广泛的应用，设计者可以精确地布置页面上的元素。但是随着页面的复杂程度的增加，设计者越想精确布局，页面的表格就越复杂，这给设计者和浏览者都带来了一定的困难，设计者无法随心所欲地放置页面元素，而表格的复杂化带来了浏览器解释时间的增加，用户等待时间加长。
为了解除这些困扰，W3C（万维网联盟）在新的CSS中包含了一个绝对定位的特性，它允许设计者将页面上的某个元素定位到任何地方，而且除了平面上的并行定位，还增加了三维空间的定位z-index，因为z-index定义了堆叠的顺序，类似于图形设计中使用的图层，所以拥有了z-index属性的元素被形象地称为Div。
Div主要有以下功能。
Div 的好处在于样式与主体内容分离，大量减少了网页代码量，使网页下载速度更快。而且对于后期网站维护来说，也是相当便捷的，这是Div最大的优势。
有了Div以后可以将元素置于Div中，因为Div可以重叠，所以也就产生了许多重叠效果。
可以利用Div来精确定位网页元素。它可以包含文本、图像甚至其他Div，凡是HTML文件可包含的元素均可包含在Div中。
Div可以转换成表格，为不支持Div的浏览器提供了解决方法。
Div可以显示和隐藏，利用这一功能可以实现网页导航中的下拉菜单。
CSS 是Cascading Style Sheets（层叠样式表）的缩写，它可以与HTML 或XHTML 超文本标记语言配合来定义网页的外观。
当熟练掌握了Dreamweaver的基本功能后，可能会发现制作的网页有些问题，例如文字不能添加在图片上、段落之间不能设置行距。有时即使懂得一些HTML标记，但是还不能随意改变网页元素的外观，无法随心所欲地编排网页。因此W3C协会颁布了一套CSS语法，用来扩展HTML语法的功能。CSS是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的标记主要是定义网页的内容，而CSS决定了这些网页内容如何显示。
在网页设计中通常需要统一网页的整体风格，统一的风格大部分涉及网页中的文字属性、网页背景色以及链接文字属性等，如果我们应用CSS来控制这些属性，会大大提高网页的设计速度，使网页总体效果更加统一。例如图1-1和图1-2所示的网页分别为使用CSS前后的效果。
使用JavaScript等简单易懂的脚本语言，结合HTML代码可快速地完成网站的应用程序。脚本语言（JavaScript、VBScript等）介于HTML和C、C++、Java、C#等编程语言之间。脚本是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。
脚本同VB、C语言的区别主要如下。
脚本语法比较简单，容易掌握。
脚本与应用程序密切相关，所以包括相对应用程序自身的功能。
脚本一般不具备通用性，所能处理的问题范围有限。
脚本多为解释执行。
使用记事本手写CSS好还是使用工具Dreamweaver开发CSS好？记事本因为系统自带无需安装即可使用，具有体积小、无需安装、简便、方便新建等优点，对于Div+CSS开发来说无提示、无语法属性变色区别等特点。Dreamweaver 是被称为网页三剑客之一的网页制作开发工具，缺点是需要安装、体积稍大，优点是比记事本多了CSS代码输入时具有的提示、语法单词变色等功能。
Div是CSS中的定位技术，在Dreamweaver中将其进行了可视化操作。文本、图像和表格等元素只能固定其位置，不能互相叠加在一起，而使用Div功能，可以将其放置在网页中的任何位置，还可以按顺序排放网页文档中的其他构成元素。
插入Div的具体操作步骤如下。
（1）启动 Dreamweaver CC，选择【文件】|【新建】命令，在弹出的【新建文档】对话框中选择“空白页”，如图1-3所示。
（2）单击【创建】按钮，新建一空白网页文档，如图1-4所示。
（3）将光标置于页面中，选择【插入】|【Div】命令，弹出【插入Div】对话框，设置插入点的位置和ID，如图1-5所示。
（4）单击【确定】按钮后，插入Div，如图1-6所示。
Dreamweaver CC 提供了对CSS 的全面支持，在Dreamweaver中可以方便地创建和应用CSS样式表，设置样式表属性。
要在Dreamweaver中添加CSS语法，需要先在Dreamweaver的主界面中将编辑界面切换成“拆分”视图，使用“拆分”视图能同时查看代码和设计效果。编辑语法在“代码”视图中进行。
Dreamweaver这款专业的网页设计软件在代码模式下对HMTL、CSS和JavaScript等代码有着非常好的语法着色以及语法提示功能，对CSS的学习很有帮助。
在Dreamweaver编辑器中，对于CSS代码，在默认情况下都采用粉红色进行语法着色，而HTML代码中的标记则是蓝色，正文内容在默认情况下为黑色。而且对于每行代码，前面都有行号进行标记，以方便对代码的整体规划。
无论是CSS代码还是HTML代码，都有很好的语法提示。在编写具体CSS代码时，按Enter 键或空格键都可以触发语法提示。例如，当光标移动到“color: #000;”一句的末尾时，按空格键或者Enter键都可以触发语法提示的功能。如图1-7所示，Dreamweaver会列出所有可以供选择的CSS样式属性，以方便设计者快速进行选择，从而提高工作效率。
当已经选定某个 CSS 样式，例如上例中的 color 样式，在其冒号后面再按空格键时， Dreamweaver会弹出新的详细提示框，让用户对相应CSS的值进行直接选择。图1-8所示的调色板就是其中的一种情况。
一个完整的HTML文档必须包含三个部分：一个用<html>元素定义的文档版本信息，一个用<head>定义各项声明的文档头部和一个由<body>定义的文档主体部分。<head>作为各种声明信息的包含元素，出现在文档的顶端，并且要先于<body>出现。而<body>用来显示文档主体内容。
在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以<head>为开始标记，以</head>为结束标记的。
语法：
<head>……</head>
说明：
<head>元素的作用范围将是整篇文档。<head>元素中可以有<meta>元信息定义、文档样式表定义和脚本等信息，定义在HTML语言头部的内容往往不会在网页上直接显示。
实例代码：
<html>
<head>
文档头部信息
</head>
<body>
文档正文内容
</body>
</html>
网页的主体部分包括了要在浏览器中显示处理的所有信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。
下面的这个例子是一个很简单的HTML文件，使用了尽量少的HTML标签。它演示了body元素中的内容是如何在浏览器中显示的。
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
注释标签用于在源代码中插入注释，注释不会显示在浏览器中。
可使用注释对代码进行解释，这样做有助于以后对代码进行编辑，当编写了大量代码时尤其有用。使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯。
<script type="text/javascript">
<!-
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
注释：注释行结尾处的两条斜杠（//）是JavaScript注释符号，这可以避免JavaScript执行--> 标签。
图书在版编目（CIP）数据
Div+CSS网页样式与布局从入门到精通/刘西杰，夏晨著.--北京：人民邮电出版社，2015.1
ISBN 978-7-115-38061-6
Ⅰ①.D… Ⅱ.①刘…②夏… Ⅲ.①网页制作工具 Ⅳ.①TP393.092
中国版本图书馆CIP数据核字（2014）第307794号
◆著 刘西杰 夏晨
责任编辑 赵轩
责任印制 张佳莹 彭志环
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京铭成印刷有限公司印刷
◆开本：787×1092 1/16
印张：24.5
字数：593千字 2015年1月第1版
印数：1-4000册 2015年1月北京第1次印刷
定价：49.00元
读者服务热线：（010）81055410 印装质量热线：（010）81055316
反盗版热线：（010）81055315
广告经营许可证号：京崇工商广字第0021号
