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

1、Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,單擊此處編輯母版標(biāo)題樣式,*,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),信息產(chǎn)業(yè)IT技術(shù)培訓(xùn)指定教材,網(wǎng)頁(yè)設(shè)計(jì)實(shí)用教程,耿強(qiáng) 主編,杜艷紅 劉建昌 副主編,中國(guó)青年出版社,通過(guò)本章學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容：,認(rèn)識(shí)網(wǎng)頁(yè),構(gòu)成網(wǎng)頁(yè)的基本要素,制作網(wǎng)頁(yè)的基本工具,美化網(wǎng)頁(yè)的基本工具,網(wǎng)頁(yè)制作的基本步驟,第1章 網(wǎng)頁(yè)制作初識(shí),1.1 一個(gè)校園網(wǎng)的制作示

2、例,1.1.1 主要網(wǎng)頁(yè)畫(huà)面,1.1.2 網(wǎng)頁(yè)的基本功能,1.2,網(wǎng)頁(yè)的基本要素,1.2.1 文字,文字是網(wǎng)頁(yè)發(fā)布信息所用的主要形式，由文字制作出的網(wǎng)頁(yè)占用空間小，當(dāng)用戶(hù)瀏覽時(shí)，可以很快的展現(xiàn)在用戶(hù)面前。另外，文字性網(wǎng)頁(yè)還可以利用瀏覽器中“文件”菜單下的“另存為”功能將其下載。但是沒(méi)有編排點(diǎn)綴的純文字網(wǎng)頁(yè)，又會(huì)給人帶來(lái)死板不活潑的感覺(jué)，使得人們不愿意再往下瀏覽。,文字性網(wǎng)頁(yè)一定要注意編排，包括標(biāo)題得字型字號(hào)，內(nèi)容的層次樣式，是否需要變換顏色進(jìn)行點(diǎn)綴等。,1標(biāo)題,一個(gè)網(wǎng)頁(yè)通常都有一個(gè)標(biāo)題，表明本網(wǎng)頁(yè)的主要內(nèi)容。標(biāo)題是否醒目，是吸引瀏覽者能否注意的一個(gè)關(guān)鍵，因此對(duì)標(biāo)題的設(shè)計(jì)是很重要的。,網(wǎng)頁(yè)中的文

3、字不能太大或太小。太大會(huì)使得一個(gè)網(wǎng)頁(yè)信息量變小，太小又使人們?yōu)g覽時(shí)感到費(fèi)勁。一個(gè)優(yōu)秀網(wǎng)頁(yè)中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動(dòng)活潑之感覺(jué)。,2字號(hào),在網(wǎng)頁(yè)適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁(yè)產(chǎn)生吸引人的效果。應(yīng)該注意的是在報(bào)刊上變換字體字型非常普遍，它可以在不同的地方使用不同的字型。但在網(wǎng)頁(yè)制作上卻要慎重。因?yàn)橛行┟利惖淖中驮谥谱骶W(wǎng)頁(yè)的計(jì)算機(jī)上有，但將來(lái)別人瀏覽你的網(wǎng)頁(yè)時(shí)，瀏覽者的計(jì)算機(jī)上未必裝有這種字體。這樣瀏覽者就無(wú)法得到你預(yù)想的瀏覽效果，甚至適得相反。,如果只是標(biāo)題或少量的文字，可以將采用的特殊字體制作成圖形方式，就可避免其他瀏覽者看不到的尷尬局面了。,3字型,1.2.2 表

4、格,當(dāng)文本內(nèi)容較多時(shí)，可以利用表格形式來(lái)實(shí)現(xiàn)。表格是在網(wǎng)頁(yè)上的一行或多行單元格，用來(lái)組織網(wǎng)頁(yè)的布局或系統(tǒng)地布置數(shù)據(jù)，用戶(hù)可以放置任何東西在表格的單元格中，包括文字、圖形和表單等。表格具有容量大、結(jié)構(gòu)嚴(yán)謹(jǐn)和效果直觀等多個(gè)優(yōu)點(diǎn)，是網(wǎng)頁(yè)中不可缺少的記錄或總結(jié)工具。,表格還可以用來(lái)控制網(wǎng)頁(yè)中信息的布局方式。許多大型的網(wǎng)站都是使用表格來(lái)進(jìn)行頁(yè)面布局的,使頁(yè)面看起來(lái)更加直觀和有條理。,1.2.3 圖形,這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是各種圖像，還可以是動(dòng)畫(huà)。一幅優(yōu)秀的網(wǎng)頁(yè)除了有能吸引瀏覽者的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的。網(wǎng)頁(yè)上的圖形格式一般使用JPEG和GIF，這兩種

