网站开发案例课堂：HTML5+CSS3+JavaScript网页设计案例课堂（附光盘） pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

刘玉红 著

图书标签:

• HTML5
• CSS3
• JavaScript
• 网页设计
• 网站开发
• 案例教程
• 前端开发
• 编程入门
• 光盘
• 技术学习

出版社： 清华大学出版社

ISBN：9787302387138

版次：1

商品编码：11640818

品牌：清华大学

包装：平装

丛书名： 网站开发案例课堂

开本：16开

出版时间：2015-01-01

用纸：胶版纸

页数：504

正文语种：中文

附件：光盘

产品特色

编辑推荐

　　清华大学出版社“案例课堂”大系
　　丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握软件的使用方法。
　　每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。
　　案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。
　　“CG设计”系列全彩精印，同等价位下内容更多，同等内容下更实惠。
　　“网站开发”系列附赠超值，全面学习无障碍：
　　CSS属性速查表
　　HTML标签速查表
　　网页布局案例赏析
　　精彩网站配色方案赏析
　　精选JavaScript实例
　　JavaScript函数速查手册
　　CSS+DIV布局案例赏析
　　案例源文件与教学课件

内容简介

　　《网站开发案例课堂：HTML5+CSS3+JavaScript网页设计案例课堂》作者根据在长期教学中积累的网页设计教学经验，完整、详尽地介绍HTML 5 + CSS 3 + JavaScript网页设计技术。

　　《网站开发案例课堂：HTML5+CSS3+JavaScript网页设计案例课堂》共分24章，分别介绍HTML 5概述、HTML 5网页文档结构、HTML 5网页中的文本和图像、HTML 5建立超链接、HTML 5建立表格、HTML 5建立表单、HTML 5绘制图形、HTML 5中的音频和视频、CSS 3概述和基本语法、美化网页字体和段落样式、美化图片样式、美化背景和边框样式、美化超级链接和鼠标、美化网页菜单、使用CSS 3滤镜美化网页元素、JavaScript编程基础知识、JavaScript程序控制结构和语法、函数、内置对象、HTML 5 + CSS 3 + JavaScript的搭配使用。最后以两个综合网站的设计为例进行讲解，使读者进一步巩固所学的知识，提高综合实战能力。

　　《网站开发案例课堂：HTML5+CSS3+JavaScript网页设计案例课堂》内容全面、图文并茂、步骤清晰、通俗易懂、专业性强，使读者能理解HTML 5 + CSS 3 + JavaScript网页样式与布局的技术，并能解决实际工作中的问题，真正做到“知其然，更知其所以然”。

　　《网站开发案例课堂：HTML5+CSS3+JavaScript网页设计案例课堂》涉及面广泛，几乎涵盖了HTML 5 + CSS 3 + JavaScript网页样式与布局的所有重要知识，适合网页设计初学者快速入门，同时也适合想全面了解HTML 5 + CSS 3 + JavaScript网页设计的专业人员阅读。

目录

