網站維護與網頁制作主講：康梅娟第2講使用Dreamweaver制作網站2.1Dreamweaver基礎操作2.2模板、多媒體元素和書簽超鏈接的使用2.3圖像熱區、CSS樣式的應用2.4圖層的使用2.5創建時間軸動畫2.6表單的應用2.7框架的應用2.8使用行為講解提綱大任務制作“空谷幽蘭”的網站的靜態部分，包括扉頁、首頁、照片、音樂、視頻、動畫、文章、粉絲、北京粉絲、西安粉絲和濟南粉絲共11個靜態頁面。站點的創建和管理網頁的創建和編輯使用表格布局網頁在網頁中插入文本、圖像和影片超鏈接的使用2.1Dreamweaver基礎操作任務1制作“扉頁”和“首頁”一、站點的創建和管理１．創建站點1.創建站點-續注意:（1）可以創建多個站點（2）打開某個站點的方法“站點”|“管理站點”，選擇站點，單擊“完成”“文件”面板中的站點下拉列表（3）同一個站點只需創建1次，以后編輯時只需打開編輯即可（裝了還原卡的機子除外）2.站點的管理（1）新建文件（2）新建文件夾2.站點的管理-續（3）文件夾和文件的移動、復制、刪除或重命名（4）打開文件：雙擊文件名二、網頁的創建和編輯1.網頁的創建在“文件”面板的站點中創建從啟動頁面創建文件|新建2.網頁的編輯（1）打開網頁：文件|打開或者在“文件”面板中雙擊要編輯的文件名稱。（2）保存網頁：文件|保存；文件|另存為。（3）預覽網頁：按“F12”鍵；文件|在瀏覽器中預覽|iexpore；單擊“文檔”工具欄的【在瀏覽器中預覽/調試】按鈕，并在彈出的下拉菜單中選擇【預覽在iexpore】命令。2.網頁的編輯-續（4）設置網頁標題（5）設置“上邊距”為0：修改|頁面屬性（6）添加/刪除字體：選擇“字體”下拉列表的最后一項“編輯字體列表…”，打開“編輯字體列表”對話框。三、使用表格布局網頁在設計網頁中，表格不僅可以羅列數據，更重要的是可以用來控制網頁的布局。通常，新建網頁后，要先在網頁中插入表格，再將其它網頁元素插入到表格的單元格中。網頁布局的３種解決方案：表格、框架、圖層。1.表格的3種視圖(1)標準視圖：設計規律、簡單表格(2)擴展視圖：定位元素、放光標(3)布局視圖：設計復雜、無規律表格2.創建表格（1）插入表格（2種方法）單擊“插入”|“表格”命令單擊“常用”面板中的“表格”按鈕（2）表格屬性面板填充：指定單元格的內容和單元格邊框間的距離，單位是像素。間距：相鄰單元格間的距離，單位是像素。（2）表格屬性面板-續

