中慧科技Web开发系列教材-《HTML5与CSS3程序设计》介绍

Posted 2021-03-28 中慧云启科技集团

为什么选择HTML5与CSS3这门技术？

html5与CSS3是Web技术的基础课程，也是软件技术专业必修课程。在目前网页制作中,HTML5与CSS3技术以其独有的优点,得到了重要应用。HTML5 和 CSS3 是下一代 Web 开发标准，无论是针对内容结构还是媒体，HTML5 都引进了各种新元素。今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3，学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web设计和开发人员的当务之急。

★★★★★

人民邮电出版社出版

《HTML5与C33程序设计》            

【 主 编 】   李洪建  刘斌

【副 主 编】 李真  奚炎  刘辉    

【出版时间】2021年 5月       

01

内容摘要

教材以培养读者能够完成符合互联网行业需求的效果炫酷的Web前端页面为学习目标，注重实际开发技术的应用。全书共10章，前半部分为HTML相关知识的讲解，包括Web基础知识HTML快速入门、网页中的文本、使用列表、超链接和图像、表格、表单。后半部分为CSS的相关知识讲解，包括CSS基础、文本格式化、CSS背景、尺寸与框模型、列表样式、表格样式、定位与显示。每章都由本章重点、基础知识、案例演示、本章小结等模块组成，并辅以实例演示，提供案例源代码。

该教材配套有微课视频、授课用PPT、课程标准、章节设计、素材图片和案例源代码等数字化教学资源。可作为应用型本科院校和高等职业院校互联网应用技术专业的课程教材，也可作为互联网开发者的学习和参考用书。

02

教材目录

第1章                                         向下滑动阅览

认识前端

1.1特色网站观摩学习

1.1.1 PC端网站+移动端界面展示

1.1.2前端技术简介

1.1.3学习路线

1.2开发工具

1.2.1 Vscode介绍

1.2.3 Webstorm介绍

1.2.2 HbuilderX介绍

第2章 

HTML的基本标签

2.1求职准备之初体验——个人简历基本信息

2.1.1任务描述

2.1.2任务知识点

  HTML的主体标签

  HTML结构

  head标签（meta以及一些属性）

  body标签

  HTML注释

  文本

  标题标签（属性）

  段落标签（属性）

  文本标签（属性）

  文字修饰标签

2.1.3 任务实现

2.1.4 求职准备之初体验——个人简历网页设计制作

2.1.5 习题

2.2  大学生精神风貌展示——个人相册制作

2.2.1 任务描述

2.2.2 任务知识点

  超链接简介

  内部链接（锚点连接）

  外部链接（href）

  图片标签的简介

  图片的分类

  图片标签的属性

  相对路径

  绝对路径

2.2.3任务实现

2.2.4任务拓展（效果图）   

2.2.5习题                

2.3“不忘初心，不忘家乡”——地域列表制作

2.3.1任务描述

2.3.2任务知识点

  列表简介

  有序列表

  无序列表

  自定义列表

2.3.3任务实现

2.3.4任务拓展（效果图）   先定个小目标——记下你想实现的10个目标

2.3.5习题         

2.4 课程规划的好帮手——课表表格制作

2.4.1任务描述

2.4.2任务知识点

  表格简介

  表格结构

  基本属性

2.4.3任务完成

2.4.4任务拓展（新闻后台管理效果图）

2.4.5习题                  

2.5 完善一体化数据很重要——学信网登录注册页面制作

2.5.1任务描述

2.5.2任务知识点

  表单简介

  form标签

  input标签

  单行文本框

  密码文本框

  单选框

  复选框

  按钮

  文件上传

  多行文本框

2.5.3任务完成

2.5.4任务拓展（效果图）

2.5.5习题

2.6 丰富页面，多媒体对象巧运用——某某网页设计制作案例

2.6.1任务描述

2.6.2任务知识点

  Video标签

  Audio标签

2.6.3任务完成

2.6.4任务拓展（效果图）    乘风破浪的有为青年——全国征兵网案例设计

2.6.5习题

