网制作软件FrontPage的使用.ppt

《网制作软件FrontPage的使用.ppt》由会员分享，可在线阅读，更多相关《网制作软件FrontPage的使用.ppt（71页珍藏版）》请在三一办公上搜索。

1、网页制作软件FrontPage 2003的使用,1网页的基本概念、网站开发的一般流程。2FrontPage 2003的基本操作方法。3站点的创建和打开方法。4各种网页对象（文本、组件、表单等）的编辑、设置与使用方法。5图像的编辑方法。6表格的基本操作。7.常用超链接的创建方法与区别。8网页属性和框架网页属性的设置。9网站的发布与设置。,学习目标：,1.1 网站的概念,网站就是由许多相关网页有机结合而组成的一个信息服务中心。网页就是用户在浏览器上看到的内容，网站设计者把提供的内容和服务制作成许多网页，并通过组织规划让网页互相链接，然后把所有相关的文件都存放到一个Web服务器上。只要是连入Inte

2、rnet的用户都可以使用浏览器访问到这些信息这个完整的结构就成为“网站”，也称“站点”。,学习内容,1 设计网站的一般步骤2 FrontPage 2003概述3 网站站点建立4 网页编辑与插件设置5 图片操作及动态HTML效果6 表 格 操 作7 超 链 接8 实践案例1新建“FrontPage特点”网页9 框 架 网 页10 实践案例2唐诗赏析网站的制作11 网站的发布12 实践案例3学生个人求职网站的建立与发布,1.2 设计网站的一般步骤,1确定网站主题2搜集材料3规划站点4选择合适的制作工具5制作网页6测试与发布 7.网站宣传8维护更新,2.2 FrontPage的启动和退出,1启动Fr

3、ontPage方法1：单击“开始/程序/Microsoft Office/Microsoft Office FrontPage 2003”命令，则启动FrontPage应用程序，并新建一个名为“new_page_1.htm”的网页。方法2：双击桌面上的FrontPage快捷方式图标。,2关闭网页并退出,退出FrontPage前，应将文件保存，若文件尚未保存，FrontPage会在关闭窗口前提示保存文件。（1）关闭当前网页方法1：选择“文件/关闭”菜单命令。方法2：单击菜单栏最右侧的“关闭窗口”按钮。（2）直接退出FrontPage应用程序方法1：单击标题栏最右边的“关闭”按钮。方法2：单击“文

4、件/退出”命令。方法3：当FrontPage应用程序窗口作为当前活动窗口时，按Alt+F4键。方法4：单击FrontPage窗口左上角的图标，从弹出的菜单中单击“关闭”命令（或直接双击图标）。,2.4 FrontPage的窗口组成,3.1 HTML简介,1什么是HTMLHTML（HyperText Markup Language）是一种超文本标记语言，是一种专门用于Web网页制作的标记语言。HTML文件是纯文本文件，可以用任何一种文本编辑器（如记事本）来编辑代码。将用HTML编写的文件保存成扩展名为.htm或者.html的文件，浏览器通过解释执行HTML编码。,2熟悉HTML,为了便于直观的认

5、识HTML，下面我们用HTML代码来编写一个简单的网页。启动Windows记事本，输入如下HTML代码：这是网页的标题 这是网页的正文,3.2 HTML文件的基本结构,1标记符标记符是HTML的基本元素。在HTML中，所有的标记符都用尖括号括起来。例如，表示HTML标记符。标记符是不区分大小写的，但通常约定标记符使用大写字母，绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和结束标记符的区别是在标识符前面加上“/”。例如，、等。,3.2 HTML文件的基本结构,2HTML文件的基本结构HTML的结构包括头部（Head）和主体（Body）两大部分。头部描述浏览器所需要的信息，

6、主要含有网页标题、解码方式等信息；主体包含所要说明的具体内容，含有网页中的各种元素，如段落文字、表格、图像、颜色等信息。HTML文档最重要的特性是能支持超链，它能使网页之间链接起来，从而实现了网页之间的跳转和自由切换。链源可以是文档中的任何一个字、词或句子，甚至可以是一幅图像。链宿可以是另外一个Web服务器上的某个信息资源，也可以是文档内部的某个地方。HTML的这种超链接功能是它能作为Web语言的主要原因之一。,4.1 打开站点和网页,1打开站点（1）单击“文件/打开网站”命令，将弹出“打开网站”对话框。（2）在查找范围下拉列表框中选择Web站点所在的目录，在下方的Web站点列表中选择一个站点

