如何制作网页.ppt
合集下载
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
网页制作基础 ppt课件
和声明两个部分组成，选择 器是表示格式元素的术语， 声明用于定义元素样式，如 右侧所示的.a1是选择器， 介于{}之间的内容就是声明。
ppt课件
声明
21
（2）CSS定义
例5：建立如前页图所示的CSS规则.a1，并应用 到wy1.html的第二段文本上。
步骤：
单击文本“属性”面板上的按钮 ，“目标规则”中
主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该 唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、 演唱会视频等等。
ppt课件
9
4.2 网站的创建和管理 4.2 .1 Dreamweaver的界面
ppt课件
10
4.2.2 站点的新建与管理
在Dreamweaver CS4中，“站点” 是一个文件夹，用于存放网站的所有 图像、多媒体等文件，便于用户对站 点进行发布、维护和管理。
从文件的角度来说，一个网页就是一个HTML文件。
42万字符的HTML文本需 要我们自己编写吗？？？
Dreamweaver CS4、
FrontPage、 Adobe Pagemile、
Claris Home Page 等网页制作工具
ppt课件
设计、创建、制作与发布网页 6
2. 网页设计的流程 构成网页的基本元素大体相同，主要包括标题、网 站Logo、导航、超链接、广告栏、文本、图片、动 画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页
例1：建立一个本地站点“站点1”，站点文件夹 为C盘的“计算机应用”。
步骤： （1）打开“站点定义”对话框 （2）定义站点
ppt课件
12
3. 站点的管理
站点建立后，Dreamweaver可 以对站点及站点中的文件进行管理， 可以对所建立的站点进行移动、复制、 删除、导入、导出等操作。
ppt课件
声明
21
（2）CSS定义
例5：建立如前页图所示的CSS规则.a1，并应用 到wy1.html的第二段文本上。
步骤：
单击文本“属性”面板上的按钮 ，“目标规则”中
主页：歌手的介绍及发行唱片 为每一张唱片建立一张网页，对应网页上为该 唱片的各曲目介绍，如歌词，词曲作者，歌曲试听、 演唱会视频等等。
ppt课件
9
4.2 网站的创建和管理 4.2 .1 Dreamweaver的界面
ppt课件
10
4.2.2 站点的新建与管理
在Dreamweaver CS4中，“站点” 是一个文件夹，用于存放网站的所有 图像、多媒体等文件，便于用户对站 点进行发布、维护和管理。
从文件的角度来说，一个网页就是一个HTML文件。
42万字符的HTML文本需 要我们自己编写吗？？？
Dreamweaver CS4、
FrontPage、 Adobe Pagemile、
Claris Home Page 等网页制作工具
ppt课件
设计、创建、制作与发布网页 6
2. 网页设计的流程 构成网页的基本元素大体相同，主要包括标题、网 站Logo、导航、超链接、广告栏、文本、图片、动 画、视频与音频等。 按网页的表现形式可将网页分为： 静态网页 动态网页
例1：建立一个本地站点“站点1”，站点文件夹 为C盘的“计算机应用”。
步骤： （1）打开“站点定义”对话框 （2）定义站点
ppt课件
12
3. 站点的管理
站点建立后，Dreamweaver可 以对站点及站点中的文件进行管理， 可以对所建立的站点进行移动、复制、 删除、导入、导出等操作。
静态网页的制作PPT课件
.
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
《制作框架网页》PPT课件
8.4 设置框架和框架集属性
框架属性确定了框架集内各个框架的 名称、源文件、边框的框架能否调整大小 等。框架集属性确定框架的大小和框架之 间的边框宽度和颜色等。在框架结构文档 中，框架和框架集都有各自的属性设置面 板，它们的属性应该分别进行设置。
8.4.1 框架的属性
1．启动框架属性面板
图8-10 “框架”控制面板和框架属性面板
创建框架的目的是在框架中建立新的 网页或打开已有的网页文档。
8.3.4 保存框架和框架集
框架集文件和与之相关的框架文件必 须先保存，才能在浏览器中预览整个框架 网页内容。可以分别保存框架集页面或框 架页面，也可以同时保存所有打开的框架 文件和框架集页面。
1．保存框架
图8-9 “保存为”对话 框
2．保存框架集
利用框架结构，可以把导航条内容固 定在页面的顶部、左边或右边。在浏览网 页时，用户可以直接选择导航条上相应的 内容，切换到所对应的页面，这都需要事 先对各个框架建立超链接。
要想在框架内使用链接，必须为链接 设置一个目标，该目标是指框架内链接要 打开的网页内容。根据链接目标的不同， 框架中的链接主要有两种：框架内的链接 和关键字的链接。
2．设置框架的属性
8.4.2 框架集的属性
1．启动框架集属性面板
图8-11 “框架”控制面板和框架集属性面板
2．设置框架集的属性
8.4.3 设置或更改框架的属性
1．设置框架的大小 2．设置框架和框架集的边框 3．设置框架或框架集的边框颜色 4．改变框架的背景色
8.5 链 接 框 架 的 内 容
8.3 编 辑 框 架
8.3.1 选定框架和框架集
在对框架进行编辑操作之前必须先选 择所需的框架，可以直接在网页文档视窗 中选择框架，当然利用“框架”控制面板 对框架进行操作比较方便。
网页制作ppt课件第4章超链接
超链接的重要性
总结词
超链接在网页制作中起着至关重要的作用，它能够提高用户体验、增强网站导航、增加网站流量和提升搜索引擎 排名。
详细描述
超链接是网页中不可或缺的一部分，它能够提高用户体验，使用户能够方便地浏览和获取信息。通过设置合理的 超链接，可以增强网站的导航结构，使用户更容易找到所需内容。同时，超链接还可以增加网站的外部链接数量， 提高网站的权重和流量，从而提升搜索引擎排名。
问。
图片链接
总结词
图片链接是指将一张图片设置为超链接 ，当用户点击这张图片时，会跳转到指 定的片链接，首先需要插入一 张图片，然后选中这张图片，选择“插入 ”菜单中的“超链接”选项。在弹出的对 话框中，输入要链接到的网址或文件路径 ，并设置好显示的文字和颜色等属性。点 击确定后，选中的图片就会变成超链接， 用户可以直接点击访问。
确保超链接指向的内容合法、合规， 不涉及任何违法、侵权或不良信息。
避免在超链接中传递任何误导、虚假 或欺诈信息，以免引起法律纠纷和不 良后果。
在使用外部链接时，尊重原网站的版 权和隐私政策，避免侵犯他人的权益。
06
案例分析
优秀超链接案例一
01
案例名称
旅游网站导航栏
02 03
描述
该网站通过超链接将各个旅游景点的页面相互连接，使用户可以轻松跳 转到感兴趣的景点页面，同时每个景点页面都提供了返回主页的超链接， 方便用户浏览。
使用链接管理工具或插件来检 测和清除死链，提高网站的用 户体验和搜索引擎优化效果。
优化用户体验
确保超链接的文本清晰、简洁， 易于理解，避免使用过于复杂或
难以理解的链接描述。
合理规划超链接的位置和布局， 使其符合用户的浏览习惯和阅读
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
网页制作PPT教学课件
7
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
任务三:在首页插入四幅图像,每一幅图像 代表一个模块,图象大小设置成”249*48”, 后面用文字说明模块的概意
2020/12/09
5
使用背景图像的一些方法：
①使用小图，图片容量小，方便传输，页 面美观
②色彩淡点，有利于后面的页面制作。
2020/12/09
6
PPT精品课件
谢谢观看
Thank You For Watching
(做完的同学可以在在导航条上加入背景图像)
2020/12/09
3
表格属性的设置
合并单元格 表格（选中整个表格）、文字的对齐方式
（选中单元格） 背景色设置
任务二:仿照”心系奥运”首页进行布局
2020/12/09
4
④添加图像
添加图像: 方法一:“插入”/“图像”命令 方法二: 点击插入栏中表格的按钮
6.1（二） 网页制作
Dreamweaver 8
2020/12/09
1
第二节 学习目标
1、插入表格，利用表格布局页面 2、插入背景图像，插入图象
2020/12/09
2
③插入表格
插入表格有两种形式: ①利用表格布局网页(边框粗细设置为0) ②普通表格(根据设计要求设置边框粗细)
任务一:在”心系奥运”首页分别利用表格布局 和普通表格两种方法设计导般条.
网页设计与网站建设PPT课件
2. 两边做成渐变式柱状或花边式。 3. 在CSS面板中新建CSS样式，选中重定
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。
网页设计与制作PPT图文教程
如何申请电子邮箱 电子邮箱的使用 举例: 登陆 注册信息后，设置帐号、密码
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
使用FrontPage 2003制作网页.ppt
二、FrontPage 2003的工作窗口 选择 “开始”→“所有程序”→“Microsoft office”→“Microsoft office FrontPage 2003”命令，即可打开 FrontPage 2003的工作窗口，如图8.1.1所示。该窗口与 Office 2003的其他组件的工作窗口基本相同，用户可以在 工作区中制作和编辑网页。
（3）自定义站点。如果用户已对该软件非常熟悉，也 可以自定义创建站点，具体操作如下：
1）选择“文件”→“新建”命令，弹出“新建”任务 窗格。
2）在该任务窗格中的“新建网站”选项区中选择“由 一个网页组成的网站”选项，弹出“网站模板”对话框。
3）在该对话框中选择“空白网站”选项，并在右侧的 网站位置下拉列表框中输入网站的位置后，单击“确定” 按钮，即可创建一个只包含两个空白文件夹private和 image的站点，用户可自行创建主页及其他网页文件。
（5）超链接视图。该视图将网站中所有的内部和外 部超链接的状态显示在一个列表中，并用图标表示超链接 已通过验证或已中断。选择“视图”→“超链接”命令， 即可切换到该视图。
（6）任务视图。该视图以列表的形式显示网站中的 所有已完成或尚未完成的任务，并在各个列标题下提供有 关各项任务的当前信息。选择“视图”→“任务”命令， 即可切换到该视图。
图8.1.1 FrontPage 2003的工作窗口
三、FrontPage 2003的基本视图 FrontPage 2003为用户在创建站点和编辑网页时提供 了多种视图，其中网站的视图模式有网页设计视图、文件 夹视图、报表视图、导航视图、超链接视图、任务视图和 远程网站视图；网页的视图模式有设计视图、代码视图、 拆分视图和预览视图。
二、打开站点 如果要对某个网站进行编辑修改，可先将其打开，然 后再进行其他编辑操作。用户可以使用以下两种方法打开 站点： （1）选择“文件”→“打开网站”命令，弹出“打开 网站”对话框。在该对话框中选择要打开的站点，单击“打 开”按钮 即可。 （2）单击常用工具栏中“打开”按钮 右侧的下拉 按钮 ，在其下拉菜单中选择“打开网站”命令，在弹出的 “打开网站”对话框中选择要打开的站点，单击“打开”按 钮即可。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
也可以使用网页模板来创建页面。在“新建网页或 站点”任务窗格上选择“网页模板”命令，打开 “网页模板”对话框，如图6-7所示。
图6-6 FrontPage任务窗格
图6-7 “网页模板”对话框
在“常规”选项卡中选择一个模板或向导，单击 “确定”按钮或双击模板或向导的图标。这时只是 在FrontPage中创建了指定格式的网页，而这个网 页并没有添加到任何站点中。
6.1.2 FrontPage 2002界面
启动Microsoft FrontPage 2002后，进入如图6-1所 示的FrontPage 2002窗口。FrontPage 2002的界面 主要有以下8个部分组成。 （1）标题栏。 （2）菜单栏。 （3）工具栏。 （4）编辑区。 （5）滚动条。 （6）视图栏。 （7）任务窗格。 （8）状态栏。
报表视图用于查看站点的详细信息和监控站点的状 态，以便及时发现问题和解决问题。
4． 显示出站点中各页面间的层次关系。
5．超链接视图
网页中通常都包含一些链接，这些链接可能指向不 同的地方。FrontPage的超链接视图模式以图形方 式显示网页中所有的超链接信息。利用它可以方便 地检查和管理超链接。
6．任务视图
任务视图用于显示网站所完成的工作。任务视图是 一个动态的任务管理器，使用它可以清楚地了解任 务的状态、任务分配的对象以及任务上次修改的时 间等信息。
6.3 新建站点与网页
6.3.1 新建站点
创建空白的站点步骤如下： （1）单击菜单栏上的“文件”|“新建”|“网页或 站点”命令，打开“新建网页或站点”任务窗格， 如图6-4所示； （2）单击“空白站点”命令，打开“Web 站点模 板”对话框，如图6-5所示；
（3）预览方式。在预览方式下可以看到当前网页 在浏览器中的显示效果。
图6-3 HTML方式网页视图
2．文件夹视图
文件夹视图有两个窗口，它们是文件夹列表窗口和 文件内容窗口。文件夹视图类似于Windows的资源 管理器。在文件夹视图中可以看到文件夹中各种类 型的文件，便于对站点内的文件进行管理。
3．报表视图
第6章 FrontPage 2002
6.1 FrontPage 2002基础 6.2 FrontPage 2002视图 6.3 新建站点与网页 6.4 编辑网页 6.5 格式设置 6.6 插入对象 6.7 建立超链接 6.8 使用主题 6.9 发布网页
FrontPage 2002作为专门的网页制作工具，具有更 加强大的网页编辑和管理能力。 本章主要内容包括： （1）FrontPage 2002基础； （2）FrontPage 2002视图； （3）新建站点与网页； （4）修改网页； （5）格式设置； （6）插入对象； （7）创建超链接； （8）使用主题； （9）发布网页。
图6-4 FrontPage任务窗格
图6-5 “Web站点模板”对话框
（3）在左边的站点列表框中选择“只有一个网页 的站点”，并在右边的“指定新站点的位置”栏中 输入存放站点的文件夹的名称以及路径后，按“确 定”按钮，这样在指定的路径下就创建了一个站点。
新建站点时，也可以在“新建”按钮的下拉菜单中 选择站点命令，直接打开“Web站点模板”对话框， 然后选择“Web站点模板”对话框中的向导和模板 来创建站点。
（11）网页选项卡。 （12）可选的超链接下划线。 （13）自定义链接栏。 （14）电子商务加载项。 （15）语言支持。 （16）语音和手写。 （17）权限。
6.2 FrontPage 2002视图
1．网页视图 网页视图主要用于网页的编辑和修改，例如输入文 字、插入图片、表格等。它共分3种方式：普通方 式、HTML方式和预览方式: （1）普通方式。FrontPage是所见即所得的网页制 作软件。用户不但可以直接在普通方式下直接编辑 文字、图片、表格等还可以直接在页面中插入Web 组件，并且编辑后的效果与最终页面显示的效果大 致一样，如图6-2所示。
图6-1 FrontPage 2002界面
6.1.3 FrontPage 2002功能
（1）图片库。 （2）增强绘图工具。 （3）自动更新站点内容。 （4）使用率分析报表。 （5）前10个列表。 （6）单个网页发布。 （7）文档库。 （8）更多的表格格式选项。 （9）随意粘贴。 （10）Office 剪贴板任务窗格。
如果使用模板，单击“确定”按钮或双击模板图标 后系统会自动创建一个含有默认页面的站点；如果 使用向导则会出现对话框，用户根据向导的提问选 择答案或回答问题，最后，根据用户对问题的回答 生成站点。
6.3.2 新建网页
使用者可以根据实际需要创建网页，然后将网页添 加到站点中。
单击菜单栏上的“文件”|“新建”|“网页或站点” 命令，在打开的“新建网页或站点”任务窗格中选 择“空白网页”命令，如图6-6所示。 这时就会在FrontPage编辑区内打开名为“new_ page_1.htm”的空白页面；或者直接单击工具栏上 的新建网页按钮，来创建空白页面。
图6-2 普通方式网页视图
（2）HTML方式。HTML（HyperText Markup Language）是网页设计中使用的最基本的标记语 言。在普通方式下编辑网页时，FrontPage会根据 网页内容自动生成相应的HTML标记文本，如图63所示。在图中被“< >”符号包围起来的就是 HTML标记。
6.1 FrontPage 2002基础
6.1.1 FrontPage 2002启动
有3种方法可以启动FrontPage 2002：第一种单击 开始按钮后，在出现的菜单上选择“所有程 序”|“Microsoft FrontPage”命令；第二种可以双 击桌面上FrontPage 2002的快捷方式图标；第三种 查找特定的网页，并双击该网页的图标。
当新网页编辑完成后，单击菜单栏上的“文 件”|“另存为”命令，打开“另存为”对话框， 将路径设置到指定站点的文件夹中，单击“更改标 题”按钮，输入要显示的标题。在文件名文本框中 输入网页的文件名，单击“确定”按钮就将新建的 网页添加到指定的站点中。
图6-6 FrontPage任务窗格
图6-7 “网页模板”对话框
在“常规”选项卡中选择一个模板或向导，单击 “确定”按钮或双击模板或向导的图标。这时只是 在FrontPage中创建了指定格式的网页，而这个网 页并没有添加到任何站点中。
6.1.2 FrontPage 2002界面
启动Microsoft FrontPage 2002后，进入如图6-1所 示的FrontPage 2002窗口。FrontPage 2002的界面 主要有以下8个部分组成。 （1）标题栏。 （2）菜单栏。 （3）工具栏。 （4）编辑区。 （5）滚动条。 （6）视图栏。 （7）任务窗格。 （8）状态栏。
报表视图用于查看站点的详细信息和监控站点的状 态，以便及时发现问题和解决问题。
4． 显示出站点中各页面间的层次关系。
5．超链接视图
网页中通常都包含一些链接，这些链接可能指向不 同的地方。FrontPage的超链接视图模式以图形方 式显示网页中所有的超链接信息。利用它可以方便 地检查和管理超链接。
6．任务视图
任务视图用于显示网站所完成的工作。任务视图是 一个动态的任务管理器，使用它可以清楚地了解任 务的状态、任务分配的对象以及任务上次修改的时 间等信息。
6.3 新建站点与网页
6.3.1 新建站点
创建空白的站点步骤如下： （1）单击菜单栏上的“文件”|“新建”|“网页或 站点”命令，打开“新建网页或站点”任务窗格， 如图6-4所示； （2）单击“空白站点”命令，打开“Web 站点模 板”对话框，如图6-5所示；
（3）预览方式。在预览方式下可以看到当前网页 在浏览器中的显示效果。
图6-3 HTML方式网页视图
2．文件夹视图
文件夹视图有两个窗口，它们是文件夹列表窗口和 文件内容窗口。文件夹视图类似于Windows的资源 管理器。在文件夹视图中可以看到文件夹中各种类 型的文件，便于对站点内的文件进行管理。
3．报表视图
第6章 FrontPage 2002
6.1 FrontPage 2002基础 6.2 FrontPage 2002视图 6.3 新建站点与网页 6.4 编辑网页 6.5 格式设置 6.6 插入对象 6.7 建立超链接 6.8 使用主题 6.9 发布网页
FrontPage 2002作为专门的网页制作工具，具有更 加强大的网页编辑和管理能力。 本章主要内容包括： （1）FrontPage 2002基础； （2）FrontPage 2002视图； （3）新建站点与网页； （4）修改网页； （5）格式设置； （6）插入对象； （7）创建超链接； （8）使用主题； （9）发布网页。
图6-4 FrontPage任务窗格
图6-5 “Web站点模板”对话框
（3）在左边的站点列表框中选择“只有一个网页 的站点”，并在右边的“指定新站点的位置”栏中 输入存放站点的文件夹的名称以及路径后，按“确 定”按钮，这样在指定的路径下就创建了一个站点。
新建站点时，也可以在“新建”按钮的下拉菜单中 选择站点命令，直接打开“Web站点模板”对话框， 然后选择“Web站点模板”对话框中的向导和模板 来创建站点。
（11）网页选项卡。 （12）可选的超链接下划线。 （13）自定义链接栏。 （14）电子商务加载项。 （15）语言支持。 （16）语音和手写。 （17）权限。
6.2 FrontPage 2002视图
1．网页视图 网页视图主要用于网页的编辑和修改，例如输入文 字、插入图片、表格等。它共分3种方式：普通方 式、HTML方式和预览方式: （1）普通方式。FrontPage是所见即所得的网页制 作软件。用户不但可以直接在普通方式下直接编辑 文字、图片、表格等还可以直接在页面中插入Web 组件，并且编辑后的效果与最终页面显示的效果大 致一样，如图6-2所示。
图6-1 FrontPage 2002界面
6.1.3 FrontPage 2002功能
（1）图片库。 （2）增强绘图工具。 （3）自动更新站点内容。 （4）使用率分析报表。 （5）前10个列表。 （6）单个网页发布。 （7）文档库。 （8）更多的表格格式选项。 （9）随意粘贴。 （10）Office 剪贴板任务窗格。
如果使用模板，单击“确定”按钮或双击模板图标 后系统会自动创建一个含有默认页面的站点；如果 使用向导则会出现对话框，用户根据向导的提问选 择答案或回答问题，最后，根据用户对问题的回答 生成站点。
6.3.2 新建网页
使用者可以根据实际需要创建网页，然后将网页添 加到站点中。
单击菜单栏上的“文件”|“新建”|“网页或站点” 命令，在打开的“新建网页或站点”任务窗格中选 择“空白网页”命令，如图6-6所示。 这时就会在FrontPage编辑区内打开名为“new_ page_1.htm”的空白页面；或者直接单击工具栏上 的新建网页按钮，来创建空白页面。
图6-2 普通方式网页视图
（2）HTML方式。HTML（HyperText Markup Language）是网页设计中使用的最基本的标记语 言。在普通方式下编辑网页时，FrontPage会根据 网页内容自动生成相应的HTML标记文本，如图63所示。在图中被“< >”符号包围起来的就是 HTML标记。
6.1 FrontPage 2002基础
6.1.1 FrontPage 2002启动
有3种方法可以启动FrontPage 2002：第一种单击 开始按钮后，在出现的菜单上选择“所有程 序”|“Microsoft FrontPage”命令；第二种可以双 击桌面上FrontPage 2002的快捷方式图标；第三种 查找特定的网页，并双击该网页的图标。
当新网页编辑完成后，单击菜单栏上的“文 件”|“另存为”命令，打开“另存为”对话框， 将路径设置到指定站点的文件夹中，单击“更改标 题”按钮，输入要显示的标题。在文件名文本框中 输入网页的文件名，单击“确定”按钮就将新建的 网页添加到指定的站点中。