網(wǎng)頁(yè)設(shè)計(jì)原理ppt課件

網(wǎng)頁(yè)設(shè)計(jì)原理,1,掌握網(wǎng)站的開(kāi)發(fā)流程掌握網(wǎng)頁(yè)設(shè)計(jì)原理掌握網(wǎng)頁(yè)設(shè)計(jì)規(guī)范欣賞優(yōu)秀的網(wǎng)頁(yè)，學(xué)習(xí)他人之長(zhǎng)，激發(fā)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣,本章目標(biāo),2,第一個(gè)階段：規(guī)劃和準(zhǔn)備階段。這個(gè)階段要做的工作包括：（1）市場(chǎng)調(diào)查、市場(chǎng)分析；（2）制定網(wǎng)站技術(shù)方案；（3）規(guī)劃網(wǎng)站內(nèi)容；第二階段：網(wǎng)頁(yè)設(shè)計(jì)、制作階段。這個(gè)階段要做的工作包括：（1）網(wǎng)站總體設(shè)計(jì)（風(fēng)格、布局、色彩）；（2）設(shè)計(jì)界面、制作網(wǎng)站中的各個(gè)網(wǎng)頁(yè)；（3）將各個(gè)網(wǎng)頁(yè)通過(guò)超級(jí)鏈接進(jìn)行整合；（4）后臺(tái)設(shè)計(jì)。第三階段：網(wǎng)站的發(fā)布、推廣和維護(hù)階段。這個(gè)階段要做的工作包括：（1）測(cè)試、調(diào)試與完善網(wǎng)站；（2）發(fā)布與推廣網(wǎng)站；（3）維護(hù)和更新網(wǎng)站。,1.1網(wǎng)站開(kāi)發(fā)流程,3,1.2.1網(wǎng)頁(yè)設(shè)計(jì)的基本原則（1）用戶至上原則（2）易用性原則網(wǎng)頁(yè)中的導(dǎo)航應(yīng)放置明顯、結(jié)構(gòu)清晰、操作簡(jiǎn)單。網(wǎng)站的鏈接結(jié)構(gòu)合理，方便瀏覽者在不同網(wǎng)頁(yè)之間跳轉(zhuǎn)快捷、方便。（3）實(shí)用性原則,1.2網(wǎng)頁(yè)的設(shè)計(jì)原理,4,1.網(wǎng)頁(yè)頁(yè)面大小標(biāo)準(zhǔn)顯示器的屏幕分辨率為1024*768，則不同版本的IE瀏覽器的屏幕大小為：IE6.0：1003*600pxIE8.0（隱藏菜單欄）：1003*626IE8.0（不隱藏菜單欄）：1003*598原則：不出現(xiàn)水平滾動(dòng)欄,1.2.2網(wǎng)頁(yè)頁(yè)面與版塊,5,LOGO是網(wǎng)站的標(biāo)志、名片，如同商標(biāo)一樣。在網(wǎng)站設(shè)計(jì)中l(wèi)ogo的設(shè)計(jì)是不可缺少的一個(gè)重要環(huán)節(jié)。Logo是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn),它作用于傳遞網(wǎng)站的定位和經(jīng)營(yíng)理念、同時(shí)便于人們識(shí)別，會(huì)直接影響到客戶對(duì)網(wǎng)站的判斷，特別是網(wǎng)站日后需要進(jìn)行全球性推廣，優(yōu)秀的商標(biāo)設(shè)計(jì)會(huì)吸引來(lái)更多的訪問(wèn)者。LOGO可以是中文、英文字母，也可以是符號(hào)、圖案，還可以是動(dòng)物或者人物。LOGO的設(shè)計(jì)創(chuàng)意來(lái)源是網(wǎng)站的名稱和內(nèi)容。,2.網(wǎng)頁(yè)版塊網(wǎng)站LOGO,6,2.網(wǎng)頁(yè)版塊網(wǎng)站LOGO,7,2.網(wǎng)頁(yè)版塊導(dǎo)航條,8,網(wǎng)站導(dǎo)航的表現(xiàn)形式主要有：菜單、站內(nèi)搜索引擎、當(dāng)前瀏覽位置等。（1）菜單。菜單是網(wǎng)站最常見(jiàn)的導(dǎo)航方法，一個(gè)好的菜單系統(tǒng)關(guān)鍵在于能適應(yīng)網(wǎng)站的層次需要，并且容易讓瀏覽者理解網(wǎng)站的結(jié)構(gòu)。（2）站內(nèi)搜索引擎。站內(nèi)搜索引擎提供了一種主動(dòng)查詢方式，瀏覽者只要把自己需要尋找的內(nèi)容的關(guān)鍵字輸入到搜索引擎中，網(wǎng)站將自動(dòng)地查找出站內(nèi)符合條件的頁(yè)面，這是一種人性化的做法。（3）當(dāng)前瀏覽位置。所謂“當(dāng)前瀏覽位置”就是在網(wǎng)站的每個(gè)頁(yè)面中加入當(dāng)前位置的文字說(shuō)明并逐級(jí)加入鏈接。,2.網(wǎng)頁(yè)版塊導(dǎo)航條,9,2.網(wǎng)頁(yè)版塊導(dǎo)航條（常用導(dǎo)航欄）,10,一般為廣告橫幅圖片、或者使用JavaScript或Flash技術(shù)制作的動(dòng)畫(huà)，用于吸引用戶觀看,2.網(wǎng)頁(yè)版塊Banner條（網(wǎng)頁(yè)廣告欄）,11,12,網(wǎng)頁(yè)的主體文本圖像動(dòng)畫(huà)超鏈接,2.網(wǎng)頁(yè)版塊內(nèi)容版塊,13,版權(quán)信息版塊制作單位、制作人、時(shí)間等,2.網(wǎng)頁(yè)版塊版尾版塊,14,網(wǎng)站設(shè)計(jì)不是把所有內(nèi)容放置到網(wǎng)頁(yè)中就行了，還需要我們把網(wǎng)頁(yè)內(nèi)容進(jìn)行合理的排版布局，以給瀏覽者賞心悅目的感覺(jué)，增強(qiáng)網(wǎng)站的吸引力。在設(shè)計(jì)布局的時(shí)候要注意把文字、圖片在網(wǎng)頁(yè)空間上均勻分布并且不同形狀、色彩的網(wǎng)頁(yè)元素要相互對(duì)比，以形成鮮明的視覺(jué)效果。常見(jiàn)的布局結(jié)構(gòu)有“同”字形布局、“國(guó)”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局、上下框架型、封面型,1.2.3網(wǎng)頁(yè)版面布局設(shè)計(jì),15,16,17,18,19,20,21,版面典型風(fēng)格,對(duì)稱型,偏置型,標(biāo)題型,22,色彩的運(yùn)用在網(wǎng)頁(yè)中的作用真是太重要了，有些網(wǎng)頁(yè)看上去十分典雅、有品位，令人賞心悅目，但是頁(yè)面結(jié)構(gòu)卻很簡(jiǎn)單、圖像也不復(fù)雜，這主要是色彩運(yùn)用得當(dāng)。色彩是人的視覺(jué)最敏感的元素，網(wǎng)頁(yè)色彩處理得好，可以錦上添花。網(wǎng)頁(yè)三原色：red、green、blue色彩的屬性：色相、飽和度、明度色彩模式：RGB、CMYKWeb216安全色,1.2.4網(wǎng)頁(yè)色彩設(shè)計(jì)原理,23,表1.1色彩與心理反應(yīng),24,網(wǎng)頁(yè)是由文本、圖像、動(dòng)畫(huà)、超級(jí)鏈接等基本元素構(gòu)成1文本建議用于網(wǎng)頁(yè)正文的文字一般不要太大，也不要使用過(guò)多的字體，中文字體一般使用宋體，大小一般使用9磅或12像素即可。2圖像網(wǎng)頁(yè)中的圖像主要有用于點(diǎn)綴標(biāo)題的小圖片，介紹性的照片，代表企業(yè)形象或欄目?jī)?nèi)容的標(biāo)志性圖片（即LOGO），用于宣傳的廣告（即Banner）等多種形式。3超級(jí)鏈接超級(jí)鏈接是Web網(wǎng)頁(yè)的主要特色，是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接。這個(gè)“目的端”通常是一個(gè)網(wǎng)頁(yè)，也可以是下列情況之一：相同網(wǎng)頁(yè)上的不同位置、一個(gè)下載的文件、一幅圖片、一個(gè)E_Mail地址等。超級(jí)鏈接可以是文本、按鈕或圖片，鼠標(biāo)指向超級(jí)鏈接位置時(shí)，會(huì)變成小手形狀。,1.2.5網(wǎng)頁(yè)頁(yè)面元素設(shè)計(jì),25,4導(dǎo)航欄導(dǎo)航欄是一組超級(jí)鏈接，用來(lái)方便地瀏覽站點(diǎn)。導(dǎo)航欄一般由多個(gè)按鈕或者多個(gè)文本超級(jí)鏈接組成。5動(dòng)畫(huà)動(dòng)畫(huà)是網(wǎng)頁(yè)中最活躍的元素，創(chuàng)意出眾、制作精致的動(dòng)畫(huà)是吸引瀏覽者眼球的有效方法之一。6表格表格是HTML語(yǔ)言中的一種元素，主要用于網(wǎng)頁(yè)內(nèi)容的布局，組織整個(gè)網(wǎng)頁(yè)的外觀，通過(guò)表格可以精確地控制各網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的位置。,1.2.5網(wǎng)頁(yè)頁(yè)面元素設(shè)計(jì),26,7框架框架是網(wǎng)頁(yè)的一種組織形式，將互相關(guān)聯(lián)的多個(gè)網(wǎng)頁(yè)的內(nèi)容組織在一個(gè)瀏覽器窗口中顯示。例如在一個(gè)框架內(nèi)放置導(dǎo)航欄，另一個(gè)框架中的內(nèi)容可以隨著導(dǎo)航欄中的鏈接而改變。8表單表單是用來(lái)收集訪問(wèn)者信息或?qū)崿F(xiàn)一些交互作用的網(wǎng)頁(yè)，瀏覽者填寫(xiě)表單的方式是輸入文本，選中單選按鈕或復(fù)選框，從下拉菜單中選擇選項(xiàng)等。網(wǎng)頁(yè)中除了上述這些最基本的構(gòu)成元素外，還包括橫幅廣告、字幕、懸停按鈕、日戳、計(jì)算器、音頻、視頻、JavaAppplet等元素。,1.2.5網(wǎng)頁(yè)頁(yè)面元素設(shè)計(jì),27,前臺(tái)技術(shù)XHTML（網(wǎng)頁(yè)的結(jié)構(gòu)技術(shù)）CSS（網(wǎng)頁(yè)的表現(xiàn)技術(shù)）ECMAScript（前身為JavaScript，腳本語(yǔ)言）Ajax（由JavaScript腳本語(yǔ)言擴(kuò)展而來(lái)）E4X（是ECMAScript的擴(kuò)展，實(shí)現(xiàn)更快的訪問(wèn)XML數(shù)據(jù)）切片（網(wǎng)頁(yè)圖形處理）后臺(tái)技術(shù)ASP技術(shù)動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，基于VBScript或JAVAScriptASP.NET技術(shù)是ASP的后續(xù)技術(shù)JSP技術(shù)基于JAVA的多平臺(tái)動(dòng)態(tài)頁(yè)技術(shù)PHP技術(shù)多平臺(tái)的網(wǎng)頁(yè)后臺(tái)技術(shù)，免費(fèi)的網(wǎng)頁(yè)腳本語(yǔ)言,1.3網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)技術(shù),28,他山之石可以攻玉，欣賞優(yōu)秀的網(wǎng)頁(yè)，學(xué)習(xí)他人之長(zhǎng)，激發(fā)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣，分析優(yōu)秀網(wǎng)頁(yè)的布局結(jié)構(gòu)、顏色搭配、視覺(jué)效果，留下直觀的第一印象，為學(xué)習(xí)網(wǎng)頁(yè)奠定基礎(chǔ)。,1.4優(yōu)秀網(wǎng)站賞析,29,網(wǎng)站實(shí)例分析,1網(wǎng)站描述：這是一家航空公司的網(wǎng)站首頁(yè)。2布局網(wǎng)頁(yè)布局采用的是比較常見(jiàn)的分欄式結(jié)構(gòu)3配色網(wǎng)頁(yè)選用藍(lán)色系，象征天空，與網(wǎng)站主題一致。網(wǎng)頁(yè)主要運(yùn)用了兩種藍(lán)色，分別是“#14397D”和“1E95BD”，如圖所示。此外，網(wǎng)頁(yè)文字的配色主要以白色和藍(lán)色為主。,30,1.4國(guó)外優(yōu)秀網(wǎng)站賞析,圖1-6利頓茶商,圖1-7中國(guó)瓷器,31,1.4國(guó)外優(yōu)秀網(wǎng)站賞析,圖1-8中國(guó)古董網(wǎng),圖1-9北美工藝品展,32,1.4優(yōu)秀個(gè)人網(wǎng)站,圖1-11花蝶谷網(wǎng)圖1-12艾艾在線,33,1.4優(yōu)秀個(gè)人網(wǎng)站,圖1-13云水茶人坊圖1-14蘋(píng)果樹(shù)下,34,本節(jié)結(jié)束,35,DreamweaverCS5工作界面網(wǎng)站的創(chuàng)建網(wǎng)站的管理,主要內(nèi)容,36,熟悉DreamweaverCS5的界面布局和工作環(huán)境掌握站點(diǎn)的創(chuàng)建和管理方法會(huì)創(chuàng)建本地站點(diǎn)和遠(yuǎn)程站點(diǎn),本章目標(biāo),37,38,39,參數(shù)設(shè)置一般設(shè)置的參數(shù)有常規(guī)參數(shù)、新建文檔參數(shù)和站點(diǎn)參數(shù)，這些都是開(kāi)始創(chuàng)建站點(diǎn)、設(shè)計(jì)網(wǎng)頁(yè)前需要考慮的因素。1常規(guī)參數(shù)設(shè)置2新建文檔參數(shù)設(shè)置,40,參數(shù)設(shè)置3站點(diǎn)參數(shù)設(shè)置,41,2.1.4DreamweaverCS4的幫助系統(tǒng),42,DreamweaverCS4有一套專業(yè)的創(chuàng)建和管理站點(diǎn)的工具，實(shí)現(xiàn)站點(diǎn)的創(chuàng)建和管理非常方便。要制作一個(gè)能夠被公眾瀏覽的網(wǎng)站，首先要在本地磁盤(pán)上制作這個(gè)網(wǎng)站，然后把這個(gè)網(wǎng)站上傳到WEB服務(wù)器上。放在本地磁盤(pán)上的網(wǎng)站文件夾稱為本地站點(diǎn)，處于Internet中WEB服務(wù)器上的網(wǎng)站文件夾稱為遠(yuǎn)程站點(diǎn)。DreamweaverCS4提供了管理本地站點(diǎn)和遠(yuǎn)程站點(diǎn)的強(qiáng)大的功能,2.2網(wǎng)站的創(chuàng)建,43,2.2創(chuàng)建本地站點(diǎn),44,2.2創(chuàng)建本地站點(diǎn),圖2-18創(chuàng)建站點(diǎn)向?qū)е唬禾顚?xiě)網(wǎng)站名稱,圖2-19創(chuàng)建站點(diǎn)向?qū)е唬捍_定是否使用服務(wù)器技術(shù),45,2.2創(chuàng)建本地站點(diǎn),圖2-20創(chuàng)建站點(diǎn)向?qū)е涸O(shè)置編輯方式,圖2-21創(chuàng)建站點(diǎn)向?qū)е模涸O(shè)置如何連接遠(yuǎn)程服務(wù)器,46,2.2創(chuàng)建本地站點(diǎn),圖2-22創(chuàng)建站點(diǎn)向?qū)е澹和瓿稍O(shè)置，顯示設(shè)置信息,圖2-23新創(chuàng)建的站點(diǎn),47,建立站點(diǎn)后，DreamweaverCS4可以對(duì)站點(diǎn)及站點(diǎn)文件進(jìn)行管理。管理站點(diǎn)是對(duì)已經(jīng)建立的本地站點(diǎn)或遠(yuǎn)程站點(diǎn)進(jìn)行管理，在DreamweaverCS4中，管理站點(diǎn)可以通過(guò)“管理站點(diǎn)”對(duì)話框進(jìn)行管理，在“管理站點(diǎn)”對(duì)話框中，可以創(chuàng)建新站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)以及導(dǎo)入或?qū)С稣军c(diǎn)。,2.3網(wǎng)站的管理,48,2.3網(wǎng)站的管理,圖2-30“管理站點(diǎn)”對(duì)話框,49,2.3.1使用文件面板管理網(wǎng)站中的資源,圖2-32創(chuàng)建文件和文件夾,50,2.3.2使用資源面板管理網(wǎng)站中的資源,51,文本圖片：Gif、JPEG、PNG、矢量格式超鏈接：鏈接的對(duì)象是文本、圖片、圖片的某個(gè)區(qū)域、腳本程序動(dòng)畫(huà)：Gif動(dòng)畫(huà)、Flash動(dòng)畫(huà)聲音和視頻：MIDI、WAV、MP3、RM導(dǎo)航欄：一組超鏈接，在網(wǎng)頁(yè)的頂部或一側(cè)表格：控制網(wǎng)頁(yè)各元素的布局表單：接收用戶輸入，反饋給服務(wù)器網(wǎng)頁(yè)特效：彈出窗口、文字隨鼠標(biāo)移動(dòng)等，JaVaScript、VBScript網(wǎng)頁(yè)交互元素：聊天、購(gòu)物、搜索，ADO結(jié)合ASPJSP,網(wǎng)頁(yè)的基本元素,52,網(wǎng)頁(yè)文檔的基本操作包括：（1）新建網(wǎng)頁(yè)文檔；（2）保存與另存網(wǎng)頁(yè)文檔；（3）打開(kāi)網(wǎng)頁(yè)文檔；（4）關(guān)閉網(wǎng)頁(yè)文檔。,.4網(wǎng)頁(yè)文檔的基本操作,53,2.5.1新建與保存網(wǎng)頁(yè)DreamweaverCS4為創(chuàng)建新文檔提供了若干選項(xiàng)，用戶可以創(chuàng)建以下任意文檔。新的空白文檔或模板；基于Dreamweaver附帶的預(yù)設(shè)計(jì)頁(yè)面布局文檔；基于現(xiàn)有模板的文檔。1創(chuàng)建新文檔2保存新文檔,2.5制作簡(jiǎn)單網(wǎng)頁(yè),54,2.5.2頁(yè)面屬性設(shè)置頁(yè)面屬性的設(shè)置包括頁(yè)面的布局和格式設(shè)置。1設(shè)置網(wǎng)頁(yè)標(biāo)題,2.5制作簡(jiǎn)單網(wǎng)頁(yè),55,2.5.2頁(yè)面屬性設(shè)置2設(shè)置網(wǎng)頁(yè)外觀,2.5制作簡(jiǎn)單網(wǎng)頁(yè),56,2.5.2頁(yè)面屬性設(shè)置3設(shè)置網(wǎng)頁(yè)鏈接,2.5制作簡(jiǎn)單網(wǎng)頁(yè),57,2.5.2頁(yè)面屬性設(shè)置4設(shè)置網(wǎng)頁(yè)跟蹤圖像,2.5制作簡(jiǎn)單網(wǎng)頁(yè),58,2.5.3網(wǎng)頁(yè)的基本排版在通常情況下，網(wǎng)頁(yè)上一般都包含文本、日期、特殊符號(hào)及水平線等基本元素。1網(wǎng)頁(yè)基本元素2頁(yè)面的簡(jiǎn)單排版（1）設(shè)置文本的大?。?）設(shè)置文本的字體（3）設(shè)置文本的顏色（4）設(shè)置文本對(duì)齊方式,2.5制作簡(jiǎn)單網(wǎng)頁(yè),59,2.5.4插入圖像Web上常用的圖像格式包括以下3種：GIF、JPEG和PNG。Dreamweaver能夠使用GIF、JPEG或PNG格式打開(kāi)或預(yù)覽任何圖像。使用Dreamweaver將一個(gè)圖像插入到網(wǎng)頁(yè)中有3種方法：在插入面板的“常用”分類中選擇“圖像”按鈕；執(zhí)行“插入”“圖像”命令；使用Ctrl+Alt+I組合鍵。,2.5制作簡(jiǎn)單網(wǎng)頁(yè),60,案例一：創(chuàng)建學(xué)校概況頁(yè)面【案例綜述】制作學(xué)校概況頁(yè)面，通過(guò)簡(jiǎn)單的頁(yè)面制作展示學(xué)校的基本情況。【案例展示】本例中的素材包括4幅校園圖片，實(shí)例效果如圖3-42所示。,2.5制作簡(jiǎn)單網(wǎng)頁(yè),61,練習(xí)：制作愛(ài)家美食網(wǎng)站“美食推薦”頁(yè)面【展示】本實(shí)訓(xùn)中的素材包括2幅圖片，制作如圖所示的愛(ài)家美食網(wǎng)站“美食推薦”頁(yè)面。,2.5制作簡(jiǎn)單網(wǎng)頁(yè),62,2.6網(wǎng)頁(yè)制作規(guī)范,在網(wǎng)頁(yè)制作過(guò)程中，要求為目錄和文件命名時(shí)都應(yīng)遵循相應(yīng)的規(guī)范，名稱應(yīng)能代表文件的意義，以便進(jìn)行查找、修改。下面從網(wǎng)站目錄建立規(guī)范、文件命名規(guī)范、文件頭代碼規(guī)范三個(gè)方面，具體介紹網(wǎng)頁(yè)制作的規(guī)范。,63,2.6.1網(wǎng)站目錄建立規(guī)范,網(wǎng)站目錄建立的原則是以最少的層次提供最清晰簡(jiǎn)便的訪問(wèn)結(jié)構(gòu)。網(wǎng)站目錄建立規(guī)范如圖所示。,64,2.6.2文件命名規(guī)范,基本原則：以最少的字母達(dá)到最容易理解的意義。所有文件名、文件夾使用小寫(xiě)英文字母、數(shù)字、下劃線的組合，比如：news.html，unit1_1.html等。不要使用漢字、空格和特殊字符。有些服務(wù)器無(wú)法識(shí)別這些字符，會(huì)導(dǎo)致文件鏈接出錯(cuò)。盡量使用英文，最好有一定的意義，這樣以后便于別人或自己修改。例如：名為“Login.html”的文件，一看名稱，就知道是登錄頁(yè)面。對(duì)于圖像文件，在命名時(shí)要遵循以下幾點(diǎn)：名稱分為頭部和尾部?jī)刹糠?，用下劃線分開(kāi)，盡量用英文。頭部表示圖片的大類性質(zhì)，比如：廣告（banner）、標(biāo)志(logo)、菜單(menu)、按鈕(button)、