FrontPage网页制作教案.doc

《FrontPage网页制作教案.doc》由会员分享，可在线阅读，更多相关《FrontPage网页制作教案.doc（49页珍藏版）》请在三一办公上搜索。

1、【导入新课】网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。【新课讲解】第一章 网页设计与制造概论第1节 什么是网页网页(web page)，是网站中的一页，通常是HTML格式（文件扩展名为。html或。htm或。asp或。aspx或。php或。jsp等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。1、什么是网

2、页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。 网页（英文：Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（ URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是万维网中的一“页”，通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。 2、构成网页

3、元素文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。3、网页的类型通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML文件。不同的后缀， 分别代表不同类型的网页文件，例如以 CGI 、 ASP、 PHP 、 JSP 甚至其他更多。【课堂小结】了解什么是网页；了解构成网页的基本元素；了解网页的类型【布置作业】整理笔记复习、预习新课【复习提问】了解什么是网页；了解构成网页的基本元素；了解网页的类型【导入新课】网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的

4、愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。【新课讲解】第一章 网页设计与制造概论第2节 www服务1、概述 WWW服务（3W服务）也是目前应用最广的一种基本互联网应用，我们每天上网都要用到这种服务。通过WWW服务，只要用鼠标进行本地操作，就可以到达世界上的任何地方。由于WWW服务使用的是超文本链接（HTML），所以可以很方便的从一个信息页转换到另一个信息页。它不仅能查看文字

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

6、lash是Macromedia公司网页三剑客之中的“闪电”，其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。 photoshop 图像处理软件，能更好的工具网页的需要美化你的图片，操作简单。【课堂小结】了解什么是网页；了解构成网页的基本元素；了解网页的类型【布置作业】（1）整理笔记（2）复习、预习新课【复习提问】了解什么是网页；了解构成网页的基本元素；了解网页的类型【导入新课】Frontpage，是微软公司出品的一款网页制作入门级软件。FrongPage使用方便简单，会用Word就能做网页，微软在2006年年底前将停止提供FrontPage软件并改名为SharePoin

7、t Designer。【新课讲解】第2章 FrontPage2003简介FrontPage的新用处和说明FrontPage2003是比较有用的offline2003中的一个，有许多刚买电脑想用它的人们，总是找不到：咦，FrontPage2003哪里去了？其实，FrontPage2003原本电脑中没有安装过的，所以想使用它的人们，要另行安装，在你买电脑的时候，不会有FrontPage。 突出的9个新功能FrontPage 2003相比FrontPage 2000来说在功能上增强了不少，下面我们一起来看看新版本中比较突出的9个新功能： 1.自定义浏览器分辨率预览检查在设计网页时，可实时调节当前页面

8、为在客户端显示的分辨率，以便预览当前效果。大家查看FrontPage 2003界面右下端状态上显示网页大小的区域，默认为792533，右键单击后，弹出如图1所示菜单，在此可设置任意分辨率方便进行预览。 2.描摹图像大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，就是通过创建一个图像（一般为网页的效果图）为参照物，以便于网页的设计制作。在Dreamweaver软件的各个版本中基本上都有这个功能，现在高傲的微软也开始学习这个优点了。点击菜单栏上的“视图描摹图像设置”，在弹出对话框中，选择指定图像，再设置其坐标（即在设计页面上显示的位置）。最后，设置透明度，再确认即可。这个描摹图像只是

9、显示在FrontPage 2003的设计视图中，不会在你制作完毕的页面中显示出来。 3.层功能过去，FrontPage最欠缺的功能之一就是无法像Macromedia Dreamweaver那样使用层。而层的应用在网页制作中已经是不可或缺了。好在FrontPage 2003终于支持了此项功能。 点击菜单栏上的“插入层”，将在当前页面中显示一个默认为“layer1”的层。用鼠标在各节点上拖曳，调节其大小，然后把光标插入点置于层中，输入所需的文字（图2）。另外，将光标定位于该层内，在其右键弹出菜单中选择“层属性”，就可在界面右侧的任务窗格上设置该层的ID，边框和底纹的样式、边距，以及定位样式与位置等

