《网络实用技术》教程

上传人：随*** IP属地：江苏上传时间：2023-11-10 格式：PPTX 页数：57 大小：1.06MB 积分：6 举报 版权申诉

已阅读5页，还剩52页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作经济与管理学院陈占伟第1章概论计算机网络的概念WWW和HTMLWWW的工作流程网页、网站和主页网页的基本元素网页制作和美化工具HTML语言基础网站的设计流程计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互连起来，以功能完善的网络软件(网络通信协议、信息交换方式和网络操作系统等)实现网络中资源共享和信息传递的系统。计算机网络可按不同的标准进行分类。（1）从网络结点分布来看，可分为局域网（Local

Area

Network，LAN）、广域网（Wide

Area

Network，WAN）和城域网（Metropolitan

Area

Network，MAN）。局域网是一种在小范围内实现的计算机网

络，一般在一个建筑物内，或一个工厂、一个事业单位内部，为单位独有。局域网距离可在十几公里以内，信道传输速率可达1~20Mbps，结构简单，布线容易。广域网范围很广，可以分布在一个省内、一个国家或几个国家。广域网信道传输速率较低，一般小于0.1Mbps，结构比较复杂。城域网是在一个城市内部组建的计算机信息网络，提供全市的信息服务。目前，我国许多城市正在建设城域网。（2）按交换方式可分为线路交换网络（Circurt

Switching）、报文交换网络（Message

Switching）和分组交换网络（Packet

Switching）。线路交换最早出现在电话系统中，早期的计算机网络就是采用此方式来传输数据的，数字信号经过变换成为模拟信号后才能在线路上传输。报文交换是一种数字化网络。当通信开始时，源机发出的一个报文被存储在交换器里，交换器根据报文的目的地址选择合适的路径发送报文，这种方式称做存储-转发方式。分组交换也采用报文传输，但它不是以不定长的报文做传输的基本单位，而是将一个长的报文划分为许多定长的报文分组，以分组作为传输的基本单位。这不仅大大简化了对计算机存储器的管理，而且也加速了信息在网络中的传播速度。由于分组交换优于线路交换和报文交换，具有许多优点，因此它已成为计算机网络的主流。（3）按网络拓扑结构可分为星型网络、树型网络、总线型网络、环型网络和网状网络。1.1计算机网络的概念

计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互连起来，以功能完善的网络软件实现网络中资源共享和信息传递的系统。

计算机网络按范围分为局域网、城域网、广域网。1.2

WWW和HTML

WWW的全称是World

Wide

Web，也称万

维网。由遍布在互联网中被称为Web服务器和安装了Web浏览器的计算机组成的，它是一种基于超文本方式工作的信息系统。WWW分为Web服务器和Web客户端。用户通过Web浏览器向Web服务器发送特定的资源请求，当Web服务器接收到这个请求后，将替用户查找该资源，然后将结果返回给浏览器，浏览器接收到Web服务器的响应后，将响应的内容按预先定义的形式显示出来。Web服务器与Web客户端Web服务器安装了Web服务器软件的计算机功能:接收客户端的请求，然后将特定的内容返回给客户端。Web客户端向Web服务器发送请求获取资源的软件称为客户端。目前被广泛使用的是Web浏览器。功能:根据客户端的请求，发送特定资源请求给Web服务器，当接收到Web服务器的响应后，将响应的内容按预先定义的形式显示出来。用户请求基本过程Web浏览器Web服务器服务器上的各种资源①用户单击链接或输入URL②浏览器将信息转换成标准的HTTP请求并发送给Web服务器③找到资源并通过标准的HTTP响应发送回浏览器④浏览器收到响应，将

HTML文档显示出来。万维网常被当成因特网的同义词，但万维网与因特网有着本质的差别。因特网（Internet）指的是一个硬件的网络，全球的所有电脑通过网络连接后便形成了因特网。而万维网更倾向于一种浏览网页的功能。万维网的内核部分是由三个标准构成的：URL/HTTP/HTMLHTTP、URL、HTML

WWW的内核部分是由三个标准构成的：