7、，然后单击“打开”按钮，就可以打开该站点。打开站点后将显示该站点中所有的文件。,4.1 打开站点和网页,2打开网页打开网页的操作比较简单，和Word和Excel的打开文件比较类似，具体操作步骤如下：（1）单击“文件/打开”命令，将弹出“打开文件”对话框。（2）在“打开文件”对话框的查找范围下拉列表框中选择要打开的文件所在的位置，在文件类型下拉列表框中选择Web页，然后单击所要打开的网页，最后单击“打开”按钮。,4.2 新建站点与导入素,1新建站点（1）单击“文件/新建”命令，或者单击“视图/任务窗格”命令，在打开的“开始工作”任务窗格中单击由一个网页组成的网站，弹出网站模板对话框。（2）单击网

8、站模板右侧的“浏览”按钮，输入指定新网站的位置。（3）在网站模板对话框左侧的列表中选择新站点的模板或向导，单击“确定”按钮。此时会在指定的路径文件夹下生成一个含有Index.htm（主页）的站点，双击该文件便可以在编辑区对主页进行编辑了,4.2 新建站点与导入素材,2导入素材单击“文件/导入”命令，弹出“导入素材”对话框，如图所示。导入素材主要有添加文件、添加文件夹、来自网站三种对象，单击相应按钮完成素材的导入。”,5.1 新建网页,（1）单击“文件/新建”命令，程序的右侧将弹出“新建”任务窗格，如图所示。（2）在“新建网页”选项区中执行下列操作之一：,空白网页：可新建一个空白网页。根据现有网

9、页新建：可根据已创建的动态网页模板创建网页。其他网页模板：单击可根据FrontPage 2003提供的模板创建网页。,5.2 文本编辑与格式设置,1文本编辑 常用的文本编辑操作有：选择、移动、剪切、复制、粘贴、删除、查找和替换等。（1）选择文本使用菜单选择文本的方法只有一种：单击“编辑/全选”命令，可以选择编辑区域内的所有内容。若要选择一行，可以将光标定位于要选定行的左侧，当光标变为向右指的箭头时，单击鼠标左键即可。（2）移动文本将光标移至要选择文本的段落左侧，拖动光标，选择要移动的文本。然后按下鼠标左键，将其拖动至目的地，松开左键即可。移动文本还可以利用“剪切（Ctrl+X）”与“粘贴（Ct

10、rl+V）”命令完成。（3）删除文本选择需要删除的文本，然后按下键盘上的Delete键（或选择“剪切”命令）。,5.2 文本编辑与格式设置,2格式设置（1）选择需要进行格式设置的文本，单击“格式/字体”命令，打开字体对话框。（2）在“字体”选项卡中选择合适的字体、字形和大小等，效果选项组还可以对文字设置不同的效果，在“字符间距”选项卡中设置字符间距等。,5.3 插入对象及组件,1插入水平线（1）将光标定位在需要插入水平线的位置。（2）单击“插入/水平线”命令，即可在当前插入点位置插入一条水平线。（3）右键单击水平线，在弹出的快捷菜单中选择“水平线属性”选项，弹出“水平线属性”对话框，如图所示，

11、在该对话框中可以对水平线进行相应的属性设置。,5.3 插入对象及组件,2插入日期和时间（1）单击“插入/日期和时间”命令，弹出“日期和时间”对话框，如图所示。（2）在“日期和时间”对话框中选择显示的方式，并在“日期格式”和“时间格式”下拉列表框中设置日期和时间的显示格式，最后单击“确定”按钮即可完成操作。,5.3 插入对象及组件,3插入计数器（1）将光标定位在需要插入计数器的位置。（2）单击“插入/Web组件”命令，弹出“插入Web组件”对话框。在该对话框左侧的组件类型中选择“计数器”。（3）单击“完成”按钮，此时会弹出“计数器属性”对话框，如图所示，选择合适的计数器样式，单击“确定”按钮。,

