《信息產(chǎn)業(yè)IT技術(shù)培訓(xùn)指定教材--網(wǎng)頁設(shè)計(jì)實(shí)用教程》由會(huì)員分享，可在線閱讀，更多相關(guān)《信息產(chǎn)業(yè)IT技術(shù)培訓(xùn)指定教材--網(wǎng)頁設(shè)計(jì)實(shí)用教程（31頁珍藏版）》請?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) 主編,杜艷紅 劉建昌 副主編,中國青年出版社,通過本,章,章學(xué)習(xí),，,，應(yīng)該,掌,掌握以,下,下內(nèi)容,：,：,認(rèn)識(shí)網(wǎng),頁,頁,構(gòu)成網(wǎng),頁,頁的基,本,本要素,制作網(wǎng),頁,頁的基,本,本工具,美化網(wǎng),頁,頁的基,本,本工具,網(wǎng)頁制,作,作的基,本,本步驟,第1章,網(wǎng),網(wǎng),頁,頁制作,初,初識(shí),1.1,一,一,個(gè),個(gè)校園,網(wǎng),網(wǎng)的制,作,作示例,1.1.1,主,主要,網(wǎng),網(wǎng)頁畫,面,面,1.1.2,網(wǎng),網(wǎng)頁,的,的基本,功,功能,1.2,網(wǎng)頁的,基,基本要,

2、素,素,1.2.1,文,文字,文字是,網(wǎng),網(wǎng)頁發(fā),布,布信息,所,所用的,主,主要形,式,式，由,文,文字制,作,作出的,網(wǎng),網(wǎng)頁占,用,用空間,小,小，當(dāng),用,用戶瀏,覽,覽時(shí)，,可,可以很,快,快的展,現(xiàn),現(xiàn)在用,戶,戶面前,。,。另外,，,，文字,性,性網(wǎng)頁,還,還可以,利,利用瀏,覽,覽器中,“,“文件,”,”菜單,下,下的“,另,另存為,”,”功能,將,將其下,載,載。但,是,是沒有,編,編排點(diǎn),綴,綴的純,文,文字網(wǎng),頁,頁，又,會(huì),會(huì)給人,帶,帶來死,板,板不活,潑,潑的感,覺,覺，使,得,得人們,不,不愿意,再,再往下,瀏,瀏覽。,文字性,網(wǎng),網(wǎng)頁一,定,定要注,意,意編排,，

3、,，包括,標(biāo),標(biāo)題得,字,字型字,號(hào),號(hào)，內(nèi),容,容的層,次,次樣式,，,，是否,需,需要變,換,換顏色,進(jìn),進(jìn)行點(diǎn),綴,綴等。,1標(biāo),題,題,一個(gè)網(wǎng),頁,頁通常,都,都有一,個(gè),個(gè)標(biāo)題,，,，表明,本,本網(wǎng)頁,的,的主要,內(nèi),內(nèi)容。,標(biāo),標(biāo)題是,否,否醒目,，,，是吸,引,引瀏覽,者,者能否,注,注意的,一,一個(gè)關(guān),鍵,鍵，因,此,此對(duì)標(biāo),題,題的設(shè),計(jì),計(jì)是很,重,重要的,。,。,網(wǎng)頁中,的,的文字,不,不能太,大,大或太,小,小。太,大,大會(huì)使,得,得一個(gè),網(wǎng),網(wǎng)頁信,息,息量變,小,小，太,小,小又使,人,人們?yōu)g,覽,覽時(shí)感,到,到費(fèi)勁,。,。一個(gè),優(yōu),優(yōu)秀網(wǎng),頁,頁中的,文,文字，,

4、應(yīng),應(yīng)統(tǒng)籌,規(guī),規(guī)劃，,大,大小搭,配,配適當(dāng),，,，給人,以,以生動(dòng),活,活潑之,感,感覺。,2字號(hào),在網(wǎng)頁適當(dāng),的,的位置采用,不,不同的字體,字,字型，也能,使,使網(wǎng)頁產(chǎn)生,吸,吸引人的效,果,果。應(yīng)該注,意,意的是在報(bào),刊,刊上變換字,體,體字型非常,普,普遍，它可,以,以在不同的,地,地方使用不,同,同的字型。,但,但在網(wǎng)頁制,作,作上卻要慎,重,重。因?yàn)橛?些,些美麗的字,型,型在制作網(wǎng),頁,頁的計(jì)算機(jī),上,上有，但將,來,來別人瀏覽,你,你的網(wǎng)頁時(shí),，,，瀏覽者的,計(jì),計(jì)算機(jī)上未,必,必裝有這種,字,字體。這樣,瀏,瀏覽者就無,法,法得到你預(yù),想,想的瀏覽效,果,果，甚至適,得,

5、得相反。,如果只是標(biāo),題,題或少量的,文,文字，可以,將,將采用的特,殊,殊字體制作,成,成圖形方式,，,，就可避免,其,其他瀏覽者,看,看不到的尷,尬,尬局面了。,3字型,1.2.2,表,表格,當(dāng)文本內(nèi)容,較,較多時(shí)，可,以,以利用表格,形,形式來實(shí)現(xiàn),。,。表格是在,網(wǎng),網(wǎng)頁上的一,行,行或多行單,元,元格，用來,組,組織網(wǎng)頁的,布,布局或系統(tǒng),地,地布置數(shù)據(jù),，,，用戶可以,放,放置任何東,西,西在表格的,單,單元格中，,包,包括文字、,圖,圖形和表單,等,等。表格具,有,有容量大、,結(jié),結(jié)構(gòu)嚴(yán)謹(jǐn)和,效,效果直觀等,多,多個(gè)優(yōu)點(diǎn)，,是,是網(wǎng)頁中不,可,可缺少的記,錄,錄或總結(jié)工,具,具。

