网页及其制作工具--完整版课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、用html语言编写的网页是普通的文本文档，可
以由任何文本编辑器来编辑（记事本、写字板、
wps、 word）
3、HTML语言的基本应用
⑴ 基本信息标记：
<html>……</html>——HTML标记，<html>表示
文件为HTML文件，</html>表示代码结束
<head>……</head>——网页文件的头部信息。
(3)Flash。Macromedia公司出品的Flash是目前非常流
行的一种交互式Web矢量动画软件。
Dreamweaver和Flash、Fireworks三个软件被称为“网页
三剑客”，是现在公认的比较标准的网页制作利器。
FrontPage2003界面
谢 谢！
样式表CSS内容
</style>
在body部分，如果要引用位于head部分的样式表，
形式为：<span class=样式表名>具体内容</span>
⑵ 外部样式表
<link href="" rel=stylesheet type="text/css" >
5、JavaScriL代码中。
(1)<SCRIL文件中使用<SCRIPT></SCRIPT>标记对任意
上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度
说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页
面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引
擎收录方面并不占优势。搜索引擎还是喜欢静态页面。 不过搜索引擎在
不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的
③<元素名>
⑵ 文字设置
<hn>……</hn> ——标题级别
align=left; align=right ; align=center——对齐方式
<font>……</font>——字体设置（主要属性：
size=”n”
color=”#rrggbb” ，face=”字体”。 ）
<b>……</b>——粗体
框架设置
<frameset>……</frameset>
9
其他
<br>——换行符
——段落标记
<hr>——水平线
4、CSS层叠样式表的简单使用，能读懂简单的CSS样
式表代码，并能根据需要，选择适当的方式（内联样
式表，外部样式表）和适当的层叠样式表，插入到当
前网页的HTML代码中。
⑴ 内联样式表
<style type="text/css">
过程中由计算机系统自
动创建内容的网页。
内容会随着访问的变化
而相应变化。交互性强；
可自动更新；因地因时
因人而变。
动态网页与静态网页的区别：
扩展名
语言
静
html、
纯HTML代
态ht m、xml 、
码
网
shtml
页
动
态
网
页
Asp、
jsp、
php
脚本语言
数
需要后台数据
库的支持
B．<html></html>
C．<body></body>
D．
2、下列关于HTML语言描述不正确的是（ A ）
A. FRONTL无关
B. HTML 语言中可以嵌入如 ASL 语言是通过一系列特定的标记来
标识出相应的意义和作用的
D. HTML文档本身就是文本格式的文件
3、超文本标记语言“<a href=”
多次。
(2)
指定脚本语言。例如
language=”JavaScript”>
:
<s
(3) 插入JavaScript代码的方法。
在 < SCRIPT> 和 </SCRIPT> 标记对之间插入 JavaScript
代码。
课堂练习
1、为了标识一HTML文件应该使用的HTML标记是（ B ）
A．<table></table>
抓取。
ASL内容以及各种客户端脚本一同传送到客户端。
5.2
网页的文件结构及支持技术
HTML是一种标记语言，用来对web页面中显示
内容的属性以标记的形式进行描述。一个web页面
就是一个HTML文档。
1、如何查看网页的html代码
打开某个网页——执行“查看”菜单中的“源文件”，
系统会用 “记事本”打开该网页的html代码。
计数器、
聊天室、
讨论区、
BBS
动态网页技术
动态网页可以实现网页浏览者和网页设计者的交
互，实现交互技术有两种：一种是客户端技术如常用
的JavaScript和VBScript；另一种是服务器端技术如
目前常用的ASP和PHP。
(1)ASP(Active Server Pages)
(2)PHP(HypertextPreprocessor)
(3)JSP(Java Server Pages)
特征
(1) 动态网页一般以数据库技术为基础，可以大大
降低网站维护的工作量;
(2) 采用动态网页技术的网站可以实现更多的功能，
如用户注册、用户登录、在线调查、用户管理、
订单管理等等;
(3) 动态网页实际上并不是独立存在于服务器上的
网页文件，只有当用户请求时服务器才返回一个
5.1.2 静态网页与动态网页
网页分类
静态网页(static web
pages)是用HTML语言编
写文件，在服务器上以
文件形式存放并以相同
格式发送给客户的网页；
网页文档存储在Web服
务器的文件系统中，内
容通常不随浏览者的不
同需求而改变。客户端
与服务器端没有交互。
动态网页(dynamic web
pages) 指在用户浏览
通过图片链接到另一页面：
< a herf=” 链接页面路径及文件名” ><img
路径及文件名”></a>
5
图片设置
<img src="图片路径及文件名">
6
背景音乐设置
<bgsound src=”声音文件路径及文件名”>
src=” 图片
（7）设置字幕
<marquee>字幕内容</marquee>
8
5.3 常用的网页制作工具
1.
网页编辑工具
(1) 超文本标识语言（HTML）
(2)Frontweaver
2.
网页图像编辑工具
(1)Photoshop
(2)Fireworks
(3)Flash
1.
(1)
网页编辑工具
超文本标识语言（HTML）。是一种使用一些约定的标
记对WWW上的各种信息进行标记的语言。
A 其他三项都是
B.Frontweaver
C.javaScriL中嵌入JavaScript,应该使用的标记是(
A <body></body>
B <head></head>
C <script></script>
D <!--…//-->
C
)
7、张三用同一关键字为“信息技术考试”出现的网页与3天前
他用相同关键字搜索到的网页不完全相同，这是因为该网站使
第 五章 网页及其制作工
具
1.
2.
网页
网页的文件结构及支持技术
5.3 网页制作工具Frontpage
5.1 网页
1
、 网页就是一个用 HTML 语言标记的文件。
或多张网页链接在一起就形成了一个网站。
2 、浏览器的首页：打开浏览器出现的第一个网
页。
3 、网站的首页（主页）：在一个网站上查找信
息的起点。是一个网站最重要访问最频繁的网页。
<b<otidtley>>……
/b—o—d网y页
>—标题—
标置记
o<d/ytit>le放
…<…
/tit<
le>
，<主
tit体
le>放
网页，
标<
题b名
> 置网
页主体内容</body>
Html语句的表达方式：
①<元素名>文件或超文本</元素名>
②<元素名 属性名=“属性值” …>文件或超文本</元素名>
完整的网页;
缺点
1、首先动态网页在访问速度上不占优势
动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令
相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译
成标准的HTML代码，传递给用户浏览器，这样用户就看到了网页。问
题来了，每次访问网页都要经过这么一个过程，这一过程至少需要几
与网站标志组成网页的顶部。
4.导航栏
作用是罗列网站的重要栏目。
5.登录区
与用户交互的栏目。
6.搜索区
提高用户的吸引力。
7.推荐热点区
网站最新内容的列表或是推荐列表。
8.主要内容区
页面的主体。
9.页脚区
用来放置页脚导航条，信息和站点的联盟与赞助商。
广告动画
页面标题
登录区
徽标图像
导航栏
主要内容区
热点推荐区
用了( A )。
A、动态网页技术。
B、静态网页技术。
C、域名解析技术。
D、动态分配IP她址。
8、下列关于ASP的工作原理说法正确的是( B )
A、所有脚本代码均在客户端计算机中执行
B、使用不同技术编写的动态页面保存在Web服务器内
C、使用不同技术编写的动态页面保存在客户端计算机中
D、Web服务器仅把脚本代码的执行结果传送到客户端
他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页
是网站的构成要素，是网站信息发布与表现的一种主要形式；网站
是网页通过超链接形成的集合。
5.1.1网页栏目的构成
网站
主页
栏目
1.页面标题
显示在浏览器标题上的文字。
2.网站标志
位于网站首页顶部的标志性图标，是站点特色和内
涵的集中体现。
3.页眉区
(2)
Frontweaver。集网页制作和网站管理于一身，将“所
见即所得”的网页设计方式与源代码编辑完美结合，在网站设
计制作领域应用非常广泛。
2.
网页图像编辑工具
(1)acromedia公司开发的图形处理工具，它是第一个专
门为制作网页图形而设计的软件，同时也提供专业的网页图
形设计及制作的解决方案。
秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来
说也是一种负担;从用户角度来说，网页加载的慢，迟迟没有反应，下次
谁还会来访问你的网站。
而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，
直接加载到客户浏览器上显示来。
由此可见，动态网页在访问速度上并不占优势。
2、在搜索引擎收录方面并不占优势
A.创建一个指向新浪网的电子邮件
B.插入一幅新浪网C 的图片
C.创建一个指向新浪网的超级链接
D.插入一段新浪网的文字
>
4、HTML语言中，表格标记符是（
）
A.<FROM></FROM> B.<HEAD></HEAD>
C.<HTML></HTML> D.<TABLE></TAB
DLE>
5、下面哪个选项是客户端脚本语言? ( C )
，不能用中文命名。
如何设置浏览器的首页：
• 在浏览器窗口中执行“工具”—— “internet选项”，
在出现的窗口中进行设置。
进入一个网站的Web页面时，我们在浏览器中首先看到的页面称为
主页。一般不宜作为主页默认文件名的是(
)。
A、
B、
C、
D、
D
网页与网站的区别与联系：
•
网站是一个文件夹，其中的文件不仅是网页还有网站所需的其
<u>……</u>——下划线
<i>……</i>——斜体
• （3）表格设置
• <table>……</table>——表格标记
• <caption>……</caption>——表头
• <tr>……</tr>——表行
• <td>……</td>——单元格
（4）超链接设置
通过文字链接到另一页面：
<a herf=”链接页面路径及文件名”>链接文字</a>
以由任何文本编辑器来编辑（记事本、写字板、
wps、 word）
3、HTML语言的基本应用
⑴ 基本信息标记：
<html>……</html>——HTML标记，<html>表示
文件为HTML文件，</html>表示代码结束
<head>……</head>——网页文件的头部信息。
(3)Flash。Macromedia公司出品的Flash是目前非常流
行的一种交互式Web矢量动画软件。
Dreamweaver和Flash、Fireworks三个软件被称为“网页
三剑客”，是现在公认的比较标准的网页制作利器。
FrontPage2003界面
谢 谢！
样式表CSS内容
</style>
在body部分，如果要引用位于head部分的样式表，
形式为：<span class=样式表名>具体内容</span>
⑵ 外部样式表
<link href="" rel=stylesheet type="text/css" >
5、JavaScriL代码中。
(1)<SCRIL文件中使用<SCRIPT></SCRIPT>标记对任意
上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度
说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页
面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引
擎收录方面并不占优势。搜索引擎还是喜欢静态页面。 不过搜索引擎在
不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的
③<元素名>
⑵ 文字设置
<hn>……</hn> ——标题级别
align=left; align=right ; align=center——对齐方式
<font>……</font>——字体设置（主要属性：
size=”n”
color=”#rrggbb” ，face=”字体”。 ）
<b>……</b>——粗体
框架设置
<frameset>……</frameset>
9
其他
<br>——换行符
——段落标记
<hr>——水平线
4、CSS层叠样式表的简单使用，能读懂简单的CSS样
式表代码，并能根据需要，选择适当的方式（内联样
式表，外部样式表）和适当的层叠样式表，插入到当
前网页的HTML代码中。
⑴ 内联样式表
<style type="text/css">
过程中由计算机系统自
动创建内容的网页。
内容会随着访问的变化
而相应变化。交互性强；
可自动更新；因地因时
因人而变。
动态网页与静态网页的区别：
扩展名
语言
静
html、
纯HTML代
态ht m、xml 、
码
网
shtml
页
动
态
网
页
Asp、
jsp、
php
脚本语言
数
需要后台数据
库的支持
B．<html></html>
C．<body></body>
D．
2、下列关于HTML语言描述不正确的是（ A ）
A. FRONTL无关
B. HTML 语言中可以嵌入如 ASL 语言是通过一系列特定的标记来
标识出相应的意义和作用的
D. HTML文档本身就是文本格式的文件
3、超文本标记语言“<a href=”
多次。
(2)
指定脚本语言。例如
language=”JavaScript”>
:
<s
(3) 插入JavaScript代码的方法。
在 < SCRIPT> 和 </SCRIPT> 标记对之间插入 JavaScript
代码。
课堂练习
1、为了标识一HTML文件应该使用的HTML标记是（ B ）
A．<table></table>
抓取。
ASL内容以及各种客户端脚本一同传送到客户端。
5.2
网页的文件结构及支持技术
HTML是一种标记语言，用来对web页面中显示
内容的属性以标记的形式进行描述。一个web页面
就是一个HTML文档。
1、如何查看网页的html代码
打开某个网页——执行“查看”菜单中的“源文件”，
系统会用 “记事本”打开该网页的html代码。
计数器、
聊天室、
讨论区、
BBS
动态网页技术
动态网页可以实现网页浏览者和网页设计者的交
互，实现交互技术有两种：一种是客户端技术如常用
的JavaScript和VBScript；另一种是服务器端技术如
目前常用的ASP和PHP。
(1)ASP(Active Server Pages)
(2)PHP(HypertextPreprocessor)
(3)JSP(Java Server Pages)
特征
(1) 动态网页一般以数据库技术为基础，可以大大
降低网站维护的工作量;
(2) 采用动态网页技术的网站可以实现更多的功能，
如用户注册、用户登录、在线调查、用户管理、
订单管理等等;
(3) 动态网页实际上并不是独立存在于服务器上的
网页文件，只有当用户请求时服务器才返回一个
5.1.2 静态网页与动态网页
网页分类
静态网页(static web
pages)是用HTML语言编
写文件，在服务器上以
文件形式存放并以相同
格式发送给客户的网页；
网页文档存储在Web服
务器的文件系统中，内
容通常不随浏览者的不
同需求而改变。客户端
与服务器端没有交互。
动态网页(dynamic web
pages) 指在用户浏览
通过图片链接到另一页面：
< a herf=” 链接页面路径及文件名” ><img
路径及文件名”></a>
5
图片设置
<img src="图片路径及文件名">
6
背景音乐设置
<bgsound src=”声音文件路径及文件名”>
src=” 图片
（7）设置字幕
<marquee>字幕内容</marquee>
8
5.3 常用的网页制作工具
1.
网页编辑工具
(1) 超文本标识语言（HTML）
(2)Frontweaver
2.
网页图像编辑工具
(1)Photoshop
(2)Fireworks
(3)Flash
1.
(1)
网页编辑工具
超文本标识语言（HTML）。是一种使用一些约定的标
记对WWW上的各种信息进行标记的语言。
A 其他三项都是
B.Frontweaver
C.javaScriL中嵌入JavaScript,应该使用的标记是(
A <body></body>
B <head></head>
C <script></script>
D <!--…//-->
C
)
7、张三用同一关键字为“信息技术考试”出现的网页与3天前
他用相同关键字搜索到的网页不完全相同，这是因为该网站使
第 五章 网页及其制作工
具
1.
2.
网页
网页的文件结构及支持技术
5.3 网页制作工具Frontpage
5.1 网页
1
、 网页就是一个用 HTML 语言标记的文件。
或多张网页链接在一起就形成了一个网站。
2 、浏览器的首页：打开浏览器出现的第一个网
页。
3 、网站的首页（主页）：在一个网站上查找信
息的起点。是一个网站最重要访问最频繁的网页。
<b<otidtley>>……
/b—o—d网y页
>—标题—
标置记
o<d/ytit>le放
…<…
/tit<
le>
，<主
tit体
le>放
网页，
标<
题b名
> 置网
页主体内容</body>
Html语句的表达方式：
①<元素名>文件或超文本</元素名>
②<元素名 属性名=“属性值” …>文件或超文本</元素名>
完整的网页;
缺点
1、首先动态网页在访问速度上不占优势
动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令
相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译
成标准的HTML代码，传递给用户浏览器，这样用户就看到了网页。问
题来了，每次访问网页都要经过这么一个过程，这一过程至少需要几
与网站标志组成网页的顶部。
4.导航栏
作用是罗列网站的重要栏目。
5.登录区
与用户交互的栏目。
6.搜索区
提高用户的吸引力。
7.推荐热点区
网站最新内容的列表或是推荐列表。
8.主要内容区
页面的主体。
9.页脚区
用来放置页脚导航条，信息和站点的联盟与赞助商。
广告动画
页面标题
登录区
徽标图像
导航栏
主要内容区
热点推荐区
用了( A )。
A、动态网页技术。
B、静态网页技术。
C、域名解析技术。
D、动态分配IP她址。
8、下列关于ASP的工作原理说法正确的是( B )
A、所有脚本代码均在客户端计算机中执行
B、使用不同技术编写的动态页面保存在Web服务器内
C、使用不同技术编写的动态页面保存在客户端计算机中
D、Web服务器仅把脚本代码的执行结果传送到客户端
他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页
是网站的构成要素，是网站信息发布与表现的一种主要形式；网站
是网页通过超链接形成的集合。
5.1.1网页栏目的构成
网站
主页
栏目
1.页面标题
显示在浏览器标题上的文字。
2.网站标志
位于网站首页顶部的标志性图标，是站点特色和内
涵的集中体现。
3.页眉区
(2)
Frontweaver。集网页制作和网站管理于一身，将“所
见即所得”的网页设计方式与源代码编辑完美结合，在网站设
计制作领域应用非常广泛。
2.
网页图像编辑工具
(1)acromedia公司开发的图形处理工具，它是第一个专
门为制作网页图形而设计的软件，同时也提供专业的网页图
形设计及制作的解决方案。
秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来
说也是一种负担;从用户角度来说，网页加载的慢，迟迟没有反应，下次
谁还会来访问你的网站。
而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，
直接加载到客户浏览器上显示来。
由此可见，动态网页在访问速度上并不占优势。
2、在搜索引擎收录方面并不占优势
A.创建一个指向新浪网的电子邮件
B.插入一幅新浪网C 的图片
C.创建一个指向新浪网的超级链接
D.插入一段新浪网的文字
>
4、HTML语言中，表格标记符是（
）
A.<FROM></FROM> B.<HEAD></HEAD>
C.<HTML></HTML> D.<TABLE></TAB
DLE>
5、下面哪个选项是客户端脚本语言? ( C )
，不能用中文命名。
如何设置浏览器的首页：
• 在浏览器窗口中执行“工具”—— “internet选项”，
在出现的窗口中进行设置。
进入一个网站的Web页面时，我们在浏览器中首先看到的页面称为
主页。一般不宜作为主页默认文件名的是(
)。
A、
B、
C、
D、
D
网页与网站的区别与联系：
•
网站是一个文件夹，其中的文件不仅是网页还有网站所需的其
<u>……</u>——下划线
<i>……</i>——斜体
• （3）表格设置
• <table>……</table>——表格标记
• <caption>……</caption>——表头
• <tr>……</tr>——表行
• <td>……</td>——单元格
（4）超链接设置
通过文字链接到另一页面：
<a herf=”链接页面路径及文件名”>链接文字</a>