2.7   “玉不琢不成器”——个人主页优化制作

2.7.1任务描述

2.7.2任务知识点

  HTML语义化标签

  Section标签

  Article标签

  Header标签

  Footer标签

  Nav标签

  其他新增标签

2.7.3任务完成

2.7.5习题

章节实训

第3章CSS3基础应用

3.1  一对一，一对多，多对一的控制高手——选择器  

3.1.1任务描述

3.1.2任务知识点     

  CSS3简介

  初步了解CSS

  CSS注释

  CSS引用方式

  行内样式

  内部样式

  外部样式

  CSS3选择器

  Id属性

  Class属性

  标签名称选择器

  Id选择器

  Class选择器

  元素选择器

  后代选择器

  伪类选择器

  组合选择器

  CSS3的三大特性

  层叠性

  继承性

  优先级

3.1.3任务完成

3.1.4任务拓展

3.1.5习题

章节实训

第4章CSS3样式

4.1提升艺术审美水平——某某网页设计制作案例

4.1.1 任务描述

4.1.2 任务知识点

  字体样式简介

  字体类型

  字体大小

  单位

  字体粗细

  字体颜色

  文字特效

4.1.3任务完成

4.1.4任务拓展

4.1.5习题

4.2  感受中华文化艺术——抒情散文网页制作

4.2.1任务描述

4.2.2任务知识点

  文本样式简介

  首行缩进

  水平对齐

  文本修饰

  大小写

  行高

  行间距与字间距

4.2.3任务完成

4.2.4任务拓展（换一种格式的诗歌散文）

4.2.5习题

4.3打造凝心聚力好团队——“同心圆”班徽设计制作

4.3.1任务描述

4.3.2任务知识点

  边框样式

  边框大小

  边框颜色

4.3.3任务完成

4.3.4任务拓展（梯形和三角形）

4.3.5习题

4.4方便用户浏览的页面帮助——侧边导航栏设计制作   

4.4.1任务描述

4.4.2任务知识点

  列表项符号

  列表项图片

  列表取消样式

4.4.3任务完成

4.4.4任务拓展

4.4.5习题

4.5 处处细留心——学生信息表设计

4.5.1任务描述

4.5.2任务知识点

  表格样式

  表格标题

  边框合并

  边框间距

  其他css属性

4.53任务完成

4.5.4任务拓展

4.5.5习题

4.6陪你作生活的设计师——花瓣网网页设计制作

4.6.1任务描述

4.6.2任务知识点

  背景样式简介

  背景颜色

  背景图片样式

  背景图片重复

  背景图片位置

  背景图片固定

  背景复合写法

4.6.3任务完成

4.6.4任务拓展

4.6.5习题

4.7  前端使命之人机友好——京东顶部导航栏设计制作

4.7.1任务描述

4.7.2任务知识点

  超链接取消默认样式

  超链接伪类

4.7.3任务完成

4.7.4任务拓展（梯形和三角形）

4.7.5习题

  章节实训

第5章盒子模型

5.1 来自父亲节的礼物——电子礼盒设计制作      

5.1.1任务描述

5.1.2任务知识点

  宽度

  高度

  内间距

  外边距

  边框

5.1.3任务完成

5.1.4任务拓展

5.1.5习题

第6章 CSS的浮动和定位

7.1 探寻“宇宙魔方”的奥秘——九宫格设计制作

7.1.1任务描述

7.1.2任务知识点

  块内元素和行内元素，行内块级

  文档流简介

  浮动的原理

  浮动的作用

 清除浮动（多种方式）

7.1.3任务完成

7.1.4任务拓展

7.1.5习题

7.2 购物车                           

7.2.1任务描述

7.2.2任务知识点

相对定位

绝对定位

固定定位

7.2.3任务完成

7.2.4任务拓展

7.2.5习题

第8章移动端商品列表

8.1属于自己的消费主张——购物车商品列表

8.1.1任务描述

8.1.2任务知识点

  Px

  Em

  Rem

  其他单位

  单位换算

  弹性布局

  多列布局

  网格布局

8.1.3任务完成