12、5.3 插入对象及组件,4插入字幕（1）将光标定位在需要插入字幕的位置。（2）单击“插入/Web组件”命令，弹出“插入Web组件”对话框。在该对话框左侧的组件类型中选择“动态效果”，在右侧列表框中选择“字幕”选项。（3）单击“完成”，此时会弹出“字幕属性”对话框。（4）单击“确定”按钮即可插入字幕。,5.3 插入对象及组件,5插入交互式按钮（1）将光标定位在需要插入交互式按钮的位置。（2）单击“插入/Web组件”命令，弹出“插入Web组件”对话框。在该对话框左侧组件类型中选择“动态效果”，在右侧列表框中选择“交互式按钮”选项。（3）单击“完成”按钮，弹出“交互式按钮”对话框。（4）在“按钮”选

13、项卡上“按钮”列表框中选择一种按钮样式，在“文本”右侧的文本框中输入该按钮上的文字，在“链接”右侧的文本框中输入该按钮对应的链接，或者单击“浏览”按钮，选择该链接所对应的URL地址。,5.3 插入对象及组件,（5）单击“字体”选项卡，设置该文本的字体、字形、字号等属性，如图所示。（6）单击“图像”选项卡，进行按钮图片的设置，如图所示。（7）完成所有设置后，单击“确定”按钮即可插入交互式按钮,5.4 网页格式设置,1常规（1）将光标定位在当前网页的任何位置，并单击鼠标右键，在弹出的快捷菜单中选择“网页属性”命令，此时会弹出“网页属性”对话框。（2）若要为当前网页设置标题，在“常规”选项卡的“标题

14、”选项区右侧的文本框中输入标题名称。（3）若要为当前网页设置背景音乐，在“常规”选项卡的“位置”选项区单击“浏览”按钮，在弹出的“背景音乐”对话框中选择合适的音乐，单击“打开”按钮。（3）设置完毕后，单击“确定”按钮即可。,5.4 网页格式设置,2背景设置（1）将光标定位在当前网页的任何位置。（2）单击“格式/背景”命令，或在网页属性对话框中单击“格式”选项卡。（3）若要为当前网页设置背景图片，并将背景图片设置为水印效果。可选中“背景图片”和“使其成为水印”两个复选框，并单击“浏览”按钮，打开“选择背景图片”对话框，在其中选择需要的背景图片并单击“打开”按钮即可。（4）设置完毕后，单击“确定”

15、按钮即可。,5.4 网页格式设置,3过渡效果（1）打开需要增加网页过渡效果的网页。（2）单击“格式/网页过渡”命令，将弹出“网页过渡”对话框。（3）在“事件”下拉列表框中选择一种触发过渡效果的事件。（4）在“周期（秒）”文本框中输入过渡效果所持续的时间。（5）在“过渡效果”列表框中选择一种网页过渡效果。（6）设置完毕后，单击“确定”按钮，当前网页的过渡效果就设置好了。,5.4 网页格式设置,1.建立页眉页脚 执行“视图/页眉和页脚”命令 2.建立奇偶页不同的页眉 单击工具栏中的“页面设置”按钮，打开“页面设置”对话框。在“版式”选项卡的“页眉和页脚”框中，选中“奇偶页不同”复选框。3.页眉页脚

16、的删除,5.5 插入表单及表单设置,1插入表单要在网页中插入一个表单，可单击“插入/表单”命令，此时将弹出一个子菜单，该子菜单中列出了FrontPage 2003中表单的所有元素。,5.5 插入表单及表单设置,2表单设置在需要设置的表单上单击鼠标右键，此时会弹出“表单属性”对话框。单击“表单属性”对话框中的“选项”按钮，打开“保存表单结果”对话框，共包含四个选项卡，默认显示“文件结果”选项卡。,5.6 保存网页,（1）保存。单击“文件/保存”命令或单击“常用”工具栏中的快速保存按钮。（2）另存为。单击“文件/另存为”命令，将会弹出“另存为”对话框，在该对话框中可以选择保存位置、保存类型，输入文

