可視化網(wǎng)頁設計 (2)ppt課件

1、第第5章章 可視化網(wǎng)頁設計可視化網(wǎng)頁設計杭州師范大學 多媒體網(wǎng)頁設計課程組根本概念v 網(wǎng)頁網(wǎng)頁v 是一種可以在是一種可以在WWW上傳輸，并被閱讀器認識和翻譯成上傳輸，并被閱讀器認識和翻譯成頁面顯示出來的文件頁面顯示出來的文件,又稱為又稱為HTML超文本標志言語超文本標志言語文件，。文件，。v 網(wǎng)站網(wǎng)站v 是一群相關網(wǎng)頁的集合，也就是說，設計者制造了幾個是一群相關網(wǎng)頁的集合，也就是說，設計者制造了幾個網(wǎng)頁，并且經過組織規(guī)劃，讓網(wǎng)頁彼此相連，讓閱讀者可網(wǎng)頁，并且經過組織規(guī)劃，讓網(wǎng)頁彼此相連，讓閱讀者可以看到網(wǎng)站中一切的網(wǎng)頁。以看到網(wǎng)站中一切的網(wǎng)頁。v 主頁主頁v 整個網(wǎng)站的入口整個網(wǎng)站的入口,它通

2、常作為一個站點的目錄或索引，就它通常作為一個站點的目錄或索引，就像是一份報紙的頭版，會把最搶手、最重要的信息寫在上像是一份報紙的頭版，會把最搶手、最重要的信息寫在上面，讓讀者能快速找到本人感興趣的內容。面，讓讀者能快速找到本人感興趣的內容。v 超鏈接超鏈接v 網(wǎng)站中各個網(wǎng)頁有機的聯(lián)絡網(wǎng)站中各個網(wǎng)頁有機的聯(lián)絡.網(wǎng)頁制造工具v 網(wǎng)頁是由網(wǎng)頁是由HTML超文本標志言語編寫的，可以經過文本超文本標志言語編寫的，可以經過文本編輯器來制造編輯器來制造HTML頁面，保管后運用閱讀器翻開剛編輯的頁面，保管后運用閱讀器翻開剛編輯的HTML文件以檢查所寫的代碼能否正確，并且檢查能否符合文件以檢查所寫的代碼能否正確

3、，并且檢查能否符合預先想象的效果，這個過程不但要求對預先想象的效果，這個過程不但要求對HTML言語非常了解言語非常了解而且非常煩瑣。而且非常煩瑣。v 目前有許多可視化網(wǎng)頁制造工具，運用這些工具可以在不用目前有許多可視化網(wǎng)頁制造工具，運用這些工具可以在不用編寫代碼或者只編寫少量的代碼情況下，創(chuàng)建出美麗、專業(yè)編寫代碼或者只編寫少量的代碼情況下，創(chuàng)建出美麗、專業(yè)的網(wǎng)頁。目前流行的有的網(wǎng)頁。目前流行的有Microsoft公司開發(fā)的公司開發(fā)的FrontPage，Macromedia公司開發(fā)的公司開發(fā)的Dreamweaver。建立網(wǎng)站的根本流程v確認網(wǎng)站的方向確認網(wǎng)站的方向v搜集、整理資料搜集、整理資料v

4、網(wǎng)站的架構與規(guī)劃網(wǎng)站的架構與規(guī)劃v選擇網(wǎng)頁制造軟件進展網(wǎng)頁內容設計和編寫程序選擇網(wǎng)頁制造軟件進展網(wǎng)頁內容設計和編寫程序v宣傳網(wǎng)站宣傳網(wǎng)站v將制造好的網(wǎng)站上傳到將制造好的網(wǎng)站上傳到Web效力器上效力器上Frontpage2003v Frontpage是微軟公司推出的是微軟公司推出的Web站點開發(fā)與維護的工具。它是一站點開發(fā)與維護的工具。它是一個個Web開發(fā)環(huán)境，功能強大、易學好用。開發(fā)環(huán)境，功能強大、易學好用。v Frontpage2003是是Office2003組件之一。組件之一。形形狀狀欄欄義務窗格義務窗格網(wǎng)頁編輯區(qū)網(wǎng)頁編輯區(qū)網(wǎng)頁視圖網(wǎng)頁視圖網(wǎng)頁視圖v設計視圖設計視圖v拆分視圖拆分視圖v代碼

