网站制作与教学应用学习培训课件.ppt

1、1网站制作与教学应用网站制作与教学应用 2教学网站分为两大类：教学网站分为两大类：1.网络教学（网络学院、网络选修课）教学一般是建立在教学平台上2.辅助教学（课程内容的复习和知识的扩展）教学网站的功能教学网站的功能:要使学习者通过学习和运用教学网站上的模块，替代部分教学活动教学网站模块主要包含：教学网站模块主要包含：学习内容、内容讲解(多媒体)、学习导航、案例分析、学习反馈、思考活动、布置作业、学习建议、学习进度管理（网络教学辅助平台或编辑动态网页）3网页制作一般采用网页制作一般采用 Dreamweaver 和和 Frontpage 软件软件软件软件 Frontpage 版本说明版本说明Fro

2、ntpage 2000 版本是全国计算机考试所确定的版本。版本是全国计算机考试所确定的版本。学校服务器：学校服务器：ftp:/202.116.161.194 (账号、密码均为账号、密码均为train)培训软件文件夹培训软件文件夹中有中有 Microsoft Office2000 安装软件。下载后在本机安装时只选择安装安装软件。下载后在本机安装时只选择安装frontpage即可。即可。参考网站：参考网站：http:/202.116.160.98:8000/course/FrontPage2000/fp2k0101.htm4 FrontPage 2000FrontPage 2000的启动与退出的启

3、动与退出FrontPage 2000的启动与退出的方法与其它的Windows应用程序相同。（1）启动操作（2）退出操作 FrontPage 2000FrontPage 2000的用户界面的用户界面FrontPage 2000的主窗口界面由：标题栏、菜单栏、工具栏、视图栏、编辑器、状态栏组成。5FrontPage 2000FrontPage 2000支持支持6 6种不同的视图，它们分别是：种不同的视图，它们分别是：l l网页视图：可以用不同的方式编辑网页或浏览网页。网页视图：可以用不同的方式编辑网页或浏览网页。l l文件夹视图：可以按照文件夹的形式查看站点中的文件组成情况。文件夹视图：可以按照文

4、件夹的形式查看站点中的文件组成情况。l l报表视图：该视图下显示的是当前站点的统计数据。其内容涉及到所有的文件、报表视图：该视图下显示的是当前站点的统计数据。其内容涉及到所有的文件、图片、未链接与已链接的文件等的数量、大小及简要说明。图片、未链接与已链接的文件等的数量、大小及简要说明。l l超链接视图：超链接是超链接视图：超链接是WebWeb站点中最重要的部分，在网页中通常少不了超链接。站点中最重要的部分，在网页中通常少不了超链接。l l 任务视图：这是任务视图：这是FrontPage 2000FrontPage 2000为制作复杂网站提供的一种有力工具，通过它，为制作复杂网站提供的一种有力工

5、具，通过它，设计人员可以根据工作安排制定详细的任务列表设计人员可以根据工作安排制定详细的任务列表。6创建网站的一般过程由以下几个步骤构成：创建网站的一般过程由以下几个步骤构成：(1)需求分析(2)规划网站(3)收集内容(4)建立Web站点(5)制作网页 根据网站的建设规划，制作网站的主页面及其它页面(6)测试网站及网页(7)发布网站(8)维护与更新从设计阶段来说，最为重要的就是做好网站的规划、收集建立网站需要的资料及制作网页。网页制作网页制作7（1 1）确定站点结构）确定站点结构根据Web站点的需要，明确建立站点的目标，确定站点的组成部分及各页面间的层次关系，除此之外，制作网页所需要的各类型的

6、素材应建立相应的素材文件夹以统一管理。（2 2）创建）创建WebWeb站点站点规划好站点后，需要在FrontPage 2000中制作出相应的网站结构 网页制作网页制作8 层状结构 层状结构（如图1.8所示）类似于目录系统的树体结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。主 页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题图1.8 层状结构9 线性结构 线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下

7、，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。主 页页面1页面2页面3图1.9 线性结构10 Web结构 Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10 Web结构页面611制作网页制作网页 规划好网站的结构后，即将开始网站的内的网页制作。网页是站点中最基本的文档，它是用HTML语言编写的。由于FrontPage具有所见即所得的特性，并能自动创建HTML代码，所