第1章 初识HTML 5 11.1 HTML 5的基本概念 21.1.1 HTML的发展历程 21.1.2 什么是HTML 5 21.1.3 HTML 5文件的基本结构 31.2 HTML 5的优势 31.2.1 解决了跨浏览器问题 31.2.2 新增了多个新特性 31.2.3 用户优先的原则 41.2.4 化繁为简的优势 51.3 HTML 5文件的编写方法 51.3.1 使用记事本手工编写HTML 5 51.3.2 使用Dreamweaver CS6编写HTML文件 61.4 使用浏览器查看HTML 5文件 111.4.1 查看页面效果 111.4.2 查看源文件 111.5 疑难解惑 12
第2章 HTML 5网页的文档结构 132.1 HTML 5文件的基本结构 142.1.1 HTML 5页面的整体结构 142.1.2 HTML 5新增的结构标记 142.2 HTML 5基本标记详解 152.2.1 文档类型说明 152.2.2 HTML标记 152.2.3 头标记head 162.2.4 网页的主体标记body 182.2.5 页面注释标记 192.3 HTML 5语法的变化 202.3.1 标签不再区分大小写 202.3.2 允许属性值不使用引号 202.3.3 允许部分属性值的属性省略 212.4 综合示例——符合W3C标准的HTML 5网页 212.5 上机练习——简单的HTML 5网页 232.6 疑难解惑 23
第3章 HTML 5网页中的文本和图像 253.1 在网页中添加文本 263.1.1 普通文本的添加 263.1.2 特殊字符文本的添加 263.1.3 使用HTML 5标记添加特殊文本 283.2 文本排版 303.2.1 换行标记3.03.2.2 段落标记3.13.2.3 标题标记3.13.3 文字列表 323.3.1 建立无序列表323.3.2 建立有序列表3.43.3.3 建立不同类型的无序列表 353.3.4 建立不同类型的有序列表 363.3.5 建立嵌套列表 363.3.6 自定义列表 373.4 网页中的图像 383.4.1 在网页中插入图像 383.4.2 设置图像的宽度和高度 403.4.3 设置图像的提示文字 413.4.4 将图片设置为网页背景 423.4.5 排列图像 423.5 综合示例——图文并茂的房屋装饰装修网页 433.6 上机练习——在线购物网站的产品展示效果 443.7 疑难解惑 45
第4章 用HTML 5建立超链接 474.1 URL的概念 484.1.1 URL的格式 484.1.2 URL的类型 484.2 超链接标记 494.2.1 设置文本和图片的超链接 494.2.2 创建指向不同目标类型的超链接 504.2.3 设置以新窗口显示超链接页面 524.2.4 链接到同一页面的不同位置 534.3 创建热点区域 544.4 创建浮动框架 564.5 综合示例——用Dreamweaver精确定位热点区域 574.6 上机练习——创建热点区域 594.7 疑难解惑 60
第5章 用HTML 5创建表格 615.1 表格的基本结构 625.2 创建表格 635.2.1 创建普通表格 635.2.2 创建一个带有标题的表格 645.3 编辑表格 655.3.1 定义表格的边框类型 655.3.2 定义表格的表头 665.3.3 设置表格背景 675.3.4 设置单元格的背景 695.3.5 合并单元格 705.3.6 排列单元格中的内容 745.3.7 设置单元格的行高与列宽 755.4 完整的表格标记 765.5 综合示例——制作计算机报价表 775.6 上机练习——制作学生成绩表 795.7 疑难解惑 82
第6章 使用HTML 5创建表单 856.1 表单概述 866.2 表单基本元素的使用 866.2.1 单行文本输入框text 876.2.2 多行文本输入框textarea 876.2.3 密码域password 886.2.4 单选按钮radio 896.2.5 复选框checkbox 906.2.6 列表框select 916.2.7 普通按钮button 916.2.8 提交按钮submit 926.2.9 重置按钮reset 936.3 表单高级元素的使用 946.3.1 url属性的使用 946.3.2 email属性的使用 956.3.3 date和time属性的使用 966.3.4 number属性的使用 976.3.5 range属性的使用 976.3.6 required属性的使用 986.4 综合示例——创建用户反馈表单 996.5 上机练习——制作用户注册表单 1006.6 疑难解惑 101
第7章 使用HTML 5绘制图形 1037.1 添加canvas的步骤 1047.2 绘制基本形状 1047.2.1 绘制矩形 1057.2.2 绘制圆形 1067.2.3 使用moveTo与lineTo绘制直线 1077.2.4 使用bezierCurveTo绘制贝济埃曲线 1087.3 绘制渐变图形 1097.3.1 绘制线性渐变 1097.3.2 绘制径向渐变 1117.4 绘制变形图形 1127.4.1 绘制平移效果的图形 1127.4.2 绘制缩放效果的图形 1137.4.3 绘制旋转效果的图形 1147.4.4 绘制组合效果的图形 1157.4.5 绘制带阴影的图形 1177.5 使用图像 1187.5.1 绘制图像 1187.5.2 平铺图像 1207.5.3 裁剪图像 1217.5.4 图像的像素化处理 1237.6 绘制文字 1257.7 图形的保存与恢复 1267.7.1 保存与恢复状态 1267.7.2 保存文件 1287.8 综合示例——绘制火柴棒人物 1297.9 上机练习——绘制商标 1327.10 疑难解惑 133
第8章 HTML 5中的音频和视频 1358.1 audio标签概述 1368.1.1 audio标签概述 1368.1.2 audio标签的属性 1378.1.3 audio标签浏览器的支持情况 1378.2 在网页中添加音频文件 1388.2.1 添加自动播放音频文件 1388.2.2 添加带有控件的音频文件 1388.2.3 添加循环播放的音频文件 1398.2.4 添加预播放的音频文件 1398.3 video标签概述 1408.3.1 video标签概述 1408.3.2 video标签的属性 1418.3.3 浏览器对video标签的支持情况 1428.4 在网页中添加视频文件 1428.4.1 添加自动播放的视频文件 1428.4.2 添加带有控件的视频文件 1438.4.3 添加循环播放的视频文件 1438.4.4 添加预播放的视频文件 1448.4.5 设置视频文件的高度与宽度 1458.5 疑难解惑 146
第9章 CSS 3概述与基本语法 1479.1 CSS 3概述 1489.1.1 CSS 3的功能 1489.1.2 浏览器与CSS 3 1489.1.3 CSS 3的基础语法 1499.1.4 CSS 3的常用单位 1499.2 编辑和浏览CSS 3 1549.2.1 手工编写CSS 3 1549.2.2 用Dreamweaver编写CSS 1559.3 在HTML 5中使用CSS 3的方法 1569.3.1 行内样式 1569.3.2 内嵌样式 1579.3.3 链接样式 1599.3.4 导入样式 1609.3.5 优先级问题 1619.4 CSS 3的常用选择器 1639.4.1 标签选择器 1649.4.2 类选择器 1649.4.3 ID选择器 1659.4.4 全局选择器 1669.4.5 组合选择器 1679.4.6 选择器继承 1689.4.7 伪类选择器 1699.5 选择器声明 1709.5.1 集体声明 1709.5.2 多重嵌套声明 1719.6 综合示例——制作炫彩网站Logo 1729.7 上机练习——制作学生信息统计表 1759.8 疑难解惑 176
第10章 使用CSS 3美化网页字体与段落 17910.1 美化网页文字 18010.1.1 设置文字的字体 18010.1.2 设置文字的字号 18110.1.3 设置字体风格 18210.1.4 设置加粗字体 18310.1.5 将小写字母转为大写字母 18410.1.6 设置字体的复合属性 18510.1.7 设置字体颜色 18610.2 设置文本的高级样式 18710.2.1 设置文本阴影效果 18710.2.2 设置文本的溢出效果 18810.2.3 设置文本的控制换行 18910.2.4 保持字体尺寸不变 19010.3 美化网页中的段落 19110.3.1 设置单词之间的间隔 19110.3.2 设置字符之间的间隔 19210.3.3 设置文字的修饰效果 19310.3.4 设置垂直对齐方式 19410.3.5 转换文本的大小写 19610.3.6 设置文本的水平对齐方式 19710.3.7 设置文本的缩进效果 19810.3.8 设置文本的行高 19910.3.9 文本的空白处理 20010.3.10 文本的反排 20110.4 综合示例——设置网页标题 20310.5 上机练习——制作新闻页面 20410.6 疑难解惑 205
第11章 使用CSS 3美化网页图片 20711.1 图片缩放 20811.1.1 通过描述标记width和height缩放图片 20811.1.2 使用CSS 3中的max-width和max-height缩放图片 20811.1.3 使用CSS 3中的width和height缩放图片 20911.2 设置图片的对齐方式 21011.2.1 设置图片的横向对齐 21011.2.2 设置图片纵向对齐 21111.3 图文混排 21311.3.1 设置文字环绕效果 21311.3.2 设置图片与文字的间距 21411.4 综合示例——制作学校宣传单 21611.5 上机练习——制作简单的图文混排网页 21811.6 疑难解惑 219
第12章 使用CSS 3美化网页背景与边框 22112.1 使用CSS 3美化背景 22212.1.1 设置背景颜色 22212.1.2 设置背景图片 22312.1.3 背景图片重复 22412.1.4 背景图片显示 22612.1.5 背景图片的位置 22712.1.6 背景图片的大小 22912.1.7 背景的显示区域 23012.1.8 背景图像的裁剪区域 23212.1.9 背景复合属性 23312.2 使用CSS 3美化边框 23412.2.1 设置边框的样式 23412.2.2 设置边框的颜色 23612.2.3 设置边框的线宽 23712.2.4 设置边框的复合属性 23812.3 设置边框的圆角效果 23912.3.1 设置圆角边框 23912.3.2 指定两个圆角半径 24012.3.3 绘制四个不同角的圆角边框 24112.3.4 绘制不同种类的边框 24312.4 综合示例——制作简单的公司主页 24512.5 上机练习——制作简单的生活资讯主页 24812.6 疑难解惑 249
第13章 使用CSS 3美化超级链接和鼠标 25113.1 使用CSS 3来美化超链接 25213.1.1 改变超级链接的基本样式 25213.1.2 设置带有提示信息的超级链接 25313.1.3 设置超级链接的背景图 25413.1.4 设置超级链接的按钮效果 25513.2 使用CSS 3美化鼠标特效 25613.2.1 使用CSS 3控制鼠标箭头 25613.2.2 设置鼠标变幻式超链接 25813.2.3 设置网页页面滚动条 25913.3 综合示例1——图片版本的超级链接 26113.4 综合示例2——关于鼠标特效 26213.5 上机练习——制作一个简单的导航栏 26413.6 疑难解惑 266
第14章 使用CSS 3美化表格和表单的样式 26714.1 美化表格的样式 26814.1.1 设置表格边框的样式 26814.1.2 设置表格边框的宽度 27014.1.3 设置表格边框的颜色 27114.2 美化表单样式 27214.2.1 美化表单中的元素 27214.2.2 美化提交按钮 27414.2.3 美化下拉菜单 27614.3 综合示例——制作用户登录页面 27714.4 上机练习——制作用户注册页面 27914.5 疑难解惑 281
第15章 使用CSS 3美化网页菜单 28315.1 使用CSS 3美化项目列表 28415.1.1 美化无序列表 28415.1.2 美化有序列表 28515.1.3 美化自定义列表 28715.1.4 制作图片列表 28815.1.5 缩进图片列表 28915.1.6 列表的复合属性 29115.2 使用CSS 3制作网页菜单 29215.2.1 制作无需表格的菜单 29215.2.2 制作水平和垂直菜单 29415.3 综合示例——模拟soso导航栏 29715.4 上机练习——将段落转变成列表 29915.5 疑难解惑 301
第16章 使用CSS 3滤镜美化网页元素 30316.1 滤镜概述 30416.2 基本滤镜 30416.2.1 通道(Alpha)滤镜 30516.2.2 模糊(Blur)滤镜 30716.2.3 色彩(Chroma)滤镜 30816.2.4 投影(DropShadow)滤镜 30916.2.5 水平翻转(FlipH)滤镜 31116.2.6 垂直翻转(FlipV)滤镜 31116.2.7 光晕(Glow)滤镜 31216.2.8 灰度(Gray)滤镜 31316.2.9 反相(Invert)滤镜 31416.2.10 遮罩(Mask)滤镜 31516.2.11 波浪(Wave)滤镜 31516.2.12 阴影(Shadow)滤镜 31716.2.13 X-ray滤镜 31816.3 高级滤镜 31816.3.1 光照(Light)滤镜 31916.3.2 渐隐(BlendTrans)滤镜 32016.3.3 切换(RevealTrans)滤镜 32216.4 疑难解惑 324
第17章 JavaScript编程基本知识 32517.1 认识JavaScript 32617.1.1 什么是JavaScript 32617.1.2 JavaScript的特点 32617.1.3 JavaScript与Java的区别 32717.1.4 JavaScript的版本 32817.2 JavaScript基本语法的应用 32917.2.1 注释的应用 32917.2.2 语句的应用 33117.2.3 语句块的应用 33217.3 JavaScript的数据结构 33317.3.1 认识标识符 33317.3.2 认识关键字 33317.3.3 认识常量 33417.3.4 认识变量及其应用 33417.4 JavaScript数据类型的使用 33617.4.1 typeof运算符的使用 33617.4.2 undefined类型的使用 33817.4.3 null类型的使用 33817.4.4 Boolean类型的使用 33917.4.5 Number类型的使用 34017.4.6 String类型的使用 34117.4.7 Object类型的使用 34217.5 JavaScript运算符的使用 34217.5.1 算术运算符 34217.5.2 比较运算符 34417.5.3 位运算符 34517.5.4 逻辑运算符 34617.5.5 条件运算符 34717.5.6 赋值运算符 34817.5.7 运算符的优先级 35017.6 综合示例——一个简单的JavaScript程序 35117.7 疑难解惑 352
第18章 JavaScript的程序控制结构与语句 35318.1 赋值语句 35418.2 条件判断语句 35418.2.1 if语句 35418.2.2 if-else语句 35518.2.3 if ... else if语句 35618.2.4 if语句的嵌套 35718.2.5 switch语句 35918.3 循环控制语句 36018.3.1 while语句 36018.3.2 do-while语句 36118.3.3 for语句 36318.4 跳转语句 36418.4.1 break语句 36418.4.2 continue语句 36518.5 综合示例——在页面中显示距离2015年元旦的天数 36618.6 上机练习——制作一个简易乘法表 36718.7 疑难解惑 368
第19章 JavaScript中的函数 36919.1 函数的简介 37019.2 调用函数 37019.2.1 函数的简单调用 37019.2.2 在表达式中调用 37119.2.3 在事件响应中调用函数 37219.2.4 通过链接调用函数 37319.3 JavaScript中常用的函数 37419.3.1 嵌套函数 37419.3.2 递归函数 37519.3.3 内置函数 37619.4 综合示例——购物简易计算器 38419.5 上机练习——制作闪烁图片 38619.6 疑难解惑 387
第20章 JavaScript的内置对象 38920.1 字符串对象 39020.1.1 创建字符串对象的方法 39020.1.2 字符串对象常用属性的应用 39020.1.3 字符串对象常用方法的应用 39120.2 数学对象 39420.2.1 创建Math对象的方法 39420.2.2 数学对象属性的应用 39420.2.3 数学对象方法的使用 39520.3 日期对象 39720.3.1 创建日期对象 39720.3.2 日期对象常用方法的应用 39820.3.3 日期间的运算 40120.4 数组对象 40220.4.1 创建数组对象 40220.4.2 数组对象属性的应用 40220.4.3 数组对象常用方法的应用 40520.5 综合示例——制作网页随机验证码 40920.6 上机练习——动态显示当前时间 41020.7 疑难解惑 412
第21章 JavaScript对象编程 41521.1 文档对象模型(DOM) 41621.1.1 文档对象模型(DOM)介绍 41621.1.2 在DOM模型中获得对象 41621.1.3 事件驱动的应用 41721.2 窗口(window)对象 41921.2.1 创建窗口(window) 41921.2.2 创建对话框 42121.2.3 窗口的相关操作 42321.3 文档(document)对象 42421.3.1 文档属性的应用 42421.3.2 文档中图片的使用 42621.3.3 显示文档中的所有超链接 42721.4 表单对象 42921.4.1 创建form对象 42921.4.2 form对象属性与方法的应用 43021.4.3 单选按钮与复选框的使用 43121.4.4 下拉菜单的使用 43221.5 综合示例——表单注册与表单验证 43321.6 上机练习——省市联动效果 43821.7 疑难解惑 441
第22章 HTML 5、CSS 3和JavaScript的搭配使用 44322.1 常见的JavaScript编写工具 44422.1.1 记事本 44422.1.2 Dreamweaver 44522.2 JavaScript在HTML中的使用 44622.2.1 在HTML网页头中嵌入JavaScript代码 44622.2.2 在HTML网页中嵌入JavaScript代码 44722.2.3 在HTML网页的元素事件中嵌入JavaScript代码 44822.2.4 在HTML中调用已经存在的JavaScript文件 44922.2.5 通过JavaScript伪URL引入JavaScript脚本代码 45022.3 JavaScript与CSS 3的结合使用 45122.3.1 动态添加样式 45122.3.2 动态改变样式 45222.3.3 动态定位网页元素 45322.3.4 设置网页元素的显示与隐藏 45622.4 HTML 5、CSS 3和JavaScript的搭配应用 45722.4.1 设定左右移动的图片 45722.4.2 制作颜色选择器 46022.4.3 制作跑马灯效果 46222.5 综合示例——制作树形导航菜单 46422.6 上机练习——制作滚动的菜单 46822.7 疑难解惑 470
第23章 制作企业门户类网页 47323.1 构思布局 47423.1.1 设计分析 47423.1.2 排版架构 47423.2 内容设计 47523.2.1 使用JavaScript技术实现Logo与导航菜单 47523.2.2 Banner区 47623.2.3 资讯区 47723.2.4 版权信息 47923.3 设置链接 48023.4 疑难解惑 480
第24章 制作在线购物类网页 48124.1 整体布局 48224.1.1 设计分析 48224.1.2 排版架构 48224.2 模块分割 48324.2.1 Logo与导航区 48324.2.2 Banner与资讯区 48524.2.3 产品类别区域 48624.2.4 页脚区域 48824.3 设置链接 48824.4 疑难解惑 488

