顶部
收藏

网页设计与制作(HTML5+CSS3+Javascript)(第4版)

“十四五”职业教育国家规划教材

作者:
刘万辉 常村红 主编
定价:
59.50 元
版面字数:
550.00千字
开本:
16开
装帧形式:
平装
页数:
372
最新
印次时间:
2026年03月
ISBN:
978-7-04-064979-6
物料号:
64979-00
出版时间:
2026-03-11
读者对象:
高等职业教育
一级分类:
计算机大类
二级分类:
计算机类
三级分类:
软件技术

本书为“十四五”职业教育国家规划教材,也是国家职业教育软件技术专业教学资源库配套教材。

本书采用模块化的编写思路,将HTML5、CSS3、JavaScript三方面的学习内容分为网页设计与策划,网页的基本页面布局,运用HTML5的新标签,构建网站层叠样式表,设置文本、背景与列表样式,运用CSS进行网页布局,设计表单,运用CSS3实现特殊效果,运用JavaScript实现网页的交互,共9个教学任务。每个任务的编写分为任务描述、知识准备、综合案例、任务实施、任务拓展、项目实训6个环节。

本书配有微课视频、课程标准、授课计划、授课用PPT、案例素材等丰富的数字化学习资源。与本书配套的数字课程“网页设计与制作”已在“智慧职教”平台(www.icve.com.cn)上线,学习者可登录平台在线学习,授课教师可调用本课程构建符合自身教学特色的SPOC课程,详见“智慧职教”服务指南。授课教师如需获得本书配套教辅资源,请登录“高等教育出版社产品信息检索系统”(xuanshu,hep.com.cn)搜索下载。

