第03课+用FrontPage制作网页.ppt

,本课要点课前导读课堂讲解,第三课用FrontPage制作网页,本课要点,建立站点网页布局编辑文档制作组件发布站点,课前导读,基础知识重点知识提高知识,基础知识,启动FrontPage、FrontPage的工作界面、站点的建立、插入特殊符号和图像。,重点知识,网页布局，创建文本和图像链接，组件以及动态HTML效果的制作,提高知识,站点发布,课堂讲解,启动FrontPage建立站点网页布局编辑文档创建链接制作组件发布站点,启动FrontPage,启动FrontPage的方法为：选择开始程序MicrosoftFrontPage菜单命令即可。启动FrontPage后的界面如图所示。,建立站点,建立站点的具体操作如下：（1）在FrontPage界面右窗格中单击“空白站点”或“根据模板新建”即可打开“Web站点模板”对话框，如图所示。,（2）在列表中选择一种站点模式后单击按钮。针对不同的站点模式，系统会有不同的提示，按照系统提示一步一步完成即可。（3）站点建立完成后，在FrontPage窗口中的“文件夹列表”中可看到所建站点中自动生成的网页文件，如图所示。,（4）在“文件夹列表”窗格中双击一个网页文件即可在右边的窗格中打开对应的网页格式，然后根据需要进行编辑即可。,如果窗口中没有文件夹列表，可选择视图文件夹列表菜单命令打开。,网页布局,用模板布局用空白页布局,用模板布局,其具体操作如下：（1）在“新建网页或站点”窗格中单击“网页模板”，打开如图所示的“网页模板”对话框。在“网页模板”中有“常规”、“框架网页”和“样式表”3个选项卡。这些选项卡中分别列出了不同的网页模板格式。,（2）单击一个选项卡，在列表中选择一个模板样式，“预览”框中将显示所选模板的样式。（3）单击按钮即可在窗口中新建一个相应模板的网页框架。（4）单击工具栏中的按钮，打开“另存为”对话框。在“保存类型”列表中选择“FrontPage模板”项。（5）单击按钮，打开“另存为模板”对话框，如图所示。,（6）在“标题”文本框内输入模板标题，在“名称”文本框中输入要保存的文件名称，单击按钮即可。,用空白页布局,其具体操作如下：（1）新建一个空白网页，然后利用框架或表格来布置网页上的文本和图形。（2）在空白网页中单击鼠标右键，从打开的快捷菜单中选择“网页属性”命令，打开“网页属性”对话框，如图所示。,（3）单击“背景”选项卡，在“格式”栏中选中“背景图片”和“水印”复选框，再单击“浏览”按钮，添加背景图片。（4）在“颜色”栏内可设置“背景”、“文本”、“超链接”、“已访问的超链接”和“当前级链接”的颜色。（5）单击“边距”选项卡，再选中“指定上边距”和“指定左边距”复选框，然后设置网页的上边距值和下边距值，单击“确定”按钮。（6）在网页中的方格内分别添加文本、图形、网页横幅、表格、表单、超级链接、横幅广告等元素。,编辑文档,插入特殊符号,插入特殊符号,其具体操作如下：（1）在网页视图模式下，将光标放置在要插入字符的位置。（2）选择插入符号菜单命令，打开如图所示的“符号”对话框。,（3）在“字体”下拉列表框中选择需要的字体类型，在“子集”下拉列表框中选择符号的类型。在“来自”下拉列表框中选择符号的代码进制。（4）在符号列表中选择需要的符号并单击“插入”按钮，再单击“关闭”按钮关闭“符号”对话框。,插入图像,插入图片编辑图片,插入图片,插入图片的具体操作如下：（1）在网页视图模式下，将光标放置到要插入图片的位置。（2）选择插入图片菜单命令，在出现的子菜单中选择图片的来源。如选择“来自文件”命令，打开“图片”对话框。（3）在“查找范围”列表中指定图片文件的路径，然后在文件列表中选择需要的图片。单击“确定”按钮，图片就插入到指定位置。,编辑图片,单击插入的图片，打开“图片”工具栏，如图所示。编辑图片的方法如下：（1）在图片上单击鼠标右键，在打开的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框，如图所示。,（2）在“外观”选项卡的“环绕样式”栏中可选择图片与文本的环绕方式。（3）在“布局”栏的“对齐方式”下拉列表框中选择所处的相对位置。（4）在“水平间距”和“垂直间距”数值框中设置相应的值。（5）在“边框粗细”数值框中设置图片外框的粗细。（6）在“大小”栏选中“指定大小”复选框，设置图片相对于原尺寸的比例。（7）设置完成后单击“确定”按钮。,创建链接,文本链接图像链接编辑链接,文本链接,创建站点中的超级链接链接到Internet页面,创建站点中的超级链接,其具体操作如下：（1）选取要作为超级链接的文本。（2）单击常用工具栏中的“超级链接”按钮，打开如图所示的“插入超链接”对话框。,（3）在“查找范围”下拉列表框中指定链接的路径，或在其下的列表中选择“当前文件夹”、“浏览过的页”或“近期文件”项。这里选择“当前文件夹”。（4）在右侧选择要链接的页面或文件。选取的文件或网页名称显示在“地址”文本框中，如“aboutme”页面。（5）单击“确定”按钮。创建链接后的文本变为所设置的链接颜色并带下划线的文本。（6）单击窗口下方的“预览”标签，进入“预览”窗口，将鼠标移到带下划线的文本链接上时鼠标变为手形图标。（7）单击链接的文本即跳转到指定的页，这里是跳转到“aboutme”页。,链接到Internet页面,其具体操作如下：（1）选中要作为超级链接的文本，如“网易网站”。（2）单击工具栏上的“超级链接”按钮，打开“插入超链接”对话框。（3）在“地址”文本框中输入要链接到的网站或网页名称，这里输入“”。（4）单击“确定”按钮，给指定的文本创建超级链接。（5）单击“预览”标签进入“预览”窗口，在指定链接的文本上单击，这里单击“网易网站”，若电脑与Internet处于连接状态，就会出现网易的首页。,图像链接,其操作如下：（1）选取插入的图片，单击鼠标右键，在打开的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框。（2）单击“常规”选项卡，在“默认超级链接”的“位置”文本框中输入链接的路径或单击“预览”按钮，打开“插入超链接”对话框，再按文本链接的方法指定链接路径。（3）链接设置完成后单击“确定”按钮。（4）切换到预览窗口中进行预览链接效果。,编辑链接,其具体操作如下：（1）在要创建超级链接的文本或图像上单击鼠标右键，在打开的快捷菜单中选择“超链接属性”命令，打开如图所示“编辑超链接”对话框。,（2）在“查找范围”下拉列表框和文件列表中重新选择链接的路径，或在“地址”栏中输入新的链接地址即可修改链接路径。（3）若要取消超级链接则单击“删除链接”按钮即可。,制作组件,制作悬停按钮制作字幕制作横幅广告制作动画效果,制作悬停按钮,其具体操作如下：（1）将光标定位到要创建悬停按钮的位置。单击常用工具栏中的“组件”按钮，打开如图所示的“插入Web组件”对话框。,（2）在“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表框中选择“悬停按钮”项。（3）单击“完成”按钮，打开“悬停按钮属性”对话框，如图所示。,（4）在“按钮文本”文本框内输入悬停按钮上的文本，如输入“产品介绍”。（5）单击“字体”按钮，在打开的“字体”对话框中设置按钮文本的字体、字形、字号和颜色，设置完成后单击“确定”按钮。（6）在“链接到”文本框中指定链接路径。（7）在“按钮颜色”、“效果”和“效果颜色”下拉列表中框中分别设置按钮不同的颜色。在“高度”和“宽度”文本框中设置按钮的大小。（8）单击“确定”按钮，悬停按钮制作完成。（9）单击“预览”按钮进入“预览”窗口。当鼠标移动到按钮上时就变为按钮。单击则跳转到链接的目标。,若要修改按钮的属性，双击按钮打开“悬停按钮属性”对话框进行更改即可。,制作字幕,设置字幕的具体操作如下：（1）将光标定位到要创建字幕的位置。单击工具栏中的“组件”按钮，打开“插入Web组件”对话框。（2）选择“组件类型”列表中的“动态效果”，再在“选择一种效果”列表中选择“字幕”项。（3）单击“完成”按钮，打开“字幕属性”对话框，如图3-14所示。,（4）在“文本”框中输入作为字幕的文本，如“欢迎光临本网站”。,“文本”框中的内容也可以是页面中的文本。,（5）在“方向”栏中选择文字流动的方向，如向左或向右。（6）在“速度”栏中设置文本流动的速度。（7）在“表现方式”栏中有“滚动条”、“幻灯片”和“交替”3种方式，可选择其中的一种。（8）在“重复”栏中设置字幕的循环次数。（9）在“背景色”下拉列表框中选择字幕的背景颜色。（10）设置完成后单击“确定”按钮。,创建幻灯片字幕时，在“重复”栏中需选择次数，不能选择“连续”复选框。,制作横幅广告,制作横幅广告的具体操作如下：（1）将光标定位到要创建横幅广告的位置。单击工具栏中的按钮，打开“插入Web组件”对话框。（2）选择“组件类型”列表框中的“动态效果”，再在“选择一种效果”列表框中选择“横幅广告管理器”项。（3）单击“完成”按钮，打开“横幅广告管理器属性”对话框，如图所示。,（4）在“宽度”和“高度”文本框内设置横幅广告的大小，单位为像素。（5）在“过渡效果”下拉列表框中选择图片间切换的效果。（6）在“每幅图片显示（秒）”文本框内设置每幅图片在横幅广告上显示的时间。（7）单击“添加”按钮，打开“添加横幅广告图片”的对话框。,（8）在列表中选择图片，或者从其他位置指定图片，或从网上下载需要的图片，确定图片后单击“打开”按钮即可将图片添加到“横幅广告管理器属性”对话框的“显示图片”列表中。（9）单击“确定”按钮，返回页面中。（10）单击“保存”按钮，若添加的图片不在本站点中则会打开“保存嵌入式文件”对话框，单击“确定”按钮即可。（11）选择文件用浏览器预览菜单命令进入浏览器，即可预览横幅广告效果。,若要更改横幅广告的属性可在普通页面中双击横幅广告，进入“横幅广告管理器属性”对话框进行需要的设置即可。,制作动画效果,创建动画效果的具体操作如下：（1）选取需要添加动画效果的组件或文本。（2）选择格式动态HTML效果菜单命令，打开如图所示的“DHTML效果”工具栏。,（3）在“选择一种事件”下拉列表框中选择引发动画的事件。包括“单击”、“双击”、“鼠标悬停”和“网页加载”项。（4）选择一种事件后，则“应用”下拉列表框被激活，可从列表中选择动画效果的类型。（5）在“选择设置”列表中选择动画效果。（6）保存页面，即可在浏览器中预览该页面。（7）要修改组件或文本的动画效果，在普通页面中选取需修改的动画效果元素的蓝色方框，即可在“DHTML效果”工具栏中进行修改。,发布站点,在FrontPage中发布站点的具体操作如下：（1）选择文件发布站点菜单命令