1、a,1,網(wǎng)頁設(shè)計基礎(chǔ)知識,龍虎網(wǎng) 技術(shù)設(shè)計部 黃惠,a,2,1.網(wǎng)頁設(shè)計基本概念,a,3,網(wǎng)站,網(wǎng)站(Web Site)是一個存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它包含一個或多個網(wǎng)頁，這些網(wǎng)頁以一定的方式鏈接在一起，成為一個整體，用來描述一組完整的信息或達到某種期望的宣傳效果。有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門戶網(wǎng)站；有的網(wǎng)站只有幾個頁面，如個人網(wǎng)站。,a,4,網(wǎng)頁,網(wǎng)頁（Web Page）實際上是一個文件，網(wǎng)頁里可以有文字、圖像、聲音及視頻信息等。網(wǎng)頁可以看成是一個單一體，是網(wǎng)站的一個元素。 平常我們所聽說的“新浪”、“搜狐”、“網(wǎng)易”等，即是俗稱的“網(wǎng)站”。而當(dāng)我們訪問這些網(wǎng)站的時候，最直

2、接訪問的就是“網(wǎng)頁”了。這許許多多的網(wǎng)頁則組成了整個站點，也就是網(wǎng)站,a,5,首頁,首頁(Home page)，它是一個單獨的網(wǎng)頁，和一般網(wǎng)頁一樣，可以存放各種信息，同時又是一個特殊的網(wǎng)頁，作為整個網(wǎng)站的起始點和匯總點。例如，當(dāng)瀏覽者輸入搜狐網(wǎng)站地址“”后出現(xiàn)在第一個頁面，即sohu網(wǎng)站的首頁。 首頁和主頁的區(qū)別 通常網(wǎng)站為方便瀏覽者查找和分類瀏覽網(wǎng)站的信息，會將信息分類，并建立一個網(wǎng)頁以放置網(wǎng)站信息的目錄，即網(wǎng)站的主頁。 并非所有的網(wǎng)站都將主頁設(shè)置為首頁，有的網(wǎng)站喜歡在首頁放置一段進入動畫，并將主頁的鏈接放置在首頁上，瀏覽者需要單擊首頁的鏈接進入主頁。,a,6,a,7,網(wǎng)頁的表現(xiàn)形式,靜態(tài)網(wǎng)

3、頁：客戶端與服務(wù)器端不發(fā)生交互 訪問者只能被動地瀏覽網(wǎng)站建設(shè)者提供的網(wǎng)頁內(nèi)容。其特點： 網(wǎng)頁內(nèi)容不會發(fā)生變化，除非網(wǎng)頁設(shè)計者修改了網(wǎng)頁的內(nèi)容。不能實現(xiàn)和瀏覽網(wǎng)頁的用戶之間的交互。信息流向是單向的。 動態(tài)網(wǎng)頁：客戶端與服務(wù)器端要發(fā)生交互 動態(tài)網(wǎng)頁是指瀏覽器可以和服務(wù)器數(shù)據(jù)庫進行實時數(shù)據(jù)交流的交互網(wǎng)頁，而不是加上了動畫等效果的動感網(wǎng)頁。動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的功能，如用戶注冊、用戶登錄、搜索查詢、用戶管理、訂單管理等。信息流向是雙向的。,a,8,2.網(wǎng)頁的版塊結(jié)構(gòu),Internet中的網(wǎng)頁由于涉及和制作的差別而千變?nèi)f化，但通常由幾大版塊組成。,a,9,網(wǎng)站LOGO,通常網(wǎng)站為體現(xiàn)其特色與內(nèi)

4、涵，涉及并制作一個LOGO圖像放置在網(wǎng)站的左上角或其他醒目的位置。 企業(yè)網(wǎng)站常常使用企業(yè)的標志或者注冊商標。 一個設(shè)計優(yōu)秀的LOGO可以給瀏覽者留下深刻的印象，為網(wǎng)站和企業(yè)形象宣傳起到十分重要的作用。,a,10,網(wǎng)站LOGO,a,11,導(dǎo)航條,導(dǎo)航條是網(wǎng)頁的重要組成元素。設(shè)計的目的是將站點內(nèi)的信息分類處理，然后放在網(wǎng)頁中以幫助瀏覽者快速查找站內(nèi)信息。 導(dǎo)航條的形式多種多樣，包括文本導(dǎo)航條、圖像導(dǎo)航條以及動畫導(dǎo)航條等。 有些使用特殊技術(shù)（例如Flash、JavaScript、CSS）制作的導(dǎo)航條還可以具有下拉菜單的功能。,a,12,導(dǎo)航條,a,13,Banner,在網(wǎng)頁布局中，大部分網(wǎng)頁將Ban

