吳賢茂：世博會(huì)網(wǎng)站的制作過程以及心得

時(shí)間：2022-07-13 11:51:02 | 來源：建站知識(shí)

時(shí)間：2022-07-13 11:51:02 來源：建站知識(shí)

學(xué)校的大練兵已經(jīng)即將結(jié)束了，我想在這短短的幾天培訓(xùn),我真的學(xué)到了很多，雖然以前都是用代碼寫div+css和javascript做網(wǎng)站的，對(duì)于DW的一些界面功能還不是很熟悉，經(jīng)過劉老師的指導(dǎo)終于了解了DW界面的行為控制。

前幾天老師布置了一個(gè)世博會(huì)的網(wǎng)站讓我們做為最近培訓(xùn)的一個(gè)作品吧，當(dāng)時(shí)我的引發(fā)起一個(gè)構(gòu)思了，是時(shí)候好好的把所學(xué)的東西做成一個(gè)比較大型的網(wǎng)站了。

首先我講一下我做這個(gè)世博會(huì)網(wǎng)站的一個(gè)前期策劃，第一做一個(gè)門戶網(wǎng)站首先要考慮到頁面的大小,我利用了DIV+CSS來減少頁面的加載速度，一個(gè)頁面差不多就10來KB，如果采用TABLE布局的話我想估計(jì)會(huì)在80多KB左右，雖然算起來加載頁面是快了1秒左右，但是大家想一下一個(gè)門戶網(wǎng)站成千上萬篇文章從數(shù)據(jù)庫調(diào)用出來，如果打開一個(gè)頁面快1秒，那么速度可想而知，再者再談?wù)剬?duì)SEO方面的影響,搜索引擎的蜘蛛是不喜歡去爬嵌套在TABLE三層內(nèi)的內(nèi)容，所以在這方面也對(duì)SEO優(yōu)化做好了鋪墊.吸引蜘蛛去爬，從而快速增加你的網(wǎng)站快照和權(quán)威。

接下來我再說一下我的網(wǎng)站地圖,一個(gè)首頁、六個(gè)子頁和一個(gè)內(nèi)容頁,每個(gè)子頁都通過一些圖文并排組成一個(gè)內(nèi)容豐富的頁面,全局采用藍(lán)色調(diào)代表和諧,head頭部采用一個(gè)一軸四館和會(huì)徽簡單的帶入,由于頁面的內(nèi)容功能過多我便挑幾個(gè)出來講講。

這個(gè)功能叫做TAB選擇卡,是利用javacript代碼制作的。調(diào)用里面的代碼與CSS的id做成一個(gè)切換頁面,這兩個(gè)內(nèi)容都不同，主要的好處就是為首頁省下了空間然而又能達(dá)到給客戶最大信息的效果!

這里是采用了一個(gè)幻燈片的代碼，將最新的頭條信息與圖片展示給大家看，吸引用戶的眼球，讓用戶更加想要點(diǎn)擊進(jìn)去觀看.這個(gè)直接用FLASH+JAVASCRIPT代碼在HTML調(diào)用圖片。

這三個(gè)雖然也是利用了TAB選擇卡制作而成的，但是里面卻加多了一種比較動(dòng)感的翻頁切換，這個(gè)也是最近比較流行的JQuery腳本主要是結(jié)合新技術(shù)AJAX。

這個(gè)左右可以點(diǎn)擊可以左右滾動(dòng)圖片，好處是讓更多的圖片給予用戶觀看，也是起到了一種節(jié)省空間的效果，主要利用了css樣式表里面的overflow:hidden;屬性來隱藏多于的圖片，利用javascript可控制滾動(dòng)代碼!

這個(gè)也叫AJAX拖拽層,就是那些方框都可以隨便讓你拖動(dòng)，點(diǎn)擊關(guān)閉也可以關(guān)掉，雖然這種技術(shù)在DW的行為可以制作，但是大家有沒有發(fā)現(xiàn)制作出來后那些代碼是非常繁瑣的，如果我們用js文件做出來后在頁面調(diào)用的話，那些代碼就清晰了很多，關(guān)閉哪里是用了一個(gè)CSS樣式代碼的display:”none”;來實(shí)現(xiàn)的。還有很多亮點(diǎn)就將不再一一舉例了。

接下來再看看我的內(nèi)容頁是如何做SEO優(yōu)化的。

看到這里首先標(biāo)題最好利用H1來引用，內(nèi)容頁要有一些來源信息，TAG，大家會(huì)問什么叫Tag。

其實(shí)TAG就是一個(gè)標(biāo)簽關(guān)鍵字的意思，主要是給用戶搜索關(guān)鍵字，最后提醒大家在加圖片的術(shù)后最好加入title，title是什么?就是標(biāo)注的意思，因?yàn)樗阉饕娌皇珍泩D片，然后他對(duì)圖片的查找就只能靠title了，所以這點(diǎn)操作很重要，然后大家還要注意下在head之間加入這段代碼填寫自己的關(guān)鍵字和關(guān)鍵字內(nèi)容。

內(nèi)容尾部采用一些熱門推薦來增加網(wǎng)站的點(diǎn)擊率，讓網(wǎng)站更多的內(nèi)容能夠給游覽者游覽，也起到了內(nèi)頁互連的一種優(yōu)化.

講到這里就基本結(jié)束了我整個(gè)網(wǎng)站的流程了，其實(shí)我也是一個(gè)初學(xué)者,如果大家有什么覺得說的不好的地方歡迎大家跟我交流。

最后建議大家對(duì)做站有興趣的話不妨對(duì)動(dòng)起手來做一做屬于自己的網(wǎng)站，在做的過程中絕對(duì)會(huì)有意向不到的收獲，有時(shí)后自己做一個(gè)網(wǎng)站比你自己看一本書的知識(shí)還要多，比如我這次再制作這個(gè)門戶的時(shí)候就學(xué)到了很多CSS在IE6中的BUG，比如圖片有空隙，margin的雙倍距問題，很多東西都是細(xì)節(jié)方面，所以說細(xì)節(jié)決定成敗!

Gdesign學(xué)習(xí)網(wǎng) 歡迎大家和我交流!