本书结构合理,内容丰富,实用性强,可作为高等职业院校计算机类专业、商务类专业的教学用书,也可作为相关从业人员的自学用书。

  • 目录
    • 前辅文
      • 任务1 网页设计与策划
        • 任务描述:网站主页的策划与设计
          • 知识准备
            • 1.1 网页设计的概念与术语
              • 1.1.1 网页与网站的相关概念
                • 1.1.2 静态网页设计相关程序设计语言
                • 1.2 网页设计的流程
                  • 1.2.1 前期策划组织
                    • 1.2.2 网页制作
                      • 1.2.3 网页测试
                      • 1.3 HTML5概述
                        • 1.3.1 HTML5的发展历史
                          • 1.3.2 浏览器以及浏览器内核
                          • 1.4 编写第一个HTML5页面
                            • 1.4.1 HTML5文件的编写工具
                              • 1.4.2 HTML5文档的基本格式
                                • 1.4.3 使用HTML5编写简单的Web页面
                                • 1.5 综合实例:体验HTML与CSS页面布局
                                • 任务实施
                                  • 1.资料收集
                                    • 2.页面规划
                                      • 3.绘制页面草图
                                      • 任务拓展
                                        • 1.认识Visual Studio Code工具
                                          • 2.AI加油站:使用文心一言撰写网站策划书
                                          • 项目实训:智慧校园登录与学生应用门户策划
                                          • 任务2 网页的基本页面布局
                                            • 任务描述:运用HTML编写Web页面
                                              • 知识准备
                                                • 2.1 HTML5基础
                                                  • 2.1.1 HTML5基本语法
                                                    • 2.1.2 HTML5标签及属性
                                                      • 2.1.3 HTML5文档头部<head>标签
                                                      • 2.2 文字与段落标签
                                                        • 2.2.1 标题与段落标签
                                                          • 2.2.2 文本的格式化标签
                                                            • 2.2.3 特殊字符标签
                                                            • 2.3 图像与超链接标签
                                                              • 2.3.1 图像标签<img>
                                                                • 2.3.2 超链接标签<a>
                                                                • 2.4 表格与列表标签
                                                                  • 2.4.1 表格标签
                                                                    • 2.4.2 列表标签
                                                                    • 2.5 HTML的块级标签或内联标签
                                                                      • 2.6 综合实例:历代优秀墨竹作品学习页面顶部区域的HTML构建
                                                                      • 任务实施
                                                                        • 1.页面HTML5结构分析
                                                                          • 2.制作页面的HTML基本结构
                                                                            • 3.编写顶部栏HTML代码
                                                                              • 4.编写网站Logo与导航栏的HTML代码
                                                                                • 5.编写网站Banner栏的HTML代码
                                                                                  • 6.编写工具推荐栏的HTML代码
                                                                                  • 任务拓展
                                                                                    • 1.<mark>标签的使用
                                                                                      • 2.AI加油站:使用豆包“Trae”编程助手
                                                                                      • 项目实训:墨竹画源流析与作品赏析栏目结构实现
                                                                                      • 任务3 运用HTML5的新标签
                                                                                        • 任务描述:使用HTML5新标签优化网页
                                                                                          • 知识准备
                                                                                            • 3.1 HTML5结构性标签
                                                                                              • 3.1.1 认知结构性标签
                                                                                                • 3.1.2 <header>标签
                                                                                                  • 3.1.3 <section>标签
                                                                                                    • 3.1.4 <article>标签
                                                                                                      • 3.1.5 <nav>标签
                                                                                                        • 3.1.6 <aside>标签
                                                                                                          • 3.1.7 <footer>标签
                                                                                                          • 3.2 分组标签
                                                                                                            • 3.2.1 <figure>标签
                                                                                                              • 3.2.2 <hgroup>标签
                                                                                                              • 3.3 页面交互标签
                                                                                                                • 3.3.1 <details>标签和<summary>标签
                                                                                                                  • 3.3.2 <menu>标签与<command>标签
                                                                                                                  • 3.4 行内语义性标签
                                                                                                                    • 3.4.1 <progress>标签
                                                                                                                      • 3.4.2 <meter>标签
                                                                                                                        • 3.4.3 <time>标签
                                                                                                                        • 3.5 多媒体对象的使用
                                                                                                                          • 3.5.1 视频与音频格式
                                                                                                                            • 3.5.2 插入视频
                                                                                                                              • 3.5.3 插入音频
                                                                                                                              • 3.6 综合实例:《淇澳清风图》作品赏析页面的实现
                                                                                                                              • 任务实施
                                                                                                                                • 1.页面HTML5结构分析
                                                                                                                                  • 2.编写课程报名栏HTML代码
                                                                                                                                    • 3.编写课程通知栏HTML代码
                                                                                                                                      • 4.编写合作伙伴栏HTML代码
                                                                                                                                        • 5.编写页尾模块栏HTML代码
                                                                                                                                        • 任务拓展
                                                                                                                                          • 1.HTML5的全局属性
                                                                                                                                            • 2.AI加油站:使用“代码小浣熊”编程助手
                                                                                                                                            • 项目实训:网站页面的分析与编写
                                                                                                                                            • 任务4 构建网站层叠样式表
                                                                                                                                              • 任务描述:网站顶部栏与导航栏的页面实现
                                                                                                                                                • 知识准备
                                                                                                                                                  • 4.1 认识与使用 CSS
                                                                                                                                                    • 4.1.1 CSS3简介
                                                                                                                                                      • 4.1.2 CSS样式设置规则
                                                                                                                                                        • 4.1.3 CSS样式的调用
                                                                                                                                                          • 4.1.4 CSS基础选择器
                                                                                                                                                          • 4.2 CSS3新增选择器
                                                                                                                                                            • 4.2.1 属性选择器
                                                                                                                                                              • 4.2.2 关系选择器
                                                                                                                                                                • 4.2.3 结构伪类选择器
                                                                                                                                                                  • 4.2.4 链接伪类选择器
                                                                                                                                                                    • 4.2.5 伪元素选择器
                                                                                                                                                                      • 4.2.6 UI元素状态伪类选择器
                                                                                                                                                                      • 4.3 CSS的继承与层叠
                                                                                                                                                                        • 4.3.1 CSS的继承性
                                                                                                                                                                          • 4.3.2 CSS的层叠性
                                                                                                                                                                            • 4.3.3 CSS的冲突处理
                                                                                                                                                                            • 4.4 综合实例:博物院导航布局
                                                                                                                                                                            • 任务实施
                                                                                                                                                                              • 1.顶部栏的HTML结构与CSS分析
                                                                                                                                                                                • 2.顶部栏的HTML结构与CSS样式设计
                                                                                                                                                                                  • 3.导航栏的HTML结构与CSS分析
                                                                                                                                                                                    • 4.导航栏的HTML结构与CSS样式设计
                                                                                                                                                                                    • 任务拓展
                                                                                                                                                                                      • 1.实现导航菜单的悬停特效
                                                                                                                                                                                        • 2.增效工具:HTML表格生成器
                                                                                                                                                                                        • 项目实训:历代优秀墨竹作品学习页面“画源流析”的页面实现
                                                                                                                                                                                        • 任务5 设置文本、背景与列表样式
                                                                                                                                                                                          • 任务描述:人工智能学习网站主页主体部分的页面实现
                                                                                                                                                                                            • 知识准备
                                                                                                                                                                                              • 5.1 文本样式设置
                                                                                                                                                                                                • 5.1.1 设置CSS的字体属性
                                                                                                                                                                                                  • 5.1.2 文本属性
                                                                                                                                                                                                  • 5.2 背景属性设置
                                                                                                                                                                                                    • 5.2.1 基本的背景设置
                                                                                                                                                                                                      • 5.2.2 CSS3中新增的背景属性
                                                                                                                                                                                                        • 5.2.3 CSS3中新增的渐变属性
                                                                                                                                                                                                        • 5.3 列表样式设置
                                                                                                                                                                                                          • 5.3.1 列表符号样式设置
                                                                                                                                                                                                            • 5.3.2 图像符号样式设置
                                                                                                                                                                                                              • 5.3.3 列表缩进样式设置
                                                                                                                                                                                                                • 5.3.4 列表复合属性
                                                                                                                                                                                                                • 5.4 综合实例:中华传统文化百部经典效果展示
                                                                                                                                                                                                                • 任务实施
                                                                                                                                                                                                                  • 1.页面HTML结构分析
                                                                                                                                                                                                                    • 2.Banner栏的HTML结构与CSS样式设计
                                                                                                                                                                                                                      • 3.工具推荐栏的HTML结构与CSS样式设计
                                                                                                                                                                                                                        • 4.课程报名栏的HTML结构与CSS样式设计
                                                                                                                                                                                                                          • 5.开课通知栏的HTML结构与CSS样式设计
                                                                                                                                                                                                                          • 任务拓展
                                                                                                                                                                                                                            • 1.@font-face属性
                                                                                                                                                                                                                              • 2.增效工具:CSS压缩与解压工具
                                                                                                                                                                                                                              • 项目实训:使用CSS完成导航菜单的制作
                                                                                                                                                                                                                              • 任务6 运用CSS进行网页布局
                                                                                                                                                                                                                                • 任务描述:AI教育企业主页培训课程的页面实现
                                                                                                                                                                                                                                  • 知识准备
                                                                                                                                                                                                                                    • 6.1 盒子模型
                                                                                                                                                                                                                                      • 6.1.1 初识盒子模型
                                                                                                                                                                                                                                        • 6.1.2 盒子模型的层次与宽、高
                                                                                                                                                                                                                                        • 6.2 盒子模型的常用属性
                                                                                                                                                                                                                                          • 6.2.1 边框属性
                                                                                                                                                                                                                                            • 6.2.2 边距属性
                                                                                                                                                                                                                                              • 6.2.3 CSS3新增属性
                                                                                                                                                                                                                                              • 6.3 元素的浮动与定位
                                                                                                                                                                                                                                                • 6.3.1 元素的类型与转换
                                                                                                                                                                                                                                                  • 6.3.2 浮动属性(floal)
                                                                                                                                                                                                                                                    • 6.3.3 清除浮动属性(clear)
                                                                                                                                                                                                                                                      • 6.3.4 元素的定位属性(position)
                                                                                                                                                                                                                                                        • 6.3.5 溢出属性(overflow)
                                                                                                                                                                                                                                                        • 6.4 弹性布局
                                                                                                                                                                                                                                                          • 6.4.1 认识弹性布局
                                                                                                                                                                                                                                                            • 6.4.2 容器属性
                                                                                                                                                                                                                                                              • 6.4.3 项目属性
                                                                                                                                                                                                                                                                • 6.4.4 案例:Flex布局网站导航与Banner
                                                                                                                                                                                                                                                                • 6.5 网格布局
                                                                                                                                                                                                                                                                  • 6.5.1 认识网格布局
                                                                                                                                                                                                                                                                    • 6.5.2 网格布局的使用方法
                                                                                                                                                                                                                                                                      • 6.5.3 案例:网格布局网站导航与Banner
                                                                                                                                                                                                                                                                      • 6.6 综合实例:作品赏析模块的页面整体布局
                                                                                                                                                                                                                                                                      • 任务实施
                                                                                                                                                                                                                                                                        • 1.页面HTML结构分析
                                                                                                                                                                                                                                                                          • 2.标题的HTML结构与CSS样式设计
                                                                                                                                                                                                                                                                            • 3.导航标签部分的HTML结构与CSS样式设计
                                                                                                                                                                                                                                                                              • 4.培训卡片的HTML结构与CSS样式设计
                                                                                                                                                                                                                                                                              • 任务拓展
                                                                                                                                                                                                                                                                                • 1.CSS书写顺序与规范
                                                                                                                                                                                                                                                                                  • 2.使用columns多列布局
                                                                                                                                                                                                                                                                                    • 3.增效工具:CSS Layout Generator
                                                                                                                                                                                                                                                                                    • 项目实训:使用HTML+CSS布局画源流析模块页面
                                                                                                                                                                                                                                                                                    • 任务7 设计表单
                                                                                                                                                                                                                                                                                      • 任务描述:AI教育企业新用户注册页面
                                                                                                                                                                                                                                                                                        • 知识准备
                                                                                                                                                                                                                                                                                          • 7.1 表单的基本概念
                                                                                                                                                                                                                                                                                            • 7.1.1 表单简介
                                                                                                                                                                                                                                                                                              • 7.1.2 表单的组成
                                                                                                                                                                                                                                                                                                • 7.1.3 案例:表单基本元素的应用
                                                                                                                                                                                                                                                                                                • 7.2 HTML5中表单新增的元素与属性
                                                                                                                                                                                                                                                                                                  • 7.2.1 新增的input输入类型
                                                                                                                                                                                                                                                                                                    • 7.2.2 新增的form属性
                                                                                                                                                                                                                                                                                                      • 7.2.3 新增的inpult属性
                                                                                                                                                                                                                                                                                                        • 7.2.4 新增的表单元素
                                                                                                                                                                                                                                                                                                        • 7.3 综合实例:登录页面的设计与实现
                                                                                                                                                                                                                                                                                                        • 任务实施
                                                                                                                                                                                                                                                                                                          • 1.页面HTML结构分析
                                                                                                                                                                                                                                                                                                            • 2.注册页面的HTML结构代码
                                                                                                                                                                                                                                                                                                              • 3.注册页面表单设计的CSS样式
                                                                                                                                                                                                                                                                                                              • 任务拓展
                                                                                                                                                                                                                                                                                                                • 1.表单边框的应用
                                                                                                                                                                                                                                                                                                                  • 2.AI加油站:使用"Fitten Code"编程助手
                                                                                                                                                                                                                                                                                                                  • 项目实训:表单模仿设计
                                                                                                                                                                                                                                                                                                                  • 任务8 运用CSS3实现特殊效果
                                                                                                                                                                                                                                                                                                                    • 任务描述:交通示意图动画效果制作
                                                                                                                                                                                                                                                                                                                      • 知识准备
                                                                                                                                                                                                                                                                                                                        • 8.1 transform转换
                                                                                                                                                                                                                                                                                                                          • 8.1.1 transform简介
                                                                                                                                                                                                                                                                                                                            • 8.1.2 常用的transform变形方法
                                                                                                                                                                                                                                                                                                                              • 8.1.3 运用3D变形
                                                                                                                                                                                                                                                                                                                              • 8.2 transitions过渡
                                                                                                                                                                                                                                                                                                                                • 8.2.1 transitions功能介绍
                                                                                                                                                                                                                                                                                                                                  • 8.2.2 过渡属性的应用
                                                                                                                                                                                                                                                                                                                                  • 8.3 animation动画
                                                                                                                                                                                                                                                                                                                                    • 8.3.1 动画的基本定义与调用
                                                                                                                                                                                                                                                                                                                                      • 8.3.2 animation的其他属性
                                                                                                                                                                                                                                                                                                                                      • 8.4 综合实例:历代优秀墨竹作品展示墙
                                                                                                                                                                                                                                                                                                                                      • 任务实施
                                                                                                                                                                                                                                                                                                                                        • 1.任务分析
                                                                                                                                                                                                                                                                                                                                          • 2.设计HTML结构代码
                                                                                                                                                                                                                                                                                                                                            • 3.使用CSS实现动画效果
                                                                                                                                                                                                                                                                                                                                            • 任务拓展
                                                                                                                                                                                                                                                                                                                                              • 1.增效工具:CSS3 Animale动画库
                                                                                                                                                                                                                                                                                                                                                • 2.增效工具:过渡动画生成器
                                                                                                                                                                                                                                                                                                                                                • 项目实训:墨竹名家作品展示
                                                                                                                                                                                                                                                                                                                                                • 任务9 运用JavaScript实现网页的交互
                                                                                                                                                                                                                                                                                                                                                  • 任务描述:AI教育企业主页下拉菜单的设计与实现
                                                                                                                                                                                                                                                                                                                                                    • 知识准备
                                                                                                                                                                                                                                                                                                                                                      • 9.1 JavaScript概述
                                                                                                                                                                                                                                                                                                                                                        • 9.1.1 JavaScript简介
                                                                                                                                                                                                                                                                                                                                                          • 9.1.2 JavaScript的使用方法
                                                                                                                                                                                                                                                                                                                                                          • 9.2 JavaScript数据类型、变量、数组、运算符和表达式
                                                                                                                                                                                                                                                                                                                                                            • 9.2.1 数据类型
                                                                                                                                                                                                                                                                                                                                                              • 9.2.2 变量的命名与定义
                                                                                                                                                                                                                                                                                                                                                                • 9.2.3 变量的作用域
                                                                                                                                                                                                                                                                                                                                                                  • 9.2.4 数组
                                                                                                                                                                                                                                                                                                                                                                    • 9.2.5 运算符与表达式
                                                                                                                                                                                                                                                                                                                                                                    • 9.3 程序控制结构
                                                                                                                                                                                                                                                                                                                                                                      • 9.3.1 分支结构
                                                                                                                                                                                                                                                                                                                                                                        • 9.3.2 循环结构
                                                                                                                                                                                                                                                                                                                                                                        • 9.4 函数的定义与引用
                                                                                                                                                                                                                                                                                                                                                                          • 9.4.1 函数的定义
                                                                                                                                                                                                                                                                                                                                                                            • 9.4.2 函数的调用
                                                                                                                                                                                                                                                                                                                                                                              • 9.4.3 用户类的定义
                                                                                                                                                                                                                                                                                                                                                                              • 9.5 浏览器窗口对象
                                                                                                                                                                                                                                                                                                                                                                                • 9.5.1 浏览器对象模型
                                                                                                                                                                                                                                                                                                                                                                                  • 9.5.2 window对象
                                                                                                                                                                                                                                                                                                                                                                                    • 9.5.3 window的其他对象
                                                                                                                                                                                                                                                                                                                                                                                    • 9.6 页面中元素的访问与属性的设置
                                                                                                                                                                                                                                                                                                                                                                                      • 9.6.1 页面元素的引用
                                                                                                                                                                                                                                                                                                                                                                                        • 9.6.2 读写HTML对象的属性
                                                                                                                                                                                                                                                                                                                                                                                          • 9.6.3 表单及其控件的访问
                                                                                                                                                                                                                                                                                                                                                                                            • 9.6.4 JS设置CSS样式的方式
                                                                                                                                                                                                                                                                                                                                                                                            • 9.7 事件的指派与处理函数的编写
                                                                                                                                                                                                                                                                                                                                                                                              • 9.7.1 事件的指派
                                                                                                                                                                                                                                                                                                                                                                                                • 9.7.2 常用事件的类型
                                                                                                                                                                                                                                                                                                                                                                                                • 9.8 文档对象模型
                                                                                                                                                                                                                                                                                                                                                                                                  • 9.8.1 初识文档对象模型
                                                                                                                                                                                                                                                                                                                                                                                                    • 9.8.2 DOM对象节点类型
                                                                                                                                                                                                                                                                                                                                                                                                      • 9.8.3 DOM对象节点的基本操作
                                                                                                                                                                                                                                                                                                                                                                                                        • 9.8.4 DOM对象节点的创建与修改
                                                                                                                                                                                                                                                                                                                                                                                                        • 9.9 DOM节点对象的事件处理
                                                                                                                                                                                                                                                                                                                                                                                                          • 9.10 综合实例:奥运会中国队金牌榜表格的美化设计
                                                                                                                                                                                                                                                                                                                                                                                                          • 任务实施
                                                                                                                                                                                                                                                                                                                                                                                                            • 1.任务分析与实施思路
                                                                                                                                                                                                                                                                                                                                                                                                              • 2.下拉菜单的HTML结构
                                                                                                                                                                                                                                                                                                                                                                                                                • 3.样式设计
                                                                                                                                                                                                                                                                                                                                                                                                                  • 4.编写JavaScript脚本
                                                                                                                                                                                                                                                                                                                                                                                                                    • 5.项目应用
                                                                                                                                                                                                                                                                                                                                                                                                                    • 任务拓展
                                                                                                                                                                                                                                                                                                                                                                                                                      • 1.JSON自定义对象
                                                                                                                                                                                                                                                                                                                                                                                                                        • 2.增效工具:JSON在线解析编辑器
                                                                                                                                                                                                                                                                                                                                                                                                                          • 3.增效工具:HTML转JavaScript在线工具
                                                                                                                                                                                                                                                                                                                                                                                                                          • 项目实训:在线测试系统
                                                                                                                                                                                                                                                                                                                                                                                                                          • 参考文献

                                                                                                                                                                                                                                                                                                                                                                                                                          相关图书