新版计算机网络概论培训ppt课件.ppt

《新版计算机网络概论培训ppt课件.ppt》由会员分享，可在线阅读，更多相关《新版计算机网络概论培训ppt课件.ppt（188页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、计算机网络概论计算机网络概论刘兵 制作精选 1第8 章 网页设计基础n 通过本章学习，读者应该掌握以下内容：n HTML语言的基础知识n 级联式样式表（CSS）n JavaScript语言的基础知识精选 28.1 HTML语言n 8.1.1 HTML 语言的结构 n HTML（超文本标记语言）是一种描述文档结构的标注语言n 它使用一些约定的标记对WWW上的各种信息进行标注。n HTML的优点是其跨平台性。精选 38.1 HTML语言n 8.1.1 HTML 语言的结构 n HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。n HTML文件看起来像是加入了许多被称为链接签（

2、tag）的特殊字符串的普通文本文件。精选 48.1 HTML语言n 8.1.1 HTML 语言的结构 n 从结构上讲，HTML文件由元素（element）组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。n 绝大多数元素是“容器”，即它有起始标记和结束标记。n 中间叫元素体。每个元素都有名称和许多可选择的属性。精选 58.1 HTML语言n 下面来看一个HTML文件结构实例，精选 6n n n 武汉工业学院n n n 这是一HTML的测试文件n n 精选 7n HTML文件仅由一个HTML元素组成。即文件以开始，以结尾，文件其余部分都是 HTML的元素体。n 而 H

3、TML元 素 的 元 素 体 又 由 头 元 素、体元素和一些注释组成。n 头元素和体元素的元素体又由其它的元素、文本及注释组成。8.1 HTML语言精选 8n 链接签的格式为：n 内容 n 例如：n 这是一HTML的测试文件n 8.1 HTML语言精选 9n 在HTML中有三个字符具有特殊的意义，即：n 表示一个标签的结束。n&表示转义序列的开始。每个转义字符都“&”开始，以分号“；”结束。（解决二义性问题）n 例如：“<”表示“”符号。“ ”表示空格。8.1 HTML语言精选 10n 元素名也叫链接签名。需要注意的是：n（1）和起始链接签之间不能有空格。n（2）元素名称不区

4、分大小写。n（3）一个元素可以有多个属性，属性及其属性值不区分大小写，且各个属性用空格分开。8.1 HTML语言精选 11n 在头元素中的元素表示的是该HTML文件的一般信息，n 这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。n 出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。8.1 HTML语言精选 12n 1.标记n 标记用来给网页命名，显示在浏览器的标题栏中。n 例如，在图2-1中所示的浏览器页面中，其标题栏所显示的“武汉工业学院”。8.1.2 构成网页的基本元素精选 13n 2.标记n 到标题元素有6种，用于表示文章

5、中的各种题目。字体大小到顺序减小。n 下面这个例子中分别使用了到的标题。8.1.2 构成网页的基本元素精选 14n n n 这是一个测试网页n n n 标题测试n 标题测试n 标题测试n标题测试n标题测试n标题测试n n精选 15精选 16n 3.预格式化文本标记n HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新排版的，即把文本上任何额外的字符（如空格、制表符和回车符）都忽略，若确实不需要重新排版的内容，可以用通知浏览器。n 下面是图2-3和图2-4的HTML源文件。8.1.2 构成网页的基本元素精选 17n n n 这是一个测试网页n n n n HTML是一种描述文档结构的

6、标注语n 言，它使用一些约定的标记对各种信息n 进行标注。n n n 精选 18n 4.和标记n 用于强制换行。表示一个段落的开始。一般可不用。n 5.标记 n 这几个标记都是用来修饰所包含文档的。标记使文本加粗；标记使文本倾斜；标记给文本加下划线；标记给文本加删除线；标记使文本字体加重。n 下面给出一个这几个元素的HTML源文件。8.1.2 构成网页的基本元素精选 19n n n 这是一个测试网页n n n HTML是一种n 描述文档结构的n 标注语言，n 它使用一些n 约定的标记对各种信息进行n 标注。n n 精选 20n 6.标记n 用来修改字体和颜色。其中n COLOR属性：指定文字颜

