1、網(wǎng)頁設(shè)計與制作概述 了解有關(guān)網(wǎng)頁的一些基本概念了解網(wǎng)站的基本結(jié)構(gòu)特性和網(wǎng)頁的布局了解網(wǎng)頁制作的基本工具和開發(fā)語言1.1 互聯(lián)網(wǎng)與網(wǎng)站基本概念:網(wǎng)頁：是一種網(wǎng)絡(luò)信息傳輸?shù)妮d體，在網(wǎng)站中，供用戶閱讀的一個個頁面，稱之為“網(wǎng)頁”，又稱為Web頁。 萬維網(wǎng)（World Wide Web）：萬維網(wǎng)簡稱WWW或3W，它也是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)。它遵循HTTP協(xié)議 ，通過超文本和超媒體，將Internet上包括文本、聲音、圖形、圖像、影視信號等各種類型的信息聚集在一起。瀏覽器：要想訪問網(wǎng)絡(luò)中的各種資源，還需要一個工具，那就是瀏覽器，否則無法訪問到網(wǎng)絡(luò)中豐富的資源。 目前常用的瀏覽器有:IE

2、、netscape和騰訓(xùn)TT統(tǒng)一資源定位器（Universal Resource Locator，簡稱URL）： Internet上的每一個網(wǎng)頁都具有一個唯一的名稱標識，通常稱之為URL地址。是用來指出某項信息的位置及存取方式，以取得各種服務(wù)信息的一種標準方法。 通信協(xié)議：也就是上面舉例中的“http”部分，它包括HTTP（超文本傳輸協(xié)議）、FTP（文件傳輸協(xié)議）、Gopher（Gopher協(xié)議）和News（新聞組）等。 主機名：指要訪問服務(wù)器的Internet名稱。IP地址：IP地址是一組32位的數(shù)字號碼，如“84”，這就是上網(wǎng)主機的地址。 域名： IP地址是一長串的數(shù)字號碼，這些數(shù)字難記又

3、難以理解。為了方便大家理解、記憶，便有了域名的概念。域名的范圍要比主機名要大。一個域名下可以有多個主機名，域名下還可以有子域名。例如，域名www. good-下，有主機server1和server2，其主機全名就是和。也就是常說的二級域名。域名前加上傳輸協(xié)議信息及主機類型信息就構(gòu)成了網(wǎng)址（URL） 文件傳輸協(xié)議（File Transfer Protocol，簡稱FTP）：是一種快速、高效和可靠的信息傳輸方法。超文本標記語言（Hyper Text Markup Language，簡稱HTML）：它是WWW創(chuàng)建超媒體文本的語言，它也是網(wǎng)頁創(chuàng)建中最基本的語言，制作的任何一個網(wǎng)頁都是基于HTML文本標

4、識的。 表單: 表單是用于填寫申請或提交信息的交互頁面。如電子郵箱、主頁空間、QQ號碼等的申請頁面，以及論壇、聊天室、留言簿等。超級鏈接:這是網(wǎng)頁制作中經(jīng)常要用到的概念，指的是頁面對象之間的連接關(guān)系。 導(dǎo)航條：導(dǎo)航條能十分有效地實現(xiàn)超級鏈接功能 。發(fā)布：將制作好的網(wǎng)頁上傳到服務(wù)器的過程即是發(fā)布，也稱為上傳或上載。 1.2網(wǎng)站制作流程搜集資料，規(guī)劃網(wǎng)站選擇合適的制作工具制作網(wǎng)頁測試發(fā)布推廣宣傳網(wǎng)站維護（1）定位網(wǎng)站的主題和名稱 主題必須與Web頁面主要推銷或展示的產(chǎn)品或服務(wù)緊密相關(guān)，同時它又必須有相當?shù)奈Α?對于主題的選擇，應(yīng)注意： 主題要小而精。定位要小，內(nèi)容要精。 題材最好是你自己擅長或

5、者喜愛的內(nèi)容。 題材不要太濫或者目標太高。1.規(guī)劃設(shè)計（2）確定網(wǎng)站的欄目和版塊 一般的網(wǎng)站欄目安排要注意以下幾方面： 要緊扣你的主題 將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目，主題突出，容易給人留下深刻印象。 設(shè)一個最近更新或網(wǎng)站指南欄目設(shè)定一個可以雙向交流的欄目 設(shè)一個下載或常見問題回答欄目 （3）確定網(wǎng)站的目錄結(jié)構(gòu)不要將所有文件都存放在根目錄下。按欄目內(nèi)容建立子目錄。在每個主目錄下都建立獨立的images目錄。目錄的層次不要太深。 目錄的層次建議不要超過3層。不要使用中文目錄不要使用過長的目錄盡量使用意義明確的目錄，便于記憶和管理。 （4）確定網(wǎng)站的鏈接結(jié)構(gòu) 樹狀鏈接結(jié)構(gòu)（一對

