网页编程入门完整版.docx
《网页编程入门完整版.docx》由会员分享，可在线阅读，更多相关《网页编程入门完整版.docx（17页珍藏版）》请在冰豆网上搜索。
网页编程入门完整版
网页编程入门
（一）
作者：
吴刘平 文章来源：
作者原创 更新时间：
2006-6-10
网络技术飞速发展，互联网正在由以前所说的“走近千家万户”向“走进亿家亿户……”。
网络信息主要来自各种形形色色的网站，不少网络发烧友开始追逐着建设网站的热潮。
网站的信息必须通过网页输出信息，于是要想通过网站发布信息，必须首先学会制作网页。
谈到制作网页，可用的设计工具就太多太多了，有大家熟悉的Dreamveaver、FrontPage、Flash……不同的工具有不同的特点。
总体上来说，网页发布的信息主要通过以下媒体实现：
文字、图片、动画、音频和视频，当然更多的是这几种方式的综合体，也就是我们常说的多媒体了（我以前听过一位领导说多媒体是会议厅里使用的电脑和投影设备，这是不对的哟，呵呵）。
说了这么一大堆不相干的，可能有些朋友等不急了，不是说编程吗？
怎么尽是些不上叉的，别急，马上就来了……
为了能够对所发布的信息进行自由的控制，就需要通过编程来实现了，通过编程，我们可以实现对发布的信息进行动态控制和管理，如果学会了网页编程，我们几乎可以用任何文字编程软件都可以制网页了。
网页编程的道路漫长，千里之寻始于足下，就让我们从html代码开始吧（别说你讨厌代码哈，要是这样的话，你还是不要学习编程的好，因为编程从某种意义上来说，就是编写代码）。
下面就以大家熟悉的FrontPage为例来学习以下html编程吧！
先启动FrontPage（如果你的电脑里没有，那么就重新找Office光盘来安装），然后就会进入网页编辑制作界面（上部是菜单、工具栏，左边是视图区，在视图区的右边就是我们设计的主要场所了），我们会看到new_page1.htm标题（是FrontPage默认的网页文件名），在设计区的下面，有三张索引卡可供选择，默认为“普通”，另外还有“html”和“预览”两张。
点击一下"html"你就会看到你所创建网页的代码了，大致代码如下所示：
NewPage1
尽管是空的页面，但在代码上却有不少内容了。
下面解释一下html卡中所显示的代码的意思：
是网页的html代码的开始，在最后，有一个与它相对应，表示代码的结束位置，网页的所有内容都出现在这两个标记（我们把用<>包含起来的这部分称之为标记或标签）之间。
是网页头标记，也有一个与之相对应，在和之间，有许多定义，
这个标志定义的是网页的元信息（关于元信息等大家对网页有更多认识到再说，有兴趣的朋友也可以先在网上查找相关的介绍），这个我们暂时不管它，下面一个是和，这是网页标题的标记，从上面的代码我们可以看到，默认的标题为NewPage1,要是我们想给页面取一个名称的话，我们就把要改的名称写到和之间。
和是网页正文的标记，基本上，网页所显示的内容全部都包含在这两个标记之间。现在我们看到的这两个标记之间什么也没有，就代表了网页是空的，……
我们把FrontPage文件保存（存到桌面吧，这样好打开），文件名取为：
myfirstpage.htm,在后最小化FrontPage，从桌面上双击myfirstpage.htm，在浏览器中，我们就可以看到刚才的网页了（是空白的），注意打开网页的最左上方显示的是什么……（是我们刚才所介绍的
标签中的那个——NewPage1）。 从上面可以看出，在网页中的代码就就象我们写的文章一样，包括两大部分：
第一是头部（
和之间的那部分），第二是正文（之间的那部分）。好了，我们总算是对一个页面的总体结构搞清楚了，下面我们试着通过编程的方式修改网页的标题：
点击任务标中的FrontPage任务，这时FrontPage变成最大化，回到我们原来的操作界面，在FrontPage中，点击html选项卡，在把
和之的内容改成“我的第一个编程页面”，然后保存，最小化FrontPage，刷新一下我们刚才打现在桌面上的网页（别告诉我你还不会手动刷新网页哦）。 再看一下浏览器的最左上方所显示的网页标题……（应该变成了“我的第一个编程页面”）。
现在关闭FrontPage，打开附件中的记事本，从“文件”菜单中选择“打开……”，指定到桌面位置，然后把打开文件对话框中的“文件类型”改成“*.*”，我们就会看到对话框里出现我们的网页文件（myfirstpage.htm）了，双击打开它，这时，在我们的记事本中就会有我们在FrontPage中所看到的html代码了，修改
之间的内容为“这个标题被改了”，然后保存，关闭记事本，再刷新一下网页，看一下浏览器左上角的网页标题，是否变化了，……（应该变成了“这个标题被改了”）。 怎么样，好玩吧，通过编程可以对网页进行随心所欲的控制，关键是我们要知道html代码中各个标签的意义和用途。
我们可以在浏览网页时，在浏览器的“查看->源文件”中查看网页的html代码，一般会有很多，初学者看了一定会头发晕，所以我们要从最简单的代码开始，慢慢地积累，……
好了，这次就学这么多吧，再讲下去，有些朋友可能就会没兴趣学了（待续）
网页编程入门
（二）
作者：
吴刘平 文章来源：
作者原创 更新时间：
2006-6-11
上一篇我给大家介绍了网页编程最基本的html知识，但是到目前为止，我们仅学会了通过编程的方式修改网页的标题，但是我想大家有了前面的基础，往后学习就会更容易了，下面还是请大家启动FrontPage程序，让我们继续学习……
对于初学者，大都分都是对网页的代码标签不熟悉，不知道每个标签都是做什么用的，要是我象上次那样把每个标签给大家讲解（如表示XXXX）的话，大家可能会感觉到很枯燥，下面教大学一个学习html代码的简单而又实用的方法。
我们在启动了FrontPage后（这时编辑方式默认为“普通”，不要急着去点击“html”卡），然后我们在网页中输入“我爱网页编程”几个字，然后我们再点击网页底部的"html"选项卡打开该网页的html源代码，这里大家可以看到以下的代码：
NewPage1我爱网页编程
现在大家可以看到了在
之间多了“我爱网页编程
”的代码，这里的标签指的是段落，我们每在网页里输入一段文字，都会被加到这两个标签之间，有人也许会感到很讨厌这个标签，这可是网页的代码哦，如果不讨厌就不会复杂了，不复杂会的人就多了，会的人多了，……编程可就是有点让人讨厌的哟！ 我们再点击网页设计区下页的“普通”选项，返回普通编辑状态，在刚才“我爱网页编程”的几个字后面敲回车，然后输入“这里是第二段”几个字。
再查看html代码，这里会发觉在
之间的代码变成如下所示了：我爱网页编程
这里是第二段
在网页里就有两段文字了，我们在进行文字编辑时，遇到要换行的地方时，总是通过输入回车来实现，所以在制作网页时也习惯于这样输入来换行，结果会发觉两行之间怎么那么宽呀？
这就是搞的鬼了，你每敲一次回车，网页设计程序认为你另起一段，所以就会增加代码，所以两行之就变成了两段字，所以就很宽咯！
下面我们按照添加第二段文字的方法添加第三段，在第三段输入“这里是第三段，换行开始”，然后从“插入”菜单中选择“插入换行符”（换行了耶，两行之间不是很宽了，正是我想要的^-^），再输入“换行结束……”，输入完毕后，查看一个html源代码，这时
之间的代码变成了：我爱网页编程
这里是第二段
这里是第三段，换行开始
换行结束……
从上面的代码可以看到，原来在html代码中换行是用
标签来表示的（这下好了，我想在哪换行就在哪加
,嘿嘿，我得意的笑，我得意……）。
下面可以在html代码时输入多个“
……
”标签和"
"标签，练习一下，然后好好理解这两个标签的用途（同学们可一定要多练习哟，不然将来不会了，老师会打屁屁的哟）。 不是说是一个简单而又实用的方法吗？
怎么说了半天又是“”标签又是“
”标签的，好复杂哦，老师，记不住啊？
？
？
？
你可以记不住，但一定要学会通过在“普通”状态和“html”之间的切换来学习标签代码，下面我们再来看几个倒子。
网页上出现得最多的莫过于“链接”了，这个东东使我们可以通过鼠标点击实现在页面间跳来跳去……
请大家在html的
之间输入下面的代码：XX搜索
然后点击设计区下面的“预览”，这里可以看到页面上的“XX搜索”几个字变蓝了，把鼠标移到上面，呀！
有个手形光标耶，我点！
我点！
真神奇，XX搜索网站首页出来了……
（注意，在进行上面操作时，要保证输入的字符不能有错——编程的要求可严了，今后你会发觉，输错一个标点符号都不行噢！
另外你的电脑要可以上网，不然的话会看不到XX网站首页）
如果你以前制作过网页，查看一下网页的html代码，看一下是不是每个链接都有YYYY的代码啊（其中XXXX是链接目标页面的网址，YYYY是我们在网页上看到的链接提示文字）
上面说了一大堆，总的目的是要让大家知道标签是用来做链接的……
再来看一个倒子：
在“普通”状态下，从“插入->表单->单行文本框”菜单中给网页插入文本框，再看一下在代码里增加了以下代码：
--webbotbot="SaveResults"U-File="fpweb:
///_private/form_results.txt"
S-Format="TEXT/CSV"S-Label-Fields="TRUE"-->
升级会员 