URL、HTTP、HTML。WWW与Internet因特网（Internet）指的是一个硬件的网络，全球的所有电脑通过网络连接后便形成了因特网。而万维网更倾向于一种浏览网页的功能。客户端与服务器要进行正常的通信，必须要遵循统一的传输内容和传输协议，否则将无法正常通信。在Web世界里，传输协议使用的是HTtP，传输内容为HTML（超文本标记语言）。有了这两项标准，Web浏览器便知道如何向Web服务器发送请求，而Web服务器也知道如何将请求资源传送到Web浏览器。（1）建立连接：客户端的浏览器向服务端发出建立连接的请求，服务端给出响应就可以建立连接了。（2）发送请求：客户端按照协议的要求通过连接向服务端发送自己的请求。（3）给出应答：服务端按照客户端的要求给出应答，把结果（HTML文件）返回给客户端。（4）关闭连接：客户端接到应答后关闭连接。HTTP

HTTP（HypertextTransferProtocol）超文本传输协议：是浏览器和Web服务器之

间的通信协议。HTTP协议会话过程包括4个步骤建立连接发送请求给出应答关闭连接HTML

HTML(Hypertext

Markup

Language)是种简单、通用的超文本标记语言。Web服务器返回给客户端最常见的内容就是HTML文档。由浏览器解释并显示在用户浏览器窗口中。URL

统一资源定位器URL（Uniform

ResourceLocator），是在Web中定义信息资源位置的标准方法。URL结构：资源类型://存放资源的主机域名和资源文件名/index.htm资源类型主机域名资源文件1.3

WWW的工作流程图1.6动态网图1.5静态的网页工作流程页的工作流程1.4网页、网站和主页Web1Web2

Web3Web服务器放置Web站点的计算机主页一个Web站点的首页Web站点

多个相关的Web页组合Web网页(Web页):浏览器中所看到的画面HTML文件主页：用户访问网站后看到的第一个页面，通常称为首页。文件名一般为index、default、main加上相应的扩展名。1.5网页的基本元素网页图片文字动画链接声音表单1.5网页的基本元素文字组成网页最基本元素。文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快地展现在用户面前。标题、字号、字型图形、图片组成网页的基本元素。在Web页面上使用的图片格式主要有GIF、JPG/JPEG、PNG、BMP等，其中使用最广泛的是JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。表现形式：菜单按钮、背景图形、图片1.5网页的基本元素动画和声音动画是网页上一个重要的表现形式，网页上适当地使用动画有利于表现内容，使网页更生动。网页上支持的动画主要有GIF动画和Flash动画。声音作为多媒体元素的一种，在网页中应用的相对较少，主要是用于网页背景音乐和音乐站点。网页中支持的声音格式有MP3、WMA、RM、MID、AIF等链接链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。1.5网页的基本元素表单作用是接收用户在浏览器端输入的数据并传送到服务器端，完成浏览者和服务器之间的交互。表单是一个容器，表单内一般包含文本框、选择框和提交按钮等内容。1.6网页制作和美化工具网页制作类工具DreamWeaver、FrontPage、HotDog图像制作类工具PhotoShopFireworksCool3DPainter动画制作类工具Flash3D

Max1.7

HTML语言基础HTML语言简介HTML文档的基本结构HTML语言的语法规则编写HTML文档1.HTML语言简介HTML（Hyper

Text

Markup

Language超文本标识语言）,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。一个HTML文件的扩展名为.htm或.htmlHTML文档=网页开始和结束部分(<html>…</html>)文档头(<head>…</head>)文档主体(<body>..</body>)<HTML>和</HTML>:是HTML文件的开始和结束标记。浏览器从<HTML>开始执行到</HTML>结束。<HEAD>和</HEAD>之间的内容：表示文件的头部信息：标题、预定义变量等。<TITLE>和</TITLE>标记：表示网页的标题，中间不能用别的标记。<BODY>和</BODY>标记：网页中所有的内容均包含在其间。其中“HTML”和“BODY”两项是必须要有的。标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。2.HTML文档的基本结构<HTML><HEAD><title>文档标题</title></HEAD><BODY>HTML文档的主体</BODY></HTML>

开始和结束部分(<html>…</html>)文档头(<head>…</head>)文档主体(<body>..</body>)上面的这个例子中包括三个HTML元素<title>元素:<title>认识网页</title>这个<title>元素定义了网页的标题。这个元素拥有一个开始标签<title>，以及一个结束标签</title>。元素内容是：认识网页<head>元素：<head<title>认识网页</title></head><head>元素定义了文档的头部。这个元素拥有一个开始标签<head>，以及一个结束标签</head>。元素内容是另一个HTML

元素（title

