六年级FrontPage.docx
《六年级FrontPage.docx》由会员分享，可在线阅读，更多相关《六年级FrontPage.docx（27页珍藏版）》请在冰点文库上搜索。
六年级FrontPage
第二单元网上梅园诗意浓
第12课网络世界快乐行
教学目标：
1．欣赏各种精美网页的制作
2．初识Frontpage，能够打开软件，认识各个部分组成。
3．通过对网页的欣赏进而对网页的制作产生浓厚的兴趣。
教学重、难点：
欣赏网页，了解网页的大体制作步骤
教学内容：
观看各种网页，了解网页的制作过程
教学过程：
第一课时
一、激趣导入：
网络的大潮波涛汹涌，仿佛眨眼之间就扑到了人们的眼前，不断地改变着人们的生活。
越来越多的人开始参与“编网织梦”，Frontpage、Macromedia网页三剑客等成了网页爱好者们茶余饭后的热门话题。
在享受网络带给我们的周到服务的同时，那些设计精美的网页还给我们以美的享受。
二、欣赏课本上提到的网页
1.这个网页的布局方式很有创意，地面上的画架、树枝上的一串木牌以及飘带，看似随意但却营造出一种浓浓的生活情趣。
这不仅是在布局一个网页，也是在布局自己的生活方式。
2.这是一个卡通网站的首页，虽然栏目很多，但精心的设计使得各个栏目醒目而不凌乱；图片均使用圆角，统一但并不呆板。
3.这个网页的特点主要是空白的使用，它给人以空灵和舒服的空间感。
4.网页使用曲线与直线的结合；色彩运用巧妙：
蓝绿主色调使得画面清新而淡雅；通过色块对页面进行分割，简单明了。
三、欣赏学生作品“梅园诗画”
这是一个以梅花为主题的网页，制作者按照“问梅”、“赏梅”、“咏梅”、“画梅”等不同专题对梅花文化进行分类展示。
在网页设计中，借鉴了我国传统绘画中的写意手法，体现出典雅而不失灵动、简约而又极富韵味的整体风格，将古典与现代元素巧妙地结合起来。
四、了解网站的组成
网站通常有一个首页页面和一些分栏目的页面，分栏目的页面中一般还有很多个分页面。
这就像一本书，需要有封面、封底和内容。
下面就是网站“梅园诗画”的层次结构以及内容描述：
首页页面：
梅园诗画
二级页面：
问梅、赏梅、咏梅、画梅
内容描述：
梅花小知识、梅花摄影作品欣赏、咏梅诗词、梅花绘画作品
五、课堂小结
今天我们欣赏了各种网站，并简单了解了网站的制作层次
六、课外作业
阅读课本86页《网页设计的风格》
第二课时
一、激趣导入：
上节课我们欣赏了各种漂亮的网站，今天我们就来简单了解一下他们的制作过程
二、简介Frontpage
1、启动FrontPage2000
单击任务栏上的“开始”按钮,从“程序”菜单中选择“MicrosoftFrontPage”单击。
2、FrontPage2000的界面说明
FrontPage2000的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。
①、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工具】、【表格】、【框架】、【窗口】、【帮助】等10个菜单。
工具栏单击【查看】菜单，选择【工具栏】，在出现的下拉菜单中列出了几种不同的②、工具栏，如果菜单项前面有一个对钧号“√”，表明在界在上已显示此菜单项。
如果再单击一下，将取消这一项的显示。
③、视图栏中摆列着各种管理器的图标，这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。
单击管理器图标以切换到相应的管理器。
④、主编辑窗口在编辑网页时，有3种显示方式，即普通、HTML和预览。
普通显示方式是最常用的显示方式，一般是在此方式下工作。
HTML显示方式在需要直接编辑或查看网页文件的HTML代码时使用，一般是为了实现某种特殊效果（如在网页中动态显示时间）而经常使用。
预览显示方式在需要预先观察网页的显示效果时使用。
当使用管理功能时，主编辑窗口相应地会显示各种任务下的文件或站点信息。
什么是站点？
站点一般简写为“Web”，实际上就是把一些信息通过Web网页的方式相互链接起来，存放在一台被称为“服务器”的计算机中，别人可以通过Web浏览器查看网页信息。
站点一般以国际通用的Internet地址来表示，例如：
或等，进入某个站点所见到的第一页一般称为“HomePage”，中文的意思是“主页”。
什么是主页？
主页的英文名称为“HomePage”，一般认为某个站点的第一个网页叫做主页，文件名通常是“index.htm”（index.html）或“default.htm”（default.html），也就是在Web浏览器“地址”栏内输入一个网址后，用户浏览到的第一个网页。
用户再通过该主页的链接可以浏览到其他网页信息。
三、网页制作程序
网页的制作工具软件虽然各不相同，但基本制作程序大体相似，通常是：
1.确定主题，为网站命名
2.网站整体风格创意设计
3.布局规划
4.收集加工素材
5.选择网页制作工具进行制作
6.发布并管理网页
四、课堂小结
这节课我们简单了解了一下网页的制作，接下来的课程我们就要学习如何制作网页了。
五、课外作业
完成拓展空间和成长日记
第13课建造网上小天地
教学目标：
1．了解站点的建立
2．能够自己建立主页并为主页设置背景
3．能够设计出属于自己风格的站点。
教学重、难点：
建立属于自己风格的站点
教学内容：
为自己的站点设置首页
教学过程：
第一课时
一、导入
网页设计作为一种视觉语言，要讲究编排和布局，版式设计要做到主题鲜明，要点突出，以简洁的文字和画面体现出网站的风格，通过文字、图形的空间组合，表达出和谐与美。
二、站点简介
当我们规划设计好自己的网站，并准备开始着手制作的时候，首先就需要新建一个“站点”。
站点一般简写为“Web”，实际上就是把一些信息通过Web网页的方式相互链接起来，存放在一台被称为“服务器”的计算机中，别人可以通过Web浏览器查看网页信息。
站点一般以国际通用的Internet地址来表示，例如：
或等，进入某个站点所见到的第一页一般称为“HomePage”，中文的意思是“主页”。
什么是主页？
主页的英文名称为“HomePage”，一般认为某个站点的第一个网页叫做主页，文件名通常是“index.htm”（index.html）或“default.htm”（default.html），也就是在Web浏览器“地址”栏内输入一个网址后，用户浏览到的第一个网页。
用户再通过该主页的链接可以浏览到其他网页信息。
三、新建站点
实例：
使用【只有一个网页的站点】模板创建一个Web站点。
操作步骤：
（1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【站点】菜单项，出现一个【新建】对话框，在对话框的【指定新站点的位置】项中输入新站点的存放位置。
（2）提示：
新站点的存放位置选择是磁盘存储方式，是因为考虑到实践操作中的方便。
而一个站点要让在Internet上的用户正常浏览的话，应该通过FrontPage的站点发布功能或FT文件传送方式，把该站点内容传送至能提供存放空间的Web服务器上去。
（3）单击【确定】按钮。
此时FrontPage会自动以新站点名建立一个站点，并显示一个正在创建站点的提示对话框，之后该站点很快便创建好了。
新建的站点只有一个主页index.htm文件，该主页还是空的，需要对它进行编辑添加内容。
同时也可以添加一些网页到该站点中去。
此外，我们发现该站点中包含有两个子文件夹。
一个是_private文件夹，一般用来存放一些私人的文件，这些文件不会被别人看到。
另一个是images文件夹，是FrontPage专门创建用来存放图像文件的文件夹，因为FrontPage扩展服务器的图像文件的默认目录为images。
4、关闭站点
打开【文件】菜单，选择【关闭站点】菜单项，则当前站点被关闭。
5、打开站点
站点内容需要修改或添加时，必须把该站点打开。
操作过程如下：
打开【文件】菜单，在下拉菜单选择【打开站点】，出现一个对话框，在对话框的【文件夹】项中输入该站点的存放位置，然后单击【打开】按钮，站点将被重新打开。
6、收集图片
拷贝图片到新建站点的图片文件夹images中。
单击选择“images”文件夹，执行文件—导入命令，弹出导入对话框，然后执行一下操作：
（1）单击添加文件按钮，弹出将文件添加到导入列表对话框。
（2）在查找范围中逐级依次打开素材文件夹。
（3）按下ctrl+A快捷键，选中所有文件。
（4）单击打开按钮，返回导入对话框。
第二课时
一、导入
当准备工作完成遗憾，及可以开始制作我们的第一个网页---网站的首页了。
首页的作用就是为了吸引读者浏览网站的内容，在设计上应醒目、简明，令读者一目了然，留下良好的印象。
二、首页类型介绍
1.形象展示型首页
文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与网站风格和服务内容有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。
2.信息罗列型首页。
在首页中罗列出网站的主要内容分类、重点信息、网站导航等，这种风格比较适合信息量大、内容丰富的网站。
三、制作首页
下面我们来制作“梅园诗意”网站的首页，其中包含了网站的名称、导航栏及网页制作人员组成等信息。
双击文件“index.htm”在网页编辑区打开空白的“index.htm”文件，按照一下方法为网页添加背景图片。
1.执行格式—背景命令，打开“网页属性”对话框。
2.单击选中背景图片。
3.单击浏览按钮，弹出“选择背景图片”对话框。
4.在站点根文件夹“D:
\mysite”的images子文件夹中选择要插入的图片文件“bj.jpg”。
5.单击确定按钮。
6.还可以为网页设置背景颜色和默认的文本颜色，再单击确定。
为网页添加了背景图片后，可以将窗口左侧的“试图栏”及“文件夹列表”暂时关闭，以便更好的观察插入图片后的效果。
如果你对网页效果感到满意，就可以将这个网页文件保存起来了。
执行文件—另存为，输入网页标题，单击确定，设置首页文件名为index.htm选择保存类型为web页。
四、课堂小结
选择恰当的图片作为网页背景，易于表现网页的主题与风格，创造出新颖、独特的视觉效果。
但是浏览一下大型商业网站，你会发现它们更多运用的是白色、蓝色、黄色或其他颜色的搭配，因为这样的做法可以大大加快网页的载入速度。
五、课外作业
阅读《网页色彩的搭配》
第14课网上梅园诗意浓
教学目标：
1．能够在网页中加入文字
2．能够正确处理网页上图片的颜色
3．小组合作完成
教学重、难点：
通过小组合作使自己网页的色彩美观
教学内容：
初步建立网页上的文字及图片
教学过程：
第一课时
一、激趣导入
网页中少不了文字和图片，把这些网页元素布局在自己希望的位置，一个网页就做出来了。
其实制作网页就是这么简单，马上开始行动吧！
二、为网页添加图片
1、执行文件—打开站点命令，弹出打开站点对话框。
2、单击选择打开下拉列表，从中选择站点所在的mysite文件夹。
3、单击打开按钮，打开梅园诗画站点。
4、双击文件夹列表中的index.htm，打开前面制作的网站首页文件。
执行插入--图片--来自文件命令，将网站名称的图片文件“wzhmch.gif”插入到网页中。
5、单击选中插入的图片，编辑窗口弹出图片工具栏，按下图片工具栏中的“绝对定位”按钮。
6、当鼠标指针指向图片，当指针变成十字形状时，按住鼠标左键，将图片拖放到适当的位置，在网页编辑区中该图片以外的任意处单击，即可以关闭绝对定位功能。
三、修改图片
“网站名称”图片上有一部分没有处理掉的白色背景，插入到网页中后，图片和背景图片不能很好地融合，怎么办呢？
利用“图片”工具栏中的“设置透明的颜色”工具，就可以使图片和网页背景浑然一体。
1.按下图片工具栏中的设置透明的颜色按钮。
2.将鼠标指针移动到图片上，用黑色的小箭头指向图片的白色背景，单击鼠标，将白色背景部分设置为透明。
第二课时
一、激趣导入
这节课给你一个大显身手的机会。
请你在网页背景的留白处依次插入首页的重要元素----导航图片，并利用绝对定位工具条将起拖放到网页的适当位置。
二、插入文字
从工具栏中的【字体样式】下拉菜单选择“标题1”，然后从键盘输入“这是我的第一个主页”，按回车键。
从【字体样式】下拉菜单选择“标题2”，输入“网页制作”，然后按shift加回车键。
接着输入“姓名：
小明”，按回车键。
提示：
我们在输入文本的时候使用了两种按回车键的方式：
直接按回车键，按Shift键加回车键。
大家可以在实际操作中自己体会一下这两种方式的区别。
从【字体样式】下拉菜单选择“标题2”，输入“联系信息”，然后按回车键。
接着输入“地址：
唐山市路南区郑家庄小学”，按Shift键加回车键；输入“邮政编码：
063001”，按Shift键加回车键；输入“电话：
（0315）2961427”，按Shift键加回车键；输入“电子邮箱：
xxxxx@”，按回车键。
输入“很高兴能认识您，希望能和您交朋友！
”，按回车键；输入“谢谢您参观我的网页，再见！
”，按回车键。
三、字体设置
（1）、选定文字选定文字的方法有两种：
①一种方法是将鼠标指针移到待选文字段的开头，按住鼠标左键，不要松手，然后向右下方拖动，将该段文字涂黑；
②另外一种方法就是用键盘上的光标箭头将插入点移到选定文字的开头，然后左手按着Shift键，右边按光标移动键（如←、↑、→、↓键），也可将所选定文字涂黑。
（2）、修饰文字
修饰文字是指文字的字体、字型、大小（字号）、颜色、效果的设置。
例：
选定“这是我的第一个主页”文字后，设定文字属性的操作有以下两种：
①单击【格式】菜单项，选择【字体】后出现字体对话框；
②或单击鼠标右键，在弹出的对话框中单击【字体】选项，也将出现字体对话框。
③这时在对话框中的字体设为“隶书”，字型为“加粗”，大小为“6（24磅）”，颜色为“红色”，效果为默认。
单击【确定】按钮即可完成文字修饰。
例中其他字体修饰的操作也类似进行。
四、保存网页
单击常规工具栏上的“”，或单击【文件】菜单再选择【保存文件】，就可以把正在编辑的网页保存起来。
或直接按Ctrl+S键也可以保存网页。
如果你是在修改已经保存过的网页，修改过的网页将被重新保存。
但如果是新建的网页，单击“”后会出现对话框。
在对话框中的【文件名】栏内输入网页的文件名（如“First”），单击【保存】按钮，该网页就会保存到当前的站点上。
FrontPage2000保存文件的类型主要有网页文件（.htm）、FrontPage模板（.tem）、文本文件（.txt）、超文本模板文件（.htt）等。
五、关闭网页
（1）、单击【文件】菜单并选择【关闭】，或直接按Alt+F4键，如果此时网页文件未保存，就会出现一个提示对话框。
（2）、当单击对话框中的【是】按钮时，将出现保存网页对话框，输入网页文件名并单击【保存】按钮后，网页文件将被关闭；当单击【否】按钮时，该网页文件不保存并关闭；当单击【取消】按钮时，该网页文件不关闭，并返回主编辑窗口。
六、打开网页
（1）、单击“”工具图标，或单击【文件】菜单并选择【打开】，或直接按Alt+O键，出现一个打开文件对话框。
（2）、在对话框中单击【查找范围】下拉列表框，选择文件路径。
在文件列表区中列出被选中该文件路径下的所有文件。
（3）、选中一个文件，然后单击【打开】按钮，或直接双击该文件名即可打开文件。
七、预览网页
网页编辑完成后，可以用浏览器预览一下网页的效果。
有两种预览网页的方式：
（1）、一种是单击FrontPage2000主编辑窗口下面的【预览】标签，就打开一个FrontPage编辑器自带的浏览器，看完之后，单击【普通】标签，又切换到编辑状态。
（2）、另一种是单击【常规】工具栏的“”图标按钮（或直接按Ctrl+Shift+B键，或单击【文件】菜单并选择【在浏览器中预览】菜单项），将启动已安装好的浏览器并打开该网页。
如果在预览之前没有把修改后的或新建的网页保存起来，则将弹出一个对话框提示你应该首先保存该网页。
注意：
在预览窗口中看到的是网页在发布后的大致样式。
要看到网页在WWW浏览器中的真实情形，必须使用【在浏览器预览】菜单项查看。
而且，即使是在WWWW浏览器中浏览通过，不同的浏览器产生的效果不一样。
在发布到Internet上的前后，最好使用不同的浏览器多浏览几次。
八、课堂小结
这节课我们学习了如何利用图片和文字完善自己的网页。
六、课外作业
熟练操作本课内容
第15课页面规划秒管家
教学目标：
1．能够合理规划自己的网页
2．能够利用表格制作网页
3．能够为网页上的表格设置正确美观的格式
教学重、难点：
利用表格美化自己的网页
教学内容：
利用表格美化自己的网页
教学过程：
第一课时
一、激趣导入
一个简洁明快的网页往往使人印象深刻，更容易吸引浏览者的目光，今天我们就来学习如何设计网页。
二、简单介绍表格
表格是网页制作中一种非常有用的工具，不仅可以用来存放数据，还可以用来组织数据，甚至组织整个网页，实现网页的精细排版，我们先来简单了解一下表格。
表格的几个部分组成：
表头：
表格的首行，表示表格各列的名称。
行：
表格的一行，水平方向。
列：
表格的一列，垂直方向。
单元格：
在表格中，每个方格称为一个单元格（Cell），可以为每个单元格设置不同的属性。
边框：
在表格的四周，可设置有无。
在每个单元格中，除了可以填写文本之外，还可以放置图片、表单等，表格的最大好处是能分类显示数据，同时还能利用表格来组织网页的整体布局。
三、建立“问梅”网页
1、执行文件→新建→网页命令，弹出新建对话框。
2、在常规选项卡中选择“普通网页”。
3、单击确定按钮，创建一个空白网页文件。
四、插入表格
在FrontPage2000中插入一张表格的方法有三种：
1、使用【插入表格】工具按钮
（1）将光标移到你要插入表格的位置，即插入点。
（2）在常用工具栏中单击“”图标工具，在下方出现一个“4×5”的表格小方框。
（3）按住鼠标左键，同时朝右下方拖动鼠标，在方框底部显示相应的表格行数和列数。
（4）松开鼠标左键，在插入点处自动出现一张空的表格。
2、使用【表格】菜单命令
（1）将光标移到你要插入表格的位置，即插入点。
（2）单击【表格】菜单，选择【插入】选项，并在选择项中单击【表格】选项，出现插入表格对话框。
（3）在对话框中，在“行数”输入需要的行数（例中为5），在“列数”输入需要的列数（例中为4），同时设置好“对齐方式”、“边框粗细”、“单元格边框”、“单元格间距”。
（4）最后单击【确定】按钮，屏幕上就会出现一张空的表格。
说明：
如果在对话框中“边框粗细”值设置为0时，则该表格线在浏览网页时不会被显示出来。
3、使用手工绘制表格
如果想在网页中插入一张不规则的表格，可以采用以下步骤：
（1）将插入点移到你要添加表格的地方。
（2）在【表格】菜单中选择【绘制表格】选项，或单击表格工具栏上的“”。
（3）此时光标变成笔的形状。
按住鼠标左键，然后向右下方拖动，到达适当位置的时候松开鼠标左键后，将会出现“1×1”的表格。
（4）如果要在表格内添加表格的行和列，可以利用这支笔在表格内画水平或垂直线。
（5）单击工具栏上的“”擦除按钮，可以删除表格内的任意一条线。
4、嵌套表格
很多时候，我们要在一张表格中插入另一张表格，其做法与前面所介绍的插入表格操作并没有太大的区别，只是在插入表格之前应该把插入点定位在单元格内。
利用这种做法，我们将可以制作出非常复杂却符合我们要求的表格来。
第二课时
一、设计网站标志
1、在表格的第一行所在的单元格内单击。
2、执行插入→高级→插件命令，弹出“插件属性”对话框。
3、单击浏览按钮，在弹出的“选择插件数据流”对话框中打开“images”文件夹，选择要插入的文件“wm.swf”。
4、设置插件的大小，高度为80，宽度为100.
5、设置完毕，单击确定按钮。
二、预览
1、选中整个表格，按下“绝对定位”按钮，然后将鼠标指针移动到表格边框线上，当指针变成十字形状时，将整个表格拖放到页面顶部。
2、单击“预览”，查看网页在发布后的大致模样。
（在预览模式下，用于页面布局的表格线不见了，这是我们将表格边框粗细设置为0产生的效果。
）
三、表格的属性
1、选定表格元素
选定表格元素指选择表格的单元格、一行或一列、多行或多列、整个表格。
在表格元素被选定后，才能修改单元格属性、表格属性、复制和删除等操作。
选定整个表格。
其操作方法：
单击【表格】菜单，选择【选定】单击【表格】选项，则整个表格反色显示，表示已被选定了整个表格。
选定表格的行。
其操作方法主要有以下两种：
将光标移到表格中某一行的左边，当光标变成向右的“”黑色小箭头时，单击鼠标左键。
此时该行反色显示，表示该行已被选中。
将光标移到表格中某一行的任意一个单元格内，然后单击【表格】菜单，选择【选定】后再单击【行】选项，则该行被选定。
选定表格的列。
其操作方法主要也有两种：
将光标移到表格中某一列的最上边，当光标变成一个向下的“”黑色小箭头时，单击鼠标左键，此时该列被选中。
将光标移到表格中某一行的任意一个单元格内，然后单击【表格】菜单，选择【选定】后再单击【列】选项，则该列被选定。
选定单元格
选定一个单元格。
将光标移到某单元格内，单击【表格】菜单，选择【选定】后再单击【单元格】选项，则该单元格被选定。
选定多个单元格。
在选定一个单元格后，用手按住Ctrl键，不要松开，然后单击要选定的其他单元格。
选定表格的多行或多列。
用与“选定多个单元格”的类似方式来操作。
2、设置表格的属性
设置整个表格的多种属性，其操作步骤如下：
将光标移到表格中，单击【表格】菜单，选择【属性】，再单击【表格】选项，或在表格上单击鼠标右键，接着选择【表格属性】，出现一个对话框。
对齐方式。
该设置是整个表格在网页内的对齐方式，开始设为默认，可设置为左对齐、右对齐、水平居中、两端对齐。
单元格边距。
单元格边界与内容之间的距离。
该值越大，单元格内的文字与表格线的距离越大。
单元格间距。
单元格与单元格之间的距离。
边框粗细。
设置表格外边框的宽度。
如不显示外边框，可将此值设为0。
此外，在【表格属性】对话框中，也可以设置表格的背景颜色、背景图片、整个表格的宽度与高度，只要单击相应按钮，就可以为表格设置各种属性。
3、设置单元格的属性
设置某个单元格的属性，也可同时设置多个单元格的属性。
步骤如下：
（1）选定要设置属性的单元格（如果只须设置某个单元格的属性，只需将光标移到该单元格内，无需选定该单元格）；
（2）单击【表格】菜单，选择【属性】，然后单击【单元格】选项，或单击鼠标右键，选择【单元格属性】选项，将会出现一个对话框。
（3）在单元格属性对话框中，我们可以设置单元格的多种属性。
（4）设置完毕后，单击【应用】按钮，可以预览一下设置效果。
（5）单击【确定】按钮，设置结束。
在这个对话框中，我们可以设置单元格的属性有：
单元格布局
水平对齐方式。
有五个选项：
默认左对齐、左对齐、右对齐、水平居中、两端对齐。
垂直对齐方式。
有五个选项：
默认靠上、靠上、居中、基线、靠下。
行跨距。
即单元格跨越的行数。
例如此数设为2，则这个单元格就对应两行单元格的高度。
列跨距。
即单元格跨越的列数。
例如此数设为2，则这个单元格就对应两行单元格的宽度。
标题栏。
如果
升级会员 