網(wǎng)頁設(shè)計與制作教程web.ppt

《網(wǎng)頁設(shè)計與制作教程web.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第2章網(wǎng)頁版面設(shè)計基礎(chǔ)2.1基本概念2.1.1虛擬界面網(wǎng)頁=虛擬界面圖2-1是ebay易趣網(wǎng)的網(wǎng)頁，該網(wǎng)頁中包含了文字、圖形、圖像、動畫、聲音、視頻等多種媒介。圖2-1包含多種多媒體的網(wǎng)頁2.1.2網(wǎng)頁界面的特點1．版面尺寸規(guī)范化1）800×600像素。2）1024×768像素。3）1280×1024像素或更高2．媒介形式的多樣化3．有限的界面顏色數(shù)量4．界面的嵌套性5．具有控制功能2.1.3網(wǎng)頁的功能1．展示功能2．超鏈接功能3．檢索功能4．統(tǒng)計、計算功能2.2網(wǎng)頁版面設(shè)計2.2.1版面編排原則1．突出中心，理清主次。2．搭配合理，大小呼應(yīng)。3．圖文并茂，相得益彰。2

2、.2.2版面典型風(fēng)格1．對稱型對稱型的網(wǎng)頁設(shè)計風(fēng)格是最為常見的結(jié)構(gòu)類型，如圖2-3所示。2．偏置型偏置型風(fēng)格與對稱型風(fēng)格十分接近，不同之處在于，其中部版面顯示主要內(nèi)容的區(qū)域分欄不對稱，如圖2-4所示。3．標(biāo)題型標(biāo)題型網(wǎng)頁風(fēng)格簡練，傳達內(nèi)容直觀，如圖2-5所示。4．混合型具有混合型風(fēng)格的網(wǎng)頁往往兼具以上幾種網(wǎng)頁風(fēng)格的特點。2.2.3色彩搭配1．確定主體色2．選用相近色3．色彩均衡原則4．黑白灰運用5．色彩心理與情感2.2.4設(shè)計規(guī)則1．首屏頁面的設(shè)計所謂“首屏頁面”是指打開一個網(wǎng)站首頁時，不拖動畫面右側(cè)的滾動條能夠看到的部分，如圖2-6所示。（1）首屏頁面的尺寸（2）首屏

3、頁面的把握（3）設(shè)法抓住讀者的視線2．導(dǎo)航欄的設(shè)計圖2-7是網(wǎng)站的導(dǎo)航欄。從該網(wǎng)頁中看出，功能豐富的導(dǎo)航欄可引導(dǎo)讀者獲取多方面的信息，如公司簡介、軟件系統(tǒng)、服務(wù)項目等。3．媒介規(guī)格設(shè)計（1）圖像（2）動畫（3）聲音4．網(wǎng)頁效果與網(wǎng)頁效率（1）避免濫用媒體形式（2）文字的使用（3）圖形的使用（4）背景的處理5．強調(diào)整體6．網(wǎng)頁與讀者群7．網(wǎng)頁命名規(guī)則8．及時更新網(wǎng)頁2.2.5設(shè)計誤區(qū)1．片面追求版面效果2．使用縱向的導(dǎo)航欄3．使用多種媒體形式4．規(guī)則化2.3用Fireworks創(chuàng)建網(wǎng)頁模型2.3.1Fireworks8的基本概念1．創(chuàng)建新文檔第一次啟動Fireworks8

4、中文版時，會出現(xiàn)一個初始頁面，如圖2-8所示。當(dāng)用戶選擇新建Fireworks文件后，就會彈出“新建文檔”的對話框，如圖2-9所示。2．Fireworks8的工作區(qū)窗口新建文檔完成后可以看到Fireworks8的工作區(qū)窗口，如圖2-10所示。3．打開和導(dǎo)入文件(1)打開文件打開文件用于重新加載一幅新的圖像。執(zhí)行“文件”→“打開”命令，或者單擊工具欄上的“打開”按鈕，即可啟動“打開”文件對話框，如圖2-11所示。(2)導(dǎo)入文件導(dǎo)入文件和打開文件的區(qū)別是，前者是將圖像文件插入到目前正在編輯的文檔中，而不是重新加載一幅圖像。執(zhí)行“文件”→“導(dǎo)入”命令，啟動“導(dǎo)入”對話框，如圖

5、2-12所示。4．修改畫布單擊畫布，或在畫布的工作區(qū)外單擊一下，從而顯示相應(yīng)的畫布屬性面板，如圖2-13所示。在屬性面板中，單擊畫布顏色選擇框，可以重新設(shè)置新的畫布顏色，如圖2-14所示。單擊“畫布大小”按鈕將出現(xiàn)設(shè)置對話框，如圖2-15所示?！皥D像大小”對話框如圖2-16所示。2.3.2Fireworks8的基本操作如圖2-17所示為“寵物樂園”首頁的設(shè)計草圖。下面用Fireworks創(chuàng)建其網(wǎng)頁模型，完成后，將其切片并導(dǎo)出為HTML文件。1．新建文檔2．制作網(wǎng)站的LOGO（網(wǎng)站徽標(biāo)）(1)導(dǎo)入圖片執(zhí)行“文件”→“導(dǎo)入”命令，導(dǎo)入一幅寵物圖片，圖片的大小為184×60像

6、素，在屬性面板中修改圖片的位置參數(shù)X為“0”，Y為“0”，使圖片位于整個頁面的左上角，如圖2-18所示。(2)制作文字標(biāo)志選擇文字工具，在屬性面板中設(shè)置字體為“幼圓”，大小為“26”，顏色為黑色“#000000”，如圖2-19所示。在導(dǎo)入圖片的上邊輸入“寵物之家”四個字并調(diào)整其位置。接著，設(shè)置字體為“MonotypeCorsiva”，大小為“20”，顏色為桔紅色“#FF9933”，在“寵物之家”四個字下面輸入英文“MypetHome”，如圖2-20所示。3.導(dǎo)入廣告條廣告條的大小通常為468×60像素，執(zhí)行“文件”→“導(dǎo)入”命令，打開“導(dǎo)入”對話框，然后選擇一幅廣告畫面

7、即可導(dǎo)入。如圖2-21所示。4.制作網(wǎng)站輔助功能的圖像繪制一個淺藍色的矩形，然后使用文字工具在矩形區(qū)域中間輸入文字提示“加入收藏夾”和“設(shè)置本頁為首頁”兩行文字，調(diào)整好位置后效果如圖2-22所示。5.制作導(dǎo)航按鈕(1)繪制水平分隔線使用直線工具，繪制一條水平線，如圖2-23所示。(2)制作“網(wǎng)站首頁”導(dǎo)航按鈕首先繪制一個圓角矩形，如圖2-24所示。單擊資源面板中的“樣式”選項卡，如圖2-25所示然后選擇一種樣式應(yīng)用于剛繪制好的圓角矩形，如圖2-26所示。單擊“確定”按鈕即可將按鈕轉(zhuǎn)換為元件，如圖2-27所示。用指針工具雙擊畫布上的按鈕元件