精彩书摘

　　第1章 HTML基础语法

　　自从网页技术诞生以来，构建网页的语言一直在不断地演化。现在，一系列最佳实践已经出现，用户在设计网页时，通常会将HTML、CSS和JavaScript技术结合运用：使用HTML创建一些基本的网页内容，使用CSS控制网页内容的外观，让它们更加引人注目，使用JavaScript添加具有很强动态感的功能。本书会详细地向读者介绍HTML、CSS和JavaScript的知识。本章将主要介绍HTML语言。

　　通过对本章的学习，读者不仅可以了解HTML的特点、发展历史和开发工具，还可以掌握HTML的语法结构、一些常用的标记，以及编写HTML的注意事项。

　　本章学习目标如下：

　　熟悉HTML的特点和发展历史。

　　了解HTML的编辑器。

　　掌握Dreamweaver工具的使用。

　　掌握HTML的标记语法和属性语法。

　　了解HTML中常用的全局属性。

　　掌握头部内容的一些常用标记。

　　掌握bgcolor属性的使用。

　　熟悉与页面边距有关的属性设置。

　　掌握段落标记和超链接标记的使用。

　　掌握图像标记和标题显示标记。

　　掌握HTML文件中的注释。

　　了解编写HTML文件的注意事项。

　　1.1 了解HTML语言

