《FrontPage网页制作》教案

1、【导入新课】 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与 HYPERLINK :/baike.baidu /view/8972.htm t _blank 网页设计的相关原理紧密结合起来。 t _blank 网站设计是将筹划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将 HYPERLINK :/baike.baidu /view/29716.htm t _blank 网页设计师所设计出来的设计稿，

2、按照W3C标准用 HYPERLINK :/baike.baidu /view/115411.htm t _blank html语言将其制作成网页格式。【新课讲解】第一章 网页设计与制造概论第1节 什么是网页网页(web page)，是网站中的一页，通常是HTML格式 HYPERLINK :/baike.baidu /view/70172.htm t _blank 文件扩展名为。html或。htm或。asp或。aspx或。php或。jsp等。网页通常用 HYPERLINK :/baike.baidu /view/42116.htm t _blank 图像档来提供图画。网页要使用 HYPERLIN

3、K :/baike.baidu /view/455968.htm t _blank 网页浏览器来阅读。1、什么是网页是构成 HYPERLINK :/baike.baidu /view/4232.htm t _blank 网站的根本 HYPERLINK :/baike.baidu /view/19993.htm t _blank 元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和 HYPERLINK :/baike.baidu /view/7383.htm t _blank 虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 网页英文：Web pag

4、e是一个 HYPERLINK :/baike.baidu /view/345685.htm t _blank 文件，他存放在世界某个角落的某一部 HYPERLINK :/baike.baidu /view/3314.htm t _blank 计算机中，而这部计算机必须是与 HYPERLINK :/baike.baidu /view/6825.htm t _blank 互联网相连的。网页经由网址 HYPERLINK :/baike.baidu /view/1496.htm t _blank URL来识别与存取，当我们在 HYPERLINK :/baike.baidu /view/7718.htm

5、 t _blank 浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是 HYPERLINK :/baike.baidu /view/7833.htm t _blank 万维网中的一“页，通常是 HYPERLINK :/baike.baidu /view/692.htm t _blank HTML格式文件扩展名为.html或.htm。网页通常用 /view/42116.htm t _blank 图像档来提供图画。网页要透过 HYPERLINK :/baike.baidu /view/455968.htm t _blan

6、k 网页浏览器来阅读。 2、构成网页元素 HYPERLINK :/baike.baidu /view/32894.htm t _blank 文字与 HYPERLINK :/baike.baidu /view/19159.htm t _blank 图片是构成一个网页的两个最根本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括 HYPERLINK :/baike.baidu /view/7262.htm t _blank 动画、音乐、程序等等。3、网页的类型通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HYPERLINK

7、:/baike.baidu /view/394827.htm t _blank HTML文件。不同的后缀， 分别代表不同类型的网页文件，例如以 CGI 、 HYPERLINK :/baike.baidu /view/2616.htm t _blank ASP、 PHP 、 JSP 甚至其他更多。【课堂小结】了解什么是网页；了解构成网页的根本元素；了解网页的类型【布置作业】整理笔记复习、预习新课【复习提问】了解什么是网页；了解构成网页的根本元素；了解网页的类型【导入新课】 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页制作要能充分吸引访问者的注

8、意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与 HYPERLINK :/baike.baidu /view/8972.htm t _blank 网页设计的相关原理紧密结合起来。 HYPERLINK :/baike.baidu /view/50036.htm t _blank 网站设计是将筹划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将 HYPERLINK :/baike.baidu /view/29716.htm t _blank 网页设计师所设计出来的设计稿，按照W3C标准用 HYPERLINK :/baike.ba

9、idu /view/115411.htm t _blank html语言将其制作成网页格式。【新课讲解】第一章 网页设计与制造概论第2节 www效劳1、概述 WWW效劳3W效劳也是目前应用最广的一种根本互联网应用，我们每天上网都要用到这种效劳。通过WWW效劳，只要用鼠标进行本地操作，就可以到达世界上的任何地方。由于WWW效劳使用的是超文本链接HTML，所以可以很方便的从一个信息页转换到另一个信息页。它不仅能查看文字，还可以欣赏图片、音乐、动画。最流行的WWW效劳的程序就是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微软的IE浏览器。2、WW