8、以在不很了解HTML语言的情况下，用FrontPage创建出多种格式的网页。1）创建网页2）保存网页 新的网页建立后，要以HTML的格式进行保存，直接选择文件菜单下的“保存”选项，即可弹出“另存为”对话框，与其它Office系列软件一样，我们可以在此处选择文件保存的位置，并对文件进行命名。网页制作网页制作12 在所有的网页制作软件中，表格的作用不仅是可以直观地描述数据，还可利用表格来划分网页的页面布局。1)1)表格的插入与编辑表格的插入与编辑 在FrontPage 2000里，表格的操作与Word类似。2)2)利用表格进行布局利用表格进行布局 在FrontPage 2000里，表格可以用来进行

9、页面布局。所谓页面布局，就是利用表格来确定文本、图片等网页元素的位置，作为表布局用的表格，其边框一般是不显示出来的，否则会影响页面的美观。网页制作网页制作13以一个常见的网页结构为例介绍表格布局，此页面由顶部的Logo和Banner区，导航菜单区，页面内容区，底部版权区组成。如下图：14 嵌套表格。嵌套表格。为了满足页面的需要，常常需要进行表格嵌套，进行表格嵌套只需将光标定位在一格单元格中，然后插入一个新的表格即可。嵌套表格可以最大程度的满足页面布局的要求，如下图：表格的嵌套也有不利因素，例如过多的嵌套影响浏览器的解析，影响页面的显示速度，因此表格的嵌套不要超过三层。在开始嵌套表格前最好计划好

10、，避免反复的合并拆分、嵌套、取消。151）文字的格式设置 在FrontPage 2000中，文字的录入与编辑与Word的操作完全相同，我们可以直接在插入点所在的位置输入文字，然后通过“格式”菜单可以对文字内容的格式、段落的格式进行设置，也可以为文字内容添加项目符号与编号、边框与底纹。(学会使用 Shift+Enter 换行)2）文本动画 作为网页制作工具，FrontPage 2000针对文字提供了一些动态效果的制作手段，最为常用的是文本动画，文本动画都是采用动态HTML（DHTML）来实现的，因此只有在Internet Explorer 4.0或以上版本，或者其它支持动态HTML的浏览器中才可

11、以看到文本动画的效果。网页制作网页制作16FrontPage 2000支持多种图片格式（包括GIF、JPEG、BMP、PHG、TIF、MSP、RAS、WPG、EPS、PCX和WMF），同时它包含了丰富的图片操作命令，提供了以下功能：网页制作网页制作设置图形透明、剪切图形、给图形添加文本、设置特殊效果（翻转按钮组、叠加、凹凸效果、对比度亮度等）单击左边的图形，FRONTPAGE窗口下又多了一个工具栏，我们称它为“图形”工具栏。（查看-工具栏-图形）17 自动创建缩略图：可以自动创建一个图片的小尺寸版本，并将它链接到原始的图片。这个特征可以用来方便地创建相册网页 图片预览：图片预览是一个很有用的特

12、征，当网页中插入图片时，事先可以预览到图片在网页中的效果，从而选择最合适网页的图片；改进了图片编辑工具：FrontPage 2000提供了图片工具栏，使用户可以方便地对图片进行编辑18网页中的视频和音频网页中的视频和音频 为了使网页更加丰富多彩，我们还可以在其中插入视频和音频特效。音频：文件-属性-常规-背景音乐 视频、动画：插入-高级-插件-浏览19超链接与书签超链接与书签超链接是从文本或图片（称为源锚）指向另一个网页或其它类型文件（称为目标锚）的链接。书签则是在网页中预先定义一个位置，它可以作为同一网页或其他网页中的超链接目标锚。1)使用超链接：常用的超链接对象有两种，一种是网页元素（如文

13、本、图片等），一种是热点，热点是图片中的一个部分，为每个热点创建不同的超链接。文本、图片超链接文本、图片超链接：热点超链接热点超链接：图形地图：图形地图 网页制作网页制作20超链接与书签超链接与书签2）使用书签：在同一个页面里跳转或做为其他网页中的超链接目标锚首先定义书签，然后就直接把超链接指向书签。3）设置超链接颜色设置超链接颜色 4)超链接的浏览与验证：FrontPage 2000提供了“超链接”视图供用户浏览网站内各网页所建立的超链接；验证超阶级链接是否有效可通过“报表”视图来实现。21常用组件的使用常用组件的使用FrontPage组件是内建的FrontPage对象，当作者保存网页时该对

