欢迎来到第壹文秘! | 帮助中心 分享价值,成长自我!
第壹文秘
全部分类
  • 幼儿/小学教育>
  • 中学教育>
  • 高等教育>
  • 研究生考试>
  • 外语学习>
  • 资格/认证考试>
  • 论文>
  • IT计算机>
  • 法律/法学>
  • 建筑/环境>
  • 通信/电子>
  • 医学/心理学>
  • ImageVerifierCode 换一换
    首页 第壹文秘 > 资源分类 > DOCX文档下载
    分享到微信 分享到微博 分享到QQ空间

    响应式Web应用前端开发教程全套电子教案完整版教学设计.docx

    • 资源ID:697237       资源大小:124.72KB        全文页数:89页
    • 资源格式: DOCX        下载积分:5金币
    快捷下载 游客一键下载
    账号登录下载
    三方登录下载: 微信开放平台登录 QQ登录
    下载资源需要5金币
    邮箱/手机:
    温馨提示:
    快捷下载时,如果您不填写信息,系统将为您自动创建临时账号,适用于临时下载。
    如果您填写信息,用户名和密码都是您填写的【邮箱或者手机号】(系统自动生成),方便查询和重复下载。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP,免费下载
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    响应式Web应用前端开发教程全套电子教案完整版教学设计.docx

    ×××XX××X×XXXX孽?£-rJL教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次1时数2授课班级教学目的及要求:理解使用Bootstrap+jQuery项目的特点能够基于项目需求合理选择Bootstrap和jQuery库熟练搭建开发环境熟练使用emmet速写HTML标签教学重点:理解使用Bootstrap+jQuery项目的特点基于项目需求合理选择Bootstrap和JQuery库教学难点:无实验仪器及教具:PC机、WindOWS7操作系统、HbuilderX、Google浏览器讲授:(20分钟) 响应式Web前端的应用场景 使用Bootstrap+jQucry项目的特点 搭建开发环境 Emmet速写规则发布任务工单,明确任务目标与实施步骤(5分钟)目标:搭建Bootstrap4.6开发环境。任务4.1:Bootstrap4的安装与配置(55分钟)步骤1:下载Bootstrap4.6库资料: BOotStnIP库下载网址:https:/getbootstrap.eom/docs/5.OZgetting-StartedZdownload/ Bootstrap4.6.0下载网址:httpsdocs4.6getting-starteddownload步骤2:引用Bootstrap并测试资料: Bootstrap按钮资料卡 Bootstrap下拉菜单资料卡技能训练: 选择适合的Bootstrap库并引用 Emmet速写 Bootstrap下拉菜单步骤3:下载引用jQuery库资料: jQuery下载网址httpsdowsload技能训练: 选择适合的jQuery库并引用实施方式:方式1:教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2:学生跟随教材配套的微课完成任务,教师巡堂指导任务完成后,学生填写工单上交老师,完成过程性考核课后作业:教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次1时数2授课班级教学目的及要求:熟练设置响应式页面的meta标签熟练使用Bootstrap全局样式设置文本对齐方式熟练使用Bootstrap全局样式设置背景颜色熟练使用Bootstrap容器熟练使用Bootstrap导航栏组件和内容教学重点: Bootstrap导航栏组件 Bootstrap文本对齐方式和背景颜色设置 Bootstrap容器教学难点:理解容器的断点设置实验仪器及教具:PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单,明确任务目标与实施步骤(5分钟)目标:1、根据首页的高保真图实现页眉导航栏和页脚2、在任何视口的设备上,页面内容宽度都与视口宽度相同任务4.2:实现客户界面首页页面结构(75分钟)知识点:导航栏颜色步骤1:页面头部设置资料: meta标签技能训练: 响应式页面meta设置步骤2:配置响应式容器和页脚资料: 首页的高保真图 Bootstrap容器 Bootstrap文本技能训练: 依据高保真图,设计页面结构 Bootstrap容器的种类 Btstrap文本对齐方式步骤8页眉导航栏的实现资料: 导航栏 颜色技能训练: 根据高保真图选择适合的导航栏内容Bootstrap颜色设置实施方式:方式1:教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2:学生跟随教材配套的微课完成任务,教师巡堂指导任务完成后,学生填写工单上交老师,完成过程性考核课后作业:教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次2时数2授课班级教学目的及要求:熟练使用Bootstrap导航栏组件熟练使用Bootstrap折叠面板组件教学重点: Bootstrap导航栏 Bootstrap折叠面板教学难点:组件的嵌套使用实验仪器及教具:PC机、WindOWS7操作系统、HbuilderX、Google浏览器回顾任务工单,明确任务目标与实施步骤(5分钟)目标:1、根据首页的高保真图实现页眉导航栏和页脚2、在任何视口的设备上,页面内容宽度都与视口宽度相同任务4.2:实现客户界面首页页面结构(75分钟)步骤4:站内搜索框的实现资料: Bootstrap表单 Bootstrap间距 Bootstrap按钮技能训练: BOOtStraP导航栏内置表单 Bootstrap表单控件样式设置 Bootstrap间距设置 Bootstrap不同外观的按钮设置步骤5:导航内容的实现资料: Bootstrap导航 Bootstrap导航栏 Bootstrap间距技能训练: Bootstrap导航组件的使用 Bootstrap导航栏expand断点设置 BOotStraP设置自动占据剩余空间步骤6:实现导航内容的响应式折叠展开效果资料: Bootstrap导航栏 Bootstrap折叠面板技能训练, Bootstrap导航栏响应式折叠展开效果的实现实施方式:方式1:教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2:学生跟随教材配套的微课完成任务,教师巡堂指导任务完成后,学生填写工单上交老师,完成过程性考核课后作业:教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次2时数2授课班级教学目的及要求:理解使用Bootstrap栅格提醒熟练使用Bootstrap媒体对象组件实现图文单元教学重点: Bootstrap媒体对象组件 Bootstrap栅格系统教学难点:理解栅格系统,并能使用栅格系统设计实现响应式布局实验仪器及教具:PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器发布任务工单,明确任务目标与实施步骤(5分钟)目标:1、根据首页的高保真图实现首页的主体部分任务4.3:实现首页主体部分(75分钟)步骤1:添加首页第一屏广告资料: Bootstrap巨幕 Bootstrap颜色 Bootstrap文本 Bootstrap图片技能训练: Bootstrap巨幕的使用 Btstrap设置文字颜色 Bootstrap文字缩放 Bootstrap图片保持比例缩放步骤2:添加首页“观鸟召集”中的图文单元资料: BOotStraP媒体对象 Bootstrap文本 Bootstrap图片 Bootstrap延展链接 Bootstrap定位技能训练: Btstrap媒体对象实现图文单元 Bootstrap设置缩略图 Bootstrap在媒体对象内设置延展链接 Bootstrap设置元素的定位步骤3:首页“观鸟召集”版块响应式布局资料: Bootstrap栅格技能训练: 理解Bootstrap栅格系统 使用Bootstrap栅格系统实现页面的响应式布局实施方式:方式1:教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2:学生跟随教材配套的微课完成任务,教师巡堂指导任务完成后,学生填写工单上交老师,完成过程性考核课后作业:×××××××XX××X×孽?£-i±A教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次3时数2授课班级教学目的及要求:熟练使用Bootstrap卡片组件熟练使用Bootstrap卡片组件实现瀑布流效果熟练使用Bootstrap轮播器组件能够使用CSSmedia实现响应式布局教学重点: Bootstrap卡片组件 Bootstrap轮播器组件教学难点:Bootstrap轮播器组件实验仪器及教具:PC机、WindoWS7操作系统、HbuilderX、GOogIe浏览器回顾任务要求,明确任务目标与实施步骤(5分钟)任务4.3:实现首页主体部分(75分钟)步骤4:“观鸟召集”版块美化资料: Bootstrap边距 Bootstrap边框 Bootstrap阴影技能训练: Btstrap设置内填充 BoOtStraP设置阴影效果 Bootstrap设置边框颜色步骤5:添加“热门线路”版块中的图文单元资料: Bootstrap卡片技能训练: BOOtStraP卡片组件实现图文单元步骤6:为“热门线路”添加“瀑布流”效果资料: Bootstrap卡片技能训练: Btstrap卡片组件实现“瀑布流效果” 使用CSSmedia实现瀑布流响应式布局步骤7:为首页第一屏广告添加轮播器资料: Btstrap轮播器 尺寸技能训练: Btstrap组件的配置 Bootstrap以比例的形式设置宽度实施方式:方式1:教师边做边讲,学生跟随老师的课堂教授完成规定步骤方式2:学生跟随教材配套的微课完成任务,教师巡堂指导任务完成后,学生填写工单上交老师,完成过程性考核课后作业:教案2021年/2022年第1学期课程名称响应式Web应用前端开发BOOtStraP4+jQuery课程类别任课班级任课教师教师所属院部学科计算机软件课题响应式Web应用前端开发Bootstrap4+jQuery周次3时数2授课班级教学目的及要求:熟练掌握Bootstrap导航组件的使用熟练掌握Bootstrap弹性盒的使用教学重点: Bootstrap导航组件 Bootstrap弹性盒教学难点:Bootstrap弹性盒布局实验仪器及教具:PC机、WindoWS7操作系统、Hbu

    注意事项

    本文(响应式Web应用前端开发教程全套电子教案完整版教学设计.docx)为本站会员(p**)主动上传,第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知第壹文秘(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2023 1wenmi网站版权所有

    经营许可证编号:宁ICP备2022001189号-1

    本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。第壹文秘仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知第壹文秘网,我们立即给予删除!

    收起
    展开