6、,表格還可以,用,用來控制網(wǎng),頁,頁中信息的,布,布局方式。,許,許多大型的,網(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)支持

7、,的,的瀏覽器上,顯,顯示。圖形,在,在網(wǎng)頁中通,常,常有如下應(yīng),用,用：,1菜單按,鈕,鈕,網(wǎng)頁上的菜,單,單按鈕有一,些,些是由圖形,制,制作，通常,有,有橫排和豎,排,排兩種形式,，,，由此可以,轉(zhuǎn),轉(zhuǎn)入不同的,頁,頁面。,2背景圖,形,形,為了加強(qiáng)視,覺,覺效果，有,些,些網(wǎng)頁在整,個(gè),個(gè)網(wǎng)頁的底,層,層放置了圖,形,形，稱作背,景,景圖。背景,圖,圖可以使網(wǎng),頁,頁更加華麗,，,，使人感到,界,界面友好。,但,但由于這是,一,一個(gè)比較大,的,的圖形，需,要,要占據(jù)較大,的,的空間，致,使,使網(wǎng)頁的顯,示,示速度明顯,變,變慢，所以,，,，近期的網(wǎng),頁,頁以及比較,著,著名的訪問,量,

8、量比較大網(wǎng),站,站一般都不,設(shè),設(shè)置背景圖,形,形。,1.2.4,鏈,鏈接標(biāo),志,志,網(wǎng)頁上的菜,單,單按鈕有一,些,些是由圖形,制,制作，通常,有,有橫排和豎,排,排兩種形式,，,，由此可以,轉(zhuǎn),轉(zhuǎn)入不同的,頁,頁面。鏈接,是,是網(wǎng)頁中一,種,種非常重要,的,的功能，是,網(wǎng),網(wǎng)頁中最重,要,要、最根本,的,的元素之一,。,。通過鏈接,可,可以從一個(gè),網(wǎng),網(wǎng)頁轉(zhuǎn)到另,一,一個(gè)網(wǎng)頁，,也,也可以從一,個(gè),個(gè)網(wǎng)站轉(zhuǎn)到,另,另一個(gè)網(wǎng)站,。,。鏈接的標(biāo),志,志有文字和,圖,圖形兩種。,制,制作一些精,美,美的圖形作,為,為鏈接按鈕,，,，使它和整,個(gè),個(gè)網(wǎng)頁融為,一,一體。,1.2.5,交,交互功,能

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

10、,如,如何顯示文,本,本，怎樣生,成,成與別的文,本,本或圖像的,鏈,鏈接點(diǎn)。,HTML文,檔,檔由文本、,格,格式化代碼,和,和導(dǎo)向其他,文,文檔的超鏈,接,接組成。,1.3.1,網(wǎng),網(wǎng)頁制,作,作工具,1超文本,標(biāo),標(biāo)識(shí)語言（HTML）,Dreamweaver是由Macromedia公司,推,推出的一款,在,在網(wǎng)頁制作,方,方面大眾化,的,的軟件，它,具,具有可視化,編,編輯界面，,用,用戶不必編,寫,寫復(fù)雜的HTML源代,碼,碼就可以生,成,成跨平臺(tái)、,跨,跨瀏覽器的,網(wǎng),網(wǎng)頁，不僅,適,適合于專業(yè),網(wǎng),網(wǎng)頁編輯人,員,員的需要，,同,同時(shí)也容易,被,被業(yè)余網(wǎng)友,們,們所掌握。,Drea

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

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

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

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

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

16、計(jì),者,者的角度來考慮,，,，可以依據(jù)被描,述,述對(duì)象的組織機(jī),構(gòu),構(gòu)、類別劃分等,來,來組織內(nèi)容；從,瀏,瀏覽者的角度來,考,考慮，就應(yīng)該將,各,各種素材依據(jù)瀏,覽,覽者的需要進(jìn)行,內(nèi),內(nèi)容分類，以便,瀏,瀏覽者可以快捷,地,地獲取所需要的,信,信息及其相關(guān)內(nèi),容,容。,1.4.2,整,整體規(guī)劃,合理的結(jié)構(gòu)設(shè)計(jì),對(duì),對(duì)于網(wǎng)站的規(guī)劃,也,也是至關(guān)重要的,。,。以下是三種常,用,用的結(jié)構(gòu)類型。,層狀結(jié)構(gòu),層狀結(jié)構(gòu)類似于,目,目錄系統(tǒng)的樹型,結(jié),結(jié)構(gòu)，,主 頁,頁,面,1,頁,面,2,頁,面,3,線性結(jié)構(gòu),線性結(jié)構(gòu)類似于,數(shù),數(shù)據(jù)結(jié)構(gòu)中的線,性,性表，用于組織,本,本身的線性順序,形,形式存在的信息,，,，可以引導(dǎo)瀏覽,者,者按部就班地瀏,覽,覽整個(gè)網(wǎng)站文件,。,。,主 頁,頁面1,頁面2,頁面3,頁面4,頁面5,頁面7,頁面8,一級(jí)標(biāo)題,二級(jí)標(biāo)題,頁面6,Web結(jié)構(gòu),Web結(jié)構(gòu)類似,于,于Internet的組成結(jié)構(gòu),，,，各網(wǎng)頁之間形,成,成網(wǎng)狀連接，允,許,許用戶隨意瀏覽,。,。,通常在進(jìn)行網(wǎng)頁,開,開發(fā)時(shí)，首先都,進(jìn),進(jìn)行靜態(tài)網(wǎng)頁的,制,制作，然后再在,其,其中加入腳本程,序,序、表