第4章頁面布局設(shè)計(jì)..ppt

第4章頁面布局設(shè)計(jì) 主要內(nèi)容表格 層 框架的有關(guān)概念使用表格布局網(wǎng)頁使用層布局網(wǎng)頁使用框架布局網(wǎng)頁 4 1使用表格進(jìn)行頁面布局 表格是進(jìn)行頁面布局最常用的工具 它既可以用可見表的形式在網(wǎng)頁中呈現(xiàn)表格式數(shù)據(jù) 也可以僅起布局作用 準(zhǔn)確定位文本及圖形元素 但二者在本質(zhì)上是一致的 都是通過設(shè)計(jì)編輯表格 將頁面元素在單元格中呈現(xiàn)出來 前者通常有表格線 后者通常會(huì)把表格線隱藏起來 作用都是在布局頁面元素 使用表格進(jìn)行頁面布局主要包括三方面的操作 即設(shè)計(jì)創(chuàng)建表格 編輯表格 在表格中插入管理網(wǎng)頁元素 通常 在一個(gè)Web頁面中有多個(gè)表格 甚至在表格的單元格中還會(huì)嵌入另外的表格 4 1使用表格進(jìn)行頁面布局 創(chuàng)建表格 1 插入表格Dreamweaver使用插入欄或插入菜單來創(chuàng)建一個(gè)新表格 具體步驟如下 在文檔窗口的 設(shè)計(jì) 視圖中 將插入點(diǎn)放在需要表格的位置 單擊插入欄 常用 類別中的 表格 按鈕 或選擇 插入 表格 菜單 出現(xiàn) 表格 對(duì)話框 按需要設(shè)置表格參數(shù) 單擊 確定 按鈕后完成表格的創(chuàng)建 4 1使用表格進(jìn)行頁面布局 創(chuàng)建表格 關(guān)于 表格 對(duì)話框參數(shù)的說明 表格大小 參數(shù)行數(shù) 確定表格具有的行的數(shù)目 列數(shù) 確定表格具有的列的數(shù)目 表格寬度 以像素為單位或按占瀏覽器窗口寬度的百分比指定表格的寬度 單元格邊距 單元格邊框和單元格內(nèi)容之間的像素?cái)?shù) 單元格間距 相鄰的單元格之間的像素?cái)?shù) 邊框粗細(xì) 以像素為單位指定表格邊框的寬度 頁眉 參數(shù) 輔助功能 參數(shù) 4 1使用表格進(jìn)行頁面布局 創(chuàng)建表格 2 導(dǎo)入Excel表格Dreamweaver能夠?qū)xcel表格到當(dāng)前文檔中 并自動(dòng)設(shè)置為Dreamweaver表格的格式 操作步驟如下 去定要導(dǎo)入表格的位置 選擇 文件 導(dǎo)入 Excel文檔 菜單 顯示 導(dǎo)入Excel文檔 對(duì)話框 瀏覽選擇要導(dǎo)入的文件 按 打開 按鈕 即導(dǎo)入到當(dāng)前Dreamweaver文檔中 4 1使用表格進(jìn)行頁面布局 表格的編輯 1 選擇表格元素 選擇整個(gè)表格 單擊表格的左上角或者單擊右邊或底部邊緣的任意位置 選擇行或列 首先定位鼠標(biāo)指針使其指向行的左邊緣或列的上邊緣 當(dāng)鼠標(biāo)指針變?yōu)檫x擇箭頭時(shí) 單擊選擇行或列 當(dāng)拖動(dòng)時(shí)將選擇多個(gè)行或列 選擇一個(gè)單元格 在單元格中單擊鼠標(biāo) 將選中該單元格 選擇矩形的單元格塊 將鼠標(biāo)從一個(gè)單元格拖到另一個(gè)單元格 選擇不相鄰的單元格 按住Ctrl鍵的同時(shí)單擊要選擇的單元格 行或列 將選中多個(gè)單元格 如果它已經(jīng)被選中 則再次單擊會(huì)將其從選擇中刪除 4 1使用表格進(jìn)行頁面布局 表格的編輯 2 設(shè)置表格和單元格的格式通過設(shè)置表格及表格單元格的屬性 可以方便的設(shè)置表格和單元格的格式 選中整個(gè)表格時(shí)屬性檢查器顯示當(dāng)前表格的屬性 只選中單元格時(shí) 屬性檢查器顯示選中單元格的屬性 對(duì)屬性檢查器的修改 只適用于當(dāng)前選定的元素 若要設(shè)置表格中文本的格式 可以對(duì)所選的文本應(yīng)用格式設(shè)置或使用樣式 4 1使用表格進(jìn)行頁面布局 表格的編輯 3 調(diào)整表格的大小 通過拖動(dòng)選擇控制點(diǎn)可以調(diào)整整個(gè)表格或單個(gè)行和列的大小 當(dāng)調(diào)整整個(gè)表格的大小時(shí) 表格中的所有單元格按比例更改大小 如果表格的單元格指定了明確的寬度或高度 則調(diào)整表格大小將更改 文檔 窗口中單元格的可視大小 但不更改這些單元格的指定寬度和高度 通過更改屬性檢查器的高度和寬度值 也可以調(diào)整表格元素的大小 4 1使用表格進(jìn)行頁面布局 表格的編輯 4 更改列寬和行高 拖動(dòng)列或行的邊框 更改表格列寬或行高 當(dāng)鼠標(biāo)移動(dòng)到邊框線上變成十字箭頭形狀 時(shí) 按下鼠標(biāo)拖動(dòng)邊框線 即可更改相應(yīng)的列寬和行高 使用屬性檢查器更改列寬和行高 選中表格的行或列 在屬性檢查器中修改行高和列寬的值 相應(yīng)的行高和列寬將會(huì)調(diào)整 4 1使用表格進(jìn)行頁面布局 表格的編輯 5 插入 刪除行或列 通過選定行或列來確定操作的位置 然后使用 修改 表格 菜單 進(jìn)行插入刪除操作 若要?jiǎng)h除完整的行或列 在選擇后直接按Delete鍵 整個(gè)行或列將從表格中刪除 4 1使用表格進(jìn)行頁面布局 表格的編輯 6 和并拆分單元格 合并單元格選定合并單元格后 使用屬性檢查器左下角的工具 或選擇 修改 表格 合并單元格 則選定的單元格合并為一個(gè)單元格 拆分單元格單元格可以拆分行或拆分為列 步驟如下 選定要拆分的單元格 使用屬性檢查器左下角的工具 或選擇 修改 表格 拆分單元格 在出現(xiàn)的 拆分單元格 對(duì)話框確定拆方式 并進(jìn)一步給定拆分個(gè)數(shù) 4 1使用表格進(jìn)行頁面布局 表格的編輯 7 嵌套表格嵌套表格是放置在另一個(gè)表格的單元格中的表格 可以象對(duì)其他任何表格一樣對(duì)嵌套表格進(jìn)行格式設(shè)置 選定單元格后 在單元格中施行插入表格操作 即生成嵌套表 4 1使用表格進(jìn)行頁面布局 利用表格布局頁面 用表格布局頁面一般經(jīng)過如下步驟 頁面分析 針對(duì)頁面要展現(xiàn)的內(nèi)容 進(jìn)行頁面導(dǎo)航和頁面展示內(nèi)容的布局設(shè)計(jì) 確定頁面整體布局 頁面區(qū)域劃分 根據(jù)頁面的整體布局和頁面功能 劃分頁面的區(qū)域 表格設(shè)計(jì) 根據(jù)頁面區(qū)域劃分情況 設(shè)計(jì)頁面中的表格 確定表格數(shù)目 表格功能 表格位置 表格格式等內(nèi)容 插入編輯表格 選定位置 插入有關(guān)表格 并設(shè)定表格的格式 在表格中插入 編輯頁面元素 在這個(gè)過程中 通常會(huì)對(duì)表格進(jìn)行一定的格式調(diào)整 進(jìn)行頁面的整體調(diào)整 和頁面屬性設(shè)置 4 1使用表格進(jìn)行頁面布局 利用表格布局頁面 示例 用表格技術(shù)對(duì) 五岳覽勝 網(wǎng)頁作進(jìn)一步設(shè)計(jì) 生成如圖4 14所示的網(wǎng)頁 4 2利用布局表格對(duì)頁面布局 進(jìn)行頁面布局的一種常用的方法是使用HTML表格對(duì)元素進(jìn)行定位 但是 有的頁面使用HTML表格進(jìn)行布局時(shí)不太方便 會(huì)使布局過程復(fù)雜化 為了簡(jiǎn)化使用表格進(jìn)行頁布局的過程 Dreamweaver提供了布局視圖 在布局視圖中 可以使用表格作為基礎(chǔ)結(jié)構(gòu)設(shè)計(jì)頁面 避免了使用傳統(tǒng)的方法創(chuàng)建時(shí)經(jīng)常出現(xiàn)的一些問題 例如 在布局視圖中可以在頁面上方便地繪制布局單元格 然后將這些單元格移動(dòng)到所需的位置 還可以方便地創(chuàng)建固定寬度的布局和自動(dòng)伸展為整個(gè)瀏覽器窗口寬度的布局等 4 2利用布局表格對(duì)頁面布局 布局表格的三種模式 1 布局模式布局模式用于繪制布局表格和布局單元格 是頁面布局設(shè)計(jì)的主要模式 在布局單元格中 可以插入文本 圖像 對(duì)象等網(wǎng)頁元素 2 標(biāo)準(zhǔn)模式標(biāo)準(zhǔn)模式將布局表格轉(zhuǎn)化為HTML常規(guī)表格的形式 從而能夠使用HTML表格的編輯方法對(duì)布局表格進(jìn)行編輯 如拆分單元格 合并單元格 調(diào)整大小 設(shè)定格式等 3 擴(kuò)展表格模式擴(kuò)展表格模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距 并且增加表格的邊框以使編輯操作更加容易 利用這種模式 可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn) 4 2利用布局表格對(duì)頁面布局 布局表格的三種模式 4 三種模式的切換使用以下任何一種方法 都能實(shí)現(xiàn)三種模式的切換 選擇 查看 表格模式 菜單 使用插入欄 布局 類別中的 標(biāo)準(zhǔn) 擴(kuò)展 布局 按鈕進(jìn)行切換 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的繪制 1 繪制布局表格繪制布局表格操作步驟如下 確定正在布局視圖中 單擊插入欄 布局 分類中的 布局表格 按鈕 鼠標(biāo)指針變?yōu)榧犹?hào) 將鼠標(biāo)指針放置在頁上 然后拖動(dòng)指針即創(chuàng)建布局表格 說明 不能在現(xiàn)有內(nèi)容旁邊繪制布局表格 如果當(dāng)前頁上已包含內(nèi)容 則只能在現(xiàn)有內(nèi)容的下方繪制新的布局表格 當(dāng)需要在現(xiàn)有內(nèi)容之下繪制布局表格但是出現(xiàn)禁止繪制鼠標(biāo)指針時(shí) 須重新調(diào)整文檔窗口的大小 以使現(xiàn)有內(nèi)容底部和窗口底部之間產(chǎn)生更多的空白空間 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的繪制 2 繪制布局單元格 切換到布局視圖中 單擊插入欄 布局 分類中的 繪制布局單元格 按鈕 鼠標(biāo)指針變?yōu)榧犹?hào) 將鼠標(biāo)指針放置在開始繪制單元格的位置上 然后拖動(dòng)指針創(chuàng)建布局單元格 若要?jiǎng)?chuàng)建多個(gè)單元格 請(qǐng)按住Ctrl鍵并拖動(dòng)指針來創(chuàng)建每個(gè)布局單元格 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 1 布局表格的調(diào)整和移動(dòng) 調(diào)整布局表格的大小 單擊表格頂部的標(biāo)簽選擇一個(gè)表格 拖動(dòng)選擇控制點(diǎn)即可調(diào)整表格的大小 移動(dòng)布局表格 單擊表格頂部的標(biāo)簽選擇一個(gè)表格 執(zhí)行下列操作之一 將表格拖到頁上的另一個(gè)位置 按箭頭鍵移動(dòng)該表格 每次移動(dòng)1個(gè)像素 在按住Shift鍵的同時(shí)按箭頭鍵移動(dòng)該表格 每次移動(dòng)10個(gè)像素 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 2 布局單元格的調(diào)整和移動(dòng) 選中布局單元格 選中的方法是單擊該單元格的邊緣 或者在按住Ctrl鍵的同時(shí)單擊該單元格中的任何位置 當(dāng)鼠標(biāo)如圖4 31所示狀態(tài)時(shí) 拖動(dòng)即調(diào)整大小 當(dāng)鼠標(biāo)如圖4 32所示狀態(tài)時(shí) 拖動(dòng)即移動(dòng)單元格 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 3 向布局單元格中添加內(nèi)容在布局視圖中可以將文本 圖像和其他內(nèi)容添加到布局單元格中 就象在標(biāo)準(zhǔn)視圖中一樣 但在布局視圖中不能向布局表格的空白 灰色 區(qū)域插入內(nèi)容 因此在添加內(nèi)容之前 必須先創(chuàng)建布局單元格 當(dāng)添加內(nèi)容的寬度大于布局單元格時(shí) 該單元格自動(dòng)擴(kuò)展 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 3 布局表格和布局單元格的格式設(shè)置 布局表格的格式設(shè)置 單擊表格頂部的標(biāo)簽選擇表格 打開屬性檢查器 設(shè)置屬性參數(shù)值 布局表格的主要參數(shù)說明 固定 將表格設(shè)置為固定寬度 單位是像素 自動(dòng)伸展 使表格最右邊的列自動(dòng)伸展 高度 表格的高度 單位是像素 填充 單元格邊距 即布局單元格內(nèi)容和單元格邊框之間的間隔 單位是像素 間距 單元格間距 設(shè)置相鄰布局單元格之間的間隔 單位是像素 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 布局單元格的格式設(shè)置 選擇單元格 打開屬性檢查器 設(shè)置屬性參數(shù)值 主要參數(shù)說明 固定 將單元格設(shè)置為固定寬度 單位是像素 自動(dòng)伸展 使單元格自動(dòng)伸展高度 單元格的高度 單位是像素 背景顏色 布局單元格的背景顏色 水平 設(shè)置單元格內(nèi)容的水平對(duì)齊方式 垂直 設(shè)置單元格內(nèi)容的垂直對(duì)齊方式 不換行 禁止文字換行 4 2利用布局表格對(duì)頁面布局 布局表格和單元格的編輯 3 向布局單元格中添加內(nèi)容在布局視圖中可以將文本 圖像和其他內(nèi)容添加到布局單元格中 就象在標(biāo)準(zhǔn)視圖中一樣 但在布局視圖中不能向布局表格的空白 灰色 區(qū)域插入內(nèi)容 因此在添加內(nèi)容之前 必須先創(chuàng)建布局單元格 當(dāng)添加內(nèi)容的寬度大于布局單元格時(shí) 該單元格自動(dòng)擴(kuò)展 4 2利用布局表格對(duì)頁面布局 設(shè)計(jì)頁面示例 示例 使用布局表格設(shè)計(jì)圖4 35所示 五岳覽勝 頁面 設(shè)計(jì)步驟1 頁面分析2 繪制布局表格和單元格3 調(diào)整布局單元格大小及位置4 插入內(nèi)容 并設(shè)置格式5 預(yù)覽頁面 進(jìn)行細(xì)微調(diào)整 完成頁面設(shè)計(jì) 4 3使用層進(jìn)行頁面布局 層是一種HTML頁面元素 可以將它定位在頁面上的任意位置 層象一個(gè)可移動(dòng)的粘貼板 可以包含文本 圖像或其他任何可在HTML文檔正文中放入的內(nèi)容 利用層可以非常靈活地放置網(wǎng)頁內(nèi)容 網(wǎng)頁制作中層概念的引進(jìn) 為網(wǎng)頁設(shè)計(jì)者提供了強(qiáng)大的網(wǎng)頁控制能力 一個(gè)網(wǎng)頁可以有多個(gè)層 各個(gè)層可以重疊 可以設(shè)定是否可見 是否有子層等等 在Dreamweaver中 層既可以作為一種網(wǎng)頁定位技術(shù)出現(xiàn) 也可以作為一種特效形式出現(xiàn) 4 3 1層的創(chuàng)建 1 創(chuàng)建層 在插入欄的 布局 類別中單擊 繪制層 按鈕 執(zhí)行下列操作之一 拖動(dòng)以繪制一個(gè)層 通過按住Ctrl鍵并拖動(dòng)來連續(xù)繪制多個(gè)層 在選定了插入點(diǎn)后 使用菜單 插入 布局對(duì)象 層 繪制層 4 3 1層的創(chuàng)建 2 層面板在文檔窗口中繪制的每一個(gè)層都會(huì)出現(xiàn)在層面板中 通過層面板可以管理文檔中的層 在層面板 層顯示為按z軸順序排列的名稱列表 先創(chuàng)建的層出現(xiàn)在列表的底部 新創(chuàng)建的層出現(xiàn)列表的頂部 嵌套的層顯示為連接到父層的名稱 單擊加號(hào) 或減號(hào) 圖標(biāo)顯示或隱藏嵌套的層 使用層面板可防止層重疊 更改層的可見性 將層嵌套或?qū)盈B 以及選擇一個(gè)或多個(gè)層 4 3 2層的基本操作 1 選擇層 選擇一個(gè)層 在層面板中單擊該層的名稱或單擊一個(gè)層的邊框 選擇多個(gè)層 按住Shift鍵并單擊層面板上的兩個(gè)或更多個(gè)名稱或在兩個(gè)或更多個(gè)層的邊框內(nèi) 或邊框上 按住Shift鍵并單擊 當(dāng)選定多個(gè)層時(shí) 最后選定層的大小調(diào)整柄將以實(shí)心突出顯示 其他層的大小調(diào)整柄則以空心顯示 在設(shè)計(jì)視圖中直接點(diǎn)擊層標(biāo)記或?qū)幼笊辖堑倪x擇柄也能實(shí)現(xiàn)層選擇 4 3 2層的基本操作 2 調(diào)整層大小 調(diào)整單個(gè)層的大小 拖動(dòng)層的調(diào)整柄調(diào)整層的大小 按箭頭鍵時(shí)按住Ctrl鍵 對(duì)層一次調(diào)整一個(gè)像素的大小 按箭頭鍵時(shí)按住Shift Ctrl鍵 則按網(wǎng)格靠齊增量來調(diào)整層的大小 在屬性檢查器中 鍵入 寬 和 高 的值 調(diào)整層的大小 調(diào)整多個(gè)層的大小 在設(shè)計(jì)視圖中選擇多個(gè)層 選擇如下菜單 修改 排列順序 設(shè)成寬度相同 或 修改 排列順序 設(shè)成高度相同 則將選擇的層設(shè)定為相同的寬度或高度 其結(jié)果值取決于最后選定的層的大小 4 3 2層的基本操作 3 移動(dòng)層 1 選擇要移動(dòng)的一個(gè)或多個(gè)層 2 用鼠標(biāo)拖動(dòng)或用鍵盤箭頭鍵都能移動(dòng)層4 對(duì)齊層 1 選擇層 2 選擇 修改 排列順序 菜單 然后選擇一個(gè)對(duì)齊選項(xiàng) 4 3 2層的基本操作 5 將層靠齊到網(wǎng)格操作選擇 查看 網(wǎng)格 靠齊到網(wǎng)格 菜單 啟用或禁用靠齊 說明無論網(wǎng)格是否可見 都可以使用靠齊 顯示或隱藏網(wǎng)格 選擇 查看 網(wǎng)格 顯示網(wǎng)格 菜單 更改網(wǎng)格設(shè)置 選擇 查看 網(wǎng)格 網(wǎng)格設(shè)置 出現(xiàn) 網(wǎng)格設(shè)置 對(duì)話框 設(shè)置選項(xiàng)后單擊 確定 按鈕 4 3 3層的屬性設(shè)置 1 查看和設(shè)置層的屬性在屬性檢查器中查看和設(shè)置層屬性的操作步驟如下 選擇一個(gè)層 選擇 窗口 屬性 菜單 打開屬性檢查器 通過設(shè)置屬性來更改層的屬性 主要參數(shù)說明 4 3 3層的屬性設(shè)置 主要參數(shù)說明 層編號(hào) 用于指定層的名稱 每個(gè)層都必須有它自己的唯一ID 左和上 指定層的左上角相對(duì)于頁面左上角的位置 默認(rèn)單位為px Z軸 確定層的堆疊順序 編號(hào)較大的層出現(xiàn)在編號(hào)較小的層的前面 可見性 指定該層最初是否是可見的 背景圖像 指定層的背景圖像 背景顏色 指定層的背景顏色 標(biāo)簽 指定用來定義該層的HTML標(biāo)簽 溢出 控制當(dāng)層的內(nèi)容超過層的指定大小時(shí)如何在瀏覽器中顯示層 4 3 3層的屬性設(shè)置 2 更改層的層疊順序使用屬性檢查器或?qū)用姘蹇筛膶拥膶盈B順序 層面板列表頂部的層將位于層疊順序的頂部 并且會(huì)出現(xiàn)在其他層之前 在屬性檢查器的 Z軸 文本框中輸入層疊序號(hào) 可直接改變層疊順序 在層面板中移動(dòng)層也可改變層疊順序 4 3 3層的屬性設(shè)置 3 設(shè)置層可見性 使用層面板設(shè)置層的可見性睜開的眼睛表示層是可見的 當(dāng)設(shè)置為閉合狀態(tài)時(shí) 對(duì)應(yīng)的層將不被顯示 如果沒有眼形圖標(biāo) 該層通常會(huì)繼承其父層的可見性 使用層屬性檢查器設(shè)置層的可見性在層屬性檢查器中設(shè)置 可見性 的選項(xiàng)值 即可控制層的可見性 可見性 選項(xiàng)及含義 default 默認(rèn)狀態(tài)inherit 繼承父層屬性visible 層可見hidden 層不可見說明 如果層沒有嵌套 父層就是文檔正文 而文檔正文始終是可見的 另外 如果未指定可見性 則不會(huì)顯示眼形圖標(biāo) 4 3 4層和表格的轉(zhuǎn)換 1 層轉(zhuǎn)換為表格 選擇 修改 轉(zhuǎn)換 層到表 菜單 打開 層轉(zhuǎn)化為表格 對(duì)話框 在對(duì)話框中選擇所需的選項(xiàng) 然后單擊 確定 按鈕 2 表格轉(zhuǎn)換為層 選擇 修改 轉(zhuǎn)換 表格到層 菜單 打開 轉(zhuǎn)化表格為層 對(duì)話框 在對(duì)話框中選擇所需的選項(xiàng) 然后單擊 確定 按鈕 4 3 5層應(yīng)用示例 1 示例 設(shè)計(jì)一個(gè)包括三個(gè)超鏈接的導(dǎo)航菜單 當(dāng)鼠標(biāo)移動(dòng)到一個(gè)超鏈接文本時(shí) 即彈出一個(gè)與其相關(guān)的導(dǎo)航菜單 如圖4 50所示 2 設(shè)計(jì)過程 4 3 5層應(yīng)用示例 2 設(shè)計(jì)過程 新建一個(gè)文檔 在文檔窗口中連續(xù)繪制三個(gè)層 并分別插入文本 東岳泰山 西岳華山 南岳衡山 全部選定新建的三個(gè)層 在屬性檢查器中設(shè)定寬度和高度 然后調(diào)整層的水平位置 再使三個(gè)層 對(duì)齊上緣 繼續(xù)繪制第四 五 六三個(gè)層 在第四個(gè)和第六個(gè)層中各插入一個(gè)4行的表格 在第五個(gè)層中插入一個(gè)5行的表格 并分別插入相應(yīng)文本 對(duì)所有文本建立空鏈接 設(shè)置新建層的寬度與前三個(gè)層的寬度相同 并調(diào)整層的高度 位置 進(jìn)行層對(duì)齊 在層面板中 將第四 五 六三個(gè)層分別命名為 taishan huashan hengshan 并設(shè)置該三個(gè)層為 隱藏 設(shè)置超鏈接文本 東岳泰山 西岳華山 南岳衡山 的行為屬性 4 4使用框架進(jìn)行頁面布局 4 4 1概述框架是瀏覽器窗口中的一個(gè)區(qū)域 任何一個(gè)框架都可以顯示任意一個(gè)文檔 框架只是存放文檔的容器 框架本身不是文檔 而框架集則是HTML文檔 它定義一組框架的布局和屬性 當(dāng)在瀏覽器地址中輸入框架集文件的URL時(shí) 即可查看一組框架 瀏覽器隨后打開要顯示在這些框架中的相應(yīng)文檔 4 4 2框架的基本操作 使用預(yù)定義框架集 將插入點(diǎn)放置在文檔中 執(zhí)行下列操作之一 在插入欄的布局類別中 單擊 框架 按鈕的下拉箭頭 然后選擇預(yù)定義的框架集 選擇 插入 HTML 框架 菜單 中選擇預(yù)定義的框架集 4 4 2框架的基本操作 創(chuàng)建自定義框架集 選擇 文件 新建 菜單 打開 新建文檔 對(duì)話框 在 新建文檔 對(duì)話框中 選擇 框架集 類別 從 框架集 列表選擇框架方式 然后單擊 創(chuàng)建 按鈕 4 4 2框架的基本操作 2 編輯框架集 拆分框架 拆分插入點(diǎn)所在的框架 從 修改 框架頁 子菜單選擇拆分項(xiàng) 以垂直或水平方式拆分框架 將框架邊框從 設(shè)計(jì) 視圖的邊緣向 設(shè)計(jì) 視圖的內(nèi)部拖入 使用不在 設(shè)計(jì) 視圖邊緣的框架邊框拆分框架 在按住Alt鍵的同時(shí)拖動(dòng)框架邊框 將一個(gè)框架拆分成四個(gè)框架 將框架邊框從 設(shè)計(jì) 視圖一角拖入框架的中間 刪除框架將框架的邊框拖離頁面或拖到父框架的邊框上后 當(dāng)前框架即被刪除 4 4 2框架的基本操作 3 選擇框架和框架集 在框架面板中選擇框架和框架集 選擇框架 在框架面板中單擊框架內(nèi)部 選擇一個(gè)框架集 在框架面板中單擊環(huán)繞框架集的邊框 在文檔窗口中選擇框架和框架集 選擇框架 在 設(shè)計(jì) 視圖中 按住Alt鍵的同時(shí)單擊框架內(nèi)部 選擇框架集 在 設(shè)計(jì) 視圖中 單擊框架集的某一內(nèi)部框架邊框 4 4 2框架的基本操作 4 指定框架的打開文檔要在框架中打開現(xiàn)有文檔 操作步驟如下 將插入點(diǎn)放置在框架中 選擇 文件 在框架中打開 菜單 選擇要在框架中打開的文檔并單擊 確定 該文檔隨即顯示在框架中 要使文檔成為在瀏覽器中打開框架集時(shí)在框架中顯示的默認(rèn)文檔 則須保存該框架集 4 4 2框架的基本操作 5 框架集文件和框架的保存 保存框架集文件 在框架面板或文檔窗口中選擇框架集 選擇下列項(xiàng)之一 保存框架集文件 選擇 文件 保存框架集 菜單 將框架集文件另存為新文件 選擇 文件 框架集另存為 菜單 保存在框架中顯示的文檔 在框架中單擊 選擇 文件 保存框架 或 文件 框架另存為 菜單 保存與一組框架關(guān)聯(lián)的所有文件選擇 文件