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

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

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

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

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

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

5、2-12所示。4．修改畫布單擊畫布，或在畫布的工作區(qū)外單擊一下，從而顯示相應(yīng)的畫布屬性面板，如圖2-13所示。在屬性面板中，單擊畫布顏色選擇框，可以重新設(shè)置新的畫布顏色，如圖2-14所示。單擊“畫布大小”按鈕將出現(xiàn)設(shè)置對(duì)話框，如圖2-15所示?！皥D像大小”對(duì)話框如圖2-16所示。2.3.2Fireworks8的基本操作如圖2-17所示為“寵物樂園”首頁(yè)的設(shè)計(jì)草圖。下面用Fireworks創(chuàng)建其網(wǎng)頁(yè)模型，完成后，將其切片并導(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”，使圖片位于整個(gè)頁(yè)面的左上角，如圖2-18所示。(2)制作文字標(biāo)志選擇文字工具，在屬性面板中設(shè)置字體為“幼圓”，大小為“26”，顏色為黑色“#000000”，如圖2-19所示。在導(dǎo)入圖片的上邊輸入“寵物之家”四個(gè)字并調(diào)整其位置。接著，設(shè)置字體為“MonotypeCorsiva”，大小為“20”，顏色為桔紅色“#FF9933”，在“寵物之家”四個(gè)字下面輸入英文“MypetHome”，如圖2-20所示。3.導(dǎo)入廣告條廣告條的大小通常為468×60像素，執(zhí)行“文件”→“導(dǎo)入”命令，打開“導(dǎo)入”對(duì)話框，然后選擇一幅廣告畫面

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