第一章網(wǎng)頁設(shè)計(jì)與制作

1、0808秋廣告秋廣告 劉輝東劉輝東 謝景文謝景文 第一章第一章 網(wǎng)頁基礎(chǔ)知識(shí)網(wǎng)頁基礎(chǔ)知識(shí) 1.1 網(wǎng)頁的概念和基本元素網(wǎng)頁的概念和基本元素 1.2 網(wǎng)頁的分類網(wǎng)頁的分類 1.3 html概述概述 1.4 網(wǎng)頁制作工具網(wǎng)頁制作工具 1.5 網(wǎng)頁制作前的準(zhǔn)備工作網(wǎng)頁制作前的準(zhǔn)備工作 1.1 網(wǎng)頁的概念和基本元素網(wǎng)頁的概念和基本元素 1.網(wǎng)頁的概念網(wǎng)頁的概念:網(wǎng)頁是網(wǎng)頁是web中的基中的基 本文檔本文檔,是用是用html語言或其他語言語言或其他語言 (如如vbscript、javascript、asp、php、 jsp)編寫的。編寫的。 2.網(wǎng)頁的基本元素網(wǎng)頁的基本元素:文本、圖片、文本、圖片、 聲

2、音、動(dòng)畫、表格、影像、表單以聲音、動(dòng)畫、表格、影像、表單以 及超鏈接等元素。及超鏈接等元素。 一元素一元素文文 本本 文本文本網(wǎng)頁中表現(xiàn)信息內(nèi)容的網(wǎng)頁中表現(xiàn)信息內(nèi)容的主體主體， 例如：例如：多媒體多媒體影音效果好，但是多媒體信影音效果好，但是多媒體信 息耗費(fèi)網(wǎng)絡(luò)息耗費(fèi)網(wǎng)絡(luò)帶寬帶寬的相當(dāng)?shù)南喈?dāng)大大， 而而文本文本所占所占空間小空間小，下載時(shí)間只需幾秒鐘。，下載時(shí)間只需幾秒鐘。 改變乏味視覺感受：改變乏味視覺感受： 1.標(biāo)題標(biāo)題醒目醒目 2.大小大小活潑活潑 3.層次感層次感 4.樣式樣式 吸引力吸引力 5.顏色顏色突出重點(diǎn)突出重點(diǎn) 元素二元素二圖形圖形 圖形圖形對事物的對事物的表現(xiàn)能力表現(xiàn)能力要

3、比文字強(qiáng)。要比文字強(qiáng)。 圖形格式：圖形格式：jpg和和gif兩種格式兩種格式 優(yōu)點(diǎn)：優(yōu)點(diǎn)：壓縮性能壓縮性能好且有好且有跨平臺(tái)跨平臺(tái)的特性的特性 網(wǎng)頁中的應(yīng)用：網(wǎng)頁中的應(yīng)用： 1.標(biāo)題標(biāo)題 2.背景圖背景圖 3.封面圖封面圖 4.鏈接按鈕鏈接按鈕 元素三元素三超鏈接超鏈接 web是用網(wǎng)頁來表示信息，而網(wǎng)頁之是用網(wǎng)頁來表示信息，而網(wǎng)頁之 間的聯(lián)系是通過超級(jí)鏈接來實(shí)現(xiàn)。間的聯(lián)系是通過超級(jí)鏈接來實(shí)現(xiàn)。 超鏈接超鏈接即為手形鼠標(biāo)所指向的部分，即為手形鼠標(biāo)所指向的部分， 往往表現(xiàn)是帶下劃線的文字或是圖形、往往表現(xiàn)是帶下劃線的文字或是圖形、 動(dòng)畫等。動(dòng)畫等。 超鏈接可提供參考的方法：超鏈接可提供參考的方法：

4、 1.轉(zhuǎn)至相關(guān)頁面的鏈接轉(zhuǎn)至相關(guān)頁面的鏈接 2.與其它站與其它站 點(diǎn)的鏈接點(diǎn)的鏈接 3.提供提供e-mail鏈接鏈接 1.2 網(wǎng)頁的分類網(wǎng)頁的分類 1. 2.1 靜態(tài)網(wǎng)頁：就是該網(wǎng)頁文件里沒靜態(tài)網(wǎng)頁：就是該網(wǎng)頁文件里沒 有程序代碼，只有有程序代碼，只有html標(biāo)記，這種網(wǎng)標(biāo)記，這種網(wǎng) 頁文件的擴(kuò)展名為頁文件的擴(kuò)展名為.htm或或html。 1.2.2 動(dòng)態(tài)網(wǎng)頁：就是該網(wǎng)頁文件動(dòng)態(tài)網(wǎng)頁：就是該網(wǎng)頁文件不僅不僅 含有含有html標(biāo)記，而且含有程序代碼，標(biāo)記，而且含有程序代碼， 這種網(wǎng)頁的擴(kuò)展名一般根據(jù)不同的程序這種網(wǎng)頁的擴(kuò)展名一般根據(jù)不同的程序 設(shè)計(jì)語言來定，如設(shè)計(jì)語言來定，如asp文件的擴(kuò)展名文

5、件的擴(kuò)展名 為為.asp,jsp文件為文件為.jsp。 1.3 html概述 1.3.1 html即超文本標(biāo)記語言或即超文本標(biāo)記語言或超文超文 本鏈接本鏈接標(biāo)識(shí)語言，是目前網(wǎng)絡(luò)上應(yīng)用最標(biāo)識(shí)語言，是目前網(wǎng)絡(luò)上應(yīng)用最 為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主 要語言。要語言。html文本是由文本是由html命令組命令組 成的描述性文本，成的描述性文本，html命令可以說明命令可以說明 文字、圖形、動(dòng)畫、聲音、表格、鏈接文字、圖形、動(dòng)畫、聲音、表格、鏈接 等。等。 1.3 html概述 1.3.2 html文件的基本結(jié)構(gòu) 1.標(biāo)記符及其屬性 （1） 標(biāo)記符又稱標(biāo)簽，html是影響網(wǎng) 頁內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器 根據(jù)標(biāo)記符決定網(wǎng)頁的實(shí)際顯示效果。 （2）屬性 1.3 html概述 1.3.2 html文件的基本結(jié)構(gòu) 2.html文件的基本結(jié)構(gòu) （1）html標(biāo)記符 （2）head標(biāo)記符 （3）