5、ner放置在與導(dǎo)航條相鄰處，或者其他醒目的位置以吸引瀏覽者瀏覽。 Banner的中文意思是橫幅。Banner的內(nèi)容通常為網(wǎng)頁中的廣告。 Banner的中文意思是橫幅。Banner的內(nèi)容通常為網(wǎng)頁中的廣告。 在網(wǎng)頁布局中，大部分網(wǎng)頁將Banner放置在與導(dǎo)航條相鄰處，或者其他醒目的位置以吸引瀏覽者瀏覽。,a,14,Banner,a,15,內(nèi)容版塊,網(wǎng)頁的內(nèi)容版塊是整個頁面的組成部分。 設(shè)計人員可以通過該頁面的欄目要求來設(shè)計不同版塊，每個版塊可以有一個標題內(nèi)容，并且每個內(nèi)容版塊主要來顯示不同文本信息。,a,16,a,17,版尾或版權(quán)版塊,版尾，即頁面最低端的版塊。 這部分位置通常放置網(wǎng)頁的版權(quán)信息

6、，以及網(wǎng)頁所有者、設(shè)計者的聯(lián)系方式等。 有的網(wǎng)站也將網(wǎng)站的友情鏈接以及一些附屬的導(dǎo)航條放置在這里。,a,18,3.網(wǎng)頁的基本構(gòu)成要素,雖然網(wǎng)頁種類繁多，形式內(nèi)容各有不同。但網(wǎng)頁的基本構(gòu)成要素大體相同，網(wǎng)頁設(shè)計就是要將構(gòu)成要素有機整合，表達出美與和諧。,a,19,文本,網(wǎng)頁中的信息以文本為主。與圖片相比，文字雖然不如圖片那樣能夠很快引起瀏覽者的注意，但卻能準確地表達信息的內(nèi)容和含義。,a,20,圖片,用戶在網(wǎng)頁中使用的圖片格式主要包括GIF、JPEG和PNG等，其中使用最廣泛的是GIF和JPEG兩種格式。,a,21,超鏈接,超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，是一種允許用戶同其他網(wǎng)頁或站點之間進

7、行連接的元素。 超鏈接是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，這個目標可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應(yīng)用程序。,a,22,動畫,在網(wǎng)頁中為了更有效地吸引瀏覽者的注意，許多網(wǎng)站的廣告都做成了動畫形式。 網(wǎng)頁中的動畫主要有兩種：GIF動畫和Flash動畫。其中GIF動畫只能有256種顏色，主要用于簡單動畫和圖標。,a,23,聲音和視頻,聲音是多媒體網(wǎng)頁的一個重要組成部分。用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。 很多瀏覽器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格

8、式的聲音文件則需要專門的瀏覽器播放。,a,24,表格,在網(wǎng)頁中表格用來控制網(wǎng)頁中信息的布局方式。 包括兩個方面：一是使用行和列的形式來布局文本和圖像以及其他的列表化數(shù)據(jù)；二是可以使用表格來精確控制各種網(wǎng)頁元素在網(wǎng)頁中出現(xiàn)的位置。,a,25,表單,網(wǎng)頁中的表單通常用來接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到網(wǎng)頁設(shè)計者設(shè)置的目標端。這個目標可以是文本文件、Web頁、電子郵件，也可以是服務(wù)器端的應(yīng)用程序。 表單一般用來收集聯(lián)系信息、接受用戶要求、獲得反饋意見、設(shè)置來賓簽名簿、讓瀏覽者注冊為會員并以會員的身份登錄站點等。,a,26,其他常見元素,包括懸停按鈕、Java特效、ActiveX等各種特

9、效。它們不僅能點綴網(wǎng)頁，使網(wǎng)頁更活潑有趣，而且在網(wǎng)上娛樂、電子商務(wù)等方面也有著不可忽視的作用。,a,27,4.網(wǎng)頁設(shè)計軟件,熟練使用各種網(wǎng)頁設(shè)計以及圖像、動畫處理制作軟件，是一個網(wǎng)頁設(shè)計師必須掌握的技能。,a,28,Photoshop圖像處理軟件,Photoshop是Adobe公司推出的功能強大的平面圖像處理軟件，Photoshop在圖像編輯、桌面出版、網(wǎng)頁圖像編輯、廣告設(shè)計、婚紗攝影等各行各業(yè)的廣泛應(yīng)用，它已成為許多涉及圖像處理的行業(yè)的事實標準。,a,29,Flash動畫設(shè)計軟件,Flash是Macromedia公司開發(fā)的一款優(yōu)秀的網(wǎng)頁動畫開發(fā)軟件，從簡單的動畫到復(fù)雜的交互式Web應(yīng)用程序，

10、它使用戶可以創(chuàng)建任何作品。通過添加圖片、聲音和視頻，可以使Flash應(yīng)用程序媒體豐富多彩。 Flash被稱為“最靈活的前臺”，其獨特的編譯方式和跨平臺的能力，廣泛的應(yīng)用（軟件、游戲、Web應(yīng)用程序、多媒體娛樂等多方面），使之越來越成為一種重要的工具。,a,30,Fireworks網(wǎng)頁圖像處理軟件,Fireworks是Macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計的圖形編輯軟件，使用Fireworks都不僅可以輕松地制作出尺寸較小的圖形、GIF動畫。 如果將Photoshop比作全能的圖像處理大師的話，F(xiàn)ireworks就是精于網(wǎng)頁圖像處理的專家。它在矢量圖形的處理方面有其獨特之處。 在We

