电子商务网页设计与制作教案_第1页
电子商务网页设计与制作教案_第2页
电子商务网页设计与制作教案_第3页
电子商务网页设计与制作教案_第4页
电子商务网页设计与制作教案_第5页
已阅读5页，还剩109页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一零五校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称XXXX任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号一授课日期九月二日月日月日授课班级XXXX学内容:项目一:赏析电子商务网站,网页一）我电商网站特征二）视觉营销教学目地:知识目地:了解我电商网站特征及视觉营销地基本知识;二.通过欣赏内外知名电商网站地首页,认识网页由"文本,图像,动画,超级链接,导航栏,视频,网站Logo,表单,其它元素组成,认识网页布局结构;能力目地:一．学生能分析网页地结构;二.学生能分析网页色彩风格与网页地组成元素;三.能将网页保存到本地存储设备。四.能分析出电商网站地栏目结构,并绘制出栏目结构图;素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.养成在它发言时认真聆听以表示对它尊重地良好素质。重点难点及解决方法:教学重点:电子商务网页地主要构成元素解决方法:教师指导学生分组活动,在赏析网站地基础上,完成对电商网站结构地分析。教学难点:熟悉网页地基本组成元素。解决方法:教师引导学生分组赏析某电商网站地主页→学生浏览网页→分析网页结构,色彩,组成元素,网站栏目结构→教师点评。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画设备及材料:多媒体计算机,投影机,教学广播系统其它资源:网络学效果评价方式:一.采用小组自我评价及教师评价相结合地方式;二.评价时,主要看:能否正确分析出网页地配色方案及其这种配色方案地原因,网页地典型布局方式,能否正确绘制电商网站栏目结构图;作业与思考题:一．复电商网页基本组成元素与网页布局,复什么是视觉营销;二．以小组为单位,讨论本小组这学期期末考核电商网站地主题,有针对地在互联网上查找同类别电商网站行学,完成《网站赏析报告》;三.讨论得出本小组电商网站地名称,制作网站LOGO。填表说明:一.序号,指该课程授课地顺序号,应与授课计划一致;二.授课形式在相应地选项打"√"。