5、視圖代碼視圖v預覽視圖預覽視圖實例制造-制造旅游網(wǎng)站 “走遍中國：包括文字、圖片、視頻、flash動畫、欄目導航?！靶沱惡由剑壕W(wǎng)頁對圖片發(fā)表評論?！懊麆俟袍E：欣賞我國大好河山的圖片庫?！案惺苤袊焊邢?。 繪制草圖“走遍中國“名勝古跡繪制草圖“秀麗山河“感受中國網(wǎng)站操作如何創(chuàng)建新站點?如何封鎖站點?如何翻開已有站點?站點的命名運用FrontPage2003創(chuàng)建網(wǎng)站v正確安裝正確安裝FrontPage2003 后，系統(tǒng)默許用戶后，系統(tǒng)默許用戶的網(wǎng)站文件夾在的網(wǎng)站文件夾在“C:Documents and Settings用戶名用戶名My DocumentsMy Web Sites下。下。v網(wǎng)站文件夾

6、下還有兩個文件夾網(wǎng)站文件夾下還有兩個文件夾v “images 文件夾是用來保管網(wǎng)站中的圖片文文件夾是用來保管網(wǎng)站中的圖片文件的，在制造網(wǎng)頁之前先要把用到的圖片都保管件的，在制造網(wǎng)頁之前先要把用到的圖片都保管到這里。到這里。v “_private 文件夾是系統(tǒng)用來做緩存的文件文件夾是系統(tǒng)用來做緩存的文件夾，用戶不要隨意刪除這些文件夾。夾，用戶不要隨意刪除這些文件夾。 運用FrontPage2003創(chuàng)建網(wǎng)站v由于系統(tǒng)默許網(wǎng)站文件夾在系統(tǒng)分區(qū)下，用戶還由于系統(tǒng)默許網(wǎng)站文件夾在系統(tǒng)分區(qū)下，用戶還可以本人選擇在本地硬盤的其他分區(qū)下創(chuàng)建網(wǎng)站可以本人選擇在本地硬盤的其他分區(qū)下創(chuàng)建網(wǎng)站文件夾。文件夾。v啟動啟

7、動FrontPage2003后，單擊后，單擊“文件文件“新新建，在窗口右側出現(xiàn)義務窗格建，在窗口右側出現(xiàn)義務窗格“新建對話框，新建對話框， 選擇選擇“由一個網(wǎng)頁組成的網(wǎng)站由一個網(wǎng)頁組成的網(wǎng)站選項，在彈出選項，在彈出的的“網(wǎng)站模板窗口中選擇網(wǎng)站模板窗口中選擇“空白網(wǎng)站，在空白網(wǎng)站，在“指定新網(wǎng)站的位置選擇或創(chuàng)建網(wǎng)站文件夾。指定新網(wǎng)站的位置選擇或創(chuàng)建網(wǎng)站文件夾。修正網(wǎng)站屬性v翻開翻開“工具菜單的工具菜單的“網(wǎng)站設置選項，可以修網(wǎng)站設置選項，可以修正網(wǎng)站的屬性。例如可以更改網(wǎng)站的稱號，默許正網(wǎng)站的屬性。例如可以更改網(wǎng)站的稱號，默許的網(wǎng)頁編碼格式等。的網(wǎng)頁編碼格式等。網(wǎng)頁操作v 創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁v 方

8、法一方法一:文件夾列表新建網(wǎng)頁文件夾列表新建網(wǎng)頁 . v 方法二方法二:經過文件夾視圖或導航視圖創(chuàng)經過文件夾視圖或導航視圖創(chuàng)建網(wǎng)頁建網(wǎng)頁.v 方法三方法三:文件菜單中新建文件菜單中新建,經過義務窗經過義務窗格創(chuàng)建網(wǎng)頁格創(chuàng)建網(wǎng)頁.網(wǎng)頁操作2、設置網(wǎng)頁屬性、設置網(wǎng)頁屬性標題標題背景背景頁面邊距頁面邊距 背景音樂背景音樂3、保管網(wǎng)頁、保管網(wǎng)頁“文件夾視圖方式下創(chuàng)建的網(wǎng)頁文件夾視圖方式下創(chuàng)建的網(wǎng)頁,系統(tǒng)自動保管系統(tǒng)自動保管.“文件菜單中新建文件菜單中新建,經過義務窗格經過義務窗格,那么需那么需求人工保管求人工保管.4、翻開、封鎖網(wǎng)頁、翻開、封鎖網(wǎng)頁制造網(wǎng)頁前的預備v根據(jù)設計草圖根據(jù)設計草圖,搜集整理預

