1、第1章 網頁制作基礎 第1章 網頁制作基礎學習目標þ 了解網頁制作基礎知識þ 掌握網頁制作的一般步驟þ 掌握網頁制作的原則和技巧目標任務&項目案例 天涯社區網站首頁 淘寶交易網站 郵箱登錄界面 郵箱注冊頁面網絡以其獨特的優勢滲入到人們的生活中，并已成為生活的一個重要組成部分，而網頁在整個網絡中占據了絕對的分量，幾乎所有的網絡活動都與網頁有關。若想學習網頁制作，需先了解一些網頁的基本知識，如網頁的定義、分類以及網頁制作的基本步驟和規則等。本章將講解網頁制作的基礎知識，為以后學習網頁制作做好鋪墊。1.1 網頁制作基礎知識學習網頁制作應先了解網頁的基本概念，學好

2、這些知識是制作出漂亮、美觀的網頁的前提，為以后的學習打好基礎。1.1.1 網頁的定義和分類上網時瀏覽的一個個頁面就是網頁，網頁又稱為Web頁，其中的圖像、文字、超級鏈接等是構成網頁的基本元素，如圖1-1所示即為榕樹下網站的首頁。網頁可按其在網站中的位置分類，也可按其表現形式分類。下面將分別進行講解。圖1-1 榕樹下網站首頁1按位置分類按網頁在網站中的位置可將其分為主頁和內頁，主頁是指網站的主要導航頁面，一般是進入網站時打開的第一個頁面，也稱為首頁；內頁是指與主頁相鏈接的頁面，也就是網站的內部頁面。U提示：一些網站的首頁并非主頁，其作用只是為了歡迎訪問者或者引導訪問者進入主頁，所以首頁并不一定就

3、是主頁。2按表現形式分類按網頁的表現形式可將其分為靜態網頁和動態網頁，具體含義如下。è 靜態網頁：指用HTML語言編寫的網頁，其制作方法簡單易學，但缺乏靈活性。è 動態網頁：這類網頁使用ASP、PHP、JSP和CGI等程序生成，具有動態效果，其制作方法較靜態網頁復雜。%注意：靜態網頁和動態網頁不是以網頁中是否包含動態元素來區分的，而是針對客戶端與服務器端是否發生交互行為而言的。不發生交互的是靜態網頁，發生交互的是動態網頁。1.1.2 網頁的基本概念在網頁制作過程中常常會遇到一些專業名詞，如站點、發布、瀏覽器、導航條、超級鏈接、表單、URL、IP地址以及域名，需掌握其具體含義

4、才能在網頁制作過程中輕松操作。下面分別講解這些專業名詞。è 站點：站點是一個管理網頁文檔的場所，簡單地講，一個個網頁文檔鏈接起來就構成了站點。站點可以小到一個網頁，也可大到一個網站。è 發布：發布就是把制作好的網頁上傳到網絡中的過程。è 瀏覽器：瀏覽器是一種把互聯網上的文本文檔和其他類型的文件翻譯成網頁的軟件。通過瀏覽器，可以快捷地連接Internet。目前使用人數最多的瀏覽器是Microsoft公司的IE瀏覽器，電腦中安裝了操作系統都會捆綁安裝IE瀏覽器，如圖1-2所示為IE瀏覽器打開的網頁。另外，還有很多其他瀏覽器可供用戶安裝使用，如騰訊TT瀏覽器、火狐瀏覽器

5、、360安全瀏覽器以及搜狗瀏覽器等。如圖1-3所示為搜狗瀏覽器打開的網頁。 圖1-2 IE瀏覽器 圖1-3 搜狗瀏覽器è 導航條：導航條就如同一個網站的路標，有了它就不會在瀏覽網站時“迷路”，如圖1-4所示。導航條鏈接著各個頁面，只要單擊導航條中的超級鏈接就能進入相應的頁面。圖1-4 導航條è 超級鏈接：超級鏈接在網頁中起著重要的作用，主要用于將不同頁面鏈接起來，鏈接的范圍可以是同一站點內的頁面，也可以是其他網站的頁面。超級鏈接主要有文字鏈接和圖像鏈接等，通常將鼠標指針移動到網頁對象上，如果該對象是一個超級鏈接，鼠標指針會變為一個手形，如圖1-5所示。單擊超級鏈接就能打開其

