从零开始做网站.doc

从零开始做网站
本文所讨论的问题只针对空白空间，即“白板”空间。自助空间都提供有足够的模板和设置方法，非本文讨论范围。
一、准备工作
·申请一个空间。
    你可以申请一个Web自助上传的空间，也可以申请一个FTP管理上传下载的空间。前者上传容易，无需学习FTP管理软件，缺点是一次上传的文件数量有限，不支持目录上传（可在线建立目录）；后者可批量上传文件和文件夹，只要设置得好，每次同时上传的数量较前者多，而且上传下载都很方便，不足是它需要用户学习FTP管理软件的设置和应用。也有些空间同时支持Web与FTP管理，那就更理想了。新手还不必申请收费的空间，因为，新手还不是十分熟悉自己的需要，先在免费空间上一试身手，待积累了一定的经验并清楚自己想要什么样的服务，才胸有成竹地去寻找一个收费的空间。
·准备工具软件。
    一是制作网页的工具，初学者建议使用Office2000、2003自带的FrontPage（以下简称FP），如果你更喜欢用DreamWaver（以下简称DW——如果还谈到它的话），那更好（不过我不会）；
    二是FTP管理软件（如果申请了Web自助上传的空间则免了）。推荐使用CuteFTP，这是一个非常专业的FTP管理软件，也有着悠久的历史，很好用。
·相关网页制作知识。
    一是HTML知识。虽然不懂得HTML代码也能制作网页，但为了更灵活、高效地制作网页，还是有必要掌握一些HTML知识。不完全懂不要紧，反正我们都不是专业网页制作者，懂多少算多少，随着不断地实践和学习，今后懂得越来越多，这是必然的。
    二是CSS样式表。CSS将是格式化网页风格的得力帮手。一时半会儿不会用不要紧，开始套用别人的样式表也是可取的，今后领会了再慢慢修改、编写自己的CSS样式表。
    三是JavaScript。JavaScript简称JS，它是静态HTML的得力补充，本文将讨论如何使用它来完成网页的固定栏目（头部的导航条和尾部的网站信息）以及栏目导航条的分页技术，这些都非常实用。
    ·制作和准备网站标志等图片：一个Logo图片，格式为gif，尺寸为100×32；一个Banner图片，格式同前，尺寸为678×32。常用到的图片也事先准备好。
二、架构网站结构
    一个网站好比一个展览馆，它得有一个大厅和多个展览室。大厅非有不可，参观者将通过它了解展览室的资讯并可以由这里去到各个展览室，一个网站的“大厅”就是网站的首页。首页通常有固定的命名，文件名一般是index.htm或index.html，如果是动态网页，则视空间性质而定，可以是index.asp、index.php和index.cgi（还有其他的）。不论是静态空间还是支持asp、php、cgi的空间，用index.htm和index.html都是可以的，这是静态网站；展览馆的展览室根据不同的展览内容和项目会有很多间，网站的“展览室”就是你的站点栏目，比如，你的网站有五个栏目：一个“原创天地”、一个“音乐欣赏”、一个“网络美文”、一个“图音园地”、一个“网友作品”，这些就是“展览室”了，它们得有自己的“房间”，即文件夹（又称目录）。“展览品”则是一个一个的网页了。
    我们还需要建立一个用来装载图片的文件夹。这是很有必要的，因为，极可能在不同的地方我们会用到相同的图片（比如网站的Logo和Banner图片、做背景用的图片等），每次总从一个地方引用图片是个明智的做法。如果还有其他需要，还应该建立一些媒体文件夹什么的。
    OK，现在，你得建立一个“展览馆”——在你的磁盘里建立一个文件夹（目录），我们假定在“我的文档”里建立一个名叫myweb的文件夹（目录），然后在这个文件夹（目录）里分别建立五个同级的子文件夹（子目录），它们的文件名应该是由小写英文字母和阿拉伯数字组成的名字，命名为什么随便，比如用汉语拼音、英文单词等，反正方便你记忆就行。这样，你的“展览馆”——网站的空架子就有了，剩下的工作就是要准备好一个“大厅”（首页文件）、展览室指南（可以看作是展览室的小厅，即各栏目的首页文件——次首页文件）和展览品（网页文件）。
    首页文件其实是一个导航文件，它的作用主要有二：
    一是访客通过它将能去到各个“展览室”（你的栏目），二是你最新发布的“展览品”（网页）也在那里推荐，这样访客一进大厅就知道哪些“展览品”（网页）是最新的——访客也许是些熟客嘛，他们首先想看的是新的东东。
    次首页文件（栏目导航首页文件）针对具体栏目而言，它将提供该栏目所有的网页清单，这些清单不仅是一个列表，它还提供超级链接，来访者通过点击这些超级链接查看该栏目下的所有网页文件。
    “展览品”（网页文件）你得一件一件地添加，不必一次添加太多，做网站是日积月累的事情，每隔一段时间有一些新的内容，时间一久，网站就显得内容丰富了。
