\t章实践概述1



\t1.1实践目标1



\t1.2实践知识地图1



\t1.3实施安排6



\t1.3.1实验部分（技术专题）6



\t1.3.2综合实践部分11



\t第2章网页设计与制作19



\t2.1实验目标19



\t2.2实验任务19



\t2.3设计思路20



\t2.4实验实施（跟我做）20



\t2.4.1步骤一：设计网页原型20



\t2.4.2步骤二：设计页面效果21



\t2.4.3步骤三：网页切图22



\t2.4.4步骤四：网页设计25



\t第3章开发工具（HBuilder）26



\t3.1实验目标26



\t3.2实验任务26



\t3.3设计思路26



\t3.4实验实施（跟我做）27



\t3.3.1步骤一：下载并安装HBuilder27



\t3.3.2步骤二：启动HBuilder27



\t3.3.3步骤三：创建工程28



\t3.3.4步骤四：创建HTML页面29



\t3.3.5步骤五：编辑HTML文件30



\t3.3.6步骤六：运行30



\t第4章网站服务器部署（Apache服务器）32



\t4.1实验目标32



\t4.2实验任务32



\t4.3设计思路32



\t4.4实验实施（跟我做）32



\t4.3.1步骤一：下载Apache32



\t4.3.2步骤二：安装Apache34



\t4.3.3步骤三：测试Apache35



\t第5章HTML制作静态网页（新闻网站）36



\t5.1实验目标36



\t5.2实验任务37



\t5.3设计思路37



\t5.4实验实施（跟我做）38



\t5.4.1步骤一：创建“登录”页面38



\t5.4.2步骤二：添加“登录”页面内容38



\t5.4.3步骤三：创建新闻首页和二级页面39



\t5.4.4步骤四：添加新闻页面内容39



\t5.4.5步骤五：实现页面跳转42



\t第6章CSS设计页面样式（购物网站）43



\t6.1实验目标43



\t6.2实验任务44



\t6.3设计思路44



\t6.4实验实施（跟我做）46



\t6.4.1步骤一：创建文件46



\t6.4.2步骤二：链接到外部样式文件46



\t6.4.3步骤三：导航栏样式47



\t6.4.4步骤四：左边栏48



\t6.4.5步骤五：右边栏50



\t6.4.6步骤六：底边栏51



\t第7章JavaScript开发交互效果页面（网页计算器）53



\t7.1实验目标53



\t7.2实验任务54



\t7.3设计思路54



\t7.4实验实施（跟我做）56



\t7.4.1步骤一：HTML布局56



\t7.4.2步骤二：CSS添加样式57



\t7.4.3步骤三：JavaScript计算59



\t7.4.4步骤四：扩展功能（验证正则表达式）62



\t第8章jQuery开发交互效果页面（手机号抽奖）64



\t8.1实验目标64



\t8.2实验任务65



\t8.3设计思路65



\t8.4实验实施（跟我做）66



\t8.4.1步骤一：页面构建66



\t8.4.2步骤二：下载并引用jQuery和jQueryUI67



\t8.4.3步骤三：随机生成10个手机号码67



\t8.4.4步骤四：抽奖68



\t8.4.5步骤五：重置抽奖68



\t第9章CSS3新特性开发页面样式（微博网站）70



\t9.1实验目标70



\t9.2实验任务70



\t9.3设计思路71



\t9.4实验实施（跟我做）72



\t9.4.1步骤一：搭建页面主体结构72



\t9.4.2步骤二：搭建页面主体内容73



\t9.4.3步骤三：添加正文内容73



\t9.4.4步骤四：美化微博话题75



\t9.4.5步骤五：对微博话题的字体进行美化76



\t9.4.6步骤六：对微博话题的背景色进行美化77



\t0章HTML标签美化页面（课程信息管理系统）78



\t10.1实验目标78



\t10.2实验任务79



\t10.3设计思路80



\t10.4实验实施（跟我做）81



\t10.4.1步骤一：搭建页面主体结构和内容81



\t10.4.2步骤二：创建form表单和搜索框82



\t10.4.3步骤三：创建班级列表82



\t10.4.4步骤四：制作课程表子页面82



\t10.4.5步骤五：使用＜iframe＞标签导入表格84



\t10.4.6步骤六：为课程添加超链接进入课程详情页面85



\t1章CSS3新特性开发动态页面样式（天气网）86



\t11.1实验目标86



\t11.2实验任务87



\t11.3设计思路87



\t11.4实验实施（跟我做）88



\t11.4.1步骤一：创建HTML文件88



\t11.4.2步骤二：搭建天气预报主体88



\t11.4.3步骤三：用CSS美化89



\t11.4.4步骤四：制作CSS3动画91



\t11.4.5步骤五：使用自定义字体92



\t11.4.6步骤六：使用弹性布局92



\t11.4.7步骤七：使用多列布局92



\t2章HTML5制作移动端静态网页（房屋装饰网站）94



