教师培训讲义

1教师培训讲义编者：张燕2004．8第一部分几个概念网站：相互链接的多个网页。网页：含有文字、图片、动画等并带有超级链接的一组信息，这些信息在一个页面中显示。网页文件：网页储存时的电子文档，文件的扩展名为：.htm.html.asp.php等。主页：或首页，登录网站后首先呈现的主要页面，相当于网站的总目录或总导航。网页是一种带有超链接的电子文档（也叫超文本）它可以把文字、图片、声音、影像等多种媒体有机地组合在一起，并实现不受时空限制的任意跳转，众多的网页之间构成一种错综复杂的网状结构。网页编辑工具：最著名的：DreamWeaverProntPage其它如：CutePage注意事项1、要把某个网站中涉及到的所有的信息，放在同一个文件夹中（称之为站点文件夹）。2、站点文件夹中的信息，要根据站点的结构和栏目，分类有序地存放。（便于以后的查找、更改）。3、网站中所有的文件名或子文件夹名，不要用中文命名。（因为有些浏览器不支持中文名，会导致网页不可浏览，或网页中元素不可显示）。4、不要随意改变站点文件夹中文件的位置。（随意改变后，网页中超链接的指向就可能不对，网页或网页中的元素就不能正常显示，这些超链接要重做，才能正确显示）若要调整文件的位置，必须在相应的网页编辑软件中，调整后，所涉及的链接，都会自动更新。5、要建立“站点”的概念。如：当你在网页中要建一个超链接指向一个音乐文件时，你要问自己“我有没有把这个音乐文件放入站点文件夹中？”。ProntPage的特点：与Word、PowerPoint一样，ProntPage是一个信息集成工具。它的文字与图片的排版功能，与Word相似，只是没有Word那么强大、直观、灵活。它的多媒体的集成功能与PowerPoint相似，它能实现多种媒体的插入，能更加方便地建立超级链接，能更加快捷地实现页面之间的跳转。网页的排版是网页制作的重点和难点，尤其是主页面的设计和排版。网页排版中用到最多的是表格。2第二部分网页制作--复习准备：在E盘上建立一个文件夹，名为“网页课件”，用来放各个站点。1、新建站点在“E:\网页课件”中新建一个文件夹（如：fuxi）→执行“文件/新建（网页或站点）命令→在右侧的任务窗格中选择“空白站点”，并把新站点的位置指向选定的站点文件夹（E:\网页课件\fuxi）。2、打开站点执行“文件/打开站点”命令，浏览找到你的站点文件夹，打开。（注意：我们在编辑网页时，要建立站点的概念，一个网页，若在该站点中进行编辑，该站点会自动更新与该网页相关的链接。相反，在站点外对该网页进行了修改，则会导致跟它要关的链接出错）3、利用“导航、共享边框、主题”快速建立网站。主要步骤如下：第一步：新建一个站点。第二步：进入“导航视图”，新建若干个网页：如：主页、复习、新授、练习等。第三步：进入网页编辑（双击它），执行“格式/共享边框”命令，弹出如下对话框：设置好包含导航按钮的共享边框。（最好设成所有网页都一样，以形成一个统一的风格；以后个别地方要不同，可以进行个别的编辑）第四步：编辑共享边框中的超链接执行第三步后，有页面并没有导航按钮，这时需要进一步编辑，如：双击红线圈起来的部分，可编辑链接栏3的属性，弹出如下对话框：设置导航按钮指向哪里，如选“父层”，本例中导航按钮会显示“首页”字样，并链接到首页（上一层）；若选“同一层”，本例会显示3个按钮“复习”、“新授”、“练习”，即同一层的不同网页的链接。编辑导航按钮的样式：点击上图的“样式”标签，出现如下对话框：选择合适的样式按钮，可“水平方向”和“垂直方向”放置，还可拖动，改变它在网页中的位置。第五步：应用主题（美化网页）主题可以应用到单个页，也可以应用到站点中的所有页。（建议：共享边框和导航按钮，不要太复杂，只要能实现页面之间的链接，越简单，出错的机会也就越小，即使出错了，亦比较容易纠正），示例：4第六步：编辑各个页面并保存。以上图为例：介绍简单表格的制作、图片的插入。第三部分从零做起----编辑自己的网页基本过程：1、构思、设计网站的结构：主题、风格、栏目、主色调等。2、新建站点。3、编辑主页。4、编辑各个子页面。5、建立链接，美工、完善。主页的几种常见外观结构：版块型：中规中矩，整齐划一、讲究精确对齐；多运用线条、表格、不同的颜色块来划分不同的内容、栏目。常见有：“国字型”（如我校的首页）、“拐角型”（我校的“学生园地”）优点：便于分门别类，面页的信息容量大，便于浏览者快速定位需要的内容。缺点：看上去都大同小异。很多网站都采用这种结构。目录型：以目录的结构、行文的方式来组织网页内容，看上去就象一篇Word文档；这种结构的网站，注重文字内容，页面变化不大。如：惟存教育：信息技术教师之家：://艺术型（随意型）：没有固定的模式。版面不拘一格，讲究美工，具有个性。5如：世纪美术：迪斯尼中国：童趣型的：一个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、以“表格中套表格”的方法，来化简表格（即不要把某一个表格做得太复杂，6行数列数过多）。网页布局：1、网页头部：（2行2列）网站标识图（LOGO）广告图栏目1栏目2栏目3栏目4栏目5栏目62、网页中部：（大表格：1行2列）公告调查友情链接版块一版块二版块三版块四3、网页底部底部图片或分隔线版权信息分开设计的另一个优点，就是可以把网页的头部和底部应用（拷贝）到其它子页面中，使各网页风格统一，跳转方便。注意点：1、头、中、底部表格的宽度要相同。（一般为：750或760象素）2、把头部表格和底部表格做好备份，以便子网页用。3、编辑子网页时，头部可以先做个空表格，空在那儿。等头部表格中的导航链接做好后，再拷贝过来。7第四部分利用他山之石(网页模板)---做自己的网站一、WebQuest模板的运用。WebQuest是网络学习或网络研究性学习的一种模式。用WebQues模板做成的网页，简洁、有条理、针对性强。例子：“2004校本培训\关于WebQuest\WebQuest学案举例、丰富多采的民族节日.htm”1、单页模板的使用例3：在“E:\网页课件”中建立一个文件夹（如Web1）→拷贝这个模板到web1中→用FrongtPage打开这个站点→编辑网页文件→保存。几个重点操作：（1）段落的编辑光标指向某个自然段，右击→执行快捷菜单中的“段落”命令，弹出以下对话框：设置段落的缩进和行距。Px是象素的意思。（1厘米28象素）（2）创建网页书签a、建立书签（这个内容我们利用FrontPage的帮助功能，来学习）执行“帮助”菜单中的“MicrosoftFrontPage的帮助”，在弹出对话框中输入关键词“书签”，单击“搜索”，就找到了相关的帮助内容，如：右图，按上面的步骤操作即可。b、设置超链接创建书签的目的是为了在本页中实现快速的跳转。所以，一般会在目录或页首，建立一个超8链接，指向刚建的书签。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打开各个页面进行修改。注：网页漂亮精致的界面，大多是由图片组成的，所以网页制作中美工是很重要的。如本站中，各栏目按钮都是图片，要修改栏目的文字，必须使用图片编辑软件。附：网页制作推荐网站：网页制作大宝库：全球商业网站模板中心：信心网络下载：中国网页设计师联盟：第五部分图像处理----PhotoShop的简单使用一、了解界面PhotoShop的各种操作命令分布在以下三个地方：1、各个下拉菜单中（以文字体现）。2、各个面板中（图示+文字）。3、快捷菜单（文字）。其中的“面板”用得最多，最常用的面板有：工具、选项、图层、历史记录二、例解基本操作例1：改变图像的大小（1）缩放图像命令：图像\图像大小弹出如右图的对话框：输入你需要的尺寸：如宽度为800象素，高度会按比例缩放。若不想按比例缩放，只要把前的钓去掉，即可。10例2：裁剪图像选择“工具”面板中的“”，拖动鼠标，框住图像中你需要的部分，双击（或敲回车）完成操作。例3、利用“选区”工具，选取图像的某部分。选区工具有2组：规则选区（椭圆和矩形）、不规则选区（1）椭圆选区打开“例3-1”，分别做一个羽化和不羽化的椭圆图。效果如下：（2）磁性套索打开“例3-2”，把图像中间橙黄色部分取下来，别建一个图像，命名为“橙色背景图”。套索的宽度一般设置为5-10个象素。（1厘米为28象素）例4、把“橙色背景图”中的