首页也好，栏目首页也好，子网页也好，它们都是网页，做起来都大同小异。当然，由于各种类型的网页功用不同，它们的结构也就有所区别。为此，我们下一节将从做首页文件开始。
三、建立首页（一）
    我们先来构思一下首页布局，它大概是这样（也可以是别的样）：
    ①上边有网站的Logo标志和Banner标志，它们并排在一起；
    ②往下是横向的导航条，它提供进入各栏目的入口；
    ③再往下是首页的正文，我们把它分成左右两栏，左边是一些其他资讯，右边较大，是各栏目和栏目新文章的链接；
    ④最下方是网站信息，比较简单。
    为此我们考虑从上到下分别用四个表格放置上述内容，这四个表格以居中方式对齐且宽度一致（建议为778个像素以适应800×600的分辨率），这就是所谓的表格组合用法了。
    下面开始具体操作。打开FP，如果当前不是“新建”状态，请单击FP界面上方工具条的“新建”按钮新建一个文件。
    单击FP菜单“表格”→“插入”→“表格”，FP将弹出一个“插入表格”对话框。第一个表格将是一行二列的（放Logo和Banner图标），所以行数里填1，列数里填2，对齐方式选择“水平居中”，边框粗细设置为0，确保“指定宽度”已经勾选、“像素”被点选，指定宽度为778，点击“确定”按钮。表格已经出来了，往下要做的是加入图标。
    单击表格左边单元格，点击FP工具栏上的“插入”→“图片”→“来自文件”，在我们前面建立的图片文件夹里找到Logo文件，确定。用鼠标调整左边单击格的宽度为图片宽度（拉动中间竖线往左移动）。Banner图片我们考虑用单元格背景图的方式实现，原因是，我们今后将在Banner处发布一些信息。为此，右击右边单元格→选择“单击格属性”，在弹出的单元格属性窗口的左下角√选“使用背景图片”，点击“浏览”按钮，在与Logo图片所在的同一个文件夹里选择事先准备好的Banner图片，单击“确定”按钮，再单击单元格属性窗口的“确定”按钮。OK，Banner图片已经作为右边单元格的背景图片出来了，我们可以在这个单元格输入一些欢迎词之类的文字。至此，标志网站的Logo和Banner弄好了。
    接着做导航条。在“普通（设计）”编辑模式下，单击Logo和Banner下方的空白处，以确保输入光标不在最上方的表格内。点击“表格”→“插入”→“表格”，建立一个1×6的表格，宽度778，水平居中，边框粗细、单元格间距和单元格边距均为0，确定。调整一下表格的高度，然后右击刚刚建立的表格→“表格属性”，在弹出的窗口设置一下表格的背景色，如果有必要还可以给表格添加一个背景图片。下一步是给导航条表格的各单元格分别输入导航文字，最左边的单元格就输入“网站导航”，其他单击格输入上面设置的栏目名称（它们还没有链接功能，因为还没有可链接的项目，以后我们再来完成这项工作），设置一下文字的对齐。最后，为了确保各单元格宽度占位是平均分配的，我们还需要有一个操作：用鼠标选中整个表格（在第一个单元格按下左键，从左往右拉动），右击选中部分的任意一处→选择“平均分配列宽”。
    任何时候，如果对表格或单元格的设置需要修改，均可通过右击相应表格（单元格，选中它或它们）→选择“表格属性”或“单元格属性”，然后在弹出的窗口对表格或单元格进行相应的设置操作。
    以下是我们上面操作的效果（尺寸缩小为520）：

Welcome To My Site  

