《Web 前端设计与开发》课程单元教学设计.docx
《《Web 前端设计与开发》课程单元教学设计.docx》由会员分享，可在线阅读，更多相关《《Web 前端设计与开发》课程单元教学设计.docx（46页珍藏版）》请在冰豆网上搜索。
《Web前端设计与开发》课程单元教学设计
Web前端设计与开发精品资源共享课
《Web前端设计与开发》
课程单元教学设计
（2019～2020学年第2学期）
单元名称：
“红色沂蒙”旅游网首页制作
所属系部：
信息工程学院
制定人：
XXX
合作人：
制定时间：
2020年6月
1
Web前端设计与开发精品资源共享课
Web前端设计与开发课程单元教学设计
单元教学学时
2
单元标题：
需求分析与页面布局
在整体设计中的位置
第3次
授课
18计应教学1班
上课
上课地点
J06-101
班级
时间
能力目标
知识目标
素质目标
能够科学搭建网站框架；
了解网页的基本构成要
感受和理解红色文化，激
教学
能够UI设计图进行网页布
目标
素及主要元素；
发学生的爱国热情；
局；
了解HTML的文档结构；
养成善于思考、深入研究
能够通过设置头部标签提高
掌握网页布局的方法
的良好自主学习的习惯
网页搜索的命中率
能力
任务1.
创建“红色沂蒙”网站
训练
任务2.
搭建网站结构
任务
任务3.
布局“红色沂蒙”旅游网首页
本次
网站：
Website
网页：
Webpage
课使
首页：
HomePage
栏目：
column
用的
风格：
style
关键字：
keyword
外语
设计：
design
需求分析：
demandanalysis
单词
案例1.
“红色沂蒙”旅游网效果图
参考资料：
案例
1.网页设计与制作项目教程（HTML+CSS+JavaScript）黑马程序员；
和
2.国家职业教育软件技术专业教学资源库资源：
教材、课件、实训项目单、授课录
教学
材料
像、案例库、教学网站等
2
Web前端设计与开发精品资源共享课
单元教学进度设计
步骤
教学内容及能力
教师活动
学生活动
时间
/知识目标
（分钟）
复习
Web前端工程师需要具备的
提问，引起思考
回答，深化认知
5
回顾
素质有哪些？
巍巍蒙山高，清清沂水长。
八
百里沂蒙，乡乡有红嫂，村村
有烈士。
沂蒙的山山水水，见
证了抗日战争、解放战争中沂
蒙人民做出的巨大贡献，见证
了党同人民、军队与老百姓同
视频播放：
临沂
观看视频，引起
情境
心同向、血肉相连的伟大历
城市形象宣传片
强烈的共鸣，激
5
导入
史。
《红色沂蒙，真
发理想信念，引
这就是临沂。
情临沂》。
发学习兴趣
通过宣传，可以让更多的人认
识临沂，感受到沂蒙精神。
同
学们，发挥我们的专业优势，
将沂蒙精神深植在每一个人
的内心吧！
根据UI设计师提供的效果图
和素材进行页面布局
1.选择开发环境
认识常用开发环境：
Dreamweaver、HBuilder、
VSCode
2.网站/项目的框架组成
教师提供6
个效
3.文件类型的区分
果图，每1
小组
学生领取任务，
Html文件、css文件、js
任务
领取1个效果图
并对任务进行讨
文件
作为任务
论分析
10
分析
4.HTML文件的创建
师生共同讨论出
填写任务单中的
HTML文档的格式
完成任务所需的
项目分析
HTML标记及属性
知识和技能
HTML文档头部相关标记
标记</p><p><meta/>标记</p><p><link>标记</p><p><style>标记</p><p>5.DIV标记布局页面</p><p>区块容器标记div</p><p> </p><p>3</p><p>Web前端设计与开发精品资源共享课</p><p>按照任务单完成</p><p>1.创建项目/网站</p><p>教师点拨知识</p><p>项目/网站结构</p><p>创建文件夹</p><p>点：</p><p>的搭建</p><p>任务</p><p>创建项目</p><p>网站和网页及首</p><p>通过UI设计图</p><p>2.搭建项目/网站结构</p><p>页</p><p>制作图片素材</p><p>25</p><p>实施</p><p>3.准备网页素材</p><p>HTML标记的类型</p><p>通过网络等途径</p><p>4.新建网站主页</p><p>HTML头部标记</p><p>搜集文本素材</p><p>5.布局页面</p><p>DIV标记</p><p>创建网站主页并</p><p>布局</p><p>小组</p><p>“红色沂蒙”旅游网页面布局</p><p>组织小组代表进</p><p>小组间评价</p><p>10</p><p>汇报</p><p>汇报</p><p>行汇报</p><p>对各小组作品进</p><p>教师</p><p>“红色沂蒙”旅游网页面布局</p><p>行点评</p><p>根据优缺点进行</p><p>20</p><p>点评</p><p>优缺点分析</p><p>点明头部标记的</p><p>改进</p><p>作用</p><p>重点：</p><p>HTML标记、标记的属</p><p>性。</p><p>易错点：</p><p>注意区分单标记与双</p><p>考核训练任务</p><p>标记。</p><p>上传课堂任务</p><p>总结课堂内容</p><p>课堂</p><p>带领学生对“认识HTML”知识</p><p>填写课堂评价表</p><p>填写课堂评价表</p><p>10</p><p>总结</p><p>点进行回顾。</p><p>以此使学生更熟</p><p>（学生用）进行</p><p>练地掌握“HTML文档基本格</p><p>对学生本次课的</p><p>自我评价</p><p>表现进行评价</p><p>式、HTML标记、标记的属性、</p><p>HTML文档头部相关标记”等</p><p>知识点。</p><p>拓展</p><p>“红色沂蒙”旅游网头部标记</p><p>提高网页搜索的</p><p>改进网页</p><p>5</p><p>提高</p><p>的优化</p><p>命中几率</p><p>通过补充案例：</p><p>“美丽中国”网页加强学习</p><p>教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例</p><p>作业</p><p>对相关知识点进行巩固。</p><p>完成课后“动手实践”，并扫描二维码查看答案。</p><p>登陆课程网站完成本次课课后选择题</p><p>登陆课程网站完成预习任务</p><p>贯彻课程思政意识，将红色精神贯穿到整个项目中，通过项目化教学，创设真实工</p><p>课后</p><p>作情境，充分调动了学生学习的积极性，提高了他们的参与意识，并且通过小组间</p><p>体会</p><p>的竞赛增强了他们的竞争意思和团结协作的精神，在完成任务的同时，注重了综合</p><p>素质的培养。</p><p>4</p><p>Web前端设计与开发精品资源共享课</p><p> </p><p>Web前端设计与开发课程单元教学设计</p><p>单元教学学时</p><p>2</p><p>单元标题：</p><p>头部模块的制作</p><p>在整体设计中的位置</p><p>第4次</p><p>授课</p><p>18计应教学1班</p><p>上课</p><p>上课地点</p><p>J06-101</p><p>班级</p><p>时间</p><p>能力目标</p><p>知识目标</p><p>素质目标</p><p>能够正确使用img标记在网</p><p>掌握img标记的用法</p><p>感受和理解红色文化，激</p><p>教学</p><p>页中显示图片；</p><p>目标</p><p>掌握p标记的用法</p><p>发学生的爱国热情；</p><p>能够使用段落标记和文本控</p><p>区分绝对路径和相对路</p><p>养成善于思考、深入研究</p><p>制标记按照效果图的要求显</p><p>径</p><p>的良好自主学习的习惯</p><p>示特殊样式的文本</p><p>能力</p><p>训练</p><p>设计制作“红色沂蒙”旅游网头部模块</p><p>任务</p><p>本次</p><p>Image：</p><p>图像</p><p>auto:</p><p>自动</p><p>P:</p><p>段落</p><p>src:</p><p>源</p><p>课使</p><p>用的</p><p>Style：</p><p>样式</p><p>align：</p><p>对齐方式</p><p>外语</p><p>Width：</p><p>宽度</p><p>alt：</p><p>替换</p><p>单词</p><p>Margin：</p><p>边距</p><p>案例1.“红色沂蒙”旅游网效果图</p><p>参考资料：</p><p>案例</p><p>1.网页设计与制作项目教程（HTML+CSS+JavaScript）黑马程序员；</p><p>和</p><p>2.国家职业教育软件技术专业教学资源库资源：</p><p>教材、课件、实训项目单、授课录</p><p>教学</p><p>材料</p><p>像、案例库、教学网站等</p><p> </p><p>5</p><p>Web前端设计与开发精品资源共享课</p><p>单元教学进度设计</p><p>步骤</p><p>教学内容及能力</p><p>教师活动</p><p>学生活动</p><p>时间</p><p>/知识目标</p><p>（分钟）</p><p>抛出以下问题让</p><p>学生回答，以复</p><p>习上节课内容</p><p>1.在HTML标记中，主要分为</p><p>教师可根据学生</p><p>复习</p><p>单标记和双标记两种。</p><p>那么，</p><p>对上述问题的回</p><p>学生：</p><p>思考</p><p>什么是“单标记”呢？</p><p>答情况，对以上</p><p>交流互动</p><p>5</p><p>回顾</p><p>2、如何设置段落标记<p>的对</p><p>问题进行简单讲</p><p>记录笔记</p><p>齐属性？</p><p>解或直接进入本</p><p>课时新内容的学</p><p>习。</p><p>“红色沂蒙”旅游网页面布局</p><p>好了，下面的工作就是向每一</p><p>任务</p><p>个框架中填充内容了，请大家</p><p>展示UI效果图</p><p>思考，进入任务</p><p>5</p><p>导入</p><p>观察UI效果图，头部模块主</p><p>情境</p><p>要包含哪些元素？</p><p>我们应该</p><p>如何在网页中实现它？</p><p>头部模块主要包含有三大部</p><p>师生共同观察讨</p><p>学生领取任务，</p><p>分：</p><p>logo、背景、和右上角导</p><p>论网页的构成要</p><p>任务</p><p>并对任务进行讨</p><p>航。</p><p>素，分解任务，得</p><p>10</p><p>分析</p><p>其中logo和背景为图片元</p><p>出完成任务所需</p><p>论分析</p><p>填写任务单</p><p>素，导航为文本元素</p><p>要掌握的知识点</p><p>1.准备素材</p><p>2.添加logo图片</p><p>学习相对路径和绝对路径</p><p>通过UI设计图</p><p>的概念</p><p>制作图片素材</p><p>任务</p><p>学习img标签</p><p>教师点拨知识点</p><p>通过网络等途径</p><p>25</p><p>实施</p><p>Img标签的常用属性</p><p>搜集文本素材</p><p>3.添加头部背景图片</p><p>完成模块的设计</p><p>4.添加文字素材</p><p>学习段落标记的使用</p><p>学习转义字符的使用</p><p>小组</p><p>“红色沂蒙”旅游网头部模块</p><p>组织小组代表进</p><p>小组间评价</p><p>10</p><p>汇报</p><p>的设计汇报</p><p>行汇报</p><p> </p><p>6</p><p>Web前端设计与开发精品资源共享课</p><p> </p><p>对各小组作品进</p><p>教师</p><p>“红色沂蒙”旅游网头部模块</p><p>行点评</p><p>根据优缺点进行</p><p>20</p><p>点评</p><p>设计优缺点分析</p><p>点明头部标记的</p><p>改进</p><p>作用</p><p>重点：</p><p>图像和段落标记。</p><p>学完本课时后，带领学生对</p><p>考核训练任务</p><p>上传课堂任务</p><p>“认识HTML”知识点进行回</p><p>总结课堂内容</p><p>课堂</p><p>填写课堂评价表</p><p>顾，以此使学生更熟练地掌握</p><p>填写课堂评价表</p><p>10</p><p>总结</p><p>“图像标记、段落标记、文本</p><p>对学生本次课的</p><p>（学生用）进行</p><p>自我评价</p><p>控制标记、相对路径和绝对路</p><p>表现进行评价</p><p>径”等知识点。</p><p>拓展</p><p>“红色沂蒙”旅游网头部标记</p><p>提高网页搜索的</p><p>改进网页</p><p>5</p><p>提高</p><p>的优化</p><p>命中几率</p><p>技能训练对“美丽中国”头部模块进行设计</p><p>教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例</p><p>作业</p><p>对相关知识点进行巩固。</p><p>完成课后“动手实践”，并扫描二维码查看答案。</p><p>登陆课程网站完成本次课课后选择题</p><p>登陆课程网站完成预习任务</p><p>课后</p><p>本次课采用了项目教学法和任务驱动教学法，采用了翻转课堂和线上线下相结合</p><p>的方式，缩短了课堂教学时间，留出更多时间给学生练习，基本完成教学任务，</p><p>体会</p><p>达成教学目标，教学效果较好。</p><p> </p><p>7</p><p>Web前端设计与开发精品资源共享课</p><p> </p><p>Web前端设计与开发课程单元教学设计</p><p>单元教学学时</p><p>2</p><p>单元标题：</p><p>导航模块的制作</p><p>在整体设计中的位置</p><p>第5次</p><p>授课</p><p>18计应教学1班</p><p>上课</p><p>上课地点</p><p>J06-101</p><p>班级</p><p>时间</p><p>能力目标</p><p>知识目标</p><p>素质目标</p><p>教学</p><p>能够正确使用文本控制标</p><p>掌握文本控制标记的用</p><p>感受和理解红色文化，激</p><p>目标</p><p>记；</p><p>法</p><p>发学生的爱国热情；</p><p>能够按照效果图的要求显示</p><p>掌握文本格式化标记的</p><p>养成善于思考、深入研究</p><p>特殊样式的文本</p><p>用法</p><p>的良好自主学习的习惯</p><p>能力</p><p>训练</p><p>设计制作“红色沂蒙”旅游网导航模块</p><p>任务</p><p>本次</p><p>Navigator：</p><p>导航</p><p>b：</p><p>加粗标记</p><p>Font：</p><p>字体</p><p>strong：</p><p>粗体</p><p>课使</p><p>用的</p><p>Size：</p><p>大小</p><p>em：</p><p>倾斜标记</p><p>外语</p><p>Color：</p><p>颜色</p><p>del：</p><p>删除线标记</p><p>单词</p><p>Center：</p><p>居中</p><p>ins：</p><p>下划线标记</p><p>案例1.“红色沂蒙”旅游网效果图</p><p>参考资料：</p><p>案例</p><p>1.网页设计与制作项目教程（HTML+CSS+JavaScript）黑马程序员；</p><p>和</p><p>2.国家职业教育软件技术专业教学资源库资源：</p><p>教材、课件、实训项目单、授课录</p><p>教学</p><p>材料</p><p>像、案例库、教学网站等</p><p> </p><p>8</p><p>Web前端设计与开发精品资源共享课</p><p>单元教学进度设计</p><p>步骤</p><p>教学内容及能力</p><p>教师活动</p><p>学生活动</p><p>时间</p><p>/知识目标</p><p>（分钟）</p><p>抛出以下问题让</p><p>学生回答，以复</p><p>习上节课内容</p><p>教师可根据学生</p><p>复习</p><p>在网页中使用何种方法保证</p><p>对上述问题的回</p><p>学生：</p><p>思考</p><p>网站移动之后网页还能正常</p><p>答情况，对以上</p><p>交流互动</p><p>5</p><p>回顾</p><p>显示？</p><p>问题进行简单讲</p><p>记录笔记</p><p>解或直接进入本</p><p>课时新内容的学</p><p>习。</p><p>“红色沂蒙”旅游网头部模块</p><p>任务</p><p>已经制作完成。</p><p>在网页中，导</p><p>思考，进入任务</p><p>航也是网页不可缺少的元素，</p><p>展示UI效果图</p><p>5</p><p>导入</p><p>这节课我们根据效果图来制</p><p>情境</p><p>作导航模块。</p><p>导航模块主要由文字元素组</p><p>成。</p><p>要求：</p><p>师生共同观察讨</p><p>学生领取任务，</p><p>头部模块和导航模块用分割</p><p>论网页的构成要</p><p>任务</p><p>并对任务进行讨</p><p>导航文字字体要求</p><p>素，分解任务，得</p><p>10</p><p>分析</p><p>文字样式要求</p><p>出完成任务所需</p><p>论分析</p><p>填写任务单</p><p>文字大小要求</p><p>要掌握的知识点</p><p>文字颜色要求</p><p>文字背景颜色要求</p><p>1.设置水平线</p><p>按照任务单完成</p><p>2.添加导航文字</p><p>项目/网站结构</p><p>3.设置导航文字间隔</p><p>的搭建</p><p>任务</p><p>4.设置文字字体</p><p>教师点拨知识点</p><p>通过UI设计图</p><p>5.设置文字字号</p><p>制作图片素材</p><p>25</p><p>实施</p><p>6.设置文字颜色</p><p>通过网络等途径</p><p>7.设置文字样式</p><p>搜集素材，完成</p><p>8.设置背景颜色</p><p>导航模块的设计</p><p>9.设置特殊字符</p><p>与制作</p><p>小组</p><p>“红色沂蒙”旅游网导航模块</p><p>组织小组代表进</p><p>小组间评价</p><p>10</p><p>汇报</p><p>的设计汇报</p><p>行汇报</p><p>9</p><p>Web前端设计与开发精品资源共享课</p><p> </p><p>对各小组作品进</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "10260459";
var total_page = "46";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/10260459.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2023-2/9/c511d91b-60b3-4e77-be9e-aee84918c891/c511d91b-60b3-4e77-be9e-aee84918c891";
var freepage = parseInt('20');
var total_c = parseInt('46');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"《Web 前端设计与开发》课程单元教学设计.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873367.html" title="高级中学建设工程项目可行性研究报告.doc">高级中学建设工程项目可行性研究报告.doc</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873265.html" title="《C语言程序设计》Word教案.doc">《C语言程序设计》Word教案.doc</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873100.html" title="化工仪表检维修注意事项.docx">化工仪表检维修注意事项.docx</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873011.html" title="儿童康复培训试题+答案.doc">儿童康复培训试题+答案.doc</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872896.html" title="6.2-四川省基本概况与主要文旅资源《地方导游基础知识》(第四版)PPT.pptx">6.2-四川省基本概况与主要文旅资源《地方导游基础知识》(第四版)PPT.pptx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872866.html" title="《石墨烯材料》PPT课件.ppt">《石墨烯材料》PPT课件.ppt</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872752.html" title="(中冶)临建防砸棚施工方案.doc">(中冶)临建防砸棚施工方案.doc</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872374.html" title="房屋租客入住守则.docx">房屋租客入住守则.docx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872344.html" title="安全管理标准.pptx">安全管理标准.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872068.html" title="信仰的力量ppt.pptx">信仰的力量ppt.pptx</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657112.html" target="_parent" title="路政宣传标语精选多篇.docx">路政宣传标语精选多篇.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657113.html" target="_parent" title="广西财经法规97从业真题.docx">广西财经法规97从业真题.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657114.html" target="_parent" title="定期考核大内科试题及答案.docx">定期考核大内科试题及答案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657115.html" target="_parent" title="红外变倍调焦控制系统调试台方案硬件系统.docx">红外变倍调焦控制系统调试台方案硬件系统.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657116.html" target="_parent" title="人教版高中英语必修五 Unit 2同步训练及参考答案.docx">人教版高中英语必修五 Unit 2同步训练及参考答案.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657117.html" target="_parent" title="纳税评估基础数据采集表适用工业企业.docx">纳税评估基础数据采集表适用工业企业.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657118.html" target="_parent" title="天行投资培训教程之K线形态.docx">天行投资培训教程之K线形态.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657119.html" target="_parent" title="小学数学教研计划.docx">小学数学教研计划.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/3657120.html" target="_parent" title="新编高中地理人教版必修二学案第4章 附3 服务业的区位选择 Word版含答案.docx">新编高中地理人教版必修二学案第4章 附3 服务业的区位选择 Word版含答案.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Web+%e5%89%8d%e7%ab%af%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%bc%80%e5%8f%91">Web 前端设计与开发</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e3%80%8aWeb">《Web</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%89%8d%e7%ab%af%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%bc%80%e5%8f%91%e3%80%8b%e8%af%be%e7%a8%8b%e5%8d%95%e5%85%83%e6%95%99%e5%ad%a6%e8%ae%be%e8%ae%a1">前端设计与开发》课程单元教学设计</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=Web">Web</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%89%8d%e7%ab%af">前端</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%ae%be%e8%ae%a1">设计</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%bc%80%e5%8f%91">开发</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%af%be%e7%a8%8b">课程</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%8d%95%e5%85%83">单元</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e6%95%99%e5%ad%a6">教学</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00008.html">PPT模板</a><span> > </span><a href="https://m.bdocx.com/booklist-0000800007.html">自然景观</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=lEGzf%7c%2fQ70b4TVnSOjriWA%3d%3d&parto=Jwk4MzSTqAycfyNks%2bnfx%2fp%2fugpv0kJsCtVctfrriW%2bPSRl1u1ABia8%2fgf9nRsRa1ASqoPRfxzVyb%2fkc4P19A2bGhpl0HCAD850ZMn3IdGaiLYN7xEi8fxgDfLTAAHpdX2OJhZaoYMIlaq3EBvGH3gogvdXRG2IWNm%2fLDmZ5i0rZ9YS2MWbITzr7gj6DdFlv5%2bLC0JVdwzO4sajOYYDxKn5zxAenGkel" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/10260459.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1727611302', // 必填，生成签名的时间戳
nonceStr: '185E65BC40581880C4F2C82958DE8CFE', // 必填，生成签名的随机串
signature: 'ae89b57adb41c57b90cb454cdcab63f4e4e0d190',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/10260459.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1727611302', // 必填，生成签名的时间戳
nonceStr: '185E65BC40581880C4F2C82958DE8CFE', // 必填，生成签名的随机串
signature: 'ae89b57adb41c57b90cb454cdcab63f4e4e0d190',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>