课题:网页制作基础年级:高中一年级课时:1个课时授课时间:20分钟讲授者:
科目信息技术课题网页制作授课时间课型新授课课时安排1课时
教学内容分析1、基础操作:包括软件熟悉、文字、图片的使用等
2、表格的使用:包括图片(前景、背景图片)的不同使用方法)、文字的使用、工具的
应用、表格边框的设置、表格颜色的设置、单元格的设置和使用、表格及单元格的属性设置等。
3、规定网站的制作:包括表格的各个属性的使用、超级链接的使用及网页美化操作
4、主题网页制作:学生自选主题,完成一个至少8张网页的小网站的建设。
教学方法设计一、前期准备
我们先应当定义一个用来存放我们所有网页素材的文件夹,并在其中分门别类的建相应的文件夹
这里红色的代表主页(每个网站的主页必须用这个index为主文件名),每个文件夹及文件的名称都必须用英文
二、软件的认识
它的主界面我们很熟悉,和Word等类似,所以掌握起来并不难,关键是在下面的三个标签的使用。(介绍三个标签)
三、软件的使用
介绍使用三个菜单选项:
1、插入---组件---字幕
2、插入---图片---来自文件
3、插入---换行符:介绍和回车健的区别
四、学生完成上面三个操作
五、教学方法:本节课以老师演示学生模仿为主
六、时间安排:教师:学生=5:5或者4:6
七、最后要求达到如下的效果:
表格的使用:以完成一个下面主页为目的
第一个部分任务:
1、表格的插入、修改、删除
2、背景图片的插入
3、前景图片的插入与修改
要求达到的效果:
要求:
1、网页中有至少一个字幕
2、表格中至少有一行是多列的或者一列是多行的
3、单元格的背景色至少有两种以上的颜色
4、网页的背景必须是图片
5、单元格的背景图片必须使用一次以上
6、表格的单元格中必须有一个或多个前景图片
教学方法:先讲解,然后学生模仿,相关的操作给学生自己摸索(任务驱动)时间安排:教师:学生=3:7
第二部分任务:
1、表格单元格的设置
2、表格、图片位置的调整
3、表格嵌套的使用(难点)
要求达到的效果:
要求:
1、图片必须要在单元格的中间(即水平和垂直居中)
2、表格必须在整个网页的中间(即水平居中)
3、字幕的大小一定要经过调整
4、背景图片的大小为一整张背景图大小
5、表格的嵌套时,内表格一定要是顶端对起
6、内表格的边框要有颜色
教学方法:先讲解,然后学生模仿,相关的操作给学生自己摸索(任务驱动)
时间安排:教师:学生=3:7
规定网站的制作
要求完成一个指定的小网站,效果图如下:
前2个课时是用来完成三张网页的,后一个课时是用来美化网页的。
这个任务的关键是让学生自己去发现在制作网页中怎么样才是更合理的网页布局,怎样才更美观一些。
重点:超级连接的使用,以下面的图示来说明
要求:
1、选择超级连接中的一种作为自己网页的模式
2、三张网页的图片放置样式不能一样
3、每张网页的top部分一定要有,但不一定和样版一样
4、半屏山的图片很大,必须将其改小
5、五岛的六张图片可以自由选择其中的部分使用
6、每张网页的背景和每个表格的背景需经修整
7、注意换行符的使用
8、完成后要上传到教师机器中
教学目标学会使用Frontpage软件,能独立完成一个简单网站的建设。
教学重点1、软件的基本操作
方法
2、表格的使用
3、图片(前景、背
景图片)的使用
方法
4、网页的美化
主题网站的建设
教学难点表格的使用。
《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材: (一)教材分析:本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容,2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块,但针对现在网络快速发展,广大的学生接触,使用INTERNET的机会也大大增加,学生在使用网络获取信息时,更多的是通过浏览网页这一方式,我认为上好这节课是非常必要的,这对学生进一步认识、使用INTERNET更有益处,同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解,在一定程度上也起着培养学生运用综合知识能力作用,所以我认为这节课是非常值得我们去研究上好的,考虑这节课的内容及教法、学法的需要,我把这节分为两课时,第一时:学生自学,自练Word制作网页的基本方法;第二课:让学生自己构思创意一个内容丰富,页面美观的网页。 (二)教学目标:根据对教材的分析及学生实际情况,制定如 下的教学目标: (1)知识目标:1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标:1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标:1、教育学生正确认识和理解信息技术相关文 化,伦理和社会问题,负责地使用信息技术。 (三)教学的重、难点:根据对教材的分析及网页制作过程中的 实际情况,我认为要出制作内容丰富的网页,关键是要知 道网页间互相链接的方法,所以我把超级链接做为本节的
认识Dreamweaver 一、学习目的 了解Dreamweaver,学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识。 【学习步骤】 1、 Dreamweaver的功能 Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件, 也就是网页;它支持动态HTML,可以在网页中产生动画;还可以在网页中插入各种插件,以产生特殊效果。 Dreamweaver可用于管理站点,它像文件夹一样创建和打开站点,用不同的方式查看站点中各个网页之间的关系,调整站点的组织结构,使整个站点条理清晰。 2、 Dreamweaver的窗口 (1)标题栏 (2)菜单栏 (3)工具栏 (4)视图栏 (5)文件夹列表 (6)工作区 3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”,它们之间的相互切换十分容易实现的。 普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现,在此方式下,可以 像在Word中那样直接进行各种编辑操作,实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示,这样比较容易区分各种语法成分。 为了在制作网页过程中能够随时查看网页的实际效果,Dreamweaver提供了预览视图方式。 4.安装dreameaver的方法 安装及注册 5.关闭dreameaver 6.保存网页的方法 三、小结 Dreamweaver的基本知识
教学科目授课日期节次教学内容 教学目标 教学重点与难点教学方法 教学资源 公开课教案 网页制作授课班级10 计 4授课教师徐彬2011.06. 12课型任务驱动授课学时 1 课时下午第二节授课地点图书馆动漫机房 有趣的拼图 通过讲解、演示、实践,让学生掌握在网页中运用层制作拼图游戏。 知识目标技能目标态度目标 通过讲解让学生 1. 提高学生分析问题、解决问1、培养学生的观察能力及掌握在网页制作中题的能力勇于探索、勇于创新的精层的特点,学会添加2.锻炼学生的表达能力和协神 “拖动层”行为。并作、沟通能力2、培养学生的团队精神且了解相应的事件。3.提高学生的动手实践能力, 能运用层制作有趣的拼图 教学重点:层的特点、“拖动层”行为。 教学难点:“拖动层”行为。 综合(讲授、启发、引导、演示示范、观察、比较、实践等) 多媒体计算机、多媒体教学软件 本节是《网址制作 DreamweaverMX2004》中层的应用中的内容,是操作实践课。 本节采用情景导学与任务驱动相结合的教学法帮助学生消化吸收新知识, 教学 引起学生的学习兴趣,激起学生的求知欲望,发挥学生的主体作用,体现教师设计 的主导作用。通过兴趣与任务使学生学习到相关的计算机基础知识和操作技 能,进而培养学生的自学能力与动手实践能力。
教学过程设计 教学环节与主要内容具体教 学目标 教学活动 【复习导入】 ( 一 ) 导入(学时分配: 2 min ) 创设情境,打开“趣味拼图”网页,请 同学玩一玩拼图游戏。 ( 二 )复习知识点(学时分配: 2 min )1、你觉得我们玩的拼图游戏有什么特点? 这种特点是利用了什么技术实现的?2、拼图游戏利用了层的什么特点?1、激发学生学习兴 趣。 2、导入新课 教师:帮助学生回顾复习 层的特点。 学生:回顾并实践复习已 学知识 教师:根据实例,提问诱 导,导入课堂任务 学生:观察、讨论、思考 ( 三 ) 明确学习目标(学时分配:1min) 1、层的特点。 2、“拖动层”行为。教师:明确学习目标 3、 onLoad 事件。 【任务分析与制作】 (一)任务初分析(学时分配: 5min)让学生理解理解掌教师:讲解、示范、演示打开趣味拼图网页,引导学生分析制作此网握层的特点。学生:观看操作演示、学页所需的技术:习领会 1、网页布局:表格。 2、图片素材的添加:插入图片(拓展)。通过练习巩固所学学生:实践,完成练习 3、拼图图片的移动:表格转换为层。知识内容。 教师:巡视、评价、辅导(二)任务初制作(学时分配: 15min) 学生制作趣味拼图网页并调试。 (三)任务再分析(学时分配: 5min )让学生理解理解掌教师:讲解、演示、示范请同学们汇报自己作品的调试成果。握“拖动层”行为以学生:观察、学习、领会针对调试作品所发现的问题进行再分析。及事件的用法。 1. “拖动层”行为。 2. 事件。
课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计: 我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。(二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。 (5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。
网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念,能在指定位置建立只有一个网页的站点; 2 、认识FRONTPAGE 的界面; 3 、掌握在主页中插入文字、图片、水平线; 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点(难点) 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存(难点) 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息,对计算机的基本操作(WORD 中文档的编辑,网页的浏览等)比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务,有能力的学生还可以完成提高篇的学习,以充分发挥学生的积极性与自主性。 四、教学方法 在教学中,一方面采用比较教学的方法,促进学生知识的迁移;另一方面,提供学生一个导学课件,让学生根据这个网络环境下的课件自己探索学习,以满足不同层次学生的需求。 五、教学过程设计 教师活动:1 、引入课题:(激发兴趣,活跃气氛) 同学们喜不喜欢上网?经常上新浪、西祠胡同等,有没有同学知道新浪、西祠胡同称做什么?(网站) 浏览新浪网站,浏览的第一个页面称为什么?(主页) 我们还可以浏览其它的页面,点击超链接浏览,当鼠标变成手指的形状时有超链接。 问题1 :网站是不是就是网页?用自己的语言描述一下网站的概念(网站包含多个网页,
通过超链接把不同的页面链接起来) 问题 2 :网页是不是就是主页?( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为:index.htm, 主页也是网页) 设计网站一般必须经过两个步骤,首先是在计算机里做好,然后发布在internet 上,让所有的人访问浏览。 今天我们学习用Frontpage 建立站点,制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问:同学们看到了什么?(文件夹) 总结: 可以这样理解网站:在资源管理器里,网站表现为一个文件夹,里面存放的是所有与网站相关的文件。 打开主页,浏览页面,这是老师做的一个导学课件,将帮助大家完成学习任务。 请学生浏览教师课件,了解学习任务 2 、新建站点 FP 的启动 问:与word 比较,有什么不同? (增加了视图区,编辑区有三个窗口) 总结: 视图区:多种视图模式是为了方便网站的管理。制作网页时,必须在网页视图中编辑页面 普通窗口:鼠标在闪动,可编辑、修改页面,所见即所得的方式 预览窗口:浏览器中出现的效果,与PowerPoint 中的“放映幻灯片”类似。 Html 窗口:编写HTML (超文本标记语言,它是描述网页内容和外观的标准。) 打开导学软件,根据步骤,示范建立只有一个网页的站点,强调新站点的位置、路径的正确输入,站点的名称。
《网页制作》教学设计(优质课比赛优秀设计)《网页制作》教学设计 一、教材或教学内容分析 本章内容在本教材中的位置处于第五章,是在文字处理(Word2000)和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品,在软件的使用上有很多的共通之处,所以在学习frontpage的时候,很多内容可以让学生自学,而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础,学生对网页中的基本元素——文字、图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的方法。所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些基础,学起来就轻松多了。 本章内容按照学生已有的基础,我对教学内容分了一下类,也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。 重点是网页的制作和创建超链接,学会了这些就可以开始简单的网页制作了。 难点是网页框架,这部分相互之间关系比较复杂,必要时,老师在对各组个别辅导时,可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考,使分工更加合理。 二、教学对象的分析 第 1 页共 6 页 信息技术课虽然已经成为初中的必修科目,但是城乡学生之间掌握情况的差异却相当大,条件好一点的初中学生不仅已经熟练掌握了课本上的内容,还对一些常
用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习,他们需要多锻炼、多指导,所以协作学习对学生的学习帮助很大。 三、教学策略的选择及媒体的使用 在教学策略的选择上,我使用的是任务驱动和协作学习相结合的方法。 任务驱动就是要求本章内容学习完之后,每个小组都要完成自己班级网站的制作,并在全班进行评比,选择最好的作为班级主页挂到学校主页上去,这有助于激发学生参与学习的积极性。 协作学习则是让学生在学习过程中互帮互助,用较短的时间、教少的精力学到更多的东西,完成一个集体项目,让他们在学习之后获得成就感。因此在媒体的选择上,我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前,教师把学生按座位分成四组,每个组都按学生对计算机的掌握程度平均分配,保证每个组都有计算机操作方面比较突出的,也有相对比较差的,使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名,然后由组长根据组员的情况,确定在班级主页制作过程中主要完成什么任务,也就是说起到一个组织者的作用。做过网页的人都知道,做网页是一项比较费时的工作,而要学生在较短的时间内制作出像样的网页是比较困难的,而在这个过程中,网页的设计占去了相当多的一部分时间,组长把任务分到各组员头上以后,组员就可根据自己要完成的任务相对集中的做某方面的工作,做完以后,组员之间进行经验交流,告诉组员自己的网页是如何制作出来的,在完成自己的网页后,再重复一遍制作过程花费的时间的不多的。这样,其他组员就可在较短的时间之内 第 2 页共 6 页 掌握比较先进的网页制作方法,而不必再花那么多时间去探索。因为每位组员都必
《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程,该课程的学习能够提升他们对网页制作的兴趣,让他们学习网页制作的基本技能,为后继课程打下基础,同时扩展其就业面,为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法,并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能,掌握网站建设的流程,能够运用所学知识建设常用的网页和网站,同时能够美化网页,设计人性化、艺术化的网站静态页面部分。 (一)知识目标: 1.熟悉网页制作的基本元素; 2.掌握Dreamweaver CS6软件的基本操作方法; 3.掌握在网页中插入文字、图片、声音、flash等的方法; 4.掌握常见的网页布局方法,学会使用CSS美化网页; 5.掌握在网页中使用表单和制作网页特效的方法; 6.掌握简单图形图像的处理,能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 (二)职业能力培养目标 1. 能够根据网站开发需求,去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理; 2.能够制作出符合主题色彩的网页,网页要求美化、被绝大多数浏览 者接受和喜爱;
3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 (三)素质目标 1.具有勤奋学习的态度,严谨求实、创新的学习精神; 2.具有良好的心理素质和职业道德素质; 3.具有高度责任心和良好的团队合作精神; 4.具有运用理论知识发现问题、分析问题并解决问题的能力,同时能够 不断学习,不断创新,让自己的设计越来越完善,有止于至善的精神。(四)职业技能证书考核要求: 可以根据自身情况考取“全国计算机信息高新技术资格证”,“网页设计制作员”,“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节: 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接
《简单网页制作》教学设计 一、设计意图: 目前网络对学生的吸引力很大,学生上网都会浏览网页内容,对网页的制作也有很大的兴趣,想知道一个网页是怎样制作成功的。但是网页的制作相对复杂,对于一些的代码的编辑学生也较难理解,因此本课选择了FrontPage网页制作工具,引导学生简单的了解网页制作的过程,采用了所见即所得的形式避开代码的繁琐,调动学生自行设计的积极性,对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 (1)理解网页制作的简单步骤。 (2)学会用FrontPage的制作简单网页。 2、技能目标 (1)掌握的FrontPage的背景添加的操作。 (2)掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 (3)知道HTML的简单编码。 3、情感目标 (1)培养学生的口头表达能力、操作和分析概括能力。 (2)培养学生展示自我、表现自我的能力。 (3)培养学生独立思考问题、解决问题的能力和团结协作精神。 (4)在网页制作的过程中,提高学生对FrontPage的认识。三、重难点、问题预测及对策
1、重难点 (1)重点:FrontPage的基本操作。 (2)难点:HTML的理解。 2、问题预测 本节课是网页制作的第一节内容,需要学生掌握的技能并不困难。由于在学习网页制作的过程中,需要培养学生的制作网页的积极性,才能引发学生对网页制作的兴趣,实现自主学习,自主开发。 3、对策 以制作班级自己的主页引起学生注意,引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具,通过作品展示激发学生的动力。 在教学过程的设计上,通过自主设计自己的个人主页来达到解决一个个知识点的目的,同时通过学生自己创作,引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入:通过优秀班级主页欣赏,引发学生兴趣,跃跃欲试。 2、自主学习:引导学生做自己班级的主页。 3、示范教学:学生归纳总结,老师帮助、提醒,使学生掌握正确的操作步骤。
《网页设计》课程教学大纲 一、课程说明: 课程类别:选修课 适用专业:工商管理、电子商务专业、信息管理与信息系统专业和计算机相关专业、艺术设计专业等。 计划学时:60学时(讲课24学时,上机实验36学时) 学分:4 先修课程:计算机基础 执笔: 审阅: 二、课程的教学目的 以培养应用型人才为目标,充分考虑远程教育学生的学习基础和学习特点。简单介绍HTML语言、CSS样式、javascript语言,全面介绍与网页设计制作有关的知识,通过对Web页制作技术和制作工具的学习,使学生对于网页设计中所涉及的相关知识有一个全面的了解。并使学生具有解决一般网页制作问题的能力。掌握运用Dreamweaver CS6网页制作软件制作网页的方法,掌握运用Fireworks CS6、photoshop cs6图像处理软件进行网页中图形制作版式设计及切片的应用。掌握运用flash CS6动画制作软件设计网页中动画的方法,进而掌握将这四个软件互相配合,完成网页设计与制作任务的方法。为今后从事网页设计与制作工作打下基础。 三、课程教学基本要求: 1、课程重点 掌握网页制作三剑客Dreamweaver、Fireworks、flash及photoshop在网页设计过程中的应用,使学生具备网站策划、网页设计与制作、效果图设计与制作等方面的技能,提高学生分析解决问题能力和项目实施能力,注重学生在学习和实践过程中职业素质的养成。通过学习,使学生熟练掌握运用Dreamweaver网页制作软件制作网页,掌握运用Fireworks、Photoshop图形图像处理软件进行网页中图形图像的设计与制作,掌握运用flash动画制作软件设计网页中动画的方法。 2、课程难点 (1)理解HTML语言各种文本格式、字符格式、段落设置、列表、标记的作用; (2)理解CSS样式表中属性单位的作用和意义; (3)理解javascript语言脚本程序的工作方式; (4)深入理解超级链接、图形图像各种功能和应用; (5)深入理解表格、AP Div、框架、表单的作用; (6)深入理解模板、库、行为和脚本的高级应用; (7)理解网站测试的目的和测试方法; (8)深入理解“切片”和“热点”的涵义和应用; (9)深入理解动画的组成“时间轴”、“场景”、“帧”的涵义及各种动画的制作; (10)理解使用图像设计软件进行版式设计的方法。 3、能力培养要求 (1)了解HTML语言的基本内涵。理解基本标记的用法; (2)掌握在网页中添加CSS样式的方法。熟练使用CSS设置网页格式和列表的格式; (3)熟练掌握网页中文本的输入、特殊字符的插入及字符格式的设置方法; (4)掌握在网页中嵌入图象和多媒体的方法;
[章节名称]:网页设计入门基础 [课堂类型]:理论■实训□练习■测试□ [学时安排]:2课时 [目的要求] 1.了解网络的基本知识,网页设计的基础知识,网页的分类,动态网页的原理及 技术 2.了解网页的基本构成及最简单的html代码 3.了解网页设计的流程 [重点] 了解网页设计的流程,掌握最基本的网页的构成及最简单的网页html代码 [难点] 掌握最基本的网页的构成及最简单的网页html代码 [教法学法] 1.采用教授法进行教学讲解,结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排,教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》(第二版)刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一:结合PPT课件的内容,讲解网络和网页的基本知识。了解网页的分类,网页运行的原理,介绍网页设计的工具,动态网页的技术。 环节二:介绍网页的构成,并对一个网站进行实例分析说明。编写最简单的html 代码。 环节三:了解网页设计的流程 主要有以下几个步骤: 一. 网站规划 二. 素材资源收集
三. 选择开发工具 四. 站点建立与规划 五. 分模块进行网页设计 六. 网页源代码测试与特效添加 七. 申请域名与空间 八. 网页源代码上传 九. 定期的维护 环节四:对本节课的内容进行复习,让学生练习html的代码。并进行疑难解答
[章节名称]:html基础与应用1 [课堂类型]:理论■实训□练习■测试□ [学时安排]:2课时 [目的要求] 了解html语言的基础知识,结构,掌握html语言设置网页的背景音乐,背景图片,字体的方法。 [重点] Html语言设置网页的背景音乐,图片,字体 [难点] Html语言设置网页的方法 [教法学法] 1.采用教授法进行教学讲解,结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排,教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编 清华大学出版社 《动态网页制作教程》(第二版)刘梅彦徐英慧编著清华大学出版社 [教学过程] 环节一:复习网页设计的基础知识,介绍如何利用Dreamweaver开发工具,记事本编辑网页的源程序,介绍网页站点的创建及注意事项。 环节二:讲解html语言的结构,特点,设置网页页面的背景音乐,图片,字体1. 设置背景颜色
2. 背景图片 3. 背景音乐 背景音乐和上边介绍的两个有很大的不同,它的代码是放在页面的头部网页制作教案 IMB standardization office【IMB 5AB- IMBK 08- IMB 2C】
课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计:
我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。 (二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。(5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。(6)请一位学生上台操作,其他学生完成相同操作。可以参考视频快速建站技术-模板的应用.wmv。教师巡视指导。 (7)教师总结评价学生完成情况。
《H T M L 网页设计》教案 列 1 号 共 5 页
《HTML网页设计》教案(续页)第 2 页
图1- 1 组织教学 3分钟 (一) 创设情境, 引入课题 10分钟 (二) 实例探究 例1 5+8分钟 师生致礼、点名、检查学生准备情况、使学生集中注意力上课。 (组织教学贯彻于上课的始终) 在实际生活中,我们常常会上网获取各种各样的信息,完成各种各样的工作,上网展示在大家面前的是丰富多彩的网页,比如…… 注意..: (1) 网站与网页的概述........ (2) 网页的基本元素....... (3) 网页布局.... (4) 配色原则.... (5) HTML ....与渲染... 教师活动:利用多媒体展示实际网页,引导学生思考。 教学意图:创设问题情境,激发学习动机。 例1.中国最成功的个人网站--hao123网址之家,在经过大家羡慕模仿复制以后,为什么依然风采依旧,而且是独树一帜,hao123网址之家最好的亮点就是他的创意了,在他运作起来并且迅速被大家认可的时候,大量站点的模仿以及复制其实是等于对他的运作模式的认可,对于这么个站点的结构内容以及程序方面,大家都已经认为了他一点技术含量没有,但是为什么他就这样一直做的很好,而别的网站倒的倒,改行的改行,那么“hao123网址之家”他到底好在哪里? 教师活动:启发诱导,师生互动,把实际问题转化为专业问题。 学生活动:通过讨论、思考回答问题,把实际问题转化为思考专业问题。 教学意图:通过具体网页发起问题探究,掌握网页设计的原则。增强学生应用专业知识的意识。 《HTML 网页设计》教案(续页) 第 3 页 图1- 2
网页设计和发布流程 第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布 第一节站点的规划与创建 【教学目的与要求】 一、规划站点 二、创建一个站点 【教学方法与手段】 多媒体教学:借助多媒体手段,进行课堂理论教学; 启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】: 基础知识:规划站点 重点知识:创建一个站点 2课时 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】 一、规划站点 Web站点是一组具有共享属性(如相关主题、类似的设计或共同目的等)的链接文档。 本地站点:是本地硬盘中存放远程网站所有文档的地方(文件夹)。 建立网站的通常做法是:在要地硬盘中建立一个文件夹用来存放网站的所有文件,往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后,再把它们拷贝到网站上供浏览者浏览。 1、规划站点结构
注:规划站点的结构之前应先用笔绘出站点的结构图(如下图所示是一个典型的学校站点的结构图) 2、规划站点的浏览机制 一般可采用以下的方法: ●创建返回主页的链接 ●显示网站专题目录 ●显示当前位置 ●搜索和索引 ●反馈(将网页创作者或网站管理员公布在网页上,或创建一个E-MAIL超级链接,以使用户能快速地将信息反馈到网站中) 二、创建一个站点 步骤: 1、单击“文件”---“新建”---“站点”命令(或单击常用工具栏中“新建网页”按钮的下拉箭头,从打开的下拉菜单中选择“站点”命令) 2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作 1、打开站点:“文件”---“打开站点” 2、删除站点: 方法一:在Windows资源管理器中删除一个站点 方法二:在FrontPage中删除站点,在“文件夹”视图或“网页”视图的“文件夹列表”中,右击站点所对应的目录,在快捷菜单中单击“删除”命令 3、站点的设置 “工具”----“站点设置”,有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】 【作业】 1.5 课后练习书本课后练习作业
网页设计与制作课程授课教案课次18 授课方式(请打√)理论课□讨论课□实验课□习题课□其他□ 课时 安排 2 授课题目(教学章、节或主题): 第四章:ASP内置对象案例4-4:聊天室研究 教学目的、要求(分掌握、熟悉、了解三个层次): 1.了解聊天室的功能 2.熟悉本实例的文件组成和制作流程 3.掌握ASP五个内置对象的联合应用 教学重点及难点: 1. 聊天室的制作流程 2. ASP五个内置内置对象在本实例中的作用 教学基本内容方法及手段 案例4-4 :聊天室研究 本案例有 5 个文件组成: ?index.asp:聊天室的登录界面 ?do_login.asp:登录处理界面 ?chatpage.htm:聊天室的框架文件 ?message.asp:聊天室的信息输入界面 ?display.asp:聊天信息显示页面 本案例的功能结构图及可见页面如下: 多媒体讲解,先演 示本实例的操作 过程,分析本实例 具备的功能,再在 页面的操作过程 中分析各个页面 如何联系在一起, 组成一个聊天室 的。 √
如何从无到有,制作该实例? 解答:其操作流程如下: 1. index.asp页面的制作 (1)新建一个动态页面,取名为index.asp。 (2)插入一个表单,在表单内输入相关文本,插入两个文本框和一个提交按钮。 (3)设置其中一个文本框的名字为:txtUserID;另一个为“txtUserPWD”。 (4)选择表单,在其属性面板中的动作框内输入:do_login.asp。 2. do_login.asp页面的制作 新建一个动态页面,取名为do_login.asp,切换到代码窗口,添加如下代码: <% strUserID = Request("txtUserID") strUserPWD = Request("txtUserPWD") Session("username") = strUserID Session("no")= strUserPWD Response.Redirect("chatpage.htm") %>多媒体讲解,通过上面的分析,与学生一起完成如下5个页面的制作。
“网页设计与评价”教学设计与思考 南召现代中学董麒麟 [摘要]中小学信息技术课已不再是单纯的计算机技能课,它强调以培养信息素养为目标,以任务驱动为模式,以应用软件为载体。只有在实际教学中突破以往的教学模式,才能培养出适应信息社会发展的有用人才。本文以“网页设计与评价”单元为例,阐述了信息技术课教学设计的新思路,并就现行教材的编排组织提出了几点建设性意见。 [关键词]信息技术/网页制作/任务驱动 中学信息技术课程的任务是培养学生的信息素养,具体包括快速获取信息的能力,正确地评价信息,有效地利用信息和准确地表达信息。因此,信息技术课也应以信息处理为主线来展开,而不该成为单纯的计算机应用软件操作课。以“网页制作”为例,整个制作过程对学生获取、评价、表达和利用信息的各项能力都是一种培养和锻炼。下面,笔者就这一单元的教学设计做具体阐述。 一、教材分析 我校目前使用的教材是上海教育出版社编写的高二《网络技术应用》。网页设计与评价是其中第四章的教学内容。在这之前,学生已初步掌握了网络通信的基础知识,因特网的信息服务,网络信息的搜索、浏览和下载,以及电子邮件的使用等内容。因此,学生已经具备了获取信息的能力,网页设计与评价单元就可侧重培养信息表达的能力,这对于加强学生的信息意识,提高信息处理的能力有着重要的作用;网页的设计也给学生提供了展示个性、自主创新的机会,促使他们主动地学、创造性地学;网页的评价则能使学生了解内容编排的原则,页面布局的种类,色彩搭配的风格等,提高他们的艺术修养和审美情趣。 教材中采用的网页制作软件是FrontPage2000。由于FrontPage2000采用了与Word等其他Office软件相类似的图形操作界面,可以自动生成Html代码,轻松实现网页发布。在高一阶段,学生已经学过了Word字处理软件。因此,对FrontPage2000的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉,这种知识迁移对后续的学习非常有利。 二、设计思想 1、任务驱动 本单元的学习通过完成网页作品来实现。班级网页的信息来自学生生活的班集体,每个热爱班级、关心班级的同学都能产生一种急切地完成任务的动机,而完成任务又能给他们带来成就感和满足感。这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用,由“要我学”变成“我要学”。在教学中,教师通过创设情境,激发学生的创作欲望,把总任务划分到每节课,按照学生的制作进度来布置子任务,使学生在教师的引导下逐步达成教学目标。 2、小组协作
网页制作教案及课件 本资料为woRD文档,请点击下载地址下载全文下载地址【第六章第一节网页制作】教案 一、【教学目标】 、理解网页与网站的概念 2、掌握建立网站与建立网页的方法 3、掌握页面文件与图片的保存 二、【教学重点】 掌握建立网站与建立网页的方法 三、【难点、关键】 .建站点的位置 2.页面文件与图片的保存 四、【教学方法】 演示、任务驱动法 五、【课时安排】3课时 六、【教学环境】多媒体教育广播系统,Dreamweaver软件 七、【教学过程】 第1课时 1.导入新课 师:上节课已经讲了信息集成(也就是网站建设)的一般过程包括四个阶段,现在请同学们回顾一下。
生:学生作答。 师:同学们平时都有喜欢上网,那大家知道网站与网页的区别吗? 概念: 网页:通常我们在www上所能看到的每一个页面都称之为网页,它可以形象地比喻成一篇. 网站:网站是多个网页的集合,即由多个网页通过彼此相连而构成的一个整体,可以形象地比喻成一本杂志或一本书. 下面我们来学习如何用Dreamweaver这个软件制作网页。 2.新课讲述 在制作个人网站之前,应先确定网站的主题。XX奥运会即将来临,这是中国政治,经济等综合国力提升到另一台阶的盛事,我们中学生也得供献一分锦力本节课的主题是围绕“心系奥运”,资料(包括文字、图片、动画)等我已经为大家收集好,内容分类,网站的结构也规划好了,利用Dreamweaver这个工具来完成“心系奥运”这个网站的建设 一、启动Dreamweaver,认识其工作界面 “开始”-“程序”-“macromediaDreamweaver8” Dreamweaver工作界面包括:菜单栏 插入栏
《网页制作》教学设计 我说课的题目《网页制作》,说课的内容包括:说教材、说教法、说学法、说教学过程、说板书设计。 、说教材: (一)教材分析:本节内容是省编《信息技术》全一册第六章网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容, 2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块,但针对现在网络快速发展,广大的学生接触,使用 INTERNET的机会也大大增加,学生在使用网络获取信息时,更多的是通过浏览网页这一方式,我认为上好这节课是非常必要的,这对学生进 一步认识、使用INTERNET更有益处,同时通过网页制作这一过程也利 于学生对计算机常用素材的类型有更深入的了 解,在一定程度上也起着培养学生运用综合知识能力作用,所以我认为这节课是非常值得我们去研究上好的,考虑这节课的内容及教法、学法的需要,我把这节分为两课时,第一时:学生自学,自练Word制作网页的基本方法;第二课:让学生自己构思创意一个内容丰富,页面美观的网页。 (二)教学目标:根据对教材的分析及学生实际情况,制定如 下的教学目标: (1)知识目标:1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标:1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容丰富的 网页。 (3)情感目标:1、教育学生正确认识和理解信息技术相关文 化,伦理和社会问题,负责地使用信息技术。 (三)教学的重、难点:根据对教材的分析及网页制作过程中的实际情 况,我认为要出制作内容丰富的网页,关键是要知道网页间互相链接的方法,所以我把超级链接做为本节的重点。从培养学生运用信息技术综合能 力这点出发,我认为如何引导学生进行创意、以及通过网页的制作这过程
《网页设计与制作》课程教学大纲 课程名称:网页设计与制作 学分及学时:4学分总学时72学时,理论36学时 适用专业:网络工程 开课学期:第四学期 开课部门:计算机与互联网学院 先修课程:计算机文化基础计算机网络 考核要求:考试 使用教材及主要参考书: 向知礼主编:《网页设计与制作》航空工业出版社 2017年 杨松主编:《网页设计案例教程》航空工业出版社 2015年 一·课程性质和任务: 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章,分为3大部分。前5章为第1部分,主要介绍网页制作的基本理论——HTML,同时穿插介绍Fireworks,Flash,Anfy等软件在网页制作过程中的应用;第6章~第8章为第2部分,主要介绍网页制作技术,包括CSS技术、客户端脚本技术(DHTML)以及XML技术;第9章~第10章为第3部分,主要介绍当前最流行的网页制作工具——Dreamweaver,通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论,而且强调网页制作的具体应用,使读者既能打下坚实的理论基础,又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线,介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布; 要求:教学过程中,须注重学生实践操作能力的培养,采取“面向实践、能力为先”的教学思路,教学内容应结合当前WEB技术的发展趋势,把握未来企业级WEB页面开发的发展方向,兼顾各行各业的需求变化,力争面向社会,服务于企业“互联网+”战略。
第1课制作一个简单的网页 学习目标: 1、知识目标:了解网站规划方法;认识Frontpage2003的工作界面;理解站点、网页、主页的概念。 2、技能目标:学会规划和设计网站;能够搜集网站相关素材;学会新建和打开站点。 3、情感、态度与价值观目标:感受网站规划的重要性,养成做事有计划、勤思考的习惯。 教学方法:自学法、演示法、观察法、实践法、小组合作。 教学重点:网站规划的一般步骤;Frongpage2003的站点管理。 教学难点:网站规划的一般步骤。 学习时间:1课时。 学习过程: 引入课题: 许多同学都有上网的经历,那么什么是网站呢? 网站:网站是在因特网上一个相对独立的信息的集合,这些信息以网页的形式向全世界发布。因此,网站就是相关网页的集合。网页就是把用文字、图形、声音、影视等多种媒体形式表达的信息,以及分布在因特网上的相关信息,相互链接起来而构成的一种信息表达方式。 学习与探究: 一、他山之石,可以攻玉 通过对“中国少年雏鹰网”与“网易”首页的比较,谈谈自己的感受,并说出它们之间有什么差异? 二、网站规划的一般步骤 小组合作:阅读本部分内容,总结网站规划的一般步骤?常见的网页版面布局形式有哪些? 步骤:1、确定网站的主题和风格;
2、设计规划网站的结构和内容; 3、设计网站的版面布局;(“T”型、“口”型、时尚型、“三”型布局) 4、搜集整理网站素材; 5、选择网站制作工具(frontpage2003)。 三、Frontpage2003的站点管理 1、?初识Frontpage 根据打开程序的一般方法,自己试着打开Frontpage。并思考有没有其它的打开方法。 2、?新建站点 教师演示:“文件”---“新建”---“站点”,打开“新建”对话框。 学生操作: (1)指定新站点的位置为“F:\诗文荟萃”,并选择站点类型为“只有一个网页的站点”。 (2)观察界面发生了什么变化?在“文件夹列表”中自动生成了哪几个文件或文件夹?它们有什么作用? 3、?打开站点 “文件”---“打开站点”。 四、实践与创新: 1、?访问以下网站,描述它们各自的主题和风格,并画出网站的结构图和主页的布局图。 2、?搜集整理关于赞美父母的诗句、文章、图片或歌曲,分组合作设计“我的父母”网页。(包括页面结构、内容、版面布局、网页的风格和内容,通过表格的形式记录下来) 五、小结:网站规划的一般步骤、Frontpage的站点管理 六、教学反思: 第2课设计网站首页