7、色，颜色的表示可以用6位十六进制代码，如；n SIZE属性：指定相对尺寸。8.1.2 构成网页的基本元素精选 21n n n 这是一个测试网页n n n HTML是一种n 描述文档结构的n 标注语言，n 它使用一些n 约定的标记对各种信息进行n 标注。n n 精选 22n 如果用户想要设置网页的背景色和文字颜色，可以将标记扩充为：n 8.1.2 构成网页的基本元素精选 23 表 设置背景景色和文字颜色标记 说明Bgcolor设置网页背景颜色Text设置网页非可链接文字的颜色Link设置网页可链接文字的颜色Alink设置网页正被点击的可链接文字的颜色Vlink设置网页已经点击的可链接文字的颜色B

8、ackground设置网页背景图案ImageURL 设置网页背景图案的URL地址#代表颜色RGB值（格式为rrggbb）。它是用16进制的红-绿-蓝（red-green-blue，RGB）值来表示。各种常见的颜色的RGB值如表9-2所示。精选 24颜色RGB颜色RGB黑色（Black）000000橄榄色（Olive）808000红色（Red）FF0000 深表色（Teal）008080绿色（Green）008000 灰色（Gray）808080蓝色（Blue）0000FF深蓝色（Navy）000080白色（White）FFFFFF浅绿色（Lime）00FF00黄色（Yellow）FFFF00紫

9、红色（Fuchsia）FF00FF银色（Silver）C0C0C0 紫色（Purple）800080浅色（Aqua）00FFFF茶色（Maroon）800000 表 常见颜色RGB值精选 25n 例如要将网页背景颜色设置为蓝色，n 8.1.2 构成网页的基本元素精选 26n 超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的踊跃思维方式。n 超文本链接指针是指把并不连续的两段文字或两个文件联系起来。8.1.3 超文本链接指针 精选 27n 1.统一资源定位器URLn 统一资源定位器（UniformResourceLocator）是文件名的扩展。n 它的构成为：n

10、protocol:/machine.name:portdirectoryfilename8.1.3 超文本链接指针 精选 28n 其中：n protocol是访问该资源所采用的协议，即访问该资源的方法，它可以是：n HTTP：超文本传输协议，该资源是HTML文件；n FTP：文件传输协议，用ftp访问该资源；n MAILTO：采用简单邮件管理传输协议SMTP，提供电子邮件服务。8.1.3 超文本链接指针 精选 29n machine.name是存放该资源主机的IP 地址，通常以字符形式出现,如。n port（端口号）是服务器在其主机所使用的端口号。一般情况下端口号不需要指定，只有当服务器所使用

11、的端口号不是默认的端口号时才指定。n directory和filename 是该资源的路径和文件名。8.1.3 超文本链接指针 精选 30n 一个典型的URL为：http:/网络采用传输协议；n 主机的名字是；但它并没有指出访问的目录和哪个文件，其实这时表示访问的是根目录下的默认主页文件。8.1.3 超文本链接指针 精选 31n 与单机系统绝对路径、相对路径的概念类似，统一资源定位器也有绝对URL和相对URL之分。n 绝对URL、相对URL是相对于最近访问的URL而言。8.1.3 超文本链接指针 精选 32n 当协议（http:/）被省略时，就认为与当前页面的协议相同。n 当主机域名被省略时，

12、就认是当前主机域名。n 当目录路径被省略时，就认是当前目录。n 当文件名被省略时，就认是当前文件。8.1.3 超文本链接指针 精选 332.建立一个链接n（1）链接到其它站点n 在HTML文件中用链接指针指向一个目标。其基本格式为：n zzz n 其中zzz可以是文字或图片并显示在网页中，n href中的h表示超文本，而ref表示“访问”或“引用”的意思。精选 342.建立一个链接n 例如：n 武汉工业学院n 在这个例子中，充当指针的是“武汉工业学院”。精选 35n 在编写HTML文件时，需要知道目标的URL。那么如何才能得到目标的URL呢？n 在编写HTML文件时，对能确定关系的一组资源（例

