学习网页制作基础入门教程

《学习网页制作基础入门教程》由会员分享，可在线阅读，更多相关《学习网页制作基础入门教程（14页珍藏版）》请在金锄头文库上搜索。

1、学习网页制作基础入门教程 (1)网页编写http:/ 更新日期： 2005-08-12 15:56 出处：网页教学网 作者：闪电儿学习网页制作基础入门教程目录：学习网页制作基础入门教程用记事本编写代码1.首先打开 “记事本”程序 （方法是开始-程序-附件-记事本） 2.将下面代码复制好粘贴到记事本上，如图-1 所示。（按鼠标右键选择粘贴就可以了！） 这里是标题这里是放置网页内容的文本区域【图-1 说明 】利用鼠标右键的 “粘贴”或者按 CTRL+V 都可以将复制的内容粘贴上的。【图-2 说明 】点击“ 文件 ”里的“保存” 就可以文件保存了。将文件保存了，就大功告成了！ （在硬盘下建立建一个子

2、目录，我们就在 E:盘下建立一个 myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。） 【图-3 说明 】网页文件的扩展名是 htm 或是 html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt 的文本文件，那么浏览器就浏览不出效果来了。 标签解释：1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被以及 。3.在头部里面 中，另有一组标签 。打在 这里的文字会出现在浏览器窗口的最上面兰色部分里，当作一个网页的主题。4.您可能会发现，为什么一直没有提到 这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份

3、HTML 文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的原始码都包起来了。浏览刚做好的网页1.刚刚保存了文件了，我们存的网页文件在 e:mywebmyfirst.htm 。2.在您的浏览器的地址栏内输入 e:mywebmyfirst.htm 或是 file:/e|/mywebmyfirst.htm 吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）3. 如何，看到您的第一个网页了吧！【图-4 说明 】要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件 e:mywebmyfirst.htm 看看，看是否能正确显示无

4、误。您也可以按网页范例【myfirst.htm】，立即看看这篇网页的样子。 制作网页的规则1.一般而言，一个网站的首页名称为 index.htm 或是 index.html 一定要小写，只要一进该网站，浏览器便会自动的找出 index.htm 这个文件，并且自动的去浏览 index.htm 的內容。2.文件大小写一定要注意，没事的话，文件名最好全部用英文小写字母来命名，因为，在我们的电脑中，INDEX.HTM 和 index.htm 是一样的文件，但是上了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就.！3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的

5、那一个多了一个“ / ”，如：。前面的 是开始标签，后面的 是结束标签。大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。学习网页制作基础入门教程 (2)排版标签http:/ 更新日期： 2005-08-12 17:41 出处：网页教学网 作者：闪电儿相关文章：学习网页制作基础入门教程(1)网页编写文字上的分隔标签1. 使用方法 ：强制断行标签 、强制分段标签 2. 标签解说 ：我们在写文章时，有时候在特定的地方会强迫断行（ ），或是在写完某一段的时候便会分段（），制作网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 3. 使用范例 ：原始代码 显示结果 这是一

6、个断行的例子 看出来了吗？网页教学网这是一个断行的例子看出来了吗？网页教学网 这是一个分段的例子 看出来了吗？网页教学网这是一个分段的例子 看出来了吗？网页教学网 文字置左、置中、置右1.使用方法 ：老实说，刚刚我们学习过分段标签 再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：2.标签解说 ：秘诀就在于 ALIGN=对齐位置而已！ALIGN 是分段标签 的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定水平对齐位置，其常见的设定值有三个，也就是置左（ALIGN=LEFT）、置中（ALIGN=CENTER）、置右（ALIGN=RIGHT）。3.

7、 使用范例 ：原始代码 显示结果 文字靠左文字靠左文字置中文字置中文字靠右文字靠右置中标签1. 使用方法 ：这是置中 2. 标签解说 ：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！3. 使用范例 ： 原始代码 显示结果 这是中间 这是中间 向右缩排标签 1. 使用方法 ： 要缩排的文字 2. 标签解说 ：利用 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。3. 使用范例 ：原始代码 显示结果缩排 1 单位缩排 1 单位缩排 2 单位缩排 2 单位保存原始格式标签 1. 使用方法

8、 ： 文字內容 2. 标签解说 ： 利用 这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。 3. 使用范例 ：原始代码 显示结果 文 字 格 式 文 字 格 式 分隔线标签 1. 使用方法 ： 上一段文字內容 下一段文字內容2. 标签解说 ： 利用 这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：3. 使用范例 ： 一般用法 尚未加任何属性。原始代码 普通分隔显示结果 普通分隔线 颜色属性 用法： 原始代码 橘色分隔线显示结果 橘色分隔线 宽度属性用法：，其单位为 px（像素），宽度也可用百分比来作设定，如 50%即意为宽度占屏幕的50%。原始代