6、指定的目標網頁。圖1-5 超級鏈接è 表單：表單是具有交互性的動態網頁，常用于在注冊網站會員和申請郵箱等活動時提交用戶信息。如圖1-6所示為申請網易郵箱的表單。圖1-6 表單頁面è URL：URL是指全球資源定位器，即主要用于指明通信協議和地址的方式，如就是一個完整的URL。“http:/”形式的URL用于表示網頁的Internet位置，而“ftp/”則用于表示文件傳輸的一種URL形式。è IP地址：IP地址就是為連接在Internet上的每一個主機分配的一個32bit地址，Internet上的每臺主機的IP地址都是唯一的，就像生活中的門牌號，在網絡中就命名為IP

7、地址。IP地址分為A、B、C、D、E 5類，常用的是B和C兩類，如為一個C類IP地址。è 域名：域名就如同是網站的地址，Internet中任何網站的域名都是全世界唯一的，所以域名也就是網站的網址，如就是搜狐網站的域名。域名是由固定的網絡域名管理組織在全球進行統一管理的，用戶需到各地的網絡管理機構進行申請，申請成功后才能獲取域名，然后將其與網站服務器的IP地址綁定，訪問者通過域名就可以訪問服務器中的網頁了。1.1.3 網頁的基本組成元素網頁是由多種元素組成的。文本和圖像是網頁中最基本的元素，更是網頁信息的主要載體，它們在網頁中起著非常重要的作用。而其他的很多元素（

8、如超級鏈接等）都是基于這兩種基本元素而創建的。如圖1-7所示為網頁中的文本和圖像。網頁中的圖像網頁中的文本圖1-7 網頁中的文本和圖像1文本因文本體積小、在網絡上傳輸速度較快、用戶可以很方便地瀏覽和下載，故成為了網頁的主要信息載體。網頁中文本的樣式多變，風格不一，吸引人的網頁通常都具有美觀的文本樣式。文本的樣式可通過對網頁文本的屬性進行設置來調整，在后面的章節將詳細講解這方面的知識。2圖像圖像比文本更具有生動性和直觀性，它可以傳遞一些文本不能傳載的信息，如網站標識、背景等一般都是圖像。1.1.4 認識網站網站是多個網頁的集合，按網站內容可將網站分為5種類型，即門戶網站、企業網站、個人網站、專業

9、網站和職能網站，下面將分別對這幾種網站進行講解。è 門戶網站：門戶網站是一種綜合性網站，涉及領域非常廣泛，包含文學、音樂、影視、體育、新聞和娛樂等方面的內容，且具有論壇、搜索和短信等功能。國內較著名的門戶網站有新浪、搜狐和網易等。è 企業網站：企業網站是為展現企業形象和公司產品，以公司名義開發創建的網站，其內容、樣式和風格等都為展示企業自身形象。è 個人網站：個人網站具有較強的個性化，是以個人名義開發創建的網站，以個性化為主。è 專業網站：專業網站具有很強的專業性，通常只涉及某一個領域，內容專業。如榕樹下網站即是一個專業文學網站，太平洋電腦網是一個電子產

10、品專業網站平臺。è 職能網站：職能網站具有專門的功能，如政府職能網站等。目前逐漸興起的電子商務網站也屬于這類網站，較有名的電子商務網站有淘寶網、卓越網和當當網等。1.2 網頁制作的一般步驟制作網頁也是有一定順序和步驟的，在此之前還需要做一些準備工作。1.2.1 收集、整理資料在確定了制作哪方面的網頁后，需要先收集和整理與網頁內容相關的文字資料、圖像和動畫素材等。如要制作影視網站，就需收集大量中外影片的信息以及演職人員資料等；要制作公司網站，就需收集公司信息、產品信息和企業文化等。1.2.2 規劃、創建站點收集好資料后還需對資料進行有效管理，站點就是管理資料的場所。在創建站點之前需對站

