Dreamweaver8基礎(chǔ)知識.ppt

1、1,第5章 Dreamweaver 8基礎(chǔ)知識,2,5.1 Dreamweaver 8概述 5.1.1 Dreamweaver 8的新增功能 Dreamweaver 8新增了許多功能，大大改善了軟件的易用性，使用戶無論處于設(shè)計環(huán)境還是編碼環(huán)境都可以方便地制作頁面。新增的主要功能有： 1. 用戶界面的改進 2多種樣式呈現(xiàn)面板 3新的標準CSS面板 4與最新技術(shù)和標準集成 5縮放功能 6改進的WebDAV,3,5.1.2 Dreamweaver 8的工作界面 圖5-2 Dreamweaver 8的工作界面,4,5.2 站點的創(chuàng)建和管理 5.2.1 創(chuàng)建站點 5.2.2 管理站點 1站點的重新配置

2、2創(chuàng)建站點的文件夾 3創(chuàng)建網(wǎng)頁文件 4為網(wǎng)頁文件命名,5,5.3 創(chuàng)建網(wǎng)頁 5.3.1 頁面屬性的設(shè)定 1設(shè)置“外觀”頁面屬性 2設(shè)置“鏈接”頁面屬性 3設(shè)置“標題”頁面屬性 4設(shè)置“標題/編碼”頁面屬性 5設(shè)置“跟蹤圖像”頁面屬性,6,5.3.2 網(wǎng)頁文字的處理 在網(wǎng)頁中輸入文本是最基本的操作。在“文檔窗口”中可以直接輸入文字，一般Dreamweaver 8中的文本段落是自動換行的，即在輸入文字時，若一行文字超過了窗口顯示范圍時，會自動換到下一行。如果在文本輸入的過程中需要劃分段落，可以用Enter鍵進行換行，用Enter鍵換行后上下段落的行間距為一行。如果用Shift+Enter鍵進行強制

3、換行，換行所產(chǎn)生的行間距為用Enter鍵換行所產(chǎn)生的行間距的一半。另外“文檔窗口”也支持Word的復制、粘貼等功能。,7,5.3.3 網(wǎng)頁圖像的處理 1圖像的添加和編輯 2插入其它圖像元素 1）插入“圖像占位符” 2）插入“鼠標經(jīng)過圖像” 5.3.4 制作多媒體頁面 為了增強網(wǎng)頁的表現(xiàn)力，豐富文檔的顯示效果，可以向其Flash動畫、Java小程序、音頻播放插件等多媒體內(nèi)容。 1插入Flash動畫 2插入Flash按鈕 3插入聲音,8,5.4 創(chuàng)建鏈接 5.4.1 創(chuàng)建文字鏈接 5.4.2 創(chuàng)建圖像鏈接 5.4.3 創(chuàng)建電子郵件鏈接 5.4.4 創(chuàng)建錨記鏈接 錨記是指在文檔中設(shè)置一個位置標記，并

4、給該位置一個名稱，以便引用。通過創(chuàng)建的錨記，可以使鏈接指向當前頁面的指定位置，使訪問者能夠快速瀏覽到選定的內(nèi)容，加快信息檢索速度。,9,5.5 表格的使用 表格是網(wǎng)頁制作不可缺少的元素，它以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁面上，讓大家可以設(shè)計出漂亮的頁面；使用表格排版的頁面在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，所以表格還是網(wǎng)頁中最常用的排版方式之一。 5.5.1 表格的創(chuàng)建與編輯 1插入表格 2選擇表格 3編輯和應用表格 1）設(shè)置表格的屬性 2）設(shè)置單元格屬性 3）應用表格 4嵌套表格,10,5.5.2 表格的布局功能 在Dreamweave

5、r中表格的作用不僅僅是安放網(wǎng)頁元素和記載資料，還有一個更為重要的作用就是排版布局，固定網(wǎng)頁中各個元素的位置。,11,5.6 框架的使用 框架的作用就是把瀏覽器窗口劃分為若干區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁?？蚣苤饕煽蚣芗‵rameset）和框架（Frames）兩部分組成?？蚣芗窃谝粋€文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁。當在頁面中建立框架時，Dreamweaver可以創(chuàng)建一個無標題的框架集文件，再在每個框架中創(chuàng)建無標題文件，如果某個頁面被劃分成2個框架，它實際上包含的卻是3個獨立的文件：一個框架集文件和兩個框架內(nèi)容文件。框架內(nèi)容文件包含了將出現(xiàn)在頁面框架中的內(nèi)容。 框架通常用來定義頁

