网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx
《网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx》由会员分享,可在线阅读,更多相关《网页设计与制作——JavaScript+jQuery标准教程 教案 第1章 网页设计基础.docx(9页珍藏版)》请在第一文库网上搜索。
1、网页设计与制作授课教案学年第学期学院(部)专业(学部)课程名称网页设计与制作任课教师课内形式理论教学课内实践口理实一体0习题复习口考核评价其他活动口学习量安排课内:课外形式调查分析团小组研讨口实践任务团理论探究口考核评价汇报展示口其他活动团课外:序号1授课日期月日月日月日月日授课班级课内教学内容:第1章网页设计基础课外学习任务:(1)课前:以小组为单位,分析了解常用的动态网页开发语言和技术;分析网站构建的流程以及网站开发所需要使用到的开发工具和展示工具并将了解的内容以PPT的形式记录下来。(2)课后:通过练习熟练掌握静态网页编写技术。独立编写自己的第一个网页。教学目标:知识目标 掌握HTM1标
2、签; 掌握CSS的使用; 初步了解JaVaSCript; 初步了解jQuery框架。能力目标 能够独立开发静态网页; 能够开发一个简单的动态网页。素质目标 较强的专业知识和自学能力; 丰富知识结构,提升专业知识; 在掌握制作第一个动态网页的基础上,理解网页开发的专业知识。重点难点及解决方法:(I)重点:静态网页的开发技术解决方法:通过课堂练习+视频式教学的方法,教师讲解网站开发从设计到最终上线的流程。引导学生积极思考,掌握静态网页开发的相关知识知识;同时通过课堂练习,使学生可以HTM1+CSS的相关知识;培养学生的思维能力和分析问题解决问题的能力。(2)难点:开发第一个动态网页解决方法:通过案
3、例演示+启发式教学讲解的方式,细致了解JaVaSCriPt语言和jQuer框架的基础知识,讲解第一个动态网页的开发。帮助学生了解网页展示工具,掌握网页编辑工具的安装和使用,实现第一个网页的编写。课内教学授课地点:教学媒体:微课、PPT课件、网页图片、相关教学视频等。设备及材料:多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源:与本次课相关的专业技术论文电子版。学习效果评价方式:对理论知识学习效果评价:采用课堂提问、课后习题和查阅技术论文研读笔记的方式;对技能的评价:教师对学生上交网页作品按制作要求进行综合性评价;对职业素养的评价:采用学生自评、小组内评价和教师评价相结
4、合的方式。课后小结:填表说明:1.序号,指该课程授课的顺序号,应与授课计划一致;2.授课形式在相应的选项打“课内教学内容及过程时间分配方法及手段【导引示例】在网页设计中,使用jQuery框架可以实现更加丰富的网页交互效果。1.网页设计概述【网页设计常用技术】网页设计主要使用的技术有HTM1、CSSJavaScript以及JavaScript的扩展框架,如jQuery0在进行网页设计前,首先需要考虑用户的需求,确定好网页的定位以及设计风格,然后由美工人员通过作图软件实现网页的外观设计,最后由开发者使用代码创建对应的网页。【网页设计工具】推荐的工具包括SUbIinIeText、VSCode和Dre
5、amWeaVer【网页展示工具】查看网页需要用到浏览器。浏览器即网页展示工具,也就是网页展示的窗口。目前比较流行的浏览器有火狐浏览器(Firefox)、欧朋浏览器(Opera)谷歌浏览器(Chrome)苹果官方浏览器(Safari),Windows10自带的浏览器(Edge)以及IE浏览器,如图1.1所示。O债WFirefoxOperaChxomeEdge正2.HTM1和CSS(教学重点)HTM1基础】HTM1是一种用来描述网页的语言,全称为HyperTextMarkup1anguage(超文本标记语言)。双标签语法形式如下所示。标签内容/标签例如,一个P元素的代码如下所示。P内容p单标签语法
6、形式如下所示。标签/例如,P每个标签都有固定的可以修改的属性,修改标签属性一般在开始标签内完成,其语法形式如下所示。标签属性二VaIUe内容/标签例如,修改标签宽度的代码如下所示。pWidth=30px内容pHTM1常用标签】网站域名相当于网站在互联网中的门牌号或电话号。普通用户可以通过域名访问到指定的网站。通过HTM1的标签可以实现最基础的静态页面布局,其中常用标签如表11所示。标签描述定义注糅定义文档类型定义超文本链接定义音频内容定义文本粗体定义文档的主体定义换行定义一个点击按钮定义表格标题定义文档中的节定义列表详情定义列表中的项目定义文字的字体、尺寸和颜名定义了HTM1文档的衣单定义HT
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作JavaScript+jQuery标准教程 教案 第1章 网页设计基础 网页 设计 制作 JavaScript jQuery 标准 教程 基础