11、點進行規劃，站點的形式有并列、層次和網狀等，用戶需根據實際情況選擇。規劃站點時，應按素材的不同種類分為幾個站點，再將收集好的素材分類放置在相應站點中，然后在不同站點中將不同的素材進行細分。站點規劃好后即可對其進行網頁制作了。1.2.3 制作網頁網站是由若干頁面鏈接而成的。在制作網頁時，為了方便瀏覽者輕松瀏覽網站，需注意以下幾個方面。è 頁面框架的構建：頁面框架的構建是指對網頁的整體布局，針對網頁中的內容應將網頁有條理地劃分為幾部分。è 導航條：導航條通常放置在頁面的上部或左側并且應出現在網站的各個頁面中，提供各個站點的相關主題，引導瀏覽者有條理地瀏覽網站。è 返回

12、首頁鏈接：在分頁頁面中放置返回首頁鏈接，以便瀏覽者在訪問分頁面后快速回到首頁，并重新選擇其他頁面進行瀏覽。è 添加網頁元素：為網頁添加相應的內容，以傳遞網頁信息給瀏覽者。1.2.4 站點測試在制作好網頁后，還需對站點進行測試后才能發布站點。站點測試可根據瀏覽器種類、客戶端要求以及網站大小要求等進行，通常是將站點移到一個模擬調試服務器上對其進行測試或編輯。測試站點的過程中應注意以下幾方面：è 監測頁面的文件大小以及下載速度。è 運行鏈接檢查報告對鏈接進行測試。由于在網頁制作中，各站點的重新設計、重新調整可能會使某些鏈接所指向的頁面已被移動或刪除，所以應檢查站點是否有

13、斷開的鏈接，若有則會自動重新修復斷開的鏈接。è 為了使頁面不支持的樣式、層、插件等在瀏覽器中能兼容且功能正常，可進行瀏覽器兼容性的檢查。使用“檢查瀏覽器”行為，可自動將訪問者定向到另外的頁面，這樣可解決在較早版本的瀏覽器中無法運行頁面的問題。è 網頁布局、字體大小、顏色和默認瀏覽器窗口大小等是在目標瀏覽器檢查中無法預見的，需在不同的瀏覽器和平臺上預覽頁面進行查看。U提示：Dreamweaver只對文件的最新保存執行檢查，而不檢查未保存的更改，所以對當前文檔運行檢查前，應先保存文件。通過站點報告測試可解決整個站點的問題，如無標題文檔、空標簽以及冗余的嵌套標簽等。1.2.5 網

14、頁發布發布站點之前需在Internet上申請一個主頁空間，用來指定網站或主頁在Internet上的位置，在后面的章節中將詳細講解申請主頁空間的知識。U提示：為提高上傳速度，網頁發布通常使用FTP（遠程文件傳輸）軟件上傳網頁到服務器中，也可使用Dreamweaver或FrontPage中的發布站點命令進行上傳。1.2.6 站點的更新與維護站點上傳到服務器后，還需對站點進行定期或不定期的更新和維護，以保持站點內容的最新和頁面元素的正常。1.3 網頁制作的原則和技巧在制作網站時還需要注意網頁制作的原則，并掌握一定的技巧，使網站做得更有水平，下面分別進行介紹。1.3.1 網頁制作的基本原則在網頁制作過

15、程中需遵循其制作原則，下面將詳細講解。è 整體規劃網站結構：為能合理安排站點中的各項內容，制作網頁之前需對整個站點進行有條理的規劃。è 新穎的站點名稱：名稱對于網站來說非常重要，有創意的站名能給瀏覽者留下較深的印象，也有利于網站的宣傳和推廣。給站點取名時應基于簡潔、好記并且要與站點內容相適應，此外最好還能給人耳目一新的感覺。è 鮮明的主題：標題內容不能太長太復雜，需簡單明了。主題內容需要醒目搶眼，具有較強的針對性。è 網頁的尺寸：為了讓大多數瀏覽者可正常地瀏覽網頁，在制作網頁時通常需考慮滿足800×600像素的顯示屏。使用漂亮的網頁背景可填充左

