网页课件的设计与制作.ppt

《网页课件的设计与制作.ppt》由会员分享，可在线阅读，更多相关《网页课件的设计与制作.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页课件的设计与制作 培训部 刘俣伯培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 网站网站(Website)是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可

2、以通过网站来发布自己想要公开的信息，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受的网络服务。光有网页还不能成为网站，如同光有商品不能成为商店一样。网站需要一定的存储空间，要有可供访问的地址，还要有一个容易为人记住的网站名称。对于网站而言，其访问地址包括计算机容易识别的IP地址和人容易记忆的URL地址两类，存储空间则由服务器提供。URL(统一资源定位符) URL是Uniform Resource Locator（统一资源定位符）的缩写。当您创建一个超链接时，它的目的端将被编码为URL，例如http:/ 培训内容:o 网站 o 主题资源网站对教学的

3、支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 主题资源网站对教学的支持主题资源通常可以以资源网站的形式呈现，网站是主题单元的设计者和使用者共同设计的结果，能够将涉及主题单元学习过程中的一系列活动，以及支持活动的资源和工具等集中体现出来。主题资源网站是一个半结构化的、开放性的学习环境，可以及时补充单元学习实施过程中所生成的新专题及其活动安全，为教师和学习提供了非常宝贵的单元学习合作平台，不仅保证了信息化学习活动的全方位开展，也为师生提供了展示成果和学习交流的广阔空间。主题资源网站的建设是要

4、满足教与学的需要，资源的终端用户是教师和学生。对教师用户来说，他们希望资源能够提供对教学设计和教学实施的支持，并且方便使用。主题资源不仅要提供与单元学习主题关联的资源素材，更要提供资源如何使用的信息。在主题资源中，教师可以按照主题，选取所需要的专题活动设计及其配套的资源，增删、改进、完善，为学生提供体现其风格的学习支持资源。对于学生用户来说，主题资源为单元学习提供资源、工具与方法的支持。学生在具体的单元学习实施过程中，对主题资源会有自己的加工和处理，会动态地生成新的资源。因此在构建主题资源网站框架时，需要考虑给那些在单元学习过程实施中可能发生变化的资源留有空间。单元学习主题资源不仅包含了对单元

5、学习者的学习支持，也包含了对单元学习设计者和单元教学组织者的支持，具体体现在以下几个方面。（1 1）知识背景的支持：）知识背景的支持：在单元学习中，学生的活动要以一定的知识背景为基础，需要调动原有知识并且结合其生活经验，也需要吸收解决新问题的新知识和技能。借助设计合理的主题资源为学习者的学习活动提供知识背景的支持。（2 2）学习情境的支持：）学习情境的支持：主题资源还起到为学习提供情境支持的作用，真实性的情境提高了知识的有用性和有效性，将有利于引发学生的学习兴趣，调动多种多样的解决问题的方法。（3 3）活动过程的支持：）活动过程的支持：主题资源的不同为学习活动过程的不同阶段提供相应的支持，包括

6、信息的收集、分析、归纳、评价，问题的解决，合作交流的开展等。（4 4）交流合作的支持：）交流合作的支持：借助信息技术工具，主题资源为学习者提供合作交流的支持。同时学习共同体也可以为交流合作提供支持。（5 5）学习支架的支持：）学习支架的支持：在学生自主学习的探究过程中，由于缺乏足够的研究能力，教师需要为其提供必要的学习支架，包括为学生提示研究的方向，提出引导性问题，提供思维的模板以及学习总结的框架。（6 6）反思总结的支持：）反思总结的支持：学生自主学习要能够从探究中积累经验，学会学习，因此，反思总结尤其重要。反思评价工具及方法，为学生的学习反思和总结提供支持。培训内容:o 网站 o 主题资源

