FrontPage_2003网页制作

合集下载

使用FrontPage_2003制作网页

（2）代码视图。该视图提供用户查看、编写和编辑 HTML标识的功能。
（3）拆分视图。该视图上半部分提供代码视图，下半部分提供设计视图，可以使用户能够直观地看到编写的代码在网页中的效果。
（4）预览视图。在该视图中用户可以在发布网页前提前预览网页中的内容，以便于修改其中的某些细节部分。
第二节站点的基本操作
（5）超链接视图。该视图将网站中所有的内部和外部超链接的状态显示在一个列表中，并用图标表示超链接已通过验证或已中断。选择“视图”→“超链接”命令，即可切换到该视图。
（6）任务视图。该视图以列表的形式显示网站中的所有已完成或尚未完成的任务，并在各个列标题下提供有关各项任务的当前信息。选择“视图”→“任务”命令，即可切换到该视图。
第八章使用FrontPage 2003制作网页
第一节 FrontPage 2003概述第二节站点的基本操作第三节制作和美化网页第四节框架网页第五节表单和组件的使用第六节发布站点第七节应用实例——论坛首页习题八
第一节 FrontPage 2003概述
现代社会是一个网络社会，人们在日常生活中离不开网络，网络的诞生与发展，极大地方便了人们的信息交流和资源共享，推动着信息社会的飞速前进。
（3）自定义站点。如果用户已对该软件非常熟悉，也可以自定义创建站点，具体操作如下：
1）选择“文件”→“新建”命令，弹出“新建”任务窗格。
2）在该任务窗格中的“新建网站”选项区中选择“由一个网页组成的网站”选项，弹出“网站模板”对话框。
3）在该对话框中选择“空白网站”选项，并在右侧的网站位置下拉列表框中输入网站的位置后，单击“确定” 按钮，即可创建一个只包含两个空白文件夹private和 image的站点，用户可自行创建主页及其他网页文件。

网页制作FrontPage2003

返回
任务一制作简单网页
选择“插入”菜单中的“水平线”命令，插入水平线。双击水平线，在打开的“水平线属性”对话框中设置其属性。输入文字“北京2008奥运吉祥物及历届奥运吉祥物”，并在两段文字后分别插入图片“福娃贝贝”和“2004年奥运吉祥物”。
返回
任务一制作简单网页
插入超链接第一步：选择文字“北京2008奥运吉祥物”。第二步：利用“插入”菜单或右键菜单中“创建超链接 ”命令，打开“创建超链接”对话框。
一、网页视图网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计和修改。二、文件夹视图打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与Windows中的资源管理器相似，它能够显示当前的 Web中的内容是如何组织的。
• 三、报表视图报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用报表视图能够使用户方便地了解网页的属性，便于把握和修改网页。 • 四、导航视图导航视图清楚地显示了Web的结构，用户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。
启动FrontPage2003 单击任务栏上的“开始”按钮，指向“程序”，单击 “Microsoft FrontPage”启动FrontPage2003。
返回
任务一制作简单网页
新建站点选择“文件”菜单中的“新建”“站点”命令，指定站点的位置，建立站点Web1,FrontPage2003默认建立主页（ index.htm）。
网页制作软件
FrontPage 2003
任务一制作简单网页
任务二：网页布局及发布、表单的创建
任务一制作简单网页
任务引入
我们很多人都喜欢上网冲浪，甚至于梦想着有一天自己也能拥有一个个人网站，可是，怎样制作网站呢？我们可能还从未曾真正的知道,而FrontPage就可以帮助我们完成我们的小小愿望。

小学六年级信息技术上册FrontPage2003制作网页课件

