第章網(wǎng)網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例_第1頁
第章網(wǎng)網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例_第2頁
第章網(wǎng)網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例_第3頁
第章網(wǎng)網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例_第4頁
第章網(wǎng)網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作教程機(jī)械工業(yè)出版社同名教材配套電子教案2005.89.1實(shí)例創(chuàng)意和效果展示 9.2實(shí)例說明 9.3設(shè)計(jì)過程

第9章網(wǎng)頁、網(wǎng)站設(shè)計(jì)與制作綜合實(shí)例

該實(shí)例是一個小型的娛樂資訊網(wǎng)站的首頁，頁面的色調(diào)是藍(lán)色，給人的感覺是涼爽、清新，將藍(lán)色與白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛，精美的表格線條使整個頁面顯得華麗而整潔。在頁面的頂部是廣告條和常用的頁面鏈接。接著下面是導(dǎo)航部分，整個頁面總共有9個導(dǎo)航鏈接，是這個小型站點(diǎn)的9個版塊。本頁是網(wǎng)站的首頁，因此“本站首頁”的導(dǎo)航是展開的。在頁面的左側(cè)主要包括“聊天室”、“虛擬社區(qū)”的登錄區(qū)域和友情鏈接區(qū)域；頁面的中間主要是新聞區(qū)域和明星寫真區(qū)域；頁面的右側(cè)是公告區(qū)域和音樂搜索區(qū)域；在頁面的最底部是版權(quán)信息區(qū)域。

9.1實(shí)例創(chuàng)意和效果展示

整個頁面采用表格布局和組織內(nèi)容，做到內(nèi)容豐富而又有條不紊，如圖9-1所示。

9.1實(shí)例創(chuàng)意和效果展示

圖9-1實(shí)例效果

本頁面的制作過程中用到的主要技術(shù)包括：

1.站點(diǎn)的規(guī)劃

建立一個本地站點(diǎn)設(shè)計(jì)網(wǎng)頁和測試網(wǎng)頁的效果。

2.頁面屬性的設(shè)置

通過頁面屬性的設(shè)置，定義頁面的標(biāo)題、文字顏色和超級聯(lián)接的顏色。3.CSS樣式的使用

通過CSS樣式的使用，改變文字的顯示風(fēng)格和表格的框線風(fēng)格，使界面更加美觀。

4.表格的布局

通過表格的布局，使頁面的內(nèi)容既豐富而又整齊、清晰。9.2實(shí)例說明

9.2.1技術(shù)要點(diǎn)

5.JavaScript腳本的應(yīng)用

通過JavaScript腳本的應(yīng)用，實(shí)現(xiàn)“加入我的收藏夾”、“設(shè)置本站為首頁”的功能和公告中的滾動字幕特效。

6.Flash按鈕的制作

將友情鏈接中的鏈接做成Flash按鈕的風(fēng)格，增加頁面的圖像動態(tài)效果。7.表單的制作

通過表單的制作，為用戶提供登錄“聊天室”、“虛擬社區(qū)”的窗口和搜索音樂的捷徑。8.圖像的使用

在廣告條和明星寫真的區(qū)域插入圖像，在導(dǎo)航條的背景上添加背景圖像使得整個頁面充滿動感。

9.2實(shí)例說明

9.2.1技術(shù)要點(diǎn)

在設(shè)計(jì)本頁面時，需要使用的素材包括：網(wǎng)站廣告條使用的Gif動畫。導(dǎo)航條的背景圖片。新聞前邊的指示箭頭。公告欄中字幕前邊的Gif動畫。明星寫真中的明星圖片。9.2實(shí)例說明

9.2.2素材準(zhǔn)備

9.3設(shè)計(jì)過程

9.3.1規(guī)劃站點(diǎn)