　　HTML是HyperText Markup Language的缩写，通常被译为“超文本标记语言”，它是标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至是音乐和程序等的非文字元素。

　　下面我们来简单了解HTML语言的基本知识，包括HTML语言的特点、发展历史和编辑工具等内容。

　　1.1.1 HTML概述

　　HTML是用来描述网页的一种标记语言，它使用标记来描述网页。例如，下面的代码是一段简单的HTML内容：

　　我的HTML网页示例

　　第一次进行测试，谢谢大家包容。

　　将上述内容复制到一个记事本文件中，并且将记事本文件的后缀名更改为“.html”或者是“.htm”，然后在浏览器（例如Chrome浏览器）的地址栏中输入路径进行测试，效果如图1-1所示。

　　图1-1 简单的HTML例子

　　从上面的例子可以看出，HTML网页的制作很简单。

　　HTML有多种特点，说明如下。

　　升级简单性：HTML版本升级采用超集方式，从而更加灵活、方便。所谓超集，可以这样理解，如果一个集合V1中的每一个元素都在集合V2中，且集合V2中可能包含V1中没有的元素，则集合V2就是V1的一个超集。若V2是V1的超集，则V1是V2的真子集。

　　可扩展性：HTML的应用非常广泛，它带来了加强的功能。HTML采取子类元素的方式，为系统扩展带来保证。

