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

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