9、備添加在網(wǎng)頁中的素材，搜集整理預備添加在網(wǎng)頁中的素材，如圖片、文字等資源，假設覺得現(xiàn)成的圖片不適如圖片、文字等資源，假設覺得現(xiàn)成的圖片不適宜網(wǎng)頁的需求，可以運用圖像處置軟件本人制造宜網(wǎng)頁的需求，可以運用圖像處置軟件本人制造,然后將圖片拷貝在站點文件夾中的然后將圖片拷貝在站點文件夾中的“images文件夾里。文件夾里。插入網(wǎng)頁元素v插入文本插入文本v插入圖片插入圖片v來源：外部文件、剪貼畫、繪制自選圖形來源：外部文件、剪貼畫、繪制自選圖形v圖片屬性設置：大小、邊框、環(huán)繞方式圖片屬性設置：大小、邊框、環(huán)繞方式v插入藝術字、文本框插入藝術字、文本框v插入工程符號和編號插入工程符號和編號v插入插入fl

10、ash動畫動畫v插入視頻插入視頻v插入插入Web組件組件(字幕、交互按鈕、計數(shù)器字幕、交互按鈕、計數(shù)器范例網(wǎng)頁網(wǎng)頁規(guī)劃v 頁面規(guī)劃是網(wǎng)頁的骨架頁面規(guī)劃是網(wǎng)頁的骨架 v 規(guī)劃的常見方式有多種規(guī)劃的常見方式有多種 v 運用表格規(guī)劃運用表格規(guī)劃v 運用框架網(wǎng)頁運用框架網(wǎng)頁v 運用圖層運用圖層網(wǎng)頁規(guī)劃v 確定了網(wǎng)頁的主題和內容后，就要對網(wǎng)頁的構造和整體進展規(guī)劃規(guī)劃。表格是實確定了網(wǎng)頁的主題和內容后，就要對網(wǎng)頁的構造和整體進展規(guī)劃規(guī)劃。表格是實現(xiàn)網(wǎng)頁規(guī)劃的主要工具，經過表格內單元格有規(guī)律的陳列，可以將圖片、文本、現(xiàn)網(wǎng)頁規(guī)劃的主要工具，經過表格內單元格有規(guī)律的陳列，可以將圖片、文本、表單、表單、Web組件

11、等內容安頓在固定的地方，經過單元格的合并、拆分、著色、組件等內容安頓在固定的地方，經過單元格的合并、拆分、著色、間距調整，將構成參差有致的渲染效果。間距調整，將構成參差有致的渲染效果。v 目前大多數(shù)的網(wǎng)頁，都是運用表格進展規(guī)劃的。目前大多數(shù)的網(wǎng)頁，都是運用表格進展規(guī)劃的。 網(wǎng)頁規(guī)劃網(wǎng)頁規(guī)劃網(wǎng)頁規(guī)劃v 運用 FrontPage 中的框架網(wǎng)頁網(wǎng)站模板可以創(chuàng)建框架網(wǎng)頁。 網(wǎng)頁規(guī)劃v框架網(wǎng)頁框架網(wǎng)頁v創(chuàng)建框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁v創(chuàng)建初始頁面創(chuàng)建初始頁面v保管框架網(wǎng)頁保管框架網(wǎng)頁v設置框架屬性設置框架屬性v編輯初始頁面編輯初始頁面v隱藏邊框、滾動條隱藏邊框、滾動條v框架命名框架命名v框架拆分、刪除、大小調

12、整框架拆分、刪除、大小調整v嵌入式框架嵌入式框架v注：拆分可用注：拆分可用ctrl+鼠標左鍵拖動框架邊緣鼠標左鍵拖動框架邊緣超鏈接v網(wǎng)頁的強大之處就在它的超鏈接，在閱讀器中經網(wǎng)頁的強大之處就在它的超鏈接，在閱讀器中經過點擊網(wǎng)頁中的超鏈接，可以很方便地翻開另外過點擊網(wǎng)頁中的超鏈接，可以很方便地翻開另外一個網(wǎng)頁，或者是圖片、文件、郵件地址。一個網(wǎng)頁，或者是圖片、文件、郵件地址。v超鏈接的組成：鏈接的載體和鏈接的目的地址。超鏈接的組成：鏈接的載體和鏈接的目的地址。 鏈接的載體鏈接的目的地址超鏈接的載體v鏈接的載體就是在網(wǎng)頁中文字和圖片，凡是包含鏈接的載體就是在網(wǎng)頁中文字和圖片，凡是包含鏈接的文字和圖

13、片都稱為超鏈接。用閱讀器觀看鏈接的文字和圖片都稱為超鏈接。用閱讀器觀看一個超鏈接的時候，它通常采用與普通文本不同一個超鏈接的時候，它通常采用與普通文本不同的顏色顯示，而且加上了下劃線，此外，將鼠標的顏色顯示，而且加上了下劃線，此外，將鼠標移到一個超鏈接上方時，鼠標指針會變成一個手移到一個超鏈接上方時，鼠標指針會變成一個手掌外形。掌外形。超鏈接的目的地址v鏈接的目的地址指的是單擊超鏈接后所顯示的內鏈接的目的地址指的是單擊超鏈接后所顯示的內容，它能夠是進入這個網(wǎng)站的另一個網(wǎng)頁，或進容，它能夠是進入這個網(wǎng)站的另一個網(wǎng)頁，或進入另一個站點，另一個網(wǎng)頁，也能夠是下載文件，入另一個站點，另一個網(wǎng)頁，也能夠

14、是下載文件，甚至是翻開電子郵箱。甚至是翻開電子郵箱。v在參與超鏈接之前，必需先設計好鏈接的載體和在參與超鏈接之前，必需先設計好鏈接的載體和目的地址，是以文字來建立鏈接，還是以圖片來目的地址，是以文字來建立鏈接，還是以圖片來建立鏈接？而這個鏈接又要連到哪里去，怎樣做建立鏈接？而這個鏈接又要連到哪里去，怎樣做才干符合閱讀者的需求？這些都是必需思索的地才干符合閱讀者的需求？這些都是必需思索的地方。方。創(chuàng)建超級鏈接v 鏈接到文件鏈接到文件v 書簽書簽v 電子郵件電子郵件v 圖片熱區(qū)圖片熱區(qū)超鏈接屬性表單的作用v 一個站點在設計過程中，除了內容豐富、規(guī)劃合一個站點在設計過程中，除了內容豐富、規(guī)劃合理、顏

15、色協(xié)調、具有時代感和創(chuàng)新性之外，還有一理、顏色協(xié)調、具有時代感和創(chuàng)新性之外，還有一點是非常重要的，那就是網(wǎng)站的交互性。網(wǎng)站的交點是非常重要的，那就是網(wǎng)站的交互性。網(wǎng)站的交互性普通是經過表單程序來實現(xiàn)的，網(wǎng)頁閱讀者將互性普通是經過表單程序來實現(xiàn)的，網(wǎng)頁閱讀者將信息經過表單發(fā)送到信息經過表單發(fā)送到Web效力器端，效力器端，web效力器效力器接納做出相應的回應，最終將反響信息前往到個人接納做出相應的回應，最終將反響信息前往到個人的閱讀器。的閱讀器。 FrontPage 2003擁有強大的表單制擁有強大的表單制造功能，可以輕松地制造出完善的表單頁面。造功能，可以輕松地制造出完善的表單頁面。 表單的構成v表單由表單域組成，表單域的構成如下:v文本框 ：提供輸入單行的文本 v選項按鈕 ：提供單項選擇或者多項選擇 v復選按紐 ：提供選擇并列的選項 表單v表單是實現(xiàn)網(wǎng)頁互動的元素。與客戶端或效力器表單是實現(xiàn)網(wǎng)頁互動的元素。與客戶端或效力器端腳本結合運用，可以實現(xiàn)互動性。端腳本結合運用，可以實現(xiàn)互動性。 表單組件1表單組件2保管表單的內容v表單制造完成后，表單的交互功能還需求進一步表單制造完成后，表單的交互功能還需求進一步的設置，搜集表單的數(shù)據(jù)。的設置，搜集表單的數(shù)據(jù)。v