1、網(wǎng)頁設(shè)計與制作實踐教程,編寫組,第一章 網(wǎng)頁設(shè)計與制作概述,學(xué)習(xí)目標(biāo): 了解有關(guān)網(wǎng)頁的一些基本概念 網(wǎng)站的基本結(jié)構(gòu)特性和網(wǎng)頁的布局 網(wǎng)頁制作的基本工具和開發(fā)語言 站點規(guī)劃的基本流程,1.1 互聯(lián)網(wǎng)與網(wǎng)站,基本概念: 網(wǎng)頁：在網(wǎng)站中，供用戶閱讀的一個個頁面，就稱之為“網(wǎng)頁”，又稱為Web頁。 萬維網(wǎng)（World Wide Web）：萬維網(wǎng)簡稱WWW或3W，是目前Internet（因特網(wǎng)）上最流行的一種基于超文本形式的資源組織形式。 瀏覽器：要想訪問網(wǎng)絡(luò)中的各種資源，還需要一個工具，那就是瀏覽器，否則無法訪問到網(wǎng)絡(luò)中豐富的資源。 目前常用的瀏覽器有:IE,netscape,騰訓(xùn)TT,統(tǒng)一資源定位器

2、（Universal Resource Locator，簡稱URL）：是用來指出某項信息的位置及存取方式，以取得各種服務(wù)信息的一種標(biāo)準(zhǔn)方法。 通信協(xié)議：也就是上面舉例中的“http”部分，它包括HTTP（超文本傳輸協(xié)議）、FTP（文件傳輸協(xié)議）、Gopher（Gopher協(xié)議）和News（新聞組）等。,主機名：指要訪問服務(wù)器的Internet名稱。 所要訪問的文件路徑及文件名：它指要訪問資源的具體位置。 文件傳輸協(xié)議（File Transfer Protocol，簡稱FTP）：是一種快速、高效和可靠的信息傳輸方法。 超文本標(biāo)記語言（Hyper Text Markup Language，簡稱HT

3、ML）：它是WWW創(chuàng)建超媒體文本的語言，它也是網(wǎng)頁創(chuàng)建中最基本的語言，制作的任何一個網(wǎng)頁都是基于HTML文本標(biāo)識的。,IP地址：IP地址是一組32位的數(shù)字號碼，如“84”，這就是上網(wǎng)主機的地址。 域名： IP地址是一長串的數(shù)字號碼，這些數(shù)字難記又難以理解。為了方便大家理解、記憶，便有了域名的概念。 表單: 表單是用于填寫申請或提交信息的交互頁面。如電子郵箱、主頁空間、QQ號碼等的申請頁面，以及論壇、聊天室、留言簿等。,超級鏈接:這是網(wǎng)頁制作中經(jīng)常要用到的概念，指的是頁面對象之間的連接關(guān)系。 導(dǎo)航條：導(dǎo)航條能十分有效地實現(xiàn)超級鏈接功能 。 發(fā)布：將制作好的網(wǎng)頁上傳到服務(wù)器的

4、過程即是發(fā)布，也稱為上傳或上載。,1.1.2網(wǎng)站分類 門戶網(wǎng)站 如：新浪 職能網(wǎng)站 如：阿里巴巴 專業(yè)網(wǎng)站 如：CCTV（） 個人網(wǎng)站 如：吳山明教授個人網(wǎng)站,1.2網(wǎng)站結(jié)構(gòu)與網(wǎng)頁布局,1.2.1 網(wǎng)站結(jié)構(gòu) 1歸類站點內(nèi)容 2項目放置的位置 3導(dǎo)航草圖設(shè)計 4創(chuàng)建設(shè)計草圖,1.2.2 網(wǎng)頁頁面布局 1網(wǎng)頁設(shè)計和布局原則 2網(wǎng)站命名和標(biāo)志 網(wǎng)站命名應(yīng)遵循以下的原則： （1）體現(xiàn)網(wǎng)站的主題，凝練，概括性強。 （2）合法、合情并合理。 （3）字數(shù)不要太多，一般控制在6個字以內(nèi)。 （4）有個性，體現(xiàn)一定的內(nèi)涵，可給瀏覽者更多的視覺沖擊力和空間想像力,3網(wǎng)頁的色彩 網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵因素之一

5、。在搭配網(wǎng)頁色彩時，要注意色彩的鮮明性、獨特性、合適性和聯(lián)想性。 4網(wǎng)頁的文字 注意以下基本原則: （1）不要使用超過3種字體類型，否則網(wǎng)頁看起來將顯得雜亂，沒有主題。 （2）不要用太大的字，因為版面空間非常寶貴和有限，粗陋的大字體不能帶給瀏覽者更多的信息 （3）最好不要使用不停閃爍的文字。 （4）標(biāo)題的字體比正文要稍大一些，顏色也應(yīng)有所區(qū)別。,5網(wǎng)頁版面和布局 網(wǎng)頁布局主要有以下3種結(jié)構(gòu)。型結(jié)構(gòu)、T型結(jié)構(gòu) 和 三型結(jié)構(gòu),1.3網(wǎng)頁制作工具,1.3.1 網(wǎng)頁布局工具 1Dreamweaver 2Frontpage 1.3.2網(wǎng)頁美化工具 1圖像處理軟件:Photoshop,Fireworks 2動畫制作軟件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D,1.4 網(wǎng)頁開發(fā)語言,1.4.1 HTML語言 1.4.2 動態(tài)網(wǎng)站開發(fā)語言 1ASP 2JSP 3PHP,1.5網(wǎng)站規(guī)劃,1.5.1 網(wǎng)站制作流程 1確定網(wǎng)站主題 2搜集資料 3規(guī)劃網(wǎng)站 4選擇合適的制作工具 5制作網(wǎng)頁 6上傳測試 7推廣宣傳,1.5.2 網(wǎng)站策劃書 1網(wǎng)站建設(shè)目的及功能定位 2網(wǎng)站內(nèi)容模塊規(guī)劃 3網(wǎng)站語言 4