第5章-可視化網(wǎng)頁設(shè)計(jì)課件

第5章可視化網(wǎng)頁設(shè)計(jì)杭州師范大學(xué)多媒體網(wǎng)頁設(shè)計(jì)課程組多媒體網(wǎng)頁設(shè)計(jì)教程》基本概念網(wǎng)頁是一種可以在WWW上傳輸，并被瀏覽器認(rèn)識(shí)和翻譯成頁面顯示出來的文件,又稱為HTML（超文本標(biāo)記語言）文件，。

網(wǎng)站是一群相關(guān)網(wǎng)頁的集合，也就是說，設(shè)計(jì)者制作了幾個(gè)網(wǎng)頁，并且經(jīng)過組織規(guī)劃，讓網(wǎng)頁彼此相連，讓瀏覽者可以看到網(wǎng)站中所有的網(wǎng)頁。主頁整個(gè)網(wǎng)站的入口,它通常作為一個(gè)站點(diǎn)的目錄或索引，就像是一份報(bào)紙的頭版，會(huì)把最熱門、最重要的信息寫在上面，讓讀者能快速找到自己感興趣的內(nèi)容。超鏈接網(wǎng)站中各個(gè)網(wǎng)頁有機(jī)的聯(lián)系.多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁制作工具網(wǎng)頁是由HTML（超文本標(biāo)記語言）編寫的，可以通過文本編輯器來制作HTML頁面，保存后使用瀏覽器打開剛編輯的HTML文件以檢查所寫的代碼是否正確，并且檢查是否符合預(yù)先設(shè)想的效果，這個(gè)過程不但要求對(duì)HTML語言非常了解而且十分煩瑣。目前有許多可視化網(wǎng)頁制作工具，使用這些工具可以在不用編寫代碼或者只編寫少量的代碼情況下，創(chuàng)建出漂亮、專業(yè)的網(wǎng)頁。目前流行的有Microsoft公司開發(fā)的FrontPage，Macromedia公司開發(fā)的Dreamweaver。多媒體網(wǎng)頁設(shè)計(jì)教程》建立網(wǎng)站的基本流程確認(rèn)網(wǎng)站的方向收集、整理資料網(wǎng)站的架構(gòu)與規(guī)劃選擇網(wǎng)頁制作軟件進(jìn)行網(wǎng)頁內(nèi)容設(shè)計(jì)和編寫程序宣傳網(wǎng)站將制作好的網(wǎng)站上傳到Web服務(wù)器上多媒體網(wǎng)頁設(shè)計(jì)教程》Frontpage2019Frontpage是微軟公司推出的Web站點(diǎn)開發(fā)與維護(hù)的工具。它是一個(gè)Web開發(fā)環(huán)境，功能強(qiáng)大、易學(xué)好用。Frontpage2019是Office2019組件之一。狀態(tài)欄任務(wù)窗格網(wǎng)頁編輯區(qū)網(wǎng)頁視圖多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁視圖設(shè)計(jì)視圖拆分視圖代碼視圖預(yù)覽視圖多媒體網(wǎng)頁設(shè)計(jì)教程》實(shí)例制作制作旅游網(wǎng)站