元素）。<body>元素：<body>你好,网页!</body><body>元素定义了HTML

文档的主体。这个元素拥有一个开始标签<body>，以及一个结束标签</body>。元素内容是：你好，网页。<html>元素:<html><head<title>认识网页</title></head><body>你好,网页!</body></html><html>元素定义了整个HTML

文档。这个元素拥有一个开始标签<html>，以及一个结束标签</html>。元素内容是<head>元素、<body>元素。HTML元素

HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签到结束标签的所有代码。<html><head><title>认识网页</title></head><body>你好,网页!</body></html>HTML文档的创建手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等

由Web服务器(或称HTTP服务器)一方实时动态地生成。命名规则*.htm或*.html无空格，无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字。不区分大小写首页文件名默认为：index.htm或index.html3.HTML语言的语法规则HTML文件由标记、代码和注释组成。HTML语法的三种表达方式：<标记><标记>对象</标记><标记属性1=”参数1”属性2=”参数2”……>对象</标记>如：<font

size=“7”color=“#0000ff”>中国</font>HTML

是用来描述网页的一种语言。HTML

不是一种编程语言，而是一种标记语言(markup

language)标记语言是一套标记标签(markup

tag)HTML

使用标记标签来描述网页Web

浏览器的作用是读取HTML

文档，并以网页的形式显示出它们。浏览器不会显示HTML

标签，而是使用标签来解释页面的内容<html>与</html>之间的文本描述网页<body>与</body>之间的文本是可见的页面内容<h1>与</h1>之间的文本被显示为标题<p>与</p>之间的文本被显示为段落HTML标签(标记)HTML标签是由尖括号包围的关键词，比如<html>HTML标签通常是成对出现的比如<body>和</body>标签对中的第一个标签是开始标签，第二个标签是结束标签<html><body><h1>My

First

Heading</h1><p>My

first

paragraph.</p></body></html>属性<head>

HTML标签可以拥有属性。属性提供了有关

HTML元素的更多的信息。

属性总是以名称/值对的形式出现，比如：

na<mhtem=l>"value"。属性<t总itl是e>送在杜少H府T之M任L蜀元州</素tit的le>开始标签中规定。</head><body><p

align="center">送杜少府之任蜀州<br/></p><p

align="center">作者：王勃<br/></p><hr

align="center"

width="300"

color="#0066CC"

/><p

align="center">城阙辅三秦，风烟望五津。<br/>与君离别意，同是宦游人。<br/>海内存知己，天涯若比邻。<br/>无为在岐路，儿女共沾巾。</p></body></html>4.编写HTML文档文档头<body>元素及元素属性文字标签属性超级连接图片的控制插入多媒体对象(声音和动画)(1)文档头文档头:<head></head>主要包括：<title>网页文档标题</title>(2)文档主体部分设置文档主体:<body></body>常用属性bgcolor:该属性标志HTML文档的背景颜色。例如：bgcolor="#CCFFCC“background:该属性标志HTML文档的背景颜色或图片。例如：

background=“image/bg.gif"。text:该属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。HTML对颜色的控制HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”<HTML><HEAD><TITLE>六级标题标记</TITLE></HEAD><BODY><h1>第一级标题</h1><h2>第二级标题</h2><h13>第三级标题</h3><h4>第四级标题</h4><h5>第五级标题</h5><h6>第六级标题</h6></BODY></HTML>(3)标题

标题（Heading）是通过<h1>-<h6>等标签进行定义的。

<h1>定义最大的标题。<h6>定义最小的标题。(4)段落设置与换行段落标记<p>和</p>，作用是设置段落。换行标记<br/><p

>城阙辅三秦，风烟望五津。<br/>与君离别意，同是宦游人。<br/>海内存知己，天涯若比邻。<br/>无为在岐路，儿女共沾巾。</p><html><head><title>百度红客吧原创课程-设置段落对齐方式</title></head><body><p

align="left">这一行为左对齐，align属性的值为left。</p><p

align="center">这一行为居中对齐，align属性的值为center。</p><palign="right">这一行为右对齐，align属性的值为right。</p><p

align="justify">这一行为两边对齐，(4)段落设置与换行(续)常用属性–align：对齐属性，left、right、center、justify<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>浏览器忽略了源代码中的排版（省略了多余的空格和换行）(5)文字设置文字标记<font></font>常用属性:color：文字颜色face：字体size:大小<font