网站导航
原创天地
音乐欣赏
网络美文
图音园地
网友作品
    文件弄好一部分就应该保存文件了，否则一会突然停电，前面的工作就白费了。单击保存按钮，在弹出的保存对话框里，在左上方的“保存位置”选择我们建好的文件夹（目录）myweb，下边的文件名框里输入index，文件类型为“Web页”，最后单击“保存”按钮。
四、建立首页（二）
    我们在上一节建立了网站首页的头部和导航条，本节将建立首页的正文和底部网站信息部分。
    确保输入光标在上面两个表格的下方，点击FP菜单“表格→插入→表格”，插入一个1×2的表格，对齐方式为水平居中，单元格粗细为0，单元格边距为0，单元格间距为0，表格宽度为778，单击“确定”按钮。设置一下左边单元格的底色和垂直对齐方式（顶边对齐），右边的单元格底色设置为白色。接下来，我们在右边的单元格嵌套插入一个表格，它将是和栏目的名称和各栏目的最新链接，为此，这个表格应该是10行一列，即10×1的表格，单元格粗细为0，边距为4（这样输入的文本就不会顶到边缘），间距为0，水平居中，宽度为578个像素，对齐方式为水平居中。弄好后分别从上到下，第一、第三、第五、第七、第九行输入网站五个栏目的名称，并设置好文字的对齐方式；其余各行我们暂时还没有内容，就输入“内容暂无”吧。
    最后设置底部。确保输入光标在上一个表格的下方，点击菜单“表格→插入→表格”，一行一列即可，水平居中，单元格边框粗细为0，边距为6，间距为1，宽度一样为778，设置一下它的底色，完后再右击它进入单元格属性，设置单元格底色为白色，然后在该表格输入相应文字。下例我们输入两行文字，第一行输入结束后，按上档键+回车键，所以，两行的间隔不是很远。
    保存文件，单击左下角的“预览”按钮，你将看到如下效果：

Welcome To My Site  

网站导航
原创天地
音乐欣赏
网络美文
图音园地
网友作品

栏目待建↓
原创天地
内容暂无
音乐欣赏
内容暂无
网络美文
内容暂无
图音园地
内容暂无
网友作品
内容暂无

联系人：黑马  电话：[phone]  E-Mail：gxblk@
黑马在线动力 版权所有（C）2005—2008
    至此，我们的首页框架已经做好了。但是，我们在用IE预览我们的成果时，我们发现网站的标题栏上的文字不是我们所需要的，怎么办？在FP的“普通（设计）”编辑模式下，右击编辑界面任意一个地方→选择“网页属性”，修改“标题”为自己想要的，比如“我的网站”。顺便在此界面设置一下网页的底色，针对上面的网站风格，建议不用白色底，可选择浅淡一些的颜色做底色，也可插入一幅淡色景的背景图。
五、建立首页（三）
    本节主要讲讲首页的修饰。左栏的建设留待以后参考下述的方案灵活设置。现在我们要做的是如何让右边栏目好看一些，也就是，加上一些图片，让首页看起来更为丰实、饱满。为此我们得事先准备好五张图片（因为有五个栏目），并放在固定的文件夹（比如我们前面建立的images文件夹）。
    考虑到便于排版问题，我们采用嵌套插入表格的方式来布局首页各栏目的最新列表。鼠标单击“原创天地”栏目（栏目名称下面的单击格），先把里面的内容删除，点击FT菜单“表格→插入→表格”，插入一个1×2表格，宽度为100%(注意点选百分比而不是像素)，其余各值为0。现在插入图片：确保输入光标在新建表格右边的单元格，点击菜单“插入→图片→来自文件”，在images文件夹找到所需图片，单击“确定”按钮，图片就有了。插好图片后，根据图片大小调整一下有图片的单元格的大小：鼠标指针移到中间的竖线，当指针呈左右方向箭头时按下左键不放向图片所在方向拉至合适时松开鼠标。注意单元格的宽度要比图片略大一些，以保证今后版面的美观。此外，图片的对齐方式可通过FP工具条上的对齐工具条快速设置。
    应该注意的是：装载文本的单元格，其垂直对齐方式应该为“顶边对齐”，可通过单元格属性设置。
    按照上面的方法，分别设置其余栏目。图片放左放右要有变化，不能全放左边或全放右边。
    来看看我们设置的效果：

