360准入系统:网页制作基础知识
来源:百度文库 编辑:中财网 时间:2024/05/03 05:05:14
第一步:什么是网页?
什么是网页?
你明白什么是网页吗?
你知道网页是怎么在互联网上传播的吗?
如果你不知道的话,没关系。。。
下面,我们来认识一下,到底什么是网页。
新建一个记事本,打开它,把下面的代码复制到记事本里。(先别管下面的鬼画符,想当年我也饱受它之苦,后面给大家讲解)
我也会做网页了
然后选择文件另存为index.htm
双击打开看一下
好了,一个简简单单的网页就完成了,是不是很简单啊?
你是不是还在疑惑:这只是在我自己的电脑打开的呀,要怎么样才可以让别人看到我做的网页呢?
下一步将解决你的疑惑,请看下步:如何让别人看到我的网页?
第二步:如何让别人看到我的网页?
到底要怎么样才可以让别人看到我的网页呢?
网页又是怎么样在互联网上传播的呢?
要想别人看到你所做的网页,就必须得有一个空间,来存放你的网页文件。
下面,教大家申请免费空间。(现在网上有好多的免费空间,大体的申请流程都差不多的)
请紧跟着我的步骤:
http://xinwen365.com/reg1.asp
打开这个网址填写好资料,如下图:
填好资料后,确认提交,就可以看到你的信息了!如下图:
地址:tammychen.xinwen365.com 我申请好了后,就可以用这个来打开我的网页啦,
****.xinwen365.com 星号换成你的用户名
如果你的用户名是123,那么你的网址就是:123.xinwen365.com
下面看一下FTP服务器,如下图:
我申请了后,我的服务器地址是:ftp://tammychen.xinwen365.com
ftp://****.xinwen365.com 星号换成你的用户名
如果你的用户名是123,那么你的FTP地址就是:ftp://123.xinwen365.com
好了,到了这里,网址有了,FTP地址也有了,我们可以上传我们第一步所做的那个网页了:
打开IE浏览器,在地址栏输入你的FTP地址,如下图:
输入好了后,按回车键(Enter),再输入你注册时所填的用户名跟密码,如图:
输入完了后,点击登录,看到了下图的界面,就进入了FTP服务器啦,网页里面的所有文件都在这里面,由你来管理
下面,我们第一步所制作的那个网页复制上去,在提示下图对话框时,选择“是”
就这样,我们的网页就传播到互联网上了,现在可以打开我们申请时所得到的网址,
就可以看到自己做的网页啦(在全球任何地方,打开你的网址,都可以看到你所做的网页)
在IE浏览器输入我们所申请得到的那个网址
我的网址是:tammychen.xinwen365.com
看下我们所制作的网页吧,
也许你现在正在想:为什么别人一打开这个网址,就可以看到我做的网页呢?
现在不明白没关系,请看下一步:网页是如何传播的?
看完了就清楚了
注:如果你的网页文件很多的话,用上面的网页上传方法,速度是很慢的,所以我们就要用到FTP上传软件了,下面是FTP下载地址跟使用方法,大家如果有兴趣可以先下载来看下,不看也没关系,在后面的教程里我会讲到FTP软件的使用的。
第三步:网页是如何传播的?
在上一步中,相信大家都按照上面的步骤做了.但是,浏览器是如何识别网页的呢?是通过什么传输给对方看的呢?
你明白了吗?...这一步,我们就讲一下网页是怎么样在互联网上传播的?
先理解几个概念:
一:什么是IP地址?
互联网上,这么多主机在上网,在冲浪,如何来区分这些主机的身份呢?
这个就要用到IP地址了,IP地址在互联网中是很重要的,如某一台主机的IP地址为:219.129.216.188
所谓IP地址就是给每个连接在Internet上的主机分配一个在全世界范围唯一的32bit地址。IP地址的结构使我们可以在Internet上很方便地寻址。IP地址通常用更直观的、以圆点分隔号的4个十进制数字表示,每一个数字对应于8个二进制的比特串
二:什么是域名?
世界上这么多的IP地址,又全是数字什么的,我们怎么记得住啊??
呵呵,这你就放心吧,还有域名呢.。
比如,xu5.cn这个就是我的域名,它跟219.129.216.188这个IP已经绑定了
Internet 域名是Internet网络上的一个服务器或一个网络系统的名字,在全世界,没有重复的域名。域名的形式是以若干个英文字母、数字、中横线“-”组成,由“.”分隔成几部分,如 3j2.net是一个域名。从社会科学的角度看,域名已成为了Internet文化的组成部分。从商界的角度看,域名已被誉为“企业的网上商标”。只要在浏览器软件中键入您的网址,全世界接入Internet网的人都能够准确无误的访问到您主页的内容。
三:什么是URL和HTTP协议?
URL,就是我们常说的网址
当我们在浏览器输入http://www.xu5.cn/default.asp这个URL时,就可以看到我的主页了
我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator,统一资源定位符)。就像每家每户都有一个门牌地址一样,每个网页也都有一个Internet地址。当你在浏览器的地址框中输入一个URL或是单击一个超级链接时,URL就确定了要浏览的地址。
浏览器通过超文本传输协议(HTTP),将Web服务器上站点的网页代码提取出来,并翻译成漂亮的网页。因此,在我们认识HTTP之前,有必要先弄清楚URL的组成,例如:http://www.xu5.cn/post/2.html。它的含义如下:
1.http://:代表超文本传输协议,通知xu5.cn服务器显示Web页,通常不用输入;
2.www:代表一个Web(万维网)服务器;
3.xu5.cn/:这是装有网页的服务器的域名,或站点服务器的名称;
4.post/:为该服务器上的子目录,就好像我们的文件夹;
5.2.html:index.htm是文件夹中的一个HTML文件(网页)。
HTTP协议(Hypertext Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等。这就是你为什么在浏览器中看到的网页地址都是以“http://”开头的原因。
当我们在浏览器输入http://www.xu5.cn这网址时,因为它跟219.129.216.188这个IP绑定了,所以就会自动解析到219.129.216.188这个IP上,向219.129.216.188这台服务器发送请求读取网页文件的指令,服务器在接受了指令后,利用HTTP协议把文件里的内容传回浏览器,这样我们就可以看到服务器上的HTML文件|(网页)了 。。。
现在我们明白了网页的原理!可是,你明白为什么网上的那些网页,有图形、又有动画、又有声音吗?
你想不想做个有图形,有动画,又有声音的漂亮网页,让你的亲朋好友看看呢?
想的话,接着下一步:什么是HTML?
第四步:什么是HTML?
上一步,我们理解了网页的原理,但要真真正正的学会网页制作
我们还要学会网页制作中,最基础的一种语言,它就是HTML语言了
那HTML语言到底是什么呢?(可不是某个国家的语言,不要想歪了哦)
不明白没关系,我们来理解一下!
HTML语言:
HTML语言是英文Hyperlink Text Markup Language的缩写,意为超文本标记语言。它是一种描述文档结构的语言,而不能描述实际的表现形式。HTML语言使用描述性的标记符(称为标签)来指明文档的不同内容。标签是区分文本各个组成部分的分界符,用来把HTML文档划分成不同的逻辑部分(或结构),如段落、标题和表格等。标签描述了文档的结构,它向浏览器提供该文档的格式化信息,以传送文档的外观特征。
看了上面的这么多术语,也许你头都大了。浏览器向服务器发送请求后,服务器将这些乱七八糟的代码发给浏览器,然后浏览器对这些代码进行解释,这样我们就看到各种各样的图片,动画,听到各种各样的声音了。。。
其实,HTML语言的作用只是在网页制作中,我们用来标记,某些文字,图片,动画,声音,怎么样显示而已!
还记得我们在第一步中所做的实例吗?
下面就对第一步的那段代码进行讲解:
我也会做网页了
这是HTML语言中的基本框架,各个标记的作用如下:
html标记:
HTML标记 是网页的第一个标记符,是最后一个标记符。网页的所有内容,标记符都必须得在这两个标记符中间!
head首部标记:
title标题标记:
title标记是head首部标记中的一部分
在首部标记符中,最基本、最常用的是标题标记符
如:
这个就是把标题定义为:这就是网页啦
打开第一步中的那个网页就可以看到效果了(在head首部标记中,还有很多像title这样的标记,它们都是放在与之间的,为了避免大家晕头转向,暂时先不讲其它的)
body标记:
body标记在html语言中是很重要的,它是html语言的主体部分,我们打开网页所看到的文字,动画,图像,都必须得放在body标记里面。。。
这一步就讲到这里。。告诉你一个秘密,单单靠这些知识,就想做出漂亮的网页,那是不可能的哦!!!
在第一步的实例中,大家看到的“我也会做网页了”
这几个字,也太普通了吧。得给它变变脸,改个模样才行。。。
怎么变?怎么改呢?
请看下一步:如何改变字体的模样?
第五步:如何改变字体的模样?
上一步中,我们讲解了HTML语言的基本框架。。。知道了文字,动画,图像,这些标记都得放在body标记中
这一步,我们来学习字体的一些标记,使我们的网页中的字体变得更加好看点!
究竟如何使我们网页中的字体变模样呢?看下去就知道了。。。
看下面的代码,在body标记中,
“我也会做网页了”这几个字的两边,是没有标记的,只要在字体的两边,加上我们要使字体变什么模样的标记就可以了
代码一:
我也会做网页了
如果要使字体变为粗体,我们可以这样写
代码二:
我也会做网页了
看到代码二跟代码一有什么不同吗?
呵呵,代码二里“我也会做网页了”这几个字两边,多了一个粗体标记
只要把字体放里这标记中间,都会变成粗体,大家可以试一下```(应该还没有忘记第一步中的,新建记事本,再另存为index.htm吧)
要实现其它的效果也一样。。。请看请仔细看看这个:各种字体效果标记
看完了吧,但那里的只是一种标记的效果, 下面我们来把`指定“字体大小”的标记和“指定字体”的标记来组合使用
请注意看语法结构:
我也 会做 网页了
我也 会做 网页了
也许你还不明白是怎么回事,没关系,我们来举个更简单的例子
这是粗体 这是粗体字,大家应该知道,但我要再加上一种效果要怎么做呢?
其实这也很简单的,把你要加的标记,包含着原来的标记跟字体就可以了,如下:
这是粗体跟斜体
下面,我们再来个复杂点的分别显示两种不同的模样
欢迎光临
看懂了没有,其实很简单的,只要文字,包含在某个标记里,就会显示某种效果,
看“欢迎”这两字,同时包含在跟中,所以就同时显示粗体跟斜体,
再来看看“光临”同时包含在跟之间,所以同时显示标题3跟斜体效果
字体颜色
指定颜色 我也会做网页了
- #可以是rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua- 如:
我也会做网页了 显示的效果是:我也会做网页了- ffoo40就是一个16进制数,不同的数可以显示不同的颜色,其它的可以看看这个:html颜色代码表
这一步的教程讲完了,大家可能觉得那么多标记要记忆,
其实大家只要记住那些常用的就可以了。。。。
下一步,我们来讲解,如何做文字链接?
这几天都没有更新文章,让大家久等了。。。第六步:如何给文字做链接?-------转自:xinmo66的空间
唉,最近很忙,趁今天休假,抽出点时间,写第六步!
好了,回顾上一步,我们讲到了文字的一些效果,今天,我们继续来讲:如何给文字做链接?
这一步,我暂时不讲路径的知识,因为那相对于你们来说,太难理解了。。这步只讲如何做链接,路径的知识后面再讲。
按照前几步学习过的知识,我们来建两个文件,一个命名为:index.htm 另一个命名为:index2.htm
在index.htm文件的BODY标记中输入这段代码:链接到index2.htm
在index2.htm文件的BODY标记中输入这段代码:链接到index.htm
完成了吧,那就打开其中的一个文件,点击那显示的文字,看看是什么效果。。。
呵呵,是不是点击了就链接到其它页面去了好了,完成实验,我们就来理解一下这是怎么回事,看代码:
链接到index2.htm看得明白吗?呵呵,其实很简单,跟我们上面学习的都差不多的,只是它多了一段代码,知道是多了哪一段吗?
如果把里的href = "index2.htm删除了,
那么,代码就成了:链接到index2
呵呵,这段代码跟我们上一步学习的完成一样,只不过是标记换了
链接标记就是
但是,单单一个链接标记是不行的呀,还要指定链接到哪个页面呢,所以:href = "index2.htm就出来了
<标记 属性="值">内容标记>
链接到index2.htm
就是标记
href就是标记的一个属性了,作用是指定链接到哪里去。这个属性的值就是index2.htm
那么就是链接到index2.htm这个文件了。。不知道大家有没有注意到,这只是在同一个页面打开的链接,我们平时上网,打开网页时,有的网页是新建一个窗口打开链接的呀,这个又要怎么样才可以实现呢?
好了,这一步的课程就算完成了。。
其实这个更简单,我先说一下:
<标记 属性="值">内容标记>
链接到index2.htm
这段代码的标记只有一个属性href
我要告诉大家的是,一个标记可以有多个属性的,如:
<标记 属性="值" 属性2="值2" 属性3="值3">内容标记>
结构就是这样了,每个属性之间,用空格分开就可以了。。
如果要新建一个窗口打开网页,我们可以加入target属性,如:
链接到index2.htm
大家可以在原来的代码上加上 target="_blank" 这段,再来打开试试
target属性的作用是指定在哪里打开链接,它的值就是_blank 只要指定这个值,就会新建窗口打开了,当然,还有其它的值,看下面:
_blank,在新窗口显示目标网页 (我们用的就是这个)
_self,在当前窗口显示目标网页
_parent,框架网页中当前整个窗口位置显示目标网页
_top,框架网页中在上部窗口中显示目标网页
但是,一个页面不可能单单只有文字吧,那样也太单调了。。。
呵呵,没关系,看完下一步,你的网页就....... 第七步:如何在网页中插入图片?
上一步我们讲到了如何给文字做链接,这一步,我们来学习一下:如何在网页中插入图片?
经过上一步的学习,了解到一个标记可以有多个属性,那么,我们来学习这一步就容易多了。
先来看下代码:
明白是什么意思吗?呵呵,要在网页中插入图片,这时我们就要用到img标记了。
先来看看第一个属性src,src属性是指定图片的路径的。。。
src="images.jpg" 这个的意思就是:显示images.jpg这个图片
第二个属性width,指定图片的宽度,单位默认为像素
width="300" 这个指定了图片的宽度为300像素
第三个属性height,指定图片的高度,单位默认为像素
height="225" 这个指定了图片的高度为225像素
除了这几个属性外,img标记的属性还有很多,我这就不一一解释了,还是那句老话:要学会搜索。有需要自己上www.google.com或www.baidu.com搜索吧。
这步就这样讲完了,呵呵``是不是很简单。。。下一步,我们来讲一下,如何给图片做链接?由于我们在上一步中学过如何给文字做链接,所以,在学习下一步如何给图片做链接时,将是易如反掌。。。
因为两者都是大同小异的,想知道两者的区别在哪里,请看下一步:如何给图片做链接?
第八步:如何给图片做链接?
这步来讲讲如何给图片做链接,不知道大家还记不记得第六步的例子,给文字做链接。。。
其实图片链接,可以说是第六步跟第七步的结合,只要把显示文字的换成显示图片的代码就可以了
下面我们来看一下代码:
链接到index2.htm
这是第六步的文字链接代码。。。显示的文字是“链接到index2.htm”
我们只要把“链接到index2.htm”这段换成第七步的那段代码,就成了图片链接了,看代码:
文字链接跟图片链接所不同的只是:
原来显示文字的地方,我们用来显示图片了。。。
就这样简单```
除了文字链接跟图片链接外,还有锚链接,邮件链接等等~~`我就不一一讲了```想了解的可以上网查资料```不明的也可以问我````
学习到这里,不知道大家有没有注意到,所有显示的图片,文字都是不成形不成样的```
呵呵,放心吧,接下来我们会讲到页面的排版标记的````
下步我们来学习一下页面的知识:如何为网页添加背景?第九步:如何为网页添加背景?
真是不好意思,这么久才更新第九步,呵,不多说了,看正文
这步我们来讲一下如何添加网页背景,几乎所有的网页中,都有背景,这个在网页制作中,是最常用到的!
要添加网页的背景,得用CSS样式来完成了,看代码:
下面对代码进行解释:
body 这是一个标签,body就是定义body标记里面的内容,标签可以有多个属性,属性跟值都 必须包含在{ }大括号之间
background-image: url(bj.jpg); 背景图片属性,bj.jpg是图片的路径
background-repeat: no-repeat; 这个标记是用来设置背景图片要怎显示 ,红色部分是值,值分别为:no-repeat为不重复 repeat为重复 repeat-x为横向重复 repeat-y为纵向重复
background-color: #333333; 这个是设置背景色的,红色部分是颜色代码
最后讲一下,在CSS样式外面加上这个HTML注释的作用是:如果CSS样式不正确,可以防止错误显示
这步就讲到这,单单有了图片还不行,再来点美妙的音乐就太好了,呵呵```,请看下步:如何添加背景音乐?第十步:如何添加背景音乐?
添加背景音乐,其实很简单,看下面代码:
只要把这段代码,放在head标记之间,就可以播放背景音乐了
用bgsound标记来实现背景音乐的播放
src属性的值就是背景音乐的地址,可以是绝对路径,可以是相对路径
loop属性是设置播放次数的```loop=3 这样播放三次就停止播放了``如果要无限循环播放,可以把loop的值设置 为-1
我这里只是讲了两个主要的属性,bgsound标记还有其它属性的,我就不讲了有兴趣知道的同志们,可以自己上网搜索.....(插入背景的方法不仅仅是这个,这个是最简单的)
好了,要说到排版,下步才是真真正正的排版:什么是表格?
第十一步:什么是表格?
表格,在网页布局中最常用的,制作网页的第一步就是页面布局,所以,我们有必要学习表格的知识!
现在,我们来讲一下表格的结构以及相关的属性!
下面看代码一:
这里输入表格的内容 |
上面是一个一行一列的表格。。
表示表格中的列。。。 那么,要写一个一行三列的表格,又该怎么样呢?
表格的结构是这样的,
|