清除表格的列寬將表格寬度轉換成像素將表格寬度轉換成百分比清除表格的行高將表格高度轉換成像素將表格高度轉換成百分比（3）為表格輸入數據在表格的單元格中，可以插入文本、圖片、超鏈接、表單、動態組件等元素，也可以插入嵌套表格。3.編輯表格（1）選中整張表格方法1:使用<table>標記方法2:單擊表格任意位置，按兩次Ctrl+A方法3：單擊表格左上角（2）選中表格行方法1：拖動鼠標從左至右方法2：把鼠標移至要選定的行的行首，鼠標會變成粗黑箭頭，單擊左鍵，選定行方法3：使用<tr>標記（3）選中表格列方法1：拖動鼠標從上至下方法2：把鼠標移至要選定的列的列首，鼠標會變成粗黑箭頭，單擊左鍵，選定列（4）選中單元格方法1：單擊某個單元格方法2：使用<td>標記（5）添加行或列修改|表格|插入行修改|表格|插入列修改|表格|插入行或列（6）刪除行或列修改|表格|刪除行修改|表格|刪除列（7）合并單元格方法1：修改|表格|合并單元格方法2：屬性面板上的“合并單元格”按鈕（8）拆分單元格方法1：修改|表格|拆分單元格方法2：屬性面板上的“拆分單元格”按鈕小結表格的應用技巧：外圍表格寬度：780像素內嵌表格寬度：百分比每一個版塊都用一個單獨的表格靈活運用嵌套表格四、在網頁中插入文本、圖像和影片1.插入文本（1）插入特殊字符：插入|HTML|特殊字符（2）插入日期：插入|日期（3）插入水平線：插入|HTML|水平線（4）空格符的鍵入：切換到全角中文進行輸入（5）換行符：shift+Enter（6）段落標識符：Enter（7）文本的屬性面板2.插入圖像（1）插入圖像：插入|圖像或單擊“常用”子面板上的【圖像】按鈕（2）設置圖像屬性3.插入滾動字幕（1）選中滾動字幕內容（2）單擊“插入”|“標簽”（3）選擇“html標簽”中的marquee，單擊“插入”，單擊“關閉”（4）選中marquee標簽，在“標簽檢查器”面板的“屬性”選項卡中設置屬性Behavior:設置字幕運動方式Direction:設置字幕滾動方向Scrollamount:設置字幕滾動速度3.插入滾動字幕-續Scrolldelay:設置字幕滾動時停頓的時間，單位為毫秒。如果要讓滾動看起來流暢，數值應該盡量小。Loop:設置字幕滾動次數，默認值為無限，“-1”也為無限。打開行為面板，添加兩個行為：onMouseOver:this.stop()設置鼠標移動到滾動字幕時的動作為停止滾動。onMouseOut：this.start()設置鼠標離開滾動字幕時的動作為開始滾動。4.插入Flash影片方法1：插入|媒體|Flash方法2：常用面板|“媒體”按鈕插入透明Flash五.超鏈接的使用1.超鏈接的概念超鏈接是指從起始端點到目標端點的一個跳轉。超鏈接的鏈接目標可以是1個網頁、1張圖片、1首歌曲、1個office文檔、1個程序等；超鏈接的鏈接目標可以是本機上的1個任意的文件，也可以是其它服務器上的1個URL，或者是某個網頁中的具體位置。2.超鏈接路徑（1）絕對路徑使用完整URL,如：http://（2）相對路徑鏈接的文件相對于當前網頁的路徑。注意：鏈接站點內部的文件最好采用相對路徑。3.創建超鏈接（1）創建頁面鏈接（2）創建電子郵件鏈接（1）創建頁面鏈接選中文本或圖像，在其屬性面板的“鏈接”后設置。打開目標網頁的方式_blank：在新的瀏覽器窗口中打開_parent：在父框架或上級窗口中打開_self：在同一框架或本窗口中打開_top：在頂層框架中打開（2）創建Email鏈接選中載體；插入|電子郵件鏈接，或在屬性面板的“鏈接”后輸入：mailto:電子郵箱地址模板的使用在網頁中插入音頻、視頻在網頁中插入圖像查看器書簽超鏈接的使用2.2模板、多媒體元素和書簽超鏈接的使用任務2制作照片、音樂、視頻、動畫、文章頁面。一、模板的使用什么是模板？為什么要使用模板？如何使用模板？使用模板舉例小結一、模板的使用什么是模板？模板是一種特殊類型的文檔，用于設計“固定的”頁面布局；然后用戶便可以基于模板創建文檔，創建的文檔會繼承模板的頁面布局。設計模板時，可以指定在基于模板的文檔中哪些內容是用戶“可編輯的”。一、模板的使用為什么要使用模板？減少重復勞動使相關的網站頁面風格保持一致創建1次可套用多次可以一次更新多個頁面

