导语

  

内容提要

  

    本书是按照《Web前端开发职业技能等级标准》编写的配套实践教程，其中涉及的应用技术专题和项目代码均在主流浏览器中运行通过。
    本书结合大学计算机相关专业Web前端开发方向课程体系、企业Web前端开发岗位能力模型和《Web前端开发职业技能等级标准》，形成Web前端开发三位一体知识地图，以实践能力为导向，以企业真实应用为目标，遵循企业软件工程标准和技术，以任务为驱动，针对HTML5、CSS3、JavaScript、jQuery等重要Web前端开发中的知识单元，结合实际案例和应用环境进行分析与设计，并对每个重要知识单元进行详细的实现，使读者能够真正掌握这些知识在实际场景中的应用。
    本书分为两大部分：第一部分为实验，采用技术专题进行知识单元训练，可以对应课程练习或实验，针对不同的知识单元设计了实验项目，重点训练每个知识单元的内容；第二部分为综合实践，可以对应课程设计或综合实践，运用一个电商网站项目贯穿Web前端开发核心知识，完整训练核心知识单元在企业真实项目中的应用。
    本书适合作为《Web前端开发职业技能等级标准》实践教学的参考用书，也可作为对Web前端开发感兴趣的学习者的指导用书。

第1章  实践概述
  1.1  实践目标
  1.2  实践知识地图
  1.3  实施安排
    1.3.1  实验部分（技术专题）
    1.3.2  综合实践部分
第2章  网页设计与制作
  2.1  实验目标
  2.2  实验任务
  2.3  设计思路
  2.4  实验实施（跟我做）
    2.4.1  步骤一：设计网页原型
    2.4.2  步骤二：设计页面效果
    2.4.3  步骤三：网页切图
    2.4.4  步骤四：网页设计
第3章  开发工具（HBuilder）
  3.1  实验目标
  3.2  实验任务
  3.3  设计思路
  3.4  实验实施（跟我做）
    3.3.1  步骤一：下载并安装HBuilder
    3.3.2  步骤二：启动HBuilder
    3.3.3  步骤三：创建工程
    3.3.4  步骤四：创建HTML页面
    3.3.5  步骤五：编辑HTML文件
    3.3.6  步骤六：运行
第4章  网站服务器部署（Apache服务器）
  4.1  实验目标
  4.2  实验任务
  4.3  设计思路
  4.4  实验实施（跟我做）
    4.3.1  步骤一：下载Apache
    4.3.2  步骤二：安装Apache
    4.3.3  步骤三：测试Apache
第5章  HTML制作静态网页（新闻网站）
  5.1  实验目标
  5.2  实验任务
  5.3  设计思路
  5.4  实验实施（跟我做）
    5.4.1  步骤一：创建“登录”页面
    5.4.2  步骤二：添加“登录”页面内容
    5.4.3  步骤三：创建新闻首页和二级页面
    5.4.4  步骤四：添加新闻页面内容
    5.4.5  步骤五：实现页面跳转
第6章  CSS设计页面样式（购物网站）
  6.1  实验目标
  6.2  实验任务
  6.3  设计思路
  6.4  实验实施（跟我做）
    6.4.1  步骤一：创建文件
    6.4.2  步骤二：链接到外部样式文件
    6.4.3  步骤三：导航栏样式
    6.4.4  步骤四：左边栏
    6.4.5  步骤五：右边栏
    6.4.6  步骤六：底边栏
第7章  JavaScript开发交互效果页面（网页计算器）
  7.1  实验目标
  7.2  实验任务
  7.3  设计思路
  7.4  实验实施（跟我做）
    7.4.1  步骤一：HTML布局
    7.4.2  步骤二：CSS添加样式
    7.4.3  步骤三：JavaScript计算
    7.4.4  步骤四：扩展功能（验证正则表达式）
第8章  jQuery开发交互效果页面（手机号抽奖）
  8.1  实验目标
  8.2  实验任务
  8.3  设计思路
  8.4  实验实施（跟我做）
    8.4.1  步骤一：页面构建
    8.4.2  步骤二：下载并引用jQuery和jQuery UI
    8.4.3  步骤三：随机生成10个手机号码
    8.4.4  步骤四：抽奖
    8.4.5  步骤五：重置抽奖
第9章  CSS3新特性开发页面样式（微博网站）
  9.1  实验目标
  9.2  实验任务
  9.3  设计思路
  9.4  实验实施（跟我做）
    9.4.1  步骤一：搭建页面主体结构
    9.4.2  步骤二：搭建页面主体内容
    9.4.3  步骤三：添加正文内容
    9.4.4  步骤四：美化微博话题
    9.4.5  步骤五：对微博话题的字体进行美化
    9.4.6  步骤六：对微博话题的背景色进行美化
第10章  HTML标签美化页面（课程信息管理系统）
  10.1  实验目标
  10.2  实验任务
  10.3  设计思路
  10.4  实验实施（跟我做）
    10.4.1  步骤一：搭建页面主体结构和内容
    10.4.2  步骤二：创建form表单和搜索框
    10.4.3  步骤三：创建班级列表
    10.4.4  步骤四：制作课程表子页面
    10.4.5  步骤五：使用＜iframe＞标签导入表格
    10.4.6  步骤六：为课程添加超链接进入课程详情页面