5、格式具有跨平臺(tái)的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。圖形在網(wǎng)頁(yè)中通常有如下應(yīng)用：,1菜單按鈕,網(wǎng)頁(yè)上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁(yè)面。,2背景圖形,為了加強(qiáng)視覺(jué)效果，有些網(wǎng)頁(yè)在整個(gè)網(wǎng)頁(yè)的底層放置了圖形，稱(chēng)作背景圖。背景圖可以使網(wǎng)頁(yè)更加華麗，使人感到界面友好。但由于這是一個(gè)比較大的圖形，需要占據(jù)較大的空間，致使網(wǎng)頁(yè)的顯示速度明顯變慢，所以，近期的網(wǎng)頁(yè)以及比較著名的訪(fǎng)問(wèn)量比較大網(wǎng)站一般都不設(shè)置背景圖形。,1.2.4 鏈接標(biāo)志,網(wǎng)頁(yè)上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁(yè)面。鏈接是網(wǎng)頁(yè)中一種非常重要的功能，是

6、網(wǎng)頁(yè)中最重要、最根本的元素之一。通過(guò)鏈接可以從一個(gè)網(wǎng)頁(yè)轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，也可以從一個(gè)網(wǎng)站轉(zhuǎn)到另一個(gè)網(wǎng)站。鏈接的標(biāo)志有文字和圖形兩種。制作一些精美的圖形作為鏈接按鈕，使它和整個(gè)網(wǎng)頁(yè)融為一體。,1.2.5 交互功能,Internet區(qū)別其他媒體的一個(gè)重要標(biāo)志就是它的交互功能。網(wǎng)頁(yè)的交互功能其他媒體是無(wú)法比擬的。,通常網(wǎng)頁(yè)的交互功能都是利用表單來(lái)實(shí)現(xiàn)的。表單是網(wǎng)頁(yè)中站點(diǎn)服務(wù)器處理的一組數(shù)據(jù)輸入域，當(dāng)訪(fǎng)問(wèn)者單擊按鈕或圖形來(lái)提交表單后，數(shù)據(jù)就會(huì)傳送到服務(wù)器上。,1.3 網(wǎng)頁(yè)制作和美化工具,HTML（Hypertext Markup Language）是一種專(zhuān)門(mén)用于Web頁(yè)制作的編程語(yǔ)言，用來(lái)描述超文本各個(gè)

7、部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點(diǎn)。,HTML文檔由文本、格式化代碼和導(dǎo)向其他文檔的超鏈接組成。,1.3.1 網(wǎng)頁(yè)制作工具,1超文本標(biāo)識(shí)語(yǔ)言（HTML）,Dreamweaver是由Macromedia公司推出的一款在網(wǎng)頁(yè)制作方面大眾化的軟件，它具有可視化編輯界面，用戶(hù)不必編寫(xiě)復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁(yè)，不僅適合于專(zhuān)業(yè)網(wǎng)頁(yè)編輯人員的需要，同時(shí)也容易被業(yè)余網(wǎng)友們所掌握。,Dreamweaver支持動(dòng)態(tài)HTML，并采用了Roundtrip HTML技術(shù)，Dreamweaver是一種可以滿(mǎn)足多層次需求、功能強(qiáng)大的可視化專(zhuān)業(yè)級(jí)網(wǎng)頁(yè)設(shè)計(jì)及制作工具

8、。,2,Dreamweaver,FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁(yè)制作工具。FrontPage使網(wǎng)頁(yè)制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁(yè)，具有直觀的網(wǎng)頁(yè)制作和管理方法，簡(jiǎn)化了大量工作。,FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來(lái)了極大的方便，Microsoft公司將FrontPage封裝入Office之中，成為Office家族的一員，使之功能更為強(qiáng)大。,3,FrontPage,Photoshop是由Adobe公司開(kāi)發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，

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