7、网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 具有个性的主题资源网站的要素 个性化资源以有效支持学习主题为原则，并能够快速吸引学习者的注意力，带给学习者直观深刻的印象。内涵上又能紧扣学习主题，充分反映这是围绕学习主题展开的资源设计。具有个性的主题资源网站在创建时需要从以下几方面考虑。网站定位、网站图标和横幅 、网页配色、网页的布局 、导航、文字的处理 、链接 1 1网站定位：网站定位： 在制作网站前首先需要对网站进行定位，确定是以知识技能教学为主还是以拓宽知识面为主。在此基础

8、上确定网站风格，才可能正确处理好技术应用程度、图像与文本的关系、颜色与图像的关系、动画图像的使用等问题，形成网站中各网页图像、文字、背景颜色、区分线、字体、标题、注脚等方面的统一风格。 2 2网站图标和横幅：网站图标和横幅：图标（Logo）顾名思义就是站点的标志图案，就是用图形化的方式传递网站的定位和理念，同时便于人们识别。横幅（Banner）一般是以狭长的酷图组成，可以是静态的图片，也可以是动画，应体现整个站点的风格。 3 3网页配色：网页配色： 在视觉系统中，色彩的重要性大于形状、面积和位置等元素，色彩同时也是决定资源风格的前提。通常我们开始资源的设计工作时，首先会决定整体的色彩风格，这决

9、定着资源给学习者的第一印象。资源的开工是为内容服务的，色彩也是为内容传达创造更正确和更舒适的环境。人们通过对自然界和生活中的色彩的直观认识，赋予了色彩冷暖的感觉，常常把蓝色、紫色、白色等称为冷色系，而红色、黄色、橙色等称为暖色系，绿色等不具备明显色彩冷暖倾向的色彩称为中性色彩。暖色有前进的特性，而冷色有后退的特性。 4 4网页的布局：网页的布局： 网页布局大致可分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型和变化型等。 5 5导航导航： 根据所需资源的栏目，合理地设计首页栏目及导航标题栏。“您所在的位置”在一般网站中是不可缺少的一部分，其作用表明您现在所处在的位置，

10、使用户不会不知东西南北迷失在网站中，因此网站导航要清晰。 6 6文字的处理：文字的处理： 在网页设计中，字体的处理与颜色、版式、图形化等设计元素的处理同样重要，文字图形化就是将文字用图片的形式来表现，这种形式在页面的子栏目里面较为常用，图形化了的文字具有突出性，既美化了页面，又增强了视觉效果；但同时要注意，动画、图像与视频的使用要谨慎，不恰当的应用可能会造成对读者视觉上干扰，同时也很容易制约页面的访问速度。 7 7链接：链接： 资源网站应该避免空链接、死链接，对于尚未完成的页面可以临时链上“正在建设中”的页面，加以解释，但应该早日提供建设内容。 培训内容:o 网站 o 主题资源网站对教学的支持

11、o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 网页的组成部分及基本布局 网页（Web页）是一种基于超文本（Hypertext）方式的文档，通常是HTML格式（文件扩展名为.html或.htm）。它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取。网页是构成网站的基本元素。常见的网页一般包括标题、导航以及页面内容三大部分。 （1 1）网站标题：）网站标题：网页标题是对一个网页的高度概括，一般来说，网站首页的标题就是网站的正式名称。（2

12、2）网站导航：）网站导航：网站导航（navigation）是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容。网站导航的基本作用是为了让用户在浏览网站过程中不至迷失，并且可以方便地回到网站首页以及其他相关内容的页面。（3 3）页面内容：）页面内容：文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序，等等。网页的另一个重要组成部分是超链接，它是一种允许我们同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。网页常见布局如下面两幅图所示。

13、 简单的页面也可以只有两个部分：标题和页面内容，如下图所示。培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 HTML语言 HTML的全称是Hyper Text Marked Language，意为超文本标记语言。HTML语言作为一种标识性的语言，是由一些特定符号和语法组成的，理解和掌握都是十分容易的。一般而言，网页均由HTML语言写成，下面是一段html源代码及其对应的页面。可以看出一个网页至少应包含以下四种HTML标记：（1）文件类型，放在网页

