可視化網(wǎng)頁設(shè)計

1、多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程第第5章章 可視化網(wǎng)頁設(shè)計可視化網(wǎng)頁設(shè)計杭州師范大學(xué) 多媒體網(wǎng)頁設(shè)計課程組多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程基本概念v 網(wǎng)頁網(wǎng)頁 是一種可以在是一種可以在WWW上傳輸，并被瀏覽器認(rèn)識和翻譯成頁上傳輸，并被瀏覽器認(rèn)識和翻譯成頁面顯示出來的文件面顯示出來的文件,又稱為又稱為HTML（超文本標(biāo)記語言）文（超文本標(biāo)記語言）文件，。件，。v 網(wǎng)站網(wǎng)站 是一群相關(guān)網(wǎng)頁的集合，也就是說，設(shè)計者制作了幾個網(wǎng)是一群相關(guān)網(wǎng)頁的集合，也就是說，設(shè)計者制作了幾個網(wǎng)頁，并且經(jīng)過組織規(guī)劃，讓網(wǎng)頁彼此相連，讓瀏覽者可以頁，并且經(jīng)過組織規(guī)劃，讓網(wǎng)頁彼此相連，讓瀏覽者可以看到網(wǎng)站中所有的網(wǎng)

2、頁?？吹骄W(wǎng)站中所有的網(wǎng)頁。v 主頁主頁 整個網(wǎng)站的入口整個網(wǎng)站的入口,它通常作為一個站點的目錄或索引，就像它通常作為一個站點的目錄或索引，就像是一份報紙的頭版，會把最熱門、最重要的信息寫在上面，是一份報紙的頭版，會把最熱門、最重要的信息寫在上面，讓讀者能快速找到自己感興趣的內(nèi)容。讓讀者能快速找到自己感興趣的內(nèi)容。v 超鏈接超鏈接 網(wǎng)站中各個網(wǎng)頁有機的聯(lián)系網(wǎng)站中各個網(wǎng)頁有機的聯(lián)系.多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁制作工具v 網(wǎng)頁是由網(wǎng)頁是由HTML（超文本標(biāo)記語言）編寫的，可以通過文本（超文本標(biāo)記語言）編寫的，可以通過文本編輯器來制作編輯器來制作HTML頁面，保存后使用瀏覽器打開剛編輯的

3、頁面，保存后使用瀏覽器打開剛編輯的HTML文件以檢查所寫的代碼是否正確，并且檢查是否符合文件以檢查所寫的代碼是否正確，并且檢查是否符合預(yù)先設(shè)想的效果，這個過程不但要求對預(yù)先設(shè)想的效果，這個過程不但要求對HTML語言非常了解語言非常了解而且十分煩瑣。而且十分煩瑣。v 目前有許多可視化網(wǎng)頁制作工具，使用這些工具可以在不用目前有許多可視化網(wǎng)頁制作工具，使用這些工具可以在不用編寫代碼或者只編寫少量的代碼情況下，創(chuàng)建出漂亮、專業(yè)編寫代碼或者只編寫少量的代碼情況下，創(chuàng)建出漂亮、專業(yè)的網(wǎng)頁。目前流行的有的網(wǎng)頁。目前流行的有Microsoft公司開發(fā)的公司開發(fā)的FrontPage，Macromedia公司開發(fā)

4、的公司開發(fā)的Dreamweaver。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程建立網(wǎng)站的基本流程v確認(rèn)網(wǎng)確認(rèn)網(wǎng)站的方向站的方向v收集、整理資料收集、整理資料v網(wǎng)站的架構(gòu)與規(guī)劃網(wǎng)站的架構(gòu)與規(guī)劃v選擇網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁內(nèi)容設(shè)計和編寫程序選擇網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁內(nèi)容設(shè)計和編寫程序v宣傳網(wǎng)站宣傳網(wǎng)站v將制作好的網(wǎng)站上傳到將制作好的網(wǎng)站上傳到Web服務(wù)器上服務(wù)器上多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程Frontpage2003v Frontpage是微軟公司推出的是微軟公司推出的Web站點開發(fā)與維護的工具。它是一站點開發(fā)與維護的工具。它是一個個Web開發(fā)環(huán)境，功能強大、易學(xué)好用。開發(fā)環(huán)境，功能強大、易學(xué)好用。

