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

1、單擊此處編輯母版標題樣式,*,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,信息產業(yè)IT技術培訓指定教材,網(wǎng)頁設計實用教程,耿強 主編,杜艷紅 劉建昌 副主編,中國青年出版社,通過本,章,章學習,，,，應該,掌,掌握以,下,下內容,：,：,認識網(wǎng),頁,頁,構成網(wǎng),頁,頁的基,本,本要素,制作網(wǎng),頁,頁的基,本,本工具,美化網(wǎng),頁,頁的基,本,本工具,網(wǎng)頁制,作,作的基,本,本步驟,第1章,網(wǎng),網(wǎng),頁,頁制作,初,初識,1.1,一,一,個,個校園,網(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)頁占,用,用空間,小,小，當,用,用戶瀏,覽,覽時，,可,可以很,快,快的展,現(xiàn),現(xiàn)在用,戶,戶面前,。,。另外,，,，文字,性,性網(wǎng)頁,還,還可以,利,利用瀏,覽,覽器中,“,“文件,”,”菜單,下,下的“,另,另存為,”,”功能,將,將其下,載,載。但,是,是沒有,編,編排點,綴,綴的純,文,文字網(wǎng),頁,頁，又,會,會給人,帶,帶來死,板,板不活,潑,潑的感,覺,覺，使,得,得人們,不,不愿意,再,再往下,瀏,瀏覽。,文字性,網(wǎng),網(wǎng)頁一,定,定要注,意,意編排,，

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

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

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

6、,表格還可以,用,用來控制網(wǎng),頁,頁中信息的,布,布局方式。,許,許多大型的,網(wǎng),網(wǎng)站都是使,用,用表格來進,行,行頁面布局,的,的,使頁,面,面看起來更,加,加直觀和有,條,條理。,1.2.3,圖,圖形,這里的圖形,概,概念是廣義,的,的，它可以,是,是普通的繪,制,制圖形，可,以,以是各種圖,像,像，還可以,是,是動畫。一,幅,幅優(yōu)秀的網(wǎng),頁,頁除了有能,吸,吸引瀏覽者,的,的文字形式,和,和內容外，,圖,圖形的表現(xiàn),功,功能是不能,低,低估的。網(wǎng),頁,頁上的圖形,格,格式一般使,用,用JPEG,和,和GIF，,這,這兩種格式,具,具有跨平臺,的,的特性，可,以,以在不同操,作,作系統(tǒng)支持

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

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

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

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

11、mweaver支持動態(tài)HTML，,并,并采用了Roundtrip HTML技術,，,，Dreamweaver是一,種,種可以滿足,多,多層次需求,、,、功能強大,的,的可視化專,業(yè),業(yè)級網(wǎng)頁設,計,計及制作工,具,具。,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家族的,一,一員，使之,功,功能更為強,大,大。,3,FrontPage,Photoshop是,由,由Adobe公司開發(fā),的,的圖形處理,軟,軟件，它是,目,目前公認的PC機上最,好,好的通用平,面,面美術設計,軟,軟件，它功,能,能完善、性,能,能穩(wěn)定、使,用,用方便，所,以,以在幾乎所,有,有的廣告、,出,出版、軟件,公,公司，Photoshop都是首,選,選的平面制,作,作工具。,1.3.2,網(wǎng),網(wǎng)頁美,化,化工具,1,Photoshop,F

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

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

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

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