web前端设计（HTML5+CSS+JS）_山东职业学院

播放

SPOC学校专有课程

web前端设计（HTML5+CSS+JS）

第1次开课

开课时间： 2023年03月20日 ~ 2023年07月07日

学时安排： 2-3小时每周

当前开课已结束已有 6 人参加

老师已关闭该学期，无法查看

spContent=

—— 课程团队

课程概述

《Web前端设计（HTML5+CSS+JS）》课程旨在帮助学生掌握网页的设计技术，学会一门专业技能，满足企业对口需求。基于此目标，课程以“采用网页新标准技术、突破传统知识体系结构、基于工作能力培养、置身真实工作情境”为标准，以项目案例为载体，通过任务驱动的教学方式讲解HTML5、CSS3、JavaScript等Web前端开发技术，其一方面希望提高学生的动手能力, 另一方面也提高学生对于Web前端网页设计的兴趣度。本课程讲授内容主要涉及到Web基础知识、HTML5语言基础、CSS3基础、HTML5表单的应用、网页多媒体和JavaScript基础等，将Web前端开发技术贯穿所有的项目任务中，采用讲练结合的教学方式，带领学生边学边做，切实让学生掌握网页的设计和实现方法。

成绩要求

成绩评定标准为：根据课程标准制订，平时成绩50%（课堂表现10%，随堂作业10%，课堂测试10%，课后作业10%，项目实验10%），期末成绩占50%。

课程大纲

第一章 Web基础知识

课时目标：掌握Web的工作原理；了解Web的类型；掌握网页开发环境的搭建方法；掌握站点的创建和管理方法。

任务1 搭建开发环境

1.1 知识准备

1.2 实战演练——搭建开发环境

1.3 强化训练——创建个HTML5页面

1.4 课后实训

第二章 HTML5语言基础

课时目标：掌握HTML5的页面结构；掌握标签中的属性的使用方法；掌握HTML5语言中的文字标签的使用；掌握HTML5页面文档的编写方法。

任务2 文字与段落排版

2.1 知识准备

2.2 实战演练——制作“科技馆参观须知”网页

2.3 强化训练——制作“我家菜馆”点菜单网页

2.4 课后实训

第二章 HTML5语言基础

课时目标：掌握HTML5页面中图像标签的使用方法；理解绝对路径和相对路径的概念；掌握HTML5页面中超链接标签的使用方法；掌握锚点链接的创建方法。

任务3 图像和超链接

3.1 知识准备

3.2 实战演练——制作“网页技术介绍”网页

3.3 强化训练——制作“文章故事网”网页

3.4 课后实训

第三章 HTML5新增标签及属性

课时目标：理解结构、分组标签的定义方法；掌握结构、分组标签的使用方法；掌握HTML5新增标签的使用方法。

任务4 结构标签和分组标签

4.1 知识准备

4.2 实战演练——制作“唐诗欣赏”网页

4.3 强化训练——制作“温州地标性建筑”网页

4.4 课后实训

第三章 HTML5新增标签及属性

课时目标：掌握页面交互标签的使用方法；掌握层次语义标签的使用方法；掌握全局属性的应用方法；掌握使用HTML5属性制作网页的方法。

任务5 页面交互标签、层次语义标签和全局属性

5.1 知识准备

5.2 实战演练——制作“书评网”网页

5.3 强化训练——制作“面试应答技巧”网页

5.4 课后实训

第四章 CSS3基础

课时目标：了解CSS的特性；理解CSS样式规则；掌握CSS样式的引入方法；掌握CSS的基础选择器，学会CSS的定义方法。

任务6 标记选择器和类选择器

6.1 知识准备

6.2 实战演练——制作“美化文章”网页

6.3 强化训练——制作“图文混排”网页

6.4 课后实训

第四章 CSS3基础

课时目标：掌握定义链接伪类的方法；掌握链接伪类的使用方法；掌握定义样式面板的方法；掌握常用按钮的使用方法。

任务7 链接伪类和CSS样式面板

7.1 知识准备

7.2 实战演练——制作“散文欣赏”网页

7.3 强化训练——制作“热点新闻”列表

7.4 课后实训

第四章 CSS3基础

课时目标：理解id选择器中的id属性；掌握id选择器的定义方法；了解伪类选择器的类别；掌握伪元素选择器的使用方法；掌握使用标签标记表格的方法以及使用标签合并单元格的方法。

任务8 id选择器、伪选择器和表格样式

8.1 知识准备

8.2 实战演练——制作“鞋子尺码对照单”网页

8.3 强化训练——制作“婴儿身高体重标准表”网页

8.4 课后实训

第四章 CSS3基础

课时目标：了解复合、通配选择器的分类；掌握交集、后代选择器的定义与使用；掌握并集选择器的定义与使用。

任务9 复合选择器、通配符选择器

9.1 知识准备

9.2 实战演练——制作“寓言故事”网页

9.3 强化训练——制作“诗词欣赏”网页

9.4 课后实训

第五章盒子模型

课时目标：理解盒子模型的概念；掌握边框样式及边框宽度、颜色、形状的设置方法；理解内边距、外边距的概念；掌握内、外边距及综合属性的设置方法。

任务10 盒子模型及应用

10.1 知识准备

10.2 实战演练——制作“古诗文欣赏”网页

10.3 强化训练——制作“散文赏析”网页

10.4 课后实训

第五章盒子模型

课时目标：了解元素的三种类型；掌握元素类型的转换原则；掌握使用overflow属性设置的方法；掌握实现元素浮动的设置方法。

任务11 元素的浮动

11.1 知识准备

11.2 实战演练——制作“网站导航条”网页

11.3 强化训练——制作“浪漫花语百科网”网页

11.4 课后实训

第五章盒子模型

课时目标：掌握元素的四种定位方式；掌握静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）的概念和设置方法。

任务12 元素的定位

12.1 知识准备

12.2 实战演练——制作“旅游景点推荐网”banner

12.3 强化训练——制作“个人博客首页”网页

12.4 课后实训

第五章盒子模型

课时目标：掌握使用DIV+CSS布局的方法；掌握使用box-shadow和box-sizing属性设置阴影的方法；掌握使用线性渐变、径向渐变设置阴影的方法。

任务13 阴影与渐变属性

13.1 知识准备

13.2 实战演练——制作“网站广告栏”网页

13.3 强化训练——制作“旅游攻略网”网页

13.4 课后实训

第五章盒子模型

课时目标：理解CSS3的过渡属性概念；掌握过渡属性的使用；理解CSS3的变形属性概念；掌握变形属性的使用。

任务14 过渡与变形属性

14.1 知识准备

14.2 实战演练——制作“产品展示”网页

14.3 强化训练——制作“商品评论”网页

14.4 课后实训

展开全部

参考资料

《HTML+CSS+JavaScript网页制作案例教程（第2版）》黑马程序员人民邮电出版社

1 位授课老师

赵晓函

助教

大学

升学/择业

终身学习

赵晓函

友情链接

关注我们

关于我们