6、一）。點擊“古典音樂”點擊“古箏”星狀鏈接結(jié)構(gòu)（一對多）。 頁面1（1. Htm)主頁面（index. Htm)頁面3（3. Htm)頁面2（2. Htm)點擊“影視”點擊“古典音樂”最好的辦法是：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。頁面1（1. Htm)主頁面（index. Htm)頁面3（3. Htm)頁面2（2. Htm)頁面6（6. Htm)頁面7（7. Htm)頁面4（4. Htm)頁面5（5. Htm)點擊“古典音樂”音樂頁面 在程序員進行詳細設(shè)計的同時，網(wǎng)頁美工開始設(shè)計網(wǎng)站的整體形象和首頁。整體形象設(shè)計包括標準字體、Logo、標準色彩、廣告語等。首

7、頁設(shè)計包括版面、色彩、圖像、動態(tài)效果、圖標等風格設(shè)計，也包括菜單、標題、版權(quán)等模塊設(shè)計。也可以將自己感興趣的素材通過圖像切割工具將其收集。 模塊布局宗旨在于方便訪問者瀏覽，如今的多媒體Web網(wǎng)頁具有強大的交互功能，多種媒體方式如文字、圖片、動畫、聲音、超級鏈接等同時存在。文字是一種簡潔有效的媒體，輸入方便，處理速度快，在網(wǎng)速較慢的情況下適合用文字進行大面積布局。圖片可以給人以較為直觀的感受，以及更為感性的認識，其缺點是下載速度慢，在網(wǎng)速慢的情況下不宜大面積運用。（5）設(shè)計網(wǎng)站的整體風格網(wǎng)頁的色彩 網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵因素之一。在搭配網(wǎng)頁色彩時，要注意色彩的鮮明性、獨特性、合適性和聯(lián)想

8、性。各板塊采用與網(wǎng)站首頁同一色系的顏色，整個板塊內(nèi)部也盡量保持風格一致?？梢圆捎脤ｉT的配色軟件。 網(wǎng)頁的文字 注意以下基本原則:不要使用超過3種字體類型，否則網(wǎng)頁看起來將顯得雜亂，沒有主題不要用太大的字，因為版面空間非常寶貴和有限，粗陋的大字體不能帶給瀏覽者更多的信息最好不要使用不停閃爍的文字。標題的字體比正文要稍大一些，顏色也應(yīng)有所區(qū)別。設(shè)計網(wǎng)站的標志(logo) logo是你站點特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點。標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。 下載另存后的文件為：Twins07.swf在自己的頁面中選擇“插入”|“媒體”|“Fl

9、ash”命令中國風格：古色古香，韻味典雅，古典的邊框，溫雅的顏色。具有個性的網(wǎng)頁欣賞：天馬星空，隨性發(fā)揮常見的中國門戶網(wǎng)站：莊重大氣，有板有眼，方方正正，內(nèi)斂不張揚。企業(yè)類簡潔網(wǎng)頁：頁面清爽，讓客戶一目了然，大氣，顏色多和產(chǎn)品類型有關(guān)。歐美風格科技感：動感的弧形圖案，金屬質(zhì)感的圖標，以及商業(yè)化、科技感的圖片。時尚感：前衛(wèi)、時尚的圖片，相關(guān)顏色的陪襯科技色多，色調(diào)偏冷、頁面結(jié)構(gòu)硬朗。日韓風格：漸變顏色，顏色鮮明，使用高分辨率的圖片。日韓風格：顏色搭配調(diào)和，多種顏色而不覺花哨，色彩豐富飽和而恰到好處。 根據(jù)網(wǎng)站內(nèi)容的整體風格，設(shè)計版面布局。設(shè)計者可以參考其他優(yōu)秀的網(wǎng)站，調(diào)用自己的各種知識儲備，特別是藝術(shù)方面的知識。這時設(shè)計者用筆在紙上粗略地勾畫出布局的輪廓。常見的網(wǎng)頁布局結(jié)構(gòu)有： （6）網(wǎng)頁版面和布局T型結(jié)構(gòu)同字結(jié)構(gòu)川字結(jié)構(gòu)三字結(jié)構(gòu)單一結(jié)構(gòu)Flash 型T型結(jié)構(gòu)同字結(jié)構(gòu)川字結(jié)構(gòu)三字結(jié)構(gòu)單一結(jié)構(gòu)2.網(wǎng)頁制作工具（1）網(wǎng)頁布局工具DreamweaverFrontpage（2）網(wǎng)頁美化工具圖像處理軟件:Photoshop,Fireworks動畫制作軟件 :FLA