《信息產(chǎn)業(yè)I技術(shù)培訓(xùn)指定教材網(wǎng)設(shè)計實用教程》由會員分享，可在線閱讀，更多相關(guān)《信息產(chǎn)業(yè)I技術(shù)培訓(xùn)指定教材網(wǎng)設(shè)計實用教程（32頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,*,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,信息產(chǎn)業(yè)IT技術(shù)培訓(xùn)指定教材,網(wǎng)頁設(shè)計實用教程,耿強 主編,杜艷紅 劉建昌 副主編,中國青年出版社,通過本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容：,認(rèn)識網(wǎng)頁,構(gòu)成網(wǎng)頁的基本要素,制作網(wǎng)頁的基本工具,美化網(wǎng)頁的基本工具,網(wǎng)頁制作的基本步驟,第1章 網(wǎng)頁制作初識,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)頁占用空間小，當(dāng)用戶瀏覽時，可以很快的展現(xiàn)在用戶面前。另外，文字性網(wǎng)頁還可以利用瀏覽器中“

2、文件”菜單下的“另存為”功能將其下載。但是沒有編排點綴的純文字網(wǎng)頁，又會給人帶來死板不活潑的感覺，使得人們不愿意再往下瀏覽。,文字性網(wǎng)頁一定要注意編排，包括標(biāo)題得字型字號，內(nèi)容的層次樣式，是否需要變換顏色進行點綴等。,1標(biāo)題,一個網(wǎng)頁通常都有一個標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容。標(biāo)題是否醒目，是吸引瀏覽者能否注意的一個關(guān)鍵，因此對標(biāo)題的設(shè)計是很重要的。,網(wǎng)頁中的文字不能太大或太小。太大會使得一個網(wǎng)頁信息量變小，太小又使人們?yōu)g覽時感到費勁。一個優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動活潑之感覺。,2字號,在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引人的效果。應(yīng)該注意的是在報刊上

3、變換字體字型非常普遍，它可以在不同的地方使用不同的字型。但在網(wǎng)頁制作上卻要慎重。因為有些美麗的字型在制作網(wǎng)頁的計算機上有，但將來別人瀏覽你的網(wǎng)頁時，瀏覽者的計算機上未必裝有這種字體。這樣瀏覽者就無法得到你預(yù)想的瀏覽效果，甚至適得相反。,如果只是標(biāo)題或少量的文字，可以將采用的特殊字體制作成圖形方式，就可避免其他瀏覽者看不到的尷尬局面了。,3字型,1.2.2 表格,當(dāng)文本內(nèi)容較多時，可以利用表格形式來實現(xiàn)。表格是在網(wǎng)頁上的一行或多行單元格，用來組織網(wǎng)頁的布局或系統(tǒng)地布置數(shù)據(jù)，用戶可以放置任何東西在表格的單元格中，包括文字、圖形和表單等。表格具有容量大、結(jié)構(gòu)嚴(yán)謹(jǐn)和效果直觀等多個優(yōu)點，是網(wǎng)頁中不可缺少

4、的記錄或總結(jié)工具。,表格還可以用來控制網(wǎng)頁中信息的布局方式。許多大型的網(wǎng)站都是使用表格來進行頁面布局的,使頁面看起來更加直觀和有條理。,1.2.3 圖形,這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是各種圖像，還可以是動畫。一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的。網(wǎng)頁上的圖形格式一般使用JPEG和GIF，這兩種格式具有跨平臺的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。圖形在網(wǎng)頁中通常有如下應(yīng)用：,1菜單按鈕,網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面。,2背景圖形,為了加強視覺效果，有些網(wǎng)頁在整個網(wǎng)頁的

5、底層放置了圖形，稱作背景圖。背景圖可以使網(wǎng)頁更加華麗，使人感到界面友好。但由于這是一個比較大的圖形，需要占據(jù)較大的空間，致使網(wǎng)頁的顯示速度明顯變慢，所以，近期的網(wǎng)頁以及比較著名的訪問量比較大網(wǎng)站一般都不設(shè)置背景圖形。,1.2.4 鏈接標(biāo)志,網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面。鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，也可以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站。鏈接的標(biāo)志有文字和圖形兩種。制作一些精美的圖形作為鏈接按鈕，使它和整個網(wǎng)頁融為一體。,1.2.5 交互功能,Internet區(qū)別其他媒體的

