Web编程基础（HTML+CSS）项目实战教程

图书标准信息

• 作者 高丽霞
• 出版社 电子工业出版社
• 出版时间 2022-07
• 版次 1
• ISBN 9787121438288
• 定价 58.00元
• 装帧 其他
• 开本 16开
• 页数 296页
• 字数 473.6千字

【内容简介】

本书根据技术应用型人才的培养目标，以一个企业生产性项目“新闻网”的设计制作贯穿始终，将课程内容整合、序化为8个教学模块、26个开发任务、63个案例、28个实训操作任务、3个企业典型综合项目，采用由易到难、螺旋递进的方式详细讲解了Web前端开发技术，并介绍了HTML和CSS的基础知识和使用技巧。本书内容主要包括Web前端开发的相关概念、网站的设计与策划、开发工具的使用、文本图像的创建、CSS样式对页面的美化、列表的典型应用、各种超链接的创建、表格和表单的应用，以及DIV+CSS页面布局等实用技术，覆盖了“1+X证书”Web前端开发职业技能中HTML+CSS的基本知识点，同时根据教学模块主题，融入了思政教育内容，将立德树人、课程思政等元素穿插到教学内容中，润物细无声，使学习者掌握专业技能的同时，完成全方位育人的重任。本书是一本从零开始学习Web前端开发技术的教材，无须读者具有任何编程基础。本书既可作为高等院校本、专科计算机及相关专业的网页设计与制作课程的教材，又可作为Web前端开发学习班的培训教材或网页制作爱好者的参考书。

【作者简介】

高丽霞，双师型教师，Oracle企业级认证讲师，自2002年从事教学工作以来，先后讲授过《Web编程基础》、《HTML5应用开发》、《Web前端开发（JavaScript与jQuery）》、《C语言程序设计》、《C#程序设计》、《Java程序设计》和《Authorware多媒体制作》等多门课程。参编4本教材，其中《Authorware多媒体技术应用实例教程（第2版）》十二五规划教材，被评选为\"高等职业院校教学改革创新示范教材”；《C#程序设计任务式教程》十三五规划教材，被评为中国通信工业协会\"全国计算机类优秀教材”。撰写多篇论文，其中两篇为国家核心期刊论文。参与国家级、省级资源库建设4项，课题、重点课题建设5项，参与品牌专业群建设1项。连续6年讲授《Web编程基础》课程，授课年级8个，累计授课班级32个，本课程授课人数约1580人，在《Web编程基础》课程上积累了丰富的实践、教科研经验，通过项目化教学、任务驱动、信息化教学等多种教学方式调度课堂、融合创新，深受学生喜爱。2020年作为课程负责人，主持《Web编程基础》校级精品资源库建设。

【目录】

模块1  网站的设计与策划1

1.1  任务1：认识网页与网站1

1.1.1  网页与网站的相关概念2

1.1.2  服务器与客户端3

1.2  任务2：认识网页开发技术4

1.2.1  Web前端的概念4

1.2.2  Web前端开发技术5

1.3  任务3：设计策划网站9

1.3.1  网站设计原则9

1.3.2  网站制作流程11

1.4  任务4：选择网页开发工具12

1.4.1  编写工具12

1.4.2  浏览工具16

1.5  知识进阶16

1.6  小结18

1.7  实训任务19

实训任务1：创建班级网站页面 19

实训任务2：制作班级学习交流页面20

实训任务3：制作班级公告栏21

模块2  制作图文并茂的新闻页面24

2.1  任务1：创建网页结构25

2.1.1  HTML文档结构25

2.1.2  HTML基本语法26

2.1.3  ＜head＞标记27

2.1.4  任务实施28

2.2  任务2：添加网页文本内容29

2.2.1  标题与段落标记30

2.2.2  水平线标记32

2.2.3  换行标记33

2.2.4  特殊字符33

2.2.5  ＜div＞与＜span＞标记34

2.2.6  任务实施35

2.3  任务3：设置图文并茂的网页 35

2.3.1  插入图像36

2.3.2  网页中支持的图像文件格式37

2.3.3  任务实施38

2.4  知识进阶38

2.5  小结42

2.6  实训任务42

实训任务1：制作图文并茂的班级学习交流页面42

实训任务2：制作图文并茂的班级公告栏页面44

模块3  美化修饰网站的新闻页面47

3.1  任务1：修饰文字排版48

3.1.1  CSS概述48

3.1.2  引入CSS的方法49

3.1.3  CSS选择器 50

3.1.4  CSS特性66

3.1.5  文字修饰 68

3.1.6  文本修饰69

3.1.7  任务实施71

3.2  任务2：控制元素属性74

3.2.1  盒子模型74

3.2.2  边框属性74

3.2.3  边距属性76

3.2.4  浮动81

3.2.5  定位92

3.2.6  任务实施100

