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

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

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

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

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

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

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

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

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