10、W效劳的特点1.以超文本方式组织网络多媒体信息 2.用户可以在世界范围内任意查找、检索、浏览及添加信息。 3.提供生动直观、易于使用且统一的图形用户界面。 4.效劳器之间可以互相链接。 5.可以访问图像、声音、影像和文本型信息。第3节 常用的网页制作工具最根本的网页三剑客Dreamweaver是由美国著名的软件开发商Macromedia公司推出的一个“所见即所得的可视化网站开发工具。Fireworks是Macromedia公司网页设计“三剑客之“火焰，它以处理网页图片为特长，并可以轻松创作GIF动画。 flash是Macromedia公司网页三剑客之中的“闪电，其以制作网上动画为特长，它做出的

11、动画声音动画效果都是其他软件无法比较的。 photoshop 图像处理软件，能更好的工具网页的需要美化你的图片，操作简单。【课堂小结】了解什么是网页；了解构成网页的根本元素；了解网页的类型【布置作业】1整理笔记2复习、预习新课【复习提问】了解什么是网页；了解构成网页的根本元素；了解网页的类型【导入新课】Frontpage，是e.baidu /view/2353.htm t _blank 微软公司出品的一款网页制作入门级 HYPERLINK :/baike.baidu /view/37.htm t _blank 软件。FrongPage使用方便简单，会用Word就能做网页，微软在2006年年底前

12、将停止提供FrontPage软件并改名为SharePoint Designer。【新课讲解】第2章 FrontPage2003简介FrontPage的新用处和说明FrontPage2003是比较有用的offline2003中的一个，有许多刚买电脑想用它的人们，总是找不到：咦，FrontPage2003哪里去了？其实，FrontPage2003原本电脑中没有安装过的，所以想使用它的人们，要另行安装，在你买电脑的时候，不会有FrontPage。 突出的9个新功能FrontPage 2003相比FrontPage 2000来说在功能上增强了不少，下面我们一起来看看新版本中比较突出的9个新功能： 在设

13、计网页时，可实时调节当前页面为在 HYPERLINK :/baike.baidu /view/930.htm t _blank 客户端显示的分辨率，以便预览当前效果。大家查看FrontPage 2003界面右下端状态上显示网页大小的区域，默认为792533，右键单击后，弹出如图1所示菜单，在此可设置任意分辨率方便进行预览。 大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，就是通过创立一个图像一般为网页的效果图为参照物，以便于网页的设计制作。在Dreamweaver HYPERLINK :/baike.baidu /view/37.htm t _blank 软件的各个版本中根本上都

14、有这个功能，现在傲慢的 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微软也开始学习这个优点了。点击菜单栏上的“视图描摹图像设置，在弹出对话框中，选择指定图像，再设置其坐标即在设计页面上显示的位置。最后，设置透明度，再确认即可。这个描摹图像只是显示在FrontPage 2003的设计视图中，不会在你制作完毕的页面中显示出来。 过去，FrontPage最欠缺的功能之一就是无法像Macromedia Dreamweaver那样使用层。而层的应用在网页制作中已经是不可或缺了。好在FrontPage 2003终于支持了此项功能。 点击菜单栏上的“插入层

15、，将在当前页面中显示一个默认为“layer1的层。用鼠标在各节点上拖曳，调节其大小，然后把光标插入点置于层中，输入所需的文字图2。另外，将光标定位于该层内，在其右键弹出菜单中选择“层属性，就可在界面右侧的任务窗格上设置该层的ID，边框和底纹的样式、边距，以及定位样式与位置等参数。 点击菜单栏上的“插入交互式按钮，弹出如图3所示对话框，在“按钮标签页中，设置按钮的显示文字、样式以及链接。在“ HYPERLINK :/baike.baidu /view/285104.htm t _blank 字体标签页中设置其相关选项。最后，我们再切换到“图像标签页，设置悬停图像及鼠标键按下时的图像等。 行为一直

16、是Dreamweaver的强项，而FrontPage2003现在也有这个功能了。 点击菜单栏上的“格式行为，查看界面右侧的“行为窗格，点击“插入向下箭头按钮，在弹出菜单中可选择播放声音、弹出消息、调用 HYPERLINK :/baike.baidu /view/54.htm t _blank 脚本及弹出菜单等事件。在选择指定的插入对象后，将弹出相应的设置对话框，在其中按需操作。所有添加的行为事件，均会显示在列表中。 小知识：行为是事件和由该事件触发的动作的组合。由于行为代码是客户端的javascript代码，因此它无需效劳器的支持就可触发事件。 在FrontPage 2003中，点击菜单栏上的