一、模板的使用如何使用模板？使用模板的前提：首先要將網站作為Dreamweaver管理的一個站點。使用模板的思路：通常制作模板文件時，只把導航條和標題欄等各個頁面共有的部分制作出來，而把其他部分留給各個頁面安排設置具體內容。制作模板文件與制作普通的網頁的方法是相同的，但是在制作模板文件時，必須設置好“頁面屬性”，指定好“可編輯區域”。使用模板的步驟（1）編輯將要作為模板的頁面。（2）生成模板：文件|另存為模板，將（1）保存為模板頁，注意選擇站點和設置模板文件名。（3）編輯模板：打開模板頁，插入|模板對象|可編輯區域，可編輯區域可有多個。（4）用模板生成頁面：文件|新建，選擇“模板”中的（2）保存的模板頁。編輯可編輯區域。（5）修改模板內容與更新站點文件。4.使用模板舉例（1）制作照片模板photo.dwt(2)套用photo.dwt制作“照片”頁面小結使用模板的好處使用模板的前提使用模板的思路使用模板的步驟二、插入音頻、視頻

方法：插入|媒體|插件切換到代碼視圖，設置相關屬性。

autostart=“true”，自動播放Loop=“true”,循環播放三.插入圖像查看器（1）準備好用到的圖片（尺寸相同）（2）插入|媒體|圖像查看器（3）為生成的flash文件設置保存路徑和名稱（4）在Flash元素面板中設置相關參數bgColor:背景顏色。captionColor:圖片的標題顏色。captionFont:圖片的標題字體。captionSize:圖片的標題字體大小。frameColor:邊框顏色。frameShow:是否顯示邊框。frameThickness:邊框寬度。imageCaption:圖片標題。三.插入圖像查看器-續imageLinks:為每張圖片設置鏈接。imageLinkTarget:設置打開鏈接網頁的方式。imageURLs：選擇圖片源文件。showControls:是否顯示控制臺slideAutoPlay:是否自動播放slideDelay:圖片播放的延遲時間。slideLoop:是否循環播放。title：圖像查看器的標題。titleColor:標題顏色。titleFont:標題字體titleSize:標題字體大小。transitionType:圖片切換的模式。四、書簽超鏈接的使用先定義書簽：光標定位在跳轉的目標位置前；插入|命名錨記創建超鏈接指向書簽：文件名#書簽名稱如果是當前網頁，文件名可省略。圖像熱區的使用CSS樣式的使用2.3圖像熱區、CSS樣式的應用任務3制作粉絲、北京粉絲、西安粉絲和濟南粉絲頁面；使用CSS樣式格式化所有靜態頁面。一、圖像熱區的使用圖像熱區是在一幅圖像中劃分出幾個不同的幾何圖形區域，然后分別為這些區域建立超鏈接。創建圖像熱區的步驟：插入圖像并選中；在屬性面板上選擇熱區工具并在圖像上繪制熱區選定熱區，在屬性面板中設置鏈接目標二、CSS樣式的使用CSS樣式的概念CSS樣式的三種存在方式直接插入式內嵌樣式CSS樣式的類型CSS樣式定義外部文件方式小結二、CSS樣式的使用1.CSS樣式的概念

CSS，翻譯為“層疊樣式表”，主要用來進行頁面風格設計。利用CSS不僅可以控制一個頁面中的元素格式，而且可以控制多個頁面中的元素格式。2.CSS樣式的三種存在方式根據作用范圍不同，CSS樣式有三種存在方式：（1）直接插入式（2）內嵌樣式（3）外部文件方式3.直接插入式作用：僅對所定義的標記起作用。用法：代碼視圖下，在標記中插入style屬性。格式：<標記style="屬性:屬性值;屬性:屬性值;…">如：<hrstyle="color:#FF0000;height:10px"/>注意：basefont、param、script不能使用style屬性。觀看示例4.內嵌樣式（1）用法：定義在<head>和</head>之間，其范圍僅限于本網頁。（2）格式：<styletype=“text/css”><!--選擇符1{屬性:屬性值;屬性:屬性值…}選擇符2{屬性:屬性值;屬性:屬性值…}…選擇符n{屬性:屬性值;屬性:屬性值…}--></style>觀看示例:未格式觀看示例：套用格式后（3）使用內嵌樣式的方法寫代碼：先在<head>和</head>之間添加style代碼，然后在具體的標記中應用樣式。使用CSS樣式面板(需掌握)。*1.窗口|css樣式*2.新建css規則*3.設置樣式類型，定義在“僅對該文檔”*4.設置規則*5.選中元素，套用樣式（在屬性面板的“樣式”或“類”下拉列表中選擇樣式名稱或在css樣式面板中右擊相應的樣式名稱選擇“套用”。）（4）使用內嵌樣式舉例舉例.xiaobiaoti（類）