打開DreamweaverMX2004，執(zhí)行“站點(diǎn)”→“管理站點(diǎn)”命令，新建一個“娛樂無極限”的站點(diǎn)，使用的本地文件夾為“D:\fun”，不設(shè)置遠(yuǎn)程信息，如圖9-2所示。選擇已經(jīng)建立好的站點(diǎn)，單擊鼠標(biāo)右鍵，選擇“新建文件”命令，定義主頁文件名為index.htm；接著在站點(diǎn)上單擊鼠標(biāo)右鍵，選擇“新建文件夾”命令，定義圖像文件使用的文件夾為image，如圖9-3所示。

圖9-2建立“娛樂無極限”的本地站點(diǎn)

圖9-3定義主頁文件和文件夾

1.頁面屬性的設(shè)置

雙擊index.htm進(jìn)入頁面的編輯狀態(tài)，在標(biāo)題欄中輸入“娛樂無極限”。執(zhí)行“修改”→“頁面屬性”命令，打開“頁面屬性”對話框。選擇“外觀”分類選項(xiàng)，將文本顏色設(shè)為黑色、背景顏色設(shè)為白色，左邊距、右邊距、上邊距和下邊距的值均設(shè)為0，如圖9-4所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-4設(shè)置頁面外觀

選擇“鏈接”分類選項(xiàng)，將鏈接顏色設(shè)為天藍(lán)色“#c0dfff”，已訪問鏈接的顏色設(shè)為天藍(lán)色“#c0dfff”，變換圖像鏈接顏色設(shè)為“#3366ff”，活動鏈接設(shè)為“#000000”，鏈接下劃線樣式設(shè)為“僅在變換圖像時顯示下劃線”，如圖9-5所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-5設(shè)置頁面鏈接

2.CSS樣式的設(shè)計(jì)

(1)頁面中的文字目前流行的大多數(shù)網(wǎng)頁文字的風(fēng)格是9pt大小的宋體，本頁面采用這種風(fēng)格，分別重新定義<body>、<tr>和<td>標(biāo)簽的CSS樣式為字體“宋體”、大小“9pt”，如圖9-6所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-6定義<body>、<tr>和<td>標(biāo)簽的CSS樣式

2.CSS樣式的設(shè)計(jì)

(2)表格邊框細(xì)線的制作表格有兩種用途，一種是純粹為了布局使用的表格，其邊框粗細(xì)為0；另一種是在布局的基礎(chǔ)上顯示細(xì)線風(fēng)格的表格，可以使用CSS樣式中的類定義細(xì)線邊框，如圖9-7所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-7使用CSS樣式中的類定義細(xì)線邊框

3.制作頁面頂部的廣告條表格

(1)插入廣告條圖片執(zhí)行“插入”→“表格”命令，彈出“表格”對話框，將表格的行數(shù)設(shè)為1，列數(shù)設(shè)為3，寬度設(shè)為760像素，邊框粗細(xì)、單元格邊距和單元格間距均設(shè)為0，如圖9-8所示。選中整個表格，將起背景顏色設(shè)為淺藍(lán)色“#3399ff”，如圖9-9所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-8插入頂部表格

圖9-9設(shè)置頂部表格的淺藍(lán)色背景

3.制作頁面頂部的廣告條表格

(1)插入廣告條圖片

選中中間的單元格，將其寬度定義為468像素，兩邊的單元格的寬度均定義為146像素，如圖9-10所示。

將鼠標(biāo)定位在中間的單元格，執(zhí)行“插入”→“圖像”命令，插入廣告條圖片“title.gif”，效果如圖9-11所示。

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-10設(shè)置廣告圖片的單元格寬度

圖9-11插入廣告條圖片

(2)制作網(wǎng)站鏈接文字本頁面的頂部表格左側(cè)包括“加入我的收藏夾”、“設(shè)置本站為首頁”兩個鏈接，這是大多數(shù)網(wǎng)站具備的基本功能，使用JavaScript腳本可以實(shí)現(xiàn)這些功能。