　　平台无关性：虽然个人计算机被广泛应用，但是使用其他计算机（例如Mac）的也大有人在。HTML可以广泛应用在多种平台上，都能获得一致的效果。

　　通用性：HTML是网络的通用语言，它允许网页制作者建立文本与图片相结合的复杂页面，这些页面可以被网上的任何用户浏览到，无论使用的是什么类型的计算机或者浏览器。

　　1.1.2 HTML发展历史

　　在整个20世纪90年代，网络呈爆炸式增长，越来越多的网页设计者和浏览器开发者参与到网络中来，每一个人都有不同的想法和目标，每一个人都会按照自己的想法和目标参与到网络中来。网页设计者会按照自己的想法和目标去编写网页，而浏览器的开发者则可能与网页设计者的想法不同，它会按照自己的方式去呈现网页。

　　当网页的设计者和浏览器的开发者发生分歧时，必然会带来非常不同的呈现。这时，设计者要面向所有的用户，就必须为每种浏览器创作不同的网页，来实现相同的呈现。这就必然要增加创作的成本，从而导致万维网的分裂。因此，只有网页的设计者和浏览器的开发者都按照同一个规范来编写和呈现网页时，才会避免万维网的分裂。正是这个原因促使各浏览器开发商协调起来，共同实现了同一个HTML规范。

　　HTML没有1.0版本，这是因为一开始有多种不同版本的HTML，当时W3C还没有成立，HTML在1993年6月作为互联网工程工作小组（Internet Engineering Task Force，IETF）的第一份草案发布，但是并未被推荐为正式规范。

　　在IETF的支持下，根据以往的通用实践，在1995年整理和发布了HTML 2.0。

　　但HTML 2.0是作为RFC（Request For Comments）1866发布的，其后又经过了多次修改。后来的HTML+和HTML 3.0也提出了很多好的建议，并且增加了大量的内容，然而这些版本还未能上升到创建一个规范的程度，许多商家实际上并未严格遵守这些版本的格式。

　　1996年，W3C的HTML工作组编撰了通用的实践，并在第二年公布了HTML 3.2规范。同期，IETF宣布关闭HTML工作组，开始由W3C负责开发和维护HTML规范。

　　1997年12月，HTML 4.0被W3C正式推荐为规范，并且在1999年12月推出了一个修订版——HTML 4.01，该版本引入了样式表、脚本、框架、嵌入对象、表格以及表单等多种内容。

　　此后，W3C解散了HTML工作组，HTML规范长时间处于停滞状态，并转而开发XHTML，直到发布XHTML 1.0规范和XHTML 2.0规范。但由于XHTML规范越来越复杂，这导致其长期不能被浏览器商家接受。

