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

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

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

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

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

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

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

7、導(dǎo)向其他,文,文檔的超,鏈,鏈接組成,。,。,1.3.1 網(wǎng),頁,頁制作工,具,具,1超文,本,本標(biāo)識(shí)語,言,言（HTML）,Dreamweaver是,由,由Macromedia公,司,司推出的,一,一款在網(wǎng),頁,頁制作方,面,面大眾化,的,的軟件，,它,它具有可,視,視化編輯,界,界面，用,戶,戶不必編,寫,寫復(fù)雜的HTML,源,源代碼就,可,可以生成,跨,跨平臺(tái)、,跨,跨瀏覽器,的,的網(wǎng)頁，,不,不僅適合,于,于專業(yè)網(wǎng),頁,頁編輯人,員,員的需要,，,，同時(shí)也,容,容易被業(yè),余,余網(wǎng)友們,所,所掌握。,Dreamweaver支,持,持動(dòng)態(tài)HTML，,并,并采用了Roundtrip HTML

8、技術(shù),，,，Dreamweaver是一種,可,可以滿足,多,多層次需,求,求、功能,強(qiáng),強(qiáng)大的可,視,視化專業(yè),級(jí),級(jí)網(wǎng)頁設(shè),計(jì),計(jì)及制作,工,工具。,2,Dreamweaver,FrontPage是由Microsoft,公,公司推出,的,的新一代Web網(wǎng),頁,頁制作工,具,具。FrontPage使,網(wǎng),網(wǎng)頁制作,者,者能夠更,加,加方便、,快,快捷地創(chuàng),建,建和發(fā)布,網(wǎng),網(wǎng)頁，具,有,有直觀的,網(wǎng),網(wǎng)頁制作,和,和管理方,法,法，簡(jiǎn)化,了,了大量工,作,作。,FrontPage界面與Word,、,、PowerPoint等,軟,軟件的界,面,面極為相,似,似，為使,用,用者帶來,了,了極大的,

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

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

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

12、h廣泛,應(yīng),應(yīng)用于網(wǎng),頁,頁動(dòng)畫制,作,作、教學(xué),動(dòng),動(dòng)畫演示,、,、網(wǎng)上購,物,物、在線,游,游戲等的,制,制作中。,3,Flash,1.4,網(wǎng),網(wǎng)頁,制,制作的基,本,本步驟,網(wǎng)站,定位要小,，,，內(nèi)容要,精,精。如果,要,要制作一,個(gè),個(gè)包羅萬,象,象的站點(diǎn),，,，把所有,精,精彩的東,西,西都放在,上,上面，結(jié),果,果往往會(huì),事,事與愿違,，,，給人的,感,感覺是沒,有,有主題，,沒,沒有特色,，,，樣樣有,，,，卻樣樣,都,都很膚淺,。,。,網(wǎng)站的題,材,材最好選,自,自己擅長(zhǎng),或,或者喜愛,的,的內(nèi)容。,興,興趣是制,作,作網(wǎng)站的,動(dòng),動(dòng)力，沒,有,有熱情，,很,很難設(shè)計(jì),制,制作

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

14、至關(guān)重要,的,的。以下,是,是三種常,用,用的結(jié)構(gòu),類,類型。,層狀結(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),瀏,瀏覽者按,部,部就班地,瀏,瀏覽整個(gè),網(wǎng),網(wǎng)站文件,。,。,主 頁,頁面1,頁面2,頁面3,頁面4,頁面5,頁面7,頁面8,一級(jí)標(biāo)題,二級(jí)標(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)狀連,接,接

15、，允許,用,用戶隨意,瀏,瀏覽。,通常在進(jìn),行,行網(wǎng)頁開,發(fā),發(fā)時(shí)，首,先,先都進(jìn)行,靜,靜態(tài)網(wǎng)頁,的,的制作，,然,然后再在,其,其中加入,腳,腳本程序,、,、表單等,動(dòng),動(dòng)態(tài)內(nèi)容,。,。靜態(tài)網(wǎng),頁,頁僅僅用,來,來被動(dòng)地,發(fā),發(fā)布信息,，,，而不具,有,有任何交,互,互功能，,它,它是,Web,網(wǎng)頁的重,要,要組成部,分,分。,一個(gè)好的,網(wǎng),網(wǎng)站首先,是,是內(nèi)容豐,富,富，其次,就,就是網(wǎng)頁,設(shè),設(shè)計(jì)美觀,。,。對(duì)于網(wǎng),頁,頁的外觀,設(shè),設(shè)計(jì)，提,供,供以下建,議,議：,（,1,）不要先,決,決定網(wǎng)頁,的,的外觀，,然,然后迫使,自,自己去適,應(yīng),應(yīng)它，應(yīng),該,該根據(jù)網(wǎng),站,站的訪問,者,

16、者對(duì)象、,要,要提供的,信,信息以及,制,制作目標(biāo),得,得出一個(gè),最,最適合的,網(wǎng),網(wǎng)頁架構(gòu),。,。,網(wǎng),網(wǎng)頁設(shè)計(jì),與,與制作,1靜態(tài),網(wǎng),網(wǎng)頁的設(shè),計(jì),計(jì)與制作,（,2,）每頁排,版,版不要太,松,松散或用,太,太大的字,，,，盡量避,免,免訪問者,瀏,瀏覽網(wǎng)頁,時(shí),時(shí)要作大,幅,幅度的滾,動(dòng),動(dòng)，對(duì)于,篇,篇幅太長(zhǎng),的,的一頁可,以,以使用內(nèi),部,部鏈接解,決,決。,（,3,）切勿以,800,600,以上的分,辨,辨率設(shè)計(jì),網(wǎng),網(wǎng)頁，常,用,用的分辨,率,率是,640,480,及,800,600,?，F(xiàn)在國(guó),內(nèi),內(nèi)的站點(diǎn),基,基本上都,是,是,800,600,，但是如,果,果主要是,面,面向國(guó)外,訪,訪問者的,站,站點(diǎn)，建,議,議使用,640,480,。,（,4,）不應(yīng)在,每,每頁中插,入,入太多的,廣,廣告。相,信,信任何訪,問,問者都不,會(huì),會(huì)喜歡瀏,覽,覽盡是些,廣,廣告的網(wǎng),頁,頁，要考,慮,慮該頁內(nèi),容,容與廣告,的,的比例，,廣,廣告太多,，,，只會(huì)令,人,人煩厭。,（,5,）不要每,頁,頁都采用,不,不同的墻,紙,紙，以免,每,每次轉(zhuǎn)頁,時(shí),時(shí)都要花,費(fèi),費(fèi)過多的,時(shí),