目录

  • 1 课程概况
    • 1.1 课程介绍
    • 1.2 课程标准
    • 1.3 授课计划
    • 1.4 课程导学
  • 2 初探Web前端技术
    • 2.1 模块导学
    • 2.2 学习课件
    • 2.3 网站、网页和主页
    • 2.4 Web标准的构成
    • 2.5 任务实现:动手编写第一个前端页面
    • 2.6 单元测验
    • 2.7 拓展资源
  • 3 使用HTML5搭建旅游公司网站首页结构
    • 3.1 模块导学
    • 3.2 学习课件
    • 3.3 HTML和标签介绍
    • 3.4 HTML元素及结构划分
    • 3.5 标题、段落和文本格式化标签
    • 3.6 搭建旅游公司网站首页结构
    • 3.7 单元测验
    • 3.8 拓展资源
  • 4 使用DIV+CSS实现旅游公司网站首页布局
    • 4.1 模块导学
    • 4.2 学习课件
    • 4.3 CSS语法和选择器
    • 4.4 CSS样式
    • 4.5 CSS层叠和继承
    • 4.6 盒子尺寸的计算公式
    • 4.7 浮动
    • 4.8 相对定位和绝对定位
    • 4.9 使用DIV+CSS布局旅游公司首页
    • 4.10 单元测验
    • 4.11 拓展资源
  • 5 使用CSS3美化超链接
    • 5.1 模块导学
    • 5.2 学习课件
    • 5.3 超链接基础知识
    • 5.4 按钮式超链接
    • 5.5 单元测验
    • 5.6 拓展资源
  • 6 使用CSS3制作导航
    • 6.1 模块导学
    • 6.2 学习课件
    • 6.3 列表标签及其样式
    • 6.4 补充案例:制作水平导航
    • 6.5 制作二级菜单
    • 6.6 单元测验
    • 6.7 拓展资源
  • 7 美化网页
    • 7.1 模块导学
    • 7.2 学习课件
    • 7.3 text-shadow
    • 7.4 box-shadow
    • 7.5 1+X证书补充知识点:transform和transition
    • 7.6 案例:使用transform和transition制作照片墙
    • 7.7 Animation动画属性
    • 7.8 Animation案例:旋转的盒子
    • 7.9 iconfont阿里巴巴矢量图标库的使用
    • 7.10 单元测验
    • 7.11 拓展资源
  • 8 添加用户交互界面——表单
    • 8.1 模块导学
    • 8.2 学习课件
    • 8.3 表单常用标签和属性
    • 8.4 HTML5新增的表单属性
    • 8.5 单元测验
    • 8.6 拓展资源
  • 9 使用Flex实现网页响应式布局
    • 9.1 模块导学
    • 9.2 学习课件
    • 9.3 Flex布局简介
    • 9.4 Flex布局(容器的属性)
    • 9.5 Flex布局(项目的属性)
    • 9.6 补充案例:响应式导航制作
    • 9.7 使用Flex布局重构旅游公司首页
    • 9.8 使用Flex布局重构华阳湖景区页面
    • 9.9 单元测验
    • 9.10 拓展资源
  • 10 使用Bootstrap实现网页响应式布局
    • 10.1 模块导学
    • 10.2 学习课件
    • 10.3 Bootstrap环境搭建
    • 10.4 Bootstrap栅格系统
    • 10.5 使用Bootstrap重构旅游公司首页
    • 10.6 单元测验
    • 10.7 拓展资源
  • 11 Web前端开发1+X证书初级
    • 11.1 Web前端开发1+X证书初级标准串讲
    • 11.2 Web前端开发1+X证书标准解读
    • 11.3 初级知识点讲解——HTML、CSS
课程介绍

1、Web前端工程师做什么?

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用HTMLCSSJavaScript等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

2、这门课会讲什么?

Web前端开发职业技能等级分为三个等级:初级、中级、高级,三个级别依次递进,高级别涵盖低级别职业技能要求。

Web 前端开发"1+X"证书(初级):主要面向 IT 互联网企业、互联网转型的传统型企事业单位、政府部门等的信息化数字化部门,从事静态网页制作、网页编程等工作,能根据视觉和交互原型要求开发静态网站。

Web前端基础》以考取Web前端开发“1+X”初级证书为目标,以培养综合应用能力为主线,通过真实网站建设项目,使学生掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式等基本知识和操作技术,响应式网站实现技术,为将来学习更多Web相关技术打下基础。

本书基于工作过程的教学思想,将一个典型网站的实现过程分解成若干子任务,每个子任务的讲解,都是围绕任务描述、知识引入、任务实现、任务拓展、任务小结、课后练习六个部分展开的。通过这六个部分内容的前后衔接,层层递进,让读者在完成任务的过程中自然而然地学到网页制作中的各项知识和技能。最后,本书还对开发“多屏”兼容的响应式网页进行了详细讲解。

3、这门课有什么特色?

课程基于OBE理念,采用工作流程+项目+任务驱动的教学模式,按照基础知识、操作技能、应用提高三个层次组织教学

l  基于网页设计与制作的过程,搭建框架结构——填充页面内容-——定义网页样式,以建设项目网站为工作任务,通过任务实践提升实践应用能力。

 l  基于工作过程的理念解构课程内容,分解项目案例,提取典型任务,设计教学单元;再拆分为若干个教学任务,设定每个教学任务的学习目标、知识点和技能点;再整合、序化教学内容,构建课程框架及内容体系。