计算机网络与应用课件

《计算机网络与应用课件》由会员分享，可在线阅读，更多相关《计算机网络与应用课件（37页珍藏版）》请在金锄头文库上搜索。

1、计算机网络与应用,中国医科大学信息管理与信息系统系 田大军,HTML语言基础,初期的网站都是由静态网页组成的，网页中只有文字、图形、图像等，用户只能被动地接受这些信息。那时的Web页面的核心是HTML(一种标记语言)，它编写很方便，不要求有特定的语言环境，可以用任何一种编辑器写好，便可以放到浏览器观看结果。现在HTML已经有许多专门的编辑软件，如FrontPage、Hotdog、Dreamweaver等。 最初的Web是完全的静态，仅仅提供大量的信息服务，没有服务器端客户端的概念。“静态”指的就是网站的网页内容“固定不变”。当用户浏览器通过互联网的HTTP (Hyper text Transf

2、er Protocol)协议向Web服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的是标准HTML代码，再加上GIF格式的动态图片。,静态网页制作： 1、网页素材搜集与制作（图像处理与动画制作） 2、网页版式设计 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写。也可以利用网页编辑工具的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 这主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。,静态网页的制作工具 1、图像处理与动画制作工具：P

3、hotoshop、Flash等。 2、网页编辑工具：1）纯文本编辑工具，如Notepad等；2）转换工具，如word等；3）专用工具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP，CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。,HTML简介 HTML是Hypertext Markup Language(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。 在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计

4、算机都能够理解的一种用于出版的母语。WWW(World Wide Web)所使用的出版语言就是HTML语言。通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML翻译成可以识别的信息，就是现在所见到的网页。,HTML的功能 1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。 2)通过超链接检索在线的信息。 3)为获取远程服务而设计表单，可用于提交数据、检索信息、定购产品等。 4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。,HTML文件的实质是以.htm或.html为扩展名的纯文本文件。,是供浏览器解释的格式。

5、可以使用记事本、写字板等编辑工具来编写HTML文件。HTML语言使用标志(标签)的方法来编写文件。它通常使用来表示标志的开始和结束(例如标志) 。,HTML文件的组成 头部和主体 标签和普通文本,html文件的格式 查看网页源文件，可见html文件的格式如下： 网页的标题 其中省略号部份是网页的内容,其实每个标记都是一一对应的。每个网页文件都是以开始和以结束。与之间的内容是网页的标题。会显示在浏览器的标题栏上。与之间放的是网页内容。,标志（tag）的结构特点 1、用包围。 2、多数成对出现。 3、结束标记用/。 4、标签是嵌入式的。 5、标签可有多种属性和属性值。 6、标签用半角字符，对大小写

6、不敏感。,文档标题 文档标题为。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入要显示的文本即可。,例： 中国医科大学 ,颜色表示方法 HTML用#RRGGBB字符串代表色彩，成为RGB值。RGB值中的RR、GG和BB分别代表红绿蓝三原色的两位十六进制整数值。每种原色的取值范围在00和FF（即十进制的0和255）之间，即一个字节存储一种原色。每种原色都有256种由浅至深的色彩变化，网页中呈现的色彩都是由这三种原色调配出来的。rgb值可以表示出（256*256*256）种颜色。,页面

7、格式标签 在网页设置中，会用到HTML页面设置、列表设置等格式标签。 段落标签 预处理文本 换行标签,标题格式标签 HTML语言提供了一系列对文本中的标题进行操作的标志对：，即一共有6对标题的标志对。是最大的标题，而则是最小的标题，也即是标志中h后面的数字越大标题文本就越小。如果HTML文档中需要输出标题文本，就可以使用这6对标题标志对中的任何一对。,一号标题 六号标题,文本标志 用来使文本以黑体字的形式输出。 用来使文本以斜体字的形式输出。 用来使文本以下加一划线的形式输出。 下标 上标 用来输出打字机风格字体的文本。 用来输出引用方式的字体，通常是斜体。 用来输出需要强调的文本(通常是斜体

8、加黑体)。 则用来输出加重文本(通常也是斜体加黑体)。,设定文本的字体大小、颜色、字体名等，通过属性size、color、face的控制来实现。 size属性：改变字体的大小，它可以取值：-N、N和+N； color属性：改变文本的颜色； face属性：字体名。值为系统中现有的字体，如“楷体_GB2312”。 为保证在客户端浏览器中显示正确字体的网页，不要使用非系统自带的特殊字体，如“华文彩云繁”等。,例： 宋体红色2号字,特殊字符,网页图像格式：JPEG、GIF、PNG格式。,可交换图像文件格式 (GIF) 由于几乎所有的 Web 浏览器都支持 GIF 格式（文件扩展名为 .gif），因而该

