網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程

1、 5 6 2006.12-2010.6中國網(wǎng)站規(guī)模變化 一個典型的一個典型的HTMLHTML文本的文本的基本結(jié)構(gòu)形式基本結(jié)構(gòu)形式如下如下: : 網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題 網(wǎng)頁的主要內(nèi)容網(wǎng)頁的主要內(nèi)容 結(jié)束標(biāo)記結(jié)束標(biāo)記 開始標(biāo)記開始標(biāo)記 文件頭文件頭 文件主體文件主體 28 HTMLHTML標(biāo)簽標(biāo)簽, ,（HTML TagHTML Tag）都是由一對）都是由一對 “”括起來的括起來的, ,成對出現(xiàn)。成對出現(xiàn)。 n 表示標(biāo)記的開始和表示標(biāo)記的開始和 結(jié)束結(jié)束, ,例如例如()() HTMLHTML語言正是通過這些標(biāo)簽來設(shè)置網(wǎng)語言正是通過這些標(biāo)簽來設(shè)置網(wǎng) 頁的結(jié)構(gòu)、網(wǎng)頁元素的位置和類別，頁的結(jié)構(gòu)、網(wǎng)頁元素的

2、位置和類別， 網(wǎng)頁元素的顯示效果等。網(wǎng)頁元素的顯示效果等。 29 標(biāo)記符屬性標(biāo)記符屬性 1.1.屬性屬性是用來描述是用來描述對象特征對象特征的特性。例如的特性。例如, , 一個人的身高、體重就是人這個對象的屬一個人的身高、體重就是人這個對象的屬 性。性。 2.2.在在HTMLHTML中中, ,所有的屬性都放置在所有的屬性都放置在開始標(biāo)記開始標(biāo)記 符符里里, ,多個屬性之間用多個屬性之間用空格空格分開。分開。 如如:body bgcolor=: 30 關(guān)于顏色關(guān)于顏色 1.1. 顏色值是一個關(guān)鍵字或一個顏色值是一個關(guān)鍵字或一個RGBRGB格式的格式的 數(shù)字。數(shù)字。 2.2. aqua,aqua,

3、black,black, blueblue, ,fuchsiafuchsia, , graygray， greengreen， limelime，maroonmaroon，navynavy，oliveolive， purplepurple，redred，silversilver，tealteal，whitewhite， yellowyellow 31 1.1. 在在 HTML HTML 中對于顏色的定義可以用中對于顏色的定義可以用6 6位位 十六進(jìn)制數(shù)十六進(jìn)制數(shù)。 2.2. 電腦屏幕的色彩是由電腦屏幕的色彩是由rgbrgb（紅、綠、藍(lán)）（紅、綠、藍(lán)） 三種色光所合成的三種色光所合成的, ,通過

4、調(diào)整這三個基通過調(diào)整這三個基 色就可以調(diào)配出其它的顏色。色就可以調(diào)配出其它的顏色。 每每2 2位數(shù)位數(shù)代表一種顏色的濃度代表一種顏色的濃度, ,三種顏色的三種顏色的 順序為順序為紅紅、綠綠、藍(lán)藍(lán),00,00代表顏色濃度最小，代表顏色濃度最小， FFFF代表顏色濃度最大。代表顏色濃度最大。 3.3. #000000#000000代表純黑、代表純黑、#FFFFFF#FFFFFF代表純白、代表純白、 32 d d 1.1. 圖中所示是部分顏色的圖中所示是部分顏色的RGBRGB代碼代碼: : 例例:為頁面設(shè)置背景色為頁面設(shè)置背景色: 主 頁 頁面1頁面2頁面3 頁面4頁面5頁面7頁面8 一級標(biāo)題 二級

5、標(biāo)題 頁面6 主 頁 個人簡歷我的相冊作品展示 家 庭 相 冊 心情隨筆 個 人 相 冊 網(wǎng) 站 作 品 平 面 作 品 涂 鴉 作 品 63 1.4.1 Web Web站點主頁的站點主頁的基本成分基本成分 M頁面標(biāo)題頁面標(biāo)題（說明網(wǎng)站的性質(zhì)與內(nèi)容）（說明網(wǎng)站的性質(zhì)與內(nèi)容） M網(wǎng)站標(biāo)識網(wǎng)站標(biāo)識 LOGOLOGO都是被精心設(shè)計的都是被精心設(shè)計的, Logo , Logo 的作用很多的作用很多, ,最重要的就是表達(dá)網(wǎng)站的最重要的就是表達(dá)網(wǎng)站的 理念、便于人們識別理念、便于人們識別, ,廣泛用于站點的連接、宣傳等。一個絕妙的廣泛用于站點的連接、宣傳等。一個絕妙的LogoLogo 不但會使首頁驀然生輝

6、不但會使首頁驀然生輝, ,而且會成為整個網(wǎng)站的形象大使。而且會成為整個網(wǎng)站的形象大使。 M頁眉（用來放置最希望瀏覽者看到的內(nèi)容）頁眉（用來放置最希望瀏覽者看到的內(nèi)容） M導(dǎo)航欄（欄目索引）導(dǎo)航欄（欄目索引） M內(nèi)容內(nèi)容 M頁腳頁腳（聯(lián)系方式、版權(quán)信息等）（聯(lián)系方式、版權(quán)信息等） 64 d 站標(biāo)站標(biāo) 導(dǎo)航欄導(dǎo)航欄 標(biāo)題標(biāo)題 65 d 頁腳信息區(qū)頁腳信息區(qū) 66 d 站站標(biāo)標(biāo) 導(dǎo)航欄導(dǎo)航欄 標(biāo)題標(biāo)題 網(wǎng)頁中最常見的構(gòu)圖布局 層次分明層次分明 這個網(wǎng)站用了寬大的邊框分隔內(nèi)容 和背景,在背景處布置了大面積的圖 案。頁面的寬度符合閱讀習(xí)慣,而擴(kuò) 展出來的背景又在視覺上飽滿了屏 幕尺寸 2021/3/2678 2021/3/2679 SGI silicon graphics,inc 2021/3/2680 網(wǎng)站內(nèi)不同頁面的設(shè)計風(fēng)格要有所統(tǒng)一。網(wǎng)站內(nèi)不同頁面的設(shè)計風(fēng)格要有所統(tǒng)一。 有些是色彩和布局都統(tǒng)一有些是色彩和布局都統(tǒng)一;有些則是布局統(tǒng)有些則是布局統(tǒng) 一一,色彩跳躍。色彩跳躍。 2021/3/