10、rks,Flash是美國(guó)Macromedia公司開(kāi)發(fā)的矢量圖形編輯和動(dòng)畫(huà)創(chuàng)作的專(zhuān)業(yè)軟件，它是一種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫(huà)以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁(yè)動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域，功能十分強(qiáng)大和獨(dú)特，已成為交互式矢量動(dòng)畫(huà)的標(biāo)準(zhǔn)，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁(yè)動(dòng)畫(huà)制作、教學(xué)動(dòng)畫(huà)演示、網(wǎng)上購(gòu)物、在線(xiàn)游戲等的制作中。,3,Flash,1.4 網(wǎng)頁(yè)制作的基本步驟,網(wǎng)站,定位要小，內(nèi)容要精。如果要制作一個(gè)包羅萬(wàn)象的站點(diǎn)，把所有精彩的東西都放在上面，結(jié)果往往會(huì)事與愿違，給人的感覺(jué)是沒(méi)有主題，沒(méi)有特色，樣樣有，卻樣樣都很膚淺。,網(wǎng)站的題

11、材最好選自己擅長(zhǎng)或者喜愛(ài)的內(nèi)容。興趣是制作網(wǎng)站的動(dòng)力，沒(méi)有熱情，很難設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。,1.4.1 網(wǎng)站定位,進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。,組織網(wǎng)站的內(nèi)容可以從兩個(gè)角度來(lái)考慮。從設(shè)計(jì)者的角度來(lái)考慮，可以依據(jù)被描述對(duì)象的組織機(jī)構(gòu)、類(lèi)別劃分等來(lái)組織內(nèi)容；從瀏覽者的角度來(lái)考慮，就應(yīng)該將各種素材依據(jù)瀏覽者的需要進(jìn)行內(nèi)容分類(lèi)，以便瀏覽者可以快捷地獲取所需要的信息及其相關(guān)內(nèi)容。,1.4.2 整體規(guī)劃,合理的結(jié)構(gòu)設(shè)計(jì)對(duì)于網(wǎng)站的規(guī)劃也是至關(guān)重要的。以下是三種常用的結(jié)構(gòu)類(lèi)型。,層狀結(jié)構(gòu),層狀結(jié)構(gòu)類(lèi)似于目錄系統(tǒng)的樹(shù)型結(jié)構(gòu)，,主 頁(yè),頁(yè),面,1,頁(yè),面,2,頁(yè),面,3,線(xiàn)性結(jié)構(gòu),線(xiàn)性結(jié)構(gòu)

12、類(lèi)似于數(shù)據(jù)結(jié)構(gòu)中的線(xiàn)性表，用于組織本身的線(xiàn)性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。,主 頁(yè),頁(yè)面1,頁(yè)面2,頁(yè)面3,頁(yè)面4,頁(yè)面5,頁(yè)面7,頁(yè)面8,一級(jí)標(biāo)題,二級(jí)標(biāo)題,頁(yè)面6,Web結(jié)構(gòu),Web結(jié)構(gòu)類(lèi)似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁(yè)之間形成網(wǎng)狀連接，允許用戶(hù)隨意瀏覽。,通常在進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁(yè)的制作，然后再在其中加入腳本程序、表單等動(dòng)態(tài)內(nèi)容。靜態(tài)網(wǎng)頁(yè)僅僅用來(lái)被動(dòng)地發(fā)布信息，而不具有任何交互功能，它是,Web,網(wǎng)頁(yè)的重要組成部分。,一個(gè)好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁(yè)設(shè)計(jì)美觀。對(duì)于網(wǎng)頁(yè)的外觀設(shè)計(jì)，提供以下建議：,（,1,）不要先決定網(wǎng)頁(yè)的外觀，然

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

14、的比例，廣告太多，只會(huì)令人煩厭。,（,5,）不要每頁(yè)都采用不同的墻紙，以免每次轉(zhuǎn)頁(yè)時(shí)都要花費(fèi)過(guò)多的時(shí)間去下載。,（,6,）底色或墻紙必須與文字對(duì)比強(qiáng)烈，以易于閱讀。如果網(wǎng)頁(yè)是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪(fǎng)問(wèn)者能夠舒適地閱讀網(wǎng)頁(yè)。,（,7,）不要把圖片白色當(dāng)作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色，解決的辦法除了真的把該網(wǎng)頁(yè)的底色設(shè)為白色之外，最好還是用圖片編輯工具將圖片設(shè)為透明顏色。,靜態(tài)網(wǎng)頁(yè)制作完成后，接下來(lái)的工作就是為網(wǎng)頁(yè)添加動(dòng)態(tài)效果，包括一些腳本語(yǔ)言程序和數(shù)據(jù)庫(kù)程序的設(shè)計(jì)，以及加入動(dòng)畫(huà)效果等。,一個(gè)真正的網(wǎng)站，不僅應(yīng)該實(shí)現(xiàn)傳統(tǒng)媒體的電子化，給用