图片除了增加网页的装饰效果外，也可作为网页的导航按钮。
从本地文件系统中添加图片，图片可以为GIF、JPEG、 BMP等文件格式。
保存网页时，FrontPage会提示将图片保存到您的站点中。若图片不是GIF或JPEG 格式，使用256色或更少颜色的图片会自动地转换成GIF，而所有其他的图片会转换成JPEG格式。
图6-23“视频”选项卡
FrontPage 2003 制作网页
实例6-5 建立和编辑超链接
一、本例要求
★ 掌握建立文本超链接的方法和步骤。 ★ 掌握建立图像超链接的方法和步骤。 ★ 掌握建立邮件超链接的方法和步骤。
FrontPage 2003 制作网页
二、操作步骤
运行FrontPage，在“设计”视图模式下，输入文本“兰州石化职业技术学院”。
FrontPage 2003 制作网页
实例2 利用FrontPage2003创建一个网页一、本例要求
★ 掌握利用FrontPage2003创建、保存、打开网页的步骤和方法。
FrontPage 2003 制作网页
二、操作步骤
使用菜单“文件”→“新建”，在弹出的“新建”任务窗格中选择 “空白网页”。任务窗格消失，这时就创建了一个空白网页。在编辑区输入一段自我介绍的文字：“你好，我是李明，我家住在广西梧州……”如图6-5所示，对文字做简单的修饰。
FrontPage 2003 制作网页
7. 单击取文件名为example6-4，更改标题为“案例6-4”，单击“确定”按钮。 8. 在弹出的如图6-20所示的“保存嵌入式文件”对话框中，单击“确定”按钮。
图6-20“保存嵌入式文件”对话框
FrontPage 2003 制作网页
三、本案例知识点

FrontPage2003 网页制作教程

2
1.1 FrontPage 2003的启动和退出
一、启动
在Windows 桌面单击“开始”菜单，执行［所有程序］[ Microsoft Office ] [Microsoft Office FrontPage 2003 ]命令
二、退出
执行[文件][退出]命令，或者单击窗口右上角标题栏的[关闭]按钮
example: “标题”框架模板新建网页
1)执行[文件][新建] 命令，出现“新建” 任务窗格
2)在“新建网页”栏中，选择[其他网页模板]
3)选择“框架网页”选项卡
4)选择“标题”模板 ,并编辑网页 14
2.4 利用框架网页模板新建网页
5) 浏览网页
返回
15
3 网页的编辑与效果设计
5
1.4 任务窗格
返回
6
2 新建网页
2.1 新建网页的方法 2.2 新建空白网页 2.3 利用常规模板新建网页 2.4 利用框架网页模板新建网页
7
2.1 新建网页的方法
一、空白网页
新建一个空白的网页
二、文本文档
新建一个纯文本文件，后缀名为· txt
三、根据现有网页新建
从本地或互联网上查找到网页，新建一个同样的网页
21
4.1 设置网页属性
执行[文件][属性]命令
一、设置网页背景音乐
二、设置网页背景图片
22
4.2 设置网页主题
应用主题
1)打开要应用主题的网页 2)执行[格式][主题] 命令，弹出“主题”任务窗格 3) “主题”任务窗格中，浏览主题的缩略图，单击需要的主题
删除主题
1)执行[格式][主题]命令 2)在“主题”任务窗格中删除网站的主题

FrontPage 2003网页制作

目录上一页下一页结束
我们把用HTML语言编写的文件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web 服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把 HTML文档称为网页 (Web Page)。
目录上一页下一页结束返回
<body background="路径/图片文件名">…</body>
HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。
计算机文化基础
2018/9/12
计算机文化基础
目录上一页下一页结束
2018/9/12
20
9.2 FrontPage 2003概述
9.2.1 9.2.2 9.2.3 9.2.4 9.2.5 FrontPage 2003的主要功能 FrontPage 2003的启动与退出网页与网站 FrontPage 2003的网页视图模式 FrontPage 2003中的视图
计算机文化基础
目录上一页下一页结束
2018/9/12
7
HTML语言概述
将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。
目录上一页下一页结束
图9-1
2018/9/12
计算机文化基础
8
目录上一页下一页结束
目录上一页下一页结束返回
2018/9/12

第6章网页制作FrontPage2003