Welcome To My Site  

网站导航
原创天地
音乐欣赏
网络美文
图音园地
网友作品

栏目待建↓
原创天地
文章一
文章二
文章三
文章四
文章五

音乐欣赏
文章一
文章二
文章三
文章四
文章五

网络美文

文章一
文章二
文章三
文章四
文章五

图音园地

文章一
文章二
文章三
文章四
文章五

网友作品
文章一
文章二
文章三
文章四
文章五

联系人：黑马  电话：[phone]  E-Mail：gxblk@
黑马在线动力 版权所有（C）2005—2008
六、用JS格式化网站结构
    网页的头部信息、导航条和尾部个人信息一般都是相对固定的，前者结构固定，后者内容固定，不管是哪种固定，它们也都不是一成不变，有朝一日，你想添加个栏目，或改一下电话号码，面临众多的网页，你会无所适从。为此，能否设置一个或少数几个文件为我们的网页使用，需要修改时能做到一变百变呢？
    答案是肯定的。对于仅支持静态HTML网页的空间而言，同时，对做网站的新手来说，我们可以通过JS（即JavaScript）来完成这项任务。JS入门并不难，也因为我们需要用它实现的功能比较单一，我们不必害怕它，容易一些的内容，我们通过模仿格式自己编写、修改即可，难一些的，套用（当然也离不开修改）吧。
    本节主要讨论用JS完成网页的首部信息、导航条和尾部信息。
    用FP打开我们前面做好的首页文件，单击左下角的“HTML（代码）”按钮，找到首页页面的头部信息和导航条代码，它们如下（我的网页是一个模型，其尺寸宽度为520）：
<table border="0" cellpadding="0" cellspacing="0" width="520" height="29" align=center>
<tr>
<td width="90"><img border="0" src="images/logo.gif" width="90" height="29"></td>
<td width="460" background="images/banner.gif">
<p align="right">Welcome To My Site&nbsp;&nbsp;</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="520" bgcolor="#FF6600" height="27" align=center>
<tr>
<td align="center" valign="middle" height="27" width="86">网站导航</td>
<td align="center" valign="middle" height="27" width="86">原创天地</td>
<td align="center" valign="middle" height="27" width="87">音乐欣赏</td>
<td align="center" valign="middle" height="27" width="87">网络美文</td>
<td align="center" valign="middle" height="27" width="87">图音园地</td>
<td align="center" valign="middle" height="27" width="87">网友作品</td>
</tr>
</table>
    这些代码我们将做一些处理。首先，把小角双引改为小角单引号，可用有替换功能的文本编辑器（比如Windows XP下的记事本）进行替换，然后逐行添加JS代码。以下是我修改过的代码：
document.write("<table border='0' cellpadding='0' cellspacing='0' width='520' height='29' align=center><tr>");
document.write("<td width='90'><img border='0' src='mkweb/logo.gif' width='90' height='29'></td>");
document.write("<td width='430' background='mkweb/banner.gif' align=right>Welcome To My Site&nbsp;&nbsp;</td>");
document.write("</tr></table>");
document.write("<table border='0' cellpadding='0' cellspacing='0' width='520' bgcolor='#FF6600' height='27' align=center><tr>");
document.write("<td align='center' valign='middle' height='27' width='86'>网站导航</td>");
document.write("<td align='center' valign='middle' height='27' width='86'>原创天地</td>");
document.write("<td align='center' valign='middle' height='27' width='87'>音乐欣赏</td>");
document.write("<td align='center' valign='middle' height='27' width='87'>网络美文</td>");
document.write("<td align='center' valign='middle' height='27' width='87'>图音园地</td>");
document.write("<td align='center' valign='middle' height='27' width='87'>网友作品</td>");
document.write("</tr></table>");
    把上面的代码保存成一个文件，比如top.js，注意，后缀名一定得是“.js”。可以用记事本保存：编辑好上述代码后，单击记事本的菜单“文件→保存”，在弹出的保存对话框里选择文件类型为“所有文件”，在文件名栏输入top.js，单击“保存”按钮。
    有了top.js文件，我们就可以在首页网页代码相应的地方引用这个文件来替代原来的网页首部信息的导航条的代码，引用方法如下：
