【正文】 第九章 網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)站設(shè)計(jì) WEB網(wǎng)站是由 Home Page和相關(guān)網(wǎng)頁構(gòu)成的超文本信息的集合，網(wǎng)頁按一定的組織結(jié)構(gòu)和順序組合起來，使瀏覽者在訪問該網(wǎng)站時(shí)能連接到各個(gè)網(wǎng)頁來觀看網(wǎng)頁內(nèi)容。用戶可以使用瀏覽器（如微軟的 Inter Explorer）瀏覽這些頁面的內(nèi)容。 網(wǎng)站設(shè)計(jì)，就是用 HTML把多種媒體信息有效地組織起來，使瀏覽者高效、便捷地獲取這些信息。 網(wǎng)站設(shè)計(jì)包含的內(nèi)容大體分兩個(gè)方面：一方面是信息的處理和組織，另一方面是網(wǎng)站的延伸設(shè)計(jì)。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁文件的規(guī)劃與創(chuàng)意 一個(gè)網(wǎng)站的成功與否，很重要的一個(gè)因素在于它的構(gòu)思、內(nèi)容的組織、好的創(chuàng)意及豐富詳實(shí)的內(nèi)容。 基本設(shè)計(jì)思路： 1．網(wǎng)站的目標(biāo)與定位 2．網(wǎng)頁的組織結(jié)構(gòu) 3．資料的收集與整理 4． 選擇網(wǎng)頁的設(shè)計(jì)方法 5．網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì) 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 構(gòu)成 WEB網(wǎng)站頁面的 HTML文件是標(biāo)準(zhǔn)的 ASCII文件，看起來像是加入了許多被稱為標(biāo)簽（ tag）的特殊字符串的普通文本文件，我們可以用普通的文本編輯器制作和編輯。但使用文本編輯器制做網(wǎng)頁非常繁瑣而且不易布局和定位。目前有很多專門的網(wǎng)頁制作工具軟件，各有特色。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 1． DreamWeaver DreamWeaver是一個(gè)功能強(qiáng)大的專業(yè)網(wǎng)頁設(shè)計(jì)軟件，包括可視化編輯、 HTML代碼編輯的軟件包，并支持 ActiveX、 JavaScript、 Java、Flash、 ShockWave等，還能通過拖拽從頭到尾制作動態(tài)的 HTML動畫，支持動態(tài) HTML（ Dynamic HTML）的設(shè)計(jì)。同時(shí)它還提供了自動更新頁面信息的功能。 DreamWeaver采用了 Roundtrip HTML技術(shù)。這項(xiàng)技術(shù)使得網(wǎng)頁在DreamWeaver和 HTML代碼編輯器之間進(jìn)行自由轉(zhuǎn)換， HTML句法及結(jié)構(gòu)不變。這樣，專業(yè)設(shè)計(jì)者可以在不改變原有編輯習(xí)慣的同時(shí)，充分享受到可視化編輯帶來的益處。 DreamWeaver具挑戰(zhàn)性和生命力的是它的開放式設(shè)計(jì)，這項(xiàng)設(shè)計(jì)使任何人都可以輕易擴(kuò)展它的功能。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 2． Microsoft FrontPage 如果對 Word很熟悉，那么用 FrontPage 進(jìn)行網(wǎng)頁設(shè)計(jì)一定會非常順手。 FrontPage功能強(qiáng)大，簡單易用。頁面制作由 Frontpage中的Editor完成，其工作窗口由 3個(gè)標(biāo)簽頁組成，分別是“所見即所得”的編輯頁， HTML代碼編輯頁，預(yù)覽頁。 Frontpage帶有圖形和 GIF動畫編輯器，支持 CGI和 CSS。向?qū)Ш湍０宥寄苁钩鯇W(xué)者在編輯網(wǎng)頁時(shí)感到更加方便。站點(diǎn)管理功能強(qiáng)大，在更新服務(wù)器上的站點(diǎn)時(shí)，不需要?jiǎng)?chuàng)建更改文件的目錄， FrontPage會跟蹤文件并拷貝那些新版本文件。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 3． Netscape編輯器 Netscape Communicator和 Netscape Navigator Gold版本的瀏覽器都帶有網(wǎng)頁編輯器。 當(dāng)用 Netscape瀏覽器顯示網(wǎng)頁時(shí)，單擊編輯按鈕， Netscape就會把網(wǎng)頁存儲在硬盤中，然后就可以開始編輯?？梢韵袷褂?Word那樣編輯文字、字體、顏色，改變主頁作者、標(biāo)題、背景顏色或圖像，定義錨點(diǎn)，插入鏈接，定義文檔編碼，插入圖像，創(chuàng)建表格等。 Netscape編輯器是網(wǎng)頁制作初學(xué)者很好的入門工具。如果網(wǎng)頁主要是由文本和圖片組成的， Netscape 編輯器將是一個(gè)輕松的選擇。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 4． Adobe Pagemill Pagemill功能不算強(qiáng)大，但使用起來很方便，適合初學(xué)者制作較為美觀、而不是非常復(fù)雜的主頁。能夠很方便地編輯需要很多框架、表單和 Image Map圖像的網(wǎng)頁。 Pagemill創(chuàng)建多框架頁十分方便，可以同時(shí)編輯各個(gè)框架中的內(nèi)容。 Pagemill在服務(wù)器端或客戶端都可創(chuàng)建與處理 Image Map圖像，也支持表單創(chuàng)建。 Pagemill允許在 HTML代碼上編寫和修改，支持大部分常見的 HTML擴(kuò)展，還提供拼寫檢錯(cuò)、搜索替換等文檔處理工具。在Pagemill ，但仍不支持 CSS、 TrueDoc和動態(tài)HTML等高級特性。 Pagemill另一大特色是有一個(gè)剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時(shí)再打開，很方便。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 5． Claris Home Page 如果使用 Claris Home Page軟件，可以在幾分鐘之內(nèi)創(chuàng)建一個(gè)動態(tài)網(wǎng)頁。它有一個(gè)很好的創(chuàng)建和編輯 Frame（框架）的工具，不必花費(fèi)太多的力氣就可以增加新的 Frame（框架）。而且 Claris Home Page FileMaker數(shù)據(jù)庫，增強(qiáng)的站點(diǎn)管理特性還允許檢測頁面的合法連接。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 6． HotDog Professional HotDog是較早基于代碼的網(wǎng)頁設(shè)計(jì)工具，其最具特色的是提供了許多向?qū)Чぞ撸軒椭O(shè)計(jì)者制作頁面中的復(fù)雜部分。 HotDog對plugin的支持也遠(yuǎn)遠(yuǎn)超過其他產(chǎn)品，它提供的對話框允許以手動方式為不同格式的文件選擇不同的選項(xiàng)。 HotDog是個(gè)功能強(qiáng)大的軟件，對于那些希望在網(wǎng)頁中加入 CSS、Java、 RealVideo等復(fù)雜技術(shù)的高級設(shè)計(jì)者，是個(gè)很好的選擇。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 7． HomeSite Allaire的 HomeSite是一個(gè)小巧而全能的 HTML代碼編輯器，有豐富的幫助功能，支持 CGI和 CSS等等，并且可以直接編輯 Perl程序。 HomeSite工作界面繁簡由人，根據(jù)習(xí)慣，可以將其設(shè)置成像 Notepad那樣簡單的編輯窗口，也可以在復(fù)雜的界面下工作。 HomeSite具有良好的站點(diǎn)管理功能，鏈接確認(rèn)向?qū)Э梢詸z查一個(gè)或多個(gè)文檔的鏈接狀況。 HomeSite適合那些比較復(fù)雜和精彩頁面的設(shè)計(jì)。 網(wǎng)站設(shè)計(jì)基本知識 網(wǎng)頁制作軟件 8． HotMetal Pro HotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個(gè)令各層次設(shè)計(jì)者都不至于失望的軟件。但是初學(xué)者需要熟知HTML，才能得心應(yīng)手地使用這個(gè)軟件。 HotMetal具有強(qiáng)大的數(shù)據(jù)嵌入能力，利用它的數(shù)據(jù)插入向?qū)?，可以把外部?Access、 Word、 Excel以及其他 ODBC數(shù)據(jù)，放入頁面中，而且能夠把它們自動轉(zhuǎn)換為 HTML格式，此外它還能轉(zhuǎn)換很多老格式的文檔（如 WordStar等），并能在轉(zhuǎn)換過程中把這些文檔里的圖片自動轉(zhuǎn)換為 GIF格式。 HotMetal為用戶提供了很多工具，還可以用網(wǎng)狀圖或樹狀圖表現(xiàn)整個(gè)站點(diǎn)文檔的鏈接狀況。 網(wǎng)站設(shè)計(jì)基本知識 HTML語言 HTML語言是網(wǎng)頁制作的基礎(chǔ)。雖然現(xiàn)在有許多所見即所得的網(wǎng)頁制作工具，但還是有必要了解一些 HTML的語法。這樣，可以更精確的控制頁面的排版，可以實(shí)現(xiàn)更多的功能。 HTML不是程序語言，它只是標(biāo)識語言，格式非常簡單，只是由文字及標(biāo)簽組合而成，可直接使用普通的文本編輯器進(jìn)行編輯。 網(wǎng)站設(shè)計(jì)基本知識 HTML語言 1．標(biāo)簽（ tag）寫法 標(biāo)簽又稱標(biāo)識或標(biāo)記，在 HTML中，用來界定各種單元，如標(biāo)題、段落、列表等。 HTML單元由三部分組成：起始標(biāo)簽、單元內(nèi)容、結(jié)束標(biāo)簽。起始標(biāo)簽由“ ”和“ ”來界定，結(jié)束標(biāo)簽由“ /”和“ ”來界定，單元名稱和屬性由起始標(biāo)簽給出。 超文本標(biāo)簽用尖括號“ ”和“ ”表示 標(biāo)簽名與“ ”不能留有空白字符。 有些標(biāo)簽要加上參數(shù)（或稱屬性）。 超文本標(biāo)簽一般是成對出現(xiàn)，用帶斜杠的元素表示結(jié)束，有些標(biāo)簽只有起始標(biāo)簽而沒有結(jié)束標(biāo)簽，還有些標(biāo)簽可以省略。參數(shù)只可加于起始標(biāo)簽中。 標(biāo)簽字母大小寫皆可。 一個(gè)標(biāo)簽元素可寫在多行，參數(shù)位置不受限制。 網(wǎng)站設(shè)計(jì)基本知識 HTML語言 2． HTML 語言的結(jié)構(gòu) 一個(gè) HTML文件應(yīng)具有下面的結(jié)構(gòu)： HTML HTML文件開始 HEAD 文件頭開始 . . /HEAD 文件頭結(jié)束 BODY 文件體開始 . . /BODY 文件體結(jié)束 /HTML HTML文件結(jié)束 網(wǎng)站設(shè)計(jì)基本知識 HTML語言 3．基本標(biāo)簽的使用 （ 1） HTML標(biāo)簽 HTML 這個(gè)標(biāo)簽告訴瀏覽器在 HTML … /HTML 之間的文件是用 HTML編寫的文檔。 （ 2）文檔頭標(biāo)簽 HEAD HEAD … /HEAD 之間包含的是 HTML文檔名稱。 （ 3）文檔名稱標(biāo)簽 TITLE TITLE … /TITLE 之間包含的是具體的 HTML文檔名稱，字符數(shù)通常不超過 64。 （ 4）正文標(biāo)簽 BODY BODY … /BODY 之間是正文部分，這是 HTML文檔最多的部分，它包含的是顯示在瀏覽器文本窗口中的文檔內(nèi)容。 網(wǎng)站設(shè)計(jì)基本知識 HTML語言 3．基本標(biāo)簽的使用 （ 5）標(biāo)題（ Heading）標(biāo)簽 Hn HTML定義了 6個(gè)等級的標(biāo)題標(biāo)簽，其中 n＝ 1， 2， … ， 6。 Hn … /Hn之間包含的是第 n級標(biāo)題。 （ 6）段落（ Paragraph）標(biāo)簽 P P … /P 之間包含的是一段文本。 HTML中沒有使用硬換行（ carriage return）來分段落，也不承認(rèn)多個(gè)連續(xù)的空格，這是與字處理軟件不同的。在 HTML文檔中， P和 /P之間不論有多少行，不論每一行有多長或者多短，也不論其間有多少個(gè)空格，瀏覽器都把它作為一個(gè)段落來處理。 網(wǎng)站設(shè)計(jì)基本知識