网页制作入门frontpage教材 4.docx
《网页制作入门frontpage教材 4.docx》由会员分享,可在线阅读,更多相关《网页制作入门frontpage教材 4.docx(21页珍藏版)》请在冰豆网上搜索。
网页制作入门frontpage教材4
网页制作4
第三单元
本单元以“可爱的中国”为主题,运用前2单元已经学过的
Frontpage2003网页制作知识、制作完成“可爱的中国”主题网站。
第一课规划网站,主要是设计网站结构图及创建“可爱的中
国”网站的站点,并为制作网站准备素材。
第二课设计框架网页,要求在左框架网页中始终显示导航栏,
并且通过导航栏链接的网页能够分别显示在右框架网页之中。
第三课学习设置网页过渡效果以给浏览者提供美妙且富有情
趣的视觉环境。
第四课
发布网站
本课第一任务是对“可爱的中国”网站进
行最后的检测。
第二任务是通过Windows系统中的“个人Web服务
器”,将自己的计算机作为服务器,发布网站。
第五课将制作网站的一般步骤进行如下归纳,学生检查自己制
作的网站并完成评价表的填写。
本单元中所用到的素材等,都保存在
相关网页的相应文件夹中。
知识要点:
第1课:
1、规划网站的结构。
2、创建空白站点。
3、为网站准备素材。
第二课:
1、创建框架网页。
2、保存框架网页。
第三课:
设置网页过渡效果。
第四课:
1、对网站进行检测。
2、利用个人Web服务器发布、测试网站
第一课时规划与准备
探究空间:
可爱的中国、悠久的历史、灿烂的文化。
接下来,就让我们以“可爱的中
国”为主题,从中国历史、地理、中国之最、中华民族等方面作为内容开始规划
一个“可爱的中国”网站。
11、规划网站的结构
在开始建立网站之前,首先要确定网站的主题,然后根据主题确定这个网
需要由多少个网页组成,以及这些网页之间的链接方式。
当我们确定了“可爱的
中国”网站的主题后,经过分析,决定用5个网页来表现这个主题,如下图所示。
主
页
中国历史
中国地理
中国之最
中华民族
图3-1.1
我们把上面的这个图称为网站结构图。
从这个图中可以看出,可爱的中国”
网站的结构分为2层。
在制作网站之前画出结构图,不但可以帮助我们规划网站
结构,使网站层次分明、条理清楚,还可以确定各个网页的内容,方便大家思考
各网页之间的链接方式。
22、创建站点
设计出“可爱的中国”网站的结构后,接下来我们要在FrontPage中创建这
个空白网站,然后再逐步补充其中的内容,最终形成一个内容丰富多彩的网站。
第1步:
启动FrootPage。
在右侧的“新建网站”任务窗格中单击
信息链接:
如果FrontPage窗口没有出现“新建网站”任务窗格,可单击菜单栏上的"
文件,在“文件”菜单栏中单击“新建”,然后在右侧的窗格中选择新建网页或"
站点。
第2步:
自动打开左下图所示“网站模板”对话框。
在“指定新网站的位置”
栏可以设置网站保存的位置,在这里我们点击“d:
\可爱的中国”使这个文件夹成
为保存网站文件的默认文件夹。
第3步:
单击
框消失,新站点建立成功。
图3-1.2
,出现“创建新站点提示框。
稍等一会儿,该提示
第4步:
单击视图栏中的“文件夹”图标
,此时FrontPage窗口中出现“文
件夹列表”窗格,在这里显示出新建网站中的文件夹。
而在窗口标题栏中则显示
目前网站的所在位置,如下图所示。
图3-1.3
由于我们建立的是空白站点,所以网站文件夹中没有任何网页文件,但系
统会自动生:
成上图所示的两个子文件夹,其中的“images”文件夹用于存放网站
中的图片文件。
若想关闭“文件夹列表”窗格,切换到网页编辑窗口,只要单击视图栏中
的“网页”图标即可。
信息链接:
FrontPage中提供了多种建立典型网站(如个人网站、公司展示网站、讨论网
站等)的向导及模板,利用合适的向导来建立网站可以简化制作过程。
上面介绍
了最基本的建立网站的方法。
有兴趣的同学可以试看在“Web站点模板”对话框
中选择不同的站点向导、建立风格独特的网站。
33、为网站准备素材
“可爱的中国”网站的空站点建起来了,接下来我们的工作是制作网页,
充实网站的内容前还有一件很重要的事要做,那就是为网站准备素材。
网页中除了文字之外,还包含图片丶声音丶动画等多种内容,这些资料要
在制作网页之前准备好,存放在一个文件夹中。
收集资料的方法很多,我们可以
在因特网上查找并下载所需要的资料;也可以在素材库中找素材;还可以利用扫描
仪、数码相机等设备来采集信息。
如下图所示,我们为制作“可爱的中国”网站准备的素材都存放在“D:
\网
站素材\可爱的中国”文件夹中。
在这个文件夹中有“动画”、“视频”、“图片”、
“文字”、“音频”和“其他”等几个文件夹,分别用来存放网站所需的相关资
料。
图3-1.4
在“可爱的中国素材库”文件夹中,有制作“可爱的中国”网站所需的相
关素材,大家可将这些素材拷贝到“D:
\网站素材\可爱的中国”的相关文件夹中。
然后在这些素材的基础上继续丰富素材库。
信息链接:
在使用他人创作的图片及文字资料前,一定要征得原作者的同意或者注明
资料的来源,尊重别人的知识产权。
在前面的操作中,我们对“可爱的中国”网站进行了规划,并且创建了空
白站点,还搜集了大量有用的素材。
在下一个主题活动中,我们将通过设计框架
网页,进一步完善“可爱的中国”网站了。
实践升级
1.将FrontPage的窗口界面与Word的窗口界面进行对比,试看找出一些相
同点和不同点。
2.去因特网上逛一逛,浏览欣赏几个感兴趣的网站。
结合具体的网站实例,
进一步体会网站和网页的概念,了解网站和网页之间的关系。
然后将你认为不错
的网站推荐给同学们,大家一起讨论:
什么样的网站才是好网站?
3.根据“可爱的中国”网站的结构规划思想,自己想办法多收集一些文字、
图片素材,例如中国历史、地理、中国之最、民族等内容,然后把这些资料分类
保存到“D:
\网站素材\可爱的中国”文件夹中。
第二课时:
制作框架网页
探究空间:
这节课的任务是设计一个框架网页,要求在左框架网页中始终显示导航栏,
并且通过导航栏链接的网页能够分别显示在右框架网页之中。
框架网页是一种独特的页面组织方式,它由导航框架和内容框架组成,一
个框架网页窗口中包含几个单独的网页,单击导航框架中的网页导航超链接即可
在内容框架中显示相应网页的内容。
通常我们使用FrontPage提供的“框架网页”
模板来创建框架网页。
1、创建框架网页
第1步:
启动FrontPage,打开“可爱的中国”网站。
第2步:
单击右侧的“新建网页”,“其他网页模板”。
打开“网页模板”对话
框。
单击对话框中的,进入“框架网页”选项卡。
图3-2.1
第3步:
单击模板中的“横幅和目录”模板,再单击
如下图所示的空白框架网页。
,即可创建
建立
图3-2.2
第4步:
在空白框架网页中,分别单击顶端、左侧及右侧的3个
3个空白网页,如下图所示
,
图3-2.3
接下来,我们就可以像制作普通网页一样制作框架网页了。
2、添加网页内容
在我们上面制作的框架网页中,网页编辑区域分为三部分:
上框架、左框架
和右框架。
它们是3个独立的网页,我们可以单独对每个网页迸行编辑。
完成上框架网页的内容。
将上框架网页的边距的宽度和高度分设置为2像
素;然后在上框架网页中插入banner.jpg”图片,调整图片后,效果如下图所示。
图3-2.4
图3-2.5
接下来,我们要完成左框架网页的内容。
因为左框架网页中包含导航内容,
所以制作过程麻烦一些。
第1步将插入点光标移动到左框架网页中,在此插入一个:
4行1列的表格。
调整表格大小,并将表格线粗细设置为0。
图3-2.6
第2步
如上图所示,将插入点光标移动到左框架网页的第1个单元格内。
单击菜单栏上的
,再单击“插入”菜单中的
,打开下图
所示的“插入web组件”对话框。
第3步:
:
在“组件类型”列表中单击选择“动态效果”在右侧的效果列表中
单击选择“交互式按钮”。
单击,打开“交互式按钮”对话框。
图3-2.7
第4步
删除“按钮文本”框中的文字,重新输入“中国历史”即把按钮的
的标签(按钮上显示的文字)设置为“中国历史”。
其他设置如下图所所示,完成
后单击,返回网页编辑窗口。
第5步:
在左框架网页中再插入三个交互式按键钮,按钮名称分别为“中国
地理”、“中国之最”和“中华民族”,完成后效果如下图所示。
图3-2.8
利用事先准备好的素材,制作完成右框架网页的内容。
如果暂时完不成网
页中的正文内容,可先做一部分,其他的留到课后完成。
3、保存框架网页
把框架网页的每部分都制作好后,我们要保存框架网页。
单击常用工具栏上
的,打开下图所示“另存为”对话框。
图3-2.9
信息链接:
在保存框架网页时,每个框架中的网页都要单独保存一次。
此外还要保存
整体框架网页,这个网页中包含该框架网页的设置信息,像如何显示网页,以及
框架的大小位置等。
要打开一个框架网页,只要打开的整体框架网页就可以了。
实践升级:
1、完成“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”四
个子网页。
2、为左框架中的“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华
民族”4个“交互式按钮”设置超级链接,分别链接到相对应的网页中;设置这
四个网页在右框架中打开,保存修改,并在浏览器中浏览网页。
第三课时网页过渡
探究空间:
在因特网上建立站点,就好像在网上安“家”。
如果把网页看做“家”里的
房间,网页中的各种元素则像家具一样。
如何能使我们的“网上家园”既温馨典
雅,又美观大方呢?
在这节课中,我们将通过设置页面过渡效果的方法来增加网
页的吸引力。
第1步:
在FrontPage中打开“可爱的中国”网站中的主页。
第2步:
单击菜单栏中的“格式”,再单击“格式”菜单中的“网页过渡”,
打开“网页过渡”对话框。
图3-3.1
图3-3.2
第3步:
如上图所示,在“事件”下拉列表中单击选取“离开网页”,
即离开网页时显示过渡效果;在“过渡效果”列表中单击选中“圆形放射”;在“周
期”框中输入“5”,即网页过渡效果显示的时间为5秒。
第4步:
单击“确定”,返回网页编辑窗口。
然后保存网页并在浏览器器中浏览网
页。
需要注意的是,网页的过渡效果是网页间进行切换时才会表现出的一种动态
效果,只有网页间通过链接方式迸行浏览,或者使用浏览器中的“前迸”和“后
退”按钮浏览时才能看到过渡效果。
练一练:
为网站中的其他网页添加过渡效果,并根据自己的喜好设置各项过渡属性。
信息链接:
FrontPage中提供了众多的Web组件,合理地使用这些组件可以使网页显得
更活泼、更吸引人。
除了对网页设置过渡效果,你还可以用计数器、滚动字幕等
组件来装饰“可爱的中国”网站的主页,或者在网页中设置动态HTML效果,增
加网页的动感。
实践升级:
为网页元素设置动态效果
第1步:
打开“可爱的中国”网站中zgls.htm网页,单击选中页面中的图
片,然后单击菜单栏中的“视图”,再单击“工具栏”中“DHTML效果”
图3-3.3
图3-3.4
第2步:
在“DHTML效果”工具栏中,单击“选择一种事件”右端的小箭头,
在下拉列表中选择“网页加载”,击“应用”右端的小箭头,在下拉列表中选丰
“飞入”,再单击“选择设置”右端的小箭头,从下拉列表中选择“从顶端”,如
图
图3-3.5
此时选中的图片所在的单元格变得有底色和边框,表示这是一个DHTML效
果,保存网页,然后进入‘预览”,窗口预览动态网页,看看设置的效果是否实
现了。
使用“DHTML效果”工具栏可以为文本或图片设置多种动态效果,如文本或
图片的飞入飞出、螺旋等。
设置动态效果时,首先要选择某个事件来触发,如单
击、双击、悬停或网页加载等;然后选掸具体的动画种类,最后再选择动画的具
体效果。
每种事件能够触发的动画效果并不完全相同,大家快来试一下吧!
第四课时发布网站
探究空间:
网站一旦发布出去,便要面对因特网上的所有浏览者,无论对集体还是个
人来说,网站的好坏都会影响到制作者的形象。
为确保万无一失,发布网站前,
一定要对网站进行反复分析,检查和测试,以确保网站的完整性和正确性。
本课
我们通过检查、测试和发布“可爱的中国”网站,学会在局域网和互联网发布网
站的方法和技巧,使大家能够通过网络发布和交流信息。
信息链接:
在发布网站初期要进行大量的测试和修改工作,个人Web服务器(Personal
WebServer)功能允许我们把设计好的网站发布在自己的计算机上,以本机为服
务器对网站进行测试和管理,为节省时间,避免出现问题,教师在课前应在教学
机上安装并设置好个人Web服务器。
在发布网站之前,首先要在浏览器中打开网站,浏览每一个网页的内容。
浏
览时主要检查以下几方面的内容。
1、检查网站结构是否与设计规划的一样。
2、检查网页元素的正确性和完整性,看看有没有错别字,能否清晰地表达作
者的意图等。
3、检查网页中的元素在浏览时是否能够正常显示。
4、检查网页的布局规划是否协调,风格是否一致,颜色搭配是否合理。
一、检查网站中的超链接
我们在建设网站的过程中已经那个知道,整个网站都是通过超级链接组织
起来的,所以必须保证网站中的超链接的正确性和完整性。
直接浏览网页的方法
虽然也可以检查超链接,但是当网页过多时,无法保证所有的超链接都一一检查
到。
这是我们可以在FrontPage的“超链接”视图中查看各网页之间的链接关系。
第1步:
启动FrontPage,打开“可爱的中国”网站的主页
第2步:
单击菜单栏上的“视图”,再单击“视图”菜单栏中的“超链接”,
进入超链接视图。
此时在窗口中显示出主页的超链接情况,如图所示。
图3-4.1
在超链接视图中,单击“文件夹列表”窗格中的某个网页文件名称,在右窗
格中即可显示出与该网页相关的链接文件。
练一练:
单击每个网页文件名,检查个网页超链接的状态,找出错误并进行修改。
修改完超链接后,单击菜单栏上的“工具”,再单击“工具”菜单栏中的“重
新计算超链接”,单击“是”按钮,FrontPage会根据修改情况,刷新整个网站中
的超链接。
二、网页下载速度测试
一个优秀的网站不但应该有精彩的网页内容,还应该有很好的下载速度,
没有人愿意浏览速度很慢的网站。
所以发布网站前,应该对整个站点的内容进行
调整并找出下载速度很慢的网页,再针对不同的原因迸行修改。
首先来看看如何测试单个网页的下载速度。
第1步:
在FrontPage中打开“可爱的中国”网站的主页。
第2步:
单击状态栏中的“传输方式”,弹出一个菜单,如图所示。
在此可以
选择网页的传输速率。
第3步:
本例选择56k,以测试在此速率下打开本网页所用的时间。
如果你对这个下载速度不满意,可以试着修改网页中的内容,例如把图变
小、取消一些动态效果等。
除了单个测试网页速度外,我们还可以找出整个网站中下载速度比较慢的
网页,方法如下。
第1步:
打开“可爱的中国”网站。
第2步:
单击菜单栏上的“视图”,再单击“视图”菜单中的“报表”,从弹
出的下一级菜单中单击“问题”,再从下一级菜单中单击“慢速网页”,系统自动
给出“慢速网页”报表视图。
第3步:
查看视图中所指出的慢速网页,打开网页,找出造成速度慢的原因,
并进行修改。
利用找出“慢速网页”的操作方法,找出网站中未链接的文件和组件错误,
并根据出错报告对相关内容进行调试和修改。
三、利用个人Webb服务器发布、测试网站
通过Windows系统中的“个人Web服务器”,我们可以将自己的计算机作
为服务器,发布自己的网站,并对网站进行测试调整。
1、在FrontPage中打开要发布的“可爱的中国”网站,单击菜单栏上的文件,
再单击“文件”菜单中的发布站点,打开左下图所示的“发布站点”对话框。
第
2
步:
在“远程
web
服务器类型”选择“文件系统”,在远程网站位置中输入
“d:
\可爱的中国”,点击“确定”。
第3步:
在弹出的窗口中选择“本地到远程”,发布网站,开始上传网站。
上传完成后,启动IE浏览器,在地址栏中你的IP地址,便可在浏览网页了。
怎么样,制作网页、建设网站并不困难吧?
但是,并非上传网站之后就算完
成了任务,我们还应该及时的对网站内容进行更新及维护,检查里面的超链接有
没有错误或者变更,随时将最新最好的资讯展现给浏览者,这才是一个称职的站
主哦!
信息链接:
FTP(FileTransferProtocol)是一种专门用来传输文件的协议,包括上传文件
和下载文件两种功能。
所谓“上传”,就是把本地计算机上的文件复制到站点服
务器上,而“下载”则是把站点服务器上的文件复制到本地计算机上。
由于每个
提供免费空间服务的网站都有不同的上传和下载方式,为避免发生错误,大家一
定要严格按照服务商的要求,使用正确的上传方式。
实践升级:
(1)根据网站测试的方法,检测“可爱的中国”网站。
(2)在因特网上为自己申请网页空间、将“可爱的中国”网站发布到因特
网上,然后浏览检查自己的网站。
第五课时
在这个单元,我们制作了“可爱的中国”网站,现将制作网站
的一般步骤进行如下归纳,同学们参照这个流程迸行操作,就可以避
免出现遗漏或者失误啦。
一、回顾制作网站的一般步骤
①确定网站主题;规划网站结构,画出结构图;确定网页内容、
网页布局及色彩搭配等。
②根据主题准备网站素材,像文字、图片、声音等,之后对收
集到的素材进行筛选、加工,并分类存放在素材文件夹中,
③选择合适的网页制作软件如FrontPage,然后开始制作框架
网页。
④为网页设置过渡效果,将会给浏览者提供美妙且富有情趣的
视觉环境。
⑤制作完成后,检测网站结构、内容、超链接、浏览速度,并
在本地计算机上发布测试.
⑥在局域网或者因特网上发布网站,并且经常对站点迸行维护
和更新.
二、检查、完善“可爱的中国”网站
仅供个人用于学习、研究;不得用于商业用途。
Forpersonaluseonlyinstudyandresearch;notforcommercialuse.
NurfürdenpersönlichenfürStudien,Forschung,zukommerziellenZweckenverwendetwerden.
Pourl'étudeetlarechercheuniquementàdesfinspersonnelles;pasàdesfinscommerciales.
толькодлялюдей,которыеиспользуютсядляобучения,исследованийинедолжныиспользоватьсявкоммерческихцелях.
以下无正文