6、一個重要標(biāo)志就是它的交互功能。網(wǎng)頁的交互功能其他媒體是無法比擬的。,通常網(wǎng)頁的交互功能都是利用表單來實現(xiàn)的。表單是網(wǎng)頁中站點服務(wù)器處理的一組數(shù)據(jù)輸入域，當(dāng)訪問者單擊按鈕或圖形來提交表單后，數(shù)據(jù)就會傳送到服務(wù)器上。,1.3,網(wǎng),網(wǎng),頁,頁制,作,作和,美,美化,工,工具,HTML,（,（HypertextMarkupLanguage,）,）是,一,一種,專,專門,用,用于Web頁,制,制作,的,的編,程,程語,言,言，,用,用來,描,描述,超,超文,本,本各,個,個部,分,分的,內(nèi),內(nèi)容,，,，告,訴,訴瀏,覽,覽器,如,如何,顯,顯示,文,文本,，,，怎,樣,樣生,成,成與,別,別的,文,文本

7、,或,或圖,像,像的,鏈,鏈接,點,點。,HTML,文,文檔,由,由文,本,本、,格,格式,化,化代,碼,碼和,導(dǎo),導(dǎo)向,其,其他,文,文檔,的,的超,鏈,鏈接,組,組成,。,。,網(wǎng),網(wǎng),頁,頁制,作,作工,具,具,1,超,超文,本,本標(biāo),識,識語,言,言（HTML,）,）,Dreamweaver是,由,由Macromedia公,司,司推,出,出的,一,一款,在,在網(wǎng),頁,頁制,作,作方,面,面大,眾,眾化,的,的軟,件,件，,它,它具,有,有可,視,視化,編,編輯,界,界面,，,，用,戶,戶不,必,必編,寫,寫復(fù),雜,雜的HTML,源,源代,碼,碼就,可,可以,生,生成,跨,跨平,臺,臺、,

8、跨,跨瀏,覽,覽器,的,的網(wǎng),頁,頁，,不,不僅,適,適合,于,于專,業(yè),業(yè)網(wǎng),頁,頁編,輯,輯人,員,員的,需,需要,，,，同,時,時也,容,容易,被,被業(yè),余,余網(wǎng),友,友們,所,所掌,握,握。,Dreamweaver支,持,持動,態(tài),態(tài)HTML，,并,并采,用,用了RoundtripHTML,技,技術(shù),，,，Dreamweaver是,一,一種,可,可以,滿,滿足,多,多層,次,次需,求,求、,功,功能,強,強大,的,的可,視,視化,專,專業(yè),級,級網(wǎng),頁,頁設(shè),計,計及,制,制作,工,工具,。,。,2,Dreamweaver,FrontPage是,由,由Microsoft,公,公司,推,

9、推出,的,的新,一,一代Web網(wǎng),頁,頁制,作,作工,具,具。FrontPage使,網(wǎng),網(wǎng)頁,制,制作,者,者能,夠,夠更,加,加方,便,便、,快,快捷,地,地創(chuàng),建,建和,發(fā),發(fā)布,網(wǎng),網(wǎng)頁,，,，具,有,有直,觀,觀的,網(wǎng),網(wǎng)頁,制,制作,和,和管,理,理方,法,法，,簡,簡化,了,了大,量,量工,作,作。,FrontPage界,面,面與Word,、,、PowerPoint等,軟,軟件,的,的界,面,面極,為,為相,似,似，,為,為使,用,用者,帶,帶來,了,了極,大,大的,方,方便,，,，Microsoft,公,公司,將,將FrontPage,封,封裝,入,入Office之,中,中，,成