10、参数。 4.插入交互式按钮点击菜单栏上的“插入交互式按钮”，弹出如图3所示对话框，在“按钮”标签页中，设置按钮的显示文字、样式以及链接。在“字体”标签页中设置其相关选项。最后，我们再切换到“图像”标签页，设置悬停图像及鼠标键按下时的图像等。 5.行为的应用行为一直是Dreamweaver的强项，而FrontPage2003现在也有这个功能了。 点击菜单栏上的“格式行为”，查看界面右侧的“行为”窗格，点击“插入”向下箭头按钮，在弹出菜单中可选择播放声音、弹出消息、调用脚本及弹出菜单等事件。在选择指定的插入对象后，将弹出相应的设置对话框，在其中按需操作。所有添加的行为事件，均会显示在列表中。 小知

11、识：行为是事件和由该事件触发的动作的组合。由于行为代码是客户端的javascript代码，因此它无需服务器的支持就可触发事件。 6.使用网页重定向在FrontPage 2003中，点击菜单栏上的“工具中文简繁转换插入重定向代码”，在弹出对话框中，设置简体页面网址及繁体页面网址。而后，插入的代码将通过浏览器对支持语言的检测，实现自动转向。 7.检查网页错误点击菜单栏上的“工具辅助功能”，在弹出对话框中设置检查范围、内容及显示对象，接着点击“检查”按钮即可。利用此项功能，就可快速找出指定网页是否有错误，并可查看问题之所在。 8.优化HTML代码FrontPage系列过去在代码效率方面做得相当不好，

12、经常产生大量的垃圾代码。而在FrontPage 2003中，点击菜单栏上的“工具优化HTML”，弹出如图4所示对话框，在其中可酌情选择删除对象，包括注释性内容及空白信息等，从而删除大量垃圾代码，提高网页代码执行的效率，为网页“减肥”。 9.规划页面布局一个成功的设计作品，大都需要事先为其规划设计布局，以便于宏观控制其内容。在Dreamweaver中，从其4.0版本开始就加入了页面规划视图来方便设计者对页面布局进行设计，如今FrontPage 2003也具有这个功能了。 点击菜单栏上的“表格布局表格和单元格”，在程序右侧窗格中将显示相应的属性设置。我们着重查看“表格布局”下拉列表，在其中有若干布

13、局样式可供选择。当我们选择一种合适的应用于当前页面上后，可随时在设计视图中按需自行调节其布局样式。【课堂小结】了解FrontPage2003的基本功能【布置作业】（1）整理笔记（2）复习、预习新课【复习提问】了解FrontPage2003的基本功能【导入新课】Frontpage，是微软公司出品的一款网页制作入门级软件。FrongPage使用方便简单，会用Word就能做网页，微软在2006年年底前将停止提供FrontPage软件并改名为SharePoint Designer。【新课讲解】一、新建网站（提示：如果图片觉得小，将鼠标移到图片上，向上滚动鼠标滚轮，图片会放大）打开FrontPage20

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

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

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

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

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

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

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

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

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

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

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

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

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

27、“主题”对话框中使用“无主题”即可；2想应用所有的网页时选择“所有网页”这一项。【任务延伸】1【举一反三】从“文字”颜色“网页”背景（单色）“网页”背景（图片）“多个网页”背景一致（主题），由浅入深，形成线与珠的关系。2使用右键的“快捷菜单”便利。【课堂小节】1本节课在文字修饰块内容教师可以略说，学生自己动手实践，但其中就存在一个问题，若文字处理软件没有学习，此内容就会影响本节课的完成效果。2任务延伸这块内容可根据整体学生掌握情况加以取舍，也可对个别学习较快的做为知识的延伸内容。3内容衔接比较紧凑。【布置作业】打开你的素材库完成多彩民族的网页制作并做修饰（教师展示一张）展示学生作业并点评【复习

