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

2、2創(chuàng)建站點(diǎn)的文件夾 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è)置“標(biāo)題”頁面屬性 4設(shè)置“標(biāo)題/編碼”頁面屬性 5設(shè)置“跟蹤圖像”頁面屬性,6,5.3.2 網(wǎng)頁文字的處理 在網(wǎng)頁中輸入文本是最基本的操作。在“文檔窗口”中可以直接輸入文字，一般Dreamweaver 8中的文本段落是自動(dòng)換行的，即在輸入文字時(shí)，若一行文字超過了窗口顯示范圍時(shí)，會(huì)自動(dòng)換到下一行。如果在文本輸入的過程中需要?jiǎng)澐侄温?，可以用Enter鍵進(jìn)行換行，用Enter鍵換行后上下段落的行間距為一行。如果用Shift+Enter鍵進(jìn)行強(qiáng)制

3、換行，換行所產(chǎn)生的行間距為用Enter鍵換行所產(chǎn)生的行間距的一半。另外“文檔窗口”也支持Word的復(fù)制、粘貼等功能。,7,5.3.3 網(wǎng)頁圖像的處理 1圖像的添加和編輯 2插入其它圖像元素 1）插入“圖像占位符” 2）插入“鼠標(biāo)經(jīng)過圖像” 5.3.4 制作多媒體頁面 為了增強(qiáng)網(wǎng)頁的表現(xiàn)力，豐富文檔的顯示效果，可以向其Flash動(dòng)畫、Java小程序、音頻播放插件等多媒體內(nèi)容。 1插入Flash動(dòng)畫 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è)置一個(gè)位置標(biāo)記，并

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

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

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

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

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

9、專業(yè)，需要專門學(xué)習(xí)。而Dreamweaver提供的“行為”的機(jī)制，雖然也是基于JaveScript來實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的，但卻不需書寫任何代碼，在可視化環(huán)境中按幾個(gè)按鈕，填幾個(gè)選項(xiàng)就可以實(shí)現(xiàn)豐富的動(dòng)態(tài)頁面效果，實(shí)現(xiàn)人與頁面的簡(jiǎn)單交互。 5.10.1 行為的基本知識(shí) 行為是事件與動(dòng)作的組合，一般的行為都是由事件來激活動(dòng)作的。動(dòng)作是由預(yù)先寫好的能夠執(zhí)行某種任務(wù)的JavaScript代碼組成，而事件一般與瀏覽器前的用戶的操作相關(guān)，如單擊鼠標(biāo)、鼠標(biāo)上滾等。例如，當(dāng)鼠標(biāo)移動(dòng)到網(wǎng)頁的圖片上方時(shí)，圖片高亮顯示，此時(shí)的鼠標(biāo)移動(dòng)稱為事件，圖片的變化稱為動(dòng)作。 在Dreamwaever中，對(duì)行為的添加和控制主要通過“行為”面板來實(shí)現(xiàn)。 5.10.2 行為的應(yīng)用實(shí)例,17,5.11 模板的使用 在制作網(wǎng)站的過程中，為了統(tǒng)一風(fēng)格，很多頁面會(huì)用到相同的布局、圖片和文字元素。為了避免大量的重復(fù)勞動(dò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 模板的應(yīng)用實(shí)例,18,5.12 測(cè)試和發(fā)布網(wǎng)站 5.12.1 測(cè)試網(wǎng)站 在發(fā)布網(wǎng)站前先使用Dreamweaver