“走遍中國”：包括文字、圖片、視頻、flash動(dòng)畫、欄目導(dǎo)航?！靶沱惡由健保壕W(wǎng)頁對(duì)圖片發(fā)表評(píng)論?！懊麆俟袍E”：欣賞我國大好河山的圖片庫?！案惺苤袊保焊邢搿６嗝襟w網(wǎng)頁設(shè)計(jì)教程》繪制草圖“走遍中國”“名勝古跡”多媒體網(wǎng)頁設(shè)計(jì)教程》繪制草圖“秀麗山河”“感受中國”多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)站操作如何創(chuàng)建新站點(diǎn)?如何關(guān)閉站點(diǎn)?如何打開已有站點(diǎn)?站點(diǎn)的命名多媒體網(wǎng)頁設(shè)計(jì)教程》使用FrontPage2019創(chuàng)建網(wǎng)站正確安裝FrontPage2019后，系統(tǒng)默認(rèn)用戶的網(wǎng)站文件夾在“C:\DocumentsandSettings\用戶名\MyDocuments\MyWebSites”下。網(wǎng)站文件夾下還有兩個(gè)文件夾“images”文件夾是用來保存網(wǎng)站中的圖片文件的，在制作網(wǎng)頁之前先要把用到的圖片都保存到這里?！癬private”文件夾是系統(tǒng)用來做緩存的文件夾，用戶不要隨意刪除這些文件夾。多媒體網(wǎng)頁設(shè)計(jì)教程》使用FrontPage2019創(chuàng)建網(wǎng)站由于系統(tǒng)默認(rèn)網(wǎng)站文件夾在系統(tǒng)分區(qū)下，用戶還可以自己選擇在本地硬盤的其他分區(qū)下創(chuàng)建網(wǎng)站文件夾。啟動(dòng)FrontPage2019后，單擊“文件”→“新建”，在窗口右側(cè)出現(xiàn)任務(wù)窗格“新建”對(duì)話框，選擇“由一個(gè)網(wǎng)頁組成的網(wǎng)站…”選項(xiàng)，在彈出的“網(wǎng)站模板”窗口中選擇“空白網(wǎng)站”，在“指定新網(wǎng)站的位置”選擇或創(chuàng)建網(wǎng)站文件夾。多媒體網(wǎng)頁設(shè)計(jì)教程》修改網(wǎng)站屬性打開“工具”菜單的“網(wǎng)站設(shè)置”選項(xiàng)，可以修改網(wǎng)站的屬性。例如可以更改網(wǎng)站的名稱，默認(rèn)的網(wǎng)頁編碼格式等。多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁操作創(chuàng)建網(wǎng)頁方法一:文件夾列表新建網(wǎng)頁.

方法二:通過”文件夾視圖”或”導(dǎo)航視圖”創(chuàng)建網(wǎng)頁.