　　与此同时，WHATWG认为XHTML并不是用户所需要的，于是继续开发HTML的后续版本，并将其定名为HTML 5.0。随着万维网的发展，WHATWG的工作取得了很多厂商的支持，并最终使W3C认可，终止了XHTML的开发，重新启动了HTML工作组，在WHATWG工作的基础上开发HTML 5，并最终发布了HTML 5规范。

　　1.1.3 HTML编辑器

　　编辑HTML代码时可以使用记事本，通过记事本，可以按照以下几个步骤来创建网页。

　　（1） 启动记事本。启动记事本最简单的一种办法是，直接单击计算机“开始”菜单中的“运行”命令，然后在弹出的对话框中输入“notepad”，即可直接打开记事本窗口。

　　（2） 在打开的记事本窗口中可以编写HTML代码。

　　（3） 需要把HTML代码保存为HTML格式的网页文件。在记事本窗口的菜单栏中选择“文件”→“另存为”命令，在弹出的“另存为”对话框中设置保存类型为“所有文件”；设置HTML文件的扩展名为“.html”或者“.htm”，这两种扩展名没有区别，可以根据读者的喜好进行选择。

　　经过上述步骤编辑并保存好HTML文件后，即可在浏览器中运行了。

　　上面的例子只是说明了如何在记事本中编写HTML代码。其实，任何文本编辑器都可以编写HTML代码，例如写字板、Word、WPS等编辑程序。除了这些程序外，还可以使用更加专业化的工具来编辑HTML。

　　表1-1对各种HTML开发工具进行了分类。

　　表1-1 HTML开发工具分类

　　分 类说 明代表工具不 足

　　所见即所得的工具所谓“所见即所得”，是指在编辑网页时即能同步地看到效果，与使用浏览器时看到的效果基本一致Drumbeat、NetobjectFusion容易产生废代码

　　续表

　　分 类说 明代表工具不 足

　　HTML

　　代码编辑工具用纯粹的HTML代码编辑工具，用户可以对页面进行完全的控制记事本等用户必须掌握

　　HTML语言

　　混合型

　　工具介于上述两种工具之间，混合型工具可以在所见即所得的工作环境下完成主要的工作，同时也能切换到代码编辑器Adobe Dreamweaver、

　　FrontPage、CutePage、

　　QuickSiteaver通常也不能完全控制HTML页面的代码，也容易产生废代码

　　1.1.4 认识Dreamweaver工具

　　Adobe Dreamweaver，简称DW，是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得型的网页编辑器，它是一种为专业的网页设计师特别开发的可视化网页设计工具，利用它，可以轻而易举地制作出跨平台、跨浏览器的充满动感的网页。

　　1．Dreamweaver的版本

　　Dreamweaver 1.0版本于1997年12月由Macromedia公司发布。目前，Dreamweaver CC是其最新版本。

　　表1-2给出了Dreamweaver版本发布的历史情况。

　　表1-2 Dreamweaver的历史版本

　　所处时期版 本

　　Macromedia时期Dreamweaver 1.0、Dreamweaver 2.0、Dreamweaver 2.01、Dreamweaver 3、Dreamweaver 4、Dreamweaver 5、Dreamweaver MX、Dreamweaver MX 2004和Dreamweaver 8.0

　　Adobe时期Dreamweaver CS3、Dreamweaver CS4、Dreamweaver CS5、Dreamweaver CS5.5和Dreamweaver CS6

　　2013Dreamweaver Creative Cloud，即Dreamweaver CC

　　2．系统要求

　　对于Windows操作系统来说，使用Dreamweaver工具时，需要满足以下几个要求：

　　Intel Pentium 4或者AMD Athlon 64处理器。

　　Microsoft Windows XP（带有Service Pack 2，推荐Service Pack 3）；Windows Vista Home Premium、Business、Ultimate或Enterprise（带有Service Pack 1）；Windows 7和Windows 8。

　　512MB内存。

　　1GB可用硬盘空间，用于安装；安装过程中还需要额外的可用空间（无法安装在可移动闪存设备上）。

　　1024×768屏幕，16位显卡。

　　DVD-ROM驱动器。

　　在线服务需要宽带Internet连接，并不断验证订阅版本（如果适用）。

　　3．操作界面

　　虽然Dreamweaver CC是最新的版本，但是目前Dreamweaver CS4和Dreamweaver CS5版本经常使用。本书以Dreamweaver CS5工具进行编辑，使用该工具之前，需要从网络下载，下载成功后进行安装，由于很简单，这里不再给出具体的安装步骤。

　　安装成功后，直接打开，初始界面如图1-2所示。

　　图1-2 Dreamweaver的界面效果

　　用户可以在如图1-2所示的界面中编辑HTML代码，也可以执行其他的操作。通常情况下，为了利于HTML文件的维护和修改，可以首先在Dreamweaver中创建一个站点，然后在该站点下创建其他文件（例如.html文件、.txt文件和文件夹等）。

　　【例1-1】

　　本例演示如何创建一个站点，以及如何向站点中添加文件。实现步骤如下。

　　（1） 在打开的Dreamweaver界面的菜单栏中选择“站点”→“新建站点”命令，这时会弹出如图1-3所示的对话框。在该对话框中，输入站点名称并选择或输入站点文件夹，然后单击“保存”按钮即可。

　　（2） 创建成功后，会在“文件”选项卡中显示站点名称，然后选择当前站点，并单击鼠标右键，从快捷菜单中选择要执行的命令，例如“新建文件”、“新建文件夹”、“打开”等多个命令。