17、“工具中文简繁转换插入重定向代码，在弹出对话框中，设置简体页面网址及繁体页面网址。而后，插入的代码将通过 HYPERLINK :/baike.baidu /view/7718.htm t _blank 浏览器对支持语言的检测，实现自动转向。 点击菜单栏上的“工具辅助功能，在弹出对话框中设置检查范围、内容及显示对象，接着点击“检查按钮即可。利用此项功能，就可快速找出指定网页是否有错误，并可查看问题之所在。 FrontPage系列过去在代码效率方面做得相当不好，经常产生大量的垃圾代码。而在FrontPage 2003中，点击菜单栏上的“工具优化HTML，弹出如图4所示对话框，在其中可酌情选择删除对

18、象，包括注释性内容及空白信息等，从而删除大量垃圾代码，提高网页代码执行的效率，为网页“减肥。 一个成功的设计作品，大都需要事先为其规划设计布局，以便于宏观控制其内容。在Dreamweaver中，从其4.0版本开始就参加了页面规划视图来方便设计者对页面布局进行设计，如今FrontPage 2003也具有这个功能了。 点击菜单栏上的“表格布局表格和单元格，在程序右侧窗格中将显示相应的属性设置。我们着重查看“表格布局下拉列表，在其中有假设干布局样式可供选择。当我们选择一种适宜的应用于当前页面上后，可随时在设计视图中按需自行调节其布局样式。【课堂小结】了解FrontPage2003的根本功能【布置作业

19、】1整理笔记2复习、预习新课【复习提问】了解FrontPage2003的根本功能【导入新课】Frontpage，是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微软公司出品的一款网页制作入门级 HYPERLINK :/baike.baidu /view/37.htm t _blank 软件。FrongPage使用方便简单，会用Word就能做网页，微软在2006年年底前将停止提供FrontPage软件并改名为SharePoint Designer。【新课讲解】一、新建网站提示：如果图片觉得小，将鼠标移到图片上，向上滚动鼠标滚轮，图片会放大翻开F

20、rontPage2003点击新建菜单命令会弹出一个对话框，有不同的模板供选择。选择你想要的一个，然后确定，会自动生成一个网站。二、新建一个空白网页你也可选择新建空白网页，或点新建工具按钮。当然，这上面的内容你要自己编辑。三、翻开一个网站点击翻开网站四、浏览网页“文件“浏览有几个选项不同分辨率五、编辑方式有“设计“拆分“代码“浏览【课堂小结】通过上机实践操作了解FrontPage2003的根本功能【布置作业】1整理笔记2复习、预习新课【复习提问】了解FrontPage2003的根本功能【导入新课】 通过前面的学习，我们已经学会在FrontPage 2002中创立简单的网页了。从本课开始，我们一起

21、来学习如何创立一个个人站点。学完本单元的全部内容后，同学们就可以创立出有自己风格的个人站点，并且将它发布到因特网上去，与大家分享和交流了。【新课讲解】第3章 设计一个简单的网页1、网站与网页网页设计制作是根底，是建设网站的第一步，但网站的设计要复杂得多。将数量众多的网页有条理地组合在一起，形成一个网站，可不是一件容易的事。网站建设的一般流程是：选定网站主题，规划结构，设计制作，测试修改，发布站点等。2、设计一个简单网站确定网站的主题主题定位要准，内容要精。题材最好是自己擅长或者喜爱的内容。设计网站的根本结构网站的主题确定后，下一步的任务就是根据主题，将所要表达的信息进行划分，确定网站的根本结构

22、，最终完成网站的栏目设计。3、设计主页的布局与色彩主页的布局应根据网站的类型而设计，不同网站的主页有不同的风格，但应具备标题、网站标识logo、导航、网页内容等根本布局元素。常见的网页布局：“同字形、“匡字形、“回字形、“川字形绘制网页布局根据网站的内容和自己的设计风格确定了主页根本构思后，先不要急于动手。一般来说，网页设计师们会先在纸上绘制自己网站的蓝图。色彩搭配选择色彩要和网页的内涵相关联，网页色彩搭配时，网页的色彩要容易引人注目，色彩和表达的内容气氛相适合。常用的配色方案：暖色调、冷色调、比照色调【课堂小结】了解设计一个简单的网页的根本过程【布置作业】1整理笔记2复习、预习新课【复习提问