<script language="javascript" src="top.js"></script>
    注意代码中的src部分，它的值即为top.js文件，当该文件与网页文件不同一个目录时，需要修改它的路径，假设它放在一个叫js的目录里，那么，src的值应该是js/top.js，具体表达为：js="js/top.js"。
    用同样的方法，把首页文件的尾部信息写在一个bottom.js文件，然后引用它。以下是我做的效果：

Welcome To My Site  

网站导航
原创天地
音乐欣赏
网络美文
图音园地
网友作品

正文部分为HTML代码，略。

联系人：黑马  电话：[phone]  E-Mail：gxblk@
黑马在线动力 版权所有（C）2005—2008
    这样，我们可以在其他页面使用相同或相似的JS文件，到时需要修改头部或尾部内容时，我们只需修改一个或少数几个JS文件，所有的网页就会跟着改变，非常方便。
    应该注意的是，JS文件应该是几个的，原因是，在不同目录下，对资源文件的使用路径会有所不同，JS里的链接指向也有变化，为此，有必要为不同级别的目录分别设置不同的JS文件，工作量并不大，仅修改资源和链接文件的路径。当然，可以考虑使用绝对路径，这样就一个JS文件一用到底了，不过它有一个前提：你已经有了网站。
注：本节用到的JS知识很简单，仅document.write("Something")方法。更多的介绍请查看《用JavaScript制作一张表格》中的document.write部分的内容，也可以在那里学习一些有用的JS知识：

七、利用JS文件实现资源共享
    在上一节，我们使用JS文件来完成站点网页头尾格式化工作，其实就是一种站内资源共享的手段。本节继续探讨利用JS文件实现扩展性的资源共享方法。
    对于只支持静态HTML的空间来说，或者对于还不会使用网络动态编程语言的用户而言，如果能找到相对简单的方法来实现一种资源在多个页面使用之类的功能——说明白一些就是，我们上传了一个文件，首页能自动显示它，栏目导航页也能显示它，而又不用去一一修改这两个文件——，那将是非常难得的。
    我们可以通过JS来完成我们所需要的上面提出的功能。建立一个JS文件，给它定制一个数组，这个数组的元素就是站内某栏目文章的链接，它们可以不断添加，最新发布的文章添加在最前面，这样，首页和栏目导航页永远保证新发布的文章排列在前面。这个JS文件其实就是一个记录文章链接的“库”文件。
    因为数组是我们添加的，文章总数多少我们心中有数，而各页显示多少由我们设置，已知条件是充足的，为此在页面文件中处理库文件的JS程序可以相对简单，避免了复杂的编程。
    作为实验，我设置了一个JS库文件，格式如下：
var ycurl=new Array(
  '<a taget="_blank" href="文章一地址">文章一标题</a>',
  '<a taget="_blank" href="文章二地址">文章二标题</a>',
  '<a taget="_blank" href="文章三地址">文章三标题</a>',
  //'这里按上面格式添加更多的文章，注意去年注释符号//',
  '<a taget="_blank" href="文章N地址">文章N标题</a>'
)
    这里略为解释一下代码：var是JS声明变量的方法，我们的变量名称为ycurl（意为原创栏目的链接），这是一个数组变量，所以后面有new Array()。小角括号里面即为该数组变量的组成元素，每个元素用小角单引号引起来，并且，除了最后一个元素，每一个元素结束时都用小角逗号作标志，这里一定要注意：最后一个数组元素结束不能有小角逗号。组成数组的元素本来是可以放在一行写的，为了便于今后添加新元素，我们令每个元素占一行。
    把上面代码保存为 yc_url.js 文件，然后在网页调用它并编写简单的JS程序从该库文件那里读取内容且显示出来。下面是具体的实现代码：
    调用库文件（我们假设yc_url.js文件保存在与首页文件同级的js目录里。）：
<script language="javascript" src="js/yc_url.js"></script>
    这里注意调用js文件的路径，比如，栏目导航页是放在栏目所在目录里，它要调用js目录里的js文件，应该是，src="../js/ycurl.js"，其中的“../”表示退一级目录。
处理库文件的JS程序
<script language="javascript">
for(var i=0;i<5;i++) {
document.write(ycurl[i]+"<br>");
}
</script>
    处理库文件的JS程序用了for语句，它将从库文件中从0元素开始遍历数组元素（ycurl()），直至我们指定的变量i所提供的条件用完为止（上例中为i<5，即从0到4遍历），然后用document.write()方法把这些数组元素一一写出来，每写完一个加一个换行符（<br>）。
    变量i小于多少我们可以改变。我们希望在首页显示该栏目的最新五条信息，因此在for语句里令i<5，而在“原创天地”导航页是要显示完全部的信息的，这就用上全部的数字，比如现在有22篇文章，那么，i<22即是。
    我已经准备了一个本站的原创栏目的JS库文件，有22条，下面我按上面讨论的方法分别将结果演示如下：
    首页“原创天地”的最新更新文件列表（显示五个信息）：
杯子装不下海
并非无聊
黑马灌水理论
道德测试
乌鸦不吃腐肉之后

    “原创天地”导航页文件列表（显示全部信息）：
    原
    创
    天
    地

1 杯子装不下海
2 并非无聊
3 黑马灌水理论
4 道德测试
5 乌鸦不吃腐肉之后
6 老虎与人
7 红狐狸也包起了二奶
8 狮子 猴子和人
9 老子和孔子
10 说说错误
11 说骂
12 北门
13 年度人物
14 邓艾
15 钥匙串
16 思念 马及其他
17 猴子的政治
18 校园开设反腐课程杂感
19 人行兽行
20 垃圾
21 北极旅鼠
22 燕子

    读者可能发现，“原创天地”栏目的文件列表有序号。这简单，我们在for语句的下一行加入一句：j=i+1，然后把document.write()一句改为document.write(j+" "+ycurl[i]+"<br>");。
    其他栏目如法炮制，静态的站点就具备了动态的特征，JS的确太伟大了。
八、JS分页技术在静态网中的使用
    我们已经讨论了利用JS中实现站内资源共享的问题，如果掌握了，将来网站更新后的维护将会非常容易：只需要上传新网页和更新了的JS库文件。现在的问题是，当库文件条目繁多，在同一个栏目导航页面显示全部的导航链接是不合理的，我们如何在网站栏目的导航页面进行分页？
    我们还是利用JS来完成。注意，这里只针对静态HTML页面，动态性质的页面不能也不应该使用下面要介绍的方法（这类网页自有其他方法），说明白一点就是，本法适用于文件后缀名为.htm或.html类的页面。
    我们分三个步骤：
    步骤一：引用库文件。
    以下这行代码可以放在</head>之前一行，或放在<body>的下一行，总之，它必须放在步骤三的JS代码之前。此外，具体使用时，注意JS库文件的路径和名称：
<script language="javascript" src="yc_url.js"></script>
    步骤二：设置显示导航链接和页码的容器。
在表格中设置两组td标签，再分别在其内放置两个div标签，两个div都设置有id号以响应JS脚本的指令并显示相应内容。代码样式如下：
<table border="0" align="center " width="600"><tr>
    <td><div id="mytext">显示各页的导航链接</div></td>
    <td><div id="page">显示页码链接</div></td></tr>
</table>
    步骤三：编写分页程序。
    以下是笔者编写的分页JS代码，如果觉得困难，就不必去理解它，将以下JS代码完整复制到</body>的上一行即可。注意，如果你使用FP之类的网页编辑器来编辑网页，必须记住把编辑模式切换到HTML代码模式下，找到相应位置，把输入光标移到该位置，粘贴已经复制到剪贴板的代码。你也可以把下列的代码放在表格的<td>和</td>之间，以便让要显示的文件列表部分与显示链接页的内容相隔离，就像我稍后提供的演示页一样。
<script language="javascript">

//注意变量ycurl应更改为库文件中使用的变量名称

var pa_idx=0;

function show_text(index) { //显示各页文本内容
   pg_idx=index; //得到页码序列号
   var str_now=""; //要显示的文本；

   var total=ycurl.length; //要显示的文本条目总数
   var show = 20; //每页显示的条目
   var page = (total%show==0 ? total/show : Math.ceil(total/show)); //所需要页码数

   //各页显示的内容: 页码序列 pg_idx 是各页显示什么内容的重要依据 - 它和每页显示数 show 的关系是算法关键
   for(i=pg_idx*show;i<pg_idx*show+show;i++) {
      idx=i+1;
      if(i<total) str_now +=fm_idx(idx) + " " + ycurl[i] + "<br>"; //只打印有效的内容
   }

   document.getElementById('mytext').innerHTML = str_now; //在 id 号为 text 的窗口打印内容

   page_link(page); //调用并刷新页码链接函数
}

//写页码链接函数（num为总页数）
function page_link(num){

   var pg_str="第 "; //页码链接起始字串
   for(i=0;i<num;i++) {
      //当前页不提供链接, 否则提供
      pg_str += (i==pg_idx ? "<span style='color:#ff0000;'>" + (i+1) + "</span> " : "<a style='cursor:hand;' onclick='javascript:show_text(" + i + ");'>" + (i+1) + "</a> ");
   }
   pg_str += "页"; //页码终结

   document.getElementById('page').innerHTML = pg_str; //在 id 号为 page 的窗口打印页码链接
   }

function fm_idx(num) { //規範化序號
   res=("" + num + "").length;
   switch(res) {
   case 1:
         echostr=num + "&nbsp;&nbsp;";
         break;
      case 2:
         echostr=num + "&nbsp;";
         break;
         default:
         echostr=num;
      }
   return echostr;
}

show_text(0); //首次调用函数
</script>
点击 → ① JS分页技术演示页面 ② 分頁導航頁面示範
令程序无法通过或达不到你所要的目的，因此，在编写JS代码时，一定得细心，出错或达不到目的后立即认真检查、及时修改。
    ·嵌入在HTML页面中的JS程序要有语言宣告，格式如下：
<script language="javascript">
//……JS代码
</script>
    语言宣告有起始和终止标志，第一行是宣告开始，最后一行是宣告结束。
    ·嵌入式使用JS代码还有一种不需要宣告的方法，它插入在HTML代码中，这类用法也非常常见，黑马在线动力的音乐岛里的页面文件为实现点播功能而这么使用了JS代码。例：
    <a href="#" onclick=chgpage()>文字</a>
    这里，使用了JS规范的onclick事件，也就是鼠标单击事件，当链接缩“文字”有单击动作发生，就执行事先定义好的chgpage()函数。
    这类用法灵活简便，我们查看那些不能选择文本、不能使用鼠标右击的网页代码会发现，在<body>代码域里就有相关的JS代码。
    ·如果把JS代码做成文件留待各网页将来调用，则无需宣告（也不要宣告），直接编写。但JS文件的调用则又需要宣告，和嵌入HTML网页代码中大同小异（请注意比较），它们只需一行，格式如下：
<script language="javascript" src="js文件全名"></script>
    同时要特别注意被调用的JS文件的路径准确无误。路径可用相对路径，也可用绝对路径。这里谈一下这两种路径：
    1.相对路径借用DOS下的路径表达法，用符号（../）表示后退。例：
src="yc_url.js" — 网页文件与JS文件同级同目录
src="../yc_url.js" — 网页文件在JS文件的下一级目录
src="../js/yc_url.js — 网页文件与JS文件不在同一个目录并需要后退
一步再进入JS的目录
src="../../yc_url.js — 网页文件在JS文件的下两级目录
src="../../js/yu_url.js — 网页文件与JS文件不在同一个目录并需要后退
两步再进入JS的目录
    2.绝对路径比较简单，就是完整的文件地址，例：
    src="
    ·对于经常使用到的JS代码，我们应该把它做成相应的JS文件，以提高代码重用的效率。像JS分页技术的步骤二和步骤三的代码就完全可以做成一个JS文件，然后在各栏目导航首页里调用它，今后如果修改、完善该分页程序的功能，只需修改一个文件，工作效率大大提高。由于这两个步骤所用的变量或为从库文件继承而来，或为自身独立的变量，它们将不受到具体网页的干扰，做成JS文件是有理由的。当然，要做成JS文件，两个步骤的代码及显示效果应该是分开的，我们还需要花点心思对付一下，用document.write来写两个表格让它们分开：
//表格一：装载文件列表
document.write("table border=0 align=center width='100%'><tr><td>)";
//步骤二的代码
document.write("</td></tr></table>");
document.write("table border=0 align=center width='100%'><tr><td>)";
//