第11章  CSS3新特性开发动态页面样式（天气网）
  11.1  实验目标
  11.2  实验任务
  11.3  设计思路
  11.4  实验实施（跟我做）
    11.4.1  步骤一：创建HTML文件
    11.4.2  步骤二：搭建天气预报主体
    11.4.3  步骤三：用CSS美化
    11.4.4  步骤四：制作CSS3动画
    11.4.5  步骤五：使用自定义字体
    11.4.6  步骤六：使用弹性布局
    11.4.7  步骤七：使用多列布局
第12章  HTML5制作移动端静态网页（房屋装饰网站）
  12.1  实验目标
  12.2  实验任务
  12.3  设计思路
  12.4  实验实施（跟我做）
    12.4.1  步骤一：适配移动端视口
    12.4.2  步骤二：搭建页面主体结构和内容
    12.4.3  步骤三：创建搜索栏
    12.4.4  步骤四：创建导航栏
    12.4.5  步骤五：使用＜figure＞标签创建房屋信息
    12.4.6  步骤六：创建音乐播放栏
    12.4.7  步骤七：页脚按钮
    12.4.8  步骤八：创建房屋页面
第13章  CSS3新特性开发移动端页面样式（电商平台网站）
  13.1  实验目标
  13.2  实验任务
  13.3  设计思路
  13.4  实验实施（跟我做）
    13.4.1  步骤一：创建符合HTML的HTML文件
    13.4.2  步骤二：使用viewport属性
    13.4.3  步骤三：搭建网页主体结构
    13.4.4  步骤四：用CSS3美化
第14章  JavaScript开发移动端交互效果页面（项目提成计算器）
  14.1  实验目标
  14.2  实验任务
  14.3  设计思路
  14.4  实验实施（跟我做）
    14.4.1  步骤一：创建项目主体
    14.4.2  步骤二：用CSS美化
    14.4.3  步骤三：编写JavaScript
第15章  HTML5美化移动端静态网页（视频网站）
  15.1  实验目标
  15.2  实验任务
  15.3  设计思路
  15.4  实验实施（跟我做）
    15.4.1  步骤一：搭建页面主体结构
    15.4.2  步骤二：添加页头部分内容
    15.4.3  步骤三：添加正文部分内容
    15.4.4  步骤四：添加页脚部分内容
第16章  CSS3新特性美化移动端静态页面（学院门户网站）
  16.1  实验目标
  16.2  实验任务
  16.3  设计思路
  16.4  实验实施（跟我做）
    16.4.1  步骤一：搭建页面结构
    16.4.2  步骤二：添加页头Logo
    16.4.3  步骤三：正文内容样式
    16.4.4  步骤四：页脚内容效果
第17章  综合实践（跳蚤市场）
  17.1  项目简介
  17.2  实践目标
  17.3  需求分析
  17.4  界面设计
    17.4.1  页面类型
    17.4.2  页面整体布局
    17.4.3  页头和页脚
    17.4.4  “注册”页面
    17.4.5  首页
    17.4.6  “用户中心”页面
    17.4.7  页面效果
    17.4.8  项目页面汇总
  17.5  第一阶段HTML5基础：创建工程
    17.5.1  工作任务
    17.5.2  设计思路
    17.5.3  实现（跟我做）
  17.6  第一阶段HTML5基础：首页
    17.6.1  工作任务
    17.6.2  设计思路
    17.6.3  实现（跟我做）
  17.7  第一阶段HTML5基础：注册和登录
    17.7.1  工作任务
    17.7.2  设计思路
    17.7.3  实现（跟我做）
  17.8  第一阶段HTML5基础：用户中心
    17.8.1  用户中心I
    17.8.2  用户中心Ⅱ
  17.9  第二阶段HTML5+CSS3+JS：商品管理
    17.9.1  发布商品
    17.9.2  修改商品信息
    17.9.3  删除商品
    17.9.4  商品分类列表
    17.9.5  搜索商品
  17.10  第二阶段HTML5+CSS3+JS：订单管理
    17.10.1  下订单
    17.10.2  支付
    17.10.3  查询订单
  17.11  第二阶段HTML5+CSS3+JS：留言管理
    17.11.1  工作任务
    17.11.2  设计思路
    17.11.3  实现（跟我做）
  17.12  第二阶段HTML5+CSS3+JS：系统管理
    17.12.1  工作任务
    17.12.2  设计思路
    17.12.3  实现（跟我做）
  17.13  第三阶段CSS样式进阶+jQuery：网站样式优化
    17.13.1  页头和页脚样式
    17.13.2  首页优化
    17.13.3  表单样式优化
    17.13.4  菜单样式优化
    17.13.5  表格样式优化
  17.14  第四阶段移动端页面HTML5+CSS3：移动端页面设计
    17.14.1  移动端首页设计
    17.14.2  移动端表单设计
    17.14.3  移动端列表设计
    17.14.4  自适应页面设计