2.链接到书签我们不仅可以用超链接的方法在多个网页之间进行跳转，也可以在同一个页面里跳转。它的最大优点是可以使我们迅速跳到网页的某部分。首先要定义书签。然后就直接把超链接指向书签就可以了。书签可以是网页中的特殊标记，也可以是网页中任何位置的字符。但图形不能做书签。操作方法：例如：选择作书签的字符“我的简历”， “插入”“书签” ，“书签名称”就是选择的文本名称（也可用默认名称），确定。在普通视图里“我的简历”被加了下划虚线，表示这儿有一个书签。我的简会看到历；现在我们来建立到书签的链接。选中“ 书签名称”，把它作为超链接文本，单击“常用”工具栏“超链接”按钮，选择书签名字即可。
• FrontPage的界面：与WORD有相同的界面外，还有特有的部分界面 1．在视图栏内有六种模式：网页、文件夹、报表、导航、超链接、任务 2．在“网页”视图方式下，设有“普通”、“HTML”、“浏览”三个控制按钮。（1）“普通”方式：可以利用菜单中的命令或工具栏上的按钮来编辑网页。（2）“HTML”方式：可以直接对网页的HTML代码进行编辑操作。（3）“预览”方式：可以预览当前的网页，让编制者观看自己当前所作的网页效果，不能编辑。
操作方法：单击当前网页要插入注释的位置，选 “插入”-- “注释”命令，这样就会弹出“注释”对话框，在 “注释”文本框中输入注释的内容，单击“确定”按钮。
对象的定位
使用“查看”菜单打开“图片”工具栏；或使用“查看”菜单的“工具栏”→“定位”命令，激活“定位”工具栏。选择定位对象（图片或表格或水平线），使“图片”工具栏中的“绝对定位” 按钮被选中（处于凹状），用鼠标移动对象可精确定位到合适的位置。
如何设计一个简单的网页？
刚才是规划好网站的结构，现在开始网站内的网页制作。网页是站点中最基本的文档，它是用HTML （超文本描述语言）编写的，如果你不了解HTML语言，也没关系，FrontPage具有“所见即所得”的特性，并自动创建HTML代码，所以，一般用户在“普通”模式下也能直接创建出多种格式的网页。

FrontPage 2003网页制作

FrontPage 2003网页制作一、打开fropkt文件夹下的“我的家乡.htm”文件，进行如下操作：A.设置网页属性标题为"我的家乡"将网页中的超链接的默认颜色设为"红色"B.网页编辑将"影响中国历史进程的河北名人"下的表格第一列文字设置为隶书,18磅、紫色，居中将fropkt文件夹下的“河北省地形图.jpg”图片插入到“河北省地形（图）”文字的下边。

图片的对齐方式为“居中”，锁定纵横比，宽度为200像素。

C.热点设置在“河北城市风采（图）”文字右边设置书签，名称为“河北城市风采”将图片“河北省地形图”设置为长方形热点，与书签“河北城市风采”链接。

D.链接设置·将表格中的文字“伯夷”与“”链接。

·将表格中的图片“石家庄”与“”链接。

将上述操作结果按原文件名保存。

二、打开fropkt文件夹下的“我的网站.htm”文件，进行如下操作：A.设置网页的属性：·标题为“我的网站”。

·背景色为“白色”。

B.网页编辑·将三行蓝色标题（个人风采、我的理想、我的爱好）设置为楷体、24磅、水平居中对齐。

·在“闻鸡起舞”一行的第二列单元格中插入fropkt文件夹中“闻鸡起舞.jpg”图片，水平居中对齐。

·将“我的理想（图）”表格中企业家的图片移动到该单元格的文字后边；图片对齐方式设为“相对垂直居中”C.链接设置·在“个人爱好（图）”前边插入书签，书签名称为“我的爱好”。

·将标题下边表格中的“我的爱好”文本链接到“我的爱好”书签。

最后将上述操作结果以原文件名保存。

三、打开fropkt文件夹下的“花卉欣赏.htm”文件，进行如下操作：A.设置网页的属性：·标题为“花卉欣赏”。

·背景色为“银白色”。

B.网页编辑·将“花卉欣赏”设置为：楷体、蓝色、36磅、居中。

中文FrontPage2003网页制作