10、,成為Office,家,家族,的,的一,員,員，,使,使之,功,功能,更,更為,強,強大,。,。,3,FrontPage,Photoshop是由Adobe,公,公司開發(fā),的,的圖形處,理,理軟件，,它,它是目前,公,公認(rèn)的PC機上最,好,好的通用,平,平面美術(shù),設(shè),設(shè)計軟件,，,，它功能,完,完善、性,能,能穩(wěn)定、,使,使用方便,，,，所以在,幾,幾乎所有,的,的廣告、,出,出版、軟,件,件公司，Photoshop都是首,選,選的平面,制,制作工具,。,。,1.3.2 網(wǎng),頁,頁美化工,具,具,1,Photoshop,Fireworks是由Macromedia公司開,發(fā),發(fā)的圖形,處,處理工具

11、,，,，它的出,現(xiàn),現(xiàn)使Web作圖發(fā),生,生了革命,性,性的變化,。,。因為Fireworks,是,是第一套,專,專門為制,作,作網(wǎng)頁圖,形,形而設(shè)計,的,的軟件，,同,同時也是,專,專業(yè)的網(wǎng),頁,頁圖形設(shè),計,計及制作,的,的解決方,案,案。作為,一,一個圖像,處,處理軟件,，,，F(xiàn)ireworks能夠,自,自由地導(dǎo),入,入多種格,式,式的圖像,進,進行處理,。,。,Fireworks還能夠,自,自動切割,圖,圖像、生,成,成光標(biāo)動,態(tài),態(tài)感應(yīng)的JavaScript程序,等,等等，而,且,且Fireworks具有,強,強大的動,畫,畫功能和,一,一個相當(dāng),完,完美的網(wǎng),絡(luò),絡(luò)圖像生,成,成器

12、。,2,Fireworks,Flash是美國Macromedia公司,開,開發(fā)的矢,量,量圖形編,輯,輯和動畫,創(chuàng),創(chuàng)作的專,業(yè),業(yè)軟件，,它,它是一種,交,交互式動,畫,畫設(shè)計工,具,具，用它,可,可以將音,樂,樂、聲效,、,、動畫以,及,及富有新,意,意的界面,融,融合在一,起,起，以制,作,作出高品,質(zhì),質(zhì)的網(wǎng)頁,動,動態(tài)效果,。,。它主要,應(yīng),應(yīng)用于網(wǎng),頁,頁設(shè)計和,多,多媒體創(chuàng),作,作等領(lǐng)域,，,，功能十,分,分強大和,獨,獨特，已,成,成為交互,式,式矢量動,畫,畫的標(biāo)準(zhǔn),，,，在網(wǎng)上,非,非常流行,。,。Flash廣泛,應(yīng),應(yīng)用于網(wǎng),頁,頁動畫制,作,作、教學(xué),動,動畫演示,、,

13、、網(wǎng)上購,物,物、在線,游,游戲等的,制,制作中。,3,Flash,1.4,網(wǎng),網(wǎng)頁,制,制作的基,本,本步驟,網(wǎng)站,定位要小,，,，內(nèi)容要,精,精。如果,要,要制作一,個,個包羅萬,象,象的站點,，,，把所有,精,精彩的東,西,西都放在,上,上面，結(jié),果,果往往會,事,事與愿違,，,，給人的,感,感覺是沒,有,有主題，,沒,沒有特色,，,，樣樣有,，,，卻樣樣,都,都很膚淺,。,。,網(wǎng)站的題,材,材最好選,自,自己擅長,或,或者喜愛,的,的內(nèi)容。,興,興趣是制,作,作網(wǎng)站的,動,動力，沒,有,有熱情，,很,很難設(shè)計,制,制作出優(yōu),秀,秀的網(wǎng)站,。,。,網(wǎng),網(wǎng)站定位,進行網(wǎng)站,的,的整體規(guī),劃