17、件名并单击“保存”按钮即可。,6.1 插入图片及图片属性,1插入图片文件（1）将光标定位在要插入图片的地方，单击“插入/图片/来自文件”命令，或者单击“常用”工具栏上的插入图片按钮，将会弹出“图片”对话框。（2）选择需要的图片，单击“插入”按钮，即可将图片插入到页面中。,6.1 插入图片及图片属性,2修改图片属性 选中图片，单击“格式/属性”，或者在图片上单击鼠标右键，此时会弹出“图片属性”对话框。在该对话框中，可以完成环绕方式、布局、大小的设置。,6.2 动态HTML效果设置,（1）单击“视图/工具栏/DHTML效果”命令，弹出“DHTML效果”工具栏。（2）选中需要设置动态HTML效果的元

18、素，在“DHTML效果”工具栏左侧的“在”下拉列表框中选择一种事件。例如选择“单击”事件，此时中间的“应用”下拉列表框由灰色变成白色，表示可以进行进一步的详细设置。（3）在“应用”下拉列表框中选择一种效果，例如选择“飞出”效果，此时右侧的下拉列表框由灰色变成白色，表示可以进行具体效果的设置。（4）单击效果下拉列表框选择一种效果设置，例如选择“逐字到右上部”，此时已完成动态HTML的效果设置。,1 表格制作,1使用菜单创建表格（1）单击“表格/插入/表格”，将弹出“插入表格”对话框，如图所示。（2）在“插入表格”对话框中的“大小”选项区中输入要插入表格的行数和列数，然后单击“确定”按钮，即可插入

19、所需要的表格。,1 表格制作,2使用命令按钮创建表格单击“常用”工具栏上的插入表格按钮，将弹出一个表格形式的下拉面板。在该面板中拖拽鼠标左键，该面板的下方会显示出当前表格的行数和列数，鼠标指针经过的区域会变成深蓝色，如图所示。当选定了所需要的表格后，释放鼠标左键即可表格的插入。,1 表格制作,3手工绘制表格（1）单击“视图/工具/表格”命令，打开表格工具栏，如图所示。（2）单击“绘制表格”按钮，此时鼠标指针将变成笔的形状。在编辑区按下鼠标左键并拖动鼠标，到某一个位置后释放鼠标左键，即可画出表格边框，然后在边框内添加线条即可画出需要的表格。提示：若想删除某线段，可使用“表格”工具栏中的擦除按钮。

20、,1 表格制作,4将文本转换成表格（1）选中需要转换成表格的文本，单击“表格/转换/文本转换成表格”命令，将弹出“文本转换成表格”对话框，如图所示。（2）根据需要在“文本转换成表格”对话框中选择需要的文本分隔符，或者选择“其他”按钮，并在其右边的文本框中输入相应的符号。（3）单击“确定”按钮，即可完成文本转换成表格。,2 单元格及表格属性设置,1表格编辑（1）选中行或列（2）插入行或列（3）移动和复制行或列（4）删除行或列,2 单元格及表格属性设置,2单元格操作（1）选定单元格（2）插入单元格（3）删除单元格（4）合并单元格（5）拆分单元格选择需要进行拆分的单元格，单击“表格/拆分单元格”命令

21、，或者单击“表格”工具栏上的拆分单元格按钮，将弹出“拆分单元格”对话框，如图所示。,2 单元格及表格属性设置,3表格属性将鼠标移动到表格的任何位置，并单击鼠标右键，在弹出的快捷菜单中选择“表格属性”选项，将弹出“表格属性”对话框。（1）表格大小：主要用于设置当前表格的行数和列数。（2）表格布局：主要用于设置表格的对齐方式、浮动方式、单元格衬距、单元格间距等，还可指定宽度与高度。（3）表格边框：主要用于设置表格边框的粗细、颜色、亮边框、暗边框，还可选择是否折叠表格边框。（4）表格背景：主要用于设置表格的背景。表格背景有背景颜色和背景图片两种。（5）表格标题：将光标定位在表格中，单击“表格/插入/

22、标题”命令，然后输入标题。,8 超链接,简单来说，超链接就是从一个Web页或文件到另一个Web页或文件的链接。超链接都由以下两部分组成：（1）超链接源：它是用来定义作为超链接的网页中的文本或图片，又称为“超链接”。（2）超链接目标：当用户点击超链接时会打开的页面或文件，通常称为“URL”。,8.1 书签超链接网页内超链接,1创建书签（1）切换到网页视图，将光标放在要创建书签的位置，或者选择要分配书签的文本或图像等。（2）单击“插入/书签”命令，将弹出如图所示书签对话框。（3）在书签名称文本框中个输入书签的名称。提示：若一个空白未知被标为书签，则该书签将显示；若文本被标为书签，该文本的下方将会显