<HEAD>…</HEAD> 表示文件的头开始和结尾。
<TITLE>…</TILE>表示标题的开始和结尾。
<BODY>…</BODY>表示文件体的开始和结尾。
<P>标记是用于段落分隔。
<!—注释文档--> 是注释标记的格式
10.02.2021
可编辑版
3
8.1.3 文字处理标志
• HTML的文字处理包括字体标志、字体颜色、字体大小三种。 1. 标题字体标志 2. 字体大小及颜色标志 3. 修饰字体标志 4.字体对齐标志
源代码如下： <html> <head> <title>欢迎新生 1</title> </head> <body> 热烈欢迎新同学! <P>祝新同学德、智、体、美全面发展！  </body> </html> 显示的效果如图9-1所示
源代码说明：
<html>…</html> 表示文件的开头和结尾。
第8章中文FrontPage2003网页制作
8.1 HTML语言基础 8.2 FrontPage2003简介 8.3 网页的修饰 8.4 框架网页 8.5 表单的操作 8.6 FrontPage 2003 组件
10.02.2021
可编辑版
1
8.1.1 什么叫HTML
HTML的全称为Hyper Text Markup Language,中文译为超文
１.创建链接页面
2.创建链接标签标志
10.02.2021

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<标记名>文本内容</标记名>
标记名写在“< >”内。多数HTML标记同时
目录
具有起始和结束标记，并且成对出现，但也有些上一页 HTML标记没有结束标记。另外，HTML标记不区分
下一页
大小写。
结束
2021/2/12
实用文档
15
目录上一页下一页结束
HTML网页的结构现在我们先看一个简单的HTML文件，从中体会用HTML语言编写
FrontPage2003 网页制作
彭祥超
实用文档
网站与网页
网站是由一些相关联的网页构成的一个整体。一个网站通常包含多个网页，其起始网页称为主页，也叫首页。
Index.htm或者index.html
目录上一页
下一页网页是利用各种软件或开发工具制作而结束成的文件（一个页面）
实用文档
网页
下一页
层次结构。
结束
2021/2/12
实用文档
14
HTML文件的基本构成
HTML文件的基本构成
Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：
结束
2021/2/12
实用文档
12
HTML简介
HTML 语言是一种标记语言，简单易学。用 HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。
目录上一页下一页结束返回
HTML语言概述 HTML语言的基本语法
网页的扩展名为.html或者.htm 网页可分为静态网页和动态网页其中动态网页又可分为动态表现一页结束
实用文档
目录上一页下一页结束
实用文档
静态网页的开发工具
可以制作静态网页的工具有记事本、 HTML超文本标记语言 Dreamweaver
其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。
如果网页使用背景图像，格式如下：
<body background="路径/图片文件名">…</body>
HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。
我们把用HTML语言编写的文件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web 服务器发出请求，服务器响应请求并将HTML文件发送目录给浏览器，然后由浏览器对文件中的标记作出相应的上一页解释，以页面的形式呈现在用户屏幕上。因此，我们下一页又把HTML文档称为网页 (Web Page)。
实用文档
目录上一页下一页结束
实用文档
目录上一页下一页结束
实用文档
目录上一页下一页结束
实用文档
目录上一页下一页结束
实用文档
HTML简介
HTML即Hypertext Markup Language的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。
2021/2/12
实用文档
13
HTML语言概述
HTML 语言是由世界性的标准化组织 W3C （
World Wide Web Consortium）制定的，通过浏
览可以了解到 HTML 标准的最
新动态。
目录
上一页
下面介绍HTML文件的基本构成和HTML文件的
2021/2/12
实用文档
16
HTML语言概述
将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。
目录上一页下一页结束
图9-1
2021/2/12
实用文档
17
从上例可以看出，一般 HTML 文件都是以 <html>开头，以</html>结束。其文件结构由以下两部分组成：
2021/2/12
实用文档
19
9.1.2 HTML语言的基本语法
目录上一页下一页结束
1. 文本布局
1）段落标记<p> <p>…</p> 标记指定文档中一个独立的段落。通过设置
align属性，控制段落的对齐方式，其值可以是left、 center、right、justify，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下：
实用文档
18
目录上一页下一页结束返回
文件结构
2）正文主体（Body）
正文主体是 HTML 文件的核心内容，由 <body> 和 </body>标记定义。<body>标记具有一些常用的属性，格式如下：
<body bgcolor=#n color=#n>…</body>
目录
Frontpage
上一页
下一页 Word等工具
结束
实用文档
动态网页开发工具
动态表现网页
Gif动画
Flash动画
Javascript和vbscript语言
目录
上一页动态内容网页的开发工具：
下一页 ASP
结束
JSP
PHP
实用文档
确定主题
目录上一页下一页结束
实用文档
网站结构
目录上一页下一页结束
1）头部（Head）
HTML文件的头部由<head>和</head>标记定
义。通常情况下，文件的标题、语言字符集信
目录
息等都放在头部信息中。最常用到的标记是
上一页 <title>…</title>，它用于定义网页文件的标
下一页
题，当该网页文件被打开后，网页文件的标题
将出现在浏览器的标题栏中。
结束
1/2/12
网页时的层次结构。【例9-1】用HTML语言编写一个简单的网页。 <html> <head> <title>我的第一个Web页</title> </head> <body> <h1>欢迎进入HTML世界！</h1> <p>这里我们首先介绍HTML语言的基本知识和语法。 </p> <p>然后，讲授如何使用HTML语言编写您的Web页面。</p> </body> </html>