网页及其制作工具-完整版PPT课件.ppt

1、第第 五章五章 网页及其制作工具网页及其制作工具5.3 5.3 网页制作工具网页制作工具FrontpageFrontpage5.1 5.1 网页网页5.2 5.2 网页的文件结构及支持技术网页的文件结构及支持技术1、 网页就是一个用网页就是一个用HTML语言标记的文件。一张语言标记的文件。一张或多张网页链接在一起就形成了一个网站。或多张网页链接在一起就形成了一个网站。 2、浏览器的首页：打开浏览器出现的第一个网、浏览器的首页：打开浏览器出现的第一个网页。页。 3、网站的首页（主页）：在一个网站上查找信、网站的首页（主页）：在一个网站上查找信息的起点。是一个网站最重要访问最频繁的网页息的起点。是

2、一个网站最重要访问最频繁的网页。 ，不能用中文命名。，不能用中文命名。5.1 5.1 网页网页如何设置浏览器的首页：如何设置浏览器的首页： 在浏览器窗口中执行在浏览器窗口中执行“工具工具” “internet选项选项”，在出现的窗口中进行设置。，在出现的窗口中进行设置。 进入一个网站的进入一个网站的WebWeb页面时，我们在浏览器中首先看到的页面称为页面时，我们在浏览器中首先看到的页面称为主页。一般不宜作为主页默认文件名的是主页。一般不宜作为主页默认文件名的是( )( )。 A A、 B B、 C C、 D D、D D网页与网站的区别与联系：网页与网站的区别与联系： 网站是一个文件夹，其中的文

3、件不仅是网页还有网站所需的其网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。是网页通过超链接形成的集合。5.1.1网页栏目的构成网站网站主页主页栏目栏目 1.1.页面标题页面标题 2.2.网站标志网站标志3.3.页眉区页眉区 4.4.导航栏导航栏 5.5.登录区登录区 6.6.搜索区搜索区 7.7.推荐热点推荐热点区区 8.8.主要

4、内容主要内容区区 9.9.页脚区页脚区 显示在浏览器标题上的文字。显示在浏览器标题上的文字。位于网站首页顶部的标志性图标，是站点特色和内位于网站首页顶部的标志性图标，是站点特色和内涵的集中体现。涵的集中体现。提高用户的吸引力。提高用户的吸引力。页面的主体。页面的主体。网站最新内容的列表或是推荐列表。网站最新内容的列表或是推荐列表。用来放置页脚导航条，信息和站点的联盟与赞助商用来放置页脚导航条，信息和站点的联盟与赞助商。与网站标志组成网页的顶部。与网站标志组成网页的顶部。与用户交互的栏目。与用户交互的栏目。作用是罗列网站的重要栏目。作用是罗列网站的重要栏目。主要内容区热点推荐区导航栏页面标题徽标

5、图像 广告动画登录区5.1.2 静态网页与动态网页网页网页 分类分类静态网页静态网页(static web (static web pages)pages)是用HTML语言编写文件，在服务器上以文件形式存放并以相同格式发送给客户的网页；网页文档存储在Web服务器的文件系统中，内容通常不随浏览者的不同需求而改变。客户端与服务器端没有交互。动态网页动态网页(dynamic (dynamic web pages)web pages) 指在用户浏览过程中由计算机系统自动创建内容的网页。内容会随着访问的变化而相应变化。交互性强；可自动更新；因地因时因人而变。动态网页与静态网页的区别：扩展名扩展名语言语言

6、数据库技术数据库技术实例实例静静态态网网页页htmlhtml、htmhtm、xml xml 、shtmlshtml纯纯HTMLHTML代码代码没有能力使用没有能力使用数据库数据库动动态态网网页页AspAsp、jspjsp、phpphp脚本语言脚本语言需要后台数据需要后台数据库的支持库的支持计数器、计数器、聊天室、聊天室、讨论区、讨论区、BBSBBS动态网页可以实现网页浏览者和网页设计者的交动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用互，实现交互技术有两种：一种是客户端技术如常用的的JavaScriptJavaScript和和VBScriptVBScr

7、ipt；另一种是服务器端技术如；另一种是服务器端技术如目前常用的目前常用的ASPASP和和PHPPHP。(1)ASP(Active Server Pages)(1)ASP(Active Server Pages)(2)PHP(Hypertext Preprocessor)(2)PHP(Hypertext Preprocessor)(3)JSP(Java Server Pages) (3)JSP(Java Server Pages) (1)动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管

