1、第7章 网页制作软件FrontPage 2003的使用,新编计算机应用基础教程,紧跟计算机技术发展步伐,以社会需求为向导,以实际应用为中心 贯彻案例驱动与项目实践相结合的教学思维,注重操作技能训练 覆盖全国计算机等级考试(一级MS Office)内容,兼顾常用Office高级技能,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,本章将详细介绍FrontPage 2003的基本操作和使用方法。通过本章的学习,应掌握: 1网页的基本概念、网站开发的一般流程。 2FrontPage 2003的基本操作方法和HTML的基本知识。 3站点的创建和打开方法。 4各种网页对象(
2、文本、组件、表单等)的编辑、设置与使用方法。 5图像的编辑方法。 6表格的基本操作。 7常用超链接的创建方法与区别。 8网页属性和框架网页属性的设置。 9网站的发布与设置。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,本章目录,7.1 设计网站的一般步骤 7.2 FrontPage 2003概述 7.3 HTML语言简介 7.4 站 点 7.5 网页编辑与插件设置 7.6 图片操作及动态HTML效果 7.7 表 格 操 作 7.8 超 链 接 7.9 实践案例1新建“FrontPage特点”网页 7.10 框 架 网 页 7.11 实践案例2唐诗赏析网站的制作
3、 7.12 网站的发布 7.13 实践案例3学生个人求职网站的建立与发布,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.1.1 网站的概念,简单地说,网站就是由许多相关网页有机结合而组成的一个信息服务中心。在因特网上,信息是通过一个个网页呈现出来的。 所谓网页就是用户在浏览器上看到的内容,网站设计者把提供的内容和服务制作成许多网页,并通过组织规划让网页互相链接,然后把所有相关的文件都存放到一个Web服务器上。只要是连入Internet的用户都可以使用浏览器访问到这些信息。这样一个完整的结构就成为“网站”,也称“站点”。,新编计算机应用基础教程第7章 网页制作
4、软件FrontPage 2003的使用,7.1.2 设计网站的一般步骤,1确定网站主题 2搜集材料 3规划站点 4选择合适的制作工具 5制作网页 6测试与发布 7网站宣传 8维护更新,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.2.1 FrontPage的基本功能,友好的操作界面和“所见即所得”的工作方式 强大的模板和向导 轻松的建立站点。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.2.2 FrontPage 2003的新增功能,设计网站:FrontPage 2003提供了功能增强的设计环境、新的布局和设计工具、模板
5、以及改进的主题,可以帮助用户创建自己的创意网站,而且无须掌握HTML知识。 开发网站:FrontPage 2003提供了一个功能增强的创作环境,具有新的图形功能、规则的HTML以及更多基于代码的控件。此外,其功能强大的编码工具有助于应用已掌握的各种编码语言知识,并帮助用户增强这方面的知识,以创建交互式脚本。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.2.3 FrontPage的启动和退出,1启动FrontPage 方法1:单击“开始/程序/Microsoft Office / Microsoft Office FrontPage 2003”命令,则启动F
6、rontPage应用程序,并新建一个名为“new_page_1.htm”的网页。 方法2:双击桌面上的FrontPage快捷方式图标 。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,2关闭网页并退出,退出FrontPage前,应将文件保存,若文件尚未保存,FrontPage会在关闭窗口前提示保存文件。 (1)关闭当前网页 方法1:选择“文件/关闭”菜单命令。 方法2:单击菜单栏最右侧的“关闭窗口”按钮 。 (2)直接退出FrontPage应用程序 方法1:单击标题栏最右边的“关闭”按钮 。 方法2:单击“文件/退出”命令。 方法3:当FrontPage应用程序
7、窗口作为当前活动窗口时,按Alt+F4键。 方法4:单击FrontPage窗口左上角的图标 ,从弹出的菜单中单击“关闭”命令(或直接双击图标 )。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.2.4 FrontPage的窗口组成,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.3.1 HTML简介,1什么是HTML HTML(HyperText Markup Language)是一种超文本标记语言,是一种专门用于Web网页制作的标记语言。 HTML文件是纯文本文件,可以用任何一种文本编辑器(如记事本)来编辑代码。将用HTM
8、L编写的文件保存成扩展名为.htm或者.html的文件,浏览器通过解释执行HTML编码。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,2熟悉HTML,为了便于直观的认识HTML,下面我们用HTML代码来编写一个简单的网页。启动Windows记事本,输入如下HTML代码:这是网页的标题这是网页的正文,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.3.2 HTML文件的基本结构,1标记符 标记符是HTML的基本元素。在HTML中,所有的标记符都用尖括号括起来。 例如,表示HTML标记符。标记符是不区分大小写的,但通常约定标记符使
9、用大写字母,绝大多数标记符都是成对出现的,包括开始标记符和结束标记符。开始标记符和结束标记符的区别是在标识符前面加上“/”。例如,、等。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.3.2 HTML文件的基本结构,2HTML文件的基本结构 HTML的结构包括头部(Head)和主体(Body)两大部分。头部描述浏览器所需要的信息,主要含有网页标题、解码方式等信息;主体包含所要说明的具体内容,含有网页中的各种元素,如段落文字、表格、图像、颜色等信息。 HTML文档最重要的特性是能支持超链,它能使网页之间链接起来,从而实现了网页之间的跳转和自由切换。链源可以是文
10、档中的任何一个字、词或句子,甚至可以是一幅图像。链宿可以是另外一个Web服务器上的某个信息资源,也可以是文档内部的某个地方。HTML的这种超链接功能是它能作为Web语言的主要原因之一。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.4.1 打开站点和网页,1打开站点 (1)单击“文件/打开网站”命令,将弹出“打开网站”对话框。 (2)在查找范围下拉列表框中选择Web站点所在的目录,在下方的Web站点列表中选择一个站点,然后单击“打开”按钮,就可以打开该站点。打开站点后将显示该站点中所有的文件。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2
11、003的使用,7.4.1 打开站点和网页,2打开网页 打开网页的操作比较简单,和Word和Excel的打开文件比较类似,具体操作步骤如下: (1)单击“文件/打开”命令,将弹出“打开文件”对话框。 (2)在“打开文件”对话框的查找范围下拉列表框中选择要打开的文件所在的位置,在文件类型下拉列表框中选择Web页,然后单击所要打开的网页,最后单击“打开”按钮。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.4.2 新建站点与导入素,1新建站点 (1)单击“文件/新建”命令,或者单击“视图/任务窗格”命令,在打开的“开始工作”任务窗格中单击由一个网页组成的网站,弹出
12、网站模板对话框。 (2)单击网站模板右侧的“浏览”按钮,输入指定新网站的位置。 (3)在网站模板对话框左侧的列表中选择新站点的模板或向导,单击“确定”按钮。此时会在指定的路径文件夹下生成一个含有Index.htm(主页)的站点,双击该文件便可以在编辑区对主页进行编辑了,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.4.2 新建站点与导入素材,2导入素材 单击“文件/导入”命令,弹出“导入素材”对话框,如图所示。导入素材主要有添加文件、添加文件夹、来自网站三种对象,单击相应按钮完成素材的导入。”,新编计算机应用基础教程第7章 网页制作软件FrontPage 2
13、003的使用,7.5.1 新建网页,(1)单击“文件/新建”命令,程序的右侧将弹出“新建”任务窗格,如图所示。 (2)在“新建网页”选项区中执行下列操作之一:,空白网页:可新建一个空白网页。 根据现有网页新建:可根据已创建的动态网页模板创建网页。 其他网页模板:单击可根据FrontPage 2003提供的模板创建网页。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.2 文本编辑与格式设置,1文本编辑常用的文本编辑操作有:选择、移动、剪切、复制、粘贴、删除、查找和替换等。 (1)选择文本 使用菜单选择文本的方法只有一种:单击“编辑/全选”命令,可以选择编辑
14、区域内的所有内容。 若要选择一行,可以将光标定位于要选定行的左侧,当光标变为向右指的箭头时,单击鼠标左键即可。 (2)移动文本 将光标移至要选择文本的段落左侧,拖动光标,选择要移动的文本。然后按下鼠标左键,将其拖动至目的地,松开左键即可。 移动文本还可以利用“剪切(Ctrl+X)”与“粘贴(Ctrl+V)”命令完成。 (3)删除文本 选择需要删除的文本,然后按下键盘上的Delete键(或选择“剪切”命令)。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.2 文本编辑与格式设置,2格式设置 (1)选择需要进行格式设置的文本,单击“格式/字体”命令,打开字体
15、对话框。 (2)在“字体”选项卡中选择合适的字体、字形和大小等,效果选项组还可以对文字设置不同的效果,在“字符间距”选项卡中设置字符间距等。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.3 插入对象及组件,1插入水平线 (1)将光标定位在需要插入水平线的位置。 (2)单击“插入/水平线”命令,即可在当前插入点位置插入一条水平线。 (3)右键单击水平线,在弹出的快捷菜单中选择“水平线属性”选项,弹出“水平线属性”对话框,如图所示,在该对话框中可以对水平线进行相应的属性设置。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7
16、.5.3 插入对象及组件,2插入日期和时间 (1)单击“插入/日期和时间”命令,弹出“日期和时间”对话框,如图所示。 (2)在“日期和时间”对话框中选择显示的方式,并在“日期格式”和“时间格式”下拉列表框中设置日期和时间的显示格式,最后单击“确定”按钮即可完成操作。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.3 插入对象及组件,3插入计数器 (1)将光标定位在需要插入计数器的位置。 (2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框。在该对话框左侧的组件类型中选择“计数器” 。 (3)单击“完成”按钮,此时会弹出“计数器属性”对话框,如
17、图所示,选择合适的计数器样式,单击“确定”按钮。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.3 插入对象及组件,4插入字幕 (1)将光标定位在需要插入字幕的位置。 (2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框。在该对话框左侧的组件类型中选择“动态效果”,在右侧列表框中选择“字幕”选项。 (3)单击“完成” ,此时会弹出“字幕属性”对话框。 (4)单击“确定”按钮即可插入字幕。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.3 插入对象及组件,5插入交互式按钮 (1)将光标定位在需要插入交互式
18、按钮的位置。 (2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框。在该对话框左侧组件类型中选择“动态效果”,在右侧列表框中选择“交互式按钮”选项。 (3)单击“完成”按钮,弹出“交互式按钮”对话框。 (4)在“按钮”选项卡上“按钮”列表框中选择一种按钮样式,在“文本”右侧的文本框中输入该按钮上的文字,在“链接”右侧的文本框中输入该按钮对应的链接,或者单击“浏览”按钮,选择该链接所对应的URL地址。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.3 插入对象及组件,(5)单击“字体”选项卡,设置该文本的字体、字形、字号等属性,如图所示。 (6
19、)单击“图像”选项卡,进行按钮图片的设置,如图所示。 (7)完成所有设置后,单击“确定”按钮即可插入交互式按钮,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.4 网页格式设置,1常规 (1)将光标定位在当前网页的任何位置,并单击鼠标右键,在弹出的快捷菜单中选择“网页属性”命令,此时会弹出“网页属性”对话框。 (2)若要为当前网页设置标题,在“常规”选项卡的“标题”选项区右侧的文本框中输入标题名称。 (3)若要为当前网页设置背景音乐,在“常规”选项卡的“位置”选项区单击“浏览”按钮,在弹出的“背景音乐”对话框中选择合适的音乐,单击“打开”按钮。 (3)设置
20、完毕后,单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.4 网页格式设置,2背景设置 (1)将光标定位在当前网页的任何位置。 (2)单击“格式/背景”命令,或在网页属性对话框中单击“格式”选项卡。 (3)若要为当前网页设置背景图片,并将背景图片设置为水印效果。可选中“背景图片”和“使其成为水印”两个复选框,并单击“浏览”按钮,打开“选择背景图片”对话框,在其中选择需要的背景图片并单击“打开”按钮即可。 (4)设置完毕后,单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.4
21、网页格式设置,3过渡效果 (1)打开需要增加网页过渡效果的网页。 (2)单击“格式/网页过渡”命令,将弹出“网页过渡”对话框。 (3)在“事件”下拉列表框中选择一种触发过渡效果的事件。 (4)在“周期(秒)”文本框中输入过渡效果所持续的时间。 (5)在“过渡效果”列表框中选择一种网页过渡效果。 (6)设置完毕后,单击“确定”按钮,当前网页的过渡效果就设置好了。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.4 网页格式设置,1.建立页眉页脚执行“视图/页眉和页脚”命令 2.建立奇偶页不同的页眉单击工具栏中的“页面设置”按钮,打开“页面设置”对话框。在“版
22、式”选项卡的“页眉和页脚”框中,选中“奇偶页不同”复选框。 3.页眉页脚的删除,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.5 插入表单及表单设置,1插入表单 要在网页中插入一个表单,可单击“插入/表单”命令,此时将弹出一个子菜单,该子菜单中列出了FrontPage 2003中表单的所有元素。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.5 插入表单及表单设置,2表单设置 在需要设置的表单上单击鼠标右键,此时会弹出“表单属性”对话框。 单击“表单属性”对话框中的“选项”按钮,打开“保存表单结果”对话框,共包含四
23、个选项卡,默认显示“文件结果”选项卡。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.5.6 保存网页,(1)保存。单击“文件/保存”命令或单击“常用”工具栏中的快速保存按钮 。 (2)另存为。单击“文件/另存为”命令,将会弹出“另存为”对话框,在该对话框中可以选择保存位置、保存类型,输入文件名并单击“保存”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.6.1 插入图片及图片属性,1插入图片文件 (1)将光标定位在要插入图片的地方,单击“插入/图片/来自文件”命令,或者单击“常用”工具栏上的插入图片按钮 ,将会
24、弹出“图片”对话框。 (2)选择需要的图片,单击“插入”按钮,即可将图片插入到页面中。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.6.1 插入图片及图片属性,2修改图片属性选中图片,单击“格式/属性”,或者在图片上单击鼠标右键,此时会弹出“图片属性”对话框。在该对话框中,可以完成环绕方式、布局、大小的设置。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.6.2 动态HTML效果设置,(1)单击“视图/工具栏/DHTML效果”命令,弹出“DHTML效果”工具栏。(2)选中需要设置动态HTML效果的元素,在“DHTML效果
25、”工具栏左侧的“在”下拉列表框中选择一种事件。例如选择“单击”事件,此时中间的“应用”下拉列表框由灰色变成白色,表示可以进行进一步的详细设置。 (3)在“应用”下拉列表框中选择一种效果,例如选择“飞出”效果,此时右侧的下拉列表框由灰色变成白色,表示可以进行具体效果的设置。 (4)单击效果下拉列表框选择一种效果设置,例如选择“逐字到右上部”,此时已完成动态HTML的效果设置。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.1 表格制作,1使用菜单创建表格 (1)单击“表格/插入/表格”,将弹出“插入表格”对话框,如图所示。 (2)在“插入表格”对话框中的“
26、大小”选项区中输入要插入表格的行数和列数,然后单击“确定”按钮,即可插入所需要的表格。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.1 表格制作,2使用命令按钮创建表格 单击“常用”工具栏上的插入表格按钮 ,将弹出一个表格形式的下拉面板。在该面板中拖拽鼠标左键,该面板的下方会显示出当前表格的行数和列数,鼠标指针经过的区域会变成深蓝色,如图所示。当选定了所需要的表格后,释放鼠标左键即可表格的插入。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.1 表格制作,3手工绘制表格 (1)单击“视图/工具/表格”命令,打开表
27、格工具栏,如图所示。 (2)单击“绘制表格”按钮,此时鼠标指针将变成笔的形状。在编辑区按下鼠标左键并拖动鼠标,到某一个位置后释放鼠标左键,即可画出表格边框,然后在边框内添加线条即可画出需要的表格。 提示:若想删除某线段,可使用“表格”工具栏中的擦除按钮。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.1 表格制作,4将文本转换成表格 (1)选中需要转换成表格的文本,单击“表格/转换/文本转换成表格”命令,将弹出“文本转换成表格”对话框,如图所示。 (2)根据需要在“文本转换成表格”对话框中选择需要的文本分隔符,或者选择“其他”按钮,并在其右边的文本框中输
28、入相应的符号。 (3)单击“确定”按钮,即可完成文本转换成表格。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.2 单元格及表格属性设置,1表格编辑 (1)选中行或列 (2)插入行或列 (3)移动和复制行或列 (4)删除行或列,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.2 单元格及表格属性设置,2单元格操作 (1)选定单元格 (2)插入单元格 (3)删除单元格 (4)合并单元格 (5)拆分单元格 选择需要进行拆分的单元格,单击“表格/拆分单元格”命令,或者单击“表格”工具栏上的拆分单元格按钮 ,将弹出“拆分单元
29、格”对话框,如图所示。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.7.2 单元格及表格属性设置,3表格属性 将鼠标移动到表格的任何位置,并单击鼠标右键,在弹出的快捷菜单中选择“表格属性”选项,将弹出“表格属性”对话框。 (1)表格大小:主要用于设置当前表格的行数和列数。 (2)表格布局:主要用于设置表格的对齐方式、浮动方式、单元格衬距、单元格间距等,还可指定宽度与高度。 (3)表格边框:主要用于设置表格边框的粗细、颜色、亮边框、暗边框,还可选择是否折叠表格边框。 (4)表格背景:主要用于设置表格的背景。表格背景有背景颜色和背景图片两种。 (5)表格标题:
30、将光标定位在表格中,单击“表格/插入/标题”命令,然后输入标题。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.8 超链接,简单来说,超链接就是从一个Web页或文件到另一个Web页或文件的链接。超链接都由以下两部分组成: (1)超链接源:它是用来定义作为超链接的网页中的文本或图片,又称为“超链接”。 (2)超链接目标:当用户点击超链接时会打开的页面或文件,通常称为“URL”。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.8.1 书签超链接网页内超链接,1创建书签 (1)切换到网页视图,将光标放在要创建书签的位置,或者选择
31、要分配书签的文本或图像等。 (2)单击“插入/书签”命令,将弹出如图所示书签对话框。 (3)在书签名称文本框中个输入书签的名称。 提示:若一个空白未知被标为书签,则该书签将显示 ;若文本被标为书签,该文本的下方将会显示一条虚横线。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.8.1 书签超链接网页内超链接,2创建到书签的链接 (1)选择要定义超链接的文本或图像。 (2)单击“常用”工具栏上的“插入超链接”按钮,或在选定的对象上单击鼠标右键,在弹出的快捷菜单中选择“超链接”命令,打开“插入超链接”对话框。 (3)在“插入超链接”对话框的左侧单击“本文档中的位
32、置”,此时会以列表形式给出本网页中所有的书签。 (4)选择需要链接的书签,单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.8.1 书签超链接网页内超链接,3访问和删除书签 (1)单击“插入/书签”命令,将弹出“书签”对话框。 (2)在“书签”对话框中,将会列出本网页中所有书签名称。选择需要访问的书签,单击“转到”按钮,用户就可以跳转到书签的位置。 (3)若要删除书签,在“书签”对话框中选择需要删除的书签,单击“清除”按钮,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.8.2 其他超链接站点、网页、邮箱
33、、文件,选择需要定义超链接的对象,单击鼠标右键,在弹出的快捷菜单中选择“超链接”命令,或单击“插入/超链接”命令,此时会弹出插入超链接对话框,如图1所示。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,1链接到站点,(1)在图1所示的“插入超链接”对话框中,单击“浏览Web”按钮,此时在Internet Explorer(IE浏览器)中会新建一个空白网页。 (2)在浏览器中寻找要作为超链接目标的站点,然后按ALT+TAB键返回FrontPage。该站点的URL会自动添加到“插入超链接”的地址框中。若知道目标站点准确的URL地址,也可以直接在“地址”框中输入站点地
34、址。 (3)设置完毕后,单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,2链接到网页,(1)在图1所示的“插入超链接”对话框中,单击“查找范围”,找到网页所在的站点,此时在查找范围的下方会以列表形式列出该站点中的所有文件,如图所示。 (2)单击选中需要链接的网页,并单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,3链接到邮箱,(1)在图1所示的“插入超链接”对话框中,单击“电子邮件地址”命令,此时对话框如图所示。 (2)在“电子邮件地址”下方的文本框中键入链接的目标邮箱地址。 (3)设置
35、完毕后,单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,4链接到文件,在图1所示的“插入超链接”对话框中,单击“查找范围”,找到要链接的文件,选中文件,并单击“确定”按钮即可。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.9 教学案例1新建“FrontPage特点”网页,操作重点: 不同应用程序间的数据转换 字幕设置 插入水平线 书签的定义及超链接的实现 操作难点: 书签的定义 同一网页内超链接的实现,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,新编计算机应用基础教程第
36、7章 网页制作软件FrontPage 2003的使用,7.10 框架网页,学习重点: 框架网页的创建与保存 框架网页属性设置 框架网页的调整与修饰 为超级链接制定目标框架,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.1 新建框架网页,(1)单击“文件/新建”命令,在打开的开始工作任务窗格中单击新建网页或网站超链接,此时会在界面右侧弹出新建任务窗格。 (2)单击新建网页选项区中的其他网页模板超链接,在弹出的网页模板对话框中单击“框架网页”选项卡,选择合适的框架网页模板。 (3)单击标题图标,并单击“确定”按钮,网页中会出现x相应的框架网页。框架网页的每
37、一个框架窗口中均有“设置初始网页”和“新建网页”两个按钮,其中: 设置初始网页:可在相应的框架中显示某个已经编辑好的网页文件。 新建网页:可在相应的框架区域出现一个空白区域,用户可自行编辑网页内容。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.2 保存框架网页主框架、各子框架分别保存,一个框架包含有多个子框架,主框架和子框架均需分别保存。下面以7.10.1小结中创建的标题框架网页为例,介绍框架网页的具体保存方法,其操作步骤如下: (1)单击“常用/保存”命令,将弹出“另存为”对话框。 提示:保存多个文件可能导致混淆,FrontPage 2003以加亮
38、的方式标志出了当前需要保存的框架。目前,整个外围框架被加亮,这表示当前要保存的是整个框架,即主框架。 (2)在文件名下拉列表框中输入该框架的名称“主框架” 。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.2 保存框架网页主框架、各子框架分别保存,(3)单击“保存”按钮,另存为对话框会再次弹出。此时框架预览区上方的框架被加亮,表明当前需要保存的是上方的标题框架,如图所示。在文件名下拉列表框中输入当前标题框架的文件名。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.2 保存框架网页主框架、各子框架分别保存,(4)
39、单击“保存”按钮,此时会弹出第三个另存为对话框,如图所示。在该对话框中,框架预览区右侧的框架高亮显示,表明当前需要保存的是右侧的框架。在文件名下拉列表框中输入当前框架的文件名,并单击“保存”按钮。 提示:关于框架网页的保存有如下规律,若一个网页是含有n个框架的网页,在保存完毕后,会有n+1个页面。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.3 框架属性、网页属性设置,将鼠标指针定位在某个框架网页中,并单击鼠标右键,在弹出的快捷菜单中选择“框架属性”选项,此时会弹出“框架属性”对话框,如图所示。,新编计算机应用基础教程第7章 网页制作软件FrontP
40、age 2003的使用,1框架大小 框架大小包括宽度和行高。在“宽度”和“行高”下拉列表框中可以选择“像素”、“百分比”或“相对”选项,然后在相应的数值框中输入数值即可。 2可调整性 设置在浏览器中浏览该网页时是否可以调整该框架的大小。 3边距 定义框架中的内容与框架边界的空白距离,包括宽度和高度。 4间距 设置相连框架边框之间的间距大小,以像素为单位。 在 “框架属性”对话框中单击“框架网页”按钮,将弹出“网页属性”对话框。在该对话框中选择“框架”选项卡,设置框架间距。 提示:“框架”选项卡中的“显示边框”复选框用来设置浏览时是否需要显示边框。 5滚动条 该选项用于设置框架窗口中是否显示滚动
41、条。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,6目标框架 (1)在设计视图模式下,选中某个要用作超链接的文本或者图形,在“常用”工具栏中单击“插入超链接”按钮 ,将弹出“插入超链接”对话框。 (2)单击“目标框架”按钮,将弹出“目标框架”对话框。 (3)位于“目标框架”对话框左侧的“当前框架网页”栏显示了当前框架网页的外观,单击某个框架即可将其设置为目标框架。 (4)单击“确定”按钮,即可完成设置。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.10.4 编辑框架中的网页,1拆分框架 (1)将光标定位在需要拆分的框架窗口
42、内,单击“框架/拆分框架”命令,将弹出“拆分框架”对话框,如图所示。 (2)选中“拆分成列”或“拆分成行”单选按钮,单击“确定”按钮,即可完成所选框架的拆分。 2删除框架 (1)将光标定位在需要删除的框架窗口内。 (2)单击“框架/删除框架”命令,即可删除所选框架网页。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.11 教学案例2唐诗赏析网站的制作,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.12 网站的发布,IIS是Internet Information Server(互联网信息服务)的缩写,是一种Web(网页)服
43、务组件。IIS是服务器的运行软件,分别用于网页浏览、文件传输、新闻服务和邮件发送等。 学习重点: IIS的功能 Web服务器的安装 Web服务器的配置 发布网站,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.12.1 Web服务器的安装,(1)单击“开始/设置/控制面板”命令,双击“添加/删除程序”,在“添加/删除程序”对话框中选择“添加/删除Windows组件”按钮,此时会弹出“Windows组件向导”对话框,如图所示。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,(2)勾选“Internet信息服务(IIS)”选项,按照
44、提示操作即可。 (3)IIS的安装完成后,此时“Internet信息服务(IIS)”选项前的复选框已勾选,单击“详细信息”按钮,勾选所有选项,然后单击“确定”按钮。 (5)安装完毕后应测试IIS是否安装成功。打开IE浏览器,在浏览器中输入http:/localhost或者http:/127.0.0.1。若安装成功的话,将会出现如图所示的欢迎界面。,7.12.1 Web服务器的安装,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.12.2 Web服务器的设置,1网站属性配置 2网站的主目录配置 3为网站建立和配置虚拟目录,新编计算机应用基础教程第7章 网页制作软
45、件FrontPage 2003的使用,7.12.3 网站的发布,1“远程网站”选项卡 2“优化HTML”选项卡 3“发布”选项卡,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.13 SharePoint Designer 2007简介,学习重点: SharePoint产品和技术 SharePoint Designer 2007概述 SharePoint Designer 2007的优势 SharePoint Designer 2007的新增功能,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.13.1 了解SharePoin
46、t,Windows SharePoint Services(WSS),又称Windows SharePoint,是微软创作的一款用于Windows Server 2003的免费附加(增值)软件,它提供了基本的门户网站和企业内网功能。,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.13.2 SharePoint Designer 2007概述,1快速构建解决方案以提高工作组的生产率和效率 2设计出符合组织需要的引人注目的SharePoint网站 3网站管理员和IT经理:保持对网站的控制,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使
47、用,7.13.3 SharePoint Designer 2007的十大优势,1通过新一代Microsoft Web技术提高生产效率 2可以完全按照所需方式自定义SharePoint网站 3轻松地在整个SharePoint网站中进行更改或撤消更改 4保持对网站自定义的控制 5创建工作流以自动化业务流程 6无需编写代码即可创建交互式网页 7集成业务数据 8开发与各种浏览器和Web标准兼容的网站 9构建高级ASP.NET页 10管理和保护您的网站,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.13.4 SharePoint Designer 2007的新增功能,
48、1开发网站 (1)ASP.NET母版页 (2)专业级设计环境 2构架自定义程序 (1)与数据进行交互 (2)向工作流设计器中添加业务逻辑 (3)支持交互式ASP.NET页 3管理网站 (1)讨论参与者设置 (2)重置为网站定义,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,7.14 教学案例3学生个人求职网站的建立与发,操作重点: 站点的新建与发布 创建框架网页及网页设置 创建表格及表格设置 插入水平线 创建超链接及目标框架设置 框架网页的保存 操作难点: 框架网页标题设置 超级链接目标框架的设置 框架网页的保存,新编计算机应用基础教程第7章 网页制作软件FrontPage 2003的使用,