信息產(chǎn)業(yè)IT技術培訓指定教材網(wǎng)頁設計實用教程課件
單擊此處編輯母版標題樣式,#,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,信息產(chǎn)業(yè)IT技術培訓指定教材,網(wǎng)頁設計實用教程,耿強 主編,杜艷紅 劉建昌 副主編,中國青年出版社,信息產(chǎn)業(yè)IT技術培訓指定教材網(wǎng)頁設計實用教程,1,通過本章學習，應該掌握以下內(nèi)容：,認識網(wǎng)頁,構(gòu)成網(wǎng)頁的基本要素,制作網(wǎng)頁的基本工具,美化網(wǎng)頁的基本工具,網(wǎng)頁制作的基本步驟,第1章 網(wǎng)頁制作初識,通過本章學習，應該掌握以下內(nèi)容：第1章 網(wǎng)頁制作初識,2,1.1 一個校園網(wǎng)的制作示例,1.1.1 主要網(wǎng)頁畫面,1.1.2 網(wǎng)頁的基本功能,1.2,網(wǎng)頁的基本要素,1.2.1 文字,文字是網(wǎng)頁發(fā)布信息所用的主要形式，由文字制作出的網(wǎng)頁占用空間小，當用戶瀏覽時，可以很快的展現(xiàn)在用戶面前另外，文字性網(wǎng)頁還可以利用瀏覽器中“文件”菜單下的“另存為”功能將其下載但是沒有編排點綴的純文字網(wǎng)頁，又會給人帶來死板不活潑的感覺，使得人們不愿意再往下瀏覽1.1 一個校園網(wǎng)的制作示例1.1.1 主要網(wǎng)頁畫面1.,3,文字性網(wǎng)頁一定要注意編排，包括標題得字型字號，內(nèi)容的層次樣式，是否需要變換顏色進行點綴等1標題,一個網(wǎng)頁通常都有一個標題，表明本網(wǎng)頁的主要內(nèi)容。
標題是否醒目，是吸引瀏覽者能否注意的一個關鍵，因此對標題的設計是很重要的網(wǎng)頁中的文字不能太大或太小太大會使得一個網(wǎng)頁信息量變小，太小又使人們?yōu)g覽時感到費勁一個優(yōu)秀網(wǎng)頁中的文字，應統(tǒng)籌規(guī)劃，大小搭配適當，給人以生動活潑之感覺2字號,文字性網(wǎng)頁一定要注意編排，包括標題得字型字號，內(nèi),4,在網(wǎng)頁適當?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引人的效果應該注意的是在報刊上變換字體字型非常普遍，它可以在不同的地方使用不同的字型但在網(wǎng)頁制作上卻要慎重因為有些美麗的字型在制作網(wǎng)頁的計算機上有，但將來別人瀏覽你的網(wǎng)頁時，瀏覽者的計算機上未必裝有這種字體這樣瀏覽者就無法得到你預想的瀏覽效果，甚至適得相反如果只是標題或少量的文字，可以將采用的特殊字體制作成圖形方式，就可避免其他瀏覽者看不到的尷尬局面了3字型,在網(wǎng)頁適當?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生,5,1.2.2 表格,當文本內(nèi)容較多時，可以利用表格形式來實現(xiàn)表格是在網(wǎng)頁上的一行或多行單元格，用來組織網(wǎng)頁的布局或系統(tǒng)地布置數(shù)據(jù)，用戶可以放置任何東西在表格的單元格中，包括文字、圖形和表單等表格具有容量大、結(jié)構(gòu)嚴謹和效果直觀等多個優(yōu)點，是網(wǎng)頁中不可缺少的記錄或總結(jié)工具。
表格還可以用來控制網(wǎng)頁中信息的布局方式許多大型的網(wǎng)站都是使用表格來進行頁面布局的,使頁面看起來更加直觀和有條理1.2.2 表格 當文本內(nèi)容較多時,6,1.2.3 圖形,這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是各種圖像，還可以是動畫一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的網(wǎng)頁上的圖形格式一般使用JPEG和GIF，這兩種格式具有跨平臺的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示圖形在網(wǎng)頁中通常有如下應用：,1.2.3 圖形 這里的圖形概念是廣義的，它可以是普,7,1菜單按鈕,網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面2背景圖形,為了加強視覺效果，有些網(wǎng)頁在整個網(wǎng)頁的底層放置了圖形，稱作背景圖背景圖可以使網(wǎng)頁更加華麗，使人感到界面友好但由于這是一個比較大的圖形，需要占據(jù)較大的空間，致使網(wǎng)頁的顯示速度明顯變慢，所以，近期的網(wǎng)頁以及比較著名的訪問量比較大網(wǎng)站一般都不設置背景圖形1菜單按鈕 網(wǎng)頁上的菜單按鈕有一,8,1.2.4 鏈接標志,網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面。
鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，也可以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站鏈接的標志有文字和圖形兩種制作一些精美的圖形作為鏈接按鈕，使它和整個網(wǎng)頁融為一體1.2.4 鏈接標志 網(wǎng)頁上的菜單按鈕有一些是由,9,1.2.5 交互功能,Internet區(qū)別其他媒體的一個重要標志就是它的交互功能網(wǎng)頁的交互功能其他媒體是無法比擬的通常網(wǎng)頁的交互功能都是利用表單來實現(xiàn)的表單是網(wǎng)頁中站點服務器處理的一組數(shù)據(jù)輸入域，當訪問者單擊按鈕或圖形來提交表單后，數(shù)據(jù)就會傳送到服務器上1.2.5 交互功能 Internet區(qū)別其他媒,10,1.3 網(wǎng)頁制作和美化工具,HTML（Hypertext Markup Language）是一種專門用于Web頁制作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點HTML文檔由文本、格式化代碼和導向其他文檔的超鏈接組成1.3.1 網(wǎng)頁制作工具,1超文本標識語言（HTML）,1.3 網(wǎng)頁制作和美化工具 HTML（Hyper,11,Dreamweaver是由Macromedia公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復雜的HTML源代碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時也容易被業(yè)余網(wǎng)友們所掌握。
Dreamweaver支持動態(tài)HTML，并采用了Roundtrip HTML技術，Dreamweaver是一種可以滿足多層次需求、功能強大的可視化專業(yè)級網(wǎng)頁設計及制作工具2,Dreamweaver,Dreamweaver是由Macromedia公,12,FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具FrontPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來了極大的方便，Microsoft公司將FrontPage封裝入Office之中，成為Office家族的一員，使之功能更為強大3,FrontPage,FrontPage是由Microsoft公司推出,13,Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認的PC機上最好的通用平面美術設計軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具1.3.2 網(wǎng)頁美化工具,1,Photoshop,Photoshop是由Adobe公司開發(fā)的圖形處,14,Fireworks是由Macromedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。
因為Fireworks是第一套專門為制作網(wǎng)頁圖形而設計的軟件，同時也是專業(yè)的網(wǎng)頁圖形設計及制作的解決方案作為一個圖像處理軟件，F(xiàn)ireworks能夠自由地導入多種格式的圖像進行處理Fireworks還能夠自動切割圖像、生成光標動態(tài)感應的JavaScript程序等等，而且Fireworks具有強大的動畫功能和一個相當完美的網(wǎng)絡圖像生成器2,Fireworks,Fireworks是由Macromedia公司開,15,Flash是美國Macromedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件，它是一種交互式動畫設計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果它主要應用于網(wǎng)頁設計和多媒體創(chuàng)作等領域，功能十分強大和獨特，已成為交互式矢量動畫的標準，在網(wǎng)上非常流行Flash廣泛應用于網(wǎng)頁動畫制作、教學動畫演示、網(wǎng)上購物、在線游戲等的制作中3,Flash,Flash是美國Macromedia公司開發(fā)的矢,16,1.4 網(wǎng)頁制作的基本步驟,網(wǎng)站,定位要小，內(nèi)容要精如果要制作一個包羅萬象的站點，把所有精彩的東西都放在上面，結(jié)果往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有，卻樣樣都很膚淺。
網(wǎng)站的題材最好選自己擅長或者喜愛的內(nèi)容興趣是制作網(wǎng)站的動力，沒有熱情，很難設計制作出優(yōu)秀的網(wǎng)站1.4.1 網(wǎng)站定位,1.4 網(wǎng)頁制作的基本步驟 網(wǎng)站定位要小，內(nèi)容要精,17,進行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設計其結(jié)構(gòu)組織網(wǎng)站的內(nèi)容可以從兩個角度來考慮從設計者的角度來考慮，可以依據(jù)被描述對象的組織機構(gòu)、類別劃分等來組織內(nèi)容；從瀏覽者的角度來考慮，就應該將各種素材依據(jù)瀏覽者的需要進行內(nèi)容分類，以便瀏覽者可以快捷地獲取所需要的信息及其相關內(nèi)容1.4.2 整體規(guī)劃,進行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設計其結(jié)構(gòu),18,合理的結(jié)構(gòu)設計對于網(wǎng)站的規(guī)劃也是至關重要的以下是三種常用的結(jié)構(gòu)類型層狀結(jié)構(gòu),層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)，,合理的結(jié)構(gòu)設計對于網(wǎng)站的規(guī)劃也是至關重要的以下是三,19,主 頁,頁,面,1,頁,面,2,頁,面,3,線性結(jié)構(gòu),線性結(jié)構(gòu)類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導瀏覽者按部就班地瀏覽整個網(wǎng)站文件主 頁頁頁頁 線性結(jié)構(gòu) ,20,主 頁,頁面1,頁面2,頁面3,頁面4,頁面5,頁面7,頁面8,一級標題,二級標題,頁面6,Web結(jié)構(gòu),Web結(jié)構(gòu)類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。
主 頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級標題二級,21,通常在進行網(wǎng)頁開發(fā)時，首先都進行靜態(tài)網(wǎng)頁的制作，然后再在其中加入腳本程序、表單等動態(tài)內(nèi)容靜態(tài)網(wǎng)頁僅僅用來被動地發(fā)布信息，而不具有任何交互功能，它是,Web,網(wǎng)頁的重要組成部分一個好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設計美觀對于網(wǎng)頁的外觀設計，提供以下建議：,（,1,）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應它，應該根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標得出一個最適合的網(wǎng)頁架構(gòu)1.4.3 網(wǎng)頁設計與制作,1靜態(tài)網(wǎng)頁的設計與制作,通常在進行網(wǎng)頁開發(fā)時，首先都進行靜態(tài)網(wǎng)頁的制作，然后,22,（,2,）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時要作大幅度的滾動，對于篇幅太長的一頁可以使用內(nèi)部鏈接解決3,）切勿以,800,600,以上的分辨率設計網(wǎng)頁，常用的分辨率是,640,480,及,800,600,現(xiàn)在國內(nèi)的站點基本上都是,800,600,，但是如果主要是面向國外訪問者的站點，建議使用,640,480,4,）不應在每頁中插入太多的廣告相信任何訪問者都不會喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會令人煩厭。
2）每頁排版不要太松散或用太大的字，盡量避免訪問者,23,（,5,）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時都要花費過多的時間去下載6,）底色或墻紙必須與文字對比強烈，以易于閱讀如果網(wǎng)頁是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪問者能夠舒適地閱讀網(wǎng)頁7,）不要把圖片白色當作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設為白色，解決的辦法除了真的把該網(wǎng)頁的底色設為白色之外，最好還是用圖片編輯工具將圖片設為透明顏色5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時都要花,24,靜態(tài)網(wǎng)頁制作完成后，接下來的工作就是為網(wǎng)頁添加動態(tài)效果，包括一些腳本語言程序和數(shù)據(jù)庫程序的設計，以及加入動畫效果等一個真正的網(wǎng)站，不僅應該實現(xiàn)傳統(tǒng)媒體的電子化，給用戶提供需要的內(nèi)容，而且還應該做更多的事情，完成比頁面瀏覽更高層次的需求，例如收集信息、數(shù)據(jù)傳遞、數(shù)據(jù)存儲以及系統(tǒng)維護等2為網(wǎng)頁的添加動態(tài)效果,靜態(tài)網(wǎng)頁制作完成后，接下來的工作就是為網(wǎng)頁添加動態(tài)效,25,當網(wǎng)頁設計人員制作完所有網(wǎng)站頁面之后，需要對所設計的網(wǎng)頁進行審查和測試，測試內(nèi)容包括功能性測試和完整性測試兩個方面所謂功能性測試就是要保證網(wǎng)頁的可用性，達到最初的內(nèi)容組織設計目標，實現(xiàn)所規(guī)定的功能，讀者可方便快速地尋找到所需的內(nèi)容。
完整性測試就是保證頁面內(nèi)容顯示正確，鏈接準確，無差錯無遺漏1.4.4 測試。