8、理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;特征缺点缺点1 1、首先动态网页在访问速度上不占优势、首先动态网页在访问速度上不占优势动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译成标准的成标准的HTMLHTML代码，传递给用户浏览器，这样用户就看到了网页。问题代码，传递给用户浏览器，这样用户就看到了网页。问题出来了，每次访问网页都要经

9、过这么一个过程，这一过程至少需要几秒出来了，每次访问网页都要经过这么一个过程，这一过程至少需要几秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来说钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来说也是一种负担也是一种负担; ;从用户角度来说，网页加载的慢，迟迟没有反应，下次从用户角度来说，网页加载的慢，迟迟没有反应，下次谁还会来访问你的网站。谁还会来访问你的网站。而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。，直接加载到客户浏览器上显示出来。由此可见，动态网

10、页在访问速度上并不占优势。由此可见，动态网页在访问速度上并不占优势。2 2、在搜索引擎收录方面并不占优势、在搜索引擎收录方面并不占优势上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引擎收录方面并不占优势。搜索引擎还是喜欢静态页面。擎收录方面并不占优势。搜索引擎还是喜欢静态页面

11、。 不过搜索引擎不过搜索引擎在不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面在不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的抓取。的抓取。 ASL内容以及各种客户端脚本一同传送到客户端内容以及各种客户端脚本一同传送到客户端。1、如何查看网页的、如何查看网页的html代码代码打开某个网页打开某个网页执行执行“查看查看”菜单中的菜单中的“源文件源文件”，系统会用，系统会用 “记事本记事本”打开该网页的打开该网页的html代码代码。2、用、用html语言编写的网页是普通的文本文档，可语言编写的网页是普通的文本文档，可以由任何文本编辑器来编辑（记事本、写字板、以由任何文本

12、编辑器来编辑（记事本、写字板、 wps、 word）5.2 5.2 网页的文件结构及支持技术网页的文件结构及支持技术 HTML HTML是一种标记语言，用来对是一种标记语言，用来对webweb页面中显页面中显示内容的属性以标记的形式进行描述。一个示内容的属性以标记的形式进行描述。一个webweb页面页面就是一个就是一个HTMLHTML文档。文档。3、HTML语言的基本应用语言的基本应用 基本信息标记：基本信息标记：HTML标记，标记，表示表示文件为文件为HTML文件，文件，表示代码结束表示代码结束网页文件的头部信息。网页文件的头部信息。主体标记，主体标记，放置网放置网页主体内容页主体内容Htm

13、lHtml语句的表达方式：语句的表达方式： 文件或超文本文件或超文本/ 文件或超文本文件或超文本/ 网页标题，网页标题，放置网页标题名放置网页标题名 （3）表格设置 表格标记 表头 表行 单元格 文字设置 标题级别 align=left; align=right ; align=center对齐方式 字体设置（主要属性：size=”n” color=”#rrggbb” ，face=”字体”。 ） 粗体 下划线 斜体（4 4）超链接设置）超链接设置 通过文字链接到另一页面：通过文字链接到另一页面：a herf=” 链接文字链接文字 通过图片链接到另一页面：通过图片链接到另一页面： a herf=

14、”（6 6）背景音乐设置）背景音乐设置bgsound src=” （5 5）图片设置）图片设置img src=（8）框架设置）框架设置（9）其他）其他换行符换行符段落标记段落标记水平线水平线（7 7）设置字幕）设置字幕字幕内容字幕内容4、CSS层叠样式表的简单使用，能读懂简单的层叠样式表的简单使用，能读懂简单的CSS样样式表代码，并能根据需要，选择适当的方式（内联样式表代码，并能根据需要，选择适当的方式（内联样式表，外部样式表）和适当的层叠样式表，插入到当式表，外部样式表）和适当的层叠样式表，插入到当前网页的前网页的HTML代码中。代码中。 内联样式表内联样式表 样式表样式表CSS内容内容 在