23、示一条虚横线。,8.1 书签超链接网页内超链接,2创建到书签的链接（1）选择要定义超链接的文本或图像。（2）单击“常用”工具栏上的“插入超链接”按钮，或在选定的对象上单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，打开“插入超链接”对话框。（3）在“插入超链接”对话框的左侧单击“本文档中的位置”，此时会以列表形式给出本网页中所有的书签。（4）选择需要链接的书签，单击“确定”按钮即可。,8.1 书签超链接网页内超链接,3访问和删除书签（1）单击“插入/书签”命令，将弹出“书签”对话框。（2）在“书签”对话框中，将会列出本网页中所有书签名称。选择需要访问的书签，单击“转到”按钮，用户就可以跳转

24、到书签的位置。（3）若要删除书签，在“书签”对话框中选择需要删除的书签，单击“清除”按钮,8.2 其他超链接站点、网页、邮箱、文件,选择需要定义超链接的对象，单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，或单击“插入/超链接”命令，此时会弹出插入超链接对话框，如图1所示。,1链接到站点,（1）在图1所示的“插入超链接”对话框中，单击“浏览Web”按钮，此时在Internet Explorer（IE浏览器）中会新建一个空白网页。（2）在浏览器中寻找要作为超链接目标的站点，然后按ALT+TAB键返回FrontPage。该站点的URL会自动添加到“插入超链接”的地址框中。若知道目标站点准确的U

25、RL地址，也可以直接在“地址”框中输入站点地址。（3）设置完毕后，单击“确定”按钮即可。,2链接到网页,（1）在图1所示的“插入超链接”对话框中，单击“查找范围”，找到网页所在的站点，此时在查找范围的下方会以列表形式列出该站点中的所有文件，如图所示。（2）单击选中需要链接的网页，并单击“确定”按钮即可。,3链接到邮箱,（1）在图1所示的“插入超链接”对话框中，单击“电子邮件地址”命令，此时对话框如图所示。（2）在“电子邮件地址”下方的文本框中键入链接的目标邮箱地址。（3）设置完毕后，单击“确定”按钮即可。,4链接到文件,在图1所示的“插入超链接”对话框中，单击“查找范围”，找到要链接的文件，选

26、中文件，并单击“确定”按钮即可。,9 教学案例1新建“FrontPage特点”网页,操作重点：不同应用程序间的数据转换字幕设置插入水平线书签的定义及超链接的实现操作难点：书签的定义同一网页内超链接的实现,10 框架网页,学习重点：框架网页的创建与保存框架网页属性设置框架网页的调整与修饰为超级链接制定目标框架,10.1 新建框架网页,（1）单击“文件/新建”命令，在打开的开始工作任务窗格中单击新建网页或网站超链接，此时会在界面右侧弹出新建任务窗格。（2）单击新建网页选项区中的其他网页模板超链接，在弹出的网页模板对话框中单击“框架网页”选项卡，选择合适的框架网页模板。（3）单击标题图标，并单击“确

27、定”按钮，网页中会出现x相应的框架网页。框架网页的每一个框架窗口中均有“设置初始网页”和“新建网页”两个按钮，其中：设置初始网页：可在相应的框架中显示某个已经编辑好的网页文件。新建网页：可在相应的框架区域出现一个空白区域，用户可自行编辑网页内容。,10.2 保存框架网页主框架、各子框架分别保存,一个框架包含有多个子框架，主框架和子框架均需分别保存。下面以10.1小结中创建的标题框架网页为例，介绍框架网页的具体保存方法，其操作步骤如下：（1）单击“常用/保存”命令，将弹出“另存为”对话框。提示：保存多个文件可能导致混淆，FrontPage 2003以加亮的方式标志出了当前需要保存的框架。目前，整

