教师培训讲义.docx

教师培训讲义.docx

《教师培训讲义.docx》由会员分享，可在线阅读，更多相关《教师培训讲义.docx（13页珍藏版）》请在冰豆网上搜索。

教师培训讲义

教师培训讲义

编者：

张燕2004．8

第一部分几个概念

网站：

相互链接的多个网页。

网页：

含有文字、图片、动画等并带有超级链接的一组信息，这些信息在一个页面中显示。

网页文件：

网页储存时的电子文档，文件的扩展名为：

.htm.html.asp.php等。

主页：

或首页，登录网站后首先呈现的主要页面，相当于网站的总目录或总导航。

网页是一种带有超链接的电子文档（也叫超文本）它可以把文字、图片、声音、影像等多种媒体有机地组合在一起，并实现不受时空限制的任意跳转，众多的网页之间构成一种错综复杂的网状结构。

网页编辑工具：

最著名的：

DreamWeaverProntPage

其它如：

CutePage

注意事项

1、要把某个网站中涉及到的所有的信息，放在同一个文件夹中（称之为站点文件夹）。

2、站点文件夹中的信息，要根据站点的结构和栏目，分类有序地存放。

（便于以后的查找、更改）。

3、网站中所有的文件名或子文件夹名，不要用中文命名。

（因为有些浏览器不支持中文名，会导致网页不可浏览，或网页中元素不可显示）。

4、不要随意改变站点文件夹中文件的位置。

（随意改变后，网页中超链接的指向就可能不对，网页或网页中的元素就不能正常显示，这些超链接要重做，才能正确显示）

若要调整文件的位置，必须在相应的网页编辑软件中，调整后，所涉及的链接，都会自动更新。

5、要建立“站点”的概念。

如：

当你在网页中要建一个超链接指向一个音乐文件时，你要问自己“我有没有把这个音乐文件放入站点文件夹中？

”。

ProntPage的特点：

与Word、PowerPoint一样，ProntPage是一个信息集成工具。

它的文字与图片的排版功能，与Word相似，只是没有Word那么强大、直观、灵活。

它的多媒体的集成功能与PowerPoint相似，它能实现多种媒体的插入，能更加方便地建立超级链接，能更加快捷地实现页面之间的跳转。

网页的排版是网页制作的重点和难点，尤其是主页面的设计和排版。

网页排版中用到最多的是表格。

第二部分网页制作--复习

准备：

在E盘上建立一个文件夹，名为“网页课件”，用来放各个站点。

1、新建站点

在“E:

\网页课件”中新建一个文件夹（如：

fuxi）→执行“文件/新建（网页或站点）命令→在右侧的任务窗格中选择“空白站点”，并把新站点的位置指向选定的站点文件夹（E:

\网页课件\fuxi）。

2、打开站点

执行“文件/打开站点”命令，浏览找到你的站点文件夹，打开。

（注意：

我们在编辑网页时，要建立站点的概念，一个网页，若在该站点中进行编辑，该站点会自动更新与该网页相关的链接。

相反，在站点外对该网页进行了修改，则会导致跟它要关的链接出错）

3、利用“导航、共享边框、主题”快速建立网站。

主要步骤如下：

第一步：

新建一个站点。

第二步：

进入“导航视图”，新建若干个网页：

如：

主页、复习、新授、练习等。

第三步：

进入网页编辑（双击它），执行“格式/共享边框”命令，弹出如下对话框：

设置好包含导航按钮的共享边框。

（最好设成所有网页都一样，以形成一个统一的风格；以后个别地方要不同，可以进行个别的编辑）

第四步：

编辑共享边框中的超链接

执行第三步后，有页面并没有导航按钮，这时需要进一步编辑，如：

双击红线圈起来的部分，可编辑链接栏的属性，弹出如下对话框：

设置导航按钮指向哪里，如选“父层”，本例中导航按钮会显示“首页”字样，并链接到首页（上一层）；若选“同一层”，本例会显示3个按钮“复习”、“新授”、“练习”，即同一层的不同网页的链接。

编辑导航按钮的样式：

点击上图的“样式”标签，出现如下对话框：

选择合适的样式按钮，可“水平方向”和“垂直方向”放置，还可拖动，改变它在网页中的位置。

第五步：

应用主题（美化网页）

主题可以应用到单个页，也可以应用到站点中的所有页。

（建议：

共享边框和导航按钮，不要太复杂，只要能实现页面之间的链接，越简单，出错的机会也就越小，即使出错了，亦比较容易纠正），示例：

第六步：

编辑各个页面并保存。

以上图为例：

介绍简单表格的制作、图片的插入。

第三部分从零做起----编辑自己的网页

基本过程：

1、构思、设计网站的结构：

主题、风格、栏目、主色调等。

2、新建站点。

3、编辑主页。

4、编辑各个子页面。

5、建立链接，美工、完善。

主页的几种常见外观结构：

✧版块型：

中规中矩，整齐划一、讲究精确对齐；多运用线条、表格、不同的颜色块来划分不同的内容、栏目。

常见有：

“国字型”（如我校的首页）、“拐角型”（我校的“学生园地”）

优点：

便于分门别类，面页的信息容量大，便于浏览者快速定位需要的内容。

缺点：

看上去都大同小异。

很多网站都采用这种结构。

✧目录型：

以目录的结构、行文的方式来组织网页内容，看上去就象一篇Word文档；这种结构的网站，注重文字内容，页面变化不大。

如：

惟存教育：

信息技术教师之家：

✧艺术型（随意型）：

没有固定的模式。

版面不拘一格，讲究美工，具有个性。

如：

世纪美术：

