第14章網(wǎng)站的調(diào)試與發(fā)布14.1常見錯誤14.2HTML中的常見錯誤14.3CSS中的常見錯誤14.4驗證代碼14.5測試網(wǎng)頁14.6發(fā)布網(wǎng)站14.7綜合實例返回14.1常見錯誤現(xiàn)將如何檢查這些常見的錯誤歸納如下:(1)對代碼進(jìn)行驗證，對代碼語法的相關(guān)錯誤進(jìn)行排查。(2)確認(rèn)需要測試的文件已經(jīng)上傳。(3)確認(rèn)上傳的文件的位置是正確的。(4)確認(rèn)輸入的URL與需要測試的文件是對應(yīng)的，如果查看的頁面是從另一個頁面中跳轉(zhuǎn)過來的，就需要確認(rèn)鏈接中的URL與頁面的文件名和位置是否完全匹配。(5)確認(rèn)上傳的文件已經(jīng)保存過了。(6)確認(rèn)上傳了所有的輔助文件，包括CSS文件、圖像文件、音頻文件以及視頻文件。下一頁返回14.1常見錯誤(7)確認(rèn)URL的大小寫沒有問題，確認(rèn)文件名中沒有使用空格。(8)確認(rèn)測試時禁用的功能是否已經(jīng)重啟。(9)換個瀏覽器進(jìn)行測試，確認(rèn)瀏覽器是否有問題。上一頁返回14.2HTML中的常見錯誤下面介紹HTML中的常見錯誤。(1)輸入錯誤。輸入錯誤是很容易出現(xiàn)的，也是比較難檢查出來的，因為人們?nèi)菀走M(jìn)入思維定式。但是拼寫和屬性值的設(shè)置必須確保正確。使用HTML驗證器可以查出這種錯誤。(2)元素的嵌套。由于HTML代碼都是由元素組成的，元素的嵌套是非常容易出錯的，需要特別注意。(3)屬性值引號的使用。當(dāng)屬性值內(nèi)容里面需要用到引號的時候，那么引用屬性值使用引號的時候就需要注意，當(dāng)屬性值是用雙引號包圍的時候，則屬性值中間可上一頁下一頁返回14.2HTML中的常見錯誤以使用單引號。(4)元素的開始標(biāo)記和結(jié)束標(biāo)記。一般的元素都有開始標(biāo)記和結(jié)束標(biāo)記，使用的時候需要注意正確使用，不要對空元素使用分開的開始標(biāo)記和結(jié)束標(biāo)記。雖然對于網(wǎng)頁的顯示來說，對空元素添加結(jié)束標(biāo)記，瀏覽器也能正確顯示，但是我們需要的嚴(yán)謹(jǐn)?shù)木幋a習(xí)慣。上一頁返回14.3CSS中的常見錯誤雖然CSS的語法非常簡單，但是在書寫CSS代碼的時候也會出現(xiàn)一些常見錯誤。CSS的錯誤也可以使用驗證器來查找。下面我們來看看這些常見錯誤。(1)屬性和屬性值的分隔。在CSS中，屬性和屬性值是通過冒號分隔開來的，而在HTML代碼中，屬性和屬性值是通過等號分隔的，所以在書寫的時候要注意不要因為習(xí)慣HTML代碼而將CSS代碼寫錯。(2)分號的使用。在CSS代碼中，每個聲明結(jié)束后都應(yīng)該有一個分號，不要多也不要少。想更清晰地檢查分號的使用，最好的方法就是讓每個聲明都單獨占一行，這樣錯誤就更容易發(fā)現(xiàn)了。下一頁返回14.3CSS中的常見錯誤(3)注意單位的使用。在有些聲明中需要使用單位，在單位前面出現(xiàn)的是數(shù)值，數(shù)值和單位之間是不允許出現(xiàn)空格的。(4)屬性和屬性值的匹配。在使用屬性和屬性值的時候，要注意它們之間的匹配。(5)使用樣式表時，不要丟掉了</style>結(jié)束標(biāo)記。(6)建立正確的HTML文檔指向CSS文件，而且保證URL地址正確。(7)使用選擇器時應(yīng)注意空格和符號的使用。(8)確認(rèn)瀏覽器是否支持編寫好的CSS代碼，特別注意新的語法。(9)確認(rèn)括號的配對。上一頁返回14.4驗證代碼1.安裝FirebugFirebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級強(qiáng)力推薦插件之一。它集HTML查看和編輯,JavaScript控制臺、網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript,CSS,HTML和Ajax的得力助手。Firebug的界面如圖14-2所示。Firebug包含了7個標(biāo)簽:控制臺HTML,CSS、腳本、DOM、網(wǎng)絡(luò)、Cookies。2.HTML代碼驗證使用HTML驗證器可以在瀏覽器解析文檔結(jié)構(gòu)之后對結(jié)構(gòu)進(jìn)行檢查，將它與預(yù)期的元素嵌套進(jìn)行比較，這可以幫助我們快速定位標(biāo)記格式不正確、元素為閉合或者過早閉合等錯誤。下一頁返回14.4驗證代碼HTML標(biāo)簽是Firebug中的第二個標(biāo)簽，它分兩個視圖，左邊的視圖可以查看HTML代碼，右邊的視圖又分為4個子面板:樣式、計算出的樣式、布局和DOM?！按a視圖”面板位于HTML標(biāo)簽的左邊，它以層次結(jié)構(gòu)展示HTML代碼，而且將不同的關(guān)鍵字標(biāo)以不同的顏色，相當(dāng)人性化。它還允許我們隨意地將元素進(jìn)行折疊或展開，這樣就很容易使我們快速掌握一個web頁面的大致結(jié)構(gòu)?！按a視圖”面板還有一個相當(dāng)不錯的功能，就是可以對即時打開的web頁面中的各種元素進(jìn)行刪除、增加、屬性修改等操作，而且操作后的效果將立即在瀏覽器上展現(xiàn)出來，如圖14-3所示。在Firebug中審查段落時，F(xiàn)irefox在遇到有錯的代碼時會將HTML按上一頁下一頁返回14.4驗證代碼照語法理解成其他的代碼。Firefox瀏覽器在解析HTML時，會試著修復(fù)錯誤，并在顯示頁面時改變文檔的底層結(jié)構(gòu)。3.CSS代碼驗證Firebug的CSS查看器不僅自下向上列出每一個CSS樣式表的從屬繼承關(guān)系，還列出了每一個樣式在哪個樣式文件中定義。用戶可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，并可在當(dāng)前頁面中直接看到修改后的結(jié)果。如果總記不住常用的樣式表有哪些值，可以嘗試在CSS調(diào)試器中選中一個樣式表屬性，然后用上下方向鍵來改變它的值，它會把可能的值一個個遍歷給你看，如圖14-4所示。上一頁下一頁返回14.4驗證代碼4.驗證代碼驗證代碼的步驟如下:(1)使用http;//htm15.validator.nu或http;//validator.w3.org對HTML進(jìn)行檢查。在http;//htm15.validator.nu中，將需要檢查的URL粘貼到Address字段(如果沒有發(fā)布到網(wǎng)絡(luò)中，就選擇FileUpload選項，也可以選擇TextField，直接手動輸入代碼)，選擇ShowSource選項，這樣HTML源代碼就會出現(xiàn)在驗證器找到的錯誤的下方，有錯誤的HTML片段會突出顯示，如圖14-6所示。(2)修復(fù)標(biāo)出來的HTML錯誤，保存修改，再將文件上傳到服務(wù)器，重復(fù)步驟(1)中的操作。上一頁返回14.5測試網(wǎng)頁測試HTML頁面的步驟如下。(1)按照驗證代碼的方式對HTML和CSS進(jìn)行驗證，對里面提出的問題作出相應(yīng)修改。(2)在瀏覽器中打開需要測試的頁面，檢查整個頁面，確保其和期望的一樣。(3)在不關(guān)閉瀏覽器中頁面的情況下，打開有關(guān)的HTML和CSS文檔，作出相應(yīng)修改并保存，然后刷新頁面查看修改的結(jié)果。(4)重復(fù)步驟(2),(3)，直到達(dá)到預(yù)期結(jié)果為止。(5)在其他瀏覽器中重復(fù)步驟(2)~(4)，確認(rèn)在其他瀏覽器中也能達(dá)到預(yù)期目標(biāo)。(6)測試完畢。下一頁返回14.5測試網(wǎng)頁在測試的過程中，檢查代碼是否達(dá)到了預(yù)期目標(biāo)主要考慮以下幾點(1)格式是否和預(yù)期的一致;(2)鏈接的URL是否指向了正確的頁面或資源;(3)CSS文件是否引用正確;(4)插入頁面的圖像能否正確顯示。上一頁返回14.6發(fā)布網(wǎng)站1.獲得域名獲得域名的步驟如下(1)首先查看一下域名注冊商的信息(詳見~w.internic.net/alpha.html)，首先看一下自己設(shè)計的域名是否可以用，另外也可以在服務(wù)商的網(wǎng)站上查詢一下域名是否可用。(2)當(dāng)找到一個合適的域名以后，接下來就是注冊了，可以自己注冊也可以通過服務(wù)商代為注冊。不同域名注冊商的價格是不一樣的。(3)注冊以后，就可以使用了。2.為網(wǎng)站尋找主機(jī)除非自己有服務(wù)器，一般都需要尋找為網(wǎng)站提供服務(wù)的服務(wù)商。在考慮服務(wù)商時，除了考慮價格問題，還應(yīng)該考慮下面的問題:下一頁返回14.6發(fā)布網(wǎng)站(1)提供使用的磁盤空間有多大。(2)允許每個月使用的數(shù)據(jù)傳輸量有多大。(3)當(dāng)網(wǎng)站崩潰時是否有應(yīng)急措施。(4)使用域名可以創(chuàng)建多少郵箱，可以提供的技術(shù)支持有哪些，應(yīng)隔多久備份服務(wù)器上的數(shù)據(jù)。(5)是否提供Web分析報告，通過這些報告我們可以分析訪問網(wǎng)站的情況。3.將文件傳送至服務(wù)器(1)新建站點。(2)設(shè)置站點服務(wù)器。上一頁返回14.7綜合實例根據(jù)本章介紹的網(wǎng)站調(diào)試與發(fā)布的知識，完成如下步驟。具體操作步驟如下:(1)準(zhǔn)備好需要進(jìn)行調(diào)試和發(fā)布的