28、个外围框架被加亮，这表示当前要保存的是整个框架，即主框架。（2）在文件名下拉列表框中输入该框架的名称“主框架”。,10.2 保存框架网页主框架、各子框架分别保存,（3）单击“保存”按钮，另存为对话框会再次弹出。此时框架预览区上方的框架被加亮，表明当前需要保存的是上方的标题框架，如图所示。在文件名下拉列表框中输入当前标题框架的文件名。,10.2 保存框架网页主框架、各子框架分别保存,(4)单击“保存”按钮，此时会弹出第三个另存为对话框，如图所示。在该对话框中，框架预览区右侧的框架高亮显示，表明当前需要保存的是右侧的框架。在文件名下拉列表框中输入当前框架的文件名，并单击“保存”按钮。提示：关于框架

29、网页的保存有如下规律，若一个网页是含有n个框架的网页，在保存完毕后，会有n+1个页面。,10.3 框架属性、网页属性设置,将鼠标指针定位在某个框架网页中，并单击鼠标右键，在弹出的快捷菜单中选择“框架属性”选项，此时会弹出“框架属性”对话框，如图所示。,1框架大小框架大小包括宽度和行高。在“宽度”和“行高”下拉列表框中可以选择“像素”、“百分比”或“相对”选项，然后在相应的数值框中输入数值即可。2可调整性设置在浏览器中浏览该网页时是否可以调整该框架的大小。3边距定义框架中的内容与框架边界的空白距离，包括宽度和高度。4间距设置相连框架边框之间的间距大小，以像素为单位。在“框架属性”对话框中单击“框

30、架网页”按钮，将弹出“网页属性”对话框。在该对话框中选择“框架”选项卡，设置框架间距。提示：“框架”选项卡中的“显示边框”复选框用来设置浏览时是否需要显示边框。5滚动条该选项用于设置框架窗口中是否显示滚动条。,6目标框架（1）在设计视图模式下，选中某个要用作超链接的文本或者图形，在“常用”工具栏中单击“插入超链接”按钮，将弹出“插入超链接”对话框。（2）单击“目标框架”按钮，将弹出“目标框架”对话框。（3）位于“目标框架”对话框左侧的“当前框架网页”栏显示了当前框架网页的外观，单击某个框架即可将其设置为目标框架。（4）单击“确定”按钮，即可完成设置。,10.4 编辑框架中的网页,1拆分框架（1

31、）将光标定位在需要拆分的框架窗口内，单击“框架/拆分框架”命令，将弹出“拆分框架”对话框，如图所示。（2）选中“拆分成列”或“拆分成行”单选按钮，单击“确定”按钮，即可完成所选框架的拆分。2删除框架（1）将光标定位在需要删除的框架窗口内。（2）单击“框架/删除框架”命令，即可删除所选框架网页。,11 教学案例2唐诗赏析网站的制作,12 网站的发布,IIS是Internet Information Server（互联网信息服务）的缩写，是一种Web（网页）服务组件。IIS是服务器的运行软件，分别用于网页浏览、文件传输、新闻服务和邮件发送等。学习重点：IIS的功能Web服务器的安装Web服务器的配

32、置发布网站,12.1 Web服务器的安装,（1）单击“开始/设置/控制面板”命令，双击“添加/删除程序”，在“添加/删除程序”对话框中选择“添加/删除Windows组件”按钮，此时会弹出“Windows组件向导”对话框，如图所示。,（2）勾选“Internet信息服务（IIS）”选项，按照提示操作即可。（3）IIS的安装完成后，此时“Internet信息服务（IIS）”选项前的复选框已勾选，单击“详细信息”按钮，勾选所有选项，然后单击“确定”按钮。（5）安装完毕后应测试IIS是否安装成功。打开IE浏览器，在浏览器中输入http：/localhost或者http：/120.0.1。若安装成功的话，将会出现如图所示的欢迎界面。,12.1 Web服务器的安装,12.2 Web服务器的设置,1网站属性配置2网站的主目录配置3为网站建立和配置虚拟目录,12.3 网站的发布,1“远程网站”选项卡2“优化HTML”选项卡3“发布”选项卡,14 教学案例3学生个人求职网站的建立与发,操作重点：站点的新建与发布创建框架网页及网页设置创建表格及表格设置插入水平线创建超链接及目标框架设置框架网页的保存操作难点：框架网页标题设置超级链接目标框架的设置框架网页的保存,谢 谢!,