Web前端开发项目教程（HTML5 CSS3 JavaScript）（微课版）-教案全套 刘锡冬 任务01--10 网站设计与开发起步---网页中插入视频和音频.docx

《网页设计与开发》课程教案

3-

2-

网页设计与开发

教案

授课专业：XXXX专业

课程性质：专业基础课

学时数：64学时

目录

TOC\o1-3\h\z\u课程基本信息 2

任务01网站设计与开发起步 4

子任务01-1网站设计与开发起步 4

子任务01-2制作第一个网页 8

任务02网页的蓝图——简单布局 12

子任务02-1使用CSS装饰网页 12

子任务02-2巧用选择器调兵遣将 16

子任务02-3使用盒模型划分页面 20

子任务02-4使用BFC隔离空间 26

任务03网页的蓝图——复杂布局 30

子任务03-1浮动布局两栏式页面 30

子任务03-2DIV+CSS布局网上商城首页 34

子任务03-3网格布局网站商城首页 38

任务04向网页中插入图像和文本 44

子任务04-1网站首页中图像的应用 44

子任务04-2网站首页中文本的应用 49

任务05向网站首页添加导航 54

子任务05-1页面中超链接的使用 54

子任务05-2一级导航菜单的设计开发 58

子任务05-3二级弹出式菜单的定位 61

任务06网页中列表的应用 65

子任务06-1认识列表 65

子任务06-2使用列表制作多级导航 70

任务07使用弹性盒布局二级导航菜单 74

任务08网页中表格元素的应用 78

任务09网页中表单元素的应用 83

任务10网页中插入视频和音频 88

课程基本信息

课程名称

网页设计与开发

授课专业

云计算技术与应用专业群内所有专业

课程类型

专业基础课程

开课学期

大学一年级第一学期

授课学时

64学时

课程定位

《网页设计与开发》是云计算技术与应用专业群“平台+模块”人才培养体系中的平台课程，是专业群内软件技术专业、大数据技术与应用专业、云计算技术与应用、物联网应用技术、人工智能技术服务专业等所有专业的专业基础课。

本课程立足云计算技术与应用专业群内各专业人才培养方案，面向“Web前端开发工程师”的初级职业岗位需求，注重培养学生的工匠精神和团队合作意识，围绕着一个实际项目——网上商城的设计与开发的需求来选择课程内容，真实模拟企业中一个网站开发的全过程。针对职业能力的培养要求以及实际项目的工作过程，课程设计了10个教学任务，每个教学任务又包含一个或多个子任务，共4学分，64个课时。

先修课程

无

后续课程

JavaScript程序设计、Javaweb程序设计、微信小程序开发等（不同专业有所差异）

课程内容

《网页设计与开发》课程是云计算技术与应用专业群学生的专业基础课程，内容涵盖HTML5常用标签、CSS样式表、盒子模型、DIV+CSS布局、网格布局、超链接、列表、表格、表单等知识点。

主要分为以下几个项目，根据不同专业生源情况部分项目可选：

项目1认识网站和网页

项目2网页的蓝图——简单布局

项目3网页的蓝图——复杂布局

项目4向网页中插入图像和文本

项目5向网站首页添加导航

项目6网页中列表的应用

项目7使用弹性盒布局二级导航菜单（可选）

项目8网页中表格元素的应用

项目9网页中表单元素的应用

项目10网页中插入视频和音频

选用教材

教材：《Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）》，刘锡冬王爱华薛现伟主编，人民邮电出版社

该教材为云计算产业技术与应用专业群“平台+模块”项目化教学改革的成果之一。教材配有教辅平台，平台提供课前预习、课中互动、课后作业等功能，微课视频、题库等资源丰富，适合开展线上+线下混合式教学。

主要参考资源：

W3school在线教程/

资源平台

职教云平台：

/cms/courseDetails/index.htm?classId=30acdee8067b4045b352984abf1fcd70

授课方式

线上+线下混合式教学

任务01网站设计与开发起步

子任务01-1网站设计与开发起步

教案名称

子任务1-1网站设计与开发起步

计划学时

2学时

教学内容

本子任务主要学习网站和网页的基本概念和工作原理、各种常见主流浏览器以及Chrome浏览器下的开发者工具的使用。并且深入理解网页标准化的意义，将Web标准作为我们网站开发人员共同遵循的准则，来指导我们后续的开发工作。

知识目标

1.了解网站设计开发的基本概念；

2.理解We