28、提问】FrontPage2003的网页布局的基本内容【导入新课】修饰网页中的文字和背景【新课讲解】第5章 网页装饰设计（一）文字的修饰导入第一个新知识点：制作的网页，所有的文档内容已经输入，但视觉效果不是很好，你们能帮他把网页（“我们一家人”）“梳妆打扮”一下吗？任务一：为网页“梳妆打扮”。教师打开网页A，引导学生回忆在word中学过对文档的修饰及美化，过渡到网页的文字修饰，方法和Word文档的编排几乎一样。然后和学生一起，共同探讨美化网页的好方法。同时请学生注意FrontPage 2003工具栏中哪些工具栏按钮与Word 2003不同。设置网页的背景问题导入下一新知识点：我们刚才已经把网页“

29、我们一家人”的文字打扮得很漂亮了，那么大家能否再给它穿上一件“花衣服”，让它看起来更漂亮些呢？任务二：给网页“穿上花衣”。添加背景音乐第三个新知识衔接：刚才大家给网页“我们一家人”添加了背景、修饰了文字，已经够漂亮了，但大家能否给它再加上悦耳的音乐，让我们的网页“有声有色”呢？任务三：让网页“有声有色”。然后对添加背景音乐的前后效果进行对比。（四）插入水平线导入第四知识点：我们的网页基本上可以说是“有声有色”了，但看起来布局还有点零乱，各部分之间界限不明确，那么怎样才能使它条理清楚，层次分明呢？那就是插入“水平线”。任务四：使网页“条理清楚、层次分明”。提示：在网页中使用水平线是分隔章节、主题

30、和其他元素的方法。如果不喜欢固定格式的水平线，还可以插入图片作为水平线。【课堂小节】本节课主要学习了网页文字修饰，通过设置“网页属性”、插入“水平线”等操作，把网页变得整洁有序，美观大方，还给网页添加背景音乐，使网页“有声有色”。【布置作业】（1）整理笔记（2）复习、预习新课【复习提问】FrontPage2003的网页装饰设计的基本内容【导入新课】在学生初步认识并掌握了网页制作基本操作的基础上，指导学生对网页文字进行修饰，并配上漂亮的背景、动听的音乐，以及插入水平线分隔层次，从而完成对网页“我们一家人”的装扮、修饰、美化任务，提高自身艺术修养。【新课讲解】第5章 网页装饰设计（一）文字的修饰导

31、入第一个新知识点：制作的网页，所有的文档内容已经输入，但视觉效果不是很好，你们能帮他把网页（“我们一家人”）“梳妆打扮”一下吗？任务一：为网页“梳妆打扮”。教师打开网页A，引导学生回忆在word中学过对文档的修饰及美化，过渡到网页的文字修饰，方法和Word文档的编排几乎一样。然后和学生一起，共同探讨美化网页的好方法。同时请学生注意FrontPage 2003工具栏中哪些工具栏按钮与Word 2003不同。（并要求学生掌握技巧：变化文字大小可使文章更显活泼，便于突出重点。给一些特殊的文字加上特殊的修饰以进行强调。改变文字的颜色刺激视觉，给人留下深刻印象。）然后学生亲自实践操作练习，完成任务一，灵

32、活熟练地对网页文字进行修饰。并请优秀作品的小组代表前台演示，教师综合评点。最后将网页文字修饰前后的效果进行对比，让学生体会哪个更美。设置网页的背景问题导入下一新知识点：我们刚才已经把网页“我们一家人”的文字打扮得很漂亮了，那么大家能否再给它穿上一件“花衣服”，让它看起来更漂亮些呢？任务二：给网页“穿上花衣”。让学生打开网页A自主探究练习，尝试发现新知，深入感知综合实践，完成任务二。然后展示优秀作品，并进行设置网页背景前后效果对比，感受“穿上花衣”的视觉效果。添加背景音乐第三个新知识衔接：刚才大家给网页“我们一家人”添加了背景、修饰了文字，已经够漂亮了，但大家能否给它再加上悦耳的音乐，让我们的网

