DreamweaverCC實(shí)例教程(第5版)行為

DreamweaverCC實(shí)例教程(第5版)行為匯報(bào)人：AA2024-01-18AAREPORTING2023WORKSUMMARY目錄CATALOGUE基礎(chǔ)知識與界面介紹站點(diǎn)創(chuàng)建與管理網(wǎng)頁元素編輯與排版CSS樣式設(shè)計(jì)與應(yīng)用JavaScript行為特效制作表單數(shù)據(jù)處理與交互功能實(shí)現(xiàn)動態(tài)網(wǎng)站開發(fā)基礎(chǔ)知識AAPART01基礎(chǔ)知識與界面介紹DreamweaverCC概述DreamweaverCC可以與其他Adobe軟件（如Photoshop、Illustrator等）無縫集成，方便進(jìn)行網(wǎng)頁設(shè)計(jì)和圖像處理。與其他Adobe軟件的集成DreamweaverCC是一款專業(yè)的網(wǎng)頁設(shè)計(jì)軟件，提供了一站式的網(wǎng)頁開發(fā)環(huán)境，支持HTML、CSS、JavaScript等多種網(wǎng)頁開發(fā)語言。強(qiáng)大的網(wǎng)頁設(shè)計(jì)軟件軟件具有可視化編輯、代碼提示、實(shí)時(shí)預(yù)覽、多種瀏覽器測試等功能，可大大提高網(wǎng)頁設(shè)計(jì)的效率和質(zhì)量。豐富的功能特性系統(tǒng)要求安裝DreamweaverCC需要滿足一定的系統(tǒng)要求，如操作系統(tǒng)版本、內(nèi)存大小、硬盤空間等。安裝步驟詳細(xì)介紹軟件的安裝過程，包括下載安裝包、運(yùn)行安裝程序、選擇安裝選項(xiàng)、等待安裝完成等。啟動方法介紹如何啟動DreamweaverCC軟件，包括通過桌面快捷方式、開始菜單等方式啟動。安裝與啟動界面組成介紹DreamweaverCC的界面組成，包括菜單欄、工具欄、文檔窗口、屬性面板、面板組等。界面功能詳細(xì)解釋各個(gè)界面元素的功能和作用，如菜單欄中的各個(gè)菜單項(xiàng)、工具欄中的工具按鈕等。自定義界面介紹如何自定義界面布局，包括調(diào)整面板位置、隱藏或顯示某些界面元素等。界面布局及功能030201123介紹如何設(shè)置DreamweaverCC的首選參數(shù)，如字體大小、顏色方案、自動保存等，以優(yōu)化工作環(huán)境。設(shè)置首選參數(shù)提供自定義快捷鍵的方法，使用戶能夠根據(jù)自己的習(xí)慣設(shè)置快捷鍵，提高工作效率?？旖萱I設(shè)置介紹如何在不同工作區(qū)之間切換，以適應(yīng)不同的工作需求。例如，可以在設(shè)計(jì)視圖和代碼視圖之間切換。工作區(qū)切換自定義工作環(huán)境PART02站點(diǎn)創(chuàng)建與管理站點(diǎn)概念及規(guī)劃站點(diǎn)定義在Dreamweaver中，站點(diǎn)是指一組相關(guān)網(wǎng)頁和文件的集合，通常包括HTML、CSS、JavaScript、圖像和其他媒體文件。站點(diǎn)規(guī)劃在開始創(chuàng)建站點(diǎn)之前，需要進(jìn)行充分的規(guī)劃，包括確定站點(diǎn)的目標(biāo)、受眾、內(nèi)容結(jié)構(gòu)、導(dǎo)航方式、視覺風(fēng)格等。定義站點(diǎn)名稱和URL為站點(diǎn)指定一個(gè)易于識別的名稱和URL地址，以便在瀏覽器中訪問。設(shè)置站點(diǎn)參數(shù)根據(jù)需要設(shè)置站點(diǎn)的參數(shù)，如默認(rèn)文檔類型、編碼方式、鏈接行為等。選擇站點(diǎn)位置在Dreamweaver中，可以選擇本地計(jì)算機(jī)上的文件夾作為站點(diǎn)位置，也可以連接到遠(yuǎn)程服務(wù)器上的文件夾。創(chuàng)建本地站點(diǎn)資源管理Dreamweaver的資源面板提供了對站點(diǎn)中所有資源的統(tǒng)一管理，包括圖像、CSS樣式、JavaScript腳本等。版本控制通過集成版本控制工具（如Git或Subversion），可以輕松地跟蹤和管理站點(diǎn)的版本歷史記錄。文件管理使用Dreamweaver的文件管理功能，可以輕松地上傳、下載、重命名、刪除和移動站點(diǎn)中的文件。管理站點(diǎn)資源站點(diǎn)地圖Dreamweaver的站點(diǎn)地圖功能可以生成站點(diǎn)的可視化結(jié)構(gòu)圖，幫助用戶更好地了解站點(diǎn)的組織結(jié)構(gòu)和鏈接關(guān)系。文件視圖在文件視圖中，用戶可以查看和管理站點(diǎn)中的所有文件和文件夾，以及它們之間的層次關(guān)系。此外，還可以通過文件視圖快速定位到特定的文件或文件夾。站點(diǎn)地圖和文件視圖PART03網(wǎng)頁元素編輯與排版文本輸入文本格式化段落格式化文本輸入與格式化在DreamweaverCC中，可以直接在文檔窗口中輸入文本，也可以使用復(fù)制和粘貼操作將文本從其他應(yīng)用程序中導(dǎo)入?？梢允褂谩皩傩浴泵姘逯械倪x項(xiàng)對文本進(jìn)行格式化，包括設(shè)置字體、大小、顏色、對齊方式等?？梢允褂枚温錁邮絹碓O(shè)置段落的縮進(jìn)、間距、行高等屬性，使文本排版更加美觀。插入圖像可以通過“插入”菜單或“屬性”面板中的選項(xiàng)將圖像插入到網(wǎng)頁中，并設(shè)置圖像的大小、對齊方式等屬性。插入媒體內(nèi)容可以在網(wǎng)頁中插入音頻、視頻等媒體內(nèi)容，使網(wǎng)頁更加生動有趣。圖像和媒體內(nèi)容編輯可以使用DreamweaverCC中的圖像和媒體編輯工具對插入的內(nèi)容進(jìn)行編輯和優(yōu)化。插入圖像和媒體內(nèi)容01可以使用“屬性”面板中的選項(xiàng)設(shè)置鏈接的目標(biāo)地址、打開方式等屬性。鏈接設(shè)置02可以使用DreamweaverCC中的超鏈接管理工具對網(wǎng)頁中的鏈接進(jìn)行批量管理和檢查，確保鏈接的有效性。超鏈接管理03可以創(chuàng)建錨點(diǎn)鏈接，使用戶能夠直接跳轉(zhuǎn)到網(wǎng)頁的指定位置。錨點(diǎn)鏈接鏈接設(shè)置與超鏈接管理表格創(chuàng)建與編輯可以使用DreamweaverCC中的表格工具創(chuàng)建和編輯表格，并設(shè)置表格的屬性，如邊框、間距、背景色等。布局模式應(yīng)用可以使用布局模式對網(wǎng)頁進(jìn)行分欄布局，使網(wǎng)頁結(jié)構(gòu)更加清晰美觀。在布局模式中，可以創(chuàng)建和編輯布局單元格，并設(shè)置單元格的屬性，如寬度、高度、背景色等。同時(shí)，還可以使用布局工具對布局進(jìn)行調(diào)整和優(yōu)化。表格和布局模式應(yīng)用PART04CSS樣式設(shè)計(jì)與應(yīng)用CSS（層疊樣式表）是一種用于描述HTML或XML（包括SVG、MathML等）文檔樣式的語言。它用于分離文檔的內(nèi)容（用HTML或其他標(biāo)記語言編寫）和文檔的呈現(xiàn)樣式（如顏色、布局和字體）。CSS基本概念CSS選擇器是用于選擇頁面中需要應(yīng)用樣式的元素。常見的選擇器類型包括元素選擇器、類選擇器、ID選擇器、屬性選擇器、偽類選擇器等。選擇器類型CSS概述及選擇器類型在Dreamweaver中，可以通過多種方式創(chuàng)建CSS規(guī)則，如直接在樣式面板中添加新規(guī)則，或通過“新建樣式規(guī)則”對話框來創(chuàng)建。創(chuàng)建CSS規(guī)則創(chuàng)建好CSS規(guī)則后，可以通過選擇器將其應(yīng)用到頁面中的相應(yīng)元素上。在Dreamweaver中，可以通過“應(yīng)用樣式”按鈕或右鍵菜單中的“應(yīng)用樣式”選項(xiàng)來應(yīng)用規(guī)則。應(yīng)用CSS規(guī)則創(chuàng)建和應(yīng)用CSS規(guī)則布局技術(shù)CSS提供了多種布局技術(shù)，如塊級元素布局、內(nèi)聯(lián)元素布局、表格布局、浮動布局、定位布局等。這些技術(shù)可以單獨(dú)使用，也可以組合使用，以實(shí)現(xiàn)復(fù)雜的頁面布局。定位技術(shù)CSS的定位技術(shù)包括靜態(tài)定位、相對定位、絕對定位和固定定位。通過定位技術(shù)，可以精確控制元素在頁面中的位置。CSS布局和定位技術(shù)響應(yīng)式網(wǎng)頁設(shè)計(jì)原理響應(yīng)式網(wǎng)頁設(shè)計(jì)是一種使網(wǎng)頁在不同設(shè)備和窗口尺寸上都能良好顯示的設(shè)計(jì)方法。它通過媒體查詢、流式布局和彈性圖片等技術(shù)，使頁面能夠自適應(yīng)不同屏幕尺寸和分辨率。響應(yīng)式設(shè)計(jì)概念在Dreamweaver中，可以通過添加媒體查詢來創(chuàng)建響應(yīng)式規(guī)則，從而實(shí)現(xiàn)在不同屏幕尺寸下應(yīng)用不同的樣式。同時(shí)，還可以使用流式布局和彈性圖片等技術(shù)來增強(qiáng)頁面的響應(yīng)性。實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)PART05JavaScript行為特效制作VS行為是Dreamweaver中的一種功能，它允許您向網(wǎng)頁元素添加JavaScript代碼，以實(shí)現(xiàn)各種動態(tài)效果和交互功能。行為與事件行為通常與事件相關(guān)聯(lián)，事件是用戶在與網(wǎng)頁進(jìn)行交互時(shí)發(fā)生的動作，如點(diǎn)擊、鼠標(biāo)移動等。行為定義了當(dāng)這些事件發(fā)生時(shí)應(yīng)該執(zhí)行的JavaScript代碼。行為定義JavaScript行為概述在Dreamweaver中，您可以通過選擇元素并點(diǎn)擊“行為”面板中的“+”按鈕來添加行為。然后從彈出的菜單中選擇所需的行為。添加行為后，您可以在“行為”面板中編輯它。您可以更改行為的參數(shù)、添加或刪除JavaScript代碼，以及更改行為觸發(fā)的事件。添加行為編輯行為添加和編輯行為使用“打開瀏覽器窗口”行為，可以在用戶執(zhí)行特定操作時(shí)彈出一個(gè)新窗口。您可以設(shè)置窗口的大小、位置和其他屬性。彈出窗口使用“交換圖像”行為，可以在用戶將鼠標(biāo)指針移動到圖像上時(shí)更改圖像。這對于創(chuàng)建鼠標(biāo)懸停效果非常有用。交換圖像使用“顯示-隱藏元素”行為，可以根據(jù)用戶的操作顯示或隱藏頁面上的元素。這對于創(chuàng)建交互式表單和導(dǎo)航菜單非常有用。顯示/隱藏元素常見行為特效實(shí)現(xiàn)方法編寫自定義行為除了使用Dreamweaver提供的內(nèi)置行為外，您還可以編寫自己的JavaScript代碼來創(chuàng)建自定義行為。這允許您實(shí)現(xiàn)更復(fù)雜的特效和功能。調(diào)試和優(yōu)化在編寫自定義行為時(shí)，確保進(jìn)行充分的測試和調(diào)試以確保其正常工作。同時(shí)，優(yōu)化代碼以提高性能和用戶體驗(yàn)也是非常重要的。自定義行為腳本編寫PART06表單數(shù)據(jù)處理與交互功能實(shí)現(xiàn)包括文本框、密碼框、單選框、復(fù)選框、下拉列表、文件上傳等。表單元素類型通過設(shè)置表單元素的屬性，如name、value、type、size、maxlength等，來定義元素的外觀和行為。屬性設(shè)置表單元素類型及屬性設(shè)置客戶端驗(yàn)證使用JavaScript等客戶端腳本語言進(jìn)行表單驗(yàn)證，可以在用戶提交表單前檢查數(shù)據(jù)的合法性和完整性。要點(diǎn)一要點(diǎn)二服務(wù)器端驗(yàn)證在服務(wù)器端使用PHP、ASP等服務(wù)器端腳本語言進(jìn)行表單驗(yàn)證，確保數(shù)據(jù)的安全性和準(zhǔn)確性。表單驗(yàn)證技術(shù)實(shí)現(xiàn)方法數(shù)據(jù)提交用戶填寫表單后，通過點(diǎn)擊提交按鈕將數(shù)據(jù)提交到服務(wù)器。數(shù)據(jù)處理服務(wù)器接收到數(shù)據(jù)后，進(jìn)行處理和存儲，然后返回處理結(jié)果給客戶端。數(shù)據(jù)提交和處理過程解析AJAX技術(shù)使用AJAX技術(shù)可以在不刷新頁面的情況下與服務(wù)器進(jìn)行異步通信，實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新和交互。在表單中應(yīng)用通過AJAX技術(shù)，可以在用戶填寫表單時(shí)實(shí)時(shí)驗(yàn)證數(shù)據(jù)的合法性和完整性，提高用戶體驗(yàn)和交互性。同時(shí)，也可以在用戶提交表單后，使用AJAX技術(shù)實(shí)現(xiàn)數(shù)據(jù)的異步處理和返回結(jié)果，減少用戶等待時(shí)間。AJAX技術(shù)在表單中應(yīng)用PART07動態(tài)網(wǎng)站開發(fā)基礎(chǔ)知識動態(tài)網(wǎng)站指的是能夠根據(jù)用戶請求和交互，實(shí)時(shí)生成和展示內(nèi)容的網(wǎng)站。與靜態(tài)網(wǎng)站相比，動態(tài)網(wǎng)站具有更高的靈活性和交互性。動態(tài)網(wǎng)站定義動態(tài)網(wǎng)站的工作原理主要包括用戶請求、服務(wù)器處理、數(shù)據(jù)庫交互和動態(tài)內(nèi)容生成等步驟。當(dāng)用戶訪問動態(tài)網(wǎng)站時(shí)，服務(wù)器會接收請求并根據(jù)請求內(nèi)容從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后動態(tài)生成網(wǎng)頁內(nèi)容并返回給用戶。工作原理動態(tài)網(wǎng)站原理簡介數(shù)據(jù)庫連接和配置方法數(shù)據(jù)庫連接在Dreamweaver中，可以通過定義數(shù)據(jù)源（DSN）或使用ODBC驅(qū)動程序來連接數(shù)據(jù)庫。連接數(shù)據(jù)庫后，可以在網(wǎng)頁中嵌入SQL語句或使用服務(wù)器端腳本來與數(shù)據(jù)庫進(jìn)行交互。配置方法配置數(shù)據(jù)庫連接需要指定數(shù)據(jù)庫類型、服務(wù)器地址、用戶名和密碼等信息。在Dreamweaver中，可以通過“數(shù)據(jù)庫”面板來管理數(shù)據(jù)庫連接和執(zhí)行相關(guān)操作。PHP語言簡介PHP是一種廣泛應(yīng)用的服務(wù)器端腳本語言，特別適合用于Web開發(fā)。它具有語法簡單、功能強(qiáng)大和跨平臺等特點(diǎn)。在Dreamweaver中使用PHPDreamweaver提供了對PHP語言的良好支持，可以在網(wǎng)頁中直接編寫PHP代碼，并通過內(nèi)置的PHP函數(shù)和工具來提高開發(fā)效率。同時(shí)，Dreamweaver還支持與MySQL等數(shù)據(jù)庫的集成，方便進(jìn)行動態(tài)網(wǎng)站開發(fā)。PHP語言在Dreamweaver中運(yùn)用ASP支持情況ASP（ActiveServerPages）是微軟開發(fā)的服務(wù)器端腳本技術(shù)，可以在Window