網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-5-1 課件：企業(yè)網(wǎng)站測試

第二篇：項(xiàng)目實(shí)戰(zhàn)篇任務(wù)5：企業(yè)網(wǎng)站測試與發(fā)布5.1

網(wǎng)站測試5.1網(wǎng)站測試（1）掌握對靜態(tài)網(wǎng)站測試的方法。（2）了解瀏覽器中常見的BUG問題。（3）掌握對瀏覽器中常見BUG的修復(fù)。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述對已制作完成的“英博特智能科技”企業(yè)網(wǎng)站進(jìn)行可用性測試、兼容性測試、打印機(jī)測試和顯示代碼合法性檢查。5.1網(wǎng)站測試任務(wù)思考（1）如果讓你來對制作的網(wǎng)站進(jìn)行測試，你會怎么測試？（2）網(wǎng)站測試有測試工具嗎，請舉例？（3）網(wǎng)站的兼容性是指什么？5.1網(wǎng)站測試網(wǎng)站測試對網(wǎng)站進(jìn)行測試是保證整體項(xiàng)目質(zhì)量的重要一環(huán)。網(wǎng)站的測試包括功能測試、性能測試、安全性測試、穩(wěn)定性測試、瀏覽器兼容性測試、可用性/易用性測試、鏈接測試、代碼合法性測試等。負(fù)責(zé)該項(xiàng)任務(wù)的人員要具備三心：耐心、細(xì)心、專心，才能更好的完成測試。5.1網(wǎng)站測試網(wǎng)站可用性測試整體頁面測試導(dǎo)航測試圖形測試內(nèi)容測試表格測試5.1網(wǎng)站測試整體頁面測試大致包括如下內(nèi)容的測試：整個(gè)系統(tǒng)的界面是否保持一致，操作是否友好。界面是否存在錯(cuò)別字。界面上的按鈕樣式是否一致。界面中的表單元素，如按鈕、下拉框、復(fù)選框等是否有響應(yīng)。界面所有的鏈接是否正常。界面所有的展示圖片是否樣式一致。界面所有的列表頁標(biāo)題字是否會換行，標(biāo)題字對齊方式是否一致。頁面在不同瀏覽器下是否會發(fā)生異常。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行整體頁面測試，并將測試結(jié)果填寫到表2-5-1中。5.1網(wǎng)站測試導(dǎo)航測試在導(dǎo)航測試中需考慮到如下內(nèi)容：網(wǎng)站是否易于導(dǎo)航，導(dǎo)航是否直觀。網(wǎng)站的主要部分是否可通過主頁進(jìn)行訪問。網(wǎng)站導(dǎo)航是否準(zhǔn)確。網(wǎng)站的頁面結(jié)構(gòu)、導(dǎo)航、菜單、連接的風(fēng)格是否一致。廣告圖片的點(diǎn)擊是否正常，點(diǎn)擊后打開的頁面是否正確。頁面鏈接是否可以正常點(diǎn)擊，點(diǎn)擊后鏈接到的位置是否正確。鏈接點(diǎn)擊后是否正常的發(fā)生顏色變化。鏈接的打開方式是否合理（當(dāng)前窗口、新窗口），是否符合產(chǎn)品設(shè)計(jì)。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行導(dǎo)航測試，并將測試結(jié)果填寫到表2-5-2中。5.1網(wǎng)站測試圖形測試一個(gè)網(wǎng)站中的圖形可以包括圖片、動畫、邊框、顏色、字體、背景、按鈕等。圖形測試的內(nèi)容如下：要確保圖形有明確的用途。網(wǎng)站圖片尺寸要盡量小，并且要能清楚地說明某件事情，一般都有鏈接到某個(gè)具體的頁面。驗(yàn)證所有頁面字體的風(fēng)格是否一致。背景顏色應(yīng)該與字體顏色和前景顏色相搭配。檢查圖片的尺寸、位置是否符合需求。對廣告圖片的點(diǎn)擊是否正常，點(diǎn)擊后打開的頁面是否正確。頁面上具有相同意義的圖標(biāo)應(yīng)保持一致。對于鏈接其他網(wǎng)站的圖片，無法顯示時(shí)是否有容錯(cuò)性處理。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行圖形測試，并將測試結(jié)果填寫到表2-5-3至表2-5-8中。5.1網(wǎng)站測試內(nèi)容測試內(nèi)容測試用于檢測網(wǎng)站提供信息的準(zhǔn)確性和相關(guān)性。其中信息的準(zhǔn)確性是指是否有語法或拼寫錯(cuò)誤；信息的相關(guān)性是指是否在當(dāng)前頁面可以找到與當(dāng)前瀏覽信息相關(guān)的信息列表或入口，也就是一般web站點(diǎn)中的所謂“相關(guān)文章列表”。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行內(nèi)容測試，并將測試結(jié)果填寫到表2-5-9中。5.1網(wǎng)站測試瀏覽器兼容性測試對于網(wǎng)頁來說，需做好瀏覽器兼容，才能夠讓頁面在不同的瀏覽器下都正常顯示。但因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同，且用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能達(dá)到理想效果。最常見的問題就是網(wǎng)頁元素位置混亂和錯(cuò)位。目前暫沒有統(tǒng)一的能解決這樣問題的工具，最普遍的解決辦法就是不斷地在各瀏覽器間調(diào)試網(wǎng)頁顯示效果，通過對CSS樣式控制及通過腳本判斷并賦予不同瀏覽器的解析標(biāo)準(zhǔn)。包括：網(wǎng)頁中的標(biāo)簽問題、div的垂直居中問題、margin加倍的問題、浮動IE產(chǎn)生的雙倍距離、寬度和高度的問題、DIV浮動IE文本產(chǎn)生3像素的BUG、float清除浮動、圖片間有空白間隙問題、不同瀏覽器對實(shí)際像素的解釋、應(yīng)用條件注釋實(shí)現(xiàn)瀏覽器兼容、常用hack方法兼容等。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行內(nèi)容測試，并將測試結(jié)果填寫到表2-5-10中。5.1網(wǎng)站測試表格測試對于表格的測試重要包容如下幾個(gè)方面：整個(gè)表格寬度應(yīng)該小于屏幕大小，不會出現(xiàn)橫向滾動條。每一欄的寬度要足夠，表格里的文字不能有折行。不能因?yàn)槟骋桓竦膬?nèi)容太多，而將整行的內(nèi)容拉長。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行表格測試。5.1網(wǎng)站測試打印測試有時(shí)在屏幕上顯示的圖片和文本的對齊方式可能與打印出來的不一樣。因此網(wǎng)頁在設(shè)計(jì)的時(shí)候還需要考慮到打印問題，注意節(jié)約紙張和油墨。而測試人員至少需要驗(yàn)證如訂單確認(rèn)、文章詳情等頁面的打印是正常的。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行打印測試。5.1網(wǎng)站測試顯示代碼合法性測試顯示代碼的合法性檢查，主要分為HTML、JavaScript、CSS代碼的檢查，這些都可以借助一些測試工具來完成。在本任務(wù)中選擇了W3CWEB標(biāo)準(zhǔn)驗(yàn)證()，對網(wǎng)頁文檔和CSS的合法性進(jìn)行了檢測。代碼合法性檢測中，需要關(guān)注如下幾點(diǎn)：①文檔類型聲明位于HTML文檔的第一行。②使用小寫元素名更易編寫。③HTML的每個(gè)元素都要關(guān)閉標(biāo)簽。④屬性值使用引號更易于閱讀。⑤圖片中要使用alt屬性，用于當(dāng)圖片不能顯示時(shí)替代圖片顯示。⑥使用簡潔的的語法來載入外部的腳本文件，type屬性不是必須的。5.1網(wǎng)站測試任務(wù)實(shí)施請對自己完成的“英博特智能科技”網(wǎng)站進(jìn)行代碼合法性測試。5.1網(wǎng)站測試討論區(qū)請完成對“英博特智能科技”網(wǎng)站的測試，測試結(jié)論和修改意見填寫在給定的表格中。5.1網(wǎng)站測試完成7個(gè)在線測試題運(yùn)用本課學(xué)