培训教案 李强余杭信息技术教师网页制作培训余杭信达外国语学校李强教学计划：1、 总体目标：通过10次培训，每人制作至少制作一个静态网站，一个动态网页。2、 教学内容：静态网页：5课时（1）认识Frontpage2000，界面、按钮、主要原则、基本网站构成的元素、超链接、目录、文件名称、图片等媒体插入。作业：静态网页制作，目录建立，自己确定主题，（2）每个老师建立属于自己的ASP-FTP帐号，可以登陆、修改、发布网页；表格的总体设计；超链接的细讲应用。（3）框架网页介绍；美化WEB页。（4）网页特效（5）WEB空间管理；上传下载；软件介绍CUTFTP32。动态网页基础：5课时（1） 配置服务器IIS；动态网页基础、原理。源码下载。（2） 源码后台修改。（3） 修改源码图片。（4） 修改源码结构。（5） 安全设置（数据库路径、名称）；网站总成。 第一周课时一、 介绍Frontpage20001、 安装。2、 界面。3、 各部位介绍，重点是切换按钮。菜单区、快捷按钮区、悬停按钮区、超链接、字体、切换按钮、如何插入图片、声音、修改网站属性、背景色、动态字。二、 创建一个网站。（1） 新建立文件夹，原则，所有文件必须在同一目录，里面再建立各个文件夹，如图片文件夹images，等等。（2） 首页文件名的设置：index default iistart 后缀：html htm asp （3） 表格的绘制。要点：表格属性、线条颜色、内部的各项设定。表格可以定置它的长宽，具体怎么做的？我们新建一个网页，插入一个一行一列的表格。在表格内点击鼠标右键，选择表格属性。在弹出的窗口中设置（如图1）。（图1）（4） 各类资料的收集。图片、声音（5） 色彩的调配。（6） 文件及文件夹的命名。网站里的所有东西都用小写英文名。（7） 修改图片属性 。（8） 超级链接。本站点内链接、互联网链接、邮件链接（9） 图片热点链接设置图片热点连接 有时你可能不希望一张图片都做上连接，只想为图片的某部分做上连接，这就叫做提片热点连接。如何做到呢？我们点击一下想要做热点连接的图片，你会看到Frontpage2000会自动在编辑区下面弹出一个工具栏（如图2）。（图2） 你可以使用这些工具加工你的图片。而做热点连接我们只需要使用到工具栏的几个按纽。她们分别是可以选取各种形状来做热点连接。我们选择长方形的热点工具，在图片上拉取一个想要做连接的区域，它就会自动弹出一个超级连接的窗口来，为它做好连接之后你会发现做热点连接的图片多了一个热点区（如图3）。（图3） 这样就表示热点连接已经做好了。浏览的时候你就会发现这张图片内只有热点区才有连接而热点区以外是没有连接的（10） 图片工具栏的使用。添加文字等各个按钮功能说明。第二周课时一、 申请网站空间由余高陈浩老师提供，利用ASP动态网站申请，拥有一个FTP帐号，网站空间10M，可以上传下载，可以WEB访问。1、 申请网址：http:/hzyg.xicp.net/2、 学员信息ID号用户姓名许可ID号所属部门39林春良24余杭01培训班38范晴洲23余杭01培训班37徐波22余杭01培训班36汪立平21余杭01培训班35马宇峰20余杭01培训班34王小承19余杭01培训班33王恩18余杭01培训班32姚建琴17余杭01培训班31易红16余杭01培训班30阮顺安15余杭01培训班29俞建军14余杭01培训班28张航13余杭01培训班27周伟国12余杭01培训班26朱祥11余杭01培训班25赵丽艳09余杭01培训班24王建华10余杭01培训班22孟思达08余杭01培训班21沈国平07余杭01培训班20吴江06余杭01培训班19戴林强05余杭01培训班18应浩04余杭01培训班17冯建平03余杭01培训班16何茂松02余杭01培训班15陆文锋01余杭01培训班11李强0001余杭培训班3、 申请步骤：进入http:/hzyg.xicp.net/ ，点击注册输入相应学员信息（选择模板信息。建议无）点击注册得到相应帐号。4、 进入管理http:/hzyg.xicp.net/ ，登陆相应操作。二、 表格的总体建构。原则：1、先做大模样，使表格初具规模，再进行填图、文字输入（建议一张网页一个表格）。2、在制作过程中再进行表格拆分，位置变动。3、善于使用表格的固定与随意缩放。4、表格的高、宽尺寸（一般根据喜好1024x768 或者800X600）三、超链接的具体应用。1、绝对路径和相对路径。建议在本地磁盘编辑，网上邻居进行编辑容易有路径混淆。2、 链接属性（1） 打开新窗口：目标框架设置。（2） 书签链接（3） 邮件链接第三周课时一、 框架网页首先我们要知道使用框架的好处。善于使用框架，网页不仅可以使得页面更加，而且还可以使浏览者更加方便的浏览你的网页。我们新建一个网页，注意这次新建不是点击按钮栏的按钮噢，我们点击“文件”菜单的“新建网页”，在弹出的窗口中选择“框架网页”来新建一个（如图20）。 （图20）（图21） 你可以在左边的选择框架样式窗中看到很多种框架的样式，具体选哪种就看你自己了，你喜欢哪种就选哪种：）这里我们选择“目录”样式的框架，选好之后点击确认按钮。这时你看一下打开的新网页是不是合往常新建的不一样了？不要害怕，这就是未编辑前的框架原型（如图21）。 我们点击左边和右边的“新建网页”按钮，这时你会看到出现了中间由一条线分开的两个“编辑区”（如图22）。 （图23） 这时我们的框架网页就建好了，接下来就是靠你自己了，看你怎么样编辑它了：） 竟然选择了“目录样式的框架，那么左边的编辑区就肯定是用来做目录的啦。我们在左边的目录依次编辑自己想要的目录，然后在右边编辑其他自己喜欢的内容。这里笔者把编辑好的网页给大家看（如图24），不错吧？ （图24） 总体来看，是比较整洁一点了吧？好，我们依次为左边目录栏的目录做好连接。预览一下，肯定会吓你一跳，怎么内容全部都在左边，叫人怎么看啊。哈哈，其实为框架网页做连接是有一点学问的。我们要把左边目录的连接页面在右边显示，在做超级连接的时候应该设置一下。我们先来把一个目录括好，并点击超级连接按纽，在弹出的超级连接窗口中，我们选择“目标框架”（如图25）。 （图26）（图27）（图28） 在新弹出的窗口中你可以看到左上角有一个框架预览图，我们用鼠标点击框架预览图的右边框架，使它被选（如图27）。选好之后确认，灾回去预览一下，点击连接之后内容是不是出现在右边的框架了？ 当你的框架网页做好以后，现在笔者就要教你该怎么样保存框架网页了。也许你会说保存网页嘛，有什么好讲的！哈哈，其实保存框架网页也是有学问的：）做好框架网页之后我们点击保存按纽，这时Frontpage2000会弹出一系列的保存框，保存一个框架网页是需要保存几个页面的。我们依次把它们保存，但是你要注意当保存设置框右边的预览框的框架预览出现为图28的这个时，我们就要把它命名为“index”，因为它是主页，它包含了两个网页。 大家要注意框架网页保存好之后就不能重新改他们的名字了，不然就会无法浏览了。 好了，框架网页就学到这里。有些读者可能埋怨笔者讲解的不详细，哈哈，但是笔者要讲的就是这些，其他都没什么重要的。怎么样搭配框架网页并把它制作好，关键还是在于你自己啊，可不要老埋怨我。要点：1善于使用框架网页制作独特的网页风格。2掌握好框架网页的超级连接技巧。3使用表格配合框架网页。 二、 美化WEB页1、 各类媒体的插入MIDI、GIF、FLASH、电影文件（AVI、MPG等）2、各类控件的使用。7余杭信达外国语学校 www.hzxd.cn liqianghzxd.cn