33、页“有声有色”呢？任务三：让网页“有声有色”。打开网页，让学生实践，完成任务三，感受其“有声有色”的良好听觉效果。并请优秀作品的小组代表前台展示。然后对添加背景音乐的前后效果进行对比。（四）插入水平线 导入第四知识点：我们的网页基本上可以说是“有声有色”了，但看起来布局还有点零乱，各部分之间界限不明确，那么怎样才能使它条理清楚，层次分明呢？那就是插入“水平线”。任务四：使网页“条理清楚、层次分明”。提示：在网页中使用水平线是分隔章节、主题和其他元素的方法。如果不喜欢固定格式的水平线，还可以插入图片作为水平线。让学生实践操作，完成任务四，细心观察插入水平线后的变化然后展示优秀作品，将插入水平线前

34、后效果对比，深刻理解插入水平线的意义。【课堂小节】在网页中设置网页背景、添加背景音乐和插入水平线，综合运用素材，使自己的网页更美观。【布置作业】（1）整理笔记（2）复习、预习新课【复习提问】FrontPage2003的网页装饰设计的基本内容【导入新课】超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。【新课讲解】第6章 创建超链接1、定义超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。2、类型按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 3、超链接对象如果按照使用对象的不同，

35、网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。 超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。 4、网页超链接网页上的超链接一般分为三种：一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。http:/www.xxx. com/ 第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页

36、上面去； 还有一种称为同一网页的超链接，这种超链接又叫做书签。 5、动态静态超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接，就是没有动态效果的超链接。 6、颜色在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网

37、站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化。【课堂小节】了解超链接的定义、类型、链接对象；了解什么是网页超链接、动态超链接、静态超链接；了解超链接的颜色【布置作业】（1）整理笔记（2）复习、预习新课【复习提问】FrontPage2003的网页装饰设计的基本内容【导入新课】超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。【新课讲解】第6章 创建超链接一、教师演示在网页中添加超链接到其它网站方法：选中要制作超链接的文字，单击工具栏上的“插入超链接”按钮，打开“插入超链接”对话框

38、：1.超链接到其它网站：在“插入超链接”对话框中，在URL(网址)文本框中，填入该网站网址即可：演示：超链接“效实中学”到网站 或10.24.8.28）；创建指向一个网页或文件的超链接：演示：超链接到 “第26讲 建网站的概念及工具简介.doc” ；注意：我们可以创建指向一个新网页（再输入内容），但要保存好该新网页，然后建立超链接指向该新网页。（演示）制作发送电子邮件的超链接。示：超链接或“我的信箱”超链接到nbxs；4.超链接到书签： 功能：跳转到同一网页内的指定位置（书签位置 ），方法如下：（1）建立书签：（确定要跳到的位置）选中要跳转到的目标位置的文字（如：“建立书签”）或图片，单击“插

39、入”菜单下的“书签”，输入书签名称（如：“建立书签”）,点击“添加”，就建立了“建立书签”。（2）建立超链接到书签：建立书签后，我们就可以建立一个跳到书签的超链接，如：点击本讲稿的开头文字“学会书签的设置和链接”，就会跳到建立了的书签文字“建立书签”的位置上。（演示）再次演示一次：要求点击书签图标，就会跳到本讲稿的开头“学习目标”位置上：选中本讲稿的开头“学习目标”位置，建立“学习目标”书签；不但网页上可以建立上述各超链接，在其它格式文件中也可以建立超链接，例如WordExcel，方法类似（演示）。二、学生练习建立一个内容是本讲稿的网页，在网页中添加各种超链接：1、超链接到其它网站；2、创建指