16、右兩側多余的空白空間，可使800×600像素的網頁在分辨率高的顯示器中也顯得較為美觀。è 動畫不能過多：動畫元素雖能使網頁更加生動，但動畫文件通常較大，若網頁中動畫過多則會降低網頁的下載速度，造成網頁打開速度變慢甚至不能打開的情況，因此網頁中的動畫不宜過多。è 導航要明朗：網頁的導航需明確，主頁導航條中的鏈接項目不宜太多，最好只限于幾個主要頁面，通常用68個鏈接比較合適，大型網站可適當增加導航鏈接 數量。è 優化圖像：網頁中的圖片太多也會影響網頁下載的速度。可以對網頁中的圖片進行優化，在圖片大小和顯示質量兩個方面取得一個平衡，網頁中的圖像最好保持在10K

17、B以下。è 定期更新網站：定期更新頁面內容或更改主頁的樣式，讓瀏覽者對網站保持一種新鮮感，以保持較高的瀏覽率。1.3.2 網頁基本元素的標準及使用技巧一個完整的網站都有Logo、Banner、文本、圖像、導航欄和按鈕等網頁元素，這些元素被稱為網頁的基本元素。下面分別進行講解。1LogoLogo即網站的標志，其制作要點如下：è Logo的位置通常位于網頁的左上角，也可根據需要將其置于其他任何位置，一般需保證Logo醒目，讓瀏覽者能很快看到。è 站點的Logo雖然有動態的，但不是所有的站點都適宜用動態Logo，且動態Logo的動作頻率也不能太大，否則可能會適得其反。2

18、BannerBanner即網站中的橫幅廣告，其標準尺寸有468×60像素、392×60像素、234×60像素、125×125像素、120×90像素、120×60像素、88×31像素及120×240像素等。其中，468×60像素和88×31像素的Banner使用最多，468×60像素的Banner文件大小應在15KB左右，而88×31像素的Banner文件大小最好在5KB左右。除此之外，在一些特殊場合也可使用一些非標準尺寸的Banner，如圖1-8所示。圖1-8 非標準尺寸的B

19、anner3文本網頁中最主要的元素就是文本，文本編輯操作對網頁的整體起著決定作用。編輯文本時需注意以下幾點：è 文本的顏色需要能夠明顯地與背景區別開來，讓瀏覽者能清楚地看到文本。è 每行文字最好為2030個漢字的長度，并注意段落的區分和縮進，以便于閱讀。è 同版面文本樣式不宜過多，最好在3種以內。4圖像圖像是網頁中不可或缺的元素，使用圖像時除了美觀外，還應考慮它對網頁下載速度的影響。在選擇圖片時應注意以下幾點：è 圖像應采用淡色系列的背景，能與主題分離的則用淺色標志或文字背景。è 圖像的主題要清晰可見，所表達的含義要簡單明了。è 圖像

20、中的文字要求清晰可辨，不可出現朦朧、辨識不清的情況。5導航欄導航欄按照放置的位置可分為橫排和豎排兩種；按照表現形式則有圖像導航、文本導航和框架導航等。導航欄的制作需注意以下幾點：è 最好不用圖片導航，如必須使用應減小圖片大小。è 內容豐富的網站可以使用框架導航，這樣可以快速地在網站內的各欄目之間跳轉，且只需下載一次導航頁面。è 在欄目不多的情況下，通常使用一排，如一般的個人網站或企業網站；如果導航欄目太多，可分兩排或多排進行排列，如圖1-9所示。圖1-9 多排導航欄6按鈕按鈕的大小沒有具體的規定，如圖1-10所示。需注意的是，按鈕要和網頁的整體效果協調，不要太搶眼

