网络课件开发技术.ppt

第8章 网络课件开发技术,本章将介绍网络的基础知识及网页、网站设计的相关内容，为进一步学习网络课程设计提供必要的基础。,计算机辅助教学实用教程,81 网络基础知识 811 什么是网络 计算机网络可以定义为：将分布在不同地理位置上的具有独立功能的多台计算机系统，用通信设备和通信介质（如电话线、网线、光纤、微波、卫星等）连接起来，再配有相应的支撑软件，以实现计算机之间的相互通信、资源共享的系统，称为计算机网络。”,81 网络基础知识 812 网络的分类 计算机网络可按不同的方法进行分类，如按拓扑结构、按信息传输介质、按信息传输速率、按覆盖范围等等。下面就以常见的按覆盖范围进行分类的方法来说明网络的分类。按覆盖区域的范围的大小，可将计算机网络划分为局域网（LAN）、广域网（WAN）及因特网（Internet）。,81 网络基础知识 813 网络的构成 一个典型的网络系统由网络硬件和软件两大部分构成。网络软件一般是指可对网络中的各种信息进行调配和管理的各类软件。目前，比较常见的有UNIX、Windows NT、Windows 2000 Server、Linux、NetWare等。网络中的硬件设备，可分为信息传输控制设备和信息处理设备两类。网络中的拥有各种不同类型的计算机，他们要互相通信，就必须要理解对方传递过来的信息的含义。因此，网络中的计算机之间必须要按某种约定的规则才能互相通信，我们把这种通信规则叫做“网络传输协议”。,81 网络基础知识 813 网络的构成 网络的拓扑结构是指网络中主要设备的连接形式。它是构成各类网络的基本结构，典型的网络拓扑结构有总线型、环型、星型、树型全互联型和不规则型等。,81 网络基础知识 813 网络的构成 网络的拓扑结构：,81 网络基础知识 813 网络的构成 网络中常用网络设备：1服务器 服务器是网络中可以为其它计算机提供各种服务的主计算机，一般具有网络数据处理和控制的功能，实现用户之间的互访及资源共享。服务器通常由专门的、高性能的计算机来担任，根据它在网络中所起的作用，可分为文件服务器、打印服务器、通信服务器等。2工作站 工作站是连入网络的用户计算机，它可以进行人机交互、输入、输出及通信工作，也可以接受服务器提供的各种服务，共享网络资源。客户机和工作站一样，也是连接到网上的一台个人计算机。在一些网络结构中可把工作站设置成对等机，既可以作为服务器，又可以作为客户机。3其他网络连接设备 在网络中，除服务器、工作站之外，还有很多网络连接设备，如集线器（Hub）、路由器、网桥、网关等。,82 HTML语言 821 什么是网页 通常情况下，我们在使用浏览器浏览网页时，所看到的内容是浏览器对网页文件内容的解释与翻译的结果。这些文件一般都是以文本文件的形式保存的。由于每个网页上都存在着许多超级链接链接到其它的位置（本页的某一位置或其它页等），所以通常又把这样的文件称为超文本。网页文件实际上只是对要显示的内容根据一定的标准进行标记，然后由浏览器按这种标记把有关内容显示出来。,82 HTML语言 822 HTML 语言 在网页文件中，通常包含一种用HTML(Hyper Text Markup Language，超文本标记语言）所编写的内容，文件中的这些标记符号就像其他程序语言一样有着特定的含义和语法规范。用HTML语言编辑出来的这种文本文件，被保存为以Html或Htm为扩展名的文件，这就是网页文件的一种。下面是一个简单网页的HTML文件的内容。它可以初步地反映出HTML语言的组成结构。,82 HTML语言 822 HTML 语言,82 HTML语言 822 HTML 语言其中：.：分别表示HTML文件的开头与结尾。.：分别表示网页的题头部分。.：表示将显示在标题栏内的内容。.：网页的正文部分，网页的各种内容及功能在本部分实现。,83 FrontPage基础 网络课件设计的主要工作就是设计并制作用于教学目的网站及网页。在上一节中，我们已经简单的介绍了HTML语言，虽然HTML是网页制作的基础，但直接使用其制作网页，不仅工作量大，编写程序复杂，直观性差，而且要求设计者有更多的计算机专业知识，因此，不适用于广大的非专业人员直接使用。为了避免大量的直接编写HTML程序，人们已开发出大量的“所见即所得”的网页制作工具。如Dreamweaver和FrontPage就是当前主流的站点和网页编辑器。相比之下，Dreamweaver更加专业，其代码的简洁、兼容性和整体功能都要比FrontPage 强。但是FrontPage是微软Office 中的一个家庭成员，它支持中文操作界面，其操作和使用与Word相类似，用FrontPage编写网页就像用Word写文章一样简单，很适合于初学网络及非专业人员使用，当然FrontPage中也有面向高级用户的功能，并且FrontPage将网页设计和网站管理功能的合二为一，使得在设计网站的同时就可以完成网页的制作，因此说FrontPage是建立和管理网站的理想工具之一。,83 FrontPage基础 831 认识FrontPage FrontPage有多种版本，目前的版本为 FrontPage 2002（XP），它保留和发展了以前版本的各种优秀功能，并根据用户的要求增加了许多新功能。其主要特点有：1轻松的建立网站 2良好的网页制作功能 3轻松维护网站 4与其它工具整合性好 由于FrontPage作为Microsoft Office办公软件的一员，因而其与Office其他的成员有着很好的相互支持关系。,83 FrontPage基础 832 建立与管理网站 所谓网站，是指一组相互关联的网页及其相关信息。网站可以建立在本地机上的某个文件夹里，也可建立在远地的服务器上。使用FrontPage2002建立一个网站时，系统会自动的为设计者建立一个网站目录，并建立一些分类的子目录和信息管理文件。1创建网站。2管理网站。3工作视图。,83 FrontPage基础 833 编辑网页 使用FrontPage2002可以直接创建单独的网页，并对其进行编辑，而后存盘；也可以在一个已经打开的网站中添加新的网页。二者操作类似。1创建一个新网页。2在网站中添加新的网页。3网页编辑器。4保存网页。,83 FrontPage基础 834 插入、编辑表格 利用FrontPage2002的表格功能，设计者可以方便的设计出需要的表格。表格在网页中通常用于组织相关信息，是页面中以行和列方式表述信息的手段。表格还可以用来进行页面布局，可将文本和图形插入无边框的表格之中进行整齐的排列。1创建表格。2编辑表格。,83 FrontPage基础 835 多媒体的使用 1输入文字、特殊字符、日期和时间 2图像媒体的使用（1）插入剪贴画。（2）插入图像。3声音媒体的使用 4视频媒体的使用 5动画媒体的使用（1）Flash动画。（2）GIF动画。,83 FrontPage基础 836 超链接的设定 超链接可以有效地引导访问者浏览相关的信息。网页中一般都含有大量的超链接，其载体可以是文字、图像等。文本超链接一般都加有下划线。图像超链接与一般图像的区别是当把光标移动到其上方时，光标会变成手型。1在文本文字上建立超链接。2在图片上创建链接。,83 FrontPage基础 837 框架的设计 如果在一个窗口上同时显示多个子网页，那么此种构建网页的方式叫作框架结构。框架是网页设计中很重要的技术，在一个框架结构中每个子网页可独立滚动并可动态地改变其子窗口的大小，其内容可以相互独立，也可以相互关联。1创建框架结构的网页 创建框架结构的网页，可利用FrontPage 2002模板来实现。2设置框架 建立起一个带有框架的网页后，还必须对每个子网页进行初始页面的设置，使其在被浏览时具体地显示各自的内容。3保存框架,83 FrontPage基础 838 组件功能 FrontPage 2002为设计者提供了大量的组件功能，使用者可通过“插入”菜单中的选项来完成相应组件的调用。利用这些组件可在网页中加入换行、水平线、日期与时间、各种特殊的符号、注释、导航以及网页横幅等功能。同时，也可以利用“Web组件”的功能来实现很多高级功能，如计数器、搜索表单、悬停按钮等功能。通过“数据库”选项，可以实现FrontPage 2002与数据库的连接及数据交换，从而实现网页与服务器端的数据库的数据操作。通过“表单”选项，可以方便的设计出各种方式的人机对话形式，如文本框、复选框、选择按钮、下拉框等，并可以通过表单属性对这些对话方式进行设置。FrontPage 2002还可以与其他网页设计工具联合使用，如Java，VB，ASP等，从而实现各种高级的功能。,83 FrontPage基础 839 发布站点 站点设计完成后，需要将其发布到相应的Web服务器上去，只有这样，别人才能通过网络访问到该网站的内容。要想把自己的站点上传到Web服务器上去，首先应获得上传到Web服务器的许可权及空间，可以向特定的网站申请，也可以到一些提供免费的主页的网站去申请，申请的方法可按所要申请的网站的具体要求来决定。得到许可后，一般可获得分配给你的网址、上传地址、用户名及密码等信息，有些网站还有上传的具体要求。上传的方法很多，可以使用FrontPage 2002的发布站点的功能，也可以使用其他一些专用上传工具软件，一般应根据拟上传的网站的要求来确定。,84 网页动画制作工具 Flash 本节对目前在制作动态网页动画方面比较广泛的工具软件Flash MX进行简单的介绍。包括它的常用功能及命令的使用、典型实例的制作等。,84 网页动画制作工具 Flash 841 Flash概述 Flash简介：是Macromedia公司的产品，用于制作和编辑动画的软件。Flash 的使用：Flash 的启动 Flash的 用户界面,Flash的 用户界面,84 网页动画制作工具 Flash 842菜单条与工作区域Flash MX的各部分功能：1.Main tool Bars(主要菜单栏）(1)吸附按钮(2)平滑按钮(3)平直按钮(4)旋转按钮(5)改变大小按钮(6)排列按钮,84 网页动画制作工具 Flash,842 菜单条与工作区域 Flash MX的各部分功能：2.Toolbox(工具栏）(1)箭头工具(2)空箭头工具(3)直线工具(4)套索工具(5)钢笔工具(6)字体工具(7)椭圆工具(8)矩形工具(9)铅笔工具(10)画笔工具,84 网页动画制作工具 Flash,842 菜单条与工作区域 Flash MX的各部分功能：3.时间线 时间线就好像是导演的剧本，决定了各个场景的切换及演员出场表演的时间顺序。Flash把动画分解成帧，在舞台上直接绘制的图形界面，或者从外部导入的图象，均可以形成单独的帧，把各个单独帧图像画面连接在一起形成动画。,84 网页动画制作工具 Flash,842菜单条与工作区域 Flash MX的各部分功能：3.时间线 时间线窗口可以分为左右两个区域，左边是图层控制区域，右边是时间线控制区域。在时间线窗口中还有一条红色的竖线，这条竖线表示当前帧，把它称为播放指针，它指示了舞台工作区内显示的是哪一帧的画面。,当前层,显示/隐藏当前层,锁定层,显示层为框线,帧参数设置,添加层,建立向导层,添加文件夹,当前帧,每秒走过帧数,84 网页动画制作工具 Flash,842菜单条与工作区域 3.时间线,84 网页动画制作工具 Flash,842菜单条与工作区域 4.舞台 舞台（Stage）是绘制和编辑图形与电影画面的矩形区域。矢量图形的制作编辑、动画画面的创作和展示都在舞台上进行。在Flash中创建或编辑一段动画时，离不开舞台，就像导演指挥演员演戏一样，一定要给他们一个演出的场所，这在Flash中被称为舞台。注意，只有在舞台内白色的区域（叫舞台工作区）内的内容，才能够正式输出。,84 网页动画制作工具 Flash,842菜单条与工作区域 5.控制面板 Flash MX的用户界面中，面板位于用户界面的左侧，面板用于创建、观看、组织和修改对象。用户通过面板可以快速地获得对象的属性资料，并在此基础上进行相应的操作同时获得需要的效果。在Flash MX中通常使用面板对帧、颜色、文字、Action、场景等对象进行编辑。例如，需要填充颜色时，可在“Color Mixer”中选取我们需要的颜色；需要查看对象位置信息时，可以通过“Info”面板，等等。,84 网页动画制作工具 Flash843 Flash的基本指令 1Flash中的基本概念（1）帧的概念与分类 帧的概念：时间轴是对帧进行操作的地方，随着影片播放时间的推进，动画将会按照横轴的方向播放，所以横轴就是时间线(Timeline)。每一个帧用一个小方格代表，也可以说一个小方格就是一帧。,84 网页动画制作工具 Flash843 Flash的基本指令 帧的分类：关键帧 只有定义了关键帧和动画的属性，才能让FLASH自动完成动画过程。关键帧就是定义动画的起始点和终结点。过渡帧 在定义了FLASH的起始关键帧和终结关键帧之后，在起始和终结关键帧之内的帧被称为过渡帧，过渡帧是具体动画的实现的详细过程图，它能具体体现动画变化过程。空白关键帧 在一个关键帧里面，没有添加对象，这种关键帧称为空白关键帧。,84 网页动画制作工具 Flash843 Flash的基本指令 图层 图层就像若干张透明纸叠放在一起，在上边透明纸画有东西处会遮挡了下边透明纸所画的内容，透过透明纸上没有画东西的区域，可以看到下面透明纸上所画的内容。图层中有两种特殊的图层：一个是导向图层（Guide Layer）一个是遮罩图层（Mask Layer）。在本文以下的内容中将介绍用这两个特殊图层制作的效果。,84 网页动画制作工具 Flash843 Flash的基本指令 2 创建图形和文本（1)线形和线色的设置 常用的画线工具有直线工具、铅笔工具和钢笔工具，选中工具栏中的铅笔工具在工作区下方将出现属性设置框。,84 网页动画制作工具 Flash843 Flash的基本指令 2 创建图形和文本（2）绘制有填充物的图形 填充颜色的设置 下面以白黑渐变演示一下如何进行填充颜色。首先，选择面板中的Linear Gradient（线状渐变色）。,84 网页动画制作工具 Flash843 Flash的基本指令 椭圆工具和矩形工具 椭圆工具与矩形工具就是用来画椭圆和矩形的。这两个工具的使用方法基本相同。椭圆的制作过程如下：设置好线型、颜色和填充色。单击工具箱内的椭圆工具，在舞台工作区内拖曳。如果在拖曳鼠标时，按住Shift键，即可画出圆形。,84 网页动画制作工具 Flash843 Flash的基本指令（3）输入文本 设置文本属性：其设置包括字体、字号、颜色和风格等。文本的输入。进行完文字属性设置后，单击工具箱内的A文字图标按钮，在舞台工作区拖拉出矩型框即可输入文本。,84 网页动画制作工具 Flash843 Flash的基本指令,84 网页动画制作工具 Flash843 Flash的基本指令 3 符号与实例（1）符号与实例 符号（Symbol）是指可以重复使用的图像或按钮。实例（Instance）是指符号在舞台工作的应用。符号存放在库（Library）面板中，而实例在舞台工作区中。,84 网页动画制作工具 Flash843 Flash的基本指令 Flash中有三种基本符号，它们是图形符号、电影片段符号、按钮符号。图形符号（Graphic）：它可以是矢量图形、图像、声音或一段没有音效与交互的动画。电影片段符号（Movie Clip）：它是主电影中的一段电影实例，用来制作独立于主电影时间线的动画。按钮符号（Button）：它可以在电影中创建交互按钮，对事件（例如，鼠标单击等）产生动作。,84 网页动画制作工具 Flash843 Flash的基本指令（2）创建符号 创建符号 选择“insert菜单中new symbol”菜单命令或者使用Ctrl+F8快捷键，将弹出如图9-54所示的Symbol Properties（元件属性）对话框。在名称文本框中输入要创建的元件的名字，然后，选择所要创建元件的类型，最后按确定。,84 网页动画制作工具 Flash843 Flash的基本指令（2）创建符号 转换舞台内容为元件：首先，选中要转变的对象，然后选择”Insert”（插入）菜单中“Convert to symbol”菜单或者使用F8快捷键即可。,84 网页动画制作工具 Flash843 Flash的基本指令（3）Library（库）的使用 创建好的符号都存放在Library（库）中库面板的使用：单击符号的名称可在库上边的窗口内显示出符号的图像。用鼠标将库中的符号图标拖移到舞台工作区，即可。也可以在上边窗口内双击图像进入编辑符号状态。Flash中附带了很多符号，分别存在三个库中，可供用户直接使用。这三个库分别是：学习交互、按钮、声音。,84 网页动画制作工具 Flash844 动画制作 1 简单的Flash动画（1）Motion（移动）动画 应用此命令可以制作出以位移为主的动画。选择“File”（文件）菜单中“New”（新建）菜单命令新建一个Flash文件。选择“Modify”（修改）菜单中“Document”（文件），窗口来设置文件的大小及背景颜色、动画每秒走过的帧数。,84 网页动画制作工具 Flash844 动画制作 1 简单的Flash动画,84 网页动画制作工具 Flash844 动画制作 1简单的Flash动画,84 网页动画制作工具 Flash844 动画制作 1简单的Flash动画,2特殊的flash 动画,84 网页动画制作工具 Flash 844 动画制作 3文件设置 当动画制作完成后，需要将FLA格式的文件发布（或者叫“导出”）成SWF格式的文件（扩展名为SWF，可直接被Flash播放器播放的动画文件）用于网页播放。Flash在发布时可以生成SWF文件及HTML文件（超文本文件），超文本文件允许在IE浏览器窗口中观看动画。,1什么是网页？什么是HTML语言？二者有何关系？2简述FrontPage2002的功能。3什么是网站？如何使用FrontPage2002建立一个网站？4简述FrontPage2002的工作视图方式。5简述网页编辑的视图方式及其特点。6什么是框架？如何建立一个框架？7如何在图像上建立热点？8如何发布一个站点？8设计一个具有框架的个人主页。10使用FLASH制作一路径动画。,习 题,完,制作者：,