8.1.4任务拓展

8.1.5习题

第9章CSS3动画

9.1   回忆校园时光，憧憬美好未来——毕业合照3D轮播图制作

9.1.1任务描述

9.1.2任务知识点

  过渡

  2d与3d变化

  浏览器兼容性代码

  语法规则

  Animation

9.1.3任务完成

9.1.4任务拓展

9.1.5习题

第十章CSS3的新增属性（常用）

css3新增属性之background-size：指定背景图片尺寸

css3新增属性之background-origin：指定背景图片从哪里开始显示

css3新增属性之background-clip：指定背景图片从什么位置开始裁剪

css3新增属性之word-wrap：自动换行        

transition过渡效果

03

教材特色

01

内容全面，技术新颖

教材内容系统而全面，详尽地讲解了HTML 5和CSS 3的所有功能和特性；技术新颖，所有知识点都紧跟HTML5与CSS3的最新发展动态，满足全面的理论需求。

02

案例驱动

本教材以大量的案例驱动，通过语言参考书全面、系统、详细地学习语法、语义以及各种细节，并学会区分好的和不好的做法，做到真正掌握并熟练应用，不仅通过案例提高学习兴趣，而且降低学习难度，设计并创建出用户需要的页面。

03

配备完备的教辅资源

本教材配套精品教学资源辅教辅学。教学资源包括：课程标准、教学大纲、教学日历、教学课件、课程案例、课堂作业、教学视频、电子教案、题库。实训资源包括：课程级实训项目、综合实训项目。丰富的课程资源，降低了学习的难度，方便学生自主学习，减轻了教师负担。

04

校企合作“双元”模式开发优质教材

本教材由成都中慧科技有限公司组织，IT技术专家参与教材建设，将最前沿的技术引入到教材中，保证内容新颖实用。主编具有丰富的前端开发课程授课以及项目开发经验，依据先进的教育理念，结合全国职业院校实际教学情况以及学生专业水平，与IT技术专家共同探讨培养目标、内容、框架，基于不同的教学情境，开发出新一代信息技术优质教材。

04

适合范围

▶适合作为中、高职和应用型本科软件技术专业Web前端开发课程的教学

▶适合作为计算机培训教材

▶适合具有零基础Web前端开发人员

中慧科技Web开发系列教材规划

序号	教材	合作院校	出版日期
1	《Vue应用程序开发》	广东科学技术职业学院	2021.2
2	《php程序设计》	泸州职业技术学院	2021.3
3	《HTML5与CSS3程序设计》	山东科技职业学院	2021.5
4	《javascript程序设计》	广东科学技术职业学院	2021.5
5	《mysql数据库》	常州信息职业技术学院	2021.5
6	《Node.Js应用开发》	常州信息职业技术学院	2021.5
7	《Java Web应用开发》	九江职业技术学院	2021.5
8	《UI设计基础》	南京信息职业技术学院	2021.5
9	《微信小程序开发》	常州信息职业技术学院	2021.5
10	《Java EE企业级应用开发（SSM）》	常州信息职业技术学院	2021.2
11	《Java程序设计基础》	陕西工业职业技术学院	2021.3
12	《Java高级程序设计》	长沙商贸旅游职业技术学院	2021.3
13	《Java EE企业级应用开发（Springboot）》	山东科技职业学院	2021.5

公司介绍

  成都中慧科技有限公司是中慧云启科技集团下属控股子公司，是一家集软件产品研发、IT系统集成、销售、技术培训和技术服务于一体的国家高新技术企业，获得授权国家专利五项、软件著作权数十项。凭借IT行业技术优势以及教育行业人才培养优势，自主研发“课-赛-证融通”特色教育产品，培养适合企业需求的高技能创新型人才。

作为各省Web前端开发技能竞赛的技术支持企业，连续五年为其输送优质人才，深入了解师生基本情况和企业的岗位需求，关注市场技术主流方向，因而在人才培养设计、教学标准制定、目标岗位、1+X职业技能证书、“课-赛-证融通”、校企合作、师资培育方面拥有不可多得的经验。