color=#>...</font>#=RRGGBB

16进制数码

<font

face=“#,#,...,#”>...</font>#=客户端可获得的字体<font

size=#>

...

</font>

#=1,

+#,

-(5)文字设置文字效果–下划线:<u></u>–加粗:<b></b>–斜体:<i></i><font

color=#>...</font>#=RRGGBB

16进制数码

<font

face=“#,#,...,#”>...</font>#=客户端可获得的字体<font

size=#>

...

</font>

#=1,

+#,

-二、文字标签属性6.

字的效果设置<i>倾斜文本</i><b>粗体文本</b><u>下划线文本</u><s>删除线文本</s><sub>下标</sub><sup>上标</sup>二、文字标签属性7.特殊字符HTML原代码显示结果描述<

>小于号或显示标记大于号或显示标记&&可用于显示其它特殊字符""引号®®已注册©©版权™™商标半个空白位一个空白位

不断行的空白(6)超级链接格式为：<a

href=#>链接文本</a>

#可以为一个网页、地址、文件、邮箱地址等。实例1:<a

href=“”>百度<实/a例>2:<a

href=“mailto:xsyx123456@126.com”>我的邮箱</a>超级链接(实例)实例3:<a

href=“myfile.rar”>下载</a>实例4:<ahref=“/eschool”><img

src="sample.jpg"

></a>1、图片的显示大小<img

src=“bg1.jpg"width=100

height=100>

2、图片的边框<img

src=“bg1.jpg"border="2">3、图片的对齐方式<img

src=“bg1.jpg”

align=“left”

>从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。<html><body><p>来自另一个文件夹的图像：<img

src="/i/ct_netscape.jpg"/></p><p>来自W3S

的图像：<img

src="/i/w3school_logo_white.gif"

/></p></body></html>（7）图片控制<img>常用属性src:指“source”。源属性的值是图像的

URL地址(可以是绝对地址，也可以是相对地址，也可以是一个具体的网址)。<imgsrc=“图片url”>width：定义图片的宽度height：定义图片的高度（7）图片控制<img>图片的显示大小<img

src="tupian.jpg"><img

src="tupian.jpg"

width="30"

height="30"><img

src="tupian.jpg"

width="100"

height="80"><img

src="tupian.jpg"

width="300"

height="300">图片的边框<img

src=“tupian.jpg"><img

src=“tupian.jpg”

border=“4”>3.图片的对齐方式<img

src=“bg1.jpg”

align=“left”

>Top图像的上边缘与同一行上最高元素的上边缘对齐Middle图像的中间与第一行文本的下边缘对齐Bottom图像的下边缘与第一行文本的下边缘对齐Left图像沿网页的左边缘对齐，文字在图像右边换行Right图像沿网页的右边缘对齐，文字在图像左边换行（7）图片控制<img>（8）插入多媒体对象音频<embed

src=#>

#=URL如:<embed

height="100"width="100"src="song.mp3"/>背景音乐<bgsound

src=*>

*=WAV文件的URL<bgsound

loop=*>

*=循环数(8)插入多媒体对象动画:

<embed

src=#>

#=URL注意：使用<embed>标记之前，需要安装插件才可以；

背景音乐:<bgsound

src=#>#=WAV文件的URL<bgsound

loop=#>#=循环数(9)表格基本表格标记<HTML><HEAD><TITLE>表格</TITLE></HEAD><BODY><table>表格内容</table></BODY></HTML>一月二月三月120010001500单元格（用<TD>来表示，每个单元格可以有背景颜色和背景图片）表格（用<Table>来表示，表格可以有背景颜色、背景图片）表格边框每一行可以用<TR>来表示，单元格放在行中，每行可以有很多的单元格。表头（用<TH>来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）(9)表格表格(TABLE)标记需要注意的是：<table>元素、<tr>元素和<td>元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。--定义表格--定义表头--定义表行--定义单元格<table><tr><th>…</th></tr><tr><td>…</td></tr></table>表格属性➢width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者像素。➢height属性：指定表格或某一个表格单元格的高度。单位可以是%或者像素。➢border属性：表格边线粗细➢bgcolor属性：指定表格或某一个单元格的背景颜色。➢

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

《网络实用技术》教程

文档简介

温馨提示

最新文档

评论

《网络实用技术》教程

文档简介

温馨提示

最新文档

评论

相关文档