14、象被执行，或者在某些情况下当用户浏览网页时被执行。FrontPage组件可以生成HTML代码，在某些情况下也可以生成客户端或服务器端的脚本代码。在FrontPage 2000中常用的组件有：1）横幅广告管理器：用于快速制作简单的广告牌。2）站点计数器：通常用来统计和显示用户访问网页的次数。3）悬停按钮：当鼠标移动到动态按钮上面或者单击该按钮时，这种按钮会改变其颜色或形状，或者按照作者所定义的其他方式来动作。4）字幕组件：用于在网页中显示水平滚动的文本信息5）网页过渡：设置网页的过渡效果，当浏览者进入或离开网页时过渡效果都会 自动播放6)包含网页：在一个网页中包含另外的一个网页 网页制作网页制作

15、22框架网页的制作框架网页的制作框架网页将浏览器的显示窗口分成多个区域，每个区域称为一个框架，在每个框架中可以包含一个独立的、能够滚动的网页。1)创建框架网页：在FrontPage编辑窗口中,可以利用框架网页模板创建一个新的框架网页。2)设置框架中显示的网页：对于框架网页中的每个框架，都必须指定它显示的内容，其内容可以是HTML网页、图片文件或者其他的任意类型的文件。3)保存框架网页：框架网页不同于普通网页，它不仅包含一个框架，每个框架内还包含一个网页文件。4)设置超链接的目标框架在框架网页中，允许将某一网页中超级链接的目标锚设置在同页面中其它框架内。网页制作网页制作23 共享边框：共享边框：

16、是站点上有一个或多个网页共享的区域，共享边框可能是一个在网页顶端(类似于网页页眉)、底端(类似于网页页脚)、左边或右边的区域。共享边框是创建具有一致外观的网页的最快速最灵活而且最容易的方法。24添加表单添加表单表单使Web站具有交互功能，使其不再是单一形式的对信息进行发布的载体，同时也是对信息进行收集的载体。在表单中可以包含文本、图片、表格和大多数可以在网页中插入的其他对象。1)表单域表单域就是用户可以在其中输入信息的区域，一个表单中可以包含多个表单域。2）创建表单直接通过“插入”菜单下的“表单”选项即可。3)表单属性的设置创建表单后必须设置表单的属性，在快捷菜单中选择“表单属性”菜单项，即可

17、。网页制作网页制作25 当网站建立好之后，用户需要在互联网上发布网站，这样自己开发设计的网站才能被互联网上其他用户浏览。发布网站的过程就是把本机上的网站中的所有文件上传到Web服务器上，能够提供WWW浏览服务，用户用浏览器在Internet上浏览网页，其实都是在访问相应Web服务器中的网页文件。1、制作好教学网站后可向现代教育技术中心教育技术部（电话85283889）申请服务器空间，空间大小一般限制在1G.2 2、申请个人主页空间 由于网络服务器的租用费用较高，个人用户一般都是向提供网页服务的ISP申请个人免费主页空间。如http:/ http:/ 2000FrontPage 2000中发布网

18、站中发布网站 从从ISPISP处申请好网页服务后，我们需要在处申请好网页服务后，我们需要在FrontPage 2000FrontPage 2000中将网站发布到服务器上中将网站发布到服务器上 。配置配置Web ServerWeb Server服务服务 如果用户暂时不需要将自己建立的网站上传到互如果用户暂时不需要将自己建立的网站上传到互联网上供所有互联网用户使用，只希望自己所在局联网上供所有互联网用户使用，只希望自己所在局域网内的用户能访问到，也可以在本机上自行配置域网内的用户能访问到，也可以在本机上自行配置自己的自己的Web serverWeb server服务。服务。站点的发布站点的发布 2

19、72829 （图二）3031 32 33 343.3.通过地址栏通过地址栏:格式格式ftp:/ftp:/账号账号:密码密码IPIP地址地址例：例：FTP:/202.116.160.98 FTP:/202.116.160.98 账号账号:lianxilianxi密码密码:lianxilianxiftp:/lianxi:lianxi202.116.160.98ftp:/lianxi:lianxi202.116.160.98浏览地址浏览地址:http:/202.116.160.98:8000/course/lianxi/indhttp:/202.116.160.98:8000/course/lian