14、源代码的开头和结尾，用于标识该文件是网页文件。（2）文件头，用于存放各种关于网页的描述性信息，比如网页标题、网页主题等。（3）网页标题，用于显示网页标题，存放在标记内。该标记中所填入的内容对应着上图中“网页标题”部分的内容。（4）网页主体，用于存放网页中所要表现的内容。该标记中所填入的内容对应着上图中“网页主体”部分的内容。当然，要制作内容丰富的网页，还需要使用其他诸多标记，如用于表示超链接，该标记中所填入的内容对应着上图中“超级链接”部分的内容。用于显示图片，该标记中所填入的内容对应着上图中“welcome”图片部分的内容。培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资

15、源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 网页课件的规划 o 网页课件结构图 o 课件模块规划表 o 课件文件夹结构图 网页课件结构图 网页课件结构采用百科全书式的树形结构。下面是一个网页课件结构的例子。课件模块规划表 课件结构图中的每一分支就是一个内容模块，每一个模块对应着一张网页，需要对每张网页的内容、所要整合的媒体类型（文本、图像、动画、视频、音频等）以及网页文件名进行详细说明，这样便于在开发课件时有所参照，逐一制作每个页面。针对上面的课件结构，列出模块规划表，如下图所示。需要注意的是，课件中所用到的

16、所有文件的名字不能包含中文字符，只能包含字母、数字等，这是因为文件名中包含中文字符的页面可能在某些浏览器里不能打开。 培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 网页课件的作用及其使用条件 o 网页型课件与传统课件相比的优势o 遇到的问题和解决方法网页型课件与传统课件相比，有许多不可比拟的优势：（1）网页型课件占用存储少，易于共享，它既易于在网上传输，又易于在实际使用中流通；（2）网页型课件的超级链接，使网页课件能容纳大量信息；（3）网页型课

17、件是一个开放的体系，易于制作和进行修改；（4）网页型课件对素材的兼容性非常高；（5）网页型课件比传统课件更利于组织教学，可以很方便地实现远程教学，也可用于学生课后复习与个性化学习；（6）网页型课件对平台兼容性很强，能兼容多种格式的素材文件，如midi,avi,swf,gif,jPeg等，而传统课件就受到平台的制约；（7）采用“超文本”技术组织文档，各部分文本之间没有顺序、层次，可以随心所欲地进行跳转，非常灵活，更有助于培养学员的发散性思维，培养学员的探索、创新意识。制作和使用网页型课件中，可能遇到的问题和解决方法有：（1）页面相对呆板，这个问题完全可以用网页特效来解决；（2）要注意学员的个性化

18、和协作性；（3）要合理使用超文本性，网页课件中内容全部以超文本方式呈现，以非线性、非结构、网状结构形式组织教材内容，提供良好的导航系统和功能，赋予学员串联知识和网络浏览的自主权，并且，设计灵活多样的学员练习和训练内容，也提高了教学的交互能力，超文本性有利于激发学员的学习兴趣和认知主体作用的发挥，以促进创造性思维的培养；（4）提高网页课件结构设计的开放性，提供相关的参考资料和相应的网址，对于同一知识内容，提供不同角度的解释和描述，便于使学员对各种看法进行交叉思考，提高分析问题和解决问题的能力，产生闪光的思维火花，激发创造灵感的产生；（5）理科类网页型课件相对难以制作，其实不然；（6）网上信息良莠不齐，处理不当对学生身心健康不利；（7）网络型课件是以源代码形式保存的，很难进行版权保护，因此不大可能将其中的优秀之作做商业化发行。培训内容:o 网站 o 主题资源网站对教学的支持o 具有个性的主题资源网站的要素o 网页的组成部分及基本布局o HTML语言o 网页课件的规划o 网页课件的作用及其使用条件o 评价网页课件指标体系 主题资源网站的评价指标体系如下图所示