　　（3） 直接选择要执行的命令。这里在新站点下添加一个image文件夹和一个test.html文件，效果如图1-4所示。

　　图1-3 新建站点

　　图1-4 创建文件夹和文件

　　（4） 向test.html文件中添加一段文本字符串，添加完毕后，单击如图1-5所示的按钮，选择在浏览器中浏览网页效果。在图1-5中，用户选择“编辑浏览器列表”命令可以添加或者编辑浏览器。

　　图1-5 选择在浏览器中预览/调试

　　……

前言/序言

　　目前，HTML 5和CSS 3的出现，大大减轻了前端开发者的工作量，降低了开发成本，所以HTML 5在未来的技术市场中将更有竞争力。因此学习流行的HTML 5 + CSS 3 + JavaScript黄金搭档可以让读者掌握目前最新的前端技术，使前端设计从外观上变得更炫、技术上更简易。本书从易到难，详细、透彻地讲解各个知识点，非常适合没有基础的读者学习，同时也可以让有HTML 4基础的读者学会HTML 5技术。

　　1. 本书特色

　　（1）知识全面：涵盖了所有的HTML 5 + CSS 3 + JavaScript知识点，可以帮助读者由浅入深地掌握网页设计方面的技能。

　　（2）图文并茂：在介绍案例的过程中，每一个操作均有对应的插图。这种图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程及效果，便于更快地理解和掌握。

　　（3）易学易用：颠覆传统的“看”书观念，变成一本能“操作”的图书。

　　（4）案例丰富：把知识点融会于系统的案例实训中，并且结合经典案例进行讲解和拓展，进而实现“知其然，并知其所以然”的效果。

　　（5）提示周到：本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“注意”等形式进行说明，避免读者在学习的过程中走弯路。

　　（6）超值赠送：除了本书的素材和结果外，还将赠送封面所述的大量资源，使读者可以全面掌握网页设计方方面面的知识。

　　2. 读者对象

　　本书不仅适合网页设计初级读者入门学习，还可作为中、高级用户的参考手册。书中大量的示例模拟了真实的网页设计案例，对读者的工作有现实的借鉴意义。

　　3. 作者团队

　　本书作者刘玉红长期从事网站设计与开发工作。另外，胡同夫、梁云亮、王攀登、王婷婷、陈伟光、包慧利、孙若淞、肖品、王维维和刘海松等人参与了编写工作。

　　本书虽然倾注了作者的心血，但由于水平有限，书中难免有错漏之处，恳请读者谅解。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。

　　编 者

