第5章+5.5+专题学习网站设计与开发

第五节专题学习网站设计与开发现代教育技术现代教育技术2一、什么是专题学习网站二、专题学习网站的组成三、专题学习网站的教学功能四、专题学习网站的教学设计五、基于页面的专题学习网站的开发主要内容现代教育技术3一、什么是专题学习网站•体验专题学习网站1.专题学习网站——桥专题学习网站——大禹治水专题学习网站——在星空中试比较他们在选题、内容组织、网站结构安排上有哪些相同点，各自的特色在哪里?比较三个专题学习网站专题学习网站相同点特色之处选题内容组织网站结构选题内容组织网站结构桥大禹治水在星空中现代教育技术4现代教育技术5一、什么是专题学习网站在因特网环境下，围绕某门课程与其他课程密切相关的某一项或多项专题进行较为广泛、深入、细致研究的资源型学习网站。什么是专题学习网站？现代教育技术6(1)专题学习网站小而精，学习内容相对固定，围绕选定的主题，不贪大求全；(2)内容详细深入，探索空间大，不泛泛而谈；(3)交互性强，有动态资源库，学习者的参与性强；(4)有理想的协作学习、自主学习、研究学习的空间。普通网站与专题学习网站的区别一、什么是专题学习网站二、专题学习网站的组成现代教育技术7二、专题学习网站的组成现代教育技术8展示与学习专题相关的结构化知识，把与课程学习内容相关的文本、图片、图像、动画等知识结构化重组。将与学习专题相关的扩展性的学习素材资源进行收集管理，包括结合学科特点的不同学习工具和相关资源网站的链接。结构化知识展示扩展性学习资源二、专题学习网站的组成现代教育技术9根据学习专题，构建网上协商讨论，答疑指导和远程讨论区域。收集与学习专题相关的思考性问题、形成性练习和总结性考查的评测资料，并将其设计成基础性强、覆盖面广、难度适宜的题库，让学习者能进行网上自我学习评价。网上协商讨论空间网上自我评价系统现代教育技术10三、专题学习网站的教学功能1、提供网络学习环境，为学生的知识学习创造良好条件2、以专题学习网站为依托，为学生开展研究性、创新性学习提供环境3、以专题学习网站为平台，开展协作性学习四、专题学习网站的教学设计现代教育技术11（三）专题学习网站的教学设计方法（二）专题学习网站的设计策略（一）专题学习网站的设计原则（一）专题学习网站的设计原则现代教育技术12对象的特定性原则内容的整合性原则功能的综合性原则（二）专题学习网站的设计策略现代教育技术13注重专题的提取，加强知识的有机融合重视内容的整合与拓展，体现知识的意义建构提供丰富的网络资源，创设有意义的学习情境实现超链接结构，启发学生的联想思维（三）专题学习网站的教学设计方法网站的需求分析与功能定位学习者特征的分析专题和内容的选取知识结构体系的设计信息资源的选择与设计自主学习的设计协作交流的设计学生评价系统的设计网站评价的设计现代教育技术14123456789现代教育技术15网站的需求分析与功能定位网站的需求分析与功能定位（3）根据专题构建系统完善的内容结构，便于教学和学生的自主学习；（2）提供协作交流讨论区，方便教师与学生、学生与学生之间的协商研讨；（1）建立一个资源库，方便教师和学生搜集资料；（4）提供在线自评系统，便于及时检测反馈。学习者特征的分析分析学习者的特征是指了解学习者的学习准备情况及其特点的活动。学习准备包括两个方面：一是学习者对从事特定的学科内容的学习已经具备的有关知识与技能的基础，以及对有关学习内容的认识和态度，这叫做“起始能力”（EntryCompetencies）。二是学习者对从事该学习产生影响的心理、生理和社会特点，包括年龄、性别、认知成熟度、生活经验、文化背景、学习动机、个人对学习的期望等，这叫做“一般特征”(GeneralCharacters)。可以采用调查或测试的方法对学习者的学习准备进行前测，了解学生的学习状态和学习需求。现代教育技术16专题和内容的选取内容选取必须：立足于教学问题的解决。来源于课程标准所规定的内容。是某门课程或多门课程中具有相关知识特征的知识点的集合和延伸，既包括学生必须掌握的教学内容又包含扩展性知识。目的是为了让学生通过专题学习网站的学习，既能达到课程标准的要求，完成教学任务，又能拓宽知识面，培养自主探究、协作学习的能力。现代教育技术17知识结构体系的设计可以按照相关度、整合度和扩展度三个方面来进行知识体系的建立。相关度就是指在同一门学科中与一个知识点相关的所有知识点的有机融合。整合度则是指多门不同学科的相关知识点的有机整合。扩展度是指从各种不同途径收集而来的与知识点相关的内容的一种融合。现代教育技术18信息资源的选择与设计必须明确信息资源的使用目标（即呈现事实、创设情境、提供示范、解释原理、探究发现等）依据媒体选择的基本理论（最大价值律、共同经验律、抽象层次原理和重复作用原理）按照专题内容的类型和学习者的特征，选择最合适的形式来表现专题内容。现代教育技术19自主学习的设计自主学习即让学生自我学习、自我探讨。常用的自主学习的方法有支架式教学、抛锚式教学和随机进入学习等。在专题学习网站的设计中，可以通过建立完善的知识结构体系、设计清晰的导航策略、生成规范化的评价系统等加强对学生自主学习的引导，促进学生对知识的意义建构。现代教育技术20协作交流的设计专题学习网站必须为学习者提供各种网络通讯工具。例如：NetMeeting、BBS、ICQ、E-Mail、ChatRoom、InternetPhone等，让学习者实现相互之间的交流，参加各种类型的协商、讨论活动，也可以实现教师与学习者之间的良好互动。现代教育技术21学生评价系统的设计专题学习网站是面向学习者自主学习和协作学习的网站，它必须为学习者设计出一套针对性强、含疑量适度、具有一定梯度的强化练习。在专题学习网站的设计中，要依据学习者的学习需求和特征差异，以及学习者在学习过程中的表现，给出不同程度的强化练习进行评价，并及时给出反馈信息，作到评价和反馈的动态性。现代教育技术22网站评价的设计一般可以分两部分进行：一部分是从宏观着眼，从建设主体、指导思想、技术性能等方面来评价网站；另一部分则从微观入手，评价网站的专题确定、内容选取、结构组织、资源设计等方面。两部分的评价都可以分为形成性评价和总结性评价，并通过一套完善系统的评价指标体系进行量化处理，从而发现问题所在，尽快改进不足之处。现代教育技术23五、基于页面的专题学习网站的开发现代教育技术24（一）DreamweaverCS4工作区介绍（二）Dreamweaver开发网站的工作流程（三）建立站点（四）设计网页布局（五）向页面添加内容（六）发布站点（一）DreamweaverCS4工作区介绍现代教育技术25（二）Dreamweaver开发网站的工作流程现代教育技术26规划和设置站点组织和管理站点文件设计网页布局向页面添加内容通过手动编码创建页面针对动态内容设置Web应用程序创建动态页测试和发布（三）建立站点方法一：在启动Dreamweaver时在欢迎界面创建；现代教育技术27（三）建立站点方法二：在Dreamweaver工作环境下通过菜单栏中的“站点”菜单下的”新建站点”命令建立。；现代教育技术28（四）设计网页布局方法一：使用表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的有效工具，可以使用表格快速轻松地创建布局。基本操作步骤如下：1.在网页中药插入表格的位置上单击一次以定位光标，放置插入点。2.选择菜单栏的“插入”“表格”命令。或者，在“插入”工具栏中选择常用标签，单击其中的“表格”按钮。现代教育技术29（四）设计网页布局方法一：使用表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的有效工具，可以使用表格快速轻松地创建布局。基本操作步骤如下：3.在“插入表格”对话框中，输入各项参数。4.单击“确定”。现代教育技术30（四）设计网页布局方法二：使用框架框架主要用于将网页分割为多个HTML页面进行显示。基本操作步骤如下：1.在插入工具栏中选择布局标签，单击其中的框架按钮，将弹出一个菜单。2.在弹出的菜单中单击所需的框架格式，即可将框架应用到页面中。3.在框架中单击鼠标，插入文本、图像、表格等内容进行网页的编辑。现代教育技术31（四）设计网页布局方法二：使用CSS+DIVCSS即层叠样式表，它是一组格式设置规则，用于组织网页上的内容、控制网页内容的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中火HTML文档的某一部分（通常为文件头部分）。div标签，它是一个HTML标签，在大多数情况下用作文本、图像或其它页面元素的容器。CSS可以控制网页中块级别元素的格式与定位，比如div标签。现代教育技术32（五）向页面添加内容1.输入文本如果文本字数较少，可以采用直接输入的方式，如果文本较大，则可以采用复制粘贴的方法。然后在“属性”检查器（“窗口”“属性”）中，设置对齐方式。可以在编辑窗口中输入需要的文本，也可以使用“复制/粘贴”的方法将其它文件中的文本复制到当前网页中。在网页中输入文本后，可以根据需要设置文本属性。现代教育技术33（五）向页面添加内容2.插入图像方法1：使用“插入”菜单插入图像选择“插入”“图像”。在跳出的“选择图像源文件”对话框中选择对应的图片。方法2：通过拖动插入图像在“文件”面板（“窗口”“文件”）中，找到需要的图像文件，将该文件拖到网页指定位置。现代教育技术34（五）向页面添加内容2.插入图像方法3：从“资源”面板插入图像1.单击“文件”面板中的“资源”选项卡，或选择“窗口”“资源”。则会显示站点资源。2.如果未选择“图像”视图，则单击“图像”以查看您的图像资源。3.在“资源”面板中，选择插入点将所需图片文件拖到网页指定位置。现代教育技术35（五）向页面添加内容3.插入并播放Flash文件方法1：使用“插入”菜单插入Flash文件1.选择“插入”“媒体”“SWF”。2.在“选择文件”对话框中，浏览至站点flash文件，选择flash文件，然后单击“确定”。3.在“属性”检查器（“窗口”“属性”）中单击“播放”或“停止”可以控制开始或结束Flash文件播放。4.保存该页。现代教育技术36（五）向页面添加内容3.插入并播放Flash文件方法2：从“资源”面板插入Flash文件1.单击“文件”面板中的“资源”选项卡，或选择“窗口”“资源”。则会显示站点资源。2.如果未选择“SWF”视图，则单击“SWF”以查看您的图像资源。3.在“资源”面板中，选择插入点将所需SWF文件拖到网页指定位置。现代教育技术37（五）向页面添加内容4.插入Flash视频选择“插入”“媒体”“FLV”。在“插入FLV”对话框中，从“视频类型”弹出式菜单中选择所需类型，并设置相关选项。现代教育技术38（五）向页面添加内容5.创建链接链接是在Web页面中插入的指向其它文档的引用。可以将任何类型的资源转换为链接，可以在站点创建过程的任何阶段创建链接。这里以为导航条文本建立链接为例。（1）选择所需建立链接的文本。（2）在属性检查器中（“窗口”“属性”），单击“链接”文本框旁的文件夹图标。在“选择文件”对话框中，浏览要链接到的文件，并单击“确定”。现代教育技术39点击浏览要链接到的文件（六）发布站点1.定义远程文件夹需要设置一个远程文件夹，以便发布Web页。远程文件夹通常具有与本地文件夹相同的名称，因为远程站点通常完全就是本地站点的副本。也就是说，发布到远程文件夹的文件和子文件夹是本地创建的文件和子文件夹的副本。操作步骤如下：（1）在远程服务器上，在服务