6、面的導航區(qū)域和內(nèi)容區(qū)域。在一般情況下，用戶需要不停地在文章內(nèi)容和導航內(nèi)容之間進行切換。但是，如果利用框架結(jié)構(gòu)把導航內(nèi)容永遠固定在頁面的頂部或左邊，那么在任何時候用戶都可以直接選擇頂部或左邊的導航內(nèi)容，在頁面下方或右邊瀏覽想要的內(nèi)容。,12,5.6.1 框架的創(chuàng)建 5.6.2 框架和框架集屬性的設(shè)置 建立好的默認屬性值為：無邊框、無滾動條，在瀏覽器中無法看到創(chuàng)建的框架，同時不能調(diào)整框架的大小，要改變這些屬性，需要在框架的“屬性”面板中進行修改。 1設(shè)置框架屬性 2設(shè)置框架集屬性 5.6.3 在框架中設(shè)置鏈接,13,5.7 表單的使用 表單是構(gòu)成動態(tài)網(wǎng)站必不可少的元素之一，是提供交互式操作的主要方

7、法，用戶可以通過表單和網(wǎng)站的管理人員進行交流。表單可以幫助Internet服務(wù)器收集信息，如收集資料、獲取訂單。當訪問者在表單中輸入信息，然后單擊提交按鈕時，這些信息將被提交給服務(wù)器進行處理。表單可以包含允許進行交互的各種對象，如文本域、列表框、復選框、單選按鈕、圖像域、按鈕以及其他表單對象。 使用表單必須具備兩個條件：一個是建立含有表單元素的網(wǎng)頁文檔，另一個是具備服務(wù)器端的表單處理應用程序或者客戶端的腳本程序（如CGI、ASP、JSP、PHP等），它能夠處理用戶輸入到表單的信息。 5.7.1 表單的創(chuàng)建 5.7.2 添加表單元素 5.7.3 表單制作的實例,14,5.8 層的應用 層（Lay

8、er）是一種 HTML 頁面元素，可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它 HTML 文檔。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維立體，可以將頁面上元素進行重疊和復雜的布局。 5.8.1 層的基本操作 1創(chuàng)建層 2“層”面板 3設(shè)置層屬性 5.8.2 層的應用實例,15,5.9 CSS樣式表的應用 5.9.1 CSS的基本操作 1創(chuàng)建CSS 2編輯CSS 3應用CSS自定義樣式 4鏈接外部現(xiàn)有的CSS樣式文件 5.9.2 CSS的應用實例,16,5.10 行為的應用 一般說來，動態(tài)網(wǎng)頁是通過JaveScript或基于JaveScript的DHTML代碼來實現(xiàn)的，但編寫腳本既復雜又

9、專業(yè)，需要專門學習。而Dreamweaver提供的“行為”的機制，雖然也是基于JaveScript來實現(xiàn)動態(tài)網(wǎng)頁的，但卻不需書寫任何代碼，在可視化環(huán)境中按幾個按鈕，填幾個選項就可以實現(xiàn)豐富的動態(tài)頁面效果，實現(xiàn)人與頁面的簡單交互。 5.10.1 行為的基本知識 行為是事件與動作的組合，一般的行為都是由事件來激活動作的。動作是由預先寫好的能夠執(zhí)行某種任務(wù)的JavaScript代碼組成，而事件一般與瀏覽器前的用戶的操作相關(guān)，如單擊鼠標、鼠標上滾等。例如，當鼠標移動到網(wǎng)頁的圖片上方時，圖片高亮顯示，此時的鼠標移動稱為事件，圖片的變化稱為動作。 在Dreamwaever中，對行為的添加和控制主要通過“行為”面板來實現(xiàn)。 5.10.2 行為的應用實例,17,5.11 模板的使用 在制作網(wǎng)站的過程中，為了統(tǒng)一風格，很多頁面會用到相同的布局、圖片和文字元素。為了避免大量的重復勞動，可以使用Dreamweaver 8提供的模板功能，將具有相同版面結(jié)構(gòu)的頁面制作為模板，通過模板批量制作這些頁面來提高效率。 5.11.1 模板的基本操作 1創(chuàng)建模板 模板的創(chuàng)建有以下三種方式。 1）利用“模板”面板 2）將普通網(wǎng)頁另存為模板 3）通過菜單創(chuàng)建模板 2創(chuàng)建可編輯區(qū)域 5.11.2 模板的應用實例,18,5.12 測試和發(fā)布網(wǎng)站 5.12.1 測試網(wǎng)站 在發(fā)布網(wǎng)站前先使用Dreamweaver