23、】了解FrontPage2003的根本功能【导入新课】上一课同学们已经学会了如何启动Frontpage 2000，并且知道Frontpage 2000是用来制作网页的工具，但是有了好的工具我们还要学会如何来利用它做出好的网页来。今天我们就来学习如何制作一个简单的网页。【新课讲解】第3章 设计一个简单的网页1、启动Frontpage 2003。2、根据以下步骤进行。1请同学们单击工具栏上的“新建按钮，建立一个新的网页。注意讲解这个时候看不到任何东西。2请同学们利用键盘输入文字：“欢送进入星星网！3请同学们按照要求设置字体和对齐方式。选择字体大小为7号字，并选择对齐方式为居中方式进行。4通过键盘自

24、己调节文字在页面中的位置。5完成后可以请同学们在“编辑区点击“预览方式看看作完后在网页的显示效果，如有不满意及时调整。6完成后教师可以选折先做好的同学演示给没有完成的同学看。3、课堂练习1、在网页中输入文字“欢送你的光临！注意文字设置为7号，并居中显示。2、请同学们自主练习输入一个自我介绍的网页内容，教师可以指定文字内容和设置的格式，也可以由学生自己设置。要求保存到D:班级名自己名字为以后的课做准备。【课堂小结】1、使学生初步认识Frontpage 2003中文字的添加。 2、使学生初步利用Frontpage 2003制作简单的网页。【布置作业】1整理笔记2复习、预习新课【复习提问】Front

25、Page2003的简单操作【导入新课】最开始，网页呈现在你面前的时侯，它就好似一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假设你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此根底上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的根本概念。【新课讲解】第4章 设计网页布局由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800 x600的情况下，页面的显示尺寸为：7

26、80 x428个象素；分辨率在640 x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否那么不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访

27、问者浏览。什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。对于不同的形状，它们所代表的意义是不同的。比方矩形代表着正式，规那么，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结, HYPERLINK :/ chinasim 会员卡设计，温暖，平安等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造

28、型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。页头又可称之为页眉，页眉的作用是定义页面的主题。比方一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起

29、，文本已经可以按照自己的要求放置到页面的任何位置。页脚和页头相照应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将表达在这里。除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。 【课堂小结】了解网页布局的根本概念【布置作业】1整理笔记2复习、预习新课【复习提问】FrontPage2003的网页布局的根本内容【导入新课】修饰网页中的文字和背景【新课讲

30、解】第4章 设计网页布局【站点的翻开】分别找学生介绍自己的不同的翻开方法会出现直接翻开站点文件夹现象和启动FrontPage软件后“文件“翻开站点两种情况初学者易出错点这两种情况中哪一种能对网页进行修改？试试看通过出错并修正错误来学习新知识一种是浏览方式，一种是编辑方式【任务】大家已经知道哪一种翻开站点的方法能对不满意的网页进行修改了，接下来我们要对网页进行一些美化工作了。下面大家比较一下哪一张网页比较吸引你？并说说原因？播送展示比照网页学生通过观察了解到：文字进行了字体变大着色、居中修饰、网页的背景变颜色。引导1：我们在学习文字处理软件时也对文档进行修饰，大家能不能也对我们的网页中的文字进行

31、修饰呢？能不能也给我们的网页换个漂亮的背景呢？大家动手试试看学生进行实践活动播送展示学生网页文字修饰展示的过程中提示学生：1尽量使用黑体、楷体、宋体、仿宋体、幼圆体这5种标准字体，以便网上其他计算机能顺利显示网页是的文字；2合理搭配网页中的文字与背景的颜色，以到达赏心悦目的效果。引导2：在网页中还有一个细节之处不知大家发现了没有？水平线学生答复：我们也试着给自己的网页中添加水平线来美化我们的网页。学生动手实践并互相交流问题：能否将水平线加粗变颜色呢？右键的属性学生动手发现【任务】：在网页中一种颜色做背景好似有点儿枯燥，能不能换一个淡雅一点的图片做背景呢？提示：图片做背景应该还在“背景对话框中找

32、。学生动手实践播送展示学生的发现注意点：1在网页中插入的图片或动画、音乐、小电影都要及时保存，并保存在网站images文件夹中，以防止发布到网上出现链接错误；2想看网页存完后的结果可以使用“预览，所看即所得。【任务延伸】：大家使用图片修饰的是一张网页背景，那么我做了多张网页的背景也用这种方法就太累人了，能不能有一种“一劳永逸的方法让所有的网页与第一张相同呢？方法是有的，“格式菜单下的“主题大家试试看注意点：1使用了主题后，再使用背景是不能的，必须先删除所用的主题，方法是：“主题对话框中使用“无主题即可；2想应用所有的网页时选择“所有网页这一项。【任务延伸】1【举一反三】从“文字颜色“网页背景单