14、,劃也就是,組,組織網(wǎng)站,的,的內(nèi)容和,設(shè),設(shè)計其結(jié),構(gòu),構(gòu)。,組織網(wǎng)站,的,的內(nèi)容可,以,以從兩個,角,角度來考,慮,慮。從設(shè),計,計者的角,度,度來考慮,，,，可以依,據(jù),據(jù)被描述,對,對象的組,織,織機構(gòu)、,類,類別劃分,等,等來組織,內(nèi),內(nèi)容；從,瀏,瀏覽者的,角,角度來考,慮,慮，就應(yīng),該,該將各種,素,素材依據(jù),瀏,瀏覽者的,需,需要進行,內(nèi),內(nèi)容分類,，,，以便瀏,覽,覽者可以,快,快捷地獲,取,取所需要,的,的信息及,其,其相關(guān)內(nèi),容,容。,整,整體規(guī)劃,合理的結(jié),構(gòu),構(gòu)設(shè)計對,于,于網(wǎng)站的,規(guī),規(guī)劃也是,至,至關(guān)重要,的,的。以下,是,是三種常,用,用的結(jié)構(gòu),類,類型。,層狀

15、結(jié)構(gòu),層狀結(jié)構(gòu),類,類似于目,錄,錄系統(tǒng)的,樹,樹型結(jié)構(gòu),，,，,主 頁,頁,面,1,頁,面,2,頁,面,3,線性結(jié)構(gòu),線性結(jié)構(gòu),類,類似于數(shù),據(jù),據(jù)結(jié)構(gòu)中,的,的線性表,，,，用于組,織,織本身的,線,線性順序,形,形式存在,的,的信息，,可,可以引導(dǎo),瀏,瀏覽者按,部,部就班地,瀏,瀏覽整個,網(wǎng),網(wǎng)站文件,。,。,主 頁,頁面1,頁面2,頁面3,頁面4,頁面5,頁面7,頁面8,一級標(biāo)題,二級標(biāo)題,頁面6,Web結(jié),構(gòu),構(gòu),Web結(jié),構(gòu),構(gòu)類似于Internet,的,的組成結(jié),構(gòu),構(gòu)，各網(wǎng),頁,頁之間形,成,成網(wǎng)狀連,接,接，允許,用,用戶隨意,瀏,瀏覽。,通常在進,行,行網(wǎng)頁開,發(fā),發(fā)時，

16、首,先,先都進行,靜,靜態(tài)網(wǎng)頁,的,的制作，,然,然后再在,其,其中加入,腳,腳本程序,、,、表單等,動,動態(tài)內(nèi)容,。,。靜態(tài)網(wǎng),頁,頁僅僅用,來,來被動地,發(fā),發(fā)布信息,，,，而不具,有,有任何交,互,互功能，,它,它是,Web,網(wǎng)頁的重,要,要組成部,分,分。,一個好的,網(wǎng),網(wǎng)站首先,是,是內(nèi)容豐,富,富，其次,就,就是網(wǎng)頁,設(shè),設(shè)計美觀,。,。對于網(wǎng),頁,頁的外觀,設(shè),設(shè)計，提,供,供以下建,議,議：,（,1,）不要先,決,決定網(wǎng)頁,的,的外觀，,然,然后迫使,自,自己去適,應(yīng),應(yīng)它，應(yīng),該,該根據(jù)網(wǎng),站,站的訪問,者,者對象、,要,要提供的,信,信息以及,制,制作目標(biāo),得,得出一個,最,最適合的,網(wǎng),網(wǎng)頁架構(gòu),。,。,網(wǎng),網(wǎng)頁設(shè)計,與,與制作,1靜態(tài),網(wǎng),網(wǎng)頁的設(shè),計,計與制作,（,2,）每頁排,版,版不要太,松,松散或用,太,太大的字,，,，盡量避,免,免訪問者,瀏,瀏覽網(wǎng)頁,時,時要作大,幅,幅度的滾,動,動，對于,篇,篇幅太長,的,的一頁可,以,以使用內(nèi),部,部鏈接解,決,決。,（,3,）切勿以,800,600,以上的分,辨,辨率設(shè)計,網(wǎng),網(wǎng)頁，常,用,用的分辨,率,率是