《学习网页制作基础入门教程图文》由会员分享，可在线阅读，更多相关《学习网页制作基础入门教程图文（50页珍藏版）》请在金锄头文库上搜索。
1、学习网页制作基础入门教程目 录1网页编写31.1用记事本编写代码31.2标签解释：51.3浏览刚做好的网页61.4制作网页的规则72排版标签72.1文字上的分隔标签72.2文字置左、置中、置右82.3置中标签82.4向右缩排标签92.5保存原始格式标签92.6分隔线标签103字体标签133.1标题标签133.2设定字体大小标签143.3字型变化标签143.4文字颜色设定153.5文字字型设定163.6特殊字元164图象标签184.1图象标签184.2网页图象的重要概念205背景标签225.1背景标签225.2网页内容、连接文字颜色设定236连接标签266.1网页内部的连接266.2网页外部的连
2、接266.3连接标签的参数277表格标签297.1表格单元格对齐位置设定29合并表格单元格307.2表格单元格对齐位置设定317.3表格背景、底色设定327.4表格边框线的设定347.5表格间距设定358框架标签368.1框架概念368.2开始分割368.3其他标签参数说明388.4其他标签409序列标签419.1无序标签419.2有序标签4210表单标签4410.1文字输入列4410.2单选表单4510.3复选表单4510.4密码表单4610.5送出按钮4710.6按钮元件4810.7大量文字输入元件4910.8下拉式选单491网页编写1.1用记事本编写代码1.首先打开“记事本”程序（方法是
3、开始-程序-附件-记事本） 2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！） 这里是标题 这里是放置网页内容的文本区域【图-1说明】利用鼠标右键的“粘贴”或者按 CTRL+V 都可以将复制的内容粘贴上的。【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！ （在硬盘下建立建一个子目录，我们就在E:盘下建立一个myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。） 【图-3说明】网页文件的扩展名是htm或是html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt的文本文件，那么浏览器就浏览不出
4、效果来了。 1.2标签解释：1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被包起来的语法）集合起来的，透过浏览器的整理，就便成了美丽漂亮的网页了。2.简单而言，通常一份完整的网页包含了二个部分：头部（HEAD）、文件主体（BODY）。也就是大家在上面所看到的 以及 。3.在头部里面 中，另有一组标签 。打在 这里的文字会出现在浏览器窗口的最上面兰色部分里，当作一个网页的主题。4.您可能会发现，为什么一直没有提到 这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份 HTML 文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的
5、原始码都包起来了。1.3浏览刚做好的网页1.刚刚保存了文件了，我们存的网页文件在 e:mywebmyfirst.htm 。2.在您的浏览器的地址栏内输入 e:mywebmyfirst.htm 或是 file:/e|/mywebmyfirst.htm 吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）3. 如何，看到您的第一个网页了吧！【图-4说明】要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件 e:mywebmyfirst.htm 看看，看是否能正确显示无误。您也可以按网页范例【myfirst.htm】，立即看看这篇网页的样子。 1
6、.4制作网页的规则1.一般而言，一个网站的首页名称为 index.htm 或是 index.html 一定要小写，只要一进该网站，浏览器便会自动的找出 index.htm 这个文件，并且自动的去浏览 index.htm 的內容。2.文件大小写一定要注意，没事的话，文件名最好全部用英文小写字母来命名，因为，在我们的电脑中，INDEX.HTM 和 index.htm 是一样的文件，但是上了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就.！3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的那一个多了一个“ / ”，如：。前面的 是开始标签，后面的 是结束标签。
7、大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。2排版标签2.1文字上的分隔标签1. 使用方法：强制断行标签 、强制分段标签2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（ ），或是在写完某一段的时候便会分段（），制作网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 3. 使用范例：原始代码显示结果这是一个断行的例子 看出来了吗？网页教学网这是一个断行的例子看出来了吗？网页教学网 这是一个分段的例子 看出来了吗？网页教学网这是一个分段的例子 看出来了吗？网页教学网 2.2文字置左、置中、置右1.使用方法：老实说，刚刚我们学习过分段标签 再加上一些
8、简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：2.标签解说：秘诀就在于ALIGN=对齐位置而已！ALIGN是分段标签 的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定水平对齐位置，其常见的设定值有三个，也就是置左（ALIGN=LEFT）、置中（ALIGN=CENTER）、置右（ALIGN=RIGHT）。3. 使用范例：原始代码显示结果 文字靠左 文字靠左文字置中 文字置中文字靠右 文字靠右2.3置中标签1. 使用方法：这是置中 2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！3. 使用范例：
9、 原始代码显示结果这是中间这是中间2.4向右缩排标签 1. 使用方法： 要缩排的文字 2. 标签解说：利用 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。3. 使用范例：原始代码显示结果缩排1单位缩排1单位缩排2单位缩排2单位2.5保存原始格式标签 1. 使用方法： 文字內容 2. 标签解说： 利用 这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。 3. 使用范例：原始代码显示结果 文 字 格 式 文 字 格 式 2.6分隔线标签 1. 使用方法： 上一段文字內容 下一段文字內容2. 标签
10、解说： 利用 这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：3. 使用范例： 一般用法尚未加任何属性。原始代码普通分隔显示结果普通分隔线 颜色属性用法： 原始代码橘色分隔线显示结果橘色分隔线 宽度属性用法：，其单位为px（像素），宽度也可用百分比来作设定，如50%即意为宽度占屏幕的50%。原始代码宽度为300px的分隔线 显示结果普通分隔线 厚度属性用法：原始代码厚度为10 的分隔线显示结果厚度为10 的分隔线 位置属性用法：，其设定值有三个，也就是置左ALIGN=LEFT、置中ALIGN=CENTER、置右ALIGN=RIGHT原始代码靠右的分隔线显示结果靠右的分隔线 阴影属性
11、用法：，无设定值，只要将 NOSHADE 加入即可，通常会配合颜色设定，效果较佳。原始代码实心分隔线（无阴影) 显示结果实心分隔线（无阴影） 3字体标签3.1标题标签1. 使用方法：标题內容2. 标签解释：标题的大小一共有六种，两个标签一组，也就是从 到 ， 最大，最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。3. 使用范例：原始碼呈現結果 标题1标题1标题2标题2标题3标题3标题4标题4标题5标题5标题6标题63.2设定字体大小标签1. 使用方法：文字內容2. 标签解释：标题的大小一共有七种，也就是（最小）到 （最大），另外，还有一种写法： 文字內容 ，其意思就是说：比预设字大一级。当然也可以 FONT SIZE=+2（比预设字大二级），或是 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。3. 使用范例： 本网页就是 3.3字型变化标签1. 使用方法：文字內容2. 标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体.等，此外，也定义了一些现成的格式供编者使用，如强调、原始码.等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上原
