HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元6 页面整体布局 .pdf

XXXXXX学院

单

元

设

计

课程：________WEB开发基础

内容：单元6页面整体布局

学时：16学时

设计摘要

教学课题单元1HTML5静态网站开发概述

课程WEB开发基础学时安排16学时年级高职一年级

汤佳陈晓男主编.《HTML5+CSS3网页设计任务教材（第2版）》.高等教育出版社，

所选教材

_________________________________2023年12月.________________________________

一、教学背景

创作思路：针对传统教学无法解决的教学难进行设计，课程依托信息化教学环境，整合数字

化教学资源，采用混合式教学模式，采用翻转课堂的有力手段，采用“有效学习时间”的理念进行

项目化考核。以学生为中心，教师做引导，在项目教学的各环节充分运用HbuilderX开发工具、智慧

职教MOOC、动画、在线教学平台等信息化手段解决教学重点难点问。

设计特色：

1.教学过程项目化：依据“工学结合、职业情境、项目主导人才培养模式，通过创设情境、

针对实际问精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学，“学中做，

降低了学生学习难度，提高学习兴趣和课堂参与度；

2.教学资源数字化：丰富的课件、经典作品、视频等资源可供学生在线平台学习；

3.网络平台融合化：紧紧围绕HbuilderX开发工具，融入智慧职教MOOC、动画、在线教学平台

等信息化手段进行教学完成教学目标，突破重点、难点；

4.学习评价多元化：结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评

价平台等多种手段形成动态化、多元化的评价体系。

二、学习目标与内容

1.学习目标

知识目标：

（1）掌握常用的页面制作方法；

（2）掌握常用的页面布局方法（包括弹性布局）；

（3）掌握表格的基础知识，包括标签常用属性及其描述;

（4）掌握使用表格制作简历及百分比网页的方法；

（5）掌握采用rem制作自适应webApp的方法。

能力目标：

（1）熟练掌握静态布局、弹性布局的排版方式；

（2）熟练掌握＜tble＞显示各种样式的表格数据；

（3）熟练掌握H5混合开发App。

素质目标：

总体目标：培养新时代的“工匠精神二

（1）开发软件必须坚持质量优先的技术操守；

2

(2)面对重复性工作，不抱怨不放弃；

(3)面对困难，以创新思维解决问攻克难关。

思政育人目标：

(1)通过学习常用的页面布局方法，让学生明白学习没有捷径可走，要想“抄近路是办不到

的，只有勤奋地学习，刻苦地练习和实践，踏踏实实一步一个脚印地前进，才能掌握真才实学，获

得成功；

(2)通过学习表格的基础知识，让学生明白“三尺有神明，不畏人知畏己知，无论你在什么

地方做任何事，你头上三尺地方的神明都会看得清清楚，所以任何人不要以为没有人在旁边就做坏

事。

2.学习主要内容

(1)960网格系统在网页制作中的使用；

(2)clerfix和cler的使用；

(3)常用经典布局；

(4)常用弹性布局；

(5)表格基本知识；

(6)使用表格制作个人简历；

(7)使用表格制作QQ邮箱；

(8)使用基于lib-flexible库的rem单位制作自适应网站。