11、b應(yīng)用方面，F(xiàn)ireworks是最早提供切片功能的圖像處理軟件。Fireworks支持在圖像中繪制熱區(qū)并直接生成網(wǎng)頁文檔，并且具備簡單的GIF動畫制作能力，同時支持將動畫轉(zhuǎn)換為Flash文件并嵌入到網(wǎng)絡(luò)中播放。,a,31,a,32,5.網(wǎng)站建設(shè)基本流程,規(guī)范的網(wǎng)站建設(shè)應(yīng)遵循一定的流程，合理的流程可以最大限度地提高工作效率。網(wǎng)站建設(shè)流程主要由規(guī)劃設(shè)計階段、實施發(fā)布階段、評價階段組成。,a,33,a,34,6.網(wǎng)頁版式設(shè)計,網(wǎng)頁的版式設(shè)計是網(wǎng)頁設(shè)計的核心，主要內(nèi)容包括網(wǎng)頁整體布局設(shè)計和導(dǎo)航樣式的設(shè)計。本節(jié)將介紹常見的幾種網(wǎng)頁布局，以及網(wǎng)頁導(dǎo)航設(shè)計應(yīng)遵循的原則。,a,35,網(wǎng)頁布局,網(wǎng)頁布局是網(wǎng)頁設(shè)

12、計的基礎(chǔ)，目前網(wǎng)頁的布局主要可歸為三大類型： 1分欄式結(jié)構(gòu) 2區(qū)域分布式結(jié)構(gòu) 3無框架局限式結(jié)構(gòu),a,36,分欄式布局,a,37,區(qū)域分布式布局,a,38,無框架局限式布局,a,39,導(dǎo)航設(shè)計,導(dǎo)航是網(wǎng)頁設(shè)計中不可或缺的基礎(chǔ)元素之一。導(dǎo)航就如同一個網(wǎng)站的路標，有了它就不會在瀏覽網(wǎng)站時“迷路”。導(dǎo)航鏈接著各個頁面，只要單擊導(dǎo)航中的超級鏈接就能進入相應(yīng)的頁面。 導(dǎo)航設(shè)計的好壞，決定著用戶是否能很方便地使用網(wǎng)站。導(dǎo)航設(shè)計應(yīng)直觀明確，最大限度地為用戶使用考慮，盡可能使網(wǎng)頁切換更便捷。導(dǎo)航的設(shè)計要符合整個網(wǎng)站的風(fēng)格和要求，不同的網(wǎng)站會采用不同的導(dǎo)航方式。,a,40,導(dǎo)航設(shè)計,一般來說，在網(wǎng)頁的上端或左側(cè)

13、設(shè)置導(dǎo)航欄是比較普遍的方式，如圖1.9所示。網(wǎng)站采用上端文字作為一級導(dǎo)航，左側(cè)樹狀結(jié)構(gòu)菜單作為二級導(dǎo)航。,a,41,導(dǎo)航設(shè)計,讓用戶了解當(dāng)前所處的位置； 讓用戶能根據(jù)走過的路徑，確定下一步的前進方向和路徑； 不需要瀏覽太多的頁面才能找到需要的信息，讓用戶能快速而簡捷地找到所需的信息，并以最佳的路徑到達這些信息； 讓用戶使用網(wǎng)站遇到困難時，能尋求到解決困難的方法，找到最佳路徑； 讓用戶清楚地了解整個網(wǎng)站的結(jié)構(gòu)概況，產(chǎn)生整體性感知； 對使用頻率不同的信息作有序處理。,a,42,7.網(wǎng)頁風(fēng)格設(shè)計,同樣的版式設(shè)計，配色不同，文字樣式不同，也可以呈現(xiàn)出多種不同的網(wǎng)頁風(fēng)格,a,43,頁面配色,1、 設(shè)計精美的網(wǎng)站都有其色調(diào)構(gòu)成的總體傾向。以一種或幾種臨近顏色為主導(dǎo)，使網(wǎng)頁全局呈現(xiàn)某種和諧、統(tǒng)一的色彩傾向。 運用色系。先根據(jù)網(wǎng)頁主題，選定一種主色，然后調(diào)整透明度或飽和度，也就是將色彩變淺或加深，調(diào)配出新的色彩。這樣的頁面看起來色彩一致，有層次感；一般來說，適合于網(wǎng)頁標準色的顏色有3大系：藍色、黃/橙色和黑/灰/白色。,電子購物網(wǎng)站頁面結(jié)構(gòu),a,44,頁面配色,如圖所示。百圓褲業(yè)加盟商登陸系統(tǒng)，采用紅色為主色調(diào)。,a,