第二部分 网页课件制作
第2章 HTML入门(网页制作案例教程课件)
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
2.1网页的制作ppt课件
2021/5/29
13
网络技术应用
网络技术应用〔选修3）
课后思考：
我们这节课我们学习了制作 网页的一些技巧，大家课后要继 续熟悉它。
下节课我们继续学习如何制作 网页。
2021/5/29
2
网络技术应用
知识回顾
开发网站的基本过程
2021/5/29
3
网络技术应用
知识讲授
❖ 在网页中插入基本元素 ❖ 1.向网页中添加文字 ❖ “格式〞菜单|字体” ❖ 在输入文字时，一般情况下让系统自动换行，
若强制换行，可按回车键〔会空出一行〕或按 Shift + Enter〔没有空行的强制换行）。
❖ ②选中字，单击右键，选择【超链接】命令， 在“编辑超链接〞对话框中单击【书签】按钮， 呈现 “在文档中选择位置〞对话框，选择已定 义好的书签后，单击【确定】按钮即可。
2021/5/29
8
网络技术应用
知识讲授
❖ 3.插入超链接 ❖ 说明：其实可以将超链接链指向任意文件，
如图片或音乐文件，方法和上面类似；另外， 也可以给图片添加超链接，只需先选中图片， 然后添加超链接即可。
❖ 注意：在保存网页时，如果图片来自于网
站根目录之外，则会出现 “保存嵌入式文
件〞对话框，在对话框中单击【更改文件
夹】按钮可以选择图片要保存到的位置，
直接单击【确定】按钮即可将其保存到网
站根目录下。一般保存到images文件夹
下。
2021/5/29
5
网络技术应用
知识讲授
❖ 3.插入超链接
❖ 1)链接到另一个网页
2021/5/29
10
网络技术应用
保存及预览
❖主页文件通常命名为“index.htm”。
第二讲 网页制作PPT课件
12
二、Dream weaver MX 基本操作 Dream weaver MX简介
Dream weaver是Macromedia公司的出品的一款 “所见即所得”的网页编辑工具。与FrontPage不 同，Dream weaver采用的是Mac机浮动面版的设计 风格，对于初学者来说可能会感到不适应。一旦 习惯了其操作方式后，就会发现Dream weaver的 直观性与高效性是FrontPage所无法比拟的。
作时，可以直接单击工具栏上的“保存”按钮，或从“文件” 菜单中选择“保存”，还可以直接按〈Ctrl〉+〈S〉键。在弹 出的“另存为”对话框的“文件名”中键入要保存网页的名称， 在“保存位置”选择保存的位置，然后单击“保存”按钮。如 图9-3所示。然后单击“保存”按钮。 2) 对保存网页进行更名、更改保存路径操作时，在“文件”菜 单中选择“保存”，在弹出的“另存为”对话框的“文件名” 中键入要更改的网页名称，在“保存位置”选择要更改的保存 3位) 一置次，保然存后多单个击网“页保时存，”在按“钮文。件” 菜单中选择“全部保存”，在弹出的 多个“另存为”对话框的“文件名” 中，依次键入要保存网页的名称，在 “保存位置”选择相应的保存位置， 然后单击“保存”按钮。
9
5、设置网页属性
设置网页属性，方法如下： 1) 选择要设置网页属性的网页（从“窗口”菜单中选择网页， 或者在“导航”视图中双击需要的网页），出现网页编辑工作 区。 2) 在“文件”菜单中指向“属性”（或者右键单击网页编辑 区，从快捷菜单中选“网页属性”），打开“页面属性”对话 框的“常规”选项卡，如图9-14所示。 3) 在“标题”栏中填入标题，如“ASP基础”。在IE浏览器 的标题中可以看到效果。在设计阶段控件脚本项的“平台”栏 中选择“服务器（ASP）”、在“服务器”栏选择“VBScript” 脚本语言、在“客户端”选择“JavaScritp”脚本语言。 4) 单击“背景”选项卡，选择“背景”、“文本”、“超链 接”等属性，如图9-15所示。 5) 单击“边距”选项卡，选中“指定上边距”和“指定左边 距”，值为0，如图9-16所示。
网页制作ppt教学课件
JavaScript提供了许多内置函数，如Math.max()、Math.min()、Date()等，用于执行各种常见的数学和日期计算操作。
网页制作实例
01
02
03
04
文本
图像
视频
音频
包括动画、电影、直播等视频元素。
包括图片、图标、背景等图像元素。
包括标题、段落、列表等文本元素。
包括音乐、声音、音效等音频元素。
01
02
03
04
05
建站工具介绍
官方介绍：Dreamweaver是一款网页制作软件，它使用了视觉方式创建和管理网页，是创建动态网页的工具之一。
可以选择使用现有的AJAX框架，如jQuery、Axios等，以简化开发流程。
使用AJAX框架实现异步请求，包括发送请求、处理响应、更新页面内容等。
通过优化请求频率、减少服务器响应时间等方式，提高网页的性能和响应速度。
THANK YOU
感谢聆听
CSS的主要作用是描述网页文档的外观和格式，如颜色、高度、宽度、边距等。它能够使网页更加美观、易于阅读和维护。
CSS是一种相对较新的技术，它于1990年代末期由Håkon Wium Lie和Bert Bos共同发明，并由W3C（万维网联盟）进行标准化。
选择器
属性
值
声明块
CSS选择器用于选择要应用样式的HTML元素。例如，元素选择器会选择所有给定的HTML元素。
完成前后端连接后，进行测试和调试，确保动态网页的功能和稳定性。
动态网页通常使用后端技术实现，如PHP、Java、Python等，根据需求选择合适的技术。
网页制作(超详细ppt版)
Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容:
1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始
要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。
要能在web上四处不遨受游地域，的首访限问先制者，必和网须网站站安上有装的信一息个可 w上e台导b的不浏航限受览制最操器，作简如系。单台统有的客平一了户台方只通机服自法要就构务己互可就成器联以的分，是网布多w交信结保e互息布持b合的、多可浏连过反媒浏以览以新程馈体在览随器，信信w时器w提息息后w随上交，的，地发如各进在行种w更性eb 能w在ind各ows页、上lin移n式ux动等。你可以通图过像和选声择音指、视定频的高亮 度系显统示平台的文字、词或图像从等一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。
网页制作教程第02课PPT课件
点击此处输入 相关文本内容
标题添加
点击此处输入相 关文本内容
电脑基础·实例·上机系列丛
点击此处输入 相关文本内容
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
学习目标
➢Dreamweaver 8是一款功能强大的网页编辑软 件，它以其直观的图形界面大大简化了网页 的设计和编辑。在具体学习使用 Dreamweaver之前，首先应该掌握对网页文 档操作的一些基础知识，如网页文档的创建、 打开、预览和保存以及页面属性的基本设置 等。另外，读者对于Dreamweaver 8的工作界 面也应该有所了解，而站点的定义和本地站 点的创建则需要熟练掌握，为以后的学习打 下一个良好的基础。
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Dreamweaver 8的工作界面
➢ Dreamweaver 8的工作界面是由标题栏、菜单栏、插入 面板、工具栏、文档窗口、状态栏、“属性”面板和 面板组等组成。 ➢ 标题栏 ➢ 菜单栏 ➢ 插入面板 ➢ 工具栏 ➢ 文档窗口 ➢ 状态栏 ➢ “属性”面板 ➢ 面板组
电脑基础·实例·上机系列丛
清华大学出版社
中文版Dreamweaver +Flash+Photoshop网页制作三合一教程
Flash动画
➢Flash动画是近几年在网页中比较流行的 动画格式，由于Flash是矢量动画，一般 体积比较小，适合在互联网中传输，因 此在网页中的应用也屡见不鲜。在网页 中通过使用Flash动画可以使页面更具动 感和趣味性，从而带动浏览者浏览页面 的兴趣。
网页制作教程课件PPT
❖ 6、动态字幕：在网页上选定一个位置，单击 “插入/WEB组件/组件类别/选择一种效果/字 幕” ，单击“完成”，在文本框中输入文字。 也可以添加背景图片。
❖ 7、交互按钮：单击“插入/交互式按钮”，可 以自制特色按钮。
❖ <td><a href =yinyue.htm><img border="0" src="dog15.gif" ></a></td>
❖ <td><img border="0" src="pirate.gif" width="84" height="115"></td>
❖ <td>第5个单元格</td>
❖ 8、多媒体：单击“插入/图片/flash影片 （swf类型文件）或视频（rm、mp3）”，然 后链接到相应文件即可。
四、图片热点链接
❖ 1、单击“视图”/“工具栏”/“图片”，弹出图片修 饰工具栏；
❖ 2、选中页面上要进行热点链接的图片； ❖ 3、单击图片工具栏上的“多边形热点”，用鼠标
画出要进行热点链接的区域，并使其封闭
❖ <td><img border="0" src="man4.gif" width="77" height="78"></td>
❖ <td>第7个单元格</td>
❖ <td>第8个单元格</td>
网页设计和制作 课件-PPT课件
16
从事网页设计相关的程序语言
HTML ： HTML 是 “ HyperText Markup Language” 的缩写，中文翻译为“超文本标 记语言”。 XML ： XML 是 “ Extensible Markup Language” 的缩写，中文翻译为“可扩展标
记语言”。
17
浏览器端的 Script( 描述语句 ) ： Script 是一
Web Consortium( 简称W3C、W3 协会) ，负责管理
Web相关事务及协议(/)。
3
何谓主从式结构？ Web 属于主从式结构吗？
Web 采用的是一种主从式结构(ClientServer Module)。
4
1.运行浏 览器阅读 Web文件
Web 文件
网络连接
3.服务器将 HTML文件传给 浏览器，译成 Web 文件 图1-2
网页设计与制作
1
第一部分 网页制作初识
通过本部分的学习，应该掌握以下内容：
认识网页 构成网页的基本要素 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤 网页执行原理 网页运行的软件支撑环境
2
World Wide Web 的诞生
World Wide Web 又称WWW、W3、Web，中文 名称叫做“全球信息网”。 CENT 和 MIT 于 1994 年 7 月成立 World Wide
21
3．字型 在网页适当的位置采用不同的字体字型，也能使 网页产生吸引人的效果。应该注意的是在报刊上变换 字体字型非常普遍，它可以在不同的地方使用不同的 字型。但在网页制作上却要慎重。因为有些美丽的字 型在制作网页的计算机上有，但将来别人浏览你的网 页时，浏览者的计算机上未必装有这种字体。这样浏 览者就无法得到你预想的浏览效果，甚至适得相反。 如果只是标题或少量的文字，可以将采用的特殊字体 制作成图形方式，就可避免其他浏览者看不到的尴尬 局面了。当文本内容较多时，可以利用表格形式来实 现。
《新编网页制作三剑客培训教程》课件第2章
2.1 表格及操作表格的方式 2.2 利用表格的标准模式规划网页 2.3 利用表格的布局模式规划网页 2.4 上 机 实 训
第2章 使用表格规划网页
随着网络带宽的不断加大，人们已经不满足于由大量文字和少量图片内容构成的网页，而是更加热衷于多媒体网页，如：各种音乐网站、电影网站，以及实时的音、视频信息网站等。
2.4 上 机 实 训
1. 实训目的
创建一个名为“2-4.html”的网页。要求：实现最基本的网页布局效果，如图2-38所示。通过该实训练习，进一步熟练掌握表格标准模式的具体操作过程。本实训最终效果文件见“站点实例”(WebDemo\ch2\2-4.html)。
2.2.2 选择表格和单元格
2. 选择单个或多个行或列 将光标移动到表格的左边框或上边框，当光标变为“选择箭头”图标时，如图2-7所示，单击可以选择单个行或列，拖动鼠标可以选择多个行或列。
图2-7 “选择箭头”图标
2.2.2 选择表格和单元格
3. 选择单个单元格 选择单个单元格，可以执行下列操作之一。 将光标定位在目标单元格，然后在【文档】窗口左下角的【标签选择器】中选择【<td>】标签。 按<Ctrl>键，单击该单元格。 4. 选择多个单元格 选择多个单元格，可以执行下列操作之一。 从一个单元格拖拽(按左键不松开)到其他单元格。 将光标定位在目标单元格，然后按<Ctrl>键单击该单元格，接着按<Shift>键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 将光标定位在任意单元格，然后在菜单栏中选择【编辑】→【全选】命令(或按<Ctrl>+<A>组合键)，即可选中所有单元格。
Dreamweaver网页制作课件 第二单元
目录
上一页
下一页
退出
任务一 添加首页文本 举一反三：
1．使用IE浏览器浏览各种类型的页面，分析各个页面中文 本所起作用，并分析是否可以用其他网页元素代替。 ⑴ 启发思路： 在互连网上有各种类型的网站，如搜索引擎类网站，商业 类网站，个人网站等。网页设计中各种类型的页面都可以从这 些网站中借鉴。
⑵ 分组完成任务。 2．新建一个网页“practice2-1.html”，将本单元素材“举 一反三”文件夹中“practice2-1.txt” 的文本内容拷贝到页面中， 使用插入空格的方法修改文本，使每一行文本中的“vs”字样达 到对齐的效果。
目录
上一页
下一页
退出
第二单元 添加首页内容
任务一 添加首页文本 任务二 使用CSS规则美化文本 任务三 添加图像 任务四 创建与应用CSS美化网页
目录
上一页
下一页
退出
第二单元 添加首页内容
任务一 添加首页文本
任务描述：完成首页文本内容的输入与编辑。 任务分析：在第一单元中建立了首页空白文件“index.htm -l”，接下来就要为首页添加内容。 文本是网页制作中最常用的内容，有着其他网页元素无法 替代的功能。在网页上输入、编辑、格式化文本是网页制作者 的重要工作之一。
目录
上一页
下一页
退出
任务二 编辑文本样式
3 ．修改文本样式：
CSS是什么?
选中“青春寄语”标题，在CSS模式下“属性”面板中可 以看到其目标规则为“title2”，此时如果将颜色属性修改为 #900，则所有应用了该样式的标题将都发生改变 。还可以通 过通过CSS样式面板修改样式。
选中文字“青春寄语”（其样式 为“title2”），在属性面板中修改其颜 色值为“#900”
电子课件-《Dreamweaver 网页设计与制作(第二版)》-A06- 项目二 创建度假村网站——Dreamweaver CS3 入门
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。
第2章 网页设计与制作PPT课件
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Frontpage2003网页制作讲义Frontpage02003工作界面认识如下图介绍，菜单栏：这里集中了编辑网页时所能用到的所有功能命令，并且提供工具和格式的自定义。
当我们想用某些工具或者格式时可以到这里来寻找。
格式栏：提供文字和图片的格式变化。
格式栏中的格式在这里不能一一讲解，在具体制作的过程中我们会将经常使用的一些格式进行讲解，其他格式在具体使用时可以在网上查看使用帮助。
工具栏：提供编辑网页或者查看文件的一些工具。
用FrontPage建设自己的网站：应用向导和模板模板建站FrontPage可以适合不同个人和组织的需要，自动建立网“窝”——站点。
操作打开站点建立窗口:点击“文件/新建/站点”，在打开的窗口中可以看到自动建立站点的各种向导和模板。
如下图，向导特点:选择向导程序列出的条件元素，创建某类有个性的站点和网页模板特点:直接采用已经设计好的条件元素，创建某类统一的站点和网页在FrontPage中，使用向导创建的一般是比较复杂的商业和大型站点，不适合个人在网上安家筑巢。
我的网上小家就使用模板建立站点就够了。
操作选择模板:在新建站点窗口，选择“个人站点”模板。
在右面的选项栏中设置站点文件的存放地址。
建议新建一个有意义的存放地址，如“C:\My House”，点击“确定”。
操作查看站点结构:点击程序界面的“视图”窗口中的“导航”按钮，可以看到建立的站点由哪些文件组成以及站点的结构。
我们看到，个人站点模板的结构是主页下面有三个子页，分别是“兴趣”、“相册”、“喜好站点”，而在文件夹列表栏中列出了站点中的文件，其中“image”文件夹专门存放图片，另外还有五个HTML文件，其中的myfav3.HTML是备用的子网页文件。
其他四个HTML 文件分别对应主页和三个子网页。
操作查看站点中的网页:在导航视图窗口的网站结构示意图中点击某个网页结构图标，如“主页”结构图标，可以打开该网页，我们就可以在窗口中看到这个预先定制的网页大概结构。
点击文件夹列表中的文件也可打开。
注意，打开网页后，我们可以看到导航视图窗口切换到了网页视图窗口。
操作保存和打开站点:保存站点的工作很简单，当关闭FrontPage的时候，按照提示就可以保存站点。
实际上，保存站点主要就是保存网页，因此在修改编辑网页的时候，要时刻注意到保存。
保存的方法和在文字编辑程序中保存文件类似。
打开站点要复杂些，选择菜单“文件/打开站点”，找到站点所在的目录，找到站点文件夹(是一个带有小圆球的文件夹图标，是FrontPage建立的站点管理文件夹)。
操作删除站点:删除站点很简单，直接在Windows中删除站点所在的文件夹即可。
也可在程序中删除。
进一步学习的建议:熟练使用各种视图和窗口，使用向导创建复杂的商业和项目站点。
使用导入向导，将别人已经建立的站点导入，成为自己可以利用的站点。
模板建网页目前，我的网“窝”还只有一个主页，三个子页，我想再添加一个“我的游历”的子页。
使用模板创建站点，站点中有几个网页都是事先设计好的，大多数情况下，都需要添加网页，或者用新设计的网页替换掉事先设计的网页。
建立新的网页，使用向导和模板是最方便不过的了，因为FrontPage提供的网页模板非常丰富，可以满足大多数情况的需要。
操作打开网页模板窗口:在视图窗口中点击“网页”按钮，切换到网页视图。
选择菜单“文件/新建/网页”，打开新建网页的模板选择窗口。
注意，不同的视图窗口，使用“文件/新建/网页”菜单命令的结果不同，后面我们将会提到。
在网页模板选择窗口中，有三个标签页，在“常规”标签页中有三十多个模板供选择，一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。
根据我新建网页的内容和预想的设计，我选择了“带有标题的宽行正文”模板。
操作选择模板:点击“带有标题的宽行正文”模板项，然后点击“确定”，程序即开始按模板新建网页。
回到主窗口，就可以看到一个有大概结构的网页，这个网页以很清晰的方式提示我在哪里放标题，哪里放正文，网页段落结构也排得很好，我只要按照提示添加内容就可以了。
新建立的网页还没有保存在硬盘中，由于这个网页是要添加到刚才新建立的网站中去的，因此，我们将它保存到网站文件所在的目录(C:\My House)中。
操作保存新建的网页文件:选择“文件/保存文件”，在弹出的保存文件窗口中选择“C:\My House”目录，并命名文件名为“Mytravel.htm”。
点击“确定”。
操作预览网页:建立了网页后，就可以通过浏览器来观看该网页了。
在FrontPage中可以直接调用系统集成的IE浏览器来查看。
方法是在网页视图窗口打开某网页，然后选择“文件/预览网页”即可。
我们在编辑修改的时候，大都是通过FrontPage内置的预览功能来查看网页的制作效果，方法是在网页视图的主窗口下面选择“预览”标签项即可。
操作查看文件列表:点击“视图”窗口中的“文件”标签按钮，在主窗口中列出了站点文件夹和所选文件夹中的文件。
在文件窗口中，我们看到刚才保存的新网页文件已经位于其中，并可以看到该文件的一些属性。
双击这些文件时可以在网页视图窗口中打开编辑。
网页标题就是网页在浏览的时候，显示在浏览器窗口左上角的标题文字。
这个标题可以让访问者了解该页的内容。
操作修改网页主标题:打开“文件”视图窗口，在文件列表窗口找到Mytravel.htm 文件，点击“这是主标题”文字，然后输入“我的游历”。
另外，可以将“主页”文件的标题改为“豆豆之家”。
注意，主页的标题也就是站点的标题。
进一步学习的建议:了解各种网页模板的结构和适用方向。
学习使用向导创建有复杂表单的网页。
学习创建带框架和样式表的网页。
修改站点和网页基础的站点和网页建立好后，我就需要在这个基础上按照我的梦想修改了。
首先，我要在第二级网页中增加一个“我的游历”网页，其次，要在“我的兴趣”二级网页下增加三个三级网页。
操作将已有网页添加到站点:在视图窗口点击“导航”按钮，切换到导航视图（如下图）。
在文件夹窗口中将Mytravel.htm文件拖动到“导航”窗口，仔细选择停放的位置，让示意图标和其他二级图标在一个线上，然后就看到Mytravel.htm文件成为站点的一部分了。
注意，在站点中添加了网页后，站点中的某些网页将自动发生改变，当Mytravel.htm 文件(“我的游历”网页)成为index.htm(主页)的下级网页后，我们在网页视图窗口查看主页页面的时候，会发现该页面已经将“我的游历”这样的字样添加进去了。
操作添加新网页到站点:切换到导航视图，选择“兴趣”网页示意图标，然后选择“文件/新建/网页”(或者工具栏中的“新建”按钮)，在“兴趣”网页图标下就看到一个新的网页图标，这个网页是属于“兴趣”网页下的子网页，但是一个虚拟的网页，并没有对应的文件。
双击新网页的示意图标，即可在站点文件夹中生成一个简单的模板网页。
重复以上操作三次，就可在站点中添加三个网页。
操作在站点中打开和关闭网页:打开站点的网页非常简单，在导航视图窗口或者文件视图窗口双击要打开的网页即可。
打开网页时程序将自动切换到网页视图窗口。
不过注意关闭站点中暂时不编辑的网页，以使系统节约资源。
操作修改网页的文件名:新建的网页我们可以改成自己需要的文件名和主标题。
这个工作既可以在“文件”视图窗口中进行，也可以在“导航”视图窗口中进行。
操作站点的调整和删除:站点的调整很简单，直接在导航视图窗口中拖动要调整的网页就可以了，删除站点的网页也很简单，选择网页文件或者网页示意图标后按“Del”键即可。
修改后的站点结构如图10所示。
我“家”的雏形已经基本建立起来了。
进一步学习的建议:设置网页的高级属性，自定义网页模板，进一步修改站点结构，建立复杂的网站，站点和文件夹的管理和相互转换。
创建一个简单的网页一、利用网页模板创建网页1.设计网页框架在“文件”菜单上，单击“新建”。
屏幕的右边会出现一个任务窗口。
在“新建”任务窗格（任务窗格：Office 应用程序中提供常用命令的窗口。
它的位置适宜，尺寸又小，您可以一边使用这些命令，同时继续处理文件。
）中的“新建网页”之下，单击“其他网页模板”。
如右图，单击“框架网页”选项卡。
选择一个模板，预览其布局，再单击“确定”。
如下图，设置要显示在每个框架中的初始网页（初始网页：当网站访问者浏览到包含框架的框架网页时，最初显示在该框架中的网页。
在FrontPage 中，您可以在“网页”视图为框架分配初始网页。
）。
操作方法如下：单击要设置初始网页的框架。
执行下列操作之一：选择一个已创建的网页，在框架中，单击“设置初始网页”，然后选择要显示的网页（该网页必须是提前已经做好的）。
创建新网页，并将其设置为该框架中显示的初始网页。
在框架中，单击“新建网页”。
Microsoft FrontPage 会在该框架中创建一个新网页，该新网页会自动设置为初始网页。
提示：使用框架网页和框架来组织网站时，不应使用共享边框（共享边框：预留的网页区域，用于存放希望在所有网页上显示的一致内容。
共享边框通常包含链接栏，内含指向当前网站的其他网页的超链接。
）或链接栏（链接栏：图形或文本按钮的集合，这些按钮表示指向网站内部或外部网站中的网页的超链接。
）。
因为将共享边框或链接栏与框架一起使用会导致网站出现导航混乱。
2.设计网页内容第一步，设计布局表格。
在设计布局表格之前，我们必须规划好自己所要制作的网页。
也就是说要在自己的心里有一张成型的网页。
最好能用铅笔简单的画一张网页的草图，根据这张草图来设计自己网页的布局。
然后参考《表格的使用》一节内容来绘制自己的布局表格。
第二步，丰富网页内容。
在制作网页之前我们必须要做大量的素材搜集工作。
由于我们要做的是跟教学有关的网页课件，那么很多素材我们都可以从Internet上面来搜索下载。
但我们应该更多地从生活中、教学中来积累素材。
这些素材主要是指一些图片、知识片段、动画、视频、声音等。
有了这些素材的积累，我们在做网页的时候就会有所创新与突破，就有可能将我们的课件做得与众不同。
丰富网页内容就是将我们积累的素材加工整理之后添加到网页上去制成课件。
3.简单网页范例第一步，打开frontpage2003，点击“文件”菜单中的“新建”命令得到新建任务窗口。
第二步，点击“其他网页模板”，在得到的网页模板窗口中选则“框架网页”选项卡。
并在下面模板中选择一种自己需要的模板。
我们这里以“标题”模板为例。
点击“确定”，完成网页模板制定。
如下图，第三步，在得到的框架中点击“新建网页”，依次制作框架中的子网页。
（框架中每一部分都是一个独立的网页，这种网页称为子网页。
如下图）子网页一般不需要再进行复杂的布局，只需要设置所需要的背景以及文字等网页素材就可以了。
第四步，设置子网页背景。