内容简介
胡秀娥,资深Web技术专家,有10余年网站开发授课经验,是国内较早专业从事Web开发的一线技术人员和培训讲师。一直致力于对HTML、JavaScript、CSS、jQuery、jQUery Mobile等Web开发技术的研究和实践。
本书共21章,引导读者从零开始,一步步掌握网页设计与布局的全过程。本书紧密围绕网页设计师在制作网页过程中实际需要掌握的技术,全面介绍了使用HTML、CSS、JavaScript进行网页设计和制作的各方面内容和技巧。本书不是单纯讲解语法,而是通过一个个鲜活、典型的实战案例来达到学以致用的目的。每个语法都有相应的实例。每章后面又配有综合小实例,同时配有习题,力求达到理论知识与实践操作完美结合的效果。
本书可作为普通高校计算机及相关专业的教材,并可供从事网页设计与制作、网站开发及网页编程等行业的人员参考。
前 言
1. 选题背景
近年来随着网络信息技术的广泛应用,越来越多的个人、企业等纷纷建立自己的网站,利用网站来宣传推广自己。如果你想从事网页制作或正在从事网页制作的相关工作,就必须要学习HTML、CSS、JavaScript,哪怕只是简单地了解。因为HTML、CSS、JavaScript是网页制作技术的核心与基础。本书的第1版在2011年出版后,其销售在同类书籍中一直名列前茅,重印十多次。由于此书是在2011年6月出版的,写此书的时间是2010年,已经7年了,HTML 5、CSS 3已经诞生。这次改版重点即增加了HTML 5、CSS 3方面的内容。
2. 主要内容
HTML是Internet的基石。本书介绍了HTML的基础知识,包括超文本标记语言HTML入门基础、HTML网页文档结构、网页文本与段落排版、网页图像和多媒体信息组织、用HTML创建超链接和表单、用表格排列网页数据、HTML 5入门基础、HTML 5的结构。接着介绍了CSS入门基础、用CSS设置文本样式、用CSS设计图像和背景、用CSS设置表格和表单样式、用CSS设置链接与导航菜单、CSS+DIV布局入门基础、CSS+DIV布局方法、CSS 3移动网页开发。还介绍了JavaScript语法基础、JavaScript中的事件、JavaScript中的函数和对象。最后采用最流行的CSS+DIV布局的方法,综合讲述了个人网站、企业网站等制作布局方法。
3. 本书特色
与目前市场上的相关书籍比较,本书具有以下几点特色。
* 知识全面、系统。本书内容完全从网页创建的实际角度出发,将HTML、CSS和JavaScript的元素进行归类,每个标记的语法、属性和参数都有完整详细的说明,信息量大,知识结构完善。
* 突出实例操作,体现了以应用为核心,以培养学生的实际动手能力为重点,力求做到学与教并重,科学性与实用性相统一。把知识点融汇于系统的案例实训中,并且结合经典案例进行讲解和拓展。
* 配合Dreamweaver进行讲解。本书以浅显的语言和详细的步骤介绍了在可视化网页软件Dreamweaver中,如何运用HTML、CSS和JavaScript代码来创建网页,使网页制作更加得心应手。
* 增加HTML 5和CSS 3的知识,用案例介绍了HTML 5和CSS 3基础知识以及实际运用技术。
* 配图丰富,效果直观。对于每个实例代码,本书都配有相应的效果图,读者无须自己进行编码,也可以看到相应的运行结果或者显示效果。
* 习题强化。每章最后提供专门的测试习题,供读者检验所学知识是否牢固掌握。
4. 本书读者对象
* 网页设计与制作人员。
* 网站建设与开发人员。
* 大中专院校相关专业师生。
* 网页制作培训班学员。
* 个人网站爱好者与自学读者。
本书是集体的结晶,参加本书编写的人员均为从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师,他们有着丰富的教学经验和网页设计经验。参加编写的人员包括胡秀娥、徐洪峰、何琛、邓静静、李银修、徐曦、孙鲁杰、何海霞、何秀明、孙素华、吕志彬等。由于时间所限,书中疏漏和不妥之处在所难免,恳请广大读者朋友批评指正。
编 者
目 录
第1章 网页标记语言HTML入门基础 11.1 HTML概述 11.2 HTML文件的构成 21.2.1 HTML文件结构 21.2.2 编写HTML文件的注意事项 31.3 怎样编写HTML文件 41.3.1 使用记事本文件编写页面 41.3.2 使用Dreamweaver编写HTML页面 51.4 网页设计与开发的过程 61.4.1 明确网站定位 61.4.2 收集信息和素材 71.4.3 规划栏目结构 71.4.4 设计页面方案 81.4.5 制作页面 91.4.6 实现后台功能 101.4.7 网站的测试与发布 111.5 本章小结 111.6 练习题 12第2章 HTML网页文档的结构 132.1 HTML文档主体标记 132.1.1 bgcolor属性 132.1.2 background属性 142.1.3 text属性 152.1.4 设置链接文字属性 162.1.5 设置页面边距 192.2 head部分的标记 202.2.1 title标记 202.2.2 定义页面关键字 202.2.3 定义页面描述 212.2.4 定义编辑工具 222.2.5 定义作者信息 222.2.6 定义网页文字及语言 232.2.7 定义网页的定时跳转 242.3 综合实例——创建基本的HTML文件 242.4 本章小结 272.5 练习题 28第3章 网页文本与段落排版 293.1 插入其他标记 293.1.1 空格符号  293.1.2 特殊符号 303.2 设置文字的格式 313.2.1 face属性 313.2.2 size属性 323.2.3 color属性 333.2.4 b、strong、em、u标记 343.2.5 sup与sub标记 353.3 设置段落的格式 363.3.1 p标记 363.3.2 段落对齐属性align 373.3.3 nobr标记 383.3.4 br标记 393.4 水平线标记 403.4.1 hr标记 403.4.2 水平线宽度与高度属性:width、size 413.4.3 水平线颜色属性color 423.4.4 水平线的对齐方式属性align 433.4.5 水平线去掉阴影属性noshade 443.5 使用marquee设置滚动效果 453.5.1 marquee标记及其属性 453.5.2 使用marquee插入滚动公告 463.6 综合实例——设置页面文本及段落 483.7 本章小结 503.8 练习题 50第4章 网页图像和多媒体 514.1 网页中常见的图像格式 514.2 图像标记及其属性 524.2.1 img标记 524.2.2 height属性 534.2.3 width属性 544.2.4 border属性 554.2.5 hspace属性 564.2.6 vspace属性 574.2.7 align属性 574.3 添加背景音乐 594.3.1 bgsound标记 594.3.2 loop属性 604.4 综合实例 60综合实例1——多媒体网页 61综合实例2——创建图文混合排版网页 634.5 本章小结 654.6 练习题 66第5章 用HTML创建超链接和表单 675.1 超链接的基本概念 675.2 创建超链接 675.2.1 超链接标记 685.2.2 设置的目标窗口 695.3 创建图像的超链接 705.3.1 设置图像超链接 705.3.2 设置图像热区链接 715.4 创建锚点链接 735.4.1 创建锚点 735.4.2 链接到页面不同位置的锚点链接 745.5 表单form 765.5.1 action 765.5.2 表单名称name 765.5.3 传送方法method 775.5.4 编码方式enctype 785.5.5 目标显示方式target 785.6 综合实例 79综合案例1——插入表单对象 79综合案例2——给网页添加链接 855.7 本章小结 865.8 练习题 87第6章 用表格排列网页数据 886.1 表格属性 886.1.1 表格的基本标记table、tr、td 886.1.2 表格宽度和高度width、height 896.1.3 表格标题caption 906.1.4 表格的表头th 916.1.5 表格对齐方式align 936.1.6 边框宽度border 956.1.7 表格边框颜色bordercolor 966.1.8 单元格间距cellspacing 976.1.9 单元格边距cellpadding 986.1.10 表格的背景色bgcolor 996.1.11 表格的背景图像 background 1006.2 表格的结构标记 1016.2.1 设计表头样式thead 1016.2.2 设计表主体样式tbody 1036.2.3 设计表尾样式tfoot 1046.3 综合实例——使用表格排版网页 1056.4 本章小结 1116.5 练习题 111第7章 HTML 5入门基础 1137.1 HTML 5简介 1137.2 HTML 5与HTML 4的区别 1147.2.1 HTML 5的语法变化 1147.2.2 HTML 5中的标记方法 1147.2.3 HTML 5语法中的3个要点 1157.3 HTML 5新增的元素和废除的元素 1167.3.1 新增的结构元素 1167.3.2 新增块级元素 1187.3.3 新增的行内的语义元素 1207.3.4 新增的嵌入多媒体元素与交互性元素 1237.3.5 新增的input元素的类型 1247.3.6 废除的元素 1267.4 新增的属性和废除的属性 1267.4.1 新增的属性 1267.4.2 废除的属性 1287.5 创建简单的HTML 5页面 1297.5.1 HTML 5文档类型 1297.5.2 字符编码 1307.5.3 页面语言 1307.5.4 添加样式表 1307.5.5 添加JavaScript 1317.5.6 测试结果 1317.6 本章小结 1317.7 练习题 132第8章 HTML 5的结构 1338.1 新增主体结构元素 1338.1.1 article元素 1338.1.2 section元素 1348.1.3 nav元素 1358.1.4 aside元素 1378.2 新增的非主体结构元素 1388.2.1 header元素 1388.2.2 hgroup元素 1398.2.3 footer元素 1408.2.4 address元素 1418.3 本章小结 1428.4 练习题 142第9章 CSS入门基础 1439.1 为什么要在网页中加入CSS 1439.1.1 什么是CSS 1439.1.2 使用CSS的好处 1459.1.3 如何编写CSS 1459.1.4 CSS基本语法 1469.1.5 浏览器与CSS 1479.2 在HTML中使用CSS 1479.2.1 链接外部样式表 1479.2.2 行内方式 1489.2.3 嵌入外部样式表 1489.2.4 定义内部样式表 1499.3 选择器类型 1499.3.1 标签选择器 1499.3.2 类选择器 1509.3.3 ID选择器 1519.4 本章小结 1539.5 练习题 154第10章 用CSS设置文本样式 15510.1 设计网页中的文字样式 15510.1.1 font-family属性 15510.1.2 font-size属性 15710.1.3 font-weight属性 15810.1.4 font-style属性 15910.1.5 font-variant属性 16010.1.6 text-decoration属性 16110.2 设计文本的段落样式 16210.2.1 line-height属性 16210.2.2 text-align属性 16210.2.3 text-indent属性 16310.2.4 word-spacing属性 16410.2.5 first-letter首字下沉 16510.2.6 text-transform 16610.3 综合实例——用CSS排版网页文字 16810.4 本章小结 17010.5 练习题 170第11章 用CSS设计图像和背景 17111.1 设置网页的背景 17111.1.1 background-color属性 17111.1.2 background-image属性 17211.2 设置背景图像的属性 17311.2.1 background-repeat属性 17311.2.2 background-attachment属性 17411.2.3 background-position属性 17511.3 设置网页图像的样式 17511.3.1 border属性 17611.3.2 图文混合排版 17711.4 综合实例——给图片添加边框 17711.5 本章小结 17911.6 练习题 179第12章 用CSS设置表格 和表单样式 18112.1 网页中的表格 18112.1.1 表格对象标记 18112.1.2 在Dreamweaver中插入 表格 18212.1.3 表格的bgcolor属性 18312.1.4 表格的border样式 18412.1.5 设置表格的阴影 18512.2 网页中的表单 18612.2.1 表单对象 18612.2.2 表单标记 18612.2.3 表单的布局设计 18712.2.4 设置边框样式 19012.2.5 设置背景样式 19012.2.6 设置输入文本的样式 19112.3 综合实例 192综合实例1——制作变换背景色的表格 192综合实例2——设计文本框的样式 19412.4 本章小结 19612.5 练习题 196第13章 用CSS制作链接与网站导航 19813.1 超链接基础 19813.1.1 超链接的基本概念 19813.1.2 使用页面属性设置超链接 19913.2 链接标记 20013.2.1 a:link 20013.2.2 a:visited 20013.2.3 a:active 20113.2.4 a:hover 20113.3 各种形式的超链接 20213.3.1 背景色变换链接 20213.3.2 多姿多彩的下画线链接 20413.3.3 图像翻转链接 20513.3.4 边框变换链接 20613.4 项目列表 20813.4.1 有序列表 20813.4.2 无序列表 21213.5 横排导航 21713.5.1 文本导航 21713.5.2 标签式导航 21913.6 竖排导航 22113.7 综合实例 222实例1——使用CSS实现鼠标指针形状改变 222实例2——实现背景变换的导航菜单 22413.8 本章小结 22713.9 练习题 228第14章 CSS+DIV布局入门基础 22914.1 网站与Web标准 22914.1.1 什么是Web标准 22914.1.2 为什么要建立Web标准 23014.1.3 怎样改进现有网站 23114.2 Div标记与Span 标记 23214.2.1 Div概述 23214.2.2 Div与Span的区别 23314.3 盒子模型 23514.3.1 盒子模型的概念 23514.3.2 border 23514.3.3 padding 24214.3.4 margin 24414.4 盒子的浮动与定位 24614.4.1 盒子的浮动float 24614.4.2 position定位 24914.4.3 z-index空间位置 25414.5 本章小结 25514.6 练习题 255第15章 CSS+DIV布局方法 25715.1 CSS布局理念 25715.1.1 将页面用div分块 25715.1.2 用CSS定位 25815.2 固定宽度布局 25915.2.1 一列固定宽度 25915.2.2 两列固定宽度 26015.2.3 圆角框 26115.3 可变宽度布局 26315.3.1 一列自适应 26315.3.2 两列宽度自适应 26415.3.3 两列右列宽度自适应 26515.3.4 三列浮动中间宽度自适应 26615.3.5 三行二列居中高度自适应布局 26715.4 CSS布局与传统的表格方式布局分析 26915.5 本章小结 27115.6 练习题 271第16章 CSS 3网页开发 27316.1 CSS 3概述 27316.1.1 CSS 3的发展历史 27316.1.2 CSS 3的新增特性 27416.1.3 主流浏览器对CSS 3的支持 27816.2 边框 27916.2.1 圆角边框 border-radius 27916.2.2 边框图片border-image 28016.2.3 边框阴影box-shadow 28116.3 背景 28316.3.1 背景图片尺寸 background-size 28316.3.2 背景图片定位区域 background-origin 28416.3.3 背景绘制区域 background-clip 28616.4 文本 28716.4.1 文本阴影text-shadow 28716.4.2 强制换行word-wrap 28816.4.3 文本溢出text-overflow 28916.5 多列 29016.5.1 创建多列column-count 29116.5.2 列的宽度column-width 29216.6 转换 29316.6.1 移动translate() 29316.6.2 旋转rotate() 29416.6.3 缩放scale() 29616.7 实例应用——图片 29716.8 本章小结 29916.9 练习题 299第17章 JavaScript语法基础 30017.1 JavaScript简介 30017.1.1 JavaScript的历史 30017.1.2 JavaScript的特点 30117.2 JavaScript的放置位置 30117.2.1 <script/>使用方法 30117.2.2 使用外部JavaScript 30217.2.3 添加到事件中 30217.3 JavaScript运算符 30317.3.1 算术运算符 30317.3.2 逻辑运算符 30317.3.3 比较运算符 30317.4 JavaScript程序语句 30417.4.1 使用If语句 30417.4.2 使用for循环 30517.4.3 使用Switch语句 30617.4.4 使用while语句 30717.5 综合实例——制作倒计时特效 30817.6 本章小结 30917.7 练习题 310第18章 JavaScript中的事件 31118.1 事件概述 31118.2 事件分析 31118.2.1 click事件 31218.2.2 change事件 31318.2.3 Select事件 31318.2.4 focus事件 31418.2.5 load事件 31618.2.6 鼠标移动事件 31718.2.7 onBlur事件 31818.3 其他常用事件 31918.4 综合实例——将事件应用于按钮中 32118.5 本章小结 32218.6 练习题 322第19章 JavaScript中的函数和对象 32419.1 什么是函数 32419.2 函数的定义 32519.2.1 函数的普通定义方式 32519.2.2 函数的变量定义方式 32619.2.3 函数的指针调用方式 32719.3 JavaScript对象的声明和引用 32919.3.1 声明和实例化 32919.3.2 对象的引用 33019.4 浏览器对象 33119.4.1 Navigator对象 33219.4.2 window对象 33319.4.3 location对象 33519.4.4 history对象 33519.4.5 document对象 33619.5 内置对象 33819.5.1 Date对象 33819.5.2 数学对象math 34119.5.3 字符串对象string 34219.5.4 数组对象Array 34319.6 综合实例——改变网页背景颜色 34519.7 本章小结 34619.8 练习题 346第20章 设计布局富有个性的个人网站 34820.1 个人网站设计指南 34820.1.1 确定网站主题 34820.1.2 个人网站色彩搭配和结构设计 34920.2 网站前期策划 34920.2.1 确定网站主题 35020.2.2 确定目录结构 35020.2.3 网站蓝图的规划 35020.3 创建本地站点 35120.4 制作网站主页 35320.4.1 导入外部CSS 35420.4.2 制作顶部导航部分 35620.4.3 制作正文部分 35820.4.4 制作底部版权部分 36320.5 本章小结 36320.6 练习题 364第21章 公司宣传网站的布局 36521.1 企业网站设计指南 36521.1.1 企业网站的主要功能 36521.1.2 色彩搭配与风格设计 36621.2 分析架构 36721.2.1 内容分析 36721.2.2 HTML结构设计 36821.3 各模块设计 36921.3.1 布局设计 36921.3.2 制作页头部分 37121.3.3 制作网页正文部分 37321.3.4 制作网页版权部分 37621.4 本章小结 37821.5 练习题 378附录 部分习题参考答案 379