5、v Frontpage2003是是Office2003組件之一組件之一。狀狀態(tài)態(tài)欄欄任務(wù)窗格任務(wù)窗格網(wǎng)頁編輯區(qū)網(wǎng)頁編輯區(qū)網(wǎng)頁視圖網(wǎng)頁視圖多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁視圖v設(shè)計視圖設(shè)計視圖v拆分視圖拆分視圖v代碼視圖代碼視圖v預(yù)覽視圖預(yù)覽視圖多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程實例制作-制作旅游網(wǎng)站 “走遍中國”：包括文字、圖片、視頻、flash動畫、欄目導(dǎo)航?！靶沱惡由健保壕W(wǎng)頁對圖片發(fā)表評論?！懊麆俟袍E”：欣賞我國大好河山的圖片庫?！案惺苤袊保焊邢?。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程繪制草圖“走遍中國”“名勝古跡”多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程繪制草圖“秀麗山河”“感受

6、中國”多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)站操作如何創(chuàng)建新站點?如何關(guān)閉站點?如何打開已有站點?站點的命名多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程使用FrontPage2003創(chuàng)建網(wǎng)站v正確安裝正確安裝FrontPage2003 后，系統(tǒng)默認(rèn)用戶后，系統(tǒng)默認(rèn)用戶的網(wǎng)站文件夾在的網(wǎng)站文件夾在“C:Documents and Settings用戶名用戶名My DocumentsMy Web Sites”下。下。v網(wǎng)站文件夾下還有兩個文件夾網(wǎng)站文件夾下還有兩個文件夾 “images” 文件夾是用來保存網(wǎng)站中的圖片文件的，在制作網(wǎng)頁之前先要把用到的圖片都保存到這里。 “_private” 文件夾是系統(tǒng)用

7、來做緩存的文件夾，用戶不要隨意刪除這些文件夾。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程使用FrontPage2003創(chuàng)建網(wǎng)站v由于系統(tǒng)默認(rèn)網(wǎng)站文件夾在系統(tǒng)分區(qū)下，用戶還由于系統(tǒng)默認(rèn)網(wǎng)站文件夾在系統(tǒng)分區(qū)下，用戶還可以自己選擇在本地硬盤的其他分區(qū)下創(chuàng)建網(wǎng)站可以自己選擇在本地硬盤的其他分區(qū)下創(chuàng)建網(wǎng)站文件夾。文件夾。v啟動啟動FrontPage2003后，單擊后，單擊“文件文件”“新新建建”，在窗口右側(cè)出現(xiàn)任務(wù)窗格，在窗口右側(cè)出現(xiàn)任務(wù)窗格“新建新建”對話框，對話框， 選擇選擇“由一個網(wǎng)頁組成的網(wǎng)站由一個網(wǎng)頁組成的網(wǎng)站”選項，在彈出的選項，在彈出的“網(wǎng)站模板網(wǎng)站模板”窗口中選擇窗口中選擇“空白網(wǎng)站空白網(wǎng)站

8、”，在，在“指指定新網(wǎng)站的位置定新網(wǎng)站的位置”選擇或創(chuàng)建網(wǎng)站文件夾。選擇或創(chuàng)建網(wǎng)站文件夾。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程修改網(wǎng)站屬性v打開打開“工具工具”菜單的菜單的“網(wǎng)站設(shè)置網(wǎng)站設(shè)置”選項，可以修選項，可以修改網(wǎng)站的屬性。例如可以更改網(wǎng)站的名稱，默認(rèn)改網(wǎng)站的屬性。例如可以更改網(wǎng)站的名稱，默認(rèn)的網(wǎng)頁編碼格式等。的網(wǎng)頁編碼格式等。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁操作v 創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁方法一:文件夾列表新建網(wǎng)頁 . 方法二:通過”文件夾視圖”或”導(dǎo)航視圖”創(chuàng)建網(wǎng)頁. 方法三:”文件”菜單中”新建”,通過”任務(wù)窗格”創(chuàng)建網(wǎng)頁.多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁操作2、設(shè)置網(wǎng)頁屬

9、性、設(shè)置網(wǎng)頁屬性標(biāo)題背景頁面邊距 背景音樂3、保存網(wǎng)頁、保存網(wǎng)頁“文件夾”視圖方式下創(chuàng)建的網(wǎng)頁,系統(tǒng)自動保存.“文件”菜單中”新建”,通過”任務(wù)窗格”,則需要人工保存.4、打開、關(guān)閉網(wǎng)頁、打開、關(guān)閉網(wǎng)頁多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程制作網(wǎng)頁前的準(zhǔn)備v根據(jù)設(shè)計草圖根據(jù)設(shè)計草圖,收集整理準(zhǔn)備添加在網(wǎng)頁中的素材，收集整理準(zhǔn)備添加在網(wǎng)頁中的素材，如圖片、文字等資源，若覺得現(xiàn)成的圖片不適合如圖片、文字等資源，若覺得現(xiàn)成的圖片不適合網(wǎng)頁的需求，可以使用圖像處理軟件自己制作網(wǎng)頁的需求，可以使用圖像處理軟件自己制作,然然后將圖片拷貝在站點文件夾中的后將圖片拷貝在站點文件夾中的“images”文件文件夾里

