网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版）

本书共六大模块、26 个案例，以案例驱动组织学习内容，按照“应用为主，理论够用”的原则编写。前24 个案例为小案例，每个案例通过制作网页、网站或实现某种功能，介绍 HTML5、CSS3 和 JavaScript 基础知识。最后两个案例是综合案例，按照真实网站开发流程，学习小米商城网站和美丽山东网站的设计与制作。小米商城网站案例模仿真实的小米商城网站开发，将真实的小米商城网站适当简化处理，便于初学者学习。美丽山东网站案例充分运用 CSS3 的过渡、变形和动画等属性实现图片的移动、遮罩和翻转等动画效果，代码简洁、高效，页面表现力强。

李志云，工学硕士学位，副教授，研究方向为Web应用技术、数据库技术和高职教育研究；主持的“标准对接、项目引领、价值融入：《Web前端开发》教学内容和模式改革实践”获省级教学成果二等奖；山东省职业教育课程思政示范课程《Web前端开发》主持人；主编教材四部，其中两部获批“十四五”“十三五”职业教育国家规划教材，发表论文二十余篇。

目录CONTENTS 模块一　使用HTML5搭建网页 案例1　第一个HTML5网页　2 1.1　案例描述　2 1.2　案例实现　2 1.3　相关知识点　4 1.3.1　网页相关概念　4 1.3.2　常用的网页编辑软件　6 1.3.3　常用的浏览器　7 案例小结　7 习题与实训　7 扩展阅读　8 案例2　公司介绍网页　8 2.1　案例描述　9 2.2　案例实现　9 2.3　相关知识点　10 2.3.1　HTML5文档的基本结构　10 2.3.2　HTML标记及其属性　11 2.3.3　HTML文本标记　12 案例小结　15 习题与实训　15 案例3　新闻列表网页　17 3.1　案例描述　17 3.2　案例实现　17 3.3　相关知识点　18 3.3.1　无序列表　18 3.3.2　有序列表　19 3.3.3　列表嵌套　20 3.3.4　自定义列表　21 案例小结　23 习题与实训　23 案例4　简单公司网站　23 4.1　案例描述　24 4.2　案例实现　25 4.2.1　新建项目　25 4.2.2　创建网站首页　25 4.2.3　创建公司简介页面　26 4.2.4　创建所获荣誉页面　27 4.2.5　创建管理团队页面　27 4.3　相关知识点　29 4.3.1　HTML超链接标记　29 4.3.2　HTML图像标记　30 4.3.3　绝对路径和相对路径　33 案例小结　34 习题与实训　34 扩展阅读　35 模块二　使用CSS3美化网页 案例5　新闻详情网页　37 5.1　案例描述　37 5.2　案例实现　37 5.3　相关知识点　39 5.3.1　引入CSS样式　39 5.3.2　CSS常用文本属性　43 案例小结　47 习题与实训　47 案例6　百度搜索结果网页　49 6.1　案例描述　49 6.2　案例实现　49 6.3　相关知识点　51 6.3.1　CSS常用选择器　51 6.3.2　CSS的高级特性　55 案例小结　57 习题与实训　57 案例7　手机展示网页　58 7.1　案例描述　58 7.2　案例实现　59 7.3　相关知识点　60 7.3.1　盒子模型的概念　60 7.3.2　盒子模型的相关属性　62 案例小结　68 习题与实训　68 案例8　山东介绍网页　69 8.1　案例描述　69 8.2　案例实现　70 8.3　相关知识点　72 8.3.1　设置背景颜色及背景图像　72 8.3.2　设置不透明度　77 8.3.3　设置渐变效果　79 案例小结　80 习题与实训　80 扩展阅读　81 案例9　美丽风光网页　81 9.1　案例描述　81 9.2　案例实现　82 9.3　相关知识点　83 9.3.1　元素的类型　83 9.3.2　块元素间的外边距　84 9.3.3　元素的浮动　87 案例小结　91 习题与实训　91 案例10　笔记本电脑展示网页　91 10.1　案例描述　91 10.2　案例实现　92 10.3　相关知识点　95 10.3.1　元素的定位　95 10.3.2　定位类型　95 10.3.3　z-index属性　99 案例小结　99 习题与实训　99 案例11　公司新闻块　100 11.1　案例描述　101 11.2　案例实现　101 11.3　相关知识点　104 11.3.1　列表样式设置　104 11.3.2　超链接样式设置　105 案例小结　106 习题与实训　106 案例12　导航条　107 12.1　案例描述　107 12.2　案例实现　108 12.3　相关知识点　110 元素类型的转换　110 案例小结　112 习题与实训　112 模块三　创建表格和表单 案例13　手机型号表　114 13.1　案例描述　114 13.2　案例实现　114 13.3　相关知识点　117 13.3.1　表格标记　117 13.3.2　合并单元格　118 13.3.3　定义表格CSS样式　119 案例小结　122 习题与实训　122 案例14　登录表单　123 14.1　案例描述　123 14.2　案例实现　123 14.3　相关知识点　125 14.3.1　表单标记　125 14.3.2　控件　126 案例小结　129 习题与实训　129 案例15　调查问卷表单　131 15.1　案例描述　131 15.2　案例实现　131 15.3　相关知识点　135 15.3.1　控件　135 15.3.2　控件　137 案例小结　138 习题与实训　138 模块四　使用CSS3实现动画效果 案例16　图片遮罩效果　140 16.1　案例描述　140 16.2　案例实现　140 16.3　相关知识点　142 16.3.1　过渡属性　142 16.3.2　遮罩动画原理　146 案例小结　146 习题与实训　146 案例17　图片变形效果　147 17.1　案例描述　147 17.2　案例实现　148 17.3　相关知识点　151 案例小结　155 习题与实训　155 案例18　图片翻转效果　155 18.1　案例描述　156 18.2　案例实现　156 18.3　相关知识点　158 18.3.1　翻转动画原理　158 18.3.2　3D变形　159 案例小结　163 习题与实训　163 案例19　魔方动画效果　164 19.1　案例描述　164 19.2　案例实现　164 19.3　相关知识点　166 19.3.1　@keyframes—定义动画的 关键帧　166 19.3.2　设置动画属性　167 案例小结　170 习题与实训　170 模块五　使用JavaScript添加动态效果 案例20　输出信息　173 20.1　案例描述　173 20.2　案例实现　173 20.3　相关知识点　174 20.3.1　JavaScript的常见应用　174 20.3.2　JavaScript的语法规则　175 20.3.3　JavaScript的引入方式　175 20.3.4　输入/输出方法　177 案例小结　178 习题与实训　178 案例21　表单验证　179 21.1　案例描述　179 21.2　案例实现　180 21.3　相关知识点　183 21.3.1　变量　183 21.3.2　数据类型　184 21.3.3　运算符　185 21.3.4　函数　186 21.3.5　DOM简介　187 案例小结　188 习题与实训　188 案例22　简单计算器　189 22.1　案例描述　189 22.2　案例实现　190 22.3　相关知识点　192 22.3.1　分支语句　192 22.3.2　数据类型转换　195 22.3.3　事件与事件调用　197 案例小结　198 习题与实训　199 案例23　限时促销　200 23.1　案例描述　200 23.2　案例实现　201 23.3　相关知识点　204 23.3.1　面向对象简介　204 23.3.2　Date对象　205 23.3.3　BOM简介　207 案例小结　209 习题与实训　210 案例24　轮播图　211 24.1　案例描述　211 24.2　案例实现　211 24.3　相关知识点　214 24.3.1　设置元素样式　214 24.3.2　获取元素尺寸和位置　215 案例小结　217 习题与实训　217 模块六　综合案例 案例25　小米商城网站　219 25.1　案例描述　219 25.2　前期工作　220 25.3　制作网站主页　221 25.4　制作网站登录页　243 25.5　制作网站注册页　243 案例小结　243 案例26　美丽山东网站　243 26.1　案例描述　243 26.2　网站规划　245 26.3　制作网站主页　248 26.4　制作初识山东页面　264 26.5　制作景点详情页　264 案例小结　264</div></div> </div> </div> </div> </div> </div> <script src="/static/js/lib/jquery/blowup.min.js" type="text/javascript"></script> <script type="application/javascript"> $(document).ready(function () { /** * 图片放大器 */ $("#img_zoom").blowup({ background : "#FCEBB6" }); }); </script> <!-- 添加到书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_to_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">添加到书单</h4> </div> <div class="modal-body"> <!-- 书单列表模板 --> <script id="tpl_my_list" type="text/template"> {@each records as i} <li class="list-group-item"> <label style="width:100%;cursor: pointer;"> <input type="radio" name="listId" value="@{i.id}" id="list@{i.id}"> @{i.name} </label> </li> {@/each} </script> <!-- 书单列表模板结束 --> <ul class="list-group" id="tbl_my_list"> <li class="list-group-item"> <label for="list2" >加载中...</label> </li> </ul> <div class="pager"></div> <a href="javascript:void(0);" id="a_add_list">点此新建书单</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn_add_to_list_save">确定</button> </div> </div> </div> </div> <!-- 添加到书单弹出框结束 --> <!-- 新建书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="form_create_list"> <button type="reset" style="display:none;"></button> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">新建书单</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">标题：</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">简介：</label> <textarea style="height:200px" class="form-control" name="memo" placeholder="书单描述...">

关闭 保存

蜀ICP备2024047804号

Copyright 版权所有 © jvwen.com 聚文网