20、xi/index.htmex.htm35用用FrontPage2000FrontPage2000下载整个网站下载整个网站：当你在网上看到一些漂亮的网站时,如何把它下载下来呢?在FrontPage 2000的站点模板选择窗口中有这样一个选项点击：新建-站点-导入站点向导将你要下载的网址输入后,通过向导下载整个网站。361.1.学习内容的编排要适合网上学习者的自主自学学习内容的编排要适合网上学习者的自主自学网上学习材料的编排，要充分体现课堂教学中教师讲课的特点网上学习材料的编排，要充分体现课堂教学中教师讲课的特点对理论和原理进行系统和详细的说明；对理论和原理进行系统和详细的说明；用通俗易懂的实例来

21、解释和阐述原理；用通俗易懂的实例来解释和阐述原理；采用亲切、友好、互动的方式来编排学习内容；采用亲切、友好、互动的方式来编排学习内容；把学习材料的内容分成不同的段落，方便学习者利用小块时间学把学习材料的内容分成不同的段落，方便学习者利用小块时间学习相对整体的内容习相对整体的内容尽量用图解等直观方式帮助学习者掌握学习内容；尽量用图解等直观方式帮助学习者掌握学习内容；采用思维图进行章节的总结，帮助学习者从整体上掌握学习容。采用思维图进行章节的总结，帮助学习者从整体上掌握学习容。网上教学材料撰写的要点网上教学材料撰写的要点37 2.2.学习内容的撰写要促进学习者的交互学习学习内容的撰写要促进学习者的

22、交互学习 在远程教育交互理论中，在远程教育交互理论中，“学习者与学习内容的交互学习者与学习内容的交互”是首要是首要的交互。要促进学习者和学习内容的交互，关键是网上学习材料需的交互。要促进学习者和学习内容的交互，关键是网上学习材料需要按照交互性原则进行撰写，使用交互性原则撰写学习材料的策略要按照交互性原则进行撰写，使用交互性原则撰写学习材料的策略很多，例如，很多，例如，采用对话式学习材料撰写方法，使学习者感到在阅读网上学习材采用对话式学习材料撰写方法，使学习者感到在阅读网上学习材料时，犹如在教师进行启发式交谈；料时，犹如在教师进行启发式交谈；通过学习材料中的思考题，激发学习者进行学习思考；通过学

23、习材料中的思考题，激发学习者进行学习思考；通过自测题进行交互式学习评估等等。通过自测题进行交互式学习评估等等。网上教学材料撰写的要点网上教学材料撰写的要点38 3.3.学习内容的选择要结合成人学习者的实践学习内容的选择要结合成人学习者的实践 经验式学习是成人学习的有效方法。在学习者进行理论学经验式学习是成人学习的有效方法。在学习者进行理论学习时，如果能将理论与学习者的经验结合起来，就能取得良好习时，如果能将理论与学习者的经验结合起来，就能取得良好的学习效果。的学习效果。4.4.学习内容的组织可适当采用基于问题的学习学习内容的组织可适当采用基于问题的学习 基于问题的学习就是以问题为焦点，要求学生

24、通过网络进基于问题的学习就是以问题为焦点，要求学生通过网络进行协作学习，提出解决问题的思路和途径，在解决问题的过程行协作学习，提出解决问题的思路和途径，在解决问题的过程中掌握知识，并获得解决实践问题的经验，逐渐形成自主学习中掌握知识，并获得解决实践问题的经验，逐渐形成自主学习和终身学习的能力和终身学习的能力网上教学材料撰写的要点网上教学材料撰写的要点39网上教学材料撰写的要点网上教学材料撰写的要点5.5.学习内容的呈现可采用多种学习媒体学习内容的呈现可采用多种学习媒体 网上学习材料可以是灵活多样的，它不仅可以是网上学习材料可以是灵活多样的，它不仅可以是文字材料，也可以是视听材料。为学习者提供多种媒文字材料，也可以是视听材料。为学习者提供多种媒体的学习材料，能使网上学习者的学习更加灵活、丰体的学习材料，能使网上学习者的学习更加灵活、丰富、有效。富、有效。40网上学习材料的特征及与教科书的差异网上学习材料的特征及与教科书的差异41网上学习材料撰写的语言使用网上学习材料撰写的语言使用42网上学习材料撰写中的图表使用网上学习材料撰写中的图表使用 网上学习材料撰写的原理之一是采用图解的方式，让学习者一目了然，易于理解和掌握根据学习内容采用不同的图表工具列表