洞悉网页交互的奥秘：掌握现代前端开发的艺术 在这瞬息万变的数字时代，一个引人入胜、功能强大的网站早已不是奢侈品，而是信息传播、品牌展示、用户互动乃至商业驱动的核心。而构建这一切的基石，正是那些构成网页灵魂的语言：HTML5、CSS3 和 JavaScript。它们如同建筑师手中的蓝图、艺术家手中的调色板和程序员手中的魔法棒，共同雕琢出我们在屏幕上所见的每一个精彩瞬间。 本书并非简单的语法罗列，而是一场深入浅出的实战演练，旨在带领读者穿越前端开发的迷雾，抵达精通的彼岸。我们相信，真正的学习源于实践，而理解技术的最佳途径，莫过于在真实的项目中加以运用。因此，本书将以一系列精心设计的、贴近实际需求的案例为载体，让读者在动手实践的过程中，循序渐进地掌握 HTML5 的语义化构建、CSS3 的视觉美学以及 JavaScript 的交互逻辑。 HTML5：构建清晰、语义化的网页骨架 HTML5 作为网页内容的结构层，其重要性不言而喻。它不仅仅是标记文本，更是赋予网页生命和意义的关键。本书将从 HTML5 最核心的语义化标签入手，教你如何清晰地表达页面内容，让搜索引擎更容易理解你的网站，也让屏幕阅读器等辅助技术更好地服务于所有用户。我们将深入探讨 `

`, `

评分☆☆☆☆☆

我是一名有几年经验的前端开发者，一直在寻找一本能够系统梳理并深入讲解HTML5、CSS3和JavaScript在实际项目中的应用的书籍。市面上很多书要么过于理论化，要么案例陈旧。这本书正好满足了我的需求。它不仅仅是罗列技术点，而是通过一个个精心设计的案例，展示了如何将这些技术融会贯通，构建出功能完善、用户体验良好的网页。我尤其欣赏书中对CSS3新特性的运用，比如Flexbox和Grid布局在实际页面结构中的妙用，以及CSS变量和自定义属性如何提升代码的可维护性。JavaScript部分，本书涵盖了DOM操作、事件处理、AJAX异步请求等核心内容，并结合实际案例讲解了如何实现动态效果和数据交互，比如用户登录验证、商品搜索过滤等，这些都是前端开发中非常实用的技能。光盘里提供的案例源码，结构清晰，注释详细，这对于我们这些有一定基础的开发者来说，是非常宝贵的学习资料，可以直接参考其中的实现思路和代码组织方式。更重要的是，书中的案例并没有止步于简单的页面展示，而是涉及到了一些更复杂的交互逻辑和用户体验优化，这帮助我拓宽了思路，也学习到了很多提升开发效率和代码质量的技巧。

评分☆☆☆☆☆

这本书真的太棒了！作为一个对网页开发完全陌生的新手，我原本以为会像读天书一样，结果却被这本书的循序渐进和通俗易懂深深吸引。从最基础的HTML标签讲解，到CSS的样式美化，再到JavaScript的交互逻辑，作者都用了大量贴合实际的案例来演示，而不是枯燥的理论堆砌。我最喜欢的是它没有直接给你一堆代码让你模仿，而是先告诉你这个案例要实现什么功能，然后一步步拆解，告诉你为什么这么做，每行代码的作用是什么。就好像老师在旁边手把手教你一样，非常有成就感。而且，书中的案例涵盖了从简单的个人博客到稍微复杂的电商产品展示页面，这些都是我日常上网经常能接触到的，所以学习起来觉得特别有意义，也更有动力去实践。我记得有一个案例是做一个响应式导航栏，我之前看网上的教程觉得很复杂，书里却用一种非常巧妙的方式解释了如何让导航栏在不同屏幕尺寸下都能良好显示，我跟着做了一遍，瞬间就明白了其中的原理。光盘里的资源也很丰富，包含了案例的源码和一些额外的素材，下载下来直接就可以跟着书本的步骤来操作，这大大节省了我去找素材的时间，也保证了学习的顺畅性。总的来说，这本书就像一座桥梁，将我从一个对代码一无所知的人，引向了一个能够独立构建网页的开发者。

评分☆☆☆☆☆

我是一个对网页美学有很高追求的学习者，总是希望自己的作品既有功能性，又有视觉冲击力。这本书恰恰在这一点上给了我很大的启发。它在讲解HTML5和CSS3的时候，非常注重细节和表现力。例如，在CSS部分，不仅讲了基本的样式属性，还深入探讨了如何运用色彩理论、排版技巧、以及响应式设计来打造出既美观又实用的网页布局。我特别喜欢书中关于“视觉层次”和“用户引导”的讲解，通过案例展示了如何巧妙地运用颜色、大小、间距等元素，引导用户的注意力，让他们更容易找到他们想要的信息。JavaScript部分也很有意思，它没有把JavaScript写成纯粹的功能实现工具，而是强调如何用JavaScript来增强网页的交互性和动态美感，比如平滑的滚动效果、视差滚动、以及一些微妙的动画反馈。这本书让我意识到，美学和技术是可以完美结合的，并且在现代网页设计中，这种结合是至关重要的。光盘里的案例代码，让我有机会去拆解那些令人惊艳的视觉效果是如何实现的，这比单纯看图更能学到东西。

评分☆☆☆☆☆

这本书给我最大的惊喜在于它的“案例驱动”学习模式。作为一名平面设计师，我对网页开发一直有点畏惧，觉得那些代码太抽象了。但是这本书通过大量的真实案例，把那些抽象的代码变得可视化，让我在设计的过程中，能够直观地感受到代码是如何转化为视觉元素的，以及如何通过代码实现交互效果。书中每一个案例都像是一个小小的项目，从需求分析到最终实现，都讲解得非常细致。我记得有一个案例是做一个创意相册展示，书里详细讲解了如何使用CSS的动画属性，让图片切换效果更加生动有趣，还用JavaScript实现了图片的懒加载，这样在大图多的页面也不会加载很慢，用户体验一下子就提升了。而且，书中的案例都比较贴近实际应用场景，不像有些书里的例子那样，脱离实际，学了也用不上。它让我明白，原来网页开发不仅仅是写代码，更是将创意和功能通过技术完美结合的过程。光盘里的素材和源码，对我这个设计背景的人来说，简直是雪中送炭，我可以直接在设计稿的基础上，尝试用书中的代码来实现，大大缩短了从设计到实现的距离。

评分☆☆☆☆☆

作为一个经常需要与开发团队沟通的项目经理，我一直想更深入地了解前端开发的具体流程和技术细节，以便更好地协调项目和评估技术可行性。这本书为我打开了一扇窗。它用一种非常清晰和结构化的方式，展示了HTML5、CSS3和JavaScript是如何协同工作的，以及它们在不同类型的网站开发中扮演的角色。我通过阅读这本书，对前端开发的整个技术栈有了更宏观的认识，也理解了为什么某些设计在技术上是可行的，而另一些则可能需要额外的开发成本。书中对案例的讲解，就像是在模拟一个真实的项目开发过程，让我能够站在开发者的角度去思考问题。例如，在讲解如何实现一个在线表单的时候，书里不仅介绍了HTML的表单元素，还详细说明了如何用JavaScript进行客户端验证，以及如何用CSS来美化表单样式，这让我理解了前端开发的细致性和对用户体验的重视。光盘里的资源，虽然我不会亲自去写代码，但了解源码的结构和逻辑，有助于我与开发团队进行更有效的沟通，也能更好地理解他们的工作内容和遇到的挑战。

评分☆☆☆☆☆

很好，正版，太好了很喜欢开始学了

评分☆☆☆☆☆

质量不错，内容正是我所需要的

评分☆☆☆☆☆

书确实很好，很刚收到就迫不及待的拆开看了半天

评分☆☆☆☆☆

工作用的书，学无止境啊。

评分☆☆☆☆☆

内容详尽，非常实用的一本书

评分☆☆☆☆☆

对此商品很满意

评分☆☆☆☆☆

书本挺不错，内容比较好。

评分☆☆☆☆☆

书不错，只是没优惠，没赶在活动时候买

评分☆☆☆☆☆

初学者推荐，上面有我想要的做出的效果