、p（標簽）.xiaobiaoti:宋體、18px、粗體、#4E6735、文本對齊（居中）、空格保留，定義在當前文檔。p：宋體、14px、行高20px、黑色、左對齊、文字縮進28px，定義在當前文檔。5.CSS樣式的類型（1）類：根據用戶的需要創建一個CSS樣式屬性，可應用到文字，圖片等網頁元素中；樣式的名稱必須以“”開頭。先定義后套用。（2）標簽：重定義HTML標記的默認格式。只需定義，使用到該標記時會自動套用格式。（3）高級：為某個標記組合定義樣式，可用于定義超鏈接的4種狀態的樣式。只需定義，使用到該標記時會自動套用格式。CSS樣式舉例

.image（類）:方框寬80px，高150px高級:A:link

（文本超鏈接）：宋體、16px、黑色、無修飾A:active

（激活超鏈接）:宋體、16px、#FF0000、刪除線A:hover

（鼠標懸停在超鏈接）：華文行楷、16px、#4A37AB、下劃線A:visited

（訪問過的超鏈接）：宋體、16px、黑色、無修飾

6.CSS樣式定義（1）類型：設置文本或段落的樣式（2）背景：設置元素的背景色或背景圖像（3）區塊：設置元素的對齊方式、放置位置（4）方框：控制元素在頁面上的放置方式，如圖片、表格的大小，表格的填充，頁面的邊界等。（5）邊框：定義元素周圍的邊框的設置（如表格的邊框的寬度、顏色和樣式）。

6.CSS樣式定義-續（6）列表：設置列表（如項目符號列表、編號列表）的樣式（7）定位：定義層的默認顯示樣式。（8）擴展：包括過濾器、分頁和光標選項。對樣式所控制的對象應用特殊效果可提供分頁設置改變指針圖像7.外部文件方式（1）作用：可在每個網頁中引用，可使整個網站的網頁在風格上保持一致。（2）用法：將css寫成一個文件的方式，在網頁頭部引用該文件。注意：樣式表文件的擴展名為.css。應用格式前應用格式后（3）使用外部文件方式的方法（需掌握）*1.新建css規則時，定義在“新建樣式表文件”或已有的樣式表文件*2.打開需應用樣式的網頁，單擊“附加樣式表”按鈕*3.選擇樣式表文件*4.鏈接或導入*5.“類”樣式需手工套用，“標簽”和“高級”自動套用（4）使用外部文件方式舉例.dabiaoti：宋體、36px、粗體、黑色、垂直居中、水平居中，定義在style.css中。body：在“背景”中設置背景圖像，在“方框”中設置“上邊界”為0，定義在style.css中。小結統一整個站點風格，用外部文件樣式；統一某個網頁風格，用內嵌樣式；調整網頁內部某個標記時，用直接插入式。三種樣式可在同一網頁中同時使用，如果其設置的樣式發生沖突，則按優先級起作用。優先級別：直接插入式>內嵌樣式>外部文件方式2.4圖層的使用圖層可用于網頁布局圖層可放在網頁中的任意位置圖層中可以插入任意元素圖層可以移動、重疊、顯示或隱藏使用圖層，可以制作出三維效果圖層和時間軸配合，可以制作動畫圖層應用實例-三維效果觀看頁面1創建層插入層：“插入”|“布局對象”|“層”繪制層：“布局”面板|“描繪層”按鈕單擊“描繪層”按鈕后，按下【Ctrl】鍵不放，可連續繪制多個層。2.層重疊