9、格式是万维网上最常用的两个图像文件格式之一。由于此格式最多仅可以显示 256 种颜色，因而最适于黑白线条图形、彩色剪辑图片和具有大块实心颜色的图片。GIF89a 格式也同时支持透明和动画。GIF 文件用于： 包含透明区域的图像。 有限的彩色，例如 256 色或更少。 离散区域中的彩色。 黑白图像。 小尺寸图像，例如站点上的按钮。 清晰度和边缘清晰度很重要的图形，例如线条图形或卡通。 包含文本的图像。 动画。,联合摄影专家组 (JPEG) JPEG 格式（文件扩展名为 .jpg 或 .jpeg）是 Web 上的另一个最常用的图像文件格式。它不局限于 256 色，因此您可以使用它来显示高质量的照片

10、或包含上百万种颜色的图片。由于它被设计为图像存储格式，因而可以有效地将高质量的大照片压缩为非常紧密的文件，这在您用电子邮件发送大图像时很有用。然而，您将图像文件的大小压缩的越多（或修改并重新保存图像），图像信息的丢失也越多并且质量也会下降。此外，该格式不支持透明和动画。 JPEG 文件用于： 照片。 自然视觉效果图像。 大数量的颜色，例如上百万。 需要大量细节的图像。 大尺寸的图像。,可移植网络图形 (PNG) PNG 格式（文件扩展名为 .png）可以显示上百万种颜色。然而，由于它是一种新的格式，当前只有很少的浏览器可以支持（尽管它正快速获得支持）。以这种格式保存的图像，即便将文件压缩，其质

11、量也不会降低。它支持透明，但不支持动画（因为它不能包含多个图像）。,图像标志标志来处理图像的输出。 标志并非真正地将图像融入到HTML文档中，而是标明图像文件的存放位置。 src属性必须赋值，其值是图形文件的存放位置和文件名。 align是图像的对齐方式。 border属性是图像的边框，可以取大于或者等于的整数，默认单位是像素。 width和height属性是图像的宽和高，默认单位也是像素。 alt属性是当鼠标移动到图像上时显示的文本。,图像实例,水平线标志 标志是在HTML文档中加入一条水平线，具有size、color、width和noshade属性： size是设置水平线的厚度。 widt

12、h是设定水平线的宽度，默认单位是像素。 noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性，水平线将有阴影)。,表格【重点】 表格标志对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。可见表格在网页排版中的作用。,？想想表格在网页中有哪些作用。,属性用途 bgcolor设置表格的背景色 border设置边框的宽度，若不设置此属性，则边框宽度默认为0 bordercolor设置边框的颜色 bordercolorlight设置边框明亮部分的颜色(当border

13、的值大于等于1时才有用) bordercolordark设置边框昏暗部分的颜色(当border的值大于等于1时才有用) cellspacing设置表格的单元格之间的空间大小 cellpadding设置表格的单元格边框与其内部内容之间的空间大小 width设置表格的宽度，单位用绝对像素值或总宽度的百分比 align表格在网页中的位置,标志对用来创建一个表格,表格的定义顺序是先定义行，再定义该行中的单元格。 标志对用来创建表格中的每一行。此标志对只能放在标志对之间使用，而在此标志对之间加入文本将是无用的，因为在之间只能紧跟标志对才是有效的语法。标志对用来创建单元格，此标志对只有放在标志对之间才是有

14、效的，输入的文本也只有放在标志对中才有效(即才能够显示出来)。 具有width、colspan、rowspan和nowrap属性： width是单元格的宽度，单位用绝对像素值或总宽度的百分比。 colspan设置一个表格单元格跨占的列数(缺省值为1)。 rowspan设置一个表格单元格跨占的行数(缺省值为1)。,表格实例： 1单元格跨越多行 2 3 4 5 6 7单元格跨越多列 ,相对路径：相对于当前文档 ./的用法 站内绝对路径：相对于网站根 /的用法 绝对路径：资源在网上完整的存放地址，网址。,超链接 重点,网页内部链接 点击链接热点，网页跳转到资源片段： 定义链接热点到资源片段 定义资源

15、片段资源片段,网页间链接 链接文字 例：中文主页 网站间链接 网站间的链接，必须使用目标资源的绝对路径，从协议开始。 例：新浪网,链接到电子邮件地址 给我写信，打开客户浏览器设定的默认电子邮件程序，收件人为mailto后的地址。 将图像作为超级链接的锚点 语法：,网页内嵌窗口 说明： src属性为窗口载入的初始网页； name属性指明窗口的名称，它和标签的target属性相对应。,网页表单 重点,表单是网页上的一组特殊对象标签，是接受用户输入数据的窗口，是用户与服务器之间信息数据交互的桥梁。可以接受用户输入的信息数据，并提交给服务器端预定的程序等来接收并处理数据。,表单技术的应用，使得基于网页

16、的编程得以实现。 含有表单的网页称作表单网页，表单对象中包含有若干表单域，每一个表单域也称表单控件，是表单的基本元素，用户可以在表单域中输入信息或作出选择。,表单标签：设定表单的起止位置，并指定处理表单数据程序的url地址。基本语法结构： 表单元素,action：用于设定处理表单数据程序url的地址。 method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器。 name：用于设定表单的名称。 onreset和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。,表单输入域（控件） 此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下： ,多行文本输入标签 参数： name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft