1、從零開始做網(wǎng)站本文所討論的問題只針對空白空間，即“白板”空間。自助空間都提供有足夠的模板和設置方法，非本文討論范圍。一、準備工作申請一個空間。 你可以申請一個Web自助上傳的空間，也可以申請一個FTP管理上傳下載的空間。前者上傳容易，無需學習FTP管理軟件，缺點是一次上傳的文件數(shù)量有限，不支持目錄上傳（可在線建立目錄）；后者可批量上傳文件和文件夾，只要設置得好，每次同時上傳的數(shù)量較前者多，而且上傳下載都很方便，不足是它需要用戶學習FTP管理軟件的設置和應用。也有些空間同時支持Web與FTP管理，那就更理想了。新手還不必申請收費的空間，因為，新手還不是十分熟悉自己的需要，先在免費空間上一試身手，

2、待積累了一定的經(jīng)驗并清楚自己想要什么樣的服務，才胸有成竹地去尋找一個收費的空間。準備工具軟件。 一是制作網(wǎng)頁的工具，初學者建議使用Office2000、2003自帶的FrontPage（以下簡稱FP），如果你更喜歡用DreamWaver（以下簡稱DW如果還談到它的話），那更好（不過我不會）； 二是FTP管理軟件（如果申請了Web自助上傳的空間則免了）。推薦使用CuteFTP，這是一個非常專業(yè)的FTP管理軟件，也有著悠久的歷史，很好用。相關網(wǎng)頁制作知識。 一是HTML知識。雖然不懂得HTML代碼也能制作網(wǎng)頁，但為了更靈活、高效地制作網(wǎng)頁，還是有必要掌握一些HTML知識。不完全懂不要緊，反正我們都

3、不是專業(yè)網(wǎng)頁制作者，懂多少算多少，隨著不斷地實踐和學習，今后懂得越來越多，這是必然的。 二是CSS樣式表。CSS將是格式化網(wǎng)頁風格的得力幫手。一時半會兒不會用不要緊，開始套用別人的樣式表也是可取的，今后領會了再慢慢修改、編寫自己的CSS樣式表。 三是JavaScript。JavaScript簡稱JS，它是靜態(tài)HTML的得力補充，本文將討論如何使用它來完成網(wǎng)頁的固定欄目（頭部的導航條和尾部的網(wǎng)站信息）以及欄目導航條的分頁技術，這些都非常實用。 制作和準備網(wǎng)站標志等圖片：一個Logo圖片，格式為gif，尺寸為10032；一個Banner圖片，格式同前，尺寸為67832。常用到的圖片也事先準備好。二

4、、架構網(wǎng)站結構 一個網(wǎng)站好比一個展覽館，它得有一個大廳和多個展覽室。大廳非有不可，參觀者將通過它了解展覽室的資訊并可以由這里去到各個展覽室，一個網(wǎng)站的“大廳”就是網(wǎng)站的首頁。首頁通常有固定的命名，文件名一般是index.htm或index.html，如果是動態(tài)網(wǎng)頁，則視空間性質而定，可以是index.asp、index.php和index.cgi（還有其他的）。不論是靜態(tài)空間還是支持asp、php、cgi的空間，用index.htm和index.html都是可以的，這是靜態(tài)網(wǎng)站；展覽館的展覽室根據(jù)不同的展覽內容和項目會有很多間，網(wǎng)站的“展覽室”就是你的站點欄目，比如，你的網(wǎng)站有五個欄目：一個“

5、原創(chuàng)天地”、一個“音樂欣賞”、一個“網(wǎng)絡美文”、一個“圖音園地”、一個“網(wǎng)友作品”，這些就是“展覽室”了，它們得有自己的“房間”，即文件夾（又稱目錄）?！罢褂[品”則是一個一個的網(wǎng)頁了。 我們還需要建立一個用來裝載圖片的文件夾。這是很有必要的，因為，極可能在不同的地方我們會用到相同的圖片（比如網(wǎng)站的Logo和Banner圖片、做背景用的圖片等），每次總從一個地方引用圖片是個明智的做法。如果還有其他需要，還應該建立一些媒體文件夾什么的。 OK，現(xiàn)在，你得建立一個“展覽館”在你的磁盤里建立一個文件夾（目錄），我們假定在“我的文檔”里建立一個名叫myweb的文件夾（目錄），然后在這個文件夾（目錄）里分

6、別建立五個同級的子文件夾（子目錄），它們的文件名應該是由小寫英文字母和阿拉伯數(shù)字組成的名字，命名為什么隨便，比如用漢語拼音、英文單詞等，反正方便你記憶就行。這樣，你的“展覽館”網(wǎng)站的空架子就有了，剩下的工作就是要準備好一個“大廳”（首頁文件）、展覽室指南（可以看作是展覽室的小廳，即各欄目的首頁文件次首頁文件）和展覽品（網(wǎng)頁文件）。 首頁文件其實是一個導航文件，它的作用主要有二： 一是訪客通過它將能去到各個“展覽室”（你的欄目），二是你最新發(fā)布的“展覽品”（網(wǎng)頁）也在那里推薦，這樣訪客一進大廳就知道哪些“展覽品”（網(wǎng)頁）是最新的訪客也許是些熟客嘛，他們首先想看的是新的東東。 次首頁文件（欄目導航

7、首頁文件）針對具體欄目而言，它將提供該欄目所有的網(wǎng)頁清單，這些清單不僅是一個列表，它還提供超級鏈接，來訪者通過點擊這些超級鏈接查看該欄目下的所有網(wǎng)頁文件。 “展覽品”（網(wǎng)頁文件）你得一件一件地添加，不必一次添加太多，做網(wǎng)站是日積月累的事情，每隔一段時間有一些新的內容，時間一久，網(wǎng)站就顯得內容豐富了。首頁也好，欄目首頁也好，子網(wǎng)頁也好，它們都是網(wǎng)頁，做起來都大同小異。當然，由于各種類型的網(wǎng)頁功用不同，它們的結構也就有所區(qū)別。為此，我們下一節(jié)將從做首頁文件開始。三、建立首頁（一） 我們先來構思一下首頁布局，它大概是這樣（也可以是別的樣）： 上邊有網(wǎng)站的Logo標志和Banner標志，它們并排在一起

8、； 往下是橫向的導航條，它提供進入各欄目的入口； 再往下是首頁的正文，我們把它分成左右兩欄，左邊是一些其他資訊，右邊較大，是各欄目和欄目新文章的鏈接； 最下方是網(wǎng)站信息，比較簡單。 為此我們考慮從上到下分別用四個表格放置上述內容，這四個表格以居中方式對齊且寬度一致（建議為778個像素以適應800600的分辨率），這就是所謂的表格組合用法了。 下面開始具體操作。打開FP，如果當前不是“新建”狀態(tài)，請單擊FP界面上方工具條的“新建”按鈕新建一個文件。 單擊FP菜單“表格”“插入”“表格”，F(xiàn)P將彈出一個“插入表格”對話框。第一個表格將是一行二列的（放Logo和Banner圖標），所以行數(shù)里填1，列

9、數(shù)里填2，對齊方式選擇“水平居中”，邊框粗細設置為0，確?！爸付▽挾取币呀?jīng)勾選、“像素”被點選，指定寬度為778，點擊“確定”按鈕。表格已經(jīng)出來了，往下要做的是加入圖標。 單擊表格左邊單元格，點擊FP工具欄上的“插入”“圖片”“來自文件”，在我們前面建立的圖片文件夾里找到Logo文件，確定。用鼠標調整左邊單擊格的寬度為圖片寬度（拉動中間豎線往左移動）。Banner圖片我們考慮用單元格背景圖的方式實現(xiàn)，原因是，我們今后將在Banner處發(fā)布一些信息。為此，右擊右邊單元格選擇“單擊格屬性”，在彈出的單元格屬性窗口的左下角選“使用背景圖片”，點擊“瀏覽”按鈕，在與Logo圖片所在的同一個文件夾里選擇

10、事先準備好的Banner圖片，單擊“確定”按鈕，再單擊單元格屬性窗口的“確定”按鈕。OK，Banner圖片已經(jīng)作為右邊單元格的背景圖片出來了，我們可以在這個單元格輸入一些歡迎詞之類的文字。至此，標志網(wǎng)站的Logo和Banner弄好了。 接著做導航條。在“普通（設計）”編輯模式下，單擊Logo和Banner下方的空白處，以確保輸入光標不在最上方的表格內。點擊“表格”“插入”“表格”，建立一個16的表格，寬度778，水平居中，邊框粗細、單元格間距和單元格邊距均為0，確定。調整一下表格的高度，然后右擊剛剛建立的表格“表格屬性”，在彈出的窗口設置一下表格的背景色，如果有必要還可以給表格添加一個背景圖片

11、。下一步是給導航條表格的各單元格分別輸入導航文字，最左邊的單元格就輸入“網(wǎng)站導航”，其他單擊格輸入上面設置的欄目名稱（它們還沒有鏈接功能，因為還沒有可鏈接的項目，以后我們再來完成這項工作），設置一下文字的對齊。最后，為了確保各單元格寬度占位是平均分配的，我們還需要有一個操作：用鼠標選中整個表格（在第一個單元格按下左鍵，從左往右拉動），右擊選中部分的任意一處選擇“平均分配列寬”。 任何時候，如果對表格或單元格的設置需要修改，均可通過右擊相應表格（單元格，選中它或它們）選擇“表格屬性”或“單元格屬性”，然后在彈出的窗口對表格或單元格進行相應的設置操作。 以下是我們上面操作的效果（尺寸縮小為520）

12、：Welcome To My Site網(wǎng)站導航原創(chuàng)天地音樂欣賞網(wǎng)絡美文圖音園地網(wǎng)友作品 文件弄好一部分就應該保存文件了，否則一會突然停電，前面的工作就白費了。單擊保存按鈕，在彈出的保存對話框里，在左上方的“保存位置”選擇我們建好的文件夾（目錄）myweb，下邊的文件名框里輸入index，文件類型為“Web頁”，最后單擊“保存”按鈕。四、建立首頁（二） 我們在上一節(jié)建立了網(wǎng)站首頁的頭部和導航條，本節(jié)將建立首頁的正文和底部網(wǎng)站信息部分。 確保輸入光標在上面兩個表格的下方，點擊FP菜單“表格插入表格”，插入一個12的表格，對齊方式為水平居中，單元格粗細為0，單元格邊距為0，單元格間距為0，表格寬度為

13、778，單擊“確定”按鈕。設置一下左邊單元格的底色和垂直對齊方式（頂邊對齊），右邊的單元格底色設置為白色。接下來，我們在右邊的單元格嵌套插入一個表格，它將是和欄目的名稱和各欄目的最新鏈接，為此，這個表格應該是10行一列，即101的表格，單元格粗細為0，邊距為4（這樣輸入的文本就不會頂?shù)竭吘墸?，間距為0，水平居中，寬度為578個像素，對齊方式為水平居中。弄好后分別從上到下，第一、第三、第五、第七、第九行輸入網(wǎng)站五個欄目的名稱，并設置好文字的對齊方式；其余各行我們暫時還沒有內容，就輸入“內容暫無”吧。 最后設置底部。確保輸入光標在上一個表格的下方，點擊菜單“表格插入表格”，一行一列即可，水平居中，

14、單元格邊框粗細為0，邊距為6，間距為1，寬度一樣為778，設置一下它的底色，完后再右擊它進入單元格屬性，設置單元格底色為白色，然后在該表格輸入相應文字。下例我們輸入兩行文字，第一行輸入結束后，按上檔鍵+回車鍵，所以，兩行的間隔不是很遠。 保存文件，單擊左下角的“預覽”按鈕，你將看到如下效果：Welcome To My Site網(wǎng)站導航原創(chuàng)天地音樂欣賞網(wǎng)絡美文圖音園地網(wǎng)友作品欄目待建原創(chuàng)天地內容暫無音樂欣賞內容暫無網(wǎng)絡美文內容暫無圖音園地內容暫無網(wǎng)友作品內容暫無聯(lián)系人：黑馬 電話E-Mail：黑馬在線動力 版權所有（C）20052008 至此，我們的首頁框架已經(jīng)做好了。

15、但是，我們在用IE預覽我們的成果時，我們發(fā)現(xiàn)網(wǎng)站的標題欄上的文字不是我們所需要的，怎么辦？在FP的“普通（設計）”編輯模式下，右擊編輯界面任意一個地方選擇“網(wǎng)頁屬性”，修改“標題”為自己想要的，比如“我的網(wǎng)站”。順便在此界面設置一下網(wǎng)頁的底色，針對上面的網(wǎng)站風格，建議不用白色底，可選擇淺淡一些的顏色做底色，也可插入一幅淡色景的背景圖。五、建立首頁（三） 本節(jié)主要講講首頁的修飾。左欄的建設留待以后參考下述的方案靈活設置?，F(xiàn)在我們要做的是如何讓右邊欄目好看一些，也就是，加上一些圖片，讓首頁看起來更為豐實、飽滿。為此我們得事先準備好五張圖片（因為有五個欄目），并放在固定的文件夾（比如我們前面建立的i

16、mages文件夾）。 考慮到便于排版問題，我們采用嵌套插入表格的方式來布局首頁各欄目的最新列表。鼠標單擊“原創(chuàng)天地”欄目（欄目名稱下面的單擊格），先把里面的內容刪除，點擊FT菜單“表格插入表格”，插入一個12表格，寬度為100%(注意點選百分比而不是像素)，其余各值為0?，F(xiàn)在插入圖片：確保輸入光標在新建表格右邊的單元格，點擊菜單“插入圖片來自文件”，在images文件夾找到所需圖片，單擊“確定”按鈕，圖片就有了。插好圖片后，根據(jù)圖片大小調整一下有圖片的單元格的大?。菏髽酥羔樢频街虚g的豎線，當指針呈左右方向箭頭時按下左鍵不放向圖片所在方向拉至合適時松開鼠標。注意單元格的寬度要比圖片略大一些，以保

17、證今后版面的美觀。此外，圖片的對齊方式可通過FP工具條上的對齊工具條快速設置。 應該注意的是：裝載文本的單元格，其垂直對齊方式應該為“頂邊對齊”，可通過單元格屬性設置。 按照上面的方法，分別設置其余欄目。圖片放左放右要有變化，不能全放左邊或全放右邊。 來看看我們設置的效果：Welcome To My Site網(wǎng)站導航原創(chuàng)天地音樂欣賞網(wǎng)絡美文圖音園地網(wǎng)友作品欄目待建原創(chuàng)天地文章一文章二文章三文章四文章五音樂欣賞文章一文章二文章三文章四文章五網(wǎng)絡美文文章一文章二文章三文章四文章五圖音園地文章一文章二文章三文章四文章五網(wǎng)友作品文章一文章二文章三文章四文章五聯(lián)系人：黑馬 電話

18、E-Mail：黑馬在線動力 版權所有（C）20052008六、用JS格式化網(wǎng)站結構 網(wǎng)頁的頭部信息、導航條和尾部個人信息一般都是相對固定的，前者結構固定，后者內容固定，不管是哪種固定，它們也都不是一成不變，有朝一日，你想添加個欄目，或改一下電話號碼，面臨眾多的網(wǎng)頁，你會無所適從。為此，能否設置一個或少數(shù)幾個文件為我們的網(wǎng)頁使用，需要修改時能做到一變百變呢？ 答案是肯定的。對于僅支持靜態(tài)HTML網(wǎng)頁的空間而言，同時，對做網(wǎng)站的新手來說，我們可以通過JS（即JavaScript）來完成這項任務。JS入門并不難，也因為我們需要用它實現(xiàn)的功能比較單一，我們不必害怕它，容易一些的內容，我們通過模仿格式自

19、己編寫、修改即可，難一些的，套用（當然也離不開修改）吧。 本節(jié)主要討論用JS完成網(wǎng)頁的首部信息、導航條和尾部信息。 用FP打開我們前面做好的首頁文件，單擊左下角的“HTML（代碼）”按鈕，找到首頁頁面的頭部信息和導航條代碼，它們如下（我的網(wǎng)頁是一個模型，其尺寸寬度為520）：Welcome To My Site 網(wǎng)站導航 原創(chuàng)天地 音樂欣賞 網(wǎng)絡美文 圖音園地 網(wǎng)友作品 這些代碼我們將做一些處理。首先，把小角雙引改為小角單引號，可用有替換功能的文本編輯器（比如Windows XP下的記事本）進行替換，然后逐行添加JS代碼。以下是我修改過的代碼：document.write();document

20、.write();document.write(Welcome To My Site);document.write();document.write();document.write(網(wǎng)站導航);document.write(原創(chuàng)天地);document.write(音樂欣賞);document.write(網(wǎng)絡美文);document.write(圖音園地);document.write(網(wǎng)友作品);document.write(); 把上面的代碼保存成一個文件，比如top.js，注意，后綴名一定得是“.js”?？梢杂糜浭卤颈４妫壕庉嫼蒙鲜龃a后，單擊記事本的菜單“文件保存”，在彈出的保存

21、對話框里選擇文件類型為“所有文件”，在文件名欄輸入top.js，單擊“保存”按鈕。 有了top.js文件，我們就可以在首頁網(wǎng)頁代碼相應的地方引用這個文件來替代原來的網(wǎng)頁首部信息的導航條的代碼，引用方法如下： 注意代碼中的src部分，它的值即為top.js文件，當該文件與網(wǎng)頁文件不同一個目錄時，需要修改它的路徑，假設它放在一個叫js的目錄里，那么，src的值應該是js/top.js，具體表達為：js=js/top.js。 用同樣的方法，把首頁文件的尾部信息寫在一個bottom.js文件，然后引用它。以下是我做的效果：Welcome To My Site網(wǎng)站導航原創(chuàng)天地音樂欣賞網(wǎng)絡美文圖音園地網(wǎng)友

22、作品正文部分為HTML代碼，略。聯(lián)系人：黑馬 電話E-Mail：黑馬在線動力 版權所有（C）20052008 這樣，我們可以在其他頁面使用相同或相似的JS文件，到時需要修改頭部或尾部內容時，我們只需修改一個或少數(shù)幾個JS文件，所有的網(wǎng)頁就會跟著改變，非常方便。 應該注意的是，JS文件應該是幾個的，原因是，在不同目錄下，對資源文件的使用路徑會有所不同，JS里的鏈接指向也有變化，為此，有必要為不同級別的目錄分別設置不同的JS文件，工作量并不大，僅修改資源和鏈接文件的路徑。當然，可以考慮使用絕對路徑，這樣就一個JS文件一用到底了，不過它有一個前提：你已經(jīng)有了網(wǎng)站。注：本節(jié)用

23、到的JS知識很簡單，僅document.write(Something)方法。更多的介紹請查看用JavaScript制作一張表格中的document.write部分的內容，也可以在那里學習一些有用的JS知識： HYPERLINK /pc/jsstu/js.php?id=5 t _balnk /pc/jsstu/js.php?id=5七、利用JS文件實現(xiàn)資源共享 在上一節(jié)，我們使用JS文件來完成站點網(wǎng)頁頭尾格式化工作，其實就是一種站內資源共享的手段。本節(jié)繼續(xù)探討利用JS文件實現(xiàn)擴展性的資源共享方法。 對于只支持靜態(tài)HTML的空間來說，或者對于還不會使用網(wǎng)絡動態(tài)編程語言的用戶而言，如果能找到相對簡

24、單的方法來實現(xiàn)一種資源在多個頁面使用之類的功能說明白一些就是，我們上傳了一個文件，首頁能自動顯示它，欄目導航頁也能顯示它，而又不用去一一修改這兩個文件，那將是非常難得的。 我們可以通過JS來完成我們所需要的上面提出的功能。建立一個JS文件，給它定制一個數(shù)組，這個數(shù)組的元素就是站內某欄目文章的鏈接，它們可以不斷添加，最新發(fā)布的文章添加在最前面，這樣，首頁和欄目導航頁永遠保證新發(fā)布的文章排列在前面。這個JS文件其實就是一個記錄文章鏈接的“庫”文件。 因為數(shù)組是我們添加的，文章總數(shù)多少我們心中有數(shù)，而各頁顯示多少由我們設置，已知條件是充足的，為此在頁面文件中處理庫文件的JS程序可以相對簡單，避免了復

25、雜的編程。 作為實驗，我設置了一個JS庫文件，格式如下：var ycurl=new Array( 文章一標題, 文章二標題, 文章三標題, /這里按上面格式添加更多的文章，注意去年注釋符號/, 文章N標題) 這里略為解釋一下代碼：var是JS聲明變量的方法，我們的變量名稱為ycurl（意為原創(chuàng)欄目的鏈接），這是一個數(shù)組變量，所以后面有new Array()。小角括號里面即為該數(shù)組變量的組成元素，每個元素用小角單引號引起來，并且，除了最后一個元素，每一個元素結束時都用小角逗號作標志，這里一定要注意：最后一個數(shù)組元素結束不能有小角逗號。組成數(shù)組的元素本來是可以放在一行寫的，為了便于今后添加新元素，

26、我們令每個元素占一行。 把上面代碼保存為 yc_url.js 文件，然后在網(wǎng)頁調用它并編寫簡單的JS程序從該庫文件那里讀取內容且顯示出來。下面是具體的實現(xiàn)代碼： 調用庫文件（我們假設yc_url.js文件保存在與首頁文件同級的js目錄里。）： 這里注意調用js文件的路徑，比如，欄目導航頁是放在欄目所在目錄里，它要調用js目錄里的js文件，應該是，src=./js/ycurl.js，其中的“./”表示退一級目錄。處理庫文件的JS程序for(var i=0;i5;i+) document.write(ycurli+); 處理庫文件的JS程序用了for語句，它將從庫文件中從0元素開始遍歷數(shù)組元素（y

27、curl()），直至我們指定的變量i所提供的條件用完為止（上例中為i5，即從0到4遍歷），然后用document.write()方法把這些數(shù)組元素一一寫出來，每寫完一個加一個換行符（）。 變量i小于多少我們可以改變。我們希望在首頁顯示該欄目的最新五條信息，因此在for語句里令i5，而在“原創(chuàng)天地”導航頁是要顯示完全部的信息的，這就用上全部的數(shù)字，比如現(xiàn)在有22篇文章，那么，i22即是。 我已經(jīng)準備了一個本站的原創(chuàng)欄目的JS庫文件，有22條，下面我按上面討論的方法分別將結果演示如下： 首頁“原創(chuàng)天地”的最新更新文件列表（顯示五個信息）： HYPERLINK /yc/no4/dream.php t

28、 _blank 杯子裝不下海 HYPERLINK /yc/no4/bfwl.php t _blank 并非無聊 HYPERLINK /yc/no1/addw.php t _blank 黑馬灌水理論 HYPERLINK /yc/no4/daode.php t _blank 道德測試 HYPERLINK /yc/no4/corbie.php t _blank 烏鴉不吃腐肉之后 “原創(chuàng)天地”導航頁文件列表（顯示全部信息）： 原 創(chuàng) 天 地1 HYPERLINK /yc/no4/dream.php t _blank 杯子裝不下海2 HYPERLINK /yc/no4/bfwl.php t _blank

29、 并非無聊3 HYPERLINK /yc/no1/addw.php t _blank 黑馬灌水理論4 HYPERLINK /yc/no4/daode.php t _blank 道德測試5 HYPERLINK /yc/no4/corbie.php t _blank 烏鴉不吃腐肉之后6 HYPERLINK /yc/no4/tiger.php t _blank 老虎與人7 HYPERLINK /yc/no4/redfox.php t _blank 紅狐貍也包起了二奶8 HYPERLINK /yc/no4/lion.php t _blank 獅子 猴子和人9 HYPERLINK /yc/no4/lz&

30、kz.php t _blank 老子和孔子10 HYPERLINK /yc/no4/wrong.php t _blank 說說錯誤11 HYPERLINK /yc/no4/abuse.php t _blank 說罵12 HYPERLINK /yc/no4/bm.php t _blank 北門13 HYPERLINK /yc/no4/3n.php t _blank 年度人物14 HYPERLINK /yc/no4/dengai.php t _blank 鄧艾15 HYPERLINK /yc/no4/key.php t _blank 鑰匙串16 HYPERLINK /yc/no4/mhorse.p

31、hp t _blank 思念 馬及其他17 HYPERLINK /yc/no4/monkey.htm t _blank 猴子的政治18 HYPERLINK /yc/no4/fanfu.htm t _blank 校園開設反腐課程雜感19 HYPERLINK /yc/no4/beast.htm t _blank 人行獸行20 HYPERLINK /yc/no4/garbage.htm t _blank 垃圾21 HYPERLINK /yc/no4/lemming.htm t _blank 北極旅鼠22 HYPERLINK /yc/no4/swallow.htm t _blank 燕子 讀者可能發(fā)現(xiàn)

32、，“原創(chuàng)天地”欄目的文件列表有序號。這簡單，我們在for語句的下一行加入一句：j=i+1，然后把document.write()一句改為document.write(j+ +ycurli+);。 其他欄目如法炮制，靜態(tài)的站點就具備了動態(tài)的特征，JS的確太偉大了。八、JS分頁技術在靜態(tài)網(wǎng)中的使用 我們已經(jīng)討論了利用JS中實現(xiàn)站內資源共享的問題，如果掌握了，將來網(wǎng)站更新后的維護將會非常容易：只需要上傳新網(wǎng)頁和更新了的JS庫文件?，F(xiàn)在的問題是，當庫文件條目繁多，在同一個欄目導航頁面顯示全部的導航鏈接是不合理的，我們如何在網(wǎng)站欄目的導航頁面進行分頁？ 我們還是利用JS來完成。注意，這里只針對靜態(tài)HTM

33、L頁面，動態(tài)性質的頁面不能也不應該使用下面要介紹的方法（這類網(wǎng)頁自有其他方法），說明白一點就是，本法適用于文件后綴名為.htm或.html類的頁面。 我們分三個步驟： 步驟一：引用庫文件。 以下這行代碼可以放在之前一行，或放在的下一行，總之，它必須放在步驟三的JS代碼之前。此外，具體使用時，注意JS庫文件的路徑和名稱： 步驟二：設置顯示導航鏈接和頁碼的容器。在表格中設置兩組td標簽，再分別在其內放置兩個div標簽，兩個div都設置有id號以響應JS腳本的指令并顯示相應內容。代碼樣式如下： 顯示各頁的導航鏈接 顯示頁碼鏈接 步驟三：編寫分頁程序。 以下是筆者編寫的分頁JS代碼，如果覺得困難，就不

34、必去理解它，將以下JS代碼完整復制到的上一行即可。注意，如果你使用FP之類的網(wǎng)頁編輯器來編輯網(wǎng)頁，必須記住把編輯模式切換到HTML代碼模式下，找到相應位置，把輸入光標移到該位置，粘貼已經(jīng)復制到剪貼板的代碼。你也可以把下列的代碼放在表格的和之間，以便讓要顯示的文件列表部分與顯示鏈接頁的內容相隔離，就像我稍后提供的演示頁一樣。/注意變量ycurl應更改為庫文件中使用的變量名稱var pa_idx=0;function show_text(index) /顯示各頁文本內容 pg_idx=index; /得到頁碼序列號 var str_now=; /要顯示的文本； var total=ycurl.le

35、ngth; /要顯示的文本條目總數(shù) var show = 20; /每頁顯示的條目 var page = (total%show=0 ? total/show : Math.ceil(total/show); /所需要頁碼數(shù) /各頁顯示的內容: 頁碼序列 pg_idx 是各頁顯示什么內容的重要依據(jù) - 它和每頁顯示數(shù) show 的關系是算法關鍵 for(i=pg_idx*show;ipg_idx*show+show;i+) idx=i+1; if(itotal) str_now +=fm_idx(idx) + + ycurli + ; /只打印有效的內容 document.getElement

36、ById(mytext).innerHTML = str_now; /在 id 號為 text 的窗口打印內容 page_link(page); /調用并刷新頁碼鏈接函數(shù)/寫頁碼鏈接函數(shù)（num為總頁數(shù)）function page_link(num) var pg_str=第 ; /頁碼鏈接起始字串 for(i=0;inum;i+) /當前頁不提供鏈接, 否則提供 pg_str += (i=pg_idx ? + (i+1) + : + (i+1) + ); pg_str += 頁; /頁碼終結 document.getElementById(page).innerHTML = pg_str;

37、/在 id 號為 page 的窗口打印頁碼鏈接 function fm_idx(num) /規(guī)範化序號 res=( + num + ).length; switch(res) case 1: echostr=num + ; break; case 2: echostr=num + ; break; default: echostr=num; return echostr;show_text(0); /首次調用函數(shù)點擊 HYPERLINK /pc/no7/page.htm t _blank JS分頁技術演示頁面 HYPERLINK http:/gxblk.5x.to/heima/ t _blan

38、k 分頁導航頁面示範令程序無法通過或達不到你所要的目的，因此，在編寫JS代碼時，一定得細心，出錯或達不到目的后立即認真檢查、及時修改。 嵌入在HTML頁面中的JS程序要有語言宣告，格式如下：/JS代碼 語言宣告有起始和終止標志，第一行是宣告開始，最后一行是宣告結束。 嵌入式使用JS代碼還有一種不需要宣告的方法，它插入在HTML代碼中，這類用法也非常常見，黑馬在線動力的音樂島里的頁面文件為實現(xiàn)點播功能而這么使用了JS代碼。例： 文字 這里，使用了JS規(guī)范的onclick事件，也就是鼠標單擊事件，當鏈接縮“文字”有單擊動作發(fā)生，就執(zhí)行事先定義好的chgpage()函數(shù)。 這類用法靈活簡便，我們查看

39、那些不能選擇文本、不能使用鼠標右擊的網(wǎng)頁代碼會發(fā)現(xiàn)，在代碼域里就有相關的JS代碼。 如果把JS代碼做成文件留待各網(wǎng)頁將來調用，則無需宣告（也不要宣告），直接編寫。但JS文件的調用則又需要宣告，和嵌入HTML網(wǎng)頁代碼中大同小異（請注意比較），它們只需一行，格式如下： 同時要特別注意被調用的JS文件的路徑準確無誤。路徑可用相對路徑，也可用絕對路徑。這里談一下這兩種路徑： 1.相對路徑借用DOS下的路徑表達法，用符號（./）表示后退。例：src=yc_url.js 網(wǎng)頁文件與JS文件同級同目錄src=./yc_url.js 網(wǎng)頁文件在JS文件的下一級目錄src=./js/yc_url.js 網(wǎng)頁文件

40、與JS文件不在同一個目錄并需要后退 一步再進入JS的目錄src=././yc_url.js 網(wǎng)頁文件在JS文件的下兩級目錄src=././js/yu_url.js 網(wǎng)頁文件與JS文件不在同一個目錄并需要后退 兩步再進入JS的目錄 2.絕對路徑比較簡單，就是完整的文件地址，例： src=/pc/no7/mkweb/yc_url.js 對于經(jīng)常使用到的JS代碼，我們應該把它做成相應的JS文件，以提高代碼重用的效率。像JS分頁技術的步驟二和步驟三的代碼就完全可以做成一個JS文件，然后在各欄目導航首頁里調用它，今后如果修改、完善該分頁程序的功能，只需修改一個文件，工作效率大大提高。由于這兩個步驟所用的

41、變量或為從庫文件繼承而來，或為自身獨立的變量，它們將不受到具體網(wǎng)頁的干擾，做成JS文件是有理由的。當然，要做成JS文件，兩個步驟的代碼及顯示效果應該是分開的，我們還需要花點心思對付一下，用document.write來寫兩個表格讓它們分開：/表格一：裝載文件列表document.write(table border=0 align=center width=100%);/步驟二的代碼document.write();document.write(table border=0 align=center width=100%);/表格二：裝載分頁鏈接document.write(table bor

42、der=0 align=center width=100%);/步驟三代碼document.write(); 以上代碼中，用JS繪制的表格都用了100%的寬度，所以，需要在具體頁面中再用有固定寬度的表格來框住它，以免頁面布局出現(xiàn)混亂現(xiàn)象。 裝載文章鏈接的JS庫文件里面，各文章鏈接應該使用絕對路徑，這樣才能保證不同級別目錄和不同目錄下的網(wǎng)頁文件調用后鏈接有效。對于資源（如圖片）的引用，如果在JS文件里出現(xiàn)，也建議用絕對路徑表達它們的地址，這樣才能在任何一個地方調用該JS文件時，該JS文件對資源文件地址的指向是正確的。 最后提一下：如果你有志于深透學習JavaScript，請去查找其他的學習顏料，

43、網(wǎng)上有的是。本教程只是討論它用利于實現(xiàn)“動態(tài)”功能的一面，本站的JS教程也有相應的針對性，對JS的介紹都不可能全面、深入。十、編寫和使用的CSS樣式表 如今我們仍然喜歡使用表格來布局網(wǎng)頁。我們知道，表格的高度和寬度是會變化的，比如，表格里放置一張大圖片，或者，在表格里插入一根寬度大于表格寬度的分隔線，表格就會被撐寬或撐高，效果不是預期的。再有，瀏覽器的字體是可以臨時設定的，方法很簡單：單擊瀏覽器的菜單“查看文字大小”選擇一種字號，比如“最大”。這時，你的網(wǎng)頁的文字大小就變了，像導航條之類的表格就可能嚴重變形，甚至出現(xiàn)一行變成兩行的現(xiàn)象。 為了克服上述問題，除了在設置網(wǎng)頁時注意表格里面的占位元素

44、不寬于外表格外，我們還應該有其他措施，以避免訪問者的瀏覽器臨時設置而造成網(wǎng)頁布局混亂現(xiàn)象。 默認情況下，用了CSS樣式表來規(guī)范網(wǎng)頁文字大小后，瀏覽器的“查看文字大小”的選擇將不能影響文字大小。CSS樣式表還有更強大和靈活的功能，用好它將能使我們的網(wǎng)站規(guī)范而富有個性。 如此強大的樣式表，學起來肯定不容易。實用至上，我們無需全面學習它，只用我們用得著的部分。 讓我們用FP（這里以FP2000為例，實際上用FP2003更好設置一些）來制作CSS樣式表。啟動FP2000，新建一個空白文件，在“普通”編輯模式狀態(tài)下點擊菜單“格式樣式”，將彈出“樣式”設置窗口。在這里，我們將設置幾個內容。 1.先設置bo

45、dy樣式： 在左邊欄選擇body標志，雙擊它，將彈出“修改樣式”窗口，在該窗口點擊“格式字體”，在彈出的字體設置窗口設置文字的字體、字號和顏色，字號單位建議使用pt，如10pt就比較理想，設置好單擊確定按鈕。如果覺得有必要，再從“格式段落”設置一下段落對齊、首行縮進等屬性。 2.設置table、td樣式： 再次進入“格式樣式”窗口，得先選擇一下左下方“列表”的標志為“所有的 HTML 標志”才能找到table，如上設置好字體和所需要的項目，設置好tabel再設置td； 如果table，td的樣式是一樣的，可在代碼中將它們合并，格式如下： table,td font-size: 10pt; fo

46、nt-family: 宋體 3.設置鏈接樣式： 超級鏈接樣式有四項內容需要設置：a:link，a:hover，a:visited，a:active。其含意分別如下：a:link 未作任何操作時的樣式和前景色a:hover 鼠標指針移到時的樣式和前景色a:active 鼠標指針按下時的樣式和前景色a:visited 訪問過的樣式和前景色 很遺憾，在FP2000，所有的HTML標志里只有a一項，且不能進行更全面的操作。不用理睬它，先設置好a可設置的內容再說。設置完后，切換到HTML代碼，我們將看到在 . 的下面有 . 段落，它就是我們前面設置的CSS樣式表。我們根據(jù)a .一節(jié)的內容，來添加上述四個

47、超級鏈接的樣式，可以在大括號里修改、添加其他的內容，以下是我做的一個鏈接樣式：a:link font-family: 宋體; font-size: 10pt; color: #008800; text-decoration: none; a:hover font-family: 宋體; font-size: 10pt; color: #008800; text-decoration: underline;a:visited font-family: 宋體; font-size: 10pt; color: #998800; text-decoration: none a:active font-

48、family: 宋體; font-size: 10pt; color: #008800; text-decoration: none 編輯好以上內容后，a . 一行就不用保留了。 上面的鏈接樣式中，內容很簡單，有字體、字號、顏色和文本樣式（是否需要下劃線，text-decoration: underline表示有，text-decoration: none表示不要）。 4.設置其他的內容，比如，如果你經(jīng)常用到h1、h2等HTML標志，可以設置它，或者今后需要了再補充也行。 5.設置自定義標志?；蛟S你還需要其他的樣式以備將來之用?？梢酝ㄟ^FP來做，然后再切換到代碼完善它。具體操作：在“樣式”設置

49、窗口選擇“用戶定義的樣式”，單擊“新建”按鈕，在“名稱（編輯器）”里輸入英文名字，比如red，單擊確定按鈕，然后設置一下字體字號什么的，確定。切換到HTML代碼，你會發(fā)現(xiàn)style里多了一個red標志，它的樣式如下：.red color: #FF0000; font-family: 宋體; font-size: 14pt; font-weight: bold 注意它前面有一個小角句號（“.”），這是表示用戶自定義的CSS樣式項目，以后如果用代碼直接設置CSS，凡屬于自定義的而不是系統(tǒng)保留有的，都在名稱的前面加一個小點。上面的.red樣式中，還有一個地方值得注意，font-weight:bold

50、，表示粗體，將來用來做標題用挺不錯，醒目。但是，要使用自定義的樣式表，需要在代碼中加以說明，我們舉個例。在“普通”編輯模式下，輸入一行文件，完后回車，切換到HTML代碼模式，找到這行文字，在里的p的后面加入 class=red（），預覽或切換到“普通”樣式，馬上可見到效果。 自定義樣式表應該建立幾個項目（包括鏈接樣式），方便不同背景的頁面或和特殊需要的地方調用。 CSS可以做成獨立的文件，供以后各網(wǎng)頁使用?，F(xiàn)在來介紹一下操作方法。 在FP2000里切換到HTML模式，把從到的內容剪切出來，粘貼到記事本里，把 和 兩行刪除掉，如果有 標志也刪除掉。在記事本里保存為“所有文件”，文件名為web.c

51、ss（也可以是其他名字，但必須為小字字母和阿拉伯數(shù)字，后綴名只能是.css），注意保存在你的站點文件夾里（我們在第一節(jié)建立的目錄myweb），可以在那里用一個單獨的文件夾保存，也可以跟首頁文件同一目錄。接著我們來調用該CSS文件：在FP2000的“普通”編輯模式下，單擊菜單“格式樣式表鏈接”，在彈出的“鏈接樣式表”窗口單擊“添加”按鈕，在彈出的“選擇超鏈接”窗口點擊右下角最右邊的“瀏覽”圖標，找到剛才保存的CSS文件，確定，樣式表立即生效。此時，切換到HTML代碼模式，在.的下一行，有如下調用CSS文件的代碼： 這就是調用CSS文件的代碼，今后可以直接在代碼中這樣使用，注意修改href=后面的

52、文件路徑即可；路徑也可以是絕對路徑：假設你已經(jīng)上傳一個CSS文件到你的空間，用完整的路徑引用它。 在網(wǎng)頁中使用CSS樣式表還有一種方式，嵌套到HTML代碼中，這種方式靈活但不便于批量維護。此用法大家可以自行研究或參考其他資料。 高效地使用CSS的方式是把CSS做成文件，因為，今后如果需要修改網(wǎng)站的文字、鏈接等樣式，只需修改一個或少數(shù)幾個文件，不必每張網(wǎng)頁都去修改。十一、制作網(wǎng)頁模板 首頁和欄目導航頁以外的頁面文件通稱“普通網(wǎng)頁”。這里，我不想談如何去制作網(wǎng)頁，這個工作相信你已經(jīng)可以通過使用FP或DW來完成了，我們要討論的是制作網(wǎng)頁模板。 普通網(wǎng)頁不同于首頁和欄目導航頁，它的目的是如何展現(xiàn)你的意

53、圖和思想，更大程度上依賴于網(wǎng)頁的內容而不是網(wǎng)頁的外觀。你的文章，你的Flash作品，你的圖片，或者你的音樂，它們的品質才是網(wǎng)頁核心。內容放在第一位的理念不等于可以忽略表現(xiàn)形式，恰當?shù)谋磉_方式可以起到推波助瀾的作用，效果有時讓你想象不到。內容與形式的完美結合，在這個注重包裝的網(wǎng)絡平臺顯得更為重要。 精美的文章，用精美的頁面向人展示，這是做網(wǎng)人追求的完美境界。在制作一張網(wǎng)頁之前，根據(jù)其內容，構思一下它的風格，然后精心制作，使之表里如一。 然而，每一張網(wǎng)頁都從空白頁開始制作，勞動量之大可想而知。我們得充分考慮一下如何解決勞動量和表現(xiàn)風格的問題。 每個網(wǎng)站都有自己的特色，我們稱之為整體風格。整體風格體

