网页制作基本技术

- 13 -网页制作基本技术FrontPage 是Microsoft公司Office 软件包中一个网页制作软件，简便易学。适宜广大教师制作简单的专题网站。以下简介网页制作基本技术及简单网站的制作。一 网页制作基本技术网页制作的基本要点是：学会在网页中插入表格、图片、动画、视频文件等。下面以“氢气的性质和用途”网页制作为例，简介应用FrontPage制作网页的基本方法。在“氢气的性质和用途”网页中我们将插入“氢气球”、“氢能汽车”等图片。插入“纯净的氢气安静燃烧，不纯氢气点燃爆炸”等FISAH动画，插入“氢气燃烧”的视频录像。1建立文件夹制作网页前，要收集素材，并将收集的素材放在自建的文件夹中。这里我们先在E盘建立一个H2文件夹，在H2文件夹中再建立SC文件夹，将收集到的素材放在SC文件夹中（图1）。图1 文件夹及素材2收集素材素材可从购买的光盘上复制，也可从网上搜索下载。21视频素材的收集“氢气的性质”录像是我们从初中化学VCD光盘上复制的。方法是，用资源管理器打开VCD光盘文件，在MPEGAV文件夹中找到所需的MUSIC07.DAT文件并复制到SC文件夹中，并改文件后缀名为MUSIC07.mpeg（图2）图2 在VCD光盘上复制视频录像文件22网上图片的收集利用搜索引掣可在网上得到所需的图片资料。这里应用来搜索图片。在浏览器地址栏中键入，打开页面后再在搜索栏中分别键入关键词“氢气、氢气球、氢电池”等。将找到的图片另存到SC文件夹中（图3）。略图3 用google搜索图片23网上动画素材的收集：课件类FLASH动画素材一般要到专题网站去收集。各学科的专题网站很多，例如中小学教育教学网（K12.COM.CN）搜集课件很方便。本网页中应用到的FLASH动画有“氢气的验纯（文件名：geh2.SWF）”、“氢气还原氧化铜微观过程（文件名：hecuo.SWF）”等，收集过程是：进入先得化学资源网（/phd/），在“搜索”窗中键入“氢气”，在搜索到的“匹配记录中”找到自己想要的素材并下载（图4）。略图4 下载“氢气还原氧化铜”动画素材此时用鼠标右键单击“下载”文字，在弹出的菜单中选择“目标另存为”可将动画文件下载到本机指定文件夹中。如果FLASH动画素材是在浏览器网页中看到的（嵌入在网页中），选择另存网页的方式，不能把FLASH动画另存下来。这时可打开浏览器工具栏的“工具”菜单，找到“Initernet”选项，在“常规标签”中间部分“Initernet临时文件”中打开“设置”按钮，再在弹出的对话框中选择“查看文件”，即可打开网页浏览器平台自带的“临时文件夹（Temporary Internet）”该文件夹产生的文件是按时间顺序排列的，最后时间内打开的网页，其临时文件在该文件夹的最后部分，所以在该文件夹中的最后部分文件中寻找FLASH动画特有的图标，逐一打开看，可找到你需要的动画，再选中该文件复制后，粘贴到素材文件夹中（图5）并重命名文件名。略图5 打开Temporary文件夹，找到并打开动画文件3.制作网页3.1打开FrontPage程序鼠标指向开始菜单,在程序中找到Microsoft FrontPage 程序,单击即打开FrontPage程序。图6打开FrontPage 程序3.2创建网页鼠标指向文件，在下拉菜单中单击新建。在弹出菜单中选中普通网页，单击确定。图7 新建网页命名网页文件名为“氢气”，存盘，存盘路径E：H2 。33网页制作331插入表格我们用PowerPoint制作演示文稿时，可以将文本框或图片、表格等放在工作区的任意位置，但用FrontPage制作网页时，就不能将这些对象随心所欲地放在页面上了。为使各对象能在页面的一定位置上放置，在用FrontPage制作网页时，常用表格的单元格把页面划分成一个个区域，文字或图片等对象就填充在单元格中。即单元格起到了固定对象位置的作用。单击插入表格按钮，选定行、列数，即可插入表格，有时在大的单元格中，还需插入小的表格，进一步把大单元格的区域分成小的单元格（图8）。图8 插入表格一般情况下表格的框线不需要在页面上出现，可单击鼠标右键，修改表格属性，将单元格边距、单元格间距、粗细都设置为零。图9 设置表格属性，隐藏边框在表格的单元格中可写入文字，调整文字的字体、大小、颜色。也可设置单元格的背景颜色。“氢气的性质和用途”网页上插入的表格及文字排列如图10所示。图中明、暗相间的区间为初始插入的表格的单元格，各区间中的分割线为在此单元格中再插入的表格的单元格。没有文字的单元格中将插入图片或动画。图10 “氢气的性质及用途”网页上的单元格及文字排列332插入图片网页中可插入后缀名为GIF和JPG等格式的图片。GIF图片又分为静止图片和动画图片。在本网页中的原子模型、红色线条、电视机画面就是GIF动画图片（文件名为052.GIF 、0182.GIF、0354.GIF）；网页中气球、氢能汽车、氢气的实验室制法等图片都是JPG格式的静止图片（文件名为qq.JPG 、HYBRIDFO.JPG 、0356.JPG）。图11 往第一个单元格中插入图片（文件名：0354. GIF）插入图片的操作是将光标停在需插入图片的单元格中，在“文件”栏中选中“插入”，在下拉列表中选中“图片来自文件”，再在弹出的对话框中找到图片所处的文件夹及文件名，再单击“确定”即可（图11）。333插入FLASH影片或视频影片应用“插入”下拉菜单的“高级”选项，可在单元格中插入后缀名为SWF、AVI、MPEG等影片文件。在本网页中，我们插入的FLASH影片有“氢气的验纯”（文件名：geh2.SWF）、氢气还原氧化铜微观过程（文件名：hecuo.SWF）。插入FLASH影片的操作是将光标停在需插入图片的单元格中，在“文件”栏中选中“插入”，在下拉列表中选中“高级插件”，再在弹出的“插件属性”对话框中单击“数据源”右边的“浏览”，找到需插入的FLASH影片，再单击“确定”即可（图12）。图12 往文本“氢气的验纯”下方的单元格中插入FLASH影片（文件名：geh2.SWF）在单元格的位置插入插件后，生成一个插头接口的标记。从光盘VCD上拷贝的视频录像（.AVI、.MPEG），要插入网页中时，可在“插入”菜单栏中直接选“影片”选项，在弹出对话框中找到有关文件选择“打开”即可。AVI、MPEG格式的文件容量一般较大，直接插入到网页中时，会严重影响网页打开的速度，故一般不适宜在网页中直接插入，对这类影片可采用超级链接的方式进行下载播放。334超级链接设置网页制作的一个重要步骤就是对有关的文本、图片设置超级链接。在本网页中看不到的网页、图片、视频、网站等可以应用超级链接的方式发出指令在浏览器窗口中打开。在本网页中，图片超级链接有：图片“氢能汽车”链接到另一更大的“氢能汽车”图上（文件名：HYBRIDFO1.JPG）、图片“电视机”链接到“氢气的性质”录像片（文件名：MUSIC07.MPEG），图片“氢气的实验室制法”链接到FLASH影片“氢气的实验室制法”（文件名：zh2.SWF），图片“中国新能源网”链接到中国新能源网（网址：），两个放大镜图片分别链接到“氢气的验纯”、“氢气还原氧化铜的微观过程”的FLASH动画上（文件名：geh2.SWF、hecuo.SWF）；在本网页中文本的超级链接有：“氢氧混合气点燃爆炸演示”链接到“氢氧混合气点燃爆炸演示”（文件名：bc1.SWF），“氢氧混合气点燃爆炸微观解释”链接到“氢氧混合气点燃爆炸微观解释”（文件名：bc2.SWF）。超级链接是非线性超文本结构的网站及网页的核心。设置超级链接的方法是：先选中图片或文本，单击鼠标右键，在弹出的菜单中选中“超级链接”，弹出“创建超级链接”窗口，再选中URL窗右边的“制作一个指向您计算机的超级链接”按钮，弹出“选择文件”对话框，选中需链接的文件，或在URL窗口中直接键入网址、文件的路径名，（图13、图14）。图13 对图片“氢能汽车”进行超级链接设置（指向文件HYBRIDFO1.JPG）图14 对图片“中国新能源网”设置链接，键入网址： 这里要注意的是，编辑超级链接时，“目标框架”一般不用“默认值”而是选择“新建窗口”以便网页的浏览（图15）。图15设置目标框架最后还想说一下滚动字幕的制作，选中需要滚动的文字，鼠标指向“插入”菜单，在上拉列表中选中“组件字幕”，单击弹出对话框中的确定按钮即可。到此，一个网页就基本制作完成了。如何知道网页在浏览器中的浏览效果呢，在FrontPage窗口的左下方有三个窗口切换标签：，普通窗口就是我们的工作区，HTMH窗口可查看网页源代码，预览窗口可随时查看制作的网页在浏览器中的效果（图16）。图16 “氢气的性质和用途”网页在浏览器中的图象4.将存放网页及素材的文件夹转换成WEB文件夹我们是在H2文件夹中建立的SC文件夹基础上制作网页的，这样的网页的各种链接一般是绝对路径关系，如果把H2文件夹换一个位置（如复制到D盘），再打开该文件夹中的氢气.HTM网页，就可能打开的是一个有一些图片看不到，单击一些链接无响应的缺损网页，这样的网页是不能放在网站上对外发布。这样的文件夹叫非WEB文件夹。如果把存放网页及素材的自定义文件转换成WEB文件夹，则文件夹中的网页与各链接文件的关系就会变成相对路径关系，这样把该文件夹不管放到什么目录下，该网页在被打开时都不会有缺损，且超级链接都能正确响应。如何将非WEB文件夹“H2”转换成WEB文件夹呢。操作很简单。打开在FrontPage 程序后，单击“文件打开站点”出现打开站点对话框，在“查找范围”窗口中找到E:H2文件夹，单击“打开”（图17）， 图17 以站点形式打开H2文件夹这时会再弹出一个“向文件夹中添加FrontPage信息”对话框，问：是否向H2文件夹中添加FrontPage信息（图18）？单击“是”，会自动生成文件夹列表并打开网页“氢气.htm”(图19)，这时文件夹“H2”就转换成了WEB文件夹，在该文件夹中自动生成四个文件夹：用来存放图片和网页等文件的images和_private文件夹，含有超级链接信息的隐藏文件夹_vti_cnf和_vti_pvt。在本网页制中过程中，我们已经将素材文件放在了SC文件夹中，所以images和_private文件夹可以删除。但_vti_cnf和_vti_pvt切不可删除（图20）。图18 向H2文件夹中添加FrontPage信息图19 H2文件夹已经转换成WEB文件夹图20在WEB文件夹H2中自动生成四个文件夹 当H2文件夹转换成WEB文件夹后，其中的网页“氢气.htm”上的超级链接关系即转换成相对路径关系，该文件夹放在任何目录下，网页打开时不会缺损。5网页（网站）发布有时我们要把已经制成的网页或网站存放到特定的文件夹之中。成为可对外发布的网页或网站。例如，我们想把“氢气.htm”网页发布到“氢气”文件夹之中。“氢气. htm”，网页的路径是E:H2氢气.htm，在H2文件夹中还有SC素材文件夹，我们用到的图片、动画、视频文件都放在这个文件夹中。先在E盘建立一个文件夹，命名为“氢气”，这就是我们将要把网页发布后存放的文件夹。在FrontPage 程序中打开网页氢气. htm，鼠标指向文件，在下拉菜单中选中“发布站点”，弹出“发布站点”对话框，单击“指定站点位置”窗口右边的浏览按钮，找到e:氢气，选中后，用鼠标单击“打开”，再单击“发布”按钮，出现确认对话框，单击“是”，“H2”文件夹中的有关文件就会导入到“氢气”文件夹中，“发布完成（图21、图22、图23）。注意有些网站的服务器不支持中文路径，建立文件夹及网页文件时最好用英文名称或数字名称。图21 将“E:氢气”文件夹设为发布的站点图22 往站点“E:氢气”中导入文件图23 成功发布站点我们在光盘H2文件夹中放了两个网页，一个是“氢气的性质和用途”（文件名：氢气.htm），另一个是“氢气的性质和用途”的表格文件（文件名：氢气网页表格.htm），在第二个文件中有部分图片及链接，是不完整的网页。读者不妨试一试：在FrontPage 程序中打开第二个文件，照着我们前面网页制作的方法介绍，把它制作成与第一个文件画面，链接关系一样的htm文件，并发布。二 制作网页的注意事项应用于课堂教学或专题学习网站的网页与平时在网上浏览的公司网页相比，有较大的区别。页面设计上，构图要力求简明，图形、标题、文字标注三者并重，不能像公司网站的主页，看得人眼花缭乱。动画要适当，不要一打开网页到处都在动，让人不知看什么地方是好。主题要鲜明，一个网页一个主题。文字不宜多。一个页面不要超过300字，字要大一些。色彩搭配适宜。面积大的图片不宜多，看不清楚的图片，动画可用超级链接方式在新的浏览窗口中打开大画面的图片或动画。表格是用FrontPage制作网页的特点