40、向一个网页或文件的超链接；3、制作发送电子邮件的超链接；4、超链接到书签。【课堂小节】1.学会如何超链接到网站2学会如何超链接到网页或文件或E-mail 3. 学会书签的设置和链接【布置作业】（1）整理笔记（2）复习、预习新课 【复习提问】学会创建超链接【导入新课】表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦目。 【新课讲解】第7章 巧用表格表格的基本用法。表格的HTML基本语法table标签的参数。table标签可以含下列参数。

41、border 表格边框cellspacing 表元之间的空白距离cellpadding 表元内部的空白距离width 表格宽度（可以用%或者具体数据表示）height 表格高度表格的对齐方式.表格内的文字对齐。语法： 其中#可以设定的参数有：left 横向居左；center 横向居中；right 横向居右top 纵向居顶；middle纵向居中；bottom 纵向居底2.表格在页面内的对齐。如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数：其中#可以设定为left(居左)，right(居右)表格的嵌套表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处

42、理同样使用语句。表格的色彩表格的色彩也在标签里设置，参数有：bgcolor 背景颜色bordercolor 边框颜色bordercolorlight 立体边框亮色bordercolordark 立体边框暗色 语法为： 其中RRGGBB分别为RGB三色的16进制数值例如：borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5 cellSpacing=0 bordercolorlight=#000000【课堂小节】表格的嵌套；表格的色彩；表格的对齐方式；表格的HTML基本语法；table标签的参数【布置作业】（1）整理笔记（2）

43、复习、预习新课【复习提问】学会创建超链接【导入新课】表格(table)是页面的重要元素,是页面排版的主要手段。尽管DHTML中的层(layer)也可以实现网页元素的自由定位，但是表格显然更加方便编辑与修改。熟练掌握和运用表格的各种属性，可以让您的页面看起来赏心悦目。 【新课讲解】第7章 巧用表格集中学生注意力，准备上课。 通过提问考察学生对插入图像基础知识的了解。 如何在网页上插入一张图片，并调整图片的大小、位置？ 学生分组讨论如何在网页上制作一个班级通讯录，每行内容有“姓名、照片、地址、联系电话”。 通过上面讨论，引导学生认识利用表格制作通讯录是方便快捷的方式，再引导学生联想生活中用到的表格

44、，进而了解表格在网页制作中的广泛应用。 在FrontPage中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。本任务将学习在网页制作中如何灵活运用表格。 提出任务：利用表格规划、布局作品展示网页。 依据设计图样，可以使用四个表格把页面划分为四个区域，四个表格分别命名为“table1”、“table2”、“table3”和“table4”。依据不同的设计内容，这四个表格还需要进行相应的编辑与嵌套。 1分析网页布局 教师带领学生进行页面表格分析。 引导学生了解：“table1”是一个2行1列的表格。第一行用于放置网站标题及图像，第二行嵌套一个1行5列的表格“table

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

46、三行放置版权信息。 重点理解如下内容： 页面布局由4个大表格组成，分别分析每个表格的作用。 b什么是嵌套表格（插入嵌套表格是指在表格的单元格中插入新的表格。）和嵌套表格的作用。 教师举一些网页布局的实际例子让学生进行协同分析。总结：通过以上几个实际网站页面的例子，介绍表格布局知识，即许多网页的表格布局可分为上、中、下三个部分，上面部分放置网页的标题，中间部分放置网页的主要内容,下部分放置制作者的信息及版权信息等。上、中、下三个部分又包含各自的嵌套表格来布局相应的内容。 提问：回想以前打开一张网页的时候是所有的内容都同时全部显示吗？如果不是的话是怎样进行显示的呢？为什么这样显示？表格布局在这里有什么作用？ 总结：如果使用表格布局网页结构不合理，会降低网页浏览速度。因为浏览器在解析网页时，先将整个网页的结构下载完后才显示内容，如果不使用嵌套表格布局网页只使用一个表格会非常复杂，浏览者要等待很长时间才能看到网页内容。通常用表格布局页面时，应该遵循以下几点：