15、戶(hù)提供需要的內(nèi)容，而且還應(yīng)該做更多的事情，完成比頁(yè)面瀏覽更高層次的需求，例如收集信息、數(shù)據(jù)傳遞、數(shù)據(jù)存儲(chǔ)以及系統(tǒng)維護(hù)等。,2為網(wǎng)頁(yè)的添加動(dòng)態(tài)效果,當(dāng)網(wǎng)頁(yè)設(shè)計(jì)人員制作完所有網(wǎng)站頁(yè)面之后，需要對(duì)所設(shè)計(jì)的網(wǎng)頁(yè)進(jìn)行審查和測(cè)試，測(cè)試內(nèi)容包括功能性測(cè)試和完整性測(cè)試兩個(gè)方面。,所謂功能性測(cè)試就是要保證網(wǎng)頁(yè)的可用性，達(dá)到最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)所規(guī)定的功能，讀者可方便快速地尋找到所需的內(nèi)容。完整性測(cè)試就是保證頁(yè)面內(nèi)容顯示正確，鏈接準(zhǔn)確，無(wú)差錯(cuò)無(wú)遺漏。,1.4.4 測(cè)試網(wǎng)頁(yè),網(wǎng)頁(yè)設(shè)計(jì)好，必須把它發(fā)布到互連網(wǎng)上，否則網(wǎng)站形象仍然不能展現(xiàn)出去。發(fā)布的服務(wù)器可以是遠(yuǎn)程，也可以是本地，但必須支持ASP，因?yàn)閯?dòng)態(tài)程序

16、是建立在ASP基礎(chǔ)上的。,1.4.5 網(wǎng)頁(yè)上傳發(fā)布,網(wǎng)站的宣傳和推廣一般有兩種途徑和方法。一是通過(guò)傳統(tǒng)媒體進(jìn)行廣告宣傳；另一是利用,Internet,自身的特點(diǎn)向外宣傳。,可用來(lái)宣傳的傳統(tǒng)媒體包括：電視、廣播、報(bào)紙、廣告牌、海報(bào)和黃頁(yè)等。,在,Internet,上宣傳網(wǎng)站的方法也是多種多樣的，如可以將網(wǎng)址和網(wǎng)站信息發(fā)布到搜索引擎、網(wǎng)上黃頁(yè)、新聞組、郵件列表上進(jìn)行宣傳推廣，也可以與其他同類(lèi)網(wǎng)站交換宣傳廣告。,1.4.6 網(wǎng)站的宣傳與推廣,現(xiàn)在的網(wǎng)站注重信息的不斷更新和交互性，只有這樣才能吸引更多的瀏覽者來(lái)訪(fǎng)問(wèn)和參與。如何知道哪些網(wǎng)頁(yè)內(nèi)容需要調(diào)整、更新和修改，網(wǎng)頁(yè)需要增加那些內(nèi)容呢？這些不能靠主觀臆斷來(lái)確定，而是需要得到訪(fǎng)問(wèn)者的反饋意見(jiàn)，也可根據(jù)不同網(wǎng)頁(yè)的被訪(fǎng)次數(shù)來(lái)分析。,獲得用戶(hù)反饋信息的方法很多，常用的有計(jì)數(shù)器、留言板、調(diào)查表等，也可以建立系統(tǒng)日志來(lái)記錄網(wǎng)頁(yè)的被訪(fǎng)情況。,1.4.7 網(wǎng)站的反饋與評(píng)價(jià),網(wǎng)站要注意經(jīng)常維護(hù)更新內(nèi)容，保持內(nèi)容的新鮮，不要做好就放到服務(wù)器永遠(yuǎn)不變了，只有不斷地補(bǔ)充、更新內(nèi)容，才能夠吸引瀏覽者。維護(hù)更新時(shí)可以充分利用Dreamweaver提供的模板和庫(kù)技術(shù)，以提