方法三:”文件”菜單中”新建”,通過”任務(wù)窗格”創(chuàng)建網(wǎng)頁.多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁操作2、設(shè)置網(wǎng)頁屬性標(biāo)題背景頁面邊距背景音樂3、保存網(wǎng)頁“文件夾”視圖方式下創(chuàng)建的網(wǎng)頁,系統(tǒng)自動(dòng)保存.“文件”菜單中”新建”,通過”任務(wù)窗格”,則需要人工保存.4、打開、關(guān)閉網(wǎng)頁多媒體網(wǎng)頁設(shè)計(jì)教程》制作網(wǎng)頁前的準(zhǔn)備根據(jù)設(shè)計(jì)草圖,收集整理準(zhǔn)備添加在網(wǎng)頁中的素材，如圖片、文字等資源，若覺得現(xiàn)成的圖片不適合網(wǎng)頁的需求，可以使用圖像處理軟件自己制作,然后將圖片拷貝在站點(diǎn)文件夾中的“images”文件夾里。多媒體網(wǎng)頁設(shè)計(jì)教程》插入網(wǎng)頁元素插入文本 插入圖片來源：外部文件、剪貼畫、繪制自選圖形圖片屬性設(shè)置：大小、邊框、環(huán)繞方式插入藝術(shù)字、文本框插入項(xiàng)目符號(hào)和編號(hào)插入flash動(dòng)畫插入視頻插入Web組件(字幕、交互按鈕、計(jì)數(shù)器）多媒體網(wǎng)頁設(shè)計(jì)教程》范例網(wǎng)頁多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局頁面布局是網(wǎng)頁的骨架布局的常見方式有多種使用表格布局使用框架網(wǎng)頁使用圖層多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局確定了網(wǎng)頁的主題和內(nèi)容后，就要對(duì)網(wǎng)頁的結(jié)構(gòu)和整體進(jìn)行布局規(guī)劃。表格是實(shí)現(xiàn)網(wǎng)頁布局的主要工具，通過表格內(nèi)單元格有規(guī)律的排列，可以將圖片、文本、表單、Web組件等內(nèi)容安置在固定的地方，通過單元格的合并、拆分、著色、間距調(diào)整，將形成錯(cuò)落有致的渲染效果。目前大多數(shù)的網(wǎng)頁，都是使用表格進(jìn)行布局的。多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局使用FrontPage中的框架網(wǎng)頁網(wǎng)站模板可以創(chuàng)建框架網(wǎng)頁。比如：使用“橫幅和目錄”框架網(wǎng)頁模板創(chuàng)建的框架網(wǎng)頁實(shí)際上在瀏覽器中同時(shí)顯示四個(gè)網(wǎng)頁?？蚣芫W(wǎng)頁橫幅框架目錄框架主框架多媒體網(wǎng)頁設(shè)計(jì)教程》網(wǎng)頁布局框架網(wǎng)頁創(chuàng)建框架網(wǎng)頁創(chuàng)建初始頁面保存框架網(wǎng)頁設(shè)置框架屬性編輯初始頁面隱藏邊框、滾動(dòng)條框架命名框架拆分、刪除、大小調(diào)整嵌入式框架注：拆分可用ctrl+鼠標(biāo)左鍵拖動(dòng)框架邊緣總結(jié)：由于框架很難被搜索引擎加上書簽或索引，而且訪問時(shí)需要瀏覽器的支持等原因，框架布局被應(yīng)用得很少，但是對(duì)于某些Intranet網(wǎng)站和基于Web的工具，框架可以使導(dǎo)航變得更加容易。多媒體網(wǎng)頁設(shè)計(jì)教程》超鏈接網(wǎng)頁的強(qiáng)大之處就在它的超鏈接，在瀏覽器中通過點(diǎn)擊網(wǎng)頁中的超鏈接，可以很方便地打開另外一個(gè)網(wǎng)頁，或者是圖片、文件、郵件地址。超鏈接的組成：鏈接的載體和鏈接的目標(biāo)地址。鏈接的載體鏈接的目標(biāo)地址多媒體網(wǎng)頁設(shè)計(jì)教程》超鏈接的載體鏈接的載體就是在網(wǎng)頁中文字和圖片，凡是包含鏈接的文字和圖片都稱為超鏈接。用瀏覽器觀看一個(gè)超鏈接的時(shí)候，它通常采用與普通文本不同的顏色顯示，而且加上了下劃線，此外，將鼠標(biāo)移到一個(gè)超鏈接上方時(shí)，鼠標(biāo)指針會(huì)變成一個(gè)手掌形狀。多媒體網(wǎng)頁設(shè)計(jì)教程》超鏈接的目標(biāo)地址鏈接的目標(biāo)地址指的是單擊超鏈接后所顯示的內(nèi)容，它可能是進(jìn)入這個(gè)網(wǎng)站的另一個(gè)網(wǎng)頁，或進(jìn)入另一個(gè)站點(diǎn)，另一個(gè)網(wǎng)頁，也可能是下載文件，甚至是打開電子郵箱。在加入超鏈接之前，必須先設(shè)計(jì)好鏈接的載體和目標(biāo)地址，是以文字來建立鏈接，還是以圖片來建立鏈接？而這個(gè)鏈接又要連到哪里去，怎樣做才能符合瀏覽者的需求？這些都是必須考慮的地方。多媒體網(wǎng)頁設(shè)計(jì)教程》創(chuàng)建超級(jí)鏈接鏈接到文件書簽電子郵件圖片熱區(qū)多媒體網(wǎng)頁設(shè)計(jì)教程》超鏈接屬性多媒體網(wǎng)頁設(shè)計(jì)教程》表單的作用

一個(gè)站點(diǎn)在設(shè)計(jì)過程中，除了內(nèi)容豐富、布局合理、顏色協(xié)調(diào)、具有時(shí)代感和創(chuàng)新性之外，還有一點(diǎn)是非常重要的，那就是網(wǎng)站的交互性。網(wǎng)站的交互性一般是通過表單程序來實(shí)現(xiàn)的，網(wǎng)頁瀏覽者將信息通過表單發(fā)送到Web服務(wù)器端，web服務(wù)器接收做出相應(yīng)的回應(yīng)，最終將反饋信息返回到個(gè)人的瀏覽器。

FrontPage2019擁有強(qiáng)大的表單制作功能，可以輕松地制作出完善的表單頁面。多媒體網(wǎng)頁設(shè)計(jì)教程》表單的構(gòu)成表單由表單域組成，表單域的構(gòu)成如下:文本框：提供輸入單行的文本選項(xiàng)按鈕：提供單選或者多選復(fù)選按紐：提供選擇并列的選項(xiàng)

多媒體網(wǎng)頁設(shè)計(jì)教程》表單表單是實(shí)現(xiàn)網(wǎng)頁互動(dòng)的元素。與客戶端或服務(wù)器端腳本結(jié)合使用，可以實(shí)現(xiàn)互動(dòng)性。多媒體網(wǎng)頁設(shè)計(jì)教程》表單組件（1）多媒體網(wǎng)頁設(shè)計(jì)教程》表單組件（2）多媒體網(wǎng)頁設(shè)計(jì)教程》保存表單的內(nèi)容表單制作完成后，表單的交互功能還需要進(jìn)一步的設(shè)置，收集表單的數(shù)據(jù)。注意：表單需要Web服務(wù)器提供必要的技術(shù)支持，Web服務(wù)器安裝配置