10、。夾里。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程插入網(wǎng)頁元素v插入文本插入文本v插入圖片插入圖片來源：外部文件、剪貼畫、繪制自選圖形圖片屬性設(shè)置：大小、邊框、環(huán)繞方式v插入藝術(shù)字、文本框插入藝術(shù)字、文本框v插入項目符號和編號插入項目符號和編號v插入插入flash動畫動畫v插入視頻插入視頻v插入插入Web組件組件(字幕、交互按鈕、計數(shù)器）字幕、交互按鈕、計數(shù)器）多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程范例網(wǎng)頁多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局v 頁面布局是網(wǎng)頁的骨架頁面布局是網(wǎng)頁的骨架 v 布局的常見方式有多種布局的常見方式有多種 使用表格布局使用表格布局使用框架網(wǎng)頁使用框架網(wǎng)頁使用圖層使用圖

11、層多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局v 確定了網(wǎng)頁的主題和內(nèi)容后，就要對網(wǎng)頁的結(jié)構(gòu)和整體進(jìn)行布局規(guī)劃。表格是實確定了網(wǎng)頁的主題和內(nèi)容后，就要對網(wǎng)頁的結(jié)構(gòu)和整體進(jìn)行布局規(guī)劃。表格是實現(xiàn)網(wǎng)頁布局的主要工具，通過表格內(nèi)單元格有規(guī)律的排列，可以將圖片、文本、現(xiàn)網(wǎng)頁布局的主要工具，通過表格內(nèi)單元格有規(guī)律的排列，可以將圖片、文本、表單、表單、Web組件等內(nèi)容安置在固定的地方，通過單元格的合并、拆分、著色、組件等內(nèi)容安置在固定的地方，通過單元格的合并、拆分、著色、間距調(diào)整，將形成錯落有致的渲染效果。間距調(diào)整，將形成錯落有致的渲染效果。v 目前大多數(shù)的網(wǎng)頁，都是使用表格進(jìn)行布局的。目前大多數(shù)的網(wǎng)頁，

12、都是使用表格進(jìn)行布局的。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局v 使用使用 FrontPage 中的框架網(wǎng)頁網(wǎng)站模板可以創(chuàng)建框架中的框架網(wǎng)頁網(wǎng)站模板可以創(chuàng)建框架網(wǎng)頁。網(wǎng)頁。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程網(wǎng)頁布局v框架網(wǎng)頁框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁創(chuàng)建初始頁面創(chuàng)建初始頁面保存框架網(wǎng)頁保存框架網(wǎng)頁設(shè)置框架屬性設(shè)置框架屬性編輯初始頁面編輯初始頁面隱藏邊框、滾動條隱藏邊框、滾動條框架命名框架命名框架拆分、刪除、大小調(diào)整框架拆分、刪除、大小調(diào)整嵌入式框架嵌入式框架注：拆分可用注：拆分可用ctrl

13、+鼠標(biāo)左鍵拖動框架邊緣鼠標(biāo)左鍵拖動框架邊緣由于框架很難被搜索引擎加上書簽或索引，而且訪問時需要瀏由于框架很難被搜索引擎加上書簽或索引，而且訪問時需要瀏覽器的支持等原因，框架布局被應(yīng)用得很少，但是對于某些覽器的支持等原因，框架布局被應(yīng)用得很少，但是對于某些 Intranet 網(wǎng)站和基于網(wǎng)站和基于 Web 的工具，框架可以使導(dǎo)航變得更加容易。的工具，框架可以使導(dǎo)航變得更加容易。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程超鏈接v網(wǎng)頁的強大之處就在它的超鏈接，在瀏覽器中通網(wǎng)頁的強大之處就在它的超鏈接，在瀏覽器中通過點擊網(wǎng)頁中的超鏈接，可以很方便地打開另外過點擊網(wǎng)頁中的超鏈接，可以很方便地打開另外一個網(wǎng)頁，或

14、者是圖片、文件、郵件地址。一個網(wǎng)頁，或者是圖片、文件、郵件地址。v超鏈接的組成：鏈接的載體和鏈接的目標(biāo)地址。超鏈接的組成：鏈接的載體和鏈接的目標(biāo)地址。 鏈接的載體鏈接的目標(biāo)地址多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程超鏈接的載體v鏈接的載體就是在網(wǎng)頁中文字和圖片，凡是包含鏈接的載體就是在網(wǎng)頁中文字和圖片，凡是包含鏈接的文字和圖片都稱為超鏈接。用瀏覽器觀看鏈接的文字和圖片都稱為超鏈接。用瀏覽器觀看一個超鏈接的時候，它通常采用與普通文本不同一個超鏈接的時候，它通常采用與普通文本不同的顏色顯示，而且加上了下劃線，此外，將鼠標(biāo)的顏色顯示，而且加上了下劃線，此外，將鼠標(biāo)移到一個超鏈接上方時，鼠標(biāo)指針會變成一

15、個手移到一個超鏈接上方時，鼠標(biāo)指針會變成一個手掌形狀。掌形狀。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程超鏈接的目標(biāo)地址v鏈接的目標(biāo)地址指的是單擊超鏈接后所顯示的內(nèi)鏈接的目標(biāo)地址指的是單擊超鏈接后所顯示的內(nèi)容，它可能是進(jìn)入這個網(wǎng)站的另一個網(wǎng)頁，或進(jìn)容，它可能是進(jìn)入這個網(wǎng)站的另一個網(wǎng)頁，或進(jìn)入另一個站點，另一個網(wǎng)頁，也可能是下載文件，入另一個站點，另一個網(wǎng)頁，也可能是下載文件，甚至是打開電子郵箱。甚至是打開電子郵箱。v在加入超鏈接之前，必須先設(shè)計好鏈接的載體和在加入超鏈接之前，必須先設(shè)計好鏈接的載體和目標(biāo)地址，是以文字來建立鏈接，還是以圖片來目標(biāo)地址，是以文字來建立鏈接，還是以圖片來建立鏈接？而這個鏈

16、接又要連到哪里去，怎樣做建立鏈接？而這個鏈接又要連到哪里去，怎樣做才能符合瀏覽者的需求？這些都是必須考慮的地才能符合瀏覽者的需求？這些都是必須考慮的地方。方。多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程創(chuàng)建超級鏈接v 鏈接到文件鏈接到文件v 書簽書簽v 電子郵件電子郵件v 圖片熱區(qū)圖片熱區(qū)多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程超鏈接屬性多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程表單的作用v 一個站點在設(shè)計過程中，除了內(nèi)容豐富、布局合一個站點在設(shè)計過程中，除了內(nèi)容豐富、布局合理、顏色協(xié)調(diào)、具有時代感和創(chuàng)新性之外，還有一理、顏色協(xié)調(diào)、具有時代感和創(chuàng)新性之外，還有一點是非常重要的，那就是網(wǎng)站的交互性。網(wǎng)站的交點是非

17、常重要的，那就是網(wǎng)站的交互性。網(wǎng)站的交互性一般是通過表單程序來實現(xiàn)的，網(wǎng)頁瀏覽者將互性一般是通過表單程序來實現(xiàn)的，網(wǎng)頁瀏覽者將信息通過表單發(fā)送到信息通過表單發(fā)送到Web服務(wù)器端，服務(wù)器端，web服務(wù)器服務(wù)器接收做出相應(yīng)的回應(yīng)，最終將反饋信息返回到個人接收做出相應(yīng)的回應(yīng)，最終將反饋信息返回到個人的瀏覽器。的瀏覽器。 FrontPage 2003擁有強大的表單制擁有強大的表單制作功能，可以輕松地制作出完善的表單頁面。作功能，可以輕松地制作出完善的表單頁面。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程表單的構(gòu)成v表單由表單域組成，表單域的構(gòu)成如下表單由表單域組成，表單域的構(gòu)成如下: 文本框 ：提供輸入單行的文本 選項按鈕 ：提供單選或者多選 復(fù)選按紐 ：提供選擇并列的選項 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程表單v表單是實現(xiàn)網(wǎng)頁互動的元素。與客戶端或服務(wù)器表單是實現(xiàn)網(wǎng)頁互動的元素。與客戶端或服務(wù)器端腳本結(jié)合使用，可以實現(xiàn)互動性。端腳本結(jié)合使用，可以實現(xiàn)互動性。 多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程表單組件（1）多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程表單組件（2）多媒體網(wǎng)頁設(shè)計教程多媒體網(wǎng)頁設(shè)計教程保存表單的內(nèi)容v表單制作完成后，表單的交互功能還需要進(jìn)一步表單制作完成后，表單的交互功能還需要進(jìn)一步的設(shè)置，收集表單的數(shù)據(jù)。的設(shè)置，收集表單的數(shù)據(jù)。v注意：