9、码 宽度为 300px 的分隔线 显示结果 普通分隔线 厚度属性 用法：原始代码 厚度为 10 的分隔线显示结果 厚度为 10 的分隔线 位置属性用法：，其设定值有三个，也就是置左 ALIGN=LEFT、置中 ALIGN=CENTER、置右 ALIGN=RIGHT原始代码 靠右的分隔线显示结果 靠右的分隔线 阴影属性 用法：，无设定值，只要将 NOSHADE 加入即可，通常会配合颜色设定，效果较佳。原始代码 实心分隔线（无阴影) 显示结果 实心分隔线（无阴影） 学习网页制作基础入门教程 (3)字体标签http:/ 更新日期： 2005-08-13 08:14 出处：网页教学网 作者：闪电儿相关

10、文章：学习网页制作基础入门教程(1)网页编写学习网页制作基础入门教程(2)排版标签标题标签1. 使用方法 ：标题內容2. 标签解释 ：标题的大小一共有六种，两个标签一组，也就是从 到 ， 最大， 最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。3. 使用范例 ：原始碼 呈現結果 标题 1 标题 1标题 2 标题 2标题 3 标题 3标题 4 标题 4标题 5 标题 5标题 6 标题 6设定字体大小标签1. 使用方法 ： 文字內容2. 标签解释 ：标题的大小一共有七种，也就是 （最小）到 （最大），另外，还有一种写法： 文字內容 ，其意思就是说：比预设字大一级。当然也可以 FONT

11、 SIZE=+2（比预设字大二级），或是 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。3. 使用范例 ： 本网页就是 字型变化标签1. 使用方法 ： 文字內容 2. 标签解释 ：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体. 等，此外，也定义了一些现成的格式供编者使用，如强调、原始码.等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上原始码的标签。3. 使用范例 ： 原始代码 显示结果粗体 粗体 斜体 斜体底线 底线上标 上标下标 下标打字机 打字机闪烁 闪烁强调 强调加强 加强范例 范例原始码 原始码参数 参数定义 定义引用 引用所在地址

12、所在地址文字颜色设定1. 使用方法 ：文字颜色2. 标签解释 ： 文字也可以设定颜色！3. 使用范例 ： 原始代码 显示结果红色红色橙色橙色黃色黃色绿色绿色蓝色蓝色紫色紫色黑色黑色文字字型设定1. 使用方法 ： 文字2. 标签解释 ： 网页上也可以使用字型！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是默认字体(默认字体为宋体) 。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显示，不过这并没有关系，看不到特殊的字型时，浏览器仍会以默认字体显示，所以不用怕会一团乱。3. 使用范例 ： 原始代码 显示结果宋体宋体特殊字元1. 使用方法 ：试打 2. 标签解释 ：很多特殊符号是

13、需要特别处理的，比如说 这两个符号若想要显示在网页上是没有办法直接打 & & 学习网页制作基础入门教程 (4)图象标签http:/ 更新日期： 2005-08-13 13:40 出处：网页教学网 作者：闪电儿相关文章：学习网页制作基础入门教程(1)网页编写学习网页制作基础入门教程(2)排版标签学习网页制作基础入门教程(3)字体标签图象标签 1. 使用方法 ：2. 标签解释 ：目前常见的网页图形式有两种就是 GIF 及 JPG 两种格式。GIF 格式只有 256 色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而 JPG 格式的图象是全彩色失真压缩，比较适合一大堆颜色的图片，如照片就较适合用 J

14、PG 格式来表现。3. 使用范例： 基本用法用法：显示图片最基本的方法（就是不加任何属性啦！）其中 test.gif 就是图片的文件名。原始代码 我是网页教学网模特儿！显示结果 我是网页教学网模特儿！长宽设定用法：设图片的大小，其实不用设也可以，但是设置了更好，可以加快浏览速度，因为浏览器就不用在那边花时间算你的图片有多大啦！此外你也可以自己随意设定图片大小。原始代码 显示结果加上说明 用法：鼠标移到图片上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段文字代替，让使用者知道这个未显示出来的图片究竟是干什么用的，web 标准强烈建议大家加上这个说明。原始代码 移到图

15、上看看。显示结果 移到图上看看。图片位置用法：图片位置设定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下 ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文绕图”的效果。原始代码 我往右边靠！显示结果 我往右边靠！原始代码 我往右边靠！显示结果 我往左边靠！原始代码 文字对齐我头顶！显示结果 文字对齐我头顶！原始代码 文字对齐我脚底！显示结果 文字对齐我脚底！原始代码 文字对齐我中间！显示结果 文字对齐我中间！边框设定用法：设定边框大小，通常都设成 0 感觉比较美观！因为內定的框框实在是不怎么漂亮.。尤其在加连接时，设边框简直就是.。原始代码 显示结果左右间距用法：离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。原始代码 左边的字右边的字显示结果 左边的字 右边的字上下间距用法：离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。原始代码 上面的字下面的字显示结果上面的字下面的字网页图象的重要概念1. 关于路径 ：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻找到你的路径去到该有的图片，所以，我们来看看该如何正确使用路径。有些人并不喜欢将网页及图片通通放在