15、在body部分，如果要引用位于部分，如果要引用位于head部分的样式表，部分的样式表，形式为：形式为：具体内容具体内容 外部样式表外部样式表5 5、JavaScriLJavaScriL代码中。代码中。(1)SCRIL(1)SCRIL文件中使用文件中使用标记对任意标记对任意多次。多次。( 2 )( 2 ) 指 定 脚 本 语 言 。 例 如指 定 脚 本 语 言 。 例 如 : s c r i p t : language=”JavaScript”(3)(3)插入插入JavaScriptJavaScript代码的方法。代码的方法。在在和和标记对之间插入标记对之间插入JavaScriptJavaS

16、cript代码。代码。1 1、为了标识一、为了标识一HTMLHTML文件应该使用的文件应该使用的HTMLHTML标记是（标记是（ ） A A B B C C D D2 2、下列关于、下列关于HTMLHTML语言描述不正确的是（语言描述不正确的是（ ）A. FRONTLA. FRONTL无关无关B. HTMLB. HTML语言中可以嵌入如语言中可以嵌入如ASLASL语言是通过一系列特定的标记来语言是通过一系列特定的标记来标识出相应的意义和作用的标识出相应的意义和作用的D. HTMLD. HTML文档本身就是文本格式的文件文档本身就是文本格式的文件课堂练习课堂练习B BA A3 3、超文本标记语言

17、、超文本标记语言“a href=” a href=” ） A.A.创建一个指向新浪网的电子邮件创建一个指向新浪网的电子邮件 B.B.插入一幅新浪网的图片插入一幅新浪网的图片 C.C.创建一个指向新浪网的超级链接创建一个指向新浪网的超级链接 D.D.插入一段新浪网的文字插入一段新浪网的文字4 4、HTMLHTML语言中，表格标记符是（语言中，表格标记符是（ ） A. B. A. B. C. D. C. D.C CD D5 5、下面哪个选项是客户端脚本语言、下面哪个选项是客户端脚本语言? ( )? ( )A A 其他三项都是其他三项都是 B FrontweaverB FrontweaverC ja

18、vaScriLC javaScriL中嵌入中嵌入JavaScript,JavaScript,应该使用的标记是应该使用的标记是( ( ) )。A B A B C D C D CC7 7、张三用同一关键字为、张三用同一关键字为“信息技术考试信息技术考试”出现的网页与出现的网页与3 3天前天前他用相同关键字搜索到的网页不完全相同，这是因为该网站使他用相同关键字搜索到的网页不完全相同，这是因为该网站使用了用了( )( )。A A、动态网页技术。、动态网页技术。 B B、静态网页技术。、静态网页技术。C C、域名解析技术。、域名解析技术。 D D、动态分配、动态分配IPIP她址。她址。8 8、下列关于、

19、下列关于ASPASP的工作原理说法正确的是的工作原理说法正确的是( )( )A A、所有脚本代码均在客户端计算机中执行、所有脚本代码均在客户端计算机中执行B B、使用不同技术编写的动态页面保存在、使用不同技术编写的动态页面保存在WebWeb服务器内服务器内C C、使用不同技术编写的动态页面保存在客户端计算机中、使用不同技术编写的动态页面保存在客户端计算机中D D、WebWeb服务器仅把脚本代码的执行结果传送到客户端服务器仅把脚本代码的执行结果传送到客户端AB1.1.网页编辑工具网页编辑工具(1)(1)超文本标识语言（超文本标识语言（HTMLHTML）(2)Frontweaver (2)Fron

20、tweaver 2.2.网页图像编辑工具网页图像编辑工具 (1)Photoshop(1)Photoshop (2)Fireworks (2)Fireworks (3)Flash (3)Flash1.1.网页编辑工具网页编辑工具 (1)超文本标识语言（HTML）。是一种使用一些约定的标记对WWW上的各种信息进行标记的语言。 (2)Frontweaver。集网页制作和网站管理于一身，将“所见即所得”的网页设计方式与源代码编辑完美结合，在网站设计制作领域应用非常广泛。(1)acromedia公司开发的图形处理工具，它是第一个专门为制作网页图形而设计的软件，同时也提供专业的网页图形设计及制作的解决方案。(3)Flash。Macromedia公司出品的Flash是目前非常流行的一种交互式Web矢量动画软件。Dreamweaver和Flash、Fireworks三个软件被称为“网页三剑客”，是现在公认的比较标准的网页制作利器。FrontPage2003FrontPage2003界面界面谢谢 谢！谢！