《Web 前端设计与开发》
（2019～ 2020 学年第 2 学期）
单元名称：“红沂蒙”旅游网首页制作
所属系部：信息工程学院
制定人：XXX
合作人：
制定时间：2020 年 6 月
闾怎么读
W e b 前端设计与开发精品资源共享课Web 前端设计与开发课程单元教学设计
单元教学学时2
单元标题：需求分析与页面布局
在整体设计中的位置第 3 次
授课
18 计应教学 1 班上课
上课地点J06-101
班级时间
圣保罗大教堂英文
了解网页的基本构成要感受和理解红文化，激教学能够 UI 设计图进行网页布
目标素及主要元素；发学生的爱国热情；
局；
了解 HTML 的文档结构；养成善于思考、深入研究能够通过设置头部标签提高
掌握网页布局的方法的良好自主学习的习惯网页搜索的命中率
能力任务 1.创建“红沂蒙”网站
训练任务 2.搭建网站结构
任务
任务 3.布局“红沂蒙”旅游网首页
本次
网站：Website网页：Webpage
课使首页：HomePage栏目：column
用的风格：style关键字：keyword
外语
设计：design需求分析：demand analysis
单词
案例 1.“红沂蒙”旅游网效果图
参考资料：
案例 1.网页设计与制作项目教程(HTML+CSS+JavaScript)黑马程序员；
和
2.国家职业教育软件技术专业教学资源库资源：教材、课件、实训项目单、授课录教学
材料像、案例库、教学网站等
单元教学进度设计连锁酒店加盟十大排名
W e b 前端设计与开发精品资源共享课Web 前端设计与开发课程单元教学设计
单元教学学时2
单元标题：头部模块的制作
在整体设计中的位置第 4 次
授课
18 计应教学 1 班上课
上课地点J06-101
班级时间
能力目标知识目标素质目标能够正确使用 img 标记在网
掌握 img 标记的用法感受和理解红文化，激教学页中显示图片；
目标掌握 p 标记的用法发学生的爱国热情；
能够使用段落标记和文本控
区分绝对路径和相对路养成善于思考、深入研究制标记按照效果图的要求显
旅游团报名2日游价格径的良好自主学习的习惯示特殊样式的文本
能力
训练设计制作“红沂蒙”旅游网头部模块
任务
本次Image：图像auto：自动P：段落src：源
课使
用的Style：样式align：对齐方式
外语
Width：宽度alt：替换少林寺学校一年学费
单词
Margin：边距
案例1. “红沂蒙”旅游网效果图
参考资料：
三亚景点分布地图案例 1.网页设计与制作项目教程(HTML+CSS+JavaScript)黑马程序员；
和
2.国家职业教育软件技术专业教学资源库资源：教材、课件、实训项目单、授课录教学
材料像、案例库、教学网站等