54、現(xiàn)在整個網(wǎng)站的所有頁面上。一個優(yōu)秀的網(wǎng)站，其整體風格可從網(wǎng)站的導航條、底部信息、兩邊方陣的元素等體會出來，這是從網(wǎng)站的空間布局上著眼；網(wǎng)站的風格還體現(xiàn)在色彩的配套體系之上，一個好的網(wǎng)站，它的用色都有自己的習慣以及繼承性很強的用色方案，具體體現(xiàn)在文字的色彩、各區(qū)域的底色、表格或圖片的邊框顏色、可視容器陰影的使用等等；從其他的實現(xiàn)技術看，還有更多的內容可展現(xiàn)一個網(wǎng)站的風格，比如，一統(tǒng)化的CSS樣式、分頁的風格、廣告的位置、體貼用戶的交互功能模塊、站點的統(tǒng)計信息所有這些，都參與著左右網(wǎng)站的總體風格。 新手不可能面面俱到，我們可以邊做邊修正和完善。開始時不可能一切都醞釀好了，但大致的框架和粗略的風格還

55、是要有，至少要做出自己的特色來。 一般來說，以800600的分辨率為例，如果是文字類網(wǎng)頁，我們不可能讓一行文字以800個像素的寬度顯示出來，這樣不方便閱讀，而如今，液晶顯示器的標準分辨率最低為1024768，我們不考慮一下頁面的布局是不現(xiàn)實的。為此，做幾種符合我們審美要求的模板非常有必要，做好后，我們如果要編寫新的頁面，就選擇合適的模板，然后往模板上相應的地方填寫內容，最后保存網(wǎng)頁文件即可。 我們現(xiàn)在來著手設計一個模板。這個模板將與首頁有些相似的結構：上面有網(wǎng)站Logo和導航行，左邊有一個方陣用于顯示網(wǎng)頁所屬欄目的最新更新，右邊為網(wǎng)頁的核心內容，底部為網(wǎng)站信息。顯然，這么設計具有布局上的繼承性

