【教学课件】第5章网页制作工具-FrontPage.ppt
《【教学课件】第5章网页制作工具-FrontPage.ppt》由会员分享,可在线阅读,更多相关《【教学课件】第5章网页制作工具-FrontPage.ppt(65页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第5章章 网页制作工具网页制作工具FrontPage2000内容简介内容简介本章主要介绍当前流行的网页制作工具FrontPage2000,使同学能利用它将收集到的网页元素组织起来,制作出有一定专业水准的网页及网站。学习目标学习目标1 1掌握:掌握:FrontPage2000基本功能及系统安装步骤2 2掌掌握握:网页基本编辑方法(编辑、格式化、项目符号和编号、网页元素的定位,水平线、时间戳、页面等的使用,计数器应用,网页模板使用,网页属性设置,插入图象、动画、声音的方法,表格菜单与工具栏、表格的创建与编辑、表格与文本的转换,文本与图片的超级链接、编辑与维护,标签的使用)。3 3理理解解:插入视
2、频的方法,页面布局的改善,超级链接的概念。4 4了解:了解:FrontPage高级技术,其它网页制作工具。5.1 概述概述 FrontPage2000是当前比较受欢迎、用户数最多的网页制作工具和网站管理工具。5.1.1 安装(略)安装(略)5.1.2 基本功能基本功能 FrontPage2000具有两大基本功能:网页制作和编辑 网站建立、管理和发布5.1.3 主界面与工具栏主界面与工具栏(1)1、FrontPage2000的启动(略)5.1.3 主界面与工具栏主界面与工具栏(2)2、网页视图 为了编辑和管理网站,FrontPage2000提供了6种视图,它们是:网页视图:其中有三个选项卡:普通
3、、HTML和预览。文件夹视图:可显示网站文件夹的阶层式组织结构。报表视图:可显示网站的一份详尽的报告列表。导航视图:可方便地将网站各网页组织成一个树状目录(导航结构图),各网页可利用导航按钮自动建立链接。超链接视图:可方便地查看网站中各网页之间的链接关系。任务视图:可查看任务列表安排网站工作细节、完成进度及优化顺序等。5.1.3 主界面与工具栏主界面与工具栏(2)3、工具栏 工具栏中的按钮和“WORD”中有很多是类似的,缺省情况下,由“常用”工具栏和“格式”工具栏组成,可以随时进行添加和删减。应该注意:工具栏中的按钮一般都有一一对应的菜单项,但是单击工具按钮与单击对应的菜单项并不能得到完全一样
4、的结果(如“新建”按钮及对应菜单项)。5.1.4 主要特点主要特点1、友好的操作界面2、集成的编辑和预览环境3、模板与向导:提供了多种网页向导和模板。4、主题:是一组可应用在网页上的设计元素和颜色方案,赋予网页一致和引人注目的外观。5、动态及多媒体元素:为了增强网页的生动性和交互性,可以把图像、声音、GIF动画、ActiveX控件、插件、Java Applet和PowerPoint动画加到网页中,并且支持在HTML中嵌入JavaScript、VBScript等脚本语言。5.2 FrontPage2000的环境设置的环境设置 在菜单栏中选择“工具”/“选项”命令,就可弹出用于设定FrontPag
5、e2000运行环境的对话框。其中有四个标签:常规、代理、配置编辑器和报表视图。5.2.1 5.2.1 常规常规“启动”组有三个复选框:设置启动时是否自动打开上次工作的站点,是否检查FrontPage为默认得网页编辑器。“常规”组有四个复选框:设置是否显示状态栏,当所含组件、文本索引等过期时是否发出警告声。5.2.2 代理代理 代理服务器(Proxy)可以用来设置防火墙系统,并充当内部网与Internet之间的安全桥梁。当FrontPage在需要访问Internet上的网页时,有时需要设置代理服务器与Internet的连接。这时需要设置代理服务器的IP地址及其端口号。设置方法与IE中的相同。5.
6、2.3 配置编辑器配置编辑器 在这里可以设置FrontPage在开启某一文件类型时所要使用的编辑器。在列表框中会列出目前已登记得文件类型,以及用来开启该类文件时所使用的编辑器名称和位置。5.2.4 报表视图报表视图 在这里可以设置:“最近的”文件应是最近X天内的文件;“较旧的”文件应是X天以前的文件;“慢速网页”至少需要X秒的下载时间;“假设的连接速度”为X Kbps。5.3 网页创建示例网页创建示例5.3.1 5.3.1 新建网页新建网页 在“网页”视图状态下进行操作。操作步骤操作步骤:(1)单击“文件”/“新建”/“网页”在弹出的模板对话框中选取一种网页格式(“常规”或“框架”)“确定”(
7、2)单击工具栏中的“新建”按钮(或直接按下“Ctrl+N”快捷键),则创建基于默认模板的网页。5.3.2 网页的基本编辑方法网页的基本编辑方法1、操作快捷键2、撤消和恢复操作3、网页上内容的选择4、移动、复制和粘贴网页对象5、查找和替换文本 以上各种操作都是在“网页”视图的“普通”选项卡中进行,方法与“WORD”中的对应操作基本一致,不再重复。5.3.3 保存与打印网页保存与打印网页1、保存网页2、打开与关闭网页3、打印网页 包括:(1)打印预览;(2)设置页面打印格式;(3)打印网页。以上各种操作与“WORD”中的对应操作基本一致,不再重复。5.3.4 运用主题运用主题 FP2000提供了5
8、0个专业的主题(Themes),每一组主题都包含有背景、项目符号、标题、超链接、导航列以及颜色组合等,你只有添上网页内容就行了。利用这些专业化的主题,可以简单快速地建立一个漂亮的网站。网页主题的设定:网站主题的设定可以使网站各网页有一个统一的外观,变更外观时,只要改变这一设定即可。单击“格式”/“主题”命令进行操作。个别网页的主题设定:对于一些较特殊的网页,可以单独使用特殊的主题设定。选中该网页,单击“格式”/“主题”选“将主题应用到”“所选网页”。5.4 网页的文本组织网页的文本组织5.4.1 5.4.1 网页文本的编辑网页文本的编辑1 1、输入文本:、输入文本:直接输入、插入文本文件或复制
9、文本。2 2、输入特殊字符:、输入特殊字符:选“插入”/“符号”命令,可输入各种特殊字符。3 3、换行与段落:、换行与段落:“Enter”分段,一行超过显示范围则自动换行。(以上项目与“WORD”的操作基本相同)4 4、在网页中加入注释:、在网页中加入注释:将光标定位在要加入注释的地方,然后选“插入”/“注释”命令输入注释内容即可。5.4.2 网页文本的格式化网页文本的格式化1 1、文字的格式化:、文字的格式化:包括:字体、字号、字型和文字颜色的设置。2 2、段落的格式化:、段落的格式化:包括:设置对齐方式、缩进与间距、边框与阴影等。3 3、文本样式:、文本样式:以上各项目与“WORD”的操作
10、基本相同。5.4.3 项目符号和编号项目符号和编号1 1、项目符号列表、项目符号列表 当项目的顺序无关紧要时采用。2 2、编号列表、编号列表 当需要列出项目的顺序时采用。5.4.4 网页元素的定位网页元素的定位(1)定位是一种将文本和图形等网页元素放置在网页上的方法。它可以让你设置网页元素的平面位置和Z顺序。定位分为绝对定位和相对定位。1 1、绝对定位、绝对定位 是指设定某元素在网页上的准确位置。该位置是相对元素容器来说的,通常用相对于元素容器左上角的坐标来表示。元素容器有两种:网页本身网页本身 位置框位置框5.4.4 网页元素的定位网页元素的定位(2)1 1、绝对定位(、绝对定位(2 2)元
11、素定位的方法如下:(1 1)用拖曳的方法定位元素)用拖曳的方法定位元素 操作:选定待定位的网页元素单击“绝对定位”按钮鼠标指向待定位元素变成四向箭头拖曳元素到新位置。(2 2)指定元素坐标)指定元素坐标 可通过直接给出网页元素相当于元素容器左上角的坐标值来定位元素。5.4.4 网页元素的定位网页元素的定位(3)1 1、绝对定位(、绝对定位(2 2)(3 3)通过添加位置框来定位元素)通过添加位置框来定位元素 可以将待定位的元素放在位置框中,然后拖曳位置框至所需位置进行定位。(4 4)添加位置框的操作)添加位置框的操作 将光标置于某一位置按“绝对定位”按钮出现定位框。5.4.4 网页元素的定位网
12、页元素的定位(4)2 2、设置被定位元素的属性、设置被定位元素的属性 被定位元素的定位属性可以在“定位对话框中设置。操作命令:选“格式”/“定位”命令,出现定位对话框。(1 1)设置环绕样式:左、右、无)设置环绕样式:左、右、无(2 2)设置定位样式:无、绝对、相对)设置定位样式:无、绝对、相对(3 3)设置位置框的位置、大小和)设置位置框的位置、大小和Z Z顺序顺序 5.5 改进网页的外观改进网页的外观 在FP2000中,可以利用多种方法来改进所创建的网页外观。还提供了26个网页模板,能以此为样板生成类似的最终网页。5.5.1 5.5.1 插入水平线和时间戮插入水平线和时间戮1 1、插入水平
13、线:、插入水平线:在网页的某些部位插入水平线可以使需要分隔的部分隔开,使网页层次分明。操作:“插入”/“水平线”;双击(或右击/“属性”)插入的水平线可对其进行修改。2 2、插入时间戮:、插入时间戮:在网页的适当位置可以插入一个最近的更新时间。操作:“插入”/“日期与时间”。5.5.2 网页模板(网页模板(1)1 1、网页模板的概念:、网页模板的概念:网页模板是一种预先设计好的网页格式,模板中包含了文本、图像、背景及其它网页元素的格式。它可作为样板生成最终的网页。FP2000提供了26个网页模板。2 2、应用网页模板:、应用网页模板:使用模板创建新的网页的操作:“文件”/“新建”/“网页”,在
14、“新建”“网页”对话框中选择一个适当的网页模板,根据自己的需求进行适当修改,即可保存为自己的网页。5.5.2 网页模板(网页模板(2)3 3、定义自己的网页模板:、定义自己的网页模板:模板实际上也是网页,因此创建模板首先应创建一个网页,完成后将它保存为模板即可(网页扩展名为“htm”,而模板的扩展名为“tem”)。若多个网页具有相同的结构时,建立模板可以大大提高网页设计的效率。5.5.3 网页属性(或内容)的设定网页属性(或内容)的设定 网页的属性包括网页的标题、位置、背景、页边距、语言等重要信息。操作:单击“文件”/“属性”菜单命令(或在网页任意处右击选“网页属性”),就会弹出网页属性对话框
15、,其中有:常规、背景、边距、自定义和语言五个标签(若网页没有应用主题时,可看到“背景”标签,否则“背景”标签不会出现)。5.5.3 网页属性的设定(网页属性的设定(2)1、设置网页的“常规”属性:在“常规”选项卡中可设置网页的标题、存放位置、背景音乐(浏览该网页时将自动播放)等内容。2、设置网页的“背景”属性:网页的背景属性包括:作为网页的背景的背景图案或颜色、超链接颜色、文本颜色等。也可选择“从另一网页获得背景信息”来借用其它网页的属性。3、设置网页的“边距”属性:用来指定网页的上边距和左边距。5.5.3 网页属性的设定(网页属性的设定(3)4、设置网页的“自定义”属性:在“自定义”选项卡中
16、可定义系统变量和用户变量。网页的系统变量和用户变量用来传递某些自定义的信息。系统变量和用户变量在网页中是不显示的,但在HTML代码中被转换为标记。5、设置网页的“语言”属性:有时在浏览网页时发现网页中的汉字全是乱码,无法阅读,这往往是没有正确选择HTML编码所致。在“语言”选项卡中可以指定HTML的汉字编码(中文简体为:GB2312)。5.6 添加多媒体与动画添加多媒体与动画 在FP2000中,提供了许多添加多媒体和动画的功能。利用这些功能,可使网页呈现某些特殊效果。5.6.1 5.6.1 插入图像插入图像1 1、插入图片、插入图片 将光标置于需要插入图片的位置,选择“插入”/“图片”/“来自
17、文件”(与单击工具栏上的“插入图片”按钮效果相同)或“剪贴画”或“视频”,即可插入相应的图片文件或剪贴画(自带)或视频文件。应该注意,网页中只支持GIF和JPEG两种图像格式。若采用其它格式,则FP2000在保存网页时会将它们分别转换为GIF(256色以下时)或JPG(256色以上时)格式。5.6.1 插入图像(插入图像(2)2 2、图片工具栏、图片工具栏 在网页编辑区选定图片后,在编辑区的下方就会出现“图片”工具栏。利用图片工具栏可以对图片进行各种编辑和处理。如:创建热点、使图片透明、在图片上写字、对图片进行剪裁。调整黑白对比度等。5.6.1 插入图像(插入图像(3)3 3、图片处理、图片处
18、理 对网页中的图片进行的处理主要有:(1 1)在图片上加入文字)在图片上加入文字(注:只能对GIF图片加入文字)(2 2)使)使GIFGIF图片透明图片透明(使之能透过图片看到网页的背景)(3 3)调整图片的大小)调整图片的大小(可以任意放大或缩小图片)(4 4)对图片重新取样)对图片重新取样(只有改变图片大小后才能进行)(5 5)剪裁图片)剪裁图片(可选择图片的某一部分进行裁减)(6 6)制作图片的缩略图)制作图片的缩略图(图片的缩小版本)(7 7)将图片恢复原样)将图片恢复原样(只能在未存盘时才可复原)5.6.2 插入动画插入动画 网页中的动画大多保存为网页中的动画大多保存为GIF89aG
19、IF89a的格的格式(其扩展名还是式(其扩展名还是.GIF.GIF),因此在网页),因此在网页中插入动画和插入图片的方法和操作步中插入动画和插入图片的方法和操作步骤一样。骤一样。5.6.3 插入声音和视频插入声音和视频1 1、插入声音、插入声音(1)插入背景音乐:可以作为背景音乐的声音文件格式有:.wav;.mid;.ra;.ram;.aif;.aiff;.aifc;.and;.au等。(2)用超链接方式链接到一个声音文件2 2、插入视频、插入视频 (1)可以直接在插入点插入视频文件。操作:“插入”/“图片”/“视频”。(2)用超链接方式链接到一个视频文件。5.7 表格表格 使用表格可以对有规
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 教学课件 教学 课件 网页 制作 工具 FrontPage
限制150内