\t12.1实验目标94



\t12.2实验任务95



\t12.3设计思路95



\t12.4实验实施（跟我做）97



\t12.4.1步骤一：适配移动端视口97



\t12.4.2步骤二：搭建页面主体结构和内容97



\t12.4.3步骤三：创建搜索栏97



\t12.4.4步骤四：创建导航栏98



\t12.4.5步骤五：使用＜figure＞标签创建房屋信息98



\t12.4.6步骤六：创建音乐播放栏99



\t12.4.7步骤七：页脚按钮99



\t12.4.8步骤八：创建房屋页面99



\t3章CSS3新特性开发移动端页面样式（电商平台网站）101



\t13.1实验目标101



\t13.2实验任务101



\t13.3设计思路102



\t13.4实验实施（跟我做）103



\t13.4.1步骤一：创建符合HTML5的HTML文件103



\t13.4.2步骤二：使用viewport属性103



\t13.4.3步骤三：搭建网页主体结构103



\t13.4.4步骤四：用CSS3美化104



\t4章JavaScript开发移动端交互效果页面（项目提成计算器）107



\t14.1实验目标107



\t14.2实验任务107



\t14.3设计思路108



\t14.4实验实施（跟我做）109



\t14.4.1步骤一：创建项目主体109



\t14.4.2步骤二：用CSS美化110



\t14.4.3步骤三：编写JavaScript110



\t5章HTML5美化移动端静态网页（视频网站）113



\t15.1实验目标113



\t15.2实验任务113



\t15.3设计思路114



\t15.4实验实施（跟我做）115



\t15.4.1步骤一：搭建页面主体结构115



\t15.4.2步骤二：添加页头部分内容116



\t15.4.3步骤三：添加正文部分内容116



\t15.4.4步骤四：添加页脚部分内容118



\t6章CSS3新特性美化移动端静态页面（学院门户网站）119



\t16.1实验目标119



\t16.2实验任务119



\t16.3设计思路120



\t16.4实验实施（跟我做）120



\t16.4.1步骤一：搭建页面结构120



\t16.4.2步骤二：添加页头Logo121



\t16.4.3步骤三：正文内容样式122



\t16.4.4步骤四：页脚内容效果123



\t7章综合实践（跳蚤市场）125



\t17.1项目简介125



\t17.2实践目标125



\t17.3需求分析126



\t17.4界面设计127



\t17.4.1页面类型127



\t17.4.2页面整体布局127



\t17.4.3页头和页脚128



\t17.4.4“注册”页面128



\t17.4.5首页128



\t17.4.6“用户中心”页面129



\t17.4.7页面效果129



\t17.4.8项目页面汇总131



\t17.5阶段HTML5基础：创建工程132



\t17.5.1工作任务132



\t17.5.2设计思路132



\t17.5.3实现（跟我做）132



\t17.6阶段HTML5基础：首页136



\t17.6.1工作任务136



\t17.6.2设计思路137



\t17.6.3实现（跟我做）137



\t17.7阶段HTML5基础：注册和登录139



\t17.7.1工作任务139



\t17.7.2设计思路139



\t17.7.3实现（跟我做）140



\t17.8阶段HTML5基础：用户中心142



\t17.8.1用户中心I142



\t17.8.2用户中心Ⅱ149



\t17.9第二阶段HTML5+CSS3+JS：商品管理154



\t17.9.1发布商品154



\t17.9.2修改商品信息158



\t17.9.3删除商品162



\t17.9.4商品分类列表165



\t17.9.5搜索商品170



\t17.10第二阶段HTML5+CSS3+JS：订单管理175



\t17.10.1下订单175



\t17.10.2支付180



\t17.10.3查询订单184



\t17.11第二阶段HTML5+CSS3+JS：留言管理190



\t17.11.1工作任务190



\t17.11.2设计思路191



\t17.11.3实现（跟我做）192



\t17.12第二阶段HTML5+CSS3+JS：系统管理197



\t17.12.1工作任务197



\t17.12.2设计思路198



\t17.12.3实现（跟我做）199



\t17.13第三阶段CSS样式进阶+jQuery：网站样式优化204



\t17.13.1页头和页脚样式204



\t17.13.2首页优化213



\t17.13.3表单样式优化223



\t17.13.4菜单样式优化224



\t17.13.5表格样式优化225



\t17.14第四阶段移动端页面HTML5+CSS3：移动端页面设计227



\t17.14.1移动端首页设计227



\t17.14.2移动端表单设计232



\t17.14.3移动端列表设计236



\t17.14.4自适应页面设计241

本书是按照《Web前端开发职业技能等级标准》编写的配套实践教程，其中涉及的应用技术专题和项目代码均在主流浏览器中运行通过。本书结合大学计算机相关专业Web前端开发方向课程体系、企业Web前端开发岗位能力模型和《Web前端开发职业技能等级标准》，形成Web前端开发三位一