迪斯尼中国：

童趣型的：

一个flash酷站：

“2004校本培训\网页模板\欣赏”这个文件夹中的网页都属于这一类型。

不管是哪种结构的网页，99%的都是用表格来组织和定位页面中的各种元素。

下面我们用具体的实例来学习网页的制作。

准备：

在“E:

\网页课件”中新建一个文件夹“lianxi”。

在FrontPage中打开这个文件夹。

一、表格的基本编辑

请参阅《FrontPage2002实用基本教程》P107-121第5章。

关键操作：

1、插入表格（并设置其参数）（P110）

2、修改表格（重设“表格属性”）（P114）

3、行、列的编辑：

插入、删除

4、单元格的编辑：

单元格的属性（对齐方式、宽度高度、颜色等）、拆分、合并

二、首页实例一（简单表格）

例1：

插入一个6行2列的表格（750象素）。

布局如下：

左栏

图片

标题栏

各个栏目

主内容

版权信息

设置网页属性（如背景色、背景图片、背景音乐、边距等）

把网页中的各元素（文字、插图、背景图等）放入各个单元格。

图片放入的方式有：

（1）作为单元格的插图；

（2）作为单元格（表格）的背景图（以平铺的方式充满选中的单元格）。

（具体操作：

略）

从上例可以看出，制作一个网页最主要的，一是素材的设计制作，二是版面的设计编辑。

三、首页实例二（例2：

复杂表格）（拐角型）

版面编辑的原则：

1、从上到下，多个表格、分块设计；

2、以“表格中套表格”的方法，来化简表格（即不要把某一个表格做得太复杂，行数列数过多）。

网页布局：

1、网页头部：

（2行2列）

网站标识图

（LOGO）

广告图

栏目1

栏目2

栏目3

栏目4

栏目5

栏目6

2、网页中部：

（大表格：

1行2列）

公告

调查

友情链接

版块一

版块二

版块三

版块四

3、网页底部

底部图片或分隔线

版权信息

分开设计的另一个优点，就是可以把网页的头部和底部应用（拷贝）到其它子页面中，使各网页风格统一，跳转方便。

注意点：

1、头、中、底部表格的宽度要相同。

（一般为：

750或760象素）

2、把头部表格和底部表格做好备份，以便子网页用。

3、编辑子网页时，头部可以先做个空表格，空在那儿。

等头部表格中的导航链接做好后，再拷贝过来。

第四部分利用他山之石（网页模板）---做自己的网站

一、WebQuest模板的运用。

WebQuest是网络学习或网络研究性学习的一种模式。

用WebQues模板做成的网页，简洁、有条理、针对性强。

例子：

“2004校本培训\关于WebQuest\WebQuest学案举例、丰富多采的民族节日.htm”

1、单页模板的使用

例3：

在“E:

\网页课件”中建立一个文件夹（如Web1）→拷贝这个模板到web1中→用FrongtPage打开这个站点→编辑网页文件→保存。

几个重点操作：

（1）段落的编辑

光标指向某个自然段，右击→执行快捷菜单中的“段落”命令，弹出以下对话框：

设置段落的缩进和行距。

Px是象素的意思。

（1厘米28象素）

（2）创建网页书签

a、建立书签

（这个内容我们利用FrontPage的帮助功能，来学习）

执行“帮助”菜单中的“MicrosoftFrontPage的帮助”，在弹出对话框中输入关键词“书签”，单击“搜索”，就找到了相关的帮助内容，如：

右图，按上面的步骤操作即可。

b、设置超链接

创建书签的目的是为了在本页中实现快速的跳转。

所以，一般会在目录或页首，建立一个超链接，指向刚建的书签。

2、多页模板的使用

方法与“单页模板的使用”类似。

首先把该模板复制到站点文件夹。

用FrontPage打开各个页面进行编辑，可以在原来基础上编辑，可以加入其它元素，如图片、flash等。

可以重命名文件名（一定要在站点中），检查各个超链接无误。

二、一般网页模板的使用

例4：

“\2004校本培训\网页模板\拐角型\001”，以“身边的行程问题”为例，把left1中的网页作为首页，left5中的网页作为“过程”栏目的子页面。

准备：

在“E：

\网页课件”中建立文件夹“xingcheng”，把left1中的所有内容拷入这个文件夹，把left5这个文件夹拷入“xingcheng”文件夹中，并把left5改名为“guocheng”。

主要要操作：

✧在FrontPage中打开“xingcheng”这个站点。

✧打开index.html，编辑首页。

✧打开guocheng\index.html，编辑过程子页。

✧在首页的左侧导航栏中，给“过程”建立超链接，指向“guocheng\index.html”。

例5：

利用“2004校本培训\网页模板\艺术型\03”这个模板，做一个班级主页的首页面。

准备：

把“03”这个文件夹拷入“E：

\网页课件”中

用FrontPage打开03这个站点。

编辑首页文件。

主要操作：

1、修改导航栏文字。

2、再插入一个“2行1列”的表格，第1行插入首面图片，第2行输入版权信息，并设置一个背景图片。

3、从上到下，把所有表格统一为：

760象素宽、居中。

三、利用整站系统（静态的）

例6：

把“2004校本培训\源码\整站\少爷的家”整个文件夹拷到“E:

\网页课件”文件夹中。

用FrontPage打开各个页面进行修改。

注：

网页漂亮精致的界面，大多是由图片组成的，所以网页制作中美工是很重要的。

如本站中，各栏目按钮都是图片，要修改栏目的文字，必须使用图片编辑软件。

附：

网页制作推荐网站：

网页制作大宝库：

全球商业网站模板中心：

信心网络下载：