《学习网页制作基础入门教程.doc》由会员分享，可在线阅读，更多相关《学习网页制作基础入门教程.doc（29页珍藏版）》请在金锄头文库上搜索。
1、 学习网页制作基础入门教程(1)网页编写http:/ 更新日期：2005-08-12 15:56 出处：网页教学网 作者：闪电儿学习网页制作基础入门教程目录：学习网页制作基础入门教程用记事本编写代码1.首先打开“记事本”程序（方法是开始-程序-附件-记事本） 2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！） 这里是标题 这里是放置网页内容的文本区域【图-1说明】利用鼠标右键的“粘贴”或者按 CTRL+V 都可以将复制的内容粘贴上的。【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！ （在硬盘下建立建一个子目录，我们就在E:盘下
2、建立一个myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。） 【图-3说明】网页文件的扩展名是htm或是html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt的文本文件，那么浏览器就浏览不出效果来了。 标签解释：1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被包起来的语法）集合起来的，透过浏览器的整理，就便成了美丽漂亮的网页了。2.简单而言，通常一份完整的网页包含了二个部分：头部（HEAD）、文件主体（BODY）。也就是大家在上面所看到的 以及 。3.在头部里面 中，另有一组标签 。打在 这里的文字会出现在浏览器窗口
3、的最上面兰色部分里，当作一个网页的主题。4.您可能会发现，为什么一直没有提到 这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份 HTML 文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的原始码都包起来了。浏览刚做好的网页1.刚刚保存了文件了，我们存的网页文件在 e:mywebmyfirst.htm 。2.在您的浏览器的地址栏内输入 e:mywebmyfirst.htm 或是 file:/e|/mywebmyfirst.htm 吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）3. 如何，看到您的第一个网页了吧！【图-4说明】
4、要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件 e:mywebmyfirst.htm 看看，看是否能正确显示无误。您也可以按网页范例【myfirst.htm】，立即看看这篇网页的样子。 制作网页的规则1.一般而言，一个网站的首页名称为 index.htm 或是 index.html 一定要小写，只要一进该网站，浏览器便会自动的找出 index.htm 这个文件，并且自动的去浏览 index.htm 的內容。2.文件大小写一定要注意，没事的话，文件名最好全部用英文小写字母来命名，因为，在我们的电脑中，INDEX.HTM 和 index.htm 是一样的文件，但是上
5、了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就.！3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的那一个多了一个“ / ”，如：。前面的 是开始标签，后面的 是结束标签。大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。学习网页制作基础入门教程(2)排版标签http:/ 更新日期：2005-08-12 17:41 出处：网页教学网 作者：闪电儿相关文章：学习网页制作基础入门教程(1)网页编写文字上的分隔标签1. 使用方法：强制断行标签 、强制分段标签2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（ ），或是在写完某一段的时候
6、便会分段（），制作网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 3. 使用范例：原始代码显示结果这是一个断行的例子 看出来了吗？网页教学网这是一个断行的例子看出来了吗？网页教学网 这是一个分段的例子 看出来了吗？网页教学网这是一个分段的例子 看出来了吗？网页教学网 文字置左、置中、置右1.使用方法：老实说，刚刚我们学习过分段标签 再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：2.标签解说：秘诀就在于ALIGN=对齐位置而已！ALIGN是分段标签 的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定水平对齐位置，其常见的设
7、定值有三个，也就是置左（ALIGN=LEFT）、置中（ALIGN=CENTER）、置右（ALIGN=RIGHT）。3. 使用范例：原始代码显示结果 文字靠左 文字靠左文字置中 文字置中文字靠右 文字靠右置中标签1. 使用方法：这是置中 2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！3. 使用范例： 原始代码显示结果这是中间这是中间向右缩排标签 1. 使用方法： 要缩排的文字 2. 标签解说：利用 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。3. 使用范例：原始代
8、码显示结果缩排1单位缩排1单位缩排2单位缩排2单位保存原始格式标签 1. 使用方法： 文字內容 2. 标签解说： 利用 这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。 3. 使用范例：原始代码显示结果 文 字 格 式 文 字 格 式 分隔线标签 1. 使用方法： 上一段文字內容 下一段文字內容2. 标签解说： 利用 这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：3. 使用范例： 一般用法尚未加任何属性。原始代码普通分隔显示结果普通分隔线 颜色属性用法： 原始代码橘色分隔线显示结果橘色分隔线 宽度属性用法：，其单位为px（像素），宽度也可用百分
9、比来作设定，如50%即意为宽度占屏幕的50%。原始代码宽度为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 SIZE=+2（比预设字大二级），或是
11、 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。3. 使用范例： 本网页就是 字型变化标签1. 使用方法：文字內容2. 标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体.等，此外，也定义了一些现成的格式供编者使用，如强调、原始码.等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上原始码的标签。3. 使用范例： 原始代码显示结果粗体粗体斜体斜体底线底线上标上标下标下标打字机打字机闪烁闪烁强调强调加强加强范例范例原始码原始码参数参数定义定义引用引用所在地址所在地址文字颜色设定1. 使用方法：文字颜色2. 标签解释： 文字也可以设定颜色！3. 使用范例： 原
