网页制作简易教程.docx
网页制作简易教程网页制作简易教程 作者：刘瑞祥 网页制作简易教程 一、什么是HTML文件？ 你一定注意过，用浏览器浏览许多网站时，地址栏内文字的最后都有html字样，这就是大多数网页文件的扩展名。也就是说，大部分网页文件是html格式的。所谓HTML，是hype text markup language的缩写，中文含义是超文本链接语言，html就是一种编写网页的规范要求。 注1：所谓扩展名，是文件名的一部分，和主文件名用.分隔开来，比如index.htm的主文件名是index，htm是扩展名。扩展名一般表示文件类型。 注2：在Windows服务器上，文件名不区分大小写，然而有的计算机上，对文件名要求较严，建议扩展名以小写htm为准。htm和html文件其实要求是一样的，后面我将不区分这两种文件。 二、用什么来编写html文件？ 目前可以编写html文件的软件较多，如Microsoft公司出品的属于Office系列的FrontPage，Macromedia公司出品的网页制作三剑客之一的Dream Ware，都是著名的网页制作软件。其实，仅用Windows附件中的记事本就可以编写网页文件。只是需要注意一点，在保存文件的时候，一定在文件类型中选择“所有类型”，然后在文件名的最后添加“.htm”就可以了。 当然，用记事本来编写网页肯定是不方便的，所以才研究出了各种功能更强大的软件，如前所举例。而且要编写图文并茂的网页文件，只靠一种软件是不可能完成的。你必须熟练掌握至少一种图片编辑软件以及美工等方面的知识。 三、编写第一个网页 虽然用记事本编写网页不方便，但为了使同学们掌握基本的html规范，本教程还是以用记事本编写网页为主，下面打开记事本，编写我们的第一个网页，在记事本中输入以下内容： <html> <head><title>我的第一个网页</title></head> 网页制作简易教程 作者：刘瑞祥 <body> <p><font color =#FF0000>Hello</font>，朋友们</p> </body> </html> 写完后按照前面所教的方法存盘，然后双击打开，看到了什么效果？ 下面我来解释上面的内容： 在html文件中，开头和结尾必须是<html>和</html>，中间分两部分，分别是head部分和body部分。在head部分主要是一些文件信息内容，如标题、关键字、编码等等，在body部分则是文件的主要内容。 前面用围起来的部分就是标题，也就是显示在浏览器窗口标题栏的内容，放在<title>和</title>间，<p>和</p> 括起来的内容表示一个段落，<font color =#FF0000>和</font>括起来的部分表示中间的内容是红色文字。 从上面的分析中可以看出，所谓html文件，就是通过各种<>标签进行设计，<>标签一般成对出现，在结束的时候用同名标签加一“/”。标签中可以设置各种属性，格式是“属性名=值”。(在前面的网页源代码中采用了"缩近"的写法是为了层次清晰,并不是必须的) 说明： 在网页中，各种格式都要用<>标签来设计，要通过直接插入空格的办法来调整字间距是不行的，无论你在半角状态下插入多少个空格，都只会显示一个空格。但是有时候必须插入多个空格，或者需要插入一些其他符号，怎么办呢？这时就要用到所谓的“转义字符”，就是用其他字符串来代替你要插入的字符，常见转移字符如下： 大于号 小于号 空格 & 字符 网页制作简易教程 上一讲讲了一些html的基础知识，从这一讲开始将介绍一些常见的html标签及其属性，当然这里是很不完备的。为了简单起见，下面只说开头的<>标签，不说对应的标签了。 本讲将重点介绍关于文字的标签。 一、字体标签： 设置其中的文字，所设置文字从<font>开始，到</font>结束。比较重要的属性有： 1、color：颜色属性，用六位十六进制数字表示颜色，数字前加#号。例如 #FF0000：红色 #00FF00：绿色 #0000FF：蓝色 网页制作简易教程 作者：刘瑞祥 #FFFFFF：白色 #000000：黑色 #FFFF00：黄色 2、size：文字大小属性，取值从1到7。1为最小，7为最大。 3、face：字体名字。 使用举例： <font color=#ff0000>默认字体字号红色</font> 效果：默认字体字号红色 <font size=4>黑体大字</font> 效果：黑体大字 二、字体样式： 1、粗体<b></b> 2、斜体<i></i> 3、下划线<u></u> 4、上角标<sup></sup> 5、下角标<sub></sub> 使用举例： 矢量<b>a</b>+<b>b</b>=3<b>i</b> 效果：矢量a+b=3i x<sup>2</sup>+x=0，则x<sub>1</sub>=0,x<sub>2</sub>=-1 效果略 三、标题： 这里指的是一种文字样式，并非文章标题，标签为<hn></hn>其中n=1,2,.,6。n值越大则字越小。 四、字体设置综合举例： 1、<font color=&2103ca>这是什么颜色啊</font> 2、<h1>这行字不小吧</h1> 3、<b><i>x<i><b> 请你自己先分析一下将出现的效果，再用记事本编写一个含有以上内容的网页，看看效果是不是一样。 网页制作简易教程 作者：刘瑞祥 网页制作简易教程 一、段落标签<P>： 1、align：对齐属性，可取如下值： left：左对齐 right：右对齐 center：中间对齐 justify：两端对齐 2、style：风格属性，可设置行间距、段前间距、段后间距、段前缩进、段后缩进、首行缩进等。使用较为复杂。 使用举例：<p align="center">中间对齐</p> 效果： 中间对齐 二、换行标签<br>： 使用这个标签强制一段进行换行。和<p>不同的是，首先，它没有对应的结束标签，其次，用<br>换行的文字仍然看作是一段。因此中的设置对标签后的内容仍然适用。 标签具有clear属性，可取值为left、right、all 使用举例： <p align="center">中间对齐<br>这一行仍然是中间对齐</p> 效果略。 三、水平线标签<hr>： 插入一条水平线。同样，这个标签也没有对应的标签。 1、width：宽度属性，既可以写成普通数字形式也可以写成百分数形式。写成普通数字代表水平线宽的象素值，写成百分数时当用户调整浏览器大小或者屏幕分辨率时保持相对大小不变。 2、size：尺寸属性，表示高度。 3、color：表示颜色，取值和字体岩石相同。 4、align：对齐属性，可取left、right、center值。 使用举例： 下面有一条水平线<hr color=0000FF>偏蓝色 效果略。 网页制作简易教程 作者：刘瑞祥 网页制作简易教程 网页中如果只是干巴巴的文字，无论怎样设计也没有多大突破余地。图片的作用一方面表现在可以说明文字，另外也可以起到引导用户、突出重点的作用。本讲将介绍在网页中怎样嵌入图片。 一、网页中可以嵌入什么图片？ 不是所有图片都可以在网页中显示的。网页中的图片一般限制在jpg和gif两种格式中。二者主要有如下区别： 格式 可以包括的颜色 有无透明色 可否包括动画 常见用途 jpg 224 无 不可以 大幅照片 gif 256 有 可以 小动画、标志 二、嵌入图片的标签<img>： 这个就是在网页中嵌入图片的标签了，它没有对应的</img>标签。先把图片保存在一个专门的文件夹中。它有一些主要属性如下： 1、src：图片位置属性，也是它最重要的属性，表示图片位置和图片文件名。对于本例，如果网页文件在网站根目录下，则src="image/pic.gif"。如果要引用其他网站的图片，可以用类似"src= 2、border：图片边框属性，可以在图片外设置一个框，取值范围为大于等于0的整数，表示边框宽度的象素值。默认为0。 3、width和height：图片尺寸属性，分别对应图片的宽度和高度的象素值。 4、alt：文字说明属性。有的用户为加快图片显示可能会禁止显示图象，为了使这些用户知道图片的含义，可以设置此属性，用一些文字对突破进行简单的说明。设置值为一串文字。 5、align：图片对齐属性，用来设置图片与文本的绕排方式。这个属性可以取多个值，比较重要的仍然是left、center、right。 6、hspace和vspace：水平间距与垂直间距，分别设置图片与绕排文字距离的象素值。 网页制作简易教程 作者：刘瑞祥 三、举例： 1、<img src="a.gif"> 按默认方式插入同一文件夹下的a.gif图片 2、<img src="b.gif" alt="插入的图片"> 插入上一层文件夹中的b.jpg图片，并且设置了说明文字。 3、<img src="b.gif" border=1> 插入上一层文件夹中的b.jpg图片，并且设置边框为一个象素宽度。 4、<img src="b.gif" width=20 height=10> 插入网页所在文件夹的下一层文件夹中的a.gif图片，并且高度为10象素，宽度为20象素。 本讲只介绍了如何插入图片，至于图片的来源，可以自己利用图象处理软件制作，也可以找一些素材库或者直接从别的网站上得到，要注意的是，获取别人的图片一定要注意不要侵犯版权。 网页制作简易教程 本讲将介绍一些表格的应用。在网页设计中，表格不但具有传统的展示数据的意义，在排版中还具有独特的作用，往往用表格来安排各种元素的位置。而且网页中的表格往往有嵌套，也就是表格的内部还有表格。关于这方面的例子就不详细介绍了。 一、表格标签<table><tr><td>： 利用<table>和对应的</table>表示插入一个表格，<tr>和</tr>表示插入一行，<td><td>表示插入一个单元格。 举例说明：<table><tr><td>第一行第一格</td><td>第一行第二格</td><td>第一行第三格</td></tr<tr><td>第二行第一格</td><td>第二行第二格</td><td>第二行第三格</td></tr></table> 效果： 第一行第一格 第二行第一格 第一行第二格 第二行第二格 第一行第三格 第二行第三格 网页制作简易教程 作者：刘瑞祥 二、标签属性： 1、width和height属性：分别设置宽度和高度。 2、border属性：设置边框宽度的象素值。 3、cellspacing属性：设置单元格间距。 4、bordercolor属性：设置边框颜色，取值和font标签的color属性相同。 5、bgcolor属性：设置背景颜色，取值和font标签的color属性相同。 6、background属性：设置背景图片，取值为背景图片所在的目录及文件名。 7、colspan属性：水平合并若干个单元格，用此属性设置合并的水平单元格的数目。 8、rowspan属性：竖直合并若干个单元格，用此属性设置合并的水平单元格的数目。 9、align属性：设置对齐属性，可以取left、right、center、justify。 三、举例说明： <table=450><tr> <td rowspan="2">左侧格子</td> <td colspan="2">右侧上方格子</td> </tr> <tr> <td>下方中间格></td> <td>下方右侧格</td> </tr></table> 效果： 左侧格子 右侧上方格子 下方中间格 下方右侧格 网页制作简易教程 本教程前面已经有五期了，感觉是不是还差了点什么？对了，缺少html的灵魂链接！没有链接的网页文件就好象是一个个的孤岛。本讲将专门介绍怎样插入超级链接。 网页制作简易教程 作者：刘瑞祥 一、文本链接的标签以及链接类型： 链接的标签为<a>，其最主要的属性为href，用来设置链接的路径。 1、普通的文件链接：直接把href设置为链接路径。如 <a href="abc.htm">点击这里</a> 或者 <a href=" target="_blank">网易</a> 2、链接到一个网页中指定的位置： (1)先在另外一个文件中的某一个特定位置标上“书签”，书签的标注为<a name=书签名>。链接设置为<a href=abc#书签名>单击这里</a> 3、发送E-mail：<a href=mailto:a>来信</a>，要注意的是链接地址上要以mailto:开头。 4、target属性：设置目标框架，一些网页采取了框架结构，还有的希望跳转时新打开一个窗口，可以设置此属性，对于第二种情况，应该设置为“_blank”属性。 二、图形链接： 使用标签<img href=*即可。 网页制作简易教程之结语 到这一讲本教程的教学内容就算结束了，下面我们简单回顾一下我们学了哪些内容： 1、什么是html文件？怎样用记事本编辑一个简单的网页？ 2、我们学了哪些标签？它们都有什么主要的属性？ 3、如何设置字体？ 4、如何设置段落？ 5、怎样嵌入图片？ 6、怎样插入表格？ 7、怎样设置超链接？ 你能不能利用所学知识给你的班级制作几个简单的网页呢？ 提示：要有一个首页，其中要有你班级的基本情况，比如班级人数，班风等等。此外至少有三个网页，内容可以分别为班级荣誉、同学介绍、通讯录等等，最好有几张班级的照片。最主要的是，四个文件之间可以任意跳转，从任何一个网页中都可以跳到其他网页上去。此外，作为更高的要求，网页的风格应该做到多样统一，视觉效果引人。同学们完成网页后可以请计算机老师放到学校内部的网站上去。 网页制作简易教程 作者：刘瑞祥 当然，要想学会全部的html标签几乎是不可能的，也是没有必要的，这里只是简单介绍了其中的一部分，要制作复杂的网页，可以通过专门的网页制作工具来完成，其实那些所谓的网页制作工具，也不过是把写html标签的工作自动完成而已，并没有什么奥妙之处，有兴趣的同学可以自学。