56、，當然你也可以根據(jù)需要設置其他的樣式。 為了方便設置，我們不妨用FP打開已經(jīng)設置好的首頁文件，然后單擊FP菜單“文件另存為”，在網(wǎng)頁所在目錄建立一個“模板”文件夾（可用中文，因為，它是不用上傳到服務器的），把文件保存為“原創(chuàng)模板”（我們將把它設置為原創(chuàng)欄目的模板）。這時候，查看一下HTML代碼，你會發(fā)現(xiàn)，所用到的圖片路徑，F(xiàn)P已經(jīng)自動修改過了。接下來，我們把正文部分也就是右邊的部分全部刪除（文字和嵌套插入的表格），再插入一個我們所需要的表格（寬度100%，像素，邊距6，邊框1，邊框顏色與導航條底色一致），設置一下單元格邊框顏色為白（以達到整體邊框為細線的目的），輸入“標題”、“作者”、“正文”

57、三行文字，設置文字的字體和顏色（最好使用CSS樣式表）。接著設置一下左邊欄，完成后預覽一下看看效果，不合意再修改。 我們在前面章節(jié)談論到使用JS格式化網(wǎng)站結構，為此，雖然上面的模板制作方法很不錯，但是，還是需要把頭尾部分用JS來完成。方法略，有必要的話請回到前邊的相關章節(jié)查看。 設置好后，我們再把它保存為FrontPage模板文件：單擊FP菜單“文件另存為”，選擇文件類型為“FrontPage模板文件”，文件名上輸入一個名稱（如原創(chuàng)模板），在彈出的窗口如圖輸入相關信息，確定。今后，我們新做網(wǎng)頁，打開FP，點擊菜單“新建網(wǎng)頁”，會彈出一個選擇模板的窗口，找到我們設計的模板，單擊它，會在該窗口的右

58、邊有預覽，單擊確定即可開始使用我們的模板來做新的網(wǎng)頁了。 有了模板，今后做新網(wǎng)頁就不必從頭開始，勞動效率大大提高，同時，模板是我們依據(jù)需要精心設計的，它符合網(wǎng)站總體風格的要求，很好地解決了本節(jié)前面所提到的問題。 如果你熟悉HTML代碼，也可以制作TXT文件風格的模板，我就這么做。它的缺點是不能實時預覽，得做好后在瀏覽器中查看效果，不理想再修改，不便于校對。但它節(jié)省資源、速度很快記事本占內存很少。十一、做網(wǎng)頁應該注意的幾個問題關于超級鏈接 鏈接有站內鏈接指向非本站的鏈接。我們先來談論前者，站內鏈接。 站內的鏈接，來來回回都在本站之內，我們要討論的問題是鏈接的目標框架問題。目標框架的概念可能不好理

59、解，其實它指的就是當用戶點擊了一個鏈接，這個鏈接將以什么樣的方式打開新的頁面，即在同一窗口打開還是在新的窗口打開；它還有其他的方式，如指向網(wǎng)頁設計者定義的書簽、執(zhí)行預定義的程序、可視部分移到本頁的頭尾等等。我們主要討論在新窗口和在同一頁打開鏈接的選擇問題。 總在新窗口打開鏈接不是明智的，相反，總在同一頁打開也不對。像IE這樣的瀏覽器，如果總在新窗口打開你提供的鏈接，IE窗口就越來越多，訪問者一下子就有太多的IE窗口，資源消耗過大，也會混淆各窗口之間的關系，弄不好會一頭霧水。即便是像Maxthon、TT這類有子窗口的瀏覽器，子窗口太多也容易找不著北。所以我們在做超級鏈接時應該做些選擇，一般的原則

60、是，從首頁進入欄目導航在同一頁打開，從導航頁面進入具體內容的頁面在新窗口打開，從有具體內容的頁面進入相同級別的頁面在同一窗口打開。不論是何種級別的頁面，都應該提供返回首頁、次首頁的鏈接且它的位置比較明顯。 往站外的鏈接，通常應該選擇在新窗口打開，否則訪客一點擊你提供的鏈接就從你的網(wǎng)站跑開了，這應該不是你所希望的。 下面講講做鏈接的方法。 方法一：在FP“普通（設計）”編輯模式下制作。 選中你要做鏈接的文字（圖片），右擊它選擇“超鏈接”，將彈出一個創(chuàng)建超鏈接窗口，在該窗口選擇站內的某個文件（適用于站內鏈接），或直接在URL文本框輸入要鏈接的地址（適用于站內站外鏈接），單擊“目標框架”（右下方）右