首先制作“加入我的收藏夾”鏈接，切換到代碼窗口，編寫JavaScript腳本修改原來的鏈接，代碼如下：<ahref="#"onclick="window.external.addFavorite('/','娛樂無極限')">加入我的收藏夾</a>

9.3設(shè)計(jì)過程

9.3.2制作網(wǎng)頁

圖9-12制作“加入我的收藏夾”的超級鏈接

圖9-13“添加到收藏夾”對話框

(2施)制作壩網(wǎng)站卵鏈接非文字接著浸制作胳“設(shè)屆置本泊站為湯首頁糠”的灑鏈接局，開懼始一悔個新件的行惕，不慣開始鋒新的歡段落葛，輸斬入“媽設(shè)置筆本站閃為首綠頁”嘗，將總其鏈遲接地須址設(shè)地為“#”。切構(gòu)換到笛代碼檔窗口抗，編飛寫Ja伍va事Sc赤ri蝦pt腳本扮實(shí)現(xiàn)枝這個竟功能磁。首先筑在<he診ad燥>和<喇/he斧ad腿>之間陰加入痰設(shè)置輛當(dāng)前錢頁面潑為首蜂頁的蕉函數(shù)堆，代航碼如鑒下：<he許ad趴><S祥cr副ip侍t紗la疲ng終ua淺ge能="ja岡va鳥sc灶ri爐pt"><!櫻--fu嗚nc留ti眠on生h譽(yù)(ob蓄j,ur廁l){ob道j.s燈ty啦le則.b披eh腫av收io撓r=榮'ur巡壽l(#嚼de驅(qū)fa難ul閘t#雀ho趣me滔pa闊ge普)'授;ob厘j.se旅tH糠om拴eP挪ag關(guān)e(ur顆l);}//陜--戀></套Sc艦ri就pt膏></洞he毒ad績>9.壞3設(shè)計(jì)伙過程9.遷3.掠2制作縮慧網(wǎng)頁(2惰)制作密網(wǎng)站潛鏈接蠶文字接著桂修改<bo挨dy欠>和<揪/bo堆dy蹈>之間艇的“飯?jiān)O(shè)置思本站梳為首套頁”遍鏈接曉的代宰碼，丸修改洋如下養(yǎng)：<ahr命ef="身#"on調(diào)cl餐ic蹄k="利h(細(xì)th凈is頁,'視ht榴tp襪:/鑼/w路ww薯.my愧fu浩n.c弱om吃')趨">設(shè)置禁本站水為首歲頁</a>然后譯，按〈F1田2〉鍵預(yù)隊(duì)覽頁懸面，熔單擊尺“設(shè)險置本雅站為熊首頁否”，約如圖9-饅14所示死，出菊現(xiàn)如很圖9-箭15所示謝的設(shè)湖置主挨頁的系對話各框。9.朝3設(shè)計(jì)請過程9.任3.掙2制作警網(wǎng)頁圖9貼-1斑4單擊坦“設(shè)島置本陵站為戶首頁告”超屋級鏈檢接圖9吸-1屆5設(shè)置牲主頁瀉的對烤話框4.制作絮導(dǎo)航墾表格9.瓣3設(shè)計(jì)迷過程9.價3.神2制作扮網(wǎng)頁圖9算-1晌7將表榆格寬孤度轉(zhuǎn)翻換為良像素民平均罷分配材單元含格圖9騙-1扣8設(shè)置盡導(dǎo)航章鏈接5.制作姥主體亡內(nèi)容娘的框暑架頁面眾的主鼓體部徑分是百本實(shí)上例制豪作的賊核心佩部分籠。主驢體部憲分，紀(jì)從左呼到右教可以宏分為驚兩個匹部分伏，左存邊部券分是末兩個遲登錄盾表單搜和幾費(fèi)個綜尋合網(wǎng)時站的歡鏈接闊；右光邊是不娛樂容新聞想、明圖星寫膚真、伏本站訴公告宰和音恢樂搜疏索等原幾個掌欄目躬。9.浙3設(shè)計(jì)資過程9.鍬3.塔2制作馬網(wǎng)頁圖9池-2抱2設(shè)置梢主體趙表格歇背景紫顏色敵和單灑元格妻的寬液度6.制作新主體岡表格長左側(cè)攀的內(nèi)獲容(1牽)制作環(huán)“聊犧天室壘”登四錄表蜂單效果訴如圖9-斷25所示共。(2絕)制作挑“虛柏?cái)M社作區(qū)”委登錄那表單效果構(gòu)如圖9-艘26所示咐。9.度3設(shè)計(jì)征過程9.憑3.屈2制作毀網(wǎng)頁圖9歷-2村5制作鵲“聊閉天室妨”登拖錄表森單圖9-饑26制作故“虛前擬社蛾區(qū)”翠登錄寺表單6.制作說主體米表格全左側(cè)笑的內(nèi)叮容(3它)制作僅友情幸鏈接效果疊如圖9-像28所示雙。9.健3設(shè)計(jì)婆過程9.私3.滾2制作顧網(wǎng)頁圖9豈-2對8制作句友情商鏈接佩使用釘?shù)腇l肚as尊h按鈕7.制作展主體輪部分米右側(cè)屬單元高格的果內(nèi)容(1玻)制作嫩娛樂瞧新聞宴欄目效果狡如圖9-戶33所示索。9.缺3設(shè)計(jì)忠過程9.醒3.輛2制作片網(wǎng)頁圖9翅-3譜3制作摘娛樂哄新聞7.制作狗主體菌部分鴨右側(cè)鄰單元做格的駕內(nèi)容(2鋒)制作幻玉本站菠公告逼欄目效果牢如圖9-匹34嗓、撥9-使35所示冷。9.瓣3設(shè)計(jì)習(xí)過程9.峰3.舅2制作姑網(wǎng)頁圖9縫-3鉆4制作薪公告賺內(nèi)容圖9縮慧-3箱5滾動國字幕筆效果7.制作億主體允部分效右側(cè)靈單元溫格的諸內(nèi)容(3膜)制作獎明星攜寫真怕檔案設(shè)欄目效果爺如圖9-慣36所示染。(4陵)制作恐音樂迅搜索暈表單效果從如圖9-蔬39所示。9.餐3設(shè)計(jì)魄過程9.洪3.剖2制作測網(wǎng)頁圖9屆-3仿6制作胳明星伸寫真姿檔案圖9樣-3身9制作迎音樂鼻搜索辱表單7.制作姑主體芳部分駝右側(cè)挽單元善格的題內(nèi)容(5聯(lián))制作欣最新激音樂付專輯工欄目效果輕如圖9-號40所示竭。(6夢)制作榆網(wǎng)站如拓展墻欄目效果追如圖9-維40所示。9.亭3設(shè)計(jì)赤過程9.懼3.褲2制作及網(wǎng)頁圖9-侄40制作惡最新反音樂堤專輯抬欄目8.制作欣底部亭的版齡權(quán)信訊息區(qū)吸域?qū)⑹蠖簶?biāo)定見位在盈主體以表格視的最柱右端住，插照入一歉個1行峽1列寬毛度為76新0像素束的表母格，襪邊框極粗細(xì)的、單港元格環(huán)邊距槽和單組元格屠間距偶均設(shè)緞為0，在嗚“屬泊性”蘋面板迅中將輪表格晃高度莫設(shè)置四為40像素閘，輸浪入使獄用瀏府覽器許的建棋議和臨版權(quán)顯信息舒，如樸圖9-畜41所示催。9.耗3設(shè)計(jì)慕過程9.岡3.引2制作孔網(wǎng)頁圖9辣-4悲1制作受底部司的版遺權(quán)信站息區(qū)自域1.測試瞇網(wǎng)站制作顯好站晚點(diǎn)中誘所有數(shù)的頁塊面后吵，首劈燕先要舒對整邊個網(wǎng)布站進(jìn)輸行測恒試。鳳測試酷最基當(dāng)本的瘡方法般就是肚在Dr粒ea點(diǎn)mw帝ea萌ve粗r中打說開站馳點(diǎn)首喝頁，窯然后剛按〈F1肝2〉鍵預(yù)絨覽頁減面，高在瀏降覽器浪中測傭試每齡一個抬頁面您，看巾內(nèi)容模是否逢能正慨確顯貝示，斤尤其煙要測赤試超算鏈接綱是否茫能正小確工僻作。為了罩確保晶不同轎的瀏顧覽者調(diào)能夠醫(yī)看到全一致仁的頁法面效誕果，會制作綁好的競網(wǎng)站篩還應(yīng)滲在不毀同的齒顯示學(xué)分辨全率下提進(jìn)行微測試丸，至扒少要瓜在80燙0×序60雷0像素修和10帳24疏×7尚68像素繩兩種鬧分辨購率下斬進(jìn)行嫂測試敗。另禽外，去還需艷要在烏不同焰字體米顯示倘大小恐情況啄下進(jìn)雹行測云試（浸即在梨“大俘字體枯”和濟(jì)“小逢字體徒”兩彩種方暮式下嗓測試堤），騰以確州保不孕同字宅體設(shè)達(dá)置的鈔瀏覽酒者能角夠看跑到一回致的婦字體各效果梨。測試隊(duì)完成總之后希，就著可以寬將網(wǎng)衰站上狹傳發(fā)頃布到握遠(yuǎn)程筆站點(diǎn)暈上。9.挪3設(shè)計(jì)與過程9.輛3.斯3測試指和上房誠傳網(wǎng)禮站2.上傳彩網(wǎng)站(1到)設(shè)置穩(wěn)遠(yuǎn)程油站點(diǎn)首先翻設(shè)置誕站點(diǎn)葛的服旁務(wù)器員訪問秀類型壯為FT趕P訪問局，這磚樣本朝地站來點(diǎn)建斗立的略文件屠就可梅以通印過FT努P協(xié)議遺上傳液到遠(yuǎn)枕程的We要b服務(wù)舌器上貓。選擇虧“站贈點(diǎn)”→“管理抗站點(diǎn)堵”命房誠令，碼打開華“管頑理站徒點(diǎn)”恩對話贏框。港單擊但對話更框中絮的“祝編輯保”按黨鈕，傅彈出騰“站幻玉點(diǎn)定林義為唱”的罰對話狀框，蛛將“奮分類播”列網(wǎng)表框痕切換草到“統(tǒng)遠(yuǎn)程困信息斷”。提在右膚邊的究參數(shù)散設(shè)置副中分存別設(shè)芹置FT壟P主機(jī)偵、登由錄用夸戶名亡和登李錄密鼻碼，噸設(shè)置繞的參殃數(shù)如味圖9-溉42所示星。9.夜3設(shè)計(jì)震過程9.膏3.扇3測試屆和上胡傳網(wǎng)喊站圖9元-4搜2FT敢P訪問賓的參扛數(shù)設(shè)味置(2顛)測試汽遠(yuǎn)程忽站點(diǎn)設(shè)置耐好各碌個參椒數(shù)后想，用拾戶可因以單籠擊“梢測試蛇”按像鈕測鋒試FT訊P遠(yuǎn)程凡站點(diǎn)漢是否及連通臂。單削擊“篇測試乞”按昆鈕，熱經(jīng)過侵一段宋時間膛等待砌，出頸現(xiàn)測喉試成確功的膛對話逆框，擱如圖9-方43所示壞。9.良3設(shè)計(jì)蹄過程

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論