在層控制面板上將“防止重疊”選項取消選中，可創建重疊的層。否則，將無法創建重疊的層。層的最大優勢之一就是可以重疊，層的重疊次序是用“z軸”來表示?！皕軸”上的值可正可負，也可為0，數值大的層在上面。

3.層嵌套

先在文檔中插入一個層。將光標置于該層內，然后“插入”|“布局對象”|“層”4選擇層單擊層的激活標志。單擊【窗口】|【層】命令，打開“層”面板，在“層”面板中單擊層的名稱，這種方法也適用于選擇隱藏的層。

單擊層邊界，按住【Shift】可以同時選定多個層。在層面板中單擊層的名稱，按住【Shift】可以同時選定多個層。5插入層對象當光標移入層內時，可以插入網頁元素，如文本、圖像、層、表單、表格等。在層中插入網頁元素的方法與在編輯窗口中插入方法一樣。6移動層選定層，按住鼠標左鍵不放拖動。選定層，按鍵盤上的四個方向鍵，每按一次，移動1個像素，如果同時按住【Shift】鍵，每次可移動10個像素的距離。

7對齊層層的對齊方式包括左對齊、右對齊、頂端對齊和底部對齊。執行對齊方式后，各層將以最后一個選定的層為基準對齊。先按住“Shift”鍵的同時用鼠標選擇層，然后單擊菜單【修改】|【對齊】中相應的對齊方式或按“Ctrl+相應的方向”鍵。8設置層屬性單個層的屬性

“層編號”：層的名稱，具有唯一性。“左”和“上”：層相對于頁面或父層的左上角相對位置?！皩挕焙汀案摺保簩拥膶挾群透叨?，如果層中內容超過指定大小，這些值被忽略?！癦軸”：層的重疊順序。編號大的層出現在編號小的層上面。單個層的屬性“可見性”：層的初始顯示狀態，包括顯示Defaule（默認）、繼承Inherit、可見Visible、隱藏Hidden四種?！氨尘皥D像”：指定背景圖像。“背景顏色”：指定背景顏色。

多個層的屬性當選中多個層時，層屬性面板將顯示文本屬性和普通層屬性的子集，它可以允許一次修改多個層。

9層的應用在網頁設計中，層能方便地定位頁面元素、顯示或隱藏網頁中的一些內容。層除了象表格一樣可以設定背景、設定位置、自由移動、控制顯示外，還可以輕松建立三維效果，我們可以使網頁中的對象在垂直方向互相重疊，再配合時間軸的應用做出既美觀又具有動感效果的網頁。

圖層的應用-背景音樂插入1個圖層在圖層中插入插件（插入|媒體|插件）設置插件能夠自動播放設置圖層的可見性為hidden補充：插入flash按鈕在插入之前，必須先保存網頁插入|媒體|Flash按鈕插入后會自動生成一個.swf文件另存為：設置生成的swf文件存放路徑，如：flash\enter.swf，注意“\”的方向注意：flash按鈕的存放路徑（在磁盤上的完整路徑）中不允許有中文目錄名。補充：插入flash按鈕選中flash按鈕，單擊屬性面板上的“播放”，可觀看效果；如要更改設置，如更改按鈕的樣式，可單擊屬性面板上的“編輯”按鈕。2.5創建時間軸動畫時間軸是一種用來控制網頁中的層在每一秒的位置的工具。它通過在不同的時間改變層的位置、大小、可見性或疊放順序等來創建動畫。用時間軸做動畫可以滿頁飛,依賴時間軸設計的動畫是建立在圖層基礎上的。

