
网制作软件FrontPage的使用.ppt
71页/网页制作软件网页制作软件FrontPage 2003的使用的使用 1.网页的基本概念、网站开发的一般流程2.FrontPage 2003的基本操作方法3.站点的创建和打开方法4.各种网页对象(文本、组件、表单等)的编辑、设置与使用方法5.图像的编辑方法6.表格的基本操作7. 常用超链接的创建方法与区别8.网页属性和框架网页属性的设置9.网站的发布与设置学习目标:学习目标: 1.1 网站的概念n网站就是由许多相关网页有机结合而组成的一个信息服务中心n网页就是用户在浏览器上看到的内容,网站设计者把提供的内容和服务制作成许多网页,并通过组织规划让网页互相链接,然后把所有相关的文件都存放到一个Web服务器上只要是连入Internet的用户都可以使用浏览器访问到这些信息n这个完整的结构就成为“网站”,也称“站点” 学习内容学习内容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.启动FrontPagen方法1:单击“开始/程序/Microsoft Office / Microsoft Office FrontPage 2003”命令,则启动FrontPage应用程序,并新建一个名为“new_page_1.htm”的网页。
n方法2:双击桌面上的FrontPage快捷方式图标 2.关闭网页并退出退出FrontPage前,应将文件保存,若文件尚未保存,FrontPage会在关闭窗口前提示保存文件1)关闭当前网页n方法1:选择“文件/关闭”菜单命令n方法2:单击菜单栏最右侧的“关闭窗口”按钮 2)直接退出FrontPage应用程序n方法1:单击标题栏最右边的“关闭”按钮 n方法2:单击“文件/退出”命令n方法3:当FrontPage应用程序窗口作为当前活动窗口时,按Alt+F4键n方法4:单击FrontPage窗口左上角的图标 ,从弹出的菜单中单击“关闭”命令(或直接双击图标 ) 2.4 FrontPage的窗口组成垂直滚动条水平滚动条视图方式状态栏标题栏菜单栏常用工具栏格式工具栏网页名称任务窗格编辑框工作表区 3.1 HTML简介1.什么是HTMLnHTML(HyperText Markup Language)是一种超文本标记语言,是一种专门用于Web网页制作的标记语言。
nHTML文件是纯文本文件,可以用任何一种文本编辑器(如记事本)来编辑代码将用HTML编写的文件保存成扩展名为.htm或者.html的文件,浏览器通过解释执行HTML编码 2.熟悉HTML为了便于直观的认识HTML,下面我们用HTML代码来编写一个简单的网页启动Windows记事本,输入如下HTML代码:
头部描述浏览器所需要的信息,主要含有网页标题、解码方式等信息;主体包含所要说明的具体内容,含有网页中的各种元素,如段落文字、表格、图像、颜色等信息nHTML文档最重要的特性是能支持超链,它能使网页之间链接起来,从而实现了网页之间的跳转和自由切换链源可以是文档中的任何一个字、词或句子,甚至可以是一幅图像链宿可以是另外一个Web服务器上的某个信息资源,也可以是文档内部的某个地方HTML的这种超链接功能是它能作为Web语言的主要原因之一 4.1 打开站点和网页1.打开站点(1)单击“文件/打开网站”命令,将弹出“打开网站”对话框2)在查找范围下拉列表框中选择Web站点所在的目录,在下方的Web站点列表中选择一个站点,然后单击“打开”按钮,就可以打开该站点打开站点后将显示该站点中所有的文件 4.1 打开站点和网页2.打开网页打开网页的操作比较简单,和Word和Excel的打开文件比较类似,具体操作步骤如下:(1)单击“文件/打开”命令,将弹出“打开文件”对话框2)在“打开文件”对话框的查找范围下拉列表框中选择要打开的文件所在的位置,在文件类型下拉列表框中选择Web页,然后单击所要打开的网页,最后单击“打开”按钮。
4.2 新建站点与导入素1.新建站点(1)单击“文件/新建”命令,或者单击“视图/任务窗格”命令,在打开的“开始工作”任务窗格中单击由一个网页组成的网站,弹出网站模板对话框2)单击网站模板右侧的“浏览”按钮,输入指定新网站的位置3)在网站模板对话框左侧的列表中选择新站点的模板或向导,单击“确定”按钮此时会在指定的路径文件夹下生成一个含有Index.htm(主页)的站点,双击该文件便可以在编辑区对主页进行编辑了 4.2 新建站点与导入素材2.导入素材单击“文件/导入”命令,弹出“导入素材”对话框,如图所示导入素材主要有添加文件、添加文件夹、来自网站三种对象,单击相应按钮完成素材的导入 5.1 新建网页(1)单击“文件/新建”命令,程序的右侧将弹出“新建”任务窗格,如图所示2)在“新建网页”选项区中执行下列操作之一:v空白网页:可新建一个空白网页v根据现有网页新建:可根据已创建的动态网页模板创建网页v其他网页模板:单击可根据FrontPage 2003提供的模板创建网页。
5.2 文本编辑与格式设置1.文本编辑 常用的文本编辑操作有:选择、移动、剪切、复制、粘贴、删除、查找和替换等1)选择文本n使用菜单选择文本的方法只有一种:单击“编辑/全选”命令,可以选择编辑区域内的所有内容n若要选择一行,可以将光标定位于要选定行的左侧,当光标变为向右指的箭头时,单击鼠标左键即可2)移动文本n将光标移至要选择文本的段落左侧,拖动光标,选择要移动的文本然后按下鼠标左键,将其拖动至目的地,松开左键即可n移动文本还可以利用“剪切(Ctrl+X)”与“粘贴(Ctrl+V)”命令完成3)删除文本n选择需要删除的文本,然后按下键盘上的Delete键(或选择“剪切”命令) 5.2 文本编辑与格式设置2.格式设置(1)选择需要进行格式设置的文本,单击“格式/字体”命令,打开字体对话框2)在“字体”选项卡中选择合适的字体、字形和大小等,效果选项组还可以对文字设置不同的效果,在“字符间距”选项卡中设置字符间距等 5.3 插入对象及组件1.插入水平线(1)将光标定位在需要插入水平线的位置。
2)单击“插入/水平线”命令,即可在当前插入点位置插入一条水平线3)右键单击水平线,在弹出的快捷菜单中选择“水平线属性”选项,弹出“水平线属性”对话框,如图所示,在该对话框中可以对水平线进行相应的属性设置 5.3 插入对象及组件2.插入日期和时间(1)单击“插入/日期和时间”命令,弹出“日期和时间”对话框,如图所示2)在“日期和时间”对话框中选择显示的方式,并在“日期格式”和“时间格式”下拉列表框中设置日期和时间的显示格式,最后单击“确定”按钮即可完成操作 5.3 插入对象及组件3.插入计数器(1)将光标定位在需要插入计数器的位置2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框在该对话框左侧的组件类型中选择“计数器” 3)单击“完成”按钮,此时会弹出“计数器属性”对话框,如图所示,选择合适的计数器样式,单击“确定”按钮 5.3 插入对象及组件4.插入字幕(1)将光标定位在需要插入字幕的位置2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框。
在该对话框左侧的组件类型中选择“动态效果”,在右侧列表框中选择“字幕”选项3)单击“完成” ,此时会弹出“字幕属性”对话框4)单击“确定”按钮即可插入字幕 5.3 插入对象及组件5.插入交互式按钮(1)将光标定位在需要插入交互式按钮的位置2)单击“插入/Web组件”命令,弹出“插入Web组件”对话框在该对话框左侧组件类型中选择“动态效果”,在右侧列表框中选择“交互式按钮”选项3)单击“完成”按钮,弹出“交互式按钮”对话框4)在“按钮”选项卡上“按钮”列表框中选择一种按钮样式,在“文本”右侧的文本框中输入该按钮上的文字,在“链接”右侧的文本框中输入该按钮对应的链接,或者单击“浏览”按钮,选择该链接所对应的URL地址 5.3 插入对象及组件(5)单击“字体”选项卡,设置该文本的字体、字形、字号等属性,如图所示6)单击“图像”选项卡,进行按钮图片的设置,如图所示7)完成所有设置后,单击“确定”按钮即可插入交互式按钮 5.4 网页格式设置1.常规(1)将光标定位在当前网页的任何位置,并单击鼠标右键,在弹出的快捷菜单中选择“网页属性”命令,此时会弹出“网页属性”对话框。
2)若要为当前网页设置标题,在“常规”选项卡的“标题”选项区右侧的文本框中输入标题名称3)若要为当前网页设置背景音乐,在“常规”选项卡的“位置”选项区单击“浏览”按钮,在弹出的“背景音乐”对话框中选择合适的音乐,单击“打开”按钮3)设置完毕后,单击“确定”按钮即可 5.4 网页格式设置2.背景设置(1)将光标定位在当前网页的任何位置2)单击“格式/背景”命令,或在网页属性对话框中单击“格式”选项卡3)若要为当前网页设置背景图片,并将背景图片设置为水印效果可选中“背景图片”和“使其成为水印”两个复选框,并单击“浏览”按钮,打开“选择背景图片”对话框,在其中选择需要的背景图片并单击“打开”按钮即可4)设置完毕后,单击“确定”按钮即可 5.4 网页格式设置3.过渡效果(1)打开需要增加网页过渡效果的网页2)单击“格式/网页过渡”命令,将弹出“网页过渡”对话框3)在“事件”下拉列表框中选择一种触发过渡效果的事件4)在“周期(秒)”文本框中输入过渡效果所持续的时间5)在“过渡效果”列表框中选择一种网页过渡效果。
6)设置完毕后,单击“确定”按钮,当前网页的过渡效果就设置好了 5.4 网页格式设置1.建立页眉/页脚 执行“视图/页眉和页脚”命令 2.建立奇偶页不同的页眉 单击工具栏中的“页面设置”按钮,打开“页面设置”对话框在“版式”选项卡的“页眉和页脚”框中,选中“奇偶页不同”复选框 3.页眉页脚的删除 5.5 插入表单及表单设置1.插入表单n要在网页中插入一个表单,可单击“插入/表单”命令,此时将弹出一个子菜单,该子菜单中列出了FrontPage 2003中表单的所有元素 5.5 插入表单及表单设置2.表单设置n在需要设置的表单上单击鼠标右键,此时会弹出“表单属性”对话框n单击“表单属性”对话框中的“选项”按钮,打开“保存表单结果”对话框,共包含四个选项卡,默认显示“文件结果”选项卡 5.6 保存网页(1)保存单击“文件/保存”命令或单击“常用”工具栏中的快速保存按钮 2)另存为单击“文件/另存为”命令,将会弹出“另存为”对话框,在该对话框中可以选择保存位置、保存类型,输入文件名并单击“保存”按钮即可。
6.1 插入图片及图片属性1.插入图片文件(1)将光标定位在要插入图片的地方,单击“插入/图片/来自文件”命令,或者单击“常用”工具栏上的插入图片按钮 ,将会弹出“图片”对话框 (2)选择需要的图片,单击“插入”按钮,即可将图片插入到页面中 6.1 插入图片及图片属性2.修改图片属性 选中图片,单击“格式/属性”,或者在图片上单击鼠标右键,此时会弹出“图片属性”对话框在该对话框中,可以完成环绕方式、布局、大小的设置 6.2 动态HTML效果设置(1)单击“视图/工具栏/DHTML效果”命令,弹出“DHTML效果”工具栏2)选中需要设置动态HTML效果的元素,在“DHTML效果”工具栏左侧的“在”下拉列表框中选择一种事件例如选择“单击”事件,此时中间的“应用”下拉列表框由灰色变成白色,表示可以进行进一步的详细设置3)在“应用”下拉列表框中选择一种效果,例如选择“飞出”效果,此时右侧的下拉列表框由灰色变成白色,表示可以进行具体效果的设置4)单击效果下拉列表框选择一种效果设置,例如选择“逐字到右上部”,此时已完成动态HTML的效果设置。
1 表格制作1.使用菜单创建表格(1)单击“表格/插入/表格”,将弹出“插入表格”对话框,如图所示2)在“插入表格”对话框中的“大小”选项区中输入要插入表格的行数和列数,然后单击“确定”按钮,即可插入所需要的表格 1 表格制作2.使用命令按钮创建表格n单击“常用”工具栏上的插入表格按钮 ,将弹出一个表格形式的下拉面板在该面板中拖拽鼠标左键,该面板的下方会显示出当前表格的行数和列数,鼠标指针经过的区域会变成深蓝色,如图所示当选定了所需要的表格后,释放鼠标左键即可表格的插入 1 表格制作3.手工绘制表格(1)单击“视图/工具/表格”命令,打开表格工具栏,如图所示2)单击“绘制表格”按钮,此时鼠标指针将变成笔的形状在编辑区按下鼠标左键并拖动鼠标,到某一个位置后释放鼠标左键,即可画出表格边框,然后在边框内添加线条即可画出需要的表格n提示:若想删除某线段,可使用“表格”工具栏中的擦除按钮 1 表格制作4.将文本转换成表格(1)选中需要转换成表格的文本,单击“表格/转换/文本转换成表格”命令,将弹出“文本转换成表格”对话框,如图所示。
2)根据需要在“文本转换成表格”对话框中选择需要的文本分隔符,或者选择“其他”按钮,并在其右边的文本框中输入相应的符号3)单击“确定”按钮,即可完成文本转换成表格 2 单元格及表格属性设置1.表格编辑(1)选中行或列(2)插入行或列(3)移动和复制行或列(4)删除行或列 2 单元格及表格属性设置 2.单元格操作(1)选定单元格(2)插入单元格(3)删除单元格(4)合并单元格(5)拆分单元格选择需要进行拆分的单元格,单击“表格/拆分单元格”命令,或者单击“表格”工具栏上的拆分单元格按钮 ,将弹出“拆分单元格”对话框,如图所示 2 单元格及表格属性设置3.表格属性n将鼠标移动到表格的任何位置,并单击鼠标右键,在弹出的快捷菜单中选择“表格属性”选项,将弹出“表格属性”对话框1)表格大小:主要用于设置当前表格的行数和列数2)表格布局:主要用于设置表格的对齐方式、浮动方式、单元格衬距、单元格间距等,还可指定宽度与高度3)表格边框:主要用于设置表格边框的粗细、颜色、亮边框、暗边框,还可选择是否折叠表格边框。
4)表格背景:主要用于设置表格的背景表格背景有背景颜色和背景图片两种5)表格标题:将光标定位在表格中,单击“表格/插入/标题”命令,然后输入标题 8 超链接n简单来说,超链接就是从一个Web页或文件到另一个Web页或文件的链接超链接都由以下两部分组成:(1)超链接源:它是用来定义作为超链接的网页中的文本或图片,又称为“超链接”2)超链接目标:当用户点击超链接时会打开的页面或文件,通常称为“URL” 8.1 书签超链接——网页内超链接1.创建书签(1)切换到网页视图,将光标放在要创建书签的位置,或者选择要分配书签的文本或图像等2)单击“插入/书签”命令,将弹出如图所示书签对话框3)在书签名称文本框中个输入书签的名称提示:若一个空白未知被标为书签,则该书签将显示 ;若文本被标为书签,该文本的下方将会显示一条虚横线 8.1 书签超链接——网页内超链接2.创建到书签的链接(1)选择要定义超链接的文本或图像2)单击“常用”工具栏上的“插入超链接”按钮,或在选定的对象上单击鼠标右键,在弹出的快捷菜单中选择“超链接”命令,打开“插入超链接”对话框。
3)在“插入超链接”对话框的左侧单击“本文档中的位置”,此时会以列表形式给出本网页中所有的书签4)选择需要链接的书签,单击“确定”按钮即可 8.1 书签超链接——网页内超链接3.访问和删除书签(1)单击“插入/书签”命令,将弹出“书签”对话框2)在“书签”对话框中,将会列出本网页中所有书签名称选择需要访问的书签,单击“转到”按钮,用户就可以跳转到书签的位置3)若要删除书签,在“书签”对话框中选择需要删除的书签,单击“清除”按钮 8.2 其他超链接——站点、网页、邮箱、文件n选择需要定义超链接的对象,单击鼠标右键,在弹出的快捷菜单中选择“超链接”命令,或单击“插入/超链接”命令,此时会弹出插入超链接对话框,如图1所示 1.链接到站点(1)在图1所示的“插入超链接”对话框中,单击“浏览Web”按钮,此时在Internet Explorer(IE浏览器)中会新建一个空白网页2)在浏览器中寻找要作为超链接目标的站点,然后按ALT+TAB键返回FrontPage。
该站点的URL会自动添加到“插入超链接”的地址框中若知道目标站点准确的URL地址,也可以直接在“地址”框中输入站点地址3)设置完毕后,单击“确定”按钮即可 2.链接到网页(1)在图1所示的“插入超链接”对话框中,单击“查找范围”,找到网页所在的站点,此时在查找范围的下方会以列表形式列出该站点中的所有文件,如图所示2)单击选中需要链接的网页,并单击“确定”按钮即可 3.链接到邮箱(1)在图1所示的“插入超链接”对话框中,单击“电子邮件地址”命令,此时对话框如图所示2)在“电子邮件地址”下方的文本框中键入链接的目标邮箱地址3)设置完毕后,单击“确定”按钮即可 4.链接到文件n在图1所示的“插入超链接”对话框中,单击“查找范围”,找到要链接的文件,选中文件,并单击“确定”按钮即可 9 教学案例1——新建“FrontPage特点”网页n操作重点:操作重点:ü不同应用程序间的数据转换ü字幕设置ü插入水平线ü书签的定义及超链接的实现n操作难点:操作难点:ü书签的定义ü同一网页内超链接的实现 10 框架网页n学习重点:学习重点:ü框架网页的创建与保存ü框架网页属性设置ü框架网页的调整与修饰ü为超级链接制定目标框架 10.1 新建框架网页(1)单击“文件/新建”命令,在打开的开始工作任务窗格中单击新建网页或网站超链接,此时会在界面右侧弹出新建任务窗格。
2)单击新建网页选项区中的其他网页模板超链接,在弹出的网页模板对话框中单击“框架网页”选项卡,选择合适的框架网页模板3)单击标题图标,并单击“确定”按钮,网页中会出现x相应的框架网页框架网页的每一个框架窗口中均有“设置初始网页”和“新建网页”两个按钮,其中:n设置初始网页:可在相应的框架中显示某个已经编辑好的网页文件n新建网页:可在相应的框架区域出现一个空白区域,用户可自行编辑网页内容 10.2 保存框架网页—主框架、各子框架分别保存一个框架包含有多个子框架,主框架和子框架均需分别保存下面以10.1小结中创建的标题框架网页为例,介绍框架网页的具体保存方法,其操作步骤如下:(1)单击“常用/保存”命令,将弹出“另存为”对话框提示:保存多个文件可能导致混淆,FrontPage 2003以加亮的方式标志出了当前需要保存的框架目前,整个外围框架被加亮,这表示当前要保存的是整个框架,即主框架2)在文件名下拉列表框中输入该框架的名称“主框架” 10.2 保存框架网页—主框架、各子框架分别保存 (3)单击“保存”按钮,另存为对话框会再次弹出。
此时框架预览区上方的框架被加亮,表明当前需要保存的是上方的标题框架,如图所示在文件名下拉列表框中输入当前标题框架的文件名 10.2 保存框架网页—主框架、各子框架分别保存(4)单击“保存”按钮,此时会弹出第三个另存为对话框,如图所示在该对话框中,框架预览区右侧的框架高亮显示,表明当前需要保存的是右侧的框架在文件名下拉列表框中输入当前框架的文件名,并单击“保存”按钮n提示:关于框架网页的保存有如下规律,若一个网页是含有n个框架的网页,在保存完毕后,会有n+1个页面 10.3 框架属性、网页属性设置n将鼠标指针定位在某个框架网页中,并单击鼠标右键,在弹出的快捷菜单中选择“框架属性”选项,此时会弹出“框架属性”对话框,如图所示 1.框架大小n框架大小包括宽度和行高在“宽度”和“行高”下拉列表框中可以选择“像素”、“百分比”或“相对”选项,然后在相应的数值框中输入数值即可2.可调整性n设置在浏览器中浏览该网页时是否可以调整该框架的大小3.边距n定义框架中的内容与框架边界的空白距离,包括宽度和高度。
4.间距n设置相连框架边框之间的间距大小,以像素为单位n在 “框架属性”对话框中单击“框架网页”按钮,将弹出“网页属性”对话框在该对话框中选择“框架”选项卡,设置框架间距n提示:“框架”选项卡中的“显示边框”复选框用来设置浏览时是否需要显示边框5.滚动条n该选项用于设置框架窗口中是否显示滚动条 6.目标框架(1)在设计视图模式下,选中某个要用作超链接的文本或者图形,在“常用”工具栏中单击“插入超链接”按钮 ,将弹出“插入超链接”对话框2)单击“目标框架”按钮,将弹出“目标框架”对话框3)位于“目标框架”对话框左侧的“当前框架网页”栏显示了当前框架网页的外观,单击某个框架即可将其设置为目标框架4)单击“确定”按钮,即可完成设置 10.4 编辑框架中的网页1.拆分框架 (1)将光标定位在需要拆分的框架窗口内,单击“框架/拆分框架”命令,将弹出“拆分框架”对话框,如图所示2)选中“拆分成列”或“拆分成行”单选按钮,单击“确定”按钮,即可完成所选框架的拆分 2.删除框架(1)将光标定位在需要删除的框架窗口内。
2)单击“框架/删除框架”命令,即可删除所选框架网页 11 教学案例2——唐诗赏析网站的制作 12 网站的发布nIIS是是Internet Information Server(互联网信息(互联网信息服务)的缩写,是一种服务)的缩写,是一种Web(网页)服务组件网页)服务组件IIS是服务器的运行软件,分别用于网页浏览、文是服务器的运行软件,分别用于网页浏览、文件传输、新闻服务和邮件发送等件传输、新闻服务和邮件发送等n学习重点:学习重点:üIIS的功能üWeb服务器的安装üWeb服务器的配置ü发布网站 12.1 Web服务器的安装n(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—学生个人求职网站的建立与发n操作重点:操作重点:ü站点的新建与发布ü创建框架网页及网页设置ü创建表格及表格设置ü插入水平线ü创建超链接及目标框架设置ü框架网页的保存n操作难点:操作难点:ü框架网页标题设置ü超级链接目标框架的设置ü框架网页的保存 /谢 谢! 。