33、色“网页背景图片“多个网页背景一致主题，由浅入深，形成线与珠的关系。2使用右键的“快捷菜单便利。【课堂小节】1本节课在文字修饰块内容教师可以略说，学生自己动手实践，但其中就存在一个问题，假设文字处理软件没有学习，此内容就会影响本节课的完成效果。2任务延伸这块内容可根据整体学生掌握情况加以取舍，也可对个别学习较快的做为知识的延伸内容。3内容衔接比较紧凑。【布置作业】翻开你的素材库完成?多彩民族?的网页制作并做修饰教师展示一张展示学生作业并点评【复习提问】FrontPage2003的网页布局的根本内容【导入新课】修饰网页中的文字和背景【新课讲解】第5章 网页装饰设计一文字的修饰导入第一个新知识点：

34、制作的网页，所有的文档内容已经输入，但视觉效果不是很好，你们能帮他把网页“我们一家人“梳妆打扮一下吗？任务一：为网页“梳妆打扮。教师翻开网页A，引导学生回忆在word中学过对文档的修饰及美化，过渡到网页的文字修饰，方法和Word文档的编排几乎一样。然后和学生一起，共同探讨美化网页的好方法。同时请学生注意FrontPage 2003工具栏中哪些工具栏按钮与Word 2003不同。设置网页的背景问题导入下一新知识点：我们刚刚已经把网页“我们一家人的文字打扮得很漂亮了，那么大家能否再给它穿上一件“花衣服，让它看起来更漂亮些呢？任务二：给网页“穿上花衣。添加背景音乐第三个新知识衔接：刚刚大家给网页“我

35、们一家人添加了背景、修饰了文字，已经够漂亮了，但大家能否给它再加上悦耳的音乐，让我们的网页“有声有色呢？任务三：让网页“有声有色。然后对添加背景音乐的前后效果进行比照。四插入水平线导入第四知识点：我们的网页根本上可以说是“有声有色了，但看起来布局还有点零乱，各局部之间界限不明确，那么怎样才能使它条理清楚，层次清楚呢？那就是插入“水平线。任务四：使网页“条理清楚、层次清楚。提示：在网页中使用水平线是分隔章节、主题和其他元素的方法。如果不喜欢固定格式的水平线，还可以插入图片作为水平线。【课堂小节】本节课主要学习了网页文字修饰，通过设置“网页属性、插入“水平线等操作，把网页变得整洁有序，美观大方，还

36、给网页添加背景音乐，使网页“有声有色。【布置作业】1整理笔记2复习、预习新课【复习提问】FrontPage2003的网页装饰设计的根本内容【导入新课】在学生初步认识并掌握了网页制作根本操作的根底上，指导学生对网页文字进行修饰，并配上漂亮的背景、动听的音乐，以及插入水平线分隔层次，从而完成对网页“我们一家人的装扮、修饰、美化任务，提高自身艺术修养。【新课讲解】第5章 网页装饰设计一文字的修饰导入第一个新知识点：制作的网页，所有的文档内容已经输入，但视觉效果不是很好，你们能帮他把网页“我们一家人“梳妆打扮一下吗？任务一：为网页“梳妆打扮。教师翻开网页A，引导学生回忆在word中学过对文档的修饰及美

37、化，过渡到网页的文字修饰，方法和Word文档的编排几乎一样。然后和学生一起，共同探讨美化网页的好方法。同时请学生注意FrontPage 2003工具栏中哪些工具栏按钮与Word 2003不同。并要求学生掌握技巧：变化文字大小可使文章更显活泼，便于突出重点。给一些特殊的文字加上特殊的修饰以进行强调。改变文字的颜色刺激视觉，给人留下深刻印象。然后学生亲自实践操作练习，完成任务一，灵活熟练地对网页文字进行修饰。并请优秀作品的小组代表前台演示，教师综合评点。最后将网页文字修饰前后的效果进行比照，让学生体会哪个更美。设置网页的背景问题导入下一新知识点：我们刚刚已经把网页“我们一家人的文字打扮得很漂亮了，