3.3  任务3：设置页面背景102

3.3.1  背景的设置102

3.3.2  背景的运用技术104

3.3.3  任务实施107

3.4  知识进阶108

3.5  小结113

3.6  实训任务114

实训任务1：使用CSS渲染班级学习交流页面114

实训任务2：使用CSS渲染班级公告栏页面116

实训任务3：制作班级网站中的青春名片117

实训任务4：制作图文环绕效果119

实训任务5：制作班级图片新闻版块121

模块4  制作网站的最新动态页面124

4.1  任务1：制作最新动态列表条目125

4.1.1  有序列表125

4.1.2  无序列表127

4.1.3  嵌套列表128

4.1.4  定义列表129

4.1.5  CSS列表修饰130

4.1.6  任务实施131

4.2  任务2：创建最新动态条目链接134

4.2.1  创建超链接135

4.2.2  链接对象135

4.2.3  CSS超链接修饰136

4.2.4  任务实施139

4.3  知识进阶141

4.4  小结143

4.5  实训任务144

实训任务1：制作班级新闻栏目144

实训任务2：制作班级网站的软件大赛通知145

实训任务3：制作班级学习园地147

实训任务4：制作班级网站的导航条150

实训任务5：制作班级网站的新闻栏目152

模块5  制作网站的多媒体相册页面159

5.1  任务1：创建多媒体相册160

5.1.1  表格组成160

5.1.2  表格属性161

5.1.3  任务实施163

5.2  任务2：调整相册行列结构164

5.2.1  单元格属性164

5.2.2  单元格合并165

5.2.3  任务实施167

5.3  任务3：设置相册布局168

5.3.1  表格嵌套168

5.3.2  表格布局170

5.3.3  任务实施173

5.4  任务4：设置多媒体效果175

5.4.1  音频175

5.4.2  视频176

5.4.3  任务实施178

5.5  知识进阶178

5.6  小结181

5.7  实训任务181

实训任务1：制作班级网站的班级课程表181

实训任务2：制作班级网站的学生信息登记表184

实训任务3：制作班级网站的新闻栏目185

实训任务4：制作班级网站的首页布局187

模块6  制作网站的会员注册页面191

6.1  任务1：制作基本信息区192

6.1.1  表单基础192

6.1.2  辅助标记194

6.1.3  单行文本输入框194

6.1.4  密码输入框194

6.1.5  表单按钮197

6.1.6  单选按钮199

6.1.7  复选框199

6.1.8  文件上传域201

6.1.9  任务实施202

6.2  任务2：制作信息收集区205

6.2.1  多行文本域205

6.2.2  下拉列表框206

6.2.3  任务实施208

6.3  任务3：制作法律条款区209

6.3.1  浮动框架标记209

6.3.2  任务实施210

6.4  知识进阶211

6.5  小结219

6.6  实训任务220

实训任务1：制作班级网站的调查问卷220

实训任务2：制作班级网站的邮箱注册页面224

实训任务3：制作电子邮箱的发送邮件页面226

实训任务4：制作班级网站的用户注册页面229

模块7  网站首页的设计制作233

7.1  任务1：首页整体布局分析设计234

7.1.1  整体布局分析234

7.1.2  样式重置234

7.1.3  全局CSS的定义235

7.2  任务2：头部的实现236

7.2.1  头部的布局分析和实现236

7.2.2  Logo的实现237

7.2.3  顶部导航的实现237

7.2.4  登录注册的实现238

7.3  任务3：中间主体内容的实现239

7.3.1  主体内容的布局分析和实现239

7.3.2  上部内容区的实现240

7.3.3  左侧主要内容区的实现240

7.3.4  右侧主要内容区的实现242

7.4  任务4：底部页脚版权的实现243

7.5  知识进阶244

7.6  小结247

7.7  实训任务248

实训任务1：DIV+CSS布局班级网站首页 248

实训任务2：使用DIV+CSS布局左中右页面结构252

实训任务3：使用HTML5中新增语义化标记进行页面布局254

模块8  企业级项目综合应用258

8.1  任务1：制作企业产品展示页面258

8.1.1  任务描述258

8.1.2  定义页面结构259

8.1.3  添加页面样式259

8.2  任务2：制作新闻详情页面261

8.2.1  任务描述261

8.2.2  整体布局分析的实现262

8.2.3  头部的实现263

8.2.4  内容部分的实现265

8.2.5  版权信息部分的实现270

8.3  任务3：制作用户登录页面271

8.3.1  任务描述271

8.3.2  定义页面结构271

8.3.3  登录表单部分的实现272

8.3.4  其他部分的实现274

8.4  知识进阶275

8.5  小结279

8.6  实训任务279

实训任务1：CSS精灵技术制作导航条279

实训任务2：CSS制作图文版块中的三角形282

参考文献286