1時間軸控制面板Dreamweaver提供時間軸面板，用來設置和控制時間軸動畫。要打開和關閉時間軸面板，按“Alt+F9”鍵或單擊菜單【窗口】|【時間軸】命令。

2創建時間軸動畫直線運動動畫簡單曲線運動動畫復雜曲線運動動畫使用時間軸改變圖像屬性使用時間軸改變圖層屬性直線運動動畫插入1個圖層，在圖層中放置元素（輸入文本或插入圖像等）ALT+F9，打開時間軸面板選中圖層，按住鼠標左鍵不放，將其拖動到時間軸的某一條動畫通道中；或右擊，在彈出菜單中選擇“添加到時間軸”分別在起始關鍵幀、結束關鍵幀處將圖層拖動到所需的位置選擇“自動播放”和“循環”簡單曲線運動動畫先完成直線運動動畫的制作（參照上頁）在起始關鍵幀和結束關鍵幀之間選擇1幀，如第8幀，右擊，選擇“增加關鍵幀”，然后在該幀處將圖層拖動到所需位置。如需要，可重復第步。復雜曲線運動動畫-記錄路徑插入1個圖層，在圖層中放置元素（輸入文本或插入圖像等）ALT+F9，打開時間軸面板選中圖層，單擊“修改”|“時間軸”|“錄制層路徑”，將鼠標指針移到圖層左上角的標志處，變成“+”后，按住左鍵不放并拖動繪制1條封閉曲線（運動軌跡）。選擇“自動播放”和“循環”使用時間軸改變圖像屬性插入圖像1，如aoyun1.jpgALT+F9，打開時間軸面板選中圖像，按住鼠標左鍵不放，將其拖動到時間軸的某一條動畫通道中用鼠標拖動動畫條右端的結束關鍵幀標記，將第15幀拖動到第45幀在第15、30幀處分別右擊，選擇“增加關鍵幀”使用時間軸改變圖像屬性在第15幀處，選中圖像，單擊其屬性面板中“源文件”文本框右邊的“瀏覽”按鈕，更換1張圖像，如aoyun2.jpg在第30幀處，將圖像的源文件更換為aoyun3.jpg，操作步驟同第步。選擇“自動播放”和“循環”。注意：該動畫不需要用圖層。使用時間軸改變圖層屬性插入圖層，為圖層設置背景圖像，如fj.jpg，將圖層的寬度設置為1像素，高度設置為背景圖像的高度ALT+F9，打開時間軸面板選中圖層，按住鼠標左鍵不放，將其拖動到時間軸的某一條動畫通道中；或右擊，在彈出菜單中選擇“添加到時間軸”在結束關鍵幀處將圖層寬度調整為背景圖像的寬度選擇“自動播放”和“循環”練習鳥群的變化繞復雜曲線運動的變換圖像動畫2.6表單的應用認識表單創建表單網頁的步驟添加表單對象檢查表單表單標簽引言表單的作用是獲取web站點訪問者的信息，實現用戶和服務器之間的交互。搜集用戶的個人資料信息、訂單信息等，都要用表單來搜集，然后將搜集到的信息提交給服務器來處理。一.認識表單表單是由文本和表單控件組成的，用戶在表單中鍵入或選擇相關的信息，單擊“提交”按鈕將信息傳給服務器，由服務器處理收集到的信息，并將信息保存到特定文件中。一個完整的表單包含表單對象和表單處理程序兩部分。表單對象用來收集用戶信息，表單處理程序負責向服務器提交表單。只有將表單與某個表單處理程序關聯之后，才能實現該表單功能。一個網頁中可以有多個表單，但一個表單中不能再嵌入表單。二.創建表單網頁的步驟(1)插入表單(2)在表單中插入表格(3)在表格中插入說明性文字和表單域三.添加表單對象插入表單的2種方法：插入|表單|“相應的表單對象”命令單擊表單面板上的相應按鈕表單的屬性面板動作：指定表單處理程序所在的文件，可以是一個網址，也可以使用以mailto:為前綴的郵件地址，將表單數據發到指定的郵箱。方法：表單數據傳輸到服務器的方法。post：傳遞大量數據、安全性高Get:傳遞少許數據，安全性低2.添加文本域（1）文本域的類型：單行文本域：輸入短數據多行文本域：輸入較長文本密碼域：輸入密碼（2）文本域的屬性面板字符寬度：允許顯示的字符數最多字符數：允許輸入的字符數初始值：默認的顯示文字3.添加單選按鈕組Label:選項內容布局：按鈕組的外觀風格。表格，表格式的單列表；換行符，沒有表格線的單列表。4.添加復選框復選框的屬性面板初始狀態：初始選中狀態選定值：選中復選框后控件代表的值5.添加按鈕“按鈕”屬性面板標簽：按鈕上的顯示文字動作：提交表單，用來提交表單數據；重設表單，用來取消表單輸入內容，重新輸入；無，根據處理腳本執行相應操作。6.添加列表框類型：設置列表框外觀。菜單，顯示為下拉列表框；列表，顯示為帶滾動條的平鋪列表框。列表值：設置列表項目。初始化時選定：設置列表框中初始值允許多選7.添加文件域使用文件域時要求將表單的方法設置為post。四、檢查表單可以為表單或文本域添加行為，用來檢查指定文本域的內容是否符合規定，以確保用戶輸入的正確性。五、表單標簽<form>表單內容</form>小結表單的概念表單的作用創建表單網頁的步驟表單的插入和屬性設置常用表單域的插入和屬性設置2.7用框架布局頁面框架也是一種設計網頁布局的技術?？蚣軐⒁粋€瀏覽器窗口劃分為多個區域，每個區域顯示不同的網頁內容。一組框架構成的網頁被稱為一個框架集。框架集是一個網頁，用來存儲頁面的框架結構，包括框架的大小和位置信息等。可把它看作是容器。其中，每一個框架都對應一個頁面文件。在框架集中，一般情況下，可以用其中的一個框架來保持網頁中固定的內容，如網頁大標題、導航菜單等，用一個框架來展現所選擇的網頁內容。1.創建框架和框架集插入預定義框架集在“布局”面板上單擊“框架”按鈕，在下拉菜單中選一個框架集樣式。1.創建框架和框架集用戶自己設計框架集上下拖框架集的邊框左右拖框架集的邊框拖動框架集的邊框角修改|框架集2.選定框架和框架集用鼠標選中框架或框架集按下Alt鍵，單擊欲選中的框架的任意位置利用框架面板選中單擊框架內的任意位置，可選定框架單擊框架面板四周的邊框，可選定框架集3.設置框架邊框的顯示和隱藏查看|可視化助理|框架邊框4.刪除框架和框架集刪除框架，將該框架邊框拖到父框架的邊框上或拖離頁面刪除框架集，要么不保存，要么刪除該框架集文件。5.框架和框架集屬性面板（1）“框架集”屬性面板邊框邊框寬度邊框顏色值和單位5.框架和框架集屬性面板（2）“框架”屬性面板框架名稱源文件邊框和邊框顏色滾動不能調整大小邊界寬度和邊界高度6.保存框架和框架集一個包含n個框架的框架頁所包含的網頁個數為n+1。在保存時，需要將其保存成n+1個不同的文件。命名框架中的各個網頁時，要做到見名知意。6.保存框架和框架集（1）保存框架集文件|保存框架頁如果框架集文件是主頁，需保存為index.htm（2）保存框架文件|保存全部7.在框架中插入文本、圖像和表格直接在每個框架中插入直接編輯某框架對應的頁面文件2.8使用行為行為，是將JavaScript代碼放置在文檔中，使訪問者能夠與網頁進行交互，從而以多種方式更改頁面或執行某些任務。行為由事件和該事件觸發的動作兩部分組成。事件指示網頁的訪問者執行了某種操作，