38、那么大家能否再给它穿上一件“花衣服，让它看起来更漂亮些呢？任务二：给网页“穿上花衣。让学生翻开网页A自主探究练习，尝试发现新知，深入感知综合实践，完成任务二。然后展示优秀作品，并进行设置网页背景前后效果比照，感受“穿上花衣的视觉效果。添加背景音乐第三个新知识衔接：刚刚大家给网页“我们一家人添加了背景、修饰了文字，已经够漂亮了，但大家能否给它再加上悦耳的音乐，让我们的网页“有声有色呢？任务三：让网页“有声有色。翻开网页，让学生实践，完成任务三，感受其“有声有色的良好听觉效果。并请优秀作品的小组代表前台展示。然后对添加背景音乐的前后效果进行比照。四插入水平线 导入第四知识点：我们的网页根本上可以说

39、是“有声有色了，但看起来布局还有点零乱，各局部之间界限不明确，那么怎样才能使它条理清楚，层次清楚呢？那就是插入“水平线。任务四：使网页“条理清楚、层次清楚。提示：在网页中使用水平线是分隔章节、主题和其他元素的方法。如果不喜欢固定格式的水平线，还可以插入图片作为水平线。让学生实践操作，完成任务四，细心观察插入水平线后的变化然后展示优秀作品，将插入水平线前后效果比照，深刻理解插入水平线的意义。【课堂小节】在网页中设置网页背景、添加背景音乐和插入水平线，综合运用素材，使自己的网页更美观。【布置作业】1整理笔记2复习、预习新课【复习提问】FrontPage2003的网页装饰设计的根本内容【导入新课】超

40、链接在本质上属于一个 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页的一局部，它是一种允许我们同其他网页或站点之间进行连接的元素。【新课讲解】第6章 创立超链接1、定义超链接在本质上属于一个 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页的一局部，它是一种允许我们同其他网页或站点之间进行连接的元素。2、类型按照链接路径的不同, HYPERLINK :/baike.baidu /view/828.htm t _blank 网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 3、

41、超链接对象如果按照使用对象的不同，网页中的链接又可以分为：文本超链接， HYPERLINK :/baike.baidu /view/42116.htm t _blank 图像超链接， HYPERLINK :/baike.baidu /view/8409.htm t _blank E-mail链接，锚点链接， HYPERLINK :/baike.baidu /view/130979.htm t _blank 多媒体文件链接，空链接等。 超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，那么相当于指示 HYPERLINK :/baike.baidu /view/7718.

42、htm t _blank 浏览器移至同一网页内的某个位置，或翻开一个新的网页，或翻开某一个新的WWW网站中的网页。 4、网页超链接网页上的超链接一般分为三种：一种是绝对URL的超链接。URLUniform Resource Locator就是 HYPERLINK :/baike.baidu /view/245485.htm t _blank 统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。 :/ xxx. com/ 第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去； 还有一种称为同一网页的超链接，这种超链接又叫做书签。 5、动态静态超链

43、接还可以分为动态 HYPERLINK :/baike.baidu /view/1383410.htm t _blank 超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象/7262.htm t _blank 动画一样动起来或改变颜色的效果，也可以实现鼠标移到 HYPERLINK :/baike.baidu /view/19159.htm t _blank 图片上图片就产生 HYPERLINK :/baike.baidu /view/1308625.htm t _blank 反色或朦胧等等的效果。而静态超链接

44、，就是没有动态效果的超链接。 6、颜色在网页中，一般文字上的超链接都是蓝色当然，用户也可以自己设置成其他颜色，文字下面有一条 HYPERLINK :/baike.baidu /view/547703.htm t _blank 下划线。当移动 HYPERLINK :/baike.baidu /view/265736.htm t _blank 鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变默认为紫色。只有图像的超链接访问后颜色不会发生变化。【课堂小节】

45、了解超链接的定义、类型、链接对象；了解什么是网页超链接、动态超链接、静态超链接；了解超链接的颜色【布置作业】1整理笔记2复习、预习新课【复习提问】FrontPage2003的网页装饰设计的根本内容【导入新课】超链接在本质上属于一个 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页的一局部，它是一种允许我们同其他网页或站点之间进行连接的元素。【新课讲解】第6章 创立超链接一、教师演示在网页中添加超链接到其它网站方法：选中要制作超链接的文字，单击工具栏上的“插入超链接按钮，翻开“插入超链接对话框：1.超链接到其它网站：在“插入超链接对话框中，在UR

