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

1、第 五章 网页及其制作工具5.3 网页制作工具Frontpage5.1 网页5.2 网页的文件结构及支持技术1、 网页就是一个用HTML语言标记的文件。一张或多张网页链接在一起就形成了一个网站。 2、浏览器的首页：打开浏览器出现的第一个网页。 3、网站的首页（主页）：在一个网站上查找信息的起点。是一个网站最重要访问最频繁的网页。 ，不能用中文命名。5.1 网页如何设置浏览器的首页：在浏览器窗口中执行“工具” “internet选项”，在出现的窗口中进行设置。 进入一个网站的Web页面时，我们在浏览器中首先看到的页面称为主页。一般不宜作为主页默认文件名的是( )。 A、 B、 C、 D、D网页与

2、网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。5.1.1网页栏目的构成网站主页栏目 1.页面标题 2.网站标志3.页眉区 4.导航栏 5.登录区 6.搜索区 7.推荐热点区 8.主要内容区 9.页脚区 显示在浏览器标题上的文字。位于网站首页顶部的标志性图标，是站点特色和内涵的集中体现。提高用户的吸引力。页面的主体。网站最新内容的列表或是推荐列表。用来放置页脚导航条，信息和站点的联盟与赞助商。与网站标志组成网页的顶部。与用户交互

3、的栏目。作用是罗列网站的重要栏目。主要内容区热点推荐区导航栏页面标题徽标图像 广告动画登录区5.1.2 静态网页与动态网页网页 分类静态网页(static web pages)是用HTML语言编写文件，在服务器上以文件形式存放并以相同格式发送给客户的网页；网页文档存储在Web服务器的文件系统中，内容通常不随浏览者的不同需求而改变。客户端与服务器端没有交互。动态网页(dynamic web pages) 指在用户浏览过程中由计算机系统自动创建内容的网页。内容会随着访问的变化而相应变化。交互性强；可自动更新；因地因时因人而变。动态网页与静态网页的区别：扩展名语言数据库技术实例静态网页html、ht

4、m、xml 、shtml纯HTML代码没有能力使用数据库动态网页Asp、jsp、php脚本语言需要后台数据库的支持计数器、聊天室、讨论区、BBS动态网页可以实现网页浏览者和网页设计者的交互，实现交互技术有两种：一种是客户端技术如常用的JavaScript和VBScript；另一种是服务器端技术如目前常用的ASP和PHP。(1)ASP(Active Server Pages)(2)PHP(Hypertext Preprocessor)(3)JSP(Java Server Pages) 动态网页技术(1)动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以

5、实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;特征缺点1、首先动态网页在访问速度上不占优势动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译成标准的HTML代码，传递给用户浏览器，这样用户就看到了网页。问题出来了，每次访问网页都要经过这么一个过程，这一过程至少需要几秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来说也是一种负担;从用户角度来说，网页加载的慢，迟迟没有反应，下次谁还会来

6、访问你的网站。而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。由此可见，动态网页在访问速度上并不占优势。2、在搜索引擎收录方面并不占优势上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引擎收录方面并不占优势。搜索引擎还是喜欢静态页面。 不过搜索引擎在不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的抓取。 ASL内容以及各种客户端脚本一同传送到客户端。1、如何查看网页的html代码打开某个网页执行“查

7、看”菜单中的“源文件”，系统会用 “记事本”打开该网页的html代码。2、用html语言编写的网页是普通的文本文档，可以由任何文本编辑器来编辑（记事本、写字板、 wps、 word）5.2 网页的文件结构及支持技术 HTML是一种标记语言，用来对web页面中显示内容的属性以标记的形式进行描述。一个web页面就是一个HTML文档。3、HTML语言的基本应用 基本信息标记：HTML标记，表示文件为HTML文件，表示代码结束网页文件的头部信息。主体标记，放置网页主体内容Html语句的表达方式：文件或超文本文件或超文本网页标题，放置网页标题名（3）表格设置 表格标记表头表行 单元格 文字设置 标题级别

8、 align=left; align=right ; align=center对齐方式 字体设置（主要属性：size=”n” color=”#rrggbb” ，face=”字体”。 ） 粗体 下划线 斜体（4）超链接设置 通过文字链接到另一页面：链接文字 通过图片链接到另一页面：（6）背景音乐设置（5）图片设置（8）框架设置（9）其他换行符段落标记水平线（7）设置字幕字幕内容4、CSS层叠样式表的简单使用，能读懂简单的CSS样式表代码，并能根据需要，选择适当的方式（内联样式表，外部样式表）和适当的层叠样式表，插入到当前网页的HTML代码中。 内联样式表 样式表CSS内容 在body部分，如果要

9、引用位于head部分的样式表，形式为：具体内容 外部样式表5、JavaScriL代码中。(1)SCRIL文件中使用标记对任意多次。(2)指定脚本语言。例如: (3)插入JavaScript代码的方法。在和标记对之间插入JavaScript代码。1、为了标识一HTML文件应该使用的HTML标记是（ ） A B C D2、下列关于HTML语言描述不正确的是（ ）A. FRONTL无关B. HTML语言中可以嵌入如ASL语言是通过一系列特定的标记来标识出相应的意义和作用的D. HTML文档本身就是文本格式的文件课堂练习BA3、超文本标记语言“a href=” ） A.创建一个指向新浪网的电子邮件 B

10、.插入一幅新浪网的图片 C.创建一个指向新浪网的超级链接 D.插入一段新浪网的文字4、HTML语言中，表格标记符是（ ） A. B. C. D.CD5、下面哪个选项是客户端脚本语言? ( )A 其他三项都是 B FrontweaverC javaScriL中嵌入JavaScript,应该使用的标记是( )。A B C D CC7、张三用同一关键字为“信息技术考试”出现的网页与3天前他用相同关键字搜索到的网页不完全相同，这是因为该网站使用了( )。A、动态网页技术。 B、静态网页技术。C、域名解析技术。 D、动态分配IP她址。8、下列关于ASP的工作原理说法正确的是( )A、所有脚本代码均在客户

11、端计算机中执行B、使用不同技术编写的动态页面保存在Web服务器内C、使用不同技术编写的动态页面保存在客户端计算机中D、Web服务器仅把脚本代码的执行结果传送到客户端AB5.3 常用的网页制作工具1.网页编辑工具(1)超文本标识语言（HTML）(2)Frontweaver 2.网页图像编辑工具 (1)Photoshop (2)Fireworks (3)Flash1.网页编辑工具 (1)超文本标识语言（HTML）。是一种使用一些约定的标记对WWW上的各种信息进行标记的语言。 (2)Frontweaver。集网页制作和网站管理于一身，将“所见即所得”的网页设计方式与源代码编辑完美结合，在网站设计制作领域应用非常广泛。(1)acromedia公司开发的图形处理工具，它是第一个专门为制作网