13、如在同一个目录中）应采用相对URL。2.建立一个链接精选 36n（2）同一个文件中的链接n 超链可以指向自己的计算机中的某一个文件这种链接方式叫做本地链接。n 对于同一文件的不同部分，我们怎样来标识呢？2.建立一个链接精选 37n 下面的内容将介绍链接指针元素的另外的一个用途，标识目标。标识一个目标的方法为：n.n NAME属性将放置该标记的地方标记为“KKK”，n 指针：n 转向下一处 2.建立一个链接精选 388.1.4 在HTML文件中使用图像n 1.在HTML文件中显示图像n 在浏览器上显示的图像必须有特定的格式，目前使用的浏览器通常支持GIF和JPEG格式的图像。n 在HTML网页中

14、加图像是通过标记实现的.例如：n n 精选 391.在HTML文件中显示图像n 标记有几个较为重要的属性。其中：n SRC属性：指明图形的URL地址；n HEIGHT属性：决定图形的高度；n WIDTH属性：决定图形的宽度；n BORDER属性：决定边框线的宽度，0表示无边框；n ALT属性：指明图像显示的备用文本；n 下面通过一个示例来说明标记的使用。精选 40n n n 测试页n n n n n n n 精选 41图2-6HTML文件举例精选 422.在HTML文件中利用图像建立链接如果在链接标记和的中间放置一个标记，这个图像将会成为一个可击点，产生一个链接。例如：n n n 精选 438

15、.1.5 框架结构的使用n 框架能够将页面分成多个独立变化的窗口，每个窗口可以显示不同的Web页面，并可以不断更换显示的对象。有关框架内容的HTML语法为：n n n n n 精选 44n n n 武汉工业学院n n n n n n n n n n n n 精选 45图2-7 框架结构示意图精选 468.1.5 框架结构的使用n 说明：n n 把浏览器窗口分成两列，其中“*”表示除了明确的值以外剩下的值。n 如果浏览器窗口的大小为640*480像素，那么框架中右面一列的宽度为 个像素，n 左面一列的宽度为 个像素。精选 478.1.5 框架结构的使用n n 该句的含义是。n 下面一行的高度为

16、像素；n 上面一行的高度为 像素。精选 488.1.5 框架结构的使用n n 标记有以下主要属性：n SRC属性：指定框架单元的URL源，即在此框中显示“a.htm”的内容。n NAME属性：为该框架单元起个标识名，主要用来为以后改变框架内容提供入口。精选 498.1.5 框架结构的使用n SCROLLING属性:设置框架是否使用滚动条。n 有YES、NO和AUTO三个值，分别表示强制使用滚动条，禁止使用滚动条和自动判断使用滚动条。精选 508.1.5 框架结构的使用n target:_blank 打开新窗口。n target:_self 在当前框架结构中打开，会覆盖当前内容。n target

17、:_top 在当前窗口打开，覆盖所有的框架内容。n target:框架名 指定框架打开.n 例w7-1.asp精选 518.1.6 表单的应用n 1.什么是表单n HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。n 表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。精选 528.1.6 表单的应用n 是在服务器端工作程序，通过服务器端的编译动态地送出HTML文件给客户端，它负责处理HTML文件与运行在服务器端的程序之间的数据交换。n 当用户输入信息（这个信息可以是查询条件，也可以是传送给服务器的某些内容）并提交给服务器后，便激活了一个服务器端程序

18、。n 该服务器程序又可以调用操作系统下的其他程序（例如数据库管理系统）完成读者的查询任务，当操作系统下的程序完成查询之后，便把查询结果传给服务器，通过服务器传给Web服务器。精选 53图2-8 表单示例精选 542.表单的标记n 表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。n 表单的HTML格式如下n n n 精选 552.表单的标记n FORM标记有以下主要属性：n（1）ACTION属性：是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。例如：n n n 精选 562.表单的标记n（2）METHOD属性：用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。n 默认的方式是GET，这两者的区别是什么？精选 572.表单的标记n 在与之间，可以使用除以外的任何HTML标识，这将使FORM变得非常灵活。精选 58