内容简介
本书针对零基础的读者,用实例引导读者深入学习,采取“HTML基础知识→HTML5高级技术→用CSS美化网页→网页布局和JavaScript→综合案例实战”的模式,深入浅出地讲解网页制作的各项技术及实战技能。
本书第1篇主要讲解HTML入门知识、网页文档结构、网页中的文本和图像、建立超链接、创建表格和表单等内容;第2篇主要讲解HTML5快速入门、HTML5中的多媒体、使用HTML5绘制图形等内容;第3篇主要讲解CSS概述与基本语法、美化网页字体与段落、美化网页图片、美化网页背景与边框、美化表格和表单样式、美化超链接和鼠标指针、控制网页导航菜单的样式等内容;第4篇主要讲解CSS+DIV盒子的浮动与定位、网页布局剖析与制作、JavaScript和jQuery、经典的网页动态特效案例等;第5篇主要讲解制作企业门户类网页、制作在线购物类网页、制作移动设备类网页;在DVD光盘中赠送了丰富的资源,诸如本书实例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、精选的JavaScript实例、HTML5标记速查手册、CSS属性速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等资料。本书适合任何想学习网页设计的人员,无论您是否从事计算机相关行业,是否接触过网页设计,通过本书的学习均可快速掌握网页的制作方法和技巧。
前言
“实战从入门到精通”系列图书是专门为初学者量身定做的一套学习用书,由刘玉红策划,千谷网络科技实训中心的高级讲师编著,整套书涵盖高效办公、网站开发、数据库设计等方面。整套书具有以下特点。前沿科技无论是网站建设、数据库设计,还是HTML、CSS,我们都精选较为前沿或者用户群最大的领域推进,帮助读者认识和了解最新动态。权威的作者团队组织国家重点实验室和资深应用专家联手编写本套图书,融合丰富的教学经验与优秀的管理理念。学习型案例设计以技术的实际应用过程为主线,全程采用图解和同步多媒体结合的教学方式,生动、直观、全面地剖析使用过程中的各种应用技能,降低难度并提升学习效率。为什么要写这样一本书目前,HTML、CSS和JavaScript是网页制作和设计的黄金搭档。特别是HTML5的出现,大大减轻了前端开发者的工作量,降低了开发成本。目前学习和关注网页制作的人越来越多,而很多网页制作和设计的初学者都苦于找不到一本通俗易懂、容易入门和案例实用的参考书。通过本书的案例实训,学生可以很快上手流行的工具,提高职业能力,从而帮助解决公司与学生的双重需求问题。本书特色零基础入门无论您是否从事计算机相关行业,是否接触过网页制作和设计,都能从本书中找到最佳起点。超多、实用、专业的范例和项目本书在编排上紧密结合深入学习网页制作技术的先后顺序,从HTML的基本概念开始,逐步深入学习各种应用技术,侧重实战技能,使用简单易懂的实际案例进行分析和操作指导,让读者轻松阅读,操作起来有章可循。随时检测自己的学习成果每章首页中,均提供了学习要点,以指导读者重点学习及学后检查。大部分章节最后的“跟我练练手”板块,均根据本章内容精选而成,读者可以随时检测自己的学习成果和实战能力,做到融会贯通。细致入微、贴心提示本书在各章中使用了“注意”“提示”“技巧”等小栏目,使读者在学习过程中更清楚地了解相关操作、理解相关概念,并轻松掌握各种操作技巧。专业创作团队和技术支持本书由千谷网络科技实训中心提供技术支持。您在学习过程中遇到任何问题,可加入QQ群221376441进行提问,专业人员会在线答疑。“网页制作和设计”学习最佳途径本书以学习“网页制作和设计”的最佳制作流程来分配章节,从最初的HTML基本概念开始讲解,然后讲解HTML5新技术、CSS美化网页技术、网页布局和JavaScript等,并在最后的项目实战环节特意补充了3个综合案例的制作过程,以便进一步提高读者的实战技能。超值光盘全程同步教学录像涵盖本书所有知识点,详细讲解每个实例和项目的过程及技术关键点,使读者能比看书更轻松地掌握书中所有的网页制作和设计知识,而且扩展的讲解部分能使您得到比书中更多的收获。超多容量王牌资源大放送赠送大量王牌资源,包括书中案例源代码、教学幻灯片、本书精品教学视频、88个实用类网页模板、精选的JavaScript实例、HTML5标记速查手册、CSS属性速查表、JavaScript函数速查手册、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。读者对象没有任何网页设计基础的初学者。有一定的HTML和CSS基础,想精通网页制作和设计的人员。有一定的HTML和CSS基础,没有项目经验的人员。正在进行毕业设计的学生。大专院校及培训学校的老师和学生。创作团队本书由刘玉红和蒲娟编写,参加编写的人员还有刘玉萍、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、梁云梁和周浩浩。在编写过程中,我们尽可能地将最好的讲解呈现给读者,但也难免有疏漏和不妥之处,敬请不吝指正。若您在学习中遇到困难或疑问,或有何建议,可写信至信箱357975357@qq.com。编 者目录
第1篇 HTML基础知识第1章 HTML入门知识1.1 网页与网站 41.1.1 什么是网页与网站 41.1.2 网页基本构成元素 51.2 HTML的基本概念 61.2.1 什么是HTML 61.2.2 HTML的发展历程 61.2.3 HTML页面的整体结构 71.3 使用浏览器查看源文件 81.4 大神解惑 91.5 跟我练练手 9第2章 网页文档结构2.1 HTML文件基本结构 122.2 HTML5基本标记详解 122.2.1 文档类型说明 122.2.2 HTML标记 132.2.3 头标记 132.2.4 网页的主体标记body 152.2.5 页面注释标记 162.3 HTML5语法的变化 162.3.1 标记不再区分大小写 172.3.2 允许属性值不使用引号 172.3.3 允许部分属性值的属性省略 172.4 网页文件的编写方法 182.4.1 使用记事本手工编写网页 182.4.2 使用Dreamweaver CC编写HTML文件 192.5 符合W3C标准的HTML5网页 202.6 大神解惑 212.7 跟我练练手 22第3章 网页中的文本和图像3.1 在网页中添加文本 243.1.1 普通文本的添加 243.1.2 特殊字符文本的添加 243.1.3 特殊文本的添加 263.2 文本排版 273.2.1 换行标记 273.2.2 段落标记 283.2.3 标题标记 283.3 文字列表 293.3.1 建立无序列表 293.3.2 建立有序列表 303.3.3 建立不同类型的无序列表 303.3.4 建立不同类型的有序列表 313.3.5 建立嵌套列表 313.3.6 自定义列表 323.4 网页中的图像 323.4.1 插入图像 323.4.2 设置图像的宽度和高度 343.4.3 设置图像的提示文字 353.4.4 将图片设置为网页背景 363.4.5 排列图像 363.5 图文并茂房屋装饰装修网页 373.6 在线购物网站产品展示效果 383.7 大神解惑 393.8 跟我练练手 40第4章 建立超链接4.1 网页超链接的概念 424.1.1 什么是网页超链接 424.1.2 超链接中的URL 424.1.3 超链接的URL类型 434.2 建立网页超链接 434.2.1 创建超文本链接 434.2.2 创建图片链接 444.2.3 创建下载链接 464.2.4 使用相对路径和绝对路径 464.2.5 设置以新窗口显示超链接页面 474.2.6 设置电子邮件链接 484.3 浮动框架 494.4 精确定位热点区域 504.5 使用锚链接制作电子书阅读网页 544.6 大神解惑 564.7 跟我练练手 56第5章 创建表格和表单5.1 表格的基本结构 585.2 创建表格 595.2.1 创建普通表格 595.2.2 创建带有标题的表格 605.2.3 定义表格的边框类型 605.2.4 定义表格的表头 615.2.5 设置表格背景 615.2.6 设置单元格背景 625.2.7 合并单元格 635.2.8 排列单元格中的内容 665.2.9 设置表格的行高与列宽 665.3 创建完整的表格 675.4 认识表单 685.5 表单基本元素的使用 695.5.1 单行文本输入框 695.5.2 多行文本输入框 705.5.3 密码域 705.5.4 单选按钮 715.5.5 复选框 725.5.6 下拉选择框 735.5.7 普通按钮 735.5.8 提交按钮 745.5.9 重置按钮 755.6 表单高级元素的使用 755.6.1 url属性的应用 765.6.2 email属性的应用 765.6.3 date和time属性的应用 765.6.4 number属性的应用 775.6.5 range属性的应用 785.6.6 required属性的应用 795.7 创建用户反馈表单 795.8 制作商品报价单 815.9 大神解惑 835.10 跟我练练手 84第2篇 HTML5高级技术第6章 HTML5快速入门6.1 各大浏览器与HTML5的兼容性 886.2 检测浏览器是否支持HTML标记 886.3 语法变化和标记 896.3.1 HTML5的语法变化 896.3.2 HTML5中的标记方法 896.3.3 版本兼容性 906.4 新增的元素和废除的元素 916.4.1 新增的结构元素 926.4.2 新增的input元素类型 946.4.3 新增的其他元素 946.4.4 废除的元素 966.5 新增的属性和废除的属性 976.5.1 新增的属性 976.5.2 废除的属性 1016.6 新增全局属性 1036.6.1 contentEditable属性 1036.6.2 designMode属性 1036.6.3 hidden属性 1046.6.4 spellcheck属性 1046.6.5 tabIndex属性 1046.7 大神解惑 1066.8 跟我练练手 106第7章 HTML5中的多媒体7.1 网页音频标记 1087.1.1 audio标记概述 1087.1.2 audio标记的属性 1087.1.3 音频解码器 1097.1.4 浏览器对audio标记的支持情况 1097.2 网页视频标记 1097.2.1 video标记概述 1097.2.2 video标记属性 1107.2.3 视频解码器 1107.2.4 浏览器对video标记的支持情况 1117.3 添加网页音频文件 1117.3.1 设置背景音乐 1117.3.2 设置音乐循环播放 1127.4 添加网页视频文件 1127.4.1 为网页添加视频文件 1127.4.2 设置自动运行 1137.4.3 设置视频文件的循环播放 1147.4.4 设置视频窗口的高度与宽度 1147.5 添加网页滚动文字 1157.5.1 滚动文字标记 1157.5.2 滚动方向属性 1167.5.3 滚动方式属性 1177.5.4 滚动速度属性 1177.5.5 滚动延迟属性 1187.5.6 滚动循环属性 1197.5.7 滚动范围属性 1197.5.8 滚动背景颜色属性 1207.5.9 滚动空间属性 1217.6 大神解惑 1227.7 跟我练练手 122第8章 使用HTML5绘制图形8.1 什么是canvas 1248.2 绘制基本形状 1258.2.1 绘制矩形 1258.2.2 绘制圆形 1268.2.3 使用moveTo与lineTo绘制直线 1278.2.4 使用bezierCurveTo绘制贝塞尔曲线 1288.3 绘制渐变图形 1308.3.1 绘制线性渐变 1308.3.2 绘制径向渐变 1328.4 绘制变形图形 1338.4.1 变换原点坐标 1338.4.2 图形缩放 1348.4.3 旋转图形 1358.5 绘制其他样式的图形 1368.5.1 图形组合 1368.5.2 绘制带阴影的图形 1388.5.3 绘制文字 1398.6 使用图像 1418.6.1 绘制图像 1418.6.2 图像平铺 1428.6.3 图像裁剪 1438.6.4 像素处理 1458.7 图形的保存与恢复 1478.7.1 保存与恢复图形状态 1478.7.2 保存文件 1488.8 绘制火柴棒人物 1498.9 绘制商标 1518.10 大神解惑 1538.11 跟我练练手 154第3篇 用CSS美化网页第9章 CSS概述与基本语法9.1 CSS概述 1589.1.1 CSS功能 1589.1.2 浏览器与CSS的兼容性 1589.1.3 CSS基础语法 1599.1.4 CSS常用单位 1599.2 编辑和浏览CSS 1649.2.1 手工编写CSS 1649.2.2 用Dreamweaver编写CSS 1659.3 在HTML中使用CSS的方法 1679.3.1 行内样式 1679.3.2 内嵌样式 1689.3.3 链接样式 1699.3.4 导入样式 1709.3.5 优先级问题 1719.4 CSS的常用选择器 1729.4.1 标记选择器 1739.4.2 类选择器 1739.4.3 ID选择器 1749.4.4 全局选择器 1759.4.5 组合选择器 1759.4.6 继承选择器 1769.4.7 伪类选择器 1779.5 选择器声明 1789.5.1 集体声明 1789.5.2 多重嵌套声明 1799.6 制作炫彩网站Logo 1799.7 制作学生信息统计表 1829.8 大神解惑 1839.9 跟我练练手 184第10章 美化网页字体与段落10.1 美化网页文字 18610.1.1 设置文字的字体 18610.1.2 设置文字的字号 18710.1.3 设置字体风格 18810.1.4 设置加粗字体 18910.1.5 将小写字母转换为大写字母 19010.1.6 设置字体的复合属性 19110.1.7 设置字体颜色 19210.2 设置文本的高级样式 19310.2.1 设置文本阴影效果 19310.2.2 设置文本溢出效果 19410.2.3 设置文本的控制换行 19510.2.4 保持字体尺寸不变 19610.3 美化网页中的段落 19710.3.1 设置单词之间的间隔 19710.3.2 设置字符之间的间隔 19810.3.3 设置文字的修饰效果 19910.3.4 设置垂直对齐方式 20010.3.5 转换文本的大小写 20210.3.6 设置文本的水平对齐方式 20310.3.7 设置文本的缩进效果 20510.3.8 设置文本的行高 20510.3.9 文本的空白处理 20610.3.10 文本的反排 20810.4 设置网页标题 20910.5 制作新闻页面 21110.6 大神解惑 21210.7 跟我练练手 212第11章 美化网页图片11.1 图片缩放 21411.1.1 通过描述标记width和height缩放图片 21411.1.2 使用CSS中的max-width和max-height缩放图片 21411.1.3 使用CSS中的width和height缩放图片 21511.2 设置图片的对齐方式 21611.2.1 设置图片横向对齐 21611.2.2 设置图片纵向对齐 21711.3 图文混排 21911.3.1 设置文字环绕效果 21911.3.2 设置图片与文字的间距 22011.4 制作学校宣传单 22111.5 制作简单图文混排网页 22311.6 大神解惑 22511.7 跟我练练手 225第12章 美化网页背景与边框12.1 使用CSS美化背景 22812.1.1 设置背景颜色 22812.1.2 设置背景图片 22912.1.3 背景图片重复 23012.1.4 背景图片随文档滚动 23112.1.5 背景图片位置 23312.1.6 背景图片大小 23412.1.7 背景显示区域 23512.1.8 背景图像裁剪区域 23712.1.9 背景复合属性 23712.2 使用CSS美化边框 23812.2.1 设置边框样式 23812.2.2 设置边框颜色 23912.2.3 设置边框线宽 24012.2.4 设置边框复合属性 24212.3 设置边框圆角效果 24212.3.1 设置圆角边框 24312.3.2 指定两个圆角半径 24312.3.3 绘制四个不同的圆角边框 24412.3.4 绘制不同种类的边框 24512.4 制作简单公司主页 24612.5 制作简单生活资讯主页 25012.6 大神解惑 25112.7 跟我练练手 252第13章 美化表格和表单样式13.1 美化表格样式 25413.1.1 设置表格边框样式 25413.1.2 设置表格边框宽度 25513.1.3 设置表格背景颜色 25613.2 美化表单样式 25713.2.1 美化表单中的元素 25713.2.2 美化提交按钮 25913.2.3 美化下拉列表框 26013.3 制作用户登录页面 26213.4 制作用户注册页面 26413.5 大神解惑 26613.6 跟我练练手 266第14章 美化超链接和鼠标指针14.1 美化超链接 26814.1.1 改变超链接基本样式 26814.1.2 设置带有提示信息的超链接 26914.1.3 设置超链接的背景图 27014.1.4 设置超链接的按钮效果 27114.2 美化鼠标特效 27214.2.1 控制鼠标箭头 27214.2.2 设置鼠标变幻式超链接 27314.2.3 设置网页页面滚动条 27414.3 图片版本超链接 27614.4 鼠标特效实例 27814.5 制作一个简单的导航栏 28014.6 大神解惑 28114.7 跟我练练手 282第15章 控制网页导航菜单的样式15.1 使用CSS美化项目列表 28415.1.1 美化无序列表 28415.1.2 美化有序列表 28515.1.3 美化自定义列表 28615.1.4 制作图片列表 28715.1.5 缩进图片列表 28815.1.6 列表复合属性 28915.2 使用CSS制作网页菜单 29015.2.1 制作无序列表的菜单 29015.2.2 制作水平样式菜单 29215.3 模拟SOSO导航栏 29415.4 将段落转变成列表 29715.5 大神解惑 29915.6 跟我练练手 300第4篇 网页布局和JavaScript第16章 CSS+DIV盒子的浮动与定位16.1 定义DIV 30416.1.1 什么是DIV 30416.1.2 创建DIV 30416.2 盒子的定位 30516.2.1 静态定位 30516.2.2 相对定位 30616.2.3 绝对定位 30716.2.4 固定定位 30816.2.5 盒子的浮动 30816.3 其他CSS布局定位方式 31016.3.1 溢出(overflow)定位 31016.3.2 隐藏(visibility)定位 31116.3.3 z-index空间定位 31316.4 多列布局 31416.4.1 设置列宽度 31416.4.2 设置列数 31616.4.3 设置列间距 31716.4.4 设置列边框样式 31816.5 定位网页布局样式 32016.6 大神解惑 32316.7 跟我练练手 324第17章 网页布局剖析与制作17.1 固定宽度网页剖析与布局 32617.1.1 网页单列布局模式 32617.1.2 网页1-2-1型布局模式 32817.1.3 网页1-3-1型布局模式 33017.2 自动缩放网页1-2-1型布局模式 33317.2.1 1-2-1等比例变宽布局 33317.2.2 1-2-1单列变宽布局 33417.3 自动缩放网页1-3-1型布局模式 33517.3.1 1-3-1三列宽度等比例布局 33517.3.2 1-3-1单侧列宽度固定的变宽布局 33517.3.3 1-3-1中间列宽度固定的变宽布局 33717.3.4 1-3-1双侧列宽度固定的变宽布局 33917.3.5 1-3-1中列和左侧列宽度固定的变宽布局 34217.4 分列布局背景色的使用 34417.4.1 设置固定宽度布局的列背景色 34417.4.2 设置特殊宽度变化布局的列背景色 34617.4.3 设置单列宽度变化布局的列背景色 34717.4.4 设置多列等比例宽度变化布局的列背景 34917.5 大神解惑 35217.6 跟我练练手 352第18章 JavaScript和jQuery18.1 认识JavaScript 35418.1.1 什么是JavaScript 35418.1.2 在HTML网页头中嵌入JavaScript代码 35418.2 JavaScript对象与函数 35518.2.1 认识对象 35618.2.2 认识函数 35618.3 JavaScript事件 35818.3.1 事件与事件处理概述 35818.3.2 JavaScript的常用事件 35918.4 认识jQuery 36018.4.1 jQuery能做什么 36118.4.2 jQuery的配置 36118.5 jQuery选择器 36218.5.1 jQuery的工厂函数 36218.5.2 常见选择器 36318.6 大神解惑 36418.7 跟我练练手 365第19章 经典的网页动态特效案例19.1 文字特效 36819.1.1 打字效果的文字 36819.1.2 文字升降特效 37019.1.3 跑马灯效果 37219.2 图片特效 37319.2.1 闪烁图片 37319.2.2 左右移动的图片 37519.3 网页菜单特效 37819.3.1 向上滚动菜单 37819.3.2 树形菜单 37919.4 鼠标特效 38419.4.1 鼠标的图片跟踪 38419.4.2 鼠标的文字跟踪 38519.5 时间特效 38719.5.1 时钟特效 38719.5.2 制作简单日历表 39219.6 页面特效 39519.6.1 网页自动滚屏 39519.6.2 颜色选择器 39819.7 大神解惑 40119.8 跟我练练手 402第5篇 综合案例实战第20章 制作企业门户类网页20.1 构思布局 40620.1.1 设计分析 40620.1.2 排版架构 40720.2 模块分割 40820.2.1 Logo与导航菜单 40820.2.2 左侧文本介绍 41020.2.3 右侧导航链接 41120.2.4 版权信息 41320.3 整体调整 414第21章 制作在线购物类网页21.1 整体布局 41621.1.1 设计分析 41621.1.2 排版架构 41721.2 模块分割 41721.2.1 Logo与导航区 41721.2.2 Banner与资讯区 41921.2.3 产品类别区域 42021.2.4 页脚区域 421第22章 制作移动设备类网页22.1 网站设计分析 42422.2 网站结构分析 42422.3 网站主页面的制作 42522.4 网站成品预览 427