21、。一般采用背景較淡、字體較深的方式，也可采用具有較強對比度的 顏色。 圖1-10 各式按鈕1.3.3 網頁用色技巧網頁中合適的色彩搭配可以給瀏覽者留下美好的印象。色彩應用的總體原則是“總體協調，局部對比”，就是網頁的整體色彩效果應該保證和諧，可以在局部的、小范圍的地方使用一些對比較強烈的色彩。下面將講解幾點用色的技巧。è 在同一頁面中，可以使用相近色來設置頁面中的各種元素。è 網頁中的文字與背景要求有較高的對比度，才能更加清晰地看到網頁中的文字。通常用白底黑字或淡色背景深色文字。可以先確定背景色，然后在背景色的基礎上加深文字的顏色以突出文字顯示，并能使顏色協調。è

22、 導航欄區域通常需要將菜單背景顏色設置得較暗一些，然后通過較亮的顏色、較強烈的圖形元素或獨特的字體將網頁內容和導航菜單區分開來。è 在制作網頁時，首先應從網站的類型以及網站所服務的群體對象來確定整個站點的主色調。如校園類站點可以選用綠色；新聞類站點可以選用深紅色或黑色再搭配高級灰；旅游類站點可以選用草綠色搭配黃色；游戲類站點可以選用黑色；政府類站點可以選用紅色和藍色。如圖1-11所示為青城山·都江堰風景區網站的 首頁，以綠色為主。圖1-11 旅游類站點的主色調è 在同一頁面中，如果要在兩種截然不同的色調之間過渡，需在它們中間搭配上灰色、白色或黑色，使其過渡自然。&

23、#232; 站點Logo一般采用深色，并有較高的對比度，讓瀏覽者很容易看到并加深印象。標題可以使用與網頁內容差異較大的字體和顏色，也可以采用與網頁內容相反的顏色來襯托。如圖1-12所示為人民網的主頁以及Logo圖標。Logo圖1-12 Logoè 網頁設計的用色也要特別關注流行色的發展。每年日本或者歐美都要發布一批流行色，這是從大量人的喜好中挑選出來的。將這種觀念應用到自己的設計中去，做一個色彩方面的有心人，就會使自己的網頁富有朝氣，更受歡迎。è 用色時可以先選定一種色相，然后調整飽和度或亮度產生新的色彩，這樣用色的頁面看起來色彩統一、有層次感。也可以先選定一種色彩，然后再

24、選擇它的對比色，使頁面色彩豐富而又不花哨。還可以用一個色系，如淡藍、淡黃、淡綠或土黃、土灰、土藍。è 如果是創建公司站點，還應考慮公司的企業文化、企業背景及CI、VI標識系統和產品的色彩搭配等。è 如果有需要突出顯示的內容，則可以采用一些鮮艷、反差大的顏色來吸引瀏覽者的視線，達到“萬綠叢中一點紅”的效果。%注意：側欄通常用于顯示附加信息，不是所有的網頁都有。另外，網頁底部可以考慮使用與側欄相同或稍微淡一些的顏色。1.4 上機及項目實訓1.4.1 瀏覽各類網站熟悉網站構成本次實訓將瀏覽各種類型的網站，通過觀察不同類型網站的風格，了解網頁制作的部署技巧。操作步驟如下：（1）啟動

25、IE瀏覽器，在地址欄中輸入“（2）在瀏覽器地址欄中輸入“ 圖1-13 門戶網站 圖1-14 專題類網站（3）在地址欄中輸入“（4）在地址欄中輸入“ 圖1-15 交易類網站 圖1-16 非主頁式首頁（5）單擊“瀏覽進入”超級鏈接進入其主頁，觀察社區論壇類網站的布局和用色技巧，如圖1-17所示。（6）在地址欄中輸入“/”并按Enter鍵打開國家公務員網站首頁，觀察政府類網站的用色及布局方式，如圖1-18所示。 圖1-17 社區論壇類網站 圖1-18 政府類網站1.4.2 注冊電子郵箱熟悉網頁基本元素通過注冊電子郵箱，熟悉網頁中的文字、圖像、超級鏈接、表單、按鈕等基本組成元素的作用和應用方式，為后面的學習做好準備。本練習可結合立體化教學中的視頻演示進行學習（立體化教學:視頻演示第1章注冊電子郵箱熟悉網頁基本元素