46、L(网址)文本框中，填入该网站网址即可：演示：超链接“HYPERLINK :/8/效实中学到网站 或.28；创立指向一个网页或文件的超链接：演示：超链接到 “ HYPERLINK 第26讲 建网站的概念及工具简介.doc 第26讲 建网站的 ；注意：我们可以创立指向一个新网页再输入内容，但要保存好该新网页，然后建立超链接指向该新网页。演示制作发送电子邮件的超链接。示：超链接或“ HYPERLINK mailto:nbxstom ?subject=同学们好！ 我的信箱超链接到 HYPERLINK mailto:nbxstom nbxs；4.超链接到书签： 功能：跳转到同一网页内的指定位置书签位置

47、 ，方法如下：1建立书签：确定要跳到的位置选中要跳转到的目标位置的文字如：“建立书签或图片，单击“插入菜单下的“书签，输入书签名称如：“建立书签,点击“添加，就建立了“建立书签。2建立超链接到书签：建立书签后，我们就可以建立一个跳到书签的超链接，如：点击本讲稿的开头文字“ HYPERLINK l 学习目标 学会书签的设置和链接，就会跳到建立了的书签文字“建立书签的位置上。演示再次演示一次：要求点击书签图标，就会跳到本讲稿的开头“学习目标位置上：选中本讲稿的开头“学习目标位置，建立“学习目标书签；不但网页上可以建立上述各超链接，在其它格式文件中也可以建立超链接，例如WordExcel，方法类似演

48、示。二、学生练习建立一个内容是本讲稿的网页，在网页中添加各种超链接：1、超链接到其它网站；2、创立指向一个网页或文件的超链接；3、制作发送电子邮件的超链接；4、超链接到书签。【课堂小节】1.学会如何超链接到网站2学会如何超链接到网页或文件或E-mail 3. HYPERLINK l 建立书签学会书签的设置和链接【布置作业】1整理笔记2复习、预习新课 【复习提问】学会创立超链接【导入新课】表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦

49、目。 【新课讲解】第7章 巧用表格表格的根本用法。表格的HTML根本语法table标签的参数。table标签可以含以下参数。border 表格边框cellspacing 表元之间的空白距离cellpadding 表元内部的空白距离width 表格宽度可以用%或者具体数据表示height 表格高度表格的对齐方式.表格内的文字对齐。语法： 其中#可以设定的参数有：left 横向居左；center 横向居中；right 横向居右top 纵向居顶；middle纵向居中；bottom 纵向居底2.表格在页面内的对齐。如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数：其中#可以设定为

50、left(居左)，right(居右)表格的嵌套表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理同样使用语句。表格的色彩表格的色彩也在标签里设置，参数有：bgcolor 背景颜色bordercolor 边框颜色bordercolorlight 立体边框亮色bordercolordark 立体边框暗色 语法为： 其中RRGGBB分别为RGB三色的16进制数值例如：borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5 cellSpacing=0 bordercolorlight=#000000【课堂小

51、节】表格的嵌套；表格的色彩；表格的对齐方式；表格的HTML根本语法；table标签的参数【布置作业】1整理笔记2复习、预习新课【复习提问】学会创立超链接【导入新课】表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦目。 【新课讲解】第7章 巧用表格集中学生注意力，准备上课。 通过提问考察学生对插入图像根底知识的了解。 如何在网页上插入一张图片，并调整图片的大小、位置？ 学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、

52、地址、联系 。 通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格，进而了解表格在网页制作中的广泛应用。 在FrontPage中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。 提出任务：利用表格规划、布局作品展示网页。 依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1、“table2、“table3和“table4。依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。 1分析网页布局 教师带着学生进行页面表格分析。 引导学生了解：“tab

53、le1是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套一个1行5列的表格“table1-1”，用于放置五个导航按钮。 “table2是一个1行4列的表格。左右单元格为空白区域，中间两个单元格分别用于放置“作品展示和“友情链接两张图像。 “table3是一个1行3列的表格。左右单元格为空白区域，中间单元格用于放置作品分类标题和图像。在中间单元格嵌套一个6行1列的表格“table3-1”。“table3-1”表格的每一行再嵌套一个表格，其中第一、三、五行分别嵌套一个1行2列的表格，用于放置图标及作品题目；第二、四、六行分别嵌套一个1行5列的表格，放置三幅作品及左右两个空白区域。 “t