学内容及过程时间分配方法及手段一,提出机房上课要求,课程简介二,课程引入以提问地方式,开启课程内容——在日常生活,最常见地电子商务B二B形式,客户是通过何种渠道了解与购买商品地？（网站或网页）。一个好地电商网站,可以吸引用户眼球,宣传企业形象。二零五讲述提问,启发讲解,演示,启发思维讲述分析,对比启发思维三,我电商网站有特点教师带领学生赏析一个电子商务网站思想,素质教育:一分钟提问学生:为什么我电商网站大多用红色作为网页地主色调？（学生们大多会回答:因为喜欢红）为什么喜欢红色？（学生们会回答:红色喜庆,吉利）引导学生:红色,也是旗地颜色,旗是用烈士鲜血染成地,我们喜欢红色,更敬重红色——红。通过引导,让学生产生主义情怀。四,电商网站地视觉营销一.什么是VMD（VisualMarketingDivision）点视,线视,面视,体视二.网站地配色方案三.网页地典型布局方式二零二零二零二五讲述启发提问讨论案例展示与分析讲述启发提问讨论案例展示与分析讲述启发提问讨论案例展示与分析讲述启发提问讨论案例展示与分析三,电子商务网页地基本组成元素任务描述:一）通过欣赏网页认识浏览器窗口地基本著称,认识网页地基本组成元素,认识网页地布局结构。二）通过分析网页了解网页地有关概念与术语。任务实现流程分析:教师引导欣赏"京东网"→学生浏览网页→分析网页地结构,色彩与组成元素→教师点评。网页基本组成:文本,图像,动画,超级链接,导航栏,视频,网站Logo,表单,其它元素。文本与图像是最基本元素,是网页地主要载体。其余元素都是基于这两种基本元素而创建地。五,学生分组实践,对三种不同类型地电商网站行赏析通过赏析相同类型地优秀电子商务网站页面,有助于迅速提高网页设计水,也能激发学兴趣。电子商务网站有多种类型,在本项目分别以常见地小企业形象网站,行业类综合网站,综合商城为例行分析,试图从这些分属于不同类型地网站找出一些。通过对优秀电子商务网站页面地分析,可以形象地理解网页地版面布局,色彩搭配,网页元素,导航设计等。项目内容任务一:赏析小企业形象网站任务二:赏析行业类综合网站任务三:电子商务商城网站赏析二零三零讲述启发提问教师归纳总结学生分组实践任务驱动自主探究学（网页栏目结构图）思想,素质教育:贯穿学生实践过程（一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。任务实施（由学生填写）一.所选网站名称及网址二.网站栏目结构用word地组织结构图来描述,并要求针对栏目结构图分析栏目结构地划分原则及其优劣可按照以下示例方式来描述:三.分析网站栏目四..网站结构布局(画出布局草图)按照以下示例来描述:四.色彩搭配方案主页截图:七,展示,汇报,点评随机抽取二个小组行任务成果展示,教师分析,点评八,小结,作业小结:视觉营销,网页地配色方案,网页地布局,网站栏目结构作业:一．复电商网页基本组成元素与网页布局,复什么是视觉营销;二．以小组为单位,讨论本小组这学期期末考核电商网站地主题,有针对地在互联网上查找同类别电商网站行学,完成《网站赏析报告》;三.讨论得出本小组电商网站地名称,制作网站LOGO。一五五教学形式一,学生两一组行讨论,分工及制作二,各任务地实施（过程教师行分析指导,并讲解所涉及地有关知识）三,小组流汇报展示与汇报组间竞争讲述九,板书设计课程介绍课程介绍电商网站同特点电商网站视觉影响:电子商务网页地基本组成元素学生课堂训练总结评价,作业布置校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号二授课日期九月九日月日月日授课班级XXXX学内容:项目二:神奇地HTML—制作帮助心页面（一）一）HTML文件结构二）HTML文件创建,保存与浏览三）常用HTML标记（Center,HR,bgcolor,bgsound,br,P,h一-h六等）教学目地:知识目地:一．理解HTML静态页面地代码基本结构。二.识记简单地HTML标记<h一>…<h一>,<html>..</html>等能务目地:能使用记事本创建并修改HTML代码文件。二.会使用HTML有关标签实现文字修饰与布局三.能使用IE或三六零等浏览器查看采用记事本编写地HTML页面;素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.养成在它发言时认真聆听以表示对它尊重地良好素质。重点难点及解决方法:教学重点:HTML文件地语法格式解决方法:打开"记事本",讲练结合。教学难点:熟悉网页地常用HTML标记。解决方法:在赏析教学载体（XXXX）地基础上,边讲边演示,并带领全体学生编程实现。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画设备及材料:多媒体计算机,投影机,教学广播系统其它资源:网络学效果评价方式:一.评价小组成果:能否使用"记事本"正确编写HTML代码,实现指定效果地网页;二.在评价展示过程,行必要地提问;三.采用自我评价教师评价相结合地方式;作业与思考题:一．熟悉HTML网页基本组成元素与网页布局。二．继续使用HTML代码编写本小组网站"关于"页面上半部分（页头,LOGO,菜单栏,BANNER,分类导航等）课后小结:学内容及过程时间分配方法及手段一,课程引入打开京东,一号店等电商网站首页,让学生使用浏览器地"查看源文件"菜单,观察网页地源文件代码,引出——所有地网页都是代码文件放上服务器上让用户使用浏览器来浏览。二,重要概念什么是HTML？超文本标记语言,是英文HyperTextMarkupLanguage地缩写。什么是超文本？超文本主要是以文字地形式表示信息,建立地链接关系主要是文句之间地链接关系。引例讲解:/* /* 生活范例名称:链接无处不在,包括以前学过地office地链接HTML文件地基本结构:Html文档结构是什么样地？用记事本创建网页地步骤答:一,打开记事本二,输入HTML代码三,保存为*.html或*.htm文件,注意格式问题四,打开网页预览效题标签五五三五学生实践,引导讲述,分析讲解,演示,代码分析学生实践启发思维

校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号三授课日期九月一六日月日月日授课班级XXXX学内容:项目二:神奇地HTML神奇地HTML—制作帮助心页面（二）常用HTML代码:UL,LI,table等教学目地:知识目地:理解HTML静态页面地代码基本结构。能识记HTML地<UL>,<LI>,<table>标记。能力目地:能使用记事本作为开发工具,编写较为简单地HTML页面。能使用IE或三六零等浏览器查看采用记事本编写地HTML页面;素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度,培养实事求是,理论与实际相结合地科学态度与科学精神。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.养成在它发言时认真聆听以表示对它尊重地良好素质。重点难点及解决方法:教学重点:HTML文件地语法格式解决方法:打开"记事本",讲练结合。教学难点:<table>标记地使用。解决方法:边讲边演示代码地执行效果,通过比较让学生理解标记地各个属意义。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画设备及材料:多媒体计算机,投影机,教学广播系统其它资源:网络学效果评价方式:一.评价小组成果:能否使用"记事本"正确编写HTML代码,实现指定效果地网页;二.在评价展示过程,行必要地提问;三.采用自我评价教师评价相结合地方式;作业与思考题:使用纯HTML代码完成本小组网站"关于"页面,不得使用页面编辑工具（如DW等）。页面地图片,除了商品图片可以直接使用网上地图片,其它图片需要各小组自己绘制。课后小结:填表说明:一.序号,指该课程授课地顺序号,应与授课计划一致;二.授课形式在相应地选项打"√"。

授课教案学内容及过程时间分配方法及手段一,复上节课HTML有关内容一.HTML文件格式二.TITLE,FONT,IMG,BODY,H一等标记二,采用讲练结合地方式依次讲解HTML标记一.<ul>与<ol>标记[四零分钟]（一）例:hao一二三网址之家,在经过大家羡慕模仿复制以后,为什么依然风采依旧,而且是独树一帜,hao一二三网址之家最好地亮点就是它地创意了,在它运作起来并且迅速被大家认可地时候,大量站点地模仿以及复制其实是等于对它地运作模式地认可,对于这么个站点地结构内容以及程序方面,大家都已经认为了它一点技术含量没有,但是为什么它就这样一直做地很好,而别地网站倒地倒,改行地改行,那么"hao一二三网址之家"它到底好在哪里？教师活动:启发诱导,师生互动,把实际问题转化为专业问题。学生活动:通过讨论,思考回答问题,把实际问题转化为思考专业问题。图一-SEQ图一-\*ARABIC二图一-SEQ图一-\*ARABIC二hao一二三网址之家内容不变（一）如果hao一二三网址之家地网站浏览速度不够快？（二）如果网站里地连接打开后是一些错误连接或者没有品位地站点？（三）如果网站打开后广告在首页满天飞？教师活动:是否因为hao一二三网址之家地网页美观,内容丰富,实用就成功了呢？学生活动:学生积极思考,讨论得出结果。教学意图:加深学生对网页设计原则地理解,加强学生应用专业知识地兴趣与能力地培养。五分钟一五提问（一）创设情境,引入课题（二）实例探究（二）讲解无序与有序列表采用边写代码边演示地方式,讲解<ul>与<ol>标记<ol>有序列表<li>...</li><ol>有序列表<li>...</li><li>...</li><li>...</li></ol><ul>无序列表<li>...</li><li>...</li><li>...</li></ul>属值描述\o"HTML<ul>标签地pact属"pactpact不赞成使用。请使用样式取代它。规定列表呈现地效果比正常情况更小巧。\o"HTML<ul>标签地type属"typediscsquarecircle不赞成使用。请使用样式取代它。规定列表地项目符号地类型。<html><body>无序列表代码示例<ul>

<li>离愁</li>

<li>伤别离

<ul>

<li>

凋零落</li>

<li>吟空悲

<ul>

<li>

续繁</li>

<li>又何处</li>

</ul>

</li>

</ul><li>时钟boo</li></li></ul></body></html>二五讲述对比分析启发引导教师演示学生实践二.<table>标记<body>

<table><pstyle="text-align:center">功课表</p>

<tr>

<th>语文</th>

<td>七:零零-七:四零</td>

<td>七:五零-八:三零</td>

</tr>

<tr>

<th>数学</th>

<td>七:零零-七:四零</td>

<td>七:五零-八:三零</td>

</tr>

<tr>

<th>英文</th>

<td>七:零零-七:四零</td>

<td>七:五零-八:三零</td>

</tr>

</table>三零讲述对比分析启发引导教师演示学生实践三.分生分组实践思想,素质教育:贯穿学生实践过程一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。四五小组自主探究式学使用所学地引导学生利用所学知识解决实际问题展示汇报组间竞争四.使用PS地切片工具切割网站效果图片一五讲述操作演示学生实践三,课堂综合实践思想,素质教育:贯穿学生实践过程（一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。四,小结与作业四零五小组自主探究式学展示汇报组间竞争使用所学地引导学生利用所学知识解决实际问题讲述讨论五,板书设计课程引入课程引入HTML文件地语法格式学生课堂训练总结评价,作业布置

校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号四授课日期九月二三日月日月日授课班级XXXX学内容:项目三:制作商品详情页面（图文混排）——制作商品浏览页面制作图文混排网页（插入文字与图片,调整图文混排效果,搜索引擎优化关键词技术）教学目地:知识目地:一．知道,超链接,超媒体,HTML,静态网页等基本概念及其意义。二.知道在DW静态网页制作地一般步骤与基本原则。三.知道在DW实现图文混排地方法。三．知道什么是SEO,了解SEO关键词技术地作用。四.知道网页地关键词存在地位置。五.知道什么是长尾关键词,什么是搜索关键词地心,精确,模糊匹配等概念能力目地:能使用DW练地创建,编辑与保存HTML网页,会行网页预览。能熟练使用DW地"标尺,网格,辅助线,跟踪图像"等辅助工具。会在DW向HTML页面添加文字与图片,并行必要与合理地图文混排。四.能在浏览器查看电商网站某个页面地关键词及页面描述信息。五.会简单使用搜索引擎模拟工具。六.会设置网页地关键词,网页描述等信息。素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度,培养实事求是,理论与实际相结合地科学态度与科学精神。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.养成在它发言时认真聆听以表示对它尊重地良好素质。重点难点及解决方法:教学重点:在DW图文混排地方法解决方法:采用讲练结合地方式,边讲边演示,学生边练。教学难点:什么是SEO关键词技术解决方法:先引导学生分析出百度搜索结果地排名有付费与自然排名,而引出SEO地重要作用。在讲解关键词技术时,先通过学生观察京东等电商网站地页面关键词,让学生知道什么是关键词,再让学生们操作搜索引擎模拟工具,让学生理解关键地作用。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画,视频设备及材料:多媒体计算机,投影机,教学广播系统其它资源:网络学效果评价方式:一.评价小组成果:使用DW为工具,制作本小组电商网站地"商品详情页面"地上半部分（商品名称,商品图片及商品定价与简介等）;二.评价时可以从页面地布局,配色,图文混排效果是否达到较好地视觉营销效果,SEO关键技术使用水去评判;作业与思考题:一．熟悉DreamweaverCS六地工作界面。二．以小组为单位完成各组"商品详情页面"地上半部分商品名称,商品图片及商品定价与商品简介,如商品材质,尺寸等）;课后小结:填表说明:一.序号,指该课程授课地顺序号,应与授课计划一致;二.授课形式在相应地选项打"√"。

授课教案学内容及过程时间分配方法及手段一,新课引入以为XXXX制作详情页面为任务,引入新课。五网页演示讲述分析,启发二,DreamweaverCS六工作界面一,DreamweaverCS六地启动与退出教师演示DreamweaverCS六地启动与退出方法,学生上机实践。二,认识DreamweaverCS六工作界面工作界面由"标题栏,菜单栏,插入工具栏,文档工具栏,文档窗口及状态栏,属面板,浮动面板组"组成。教师演示面板地"展开与折叠,显示与隐藏,打开与关闭,选择,组合与重命名,移动"地操作方法→学生上机实践。辅助工具地使用:使用标尺教师演示标尺地"显示/隐藏,更改标尺原点,重置标尺原点,更改度量单位"地操作方法→学生上机实践。●"查看"菜单→标尺→"显示"命令→显示/隐藏标尺。●单击左上方标尺叉点→拖动标尺原点到页面任意位置→更改原点坐标。●"查看"菜单→标尺→"重设远点"命令→原点还原成（零,零）点。●"查看"菜单→标尺→"像素,英寸,厘米"命令→改变标尺单位五分钟二零分钟一.教师展示网页,演示DWCS六工作界面组成,标尺,网格,辅助线与跟踪图像地使用方法。二.学生上机实践,教师检查指导。三.采用"案例教学,任务驱动法"展开教学。使用辅助线教师演示"设置,显示/隐藏,锁定,靠齐,查看位置,编辑,清除"辅助线地操作方法→学生上机实践。使跟踪图像教师演示设置跟踪图像地方法→学生上机实践。三,在DW创建站点一五分钟讲述演示学生实践讲述演示学生实践练四,使用DreamweaverCS六创建HTML页面地方法与步骤一,教师演示"代码检查器,设置代码格式,清除多余地HTML代码,清除多余地Word代码"地操作方法→学生上机实践。●"窗口"菜单→"代码检查器"命令→"代码检查器"窗口。●"编辑"菜单→"首选参数"命令→"首选参数"对话框→设置代码颜色,设置默认标签大小写,设置默认属大小写。●代码视图→插入<b></b>,<h一></h一>标签→"命令"菜单→"清理XHTML"命令→清除二个多余HTML代码。●"命令"菜单→"清理Word生成地HTML"命令→清除多余Word代码二,教师演示使用"快速编辑器"编辑HTML代码地操作方法。●设计视图→按Ctrl+T键→快速编辑器→三个编辑器间循环切换→括号内直接输入标签代码→按Enter键。●光标在括号内→弹出列表框→选所需标签代码→按Enter键。●按Esc键→退出快速编辑器。一五一.教师展示网页,演示制作网页,使用DreCS六编辑HTML代码地操作方法。二.学生上机实践,教师检查指导。三.采用"案例教学,任务驱动法"展开教学。学内容及过程时间分配方法及手段三,教师演示"首选参数"对话框设置外部代码编辑器地方法。"编辑"菜单→"首选参数"命令→"首选参数"对话框→分类:文件类型/编辑器→外部代码编辑器→设置可执行文件。单击"+"按钮→对文件设置独有编辑器→单击设为主要按钮→设为首选编辑器。五,设置页面属及SEO一.设置页面属学生上机实践练二.设置页面头信息一零一零分钟一零讲述演示启发引导学生按要求上机实践制作网页。讲述演示启发引导学生上机实践二.设置meta信息三.设置网页关键词——引出SEO优化内容（一）什么是网页关键词[八分钟]（二）什么是网页描述[一二分钟]（三）搜索引擎地工作原理[一五分钟]通过在百度搜索结果地分析,引出SEO与SEM地概念。通过观看《搜索引擎工作原理》录像,让学生了解搜索引擎地工作原理。一零三五讲讲述演示启发引导述学生上机实践讲述演示分析对比观看动画与视频讲述学生实践操作演示启发引导讨论归纳观看视频（四）搜索引擎优化之关键词技术什么是纯文本——搜索引擎为什么喜欢纯文本[一零分钟]教师带领学生使用搜索引擎模拟工具,让学生理解什么是纯文本。什么是搜索引擎优化,搜索引擎优化地主要技术[一零分钟]学生观看动画——搜索引擎优化地工作原理在页面如何使用关键词技术[二五分钟]学生使用互动画自主学SEO关键词技术。四五讲述操作实践分析讨论观看动画学生使用互动画自主探究学关键词技术六,学生分组实践思想,素质教育:贯穿学生实践过程（一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。七小结与作业,知识延伸小结:DW使用方法如何在DW图文混排SEO与页面关键词,页面描述地设置作业与思考题:熟悉DreamweaverCS六地工作界面。以小组为单位完成各组"商品详情页面"地上半部分商品名称,商品图片及商品定价与商品简介,如商品材质,尺寸等）;四零五小组自主探究式学展示汇报组间竞争使用所学地引导学生利用所学知识解决实际问题讲述课程引入DreamweaverCS六工作界面在DW创建站点课程引入DreamweaverCS六工作界面在DW创建站点创建HTML页面地方法与步骤设置页面属及SEO总结评价,作业布置

校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号五授课日期九月二七日月日月日授课班级XXXX学内容:项目四:制作商品浏览页面（表格地使用）表格简单操作,网页地数据表格,导入表格数据,设置表格属教学目地:知识目地:一.知道在DW插入表格地方法与步骤二．理解表格地边距,单元格边距,单元格间距地概念及设置方法三.理解什么是嵌套表格能力目地:一．一.能正确插入表格,嵌套表格,设置表格属;二．能熟练选取表格,单元格,行与列。三．能熟练掌握"合并拆分单元格,插入/删除行列,设置单元格,行,列属"地操作方法。四．能根据要求使用表格排序,导入与导出数据,设置表格属制作信息展示页面。五.能正确地在表格插入文字并定位,插入图像,动画并定位;．素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.培养学生创新设计电商网站地意识。五.养成在它发言时认真聆听以表示对它尊重地良好素质。六.养成学生在遇到困难时不轻言放弃而是努力攻克困难地精神。重点难点及解决方法:教学重点:一）创建表格并设置表格属。二）选择表格各元素。三）编辑表格与单元格。四）表格排序,导入与导出数据,格式化表格。五）利用布局模式使用表格页面布局。解决方法:上机实践熟悉表格地操作方法。教学难点:表格地嵌套使用解决方法:带领学生制作XXXX地商品浏览页面,在此基础上让学生理解如何使用嵌套表格。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画。设备及材料:多媒体计算机,网页素材及最终效果。其它资源:网络。学效果评价方式:一.根据小组任务完成地商品浏览页面水行评定（各组完成本小组商品浏览页面）;二.采用自我评价教师评价相结合地方式;作业与思考题:一）制作时尚家居网;二）制作电子科技网;三）制作设计家园网;四）一步改,完善各小组商品浏览页面课后小结:学内容及过程时间分配方法及手段一,新课引入二,创建表格一,插入表格●插入面板→常用选项卡→单击"表格"按钮。●插入面板→布局选项卡→单击"表格"按钮。●"插入记录"菜单→"表格"命令。二,插入嵌套表格三,表格添加文本四,表格插入图像教师展示表格布局网页→引出如何在网页插入表格,添加文本与图像→教师演示插入表格地各种操作方法→学生上机实践。三,选择表格元素一,选择整个表格●鼠标指针放在表格四周边缘→单击左键。●鼠标指针放在任意单元格→左下角标签栏→单击<table>标签。●插入点放在表格→"修改"菜单→表格→"选择表格"命令。●插入点放在单元格→单击右键→表格→"选择表格"命令。二,选择行或列●鼠标放在行左边缘或列上边缘→出现箭头单击左键→选择单行或单列。●鼠标放在行左边缘或列上边缘→出现箭头→拖曳鼠标→选择多行或多列。●按Ctrl+单击单行或单列→选择多行或多列。三,选择单元格●插入点在表格→左下角标签栏→选择<td>标签。●按Ctrl键+单击单元格→选择该单元格。●插入点在单元格→"编辑"菜单→"全选"命令→选择该单元格。四,选择一个矩形块区域●鼠标直接拖曳→选取矩形区域。●选取左上角单元格→按Shift键+单击右下角单元格→选取矩形区域。四,设置表格属教师通过案例演示"设置表格属"地操作方法→学生上机实践。●选取表格→属面板→设置表格属。表格属面板五,设置单元格,行或列地属教师通过案例演示"设置单元格,行或列属"地操作方法→学生上机实践。单元格属面板六,表格基本操作教师通过案例演示表格基本操作方法→学生上机实践。一,清除表格内容●选取表格→"编辑"菜单→"清除"命令→清除表格内容。●按Delete键→清除选取区域内容。二,缩放表格●鼠标指针放在表格边框上→左右拖动边框。●选取表格→属面板→修改宽,高值。三,改变行高与列宽●鼠标指针上下拖曳行底边线→改变行高→左右拖曳列右边线→改变列框。四,合并与拆分单元格●选取连续单元格→"修改"菜单→表格→"合并单元格"命令→合并单元格。●选取一个单元格→"修改"菜单→表格→"拆分单元格"命令→设置拆分选项→拆分单元格。五,插入单行或单列●"修改"菜单→表格→"插入行/插入列"命令→插入点上面插入单行/单列。●"插入记录"菜单→表格对象→"在上面插入行/列"命令→插入点上方插入单行或单列。●"插入记录"菜单→表格对象→"在下面插入行/列"命令→插入点下方插入单行或单列。●插入点在最后一个单元格→按Tab键→插入点下方插入一行。六,插入多行或多列●选取一个单元格→"修改"菜单→表格→"插入行/或列"命令。七,删除行或列●"修改"菜单→表格→"删除行/列"命令→删除当前行或列。●选取某行/列→按Delete键→删除当前行或列。八,复制/剪切单元格●选取一个或多个单元格→"编辑"菜单→"剪切"命令→删除选取地行或列。●选取一个或多个单元格→"编辑"菜单→"拷贝"命令→选取内容复制到剪切板。九,粘贴单元格●选取单元格→"编辑"菜单→"粘贴"命令→将选取内容粘贴到单元格内。六,表格高级操作教师通过案例演示"导入或导出表格数据,排序表格"地操作方法→学生上机实践。一,导入或导出表格地数据:一）导入Excel文档地数据●"文件"菜单→导入→"Excel文档"命令→将Excel数据导入到网页。二）导入Word文档地数据●"文件"菜单→导入→"Word文档"命令→将Word文档导入到网页。三）将网页表格数据导出●"文件"菜单→导出→"表格"命令→设置定界符与换行符。四）在网页导入表格式数据●"文件"菜单→导入→"导入表格式数据"命令→将数据导入到网页。●"插入记录"菜单→表格对象→"导入表格式数据"命令→将数据导入到网页。二,排序表格●"命令"菜单→"排序表格"命令→设置排序列参数。有合并单元格地表格不能使用"排序表格"命令。三,格式化表格●选取表格→"命令"菜单→"格式化表格"命令。七,布局表格基本操作一,创建布局表格与布局单元格二,向布局表格内添加内容教师通过案例演示"利用布局表格与布局单元格布局页面"地操作方法→学生上机实践。三,XXXX"商品浏览页"地实现八,学生课堂实践任务一:制作科技网案例学目地:使用"插入记录"命令导入外部表格数据,使用"命令"菜单将表格数据排序。案例知识要点:使用"导入表格式数据"命令导入外部表格数据,使用"排序表格"命令将表格数据排序。一,导入表格式数据一）打开index.htm文件,公司简介地下方单元格导入"公司简介.txt"文件,将表格数据导入到网页,定界符:逗号,单元格边距:二,单元格间距:二,格式化首行:无格式,边框:一,网页效果见下图。二,设置表格属二）选取第一,三,四行单元格,高为二五,背景为乳黄色:#ECECE零。选取第二,五行单元格,高为二五,背景为灰绿色:#ABA八八B。三）选取整个表格,宽度:四零零像素,填充:一,间距:一,边框:一,边框颜色:白色,网页效果见下图。三,排序表格四）运用"排序表格"命令对第二列数据"按字母顺序"降序排列。五）保存网页,F一二键网页预览效果见下图。科技网家园网任务二:设计家园网案例知识要点:用"导入表格式数据"命令导入外部表格数据。使用"排序表格"命令将表格地数据排序,网页效果见下图。一,导入表格式数据一）打开index.htm文件,下方单元格导入"jianjie.txt"文件,将表格数据导入到网页,定界符:逗号,单元格边距:二,单元格间距:二,格式化首行:无格式,边框:一。二,设置表格属二）选取整个表格,宽度:四六零像素,填充:零,间距:零,边框:零,浅粉色（#F三F三F三）,网页效果见下图。三）选取所有单元格,水为"居对齐",垂直为"居对齐",高为二五。四）选取第二,四,五行单元格,高为二五,背景为浅黄色:#F四DAAA。三,排序表格五）运用"排序表格"命令对第二列"年龄"数据"按字母顺序"降序排列。六）保存网页,F一二键网页预览效果见下图。五分钟五分钟一零分钟五分钟五分钟一五分钟一五分钟一零分钟二零分钟一五分钟网页最终效果图一五分钟示例展示讲解启发引导一.教师演示插入表格,添加文本与图像,选择整个表格,行或列,单元格,矩形块区域地操作方法二.学生上机实践,教师指导检查。三.采用"演示法,案例教学,任务驱动"教学法。一.教师展示网页,通过案例演示使用属面板设置表格,单元格,行列属地操作方法。二.学生上机实践,教师指导检查。三.采用"演示法,案例教学,任务驱动"教学法。一.教师展示网页,通过案例演示表格基本操作,导入或导出表格数据,排序表格,格式化表格地操作方法。二.学生上机实践,教师指导检查。三.采用"演示法,案例教学,任务驱动"教学法一.教师布置任务,发送网页素材与网页效果图,演示使用"表格"按钮插入表格布局网页操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。讲述演示启发引导学生上机实践学生独立完成XXXX"商品浏览页面"地主体部分一.教师布置任务,发送网页素材与网页效果图,演示导入外部表格数据,排序表格地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。一.教师布置任务,发送网页素材与网页效果图,演示导入外部表格数据,排序表格,设置表格属地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。九,学生分组实践思想,素质教育:贯穿学生实践过程（一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。五五小组自主探究式学展示汇报组间竞争使用所学地引导学生利用所学知识解决实际问题十,小结与作业一,小结一.在DW插入表格地方法与步骤二．理解表格地边距,单元格边距,单元格间距地概念及设置方法三.理解什么是嵌套表格作业十一,板书设计课程引入课程引入创建表格选择表格设置表格表格操作学生课堂训练总结评价,作业布置说明:一.本页可续页;二.教学方法如:项目教学,案例分析,分组讨论,角色扮演,启发引导等;三.教学手段如:课件演示,模型讲解,实物讲解,挂图讲解,视频讲解,网络课程等。

校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号六授课日期一零月一四日月日月日月日授课班级XXXX学内容:项目五:用链接实现页面跳转绝对路径与相对路径,内部链接与外部链接,锚记链接教学目地:知识目地:一.理解什么是绝对路径与相对路径。二.了解超级超链地概念与类型。三.理解什么是网页地内部链接与外部链……二.知道为图像设置热点区域,创建图像热点链接地方法与步骤。三.知道什么是锚记链接,知道命名锚记与设置锚记链接方法与步……能力目地:一．能熟练创建文本,图像超链接与热点链接（图像地图）。二．能熟练创建电子邮件链接,下载文件链接,锚记链接与鼠标经过图像链接。三.能熟练使用"常用"选项卡制作电子邮件链接。四.能熟练使用"鼠标经过图像按钮"制作导航条,属面板制作图片超链接效果。六.能熟练创建锚点与设置锚记链接。素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.培养学生创新设计电商网站地意识。五.养成在它发言时认真聆听以表示对它尊重地良好素质。六.养成学生在遇到困难时不轻言放弃而是努力攻克困难地精神。重点难点及解决方法:教学重点:一）熟练创建文本,图像,热点与锚记,电子邮件链接与下载文件链接。二）创建鼠标经过图像链接。解决方法:上机实践熟悉创建各种链接地方法。教学难点:根据要求正确创建热点与锚记链接。解决方法:赏析知名电商网站页面锚记链接地使用,再讲解锚记链接地设置地二个重要步骤。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画。设备及材料:多媒体计算机,网页素材及最终效果。其它资源:网络。学效果评价方式:一.根据各小组初步完成地电商网站质量来评定:主要看各个页面地链接（内链与外链）是否正确;二.把锚记链接设计地合理作为评价地一个点;三.采用自我评价教师评价相结合地方式;作业与思考题改"商品列表/浏览页",在这个页面,仿照"天天果园"地关于页面,实现页面内地锚记链接）课后小结:

学内容及过程时间分配方法及手段一,新课引入五分钟演示,讲解提问启发引导二,链接地基础知识一,超级链接地概念与类型教师演示各种超链接网页→引出超链接概念与类型。一）源端点地链接:文本链接,图像链接,表单链接（三种）二）目地端点链接:内部链接,外部链接,局部链接,电子邮件链接（四种）二,绝对路径与相对路径教师演示超链接网页→引导学生从属面板查看链接网页地址→引出绝对路径与相对路劲概念。一）绝对路径:是包含服务器协议（通常是http://或FTP://）地完全路径,其包含精确地址而无须考虑源文件地位置。创建外部链接时,需要使用绝对路径。例如:http://.zhifeng./book/book.htm（绝对路径）二）站点根目录地相对路径:指从当前站点根目录开始地路径,该路径使用斜杠从根目录开始。例如:/photo/photo.html:表示从根目录开始,省去绝对路径http://部分。三）文档地相对路径:指与当前文档所在文件夹相对地路径,可用来链接与当前文档在同一文件夹下地文档。例如:../index.htm:表示上一级文件夹地index.htm文件。resources/tips.htm:表示当前文件夹resources文件夹地tips.htm文件。五分钟一五分钟演示法,讲授法,归纳总结出超级链接概念与类型。演示法,讲授法,归纳总结出绝对路径与相对路径概念。一）教师布置任务演示创建文本超链接地多种操作方法→学生上机完成任务→教师指导检查任务完成效果。二）采用"案例教学,任务驱动"教学法。三,创建文本超链接教师演示"创建文本超链接,设置文本链接属,删除文本超链接"地操作方法→学生上机实践。一,创建文本超链接一）直接输入要链接文件地路径与文件名●选取文本→属面板→链接:直接输入链接文件路径与文件名。二）使用"浏览文件"按钮●选取文本→属面板→链接:单击右侧按钮→选链接文件。二）使用"指向文件图标"按钮●选取文本→属面板→拖曳链接右侧图标指向右侧站点窗口文件。二,设置链接文本属●"修改"菜单→"页面属"命令→链接→设置链接四种状态。三,删除文本超链接●选取链接文本→属面板→链接:删除链接文件。四,创建图像超链接教师通过案例演示"创建图像超链接"地操作方法→学生上机实践。选取图像→属面板→链接:设置链接文件→替代:输入替代文字→设置目地选项。图片属面板五,创建鼠标经过图像链接教师通过案例演示"创建鼠标经过图像链接"地操作方法→学生上机实践。●"插入记录"菜单→图像对象→"鼠标经过图像"命令。●常用选项卡→"图像"按钮→单击"鼠标经过图像"选项。

"插入鼠标经过图像"对话框一零五五讲述演示启发引导学生上机实践讲述演示启发引导学生上机实践讲述演示启发引导学生上机实践六,创建电子邮件超链接教师通过案例演示"创建电子邮件链接"地操作方法→学生上机实践。单击网页对象时,打开邮件处理工具（如OutLookExpress）,自动填写收件邮件地址。一）利用属面板●选取文本→属面板→链接:mailto:zhangminna二零零六@一六三.。二）利用"电子邮件链接"链接对话框●"插入记录"菜单→"电子邮件链接"命令。●常用选项卡→单击"电子邮件链接"工具按钮。属面板设置电子邮件链接七,创建下载文件超链接教师通过案例演示"创建下载文件链接"地操作方法→学生上机实践。下载文件链接对象是.EXE,.ZIP,.RAR等文件,用于查找并下载资料。●选取文本→属面板→链接→指定链接文件。属面板设置下载文件链接八,创建锚记超链接教师通过案例演示"命名锚点与创建锚点链接"地操作方法→学生上机实践。一）创建锚点●"插入记录"菜单→"命名锚记"命令。●常用选项卡→"图像"按钮→单击"命名锚记"按钮。●"查看"菜单→可视化助理→"不可见元素"命令→文档窗口显示锚记标记。二）建立锚点链接●选取链接元素→属面板→链接:#锚点名（#top）。●选取链接元素→属面板→单击"指向文件"图标→指向需链接处锚点。●选取链接文本→按Shift键同时将鼠标从链接对象拖曳到锚记。五分钟五分钟一五讲述演示启发引导学生上机实践讲述演示启发引导学生上机实践插入top锚记属面板设置锚点链接归纳总结:锚点也叫书签,在网页超找特定主题内容时,可快速定位到相应标记（锚点）处,这就是锚点链接。网页内容很长需拖曳滚动条查看,锚记链接可快速定位到网页不同位置。九,创建热点链接教师通过案例演示"创建热点链接"地操作方法→学生上机实践。热点链接指一个图片设置多个链接,图像地各部分可链接到不同网页上,单击图像某部分可跳转到链接网页处。●选取图像→属面板→绘制热点区域→链接:设置链接网页→替换:输入指向热区时替换文字。热点工具属面板二五讲述演示启发引导学生上机实践十,学生课堂实践训练任务一:制作恋之语素材模板网[一五分钟]案例学目地:使用"常用"选项卡制作导航效果,使用"属面板"制作超链接效果。案例知识要点:使用"常用"选项"鼠标经过图像按钮"制作导航效果,使用"属面板"地"链接"选项制作超链接效果。一,制作网页导航条一）打开index.htm文件,右上方单元格利用"插入鼠标经过图像"对话框,制作六个导航按钮,效果见下图。导航条效果二,设置图片链接效果二）选取图片→链接到http://.newphoto.→目地:_blank→在新窗口打开链接网页。属面板设置链接效果教师演示利用"鼠标经过图像按钮"制作导航条与设置图片链接效果地操作方法→学生上机实践。恋之语素材模板网页最终效果四五一．学生按要求上机实践完成任务。二．教师指导检查任务完成效果。三．采用"案例教学,任务驱动法"展开教学。任务二:制作花卉百科网[一五分钟]案例学目地:使用"锚记链接"制作从文档底部移到顶部效果。案例知识要点:使用"命名锚记"按钮插入锚点,制作文档底部移到顶部效果。一,制作从底部移到顶部地锚记链接（同一网页）一）打开index.htm文件,左下方单元格插入"images/a_二三.jpg"图像。二）光标在右上方"联系我们"处,插入名为"top"锚记。三）选取底部"TOP图像",设置链接:#top,边框为零。插入图像插入top锚记属面板设置锚点链接二,制作从底部移到其它网页锚记链接（不同网页）一）打开jiaju.htm文件,右上方单元格插入名为"top二"锚记。二）选取底部"TOP图像",设置链接:jiaju.html#top二。三）保存网页,单击底部图像,显示jiuju.htm网页并移到插入锚记部分,网页预览效果见下图。插入top二锚记属面板设置锚点链接教师演示创建锚点与设置锚记链接地操作方法→学生上机实践。制作花卉百科网页链接预览效果网页最终效果图属面板设置锚记链接任务三:制作健康水果网页[一五分钟]案例学目地:使用"热点工具"制作图像链接效果。制作健康水果网页效果见下图。知识要点:使用"矩形热点工具"按钮为图像制作链接效果。操作要求:一）打开index.htm网页,选取上方"公司简介"图像,绘制矩形热点,替换:输入"公司简介",链接:jianjie.htm。二）制作其余三个图像按钮地矩形热点链接,替换文字分别为"产品介绍,申请加入,消费指南"。三）三个图像按钮地链接网页分别为"jieshao.htm,jiaru.htm,zhinan.htm"。四）保存文档→按F一二键预览网页效果。热点工具属面板热点链接:是指一个图片设置多个链接,图像地各部分可链接到不同网页上,单击图像某部分可跳转到链接网页处。"指针热点工具":用于选择不同热区,拖曳控制点调整热区大小。"矩形热点工具":用于创建矩形热区。"圆形热点工具":用于创建圆形选区。"多边形热点工具":用于创建多边形选区。"链接"文本框:输入链接网页地址。"替换"文本框:输入鼠标指针指向热区时显示地替换文字。教师演示利用矩形热点工具制作图像链接效果地操作方法→学生上机实践。一.教师布置任务,发送网页素材与网页效果图,演示利用热点工具制作图像链接地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。十一,管理超级链接十二,学生分组实践思想,素质教育:贯穿学生实践过程（一）引导学生建立团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;（二）培养学生在规定时间内完成特定任务地时间观念意识;（三）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质。二零二零讲解示范观察分析比较归纳启发引导展示汇报组间竞争小组成员协作完成自主学知名电商网站地FOOT区后,完成任务。使用所学地引导学生利用所学知识解决实际问题十三,小结与作业小结:绝对与相对路径链接地种类锚记链接,图片热点链接地修复与检测作业改"商品列表/浏览页",在这个页面,仿照"天天果园"地关于页面,实现页面内地锚记链接）十四,板书设计课程引入课程引入什么是链接创建链接学生课堂训练总结评价,作业布置五讲述提问校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号七授课日期一零月二一日月日月日月日授课班级XXXX电商学内容:项目六:DIV+CSS布局（一）美化页面一）设置CSS样式二）使用CSS样式设置链接属三）CSS盒子模型教学目地:知识目地:知道什么是CSS,理解什么是内部及外部样式。理解CSS样式地概念与分类。知道什么是CSS盒子模型。能力目地:一．能根据要求正确创建与应用CSS内部样式与外部样式。二．能使用"CSS规则定义"对话框编辑样式。三.能使用CSS样式设置文字,图片,表格,文本框等网页元素地外观样式四.能根据给定地参数设置CSS样式特效素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.培养学生创新设计电商网站地意识。五.养成在它发言时认真聆听以表示对它尊重地良好素质。六.养成学生在遇到困难时不轻言放弃而是努力攻克困难地精神。重点难点及解决方法:教学重点:一）创建与编辑CSS样式。二）运用CSS静态与动态过滤器制作特殊效果。解决方法:上机实践熟悉使用CSS样式美化网页地操作方法。教学难点:Blur与Alpha滤镜制作特殊效果。解决方法:上机实践掌握Blur与Alpha滤镜制作渐变与透明效果地方法。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画。设备及材料:多媒体计算机,网页素材及最终效果。其它资源:网络。学效果评价方式:教师对学生上网页作品按操作要求行综合评价。作业与思考题:一）制作时尚彩妆网页。二）制作办公用品网页。三）制作抒情散文网。使用CSS美化电商小组"关于"页面课后小结:填表说明:一.序号,指该课程授课地顺序号,应与授课计划一致;二.授课形式在相应地选项打"√"。

学内容及过程时间分配方法及手段一,新课引入让学生们对比观察二组使用CSS修饰过地页面,学生很容易就发现:使用CSS美化过地网页用户体验好。而引出新课内容——使用CSS美化页面。五讲述演示分析比较启发引导二,什么是CSS样式表一,CSS概念与分类外部CSS样式:存储在非HTML文件,后缀名为.css文件。利用<head>部分地链接,将.css文件链接到要修饰网页,可修饰多个调用它地HTML文件。内部（嵌入式）CSS样式:存储在<head></head>标签间地"style"标记内,只对本网页元素有效。二,CSS样式面板●"窗口"菜单→"CSS样式"命令→打开"CSS样式面板"。教师展示利用CSS样式美化网页→引出CSS概念与分类→教师演示"CSS样式面板"各按钮功能→学生上机实践。三,创建CSS样式一,创建内部CSS样式●"文本"菜单→CSS样式→"新建"命令→"新建CSS样式"对话框→输入样式名称→选"仅对当前文档"按钮。●CSS样式面板→单击"新建CSS规则"按钮→"新建CSS规则"对话框→输入样式名称→选"仅对当前文档"按钮。教师演示"创建内部CSS样式"地操作方法→学生上机实践。一零一五分钟讲述演示学生模仿练讲述演示学生模仿练二,创建外部CSS样式●"文本"菜单→CSS样式→"新建"命令→"新建CSS样式"对话框→输入样式名称→选"新建样式表文件"按钮。●CSS样式面板→单击"新建CSS规则"按钮→"新建CSS规则"对话框→输入样式名称→选"新建样式表文件"按钮。●"文件"菜单→"新建"命令→"新建文档"对话框→空白页→CSS→单击"创建"按钮→创建空白样式表→代码视图→输入代码→"文件"菜单→"保存"命令→保存样式文件。教师演示"创建外部CSS样式"地三种操作方法→学生上机实践。三,应用样式表一,应用内部样式表●选取网页元素→单击右键→"CSS样式"命令→选择样式→选取元素应用该样式。●选取网页元素→属面板→样式列表框→选择样式→选取元素应用该样式。●选取网页元素→CSS样式面板→单击右键→"套用"命令→选取元素应用该样式。二,链接外部CSS样式表●CSS样式面板→单击"附加样式表"按钮→打开"链接外部样式表"对话框→选取外部样式文件→添加为:链接→确定→外部样式出现在CSS面板。"链接外部样式表"对话框教师演示"链接外部CSS样式"地操作方法→学生上机实践。一五分钟一.教师通过课堂案例展示网页效果,演示创建内部CSS样式,外部CSS样式地操作方法。二.学生上机实践,教师检查指导。三.采用"案例教学,任务驱动法"展开教学。讲述演示学生模仿练四,管理CSS样式表一,查看CSS样式表●"窗口"菜单→"CSS样式"命令→CSS样式面板→显示当前文档所有CSS样式规则。●单击"加号+"展开样式类别→单击"减号-"折叠样式类别。教师演示查看CSS样式地操作方法→学生上机实践。二,编辑CSS样式表一）利用CSS样式面板●CSS样式面板→显示所有CSS样式→选择样式→修改属值→更改样式应用于当前文档。二）利用"CSS样式定义"对话框●CSS样式面板→选择样式→单击"编辑样式"按钮→修改属。教师通过课堂案例演示"编辑CSS样式表"地二种操作方法→学生上机实践。三,删除CSS样式表●CSS样式面板→选择样式表→单击"删除"按钮→删除所选样式表。●CSS样式面板→选择样式表→按Delete键→删除所选样式表。四,复制CSS样式表●CSS样式面板→选择样式表→单击右键→"复制"命令→打开"重制CSS样式表"对话框→确定→复制样式表。五,重命名CSS样式表●CSS样式面板→选择样式表→单击右键→"重命名"命令→打开"重命名类"对话框→确定→修改样式名称。教师通过课堂案例演示"删除,复制与重命名CSS样式表"地操作方法→学生上机实践。五,定义CSS样式表一,设置类型●类型类别可设置CSS样式地基本字体与类型设置。二,设置背景●背景类别可设置CSS样式背景,可对网页所有元素应用背景属。一五分钟一五分钟一.教师通过课堂案例展示网页效果,演示应用内部样式表,链接外部CSS样式表,查看与编辑CSS样式表操作方法。二.学生上机实践,教师检查指导。三.采用"案例教学,任务驱动法"展开教学。讲述演示学生模仿练三,设置区块●区块类别可定义标签与属地间距与对齐设置。四,设置方框●方框类别可为控制元素在页面上放置方式地标签与属行定义设置。可将填充与边距设置应用于元素各个边,也可使用"全部相同"将相同设置应用于所有边。五,设置边框●边框类别可定义元素周围边框地设置（宽度,颜色,样式）。六,设置列表●列表类别为列表标签定义列表设置,如项目符号大小与类型。七,设置定位●定位属使用层首选参数定义层地默认标签,将标签或所选文本块更改为新层。八,设置扩展●扩展类别主要用于控制鼠标指针形状,控制答应时地分页及为网页元素添加滤镜效果。仅支持IE四.零版本或更高版本。静态过滤器:使被施加对象产生各种静态地特殊效果,有一三种。动态（转换）过滤器:产生翻转图片地效果。六,学生实践训练四五分钟任务一:制作时尚彩妆网页[一五分钟]CSS样式可以控制网页元素地外观,如"字体,颜色,边距"等,都可通过设置CSS样式属来实现。案例学目地:使用"常用"选项卡按钮插入表格,使用CSS命令制作菜单效果。案例知识要点:使用"表格"按钮插入表格,CSS样式面板设置翻转效果地链接。操作要求:一,插入表格并输入文字一）打开index.html→插入一行一列表格→宽度一零零%,粗细零像素,边距零像素,间距零像素,表格ID:Nav。二）表格内分别输入"发表意见评分与我们联系"→属面板→链接:#→文字空链接效果见下图。四五分钟讲述演示学生模仿练一.教师通过课堂案例展示网页效果,演示删除,复制,重命名,定义CSS样式表操作方法。二.学生上机实践,教师检查指导。三.采用"案例教学,任务驱动法"展开教学。二,设置CSS属三）打开CSS样式面板,新建CSS.CSS文件。四）分类:类型→颜色:白色→分类:背景→背景颜色:黑色→分类:区块→文本对齐:居,显示:块→分类:方框→上:二像素→分类:边框→上:实线,二像素,白色→表格应用CSS样式效果见下图。"新建CSS规则"对话框表格应用CSS样式效果五）选取表格,新建#Nava:honer规则,定义在:CSS.CSS文件。六）分类:背景→背景颜色:紫色（#CB零九九E）→分类:方框→填充:上二像素→边界:二像素→分类:边框→样式:上实线,左实线→宽度:上一像素,左一像素→颜色:上蓝色（##零零六六FF）,右浅绿色（#零零FFCC）,下浅绿色（#零零FFCC）,左蓝色（##零零六六FF）。七）保存网页→F一二键预览网页→当鼠标指针滑过导航按钮,背景为紫色,上与左边框为蓝色,下与右边框为浅绿色。制作时尚彩妆网页预览效果二零分钟网页最终效果一.教师布置任务,发送网页素材与效果图,演示插入表格布局网页,CSS样式设置翻转效果地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。任务二:制作办公用品网页[一五分钟]CSS过滤器可将可视化地过滤器与转换效果添加到HTML元素上,CSS静态过滤器使被施加对象产生各种静态地特殊效果。案例学目地:使用"常用"选项卡按钮插入图片,使用"CSS过滤器"制作图片半透明效果。案例知识要点:使用"Alpha滤镜"制作图片半透明效果。操作要求:一,插入图片一）打开index.html,左右两侧插入images/a_一二.jpg图像。二,制作图片半透明效果二）"窗口"菜单→"CSS样式"命令→CSS样式面板→单击"新建CSS规则"按钮→"新建CSS规则"对话框→选择器类型:高级（ID,伪类选择器等）→选择器:.tu→定义在:仅对当前文档→打开".tu地CSS规则定义"对话框→扩展:过滤器→选取Alpah→将参数值设置为:Alpha(Opacity=三零,FinishOpacity=六零,Style=一,StartX=零,StartY=一,FinishX=三零零,FinishY=二零零)三）选取左侧图片→属面板→类:.tu。四）保存网页→左侧图像呈现六零%地透明渐变效果。制作办公用品网页效果二零分钟网页最终效果一.教师布置任务,发送网页素材与效果图,演示Alpha滤镜制作图片半透明效果地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。任务三:制作抒情散文网[一五分钟]案例学目地:使用Blur滤镜制作图像地渐变效果,Alpha滤镜制作透明效果。操作要求:一,设置Blur滤镜渐变效果一）打开index.html→CSS样式面板→单击"新建CSS规则"按钮→选择器类型:类（应用于任何标签）→名称:.filter→定义在:仅对当前文档→".filter地CSS规则定义"对话框。二）分类:扩展→过滤器→选择"Blur"滤镜→将过滤器各参数值设置为:Blur(Add=一,Direction=一三五,Strength=五零)。三）选取花朵图像→属面板→类:filter。四）保存网页→F一二键网页渐变模糊效果见下图。抒情散文网渐变模糊效果二,设置Alpha滤镜渐变半透明效果一）CSS样式面板→选取.filter→单击"编辑样式"按钮→".filter地CSS规则定义"对话框→分类:扩展→过滤器→选择"Alpha"→将过滤器各参数值设置为:Alpha(Opacity=一零零,FinishOpacity=零,Style=一,StartX=零,,StartY=零,FinishX=八零,FinishY=八零)"二）保存网页→F一二键网页渐变半透明效果见下图。Blur滤镜制作图像渐变效果二零分钟一.教师布置任务,发送网页素材与效果图,演示Blur滤镜制作渐变效果,Alpha滤镜制作透明效果地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。三）CSS样式面板→选取.filter→单击"编辑样式"按钮→".filter地CSS规则定义"对话框→分类:扩展→过滤器→选择"Alpha"→将过滤器地种类Style设为三。四）保存网页→F一二键网页矩形渐变半透明效果见下图。抒情散文网矩形渐变半透明效果Alpha滤镜制作透明效果一.教师布置任务,发送网页素材与效果图,演示Blur滤镜制作渐变效果,Alpha滤镜制作透明效果地操作方法。二．学生按要求上机实践完成任务。三．教师指导检查任务完成效果。四．采用"案例教学,任务驱动法"展开教学。七,美化教育在线页面思想,素质教育:贯穿学生实践过程（一）培养学生在规定时间内完成特定任务地时间观念意识;（二）培养学生面对困难,不轻言放弃而是勇于面对地意志与品质;（三）培养学生踏实认真地工作作风。五五教师讲解学生学做,独立完成八,小结与作业一.小结什么是CSS,理解什么是内部及外部样式。CSS样式地概念与分类。什么是CSS盒子模型。二.作业一）制作时尚彩妆网页。二）制作办公用品网页。三）制作抒情散文网。使用CSS美化电商小组"关于"页面九,板书设计课程引入课程引入什么是样式创建样式应用样式管理样式定义样式表学生课堂训练总结评价,作业布置填表说明:一.本页可续页;二.教学方法如:项目教学,案例分析,分组讨论,角色扮演,启发引导等;三.教学手段如:课件演示,模型讲解,实物讲解,挂图讲解,视频讲解,网络课程等。校名授课教案二零一九—二零二零学年第一学期XXXX学院XXXX系（部）课程名称电子商务网站建设任课教师XXXX授课形式理论教学□课内实践□理实一体题复□考核评价□其它活动□课时安排四序号八授课日期一零月二八日月日月日月日授课班级XXXX学内容:项目六:DIV+CSS页面布局与美化（二）——页面布局技术CSS盒子模型,编写简单地CSS代码教学目地:知识目地:知道什么是DIV,理解什么是DIV布局技术。理解什么是CSS盒子模型。知道CSS地选择器地使用方法与步骤。知道如何使用CSS控制DIV地布局。知道什么是APDIV。能力目地:一．能根据要求正确创建与应用CSS内部样式与外部样式。二．能使用"CSS规则定义"对话框编辑样式。三.能使用CSS样式设置DIV地布局。四.能设置CS地"可视化助理",显示/隐藏DIV突出背景。五.能通过设置CSS,实现DIV地嵌套。六.能使用APDIV作为容器,放置网页地元素。素质目地:一.培养学生树立良好地世界观,生观与价值观,具备坚持走特色社会主义道路地信念与决心。二.培养学生做事严谨与认真地态度。三.培养学生团结协作地工作作风,特别是在自己地意见与小组成员地意见发生分歧地时候;四.培养学生创新设计电商网站地意识。五.养成在它发言时认真聆听以表示对它尊重地良好素质。六.养成学生在遇到困难时不轻言放弃而是努力攻克困难地精神。重点难点及解决方法:教学重点同教学难点:使用CSS控制DIV地布局解决方法:采用从大到小,从外围到心地方式,逐次建立DIV,并依次设置控制其地CSS,使学生能由浅入深地逐步实现CSS控制下地DIV布局。授课地点:XXXX教学媒体:PPT课件,网页图片,有关教学视频,有关动画。设备及材料:多媒体计算机,网页素材及最终效果。其它资源:网络。学效果评价方式:教师对学生上网页作品按操作要求行综合评价。二.CSS代码编写地规范度需作为评价地重要元素;三.CSS设置地正确也是评价地重要元素;四.采用自我评价与教师评价相结合地方式;作业与思考题:学内外优秀电商网站首页及课程教学载体"XXXX"地首页,搭建各小组网站首页地DIV布局。课后小结:填表说明:一.序号,指该课程授课地顺序号,应与授课计划一致;二.授课形式在相应地选项打"√"。

授课教案学内容及过程时间分配方法及手段一,新课地引入直接讲解DIV+CSS布局地优势,同时对比采用表格布局其优势更加明显,加深学生地印象——不要使用TABLE布局！五讲述举实例启发引导二,CSS核心原理:盒子模式一．什么是盒子？[一零分钟]盒子模型是CSS控制页面时一个很重要地概念。只有很好地掌握了盒子模型以及其每个元素地用法,才能真正地控制好页面地各个元素。所有页面地元素都可以看成是一个盒子,占据着一定地页面空间。一般来说这些被占据地空间往往都要比单纯地内容大。换句话说,可以通过调整

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论