54、able4是一个3行1列的表格，第一行是空白区域，第二行通过设置行属性显示为一条细线，第三行放置版权信息。 重点理解如下内容： 页面布局由4个大表格组成，分别分析每个表格的作用。 b什么是嵌套表格插入嵌套表格是指在表格的单元格中插入新的表格。和嵌套表格的作用。 教师举一些网页布局的实际例子让学生进行协同分析。总结：通过以上几个实际网站页面的例子，介绍表格布局知识，即许多网页的表格布局可分为上、中、下三个局部，上面局部放置网页的标题，中间局部放置网页的主要内容,下局部放置制作者的信息及版权信息等。上、中、下三个局部又包含各自的嵌套表格来布局相应的内容。 提问：回想以前翻开一张网页的时候是所有的内

55、容都同时全部显示吗？如果不是的话是怎样进行显示的呢？为什么这样显示？表格布局在这里有什么作用？ 总结：如果使用表格布局网页结构不合理，会降低网页浏览速度。因为浏览器在解析网页时，先将整个网页的结构下载完后才显示内容，如果不使用嵌套表格布局网页只使用一个表格会非常复杂，浏览者要等待很长时间才能看到网页内容。通常用表格布局页面时，应该遵循以下几点： a整个网页不要放在一个表格里，尽量使用多个表格来进行布局。 b表格的嵌套层次尽量要少。 c单一表格的结构尽量整齐，不要太复杂。 2创立目录结构 在FrontPage中翻开“幽幽我心的个人网站，依据第一单元建立的网站目录结构，在本栏目“works文件夹中

56、新建文件“，然后把光盘中本单元素材中的“wkimages、“flash、“links文件夹复制到本栏目“works文件夹中。本栏目目录结构如课本表3-1所示。 3创立表格的知识 练习插入一个表格：学会使用菜单、“插入栏、快捷键创立表格。 答复表格对话框中如下选项的作用： “页眉选项组、“标题、“对齐标题、“摘要。 4自己动手 通过完本钱任务学习了： 创立表格 表格布局页面 表格在页面中的作用： 创立网页，在网页中插入一个6行5列的表格，宽500像素，边框粗细与单元格间距均为5像素，页眉选择“顶部，标题为“产品信息，保存并预览网页。 回想插入表格的几种方法，考虑页眉、标题等选项出现在哪个对话框的

57、选项卡中，并考虑如何设置创立表格的相关属性。 【课堂小节】 理解表格在网页设计中的作用。 掌握利用表格布局页面。 掌握创立表格的根本方法。 掌握创立嵌套表格。 掌握在网页中利用表格进行排版。【布置作业】1整理笔记2复习、预习新课【复习提问】表格的创立【导入新课】表单，在 HYPERLINK :/baike.baidu /view/828.htm t _blank 网页中的作用不可小视，主要负责数据采集的功能，比方你可以采集访问者的名字和email HYPERLINK :/baike.baidu /view/494802.htm t _blank 地址、调查表、留言簿等等。【新课讲解】第8章 表

58、单设计1、表单的组成一个表单有三个根本组成局部： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到效劳器的方法。 表单域：包含了 HYPERLINK :/baike.baidu /view/1137200.htm t _blank 文本框、密码框、 HYPERLINK :/baike.baidu /view/2115164.htm t _blank 隐藏域、多行文本框、 HYPERLINK :/baike.baidu /view/1143823.htm t _blank 复选框、单项选择框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据

59、传送到效劳器上的CGI HYPERLINK :/baike.baidu /view/54.htm t _blank 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 为了顾及不同的 HYPERLINK :/baike.baidu /view/8972.htm t _blank 网页设计工具，本文只讲述代码的设计，不具体讲述操作方法，下面就是表单的HTML代码设计要点：2、表单标签 功能：用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到效劳器或者 HYPERLINK :/baike.baidu /view/1524.htm t _blank 电子邮件里。

60、语法：. . . 属性解释见下表： HYPERLINK :/baike.baidu /view/494802.htm t _blank 地址(提交给程式)或一个电子邮件地址. method=get或post指明提交表单的 方法.可能的值为： post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至效劳器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用. 例如： . 表示表单将向 :/ xxx /test.asp以post的方式提交，提交的结果在新的页面显示，数据提交