如何使用div 標籤在網頁上建立邏輯分區

您可以使用div 標籤建立CSS 版面區塊，並將其定位在文件中。

當現有CSS 樣式表的樣式已經附加到文件中時，這個方法就很有用。

Dreamweaver 可讓您快速地插入 ... AdobeDreamweaver 新增功能 學習與支援 免費試用 立即購買 使用手冊 取消 使用div標籤 搜尋 上次更新時間 Apr29,202112:24:12PMGMT Dreamweaver使用手冊 簡介 多方互動網頁設計基本概念 Dreamweaver的新增功能 使用Dreamweaver開發網頁-總覽 Dreamweaver/常見問題 鍵盤快速鍵 Dreamweaver系統需求 功能摘要 Dreamweaver和CreativeCloud 將Dreamweaver設定與CreativeCloud同步 Dreamweaver中的CreativeCloudLibraries 在Dreamweaver中使用Photoshop檔案 使用AdobeAnimate和Dreamweaver 從資料庫擷取網頁最佳化的SVG檔案 Dreamweaver工作區和檢視 Dreamweaver工作區 最佳化視覺開發的Dreamweaver工作區 根據檔案名稱或內容搜尋檔案|MacOS 設定網站 關於Dreamweaver網站 設定網站的本機版本 連線到發佈伺服器 設定測試伺服器 匯入和匯出Dreamweaver網站設定 將現有網站從遠端伺服器帶入本機網站根目錄 Dreamweaver中的輔助功能 進階設定 設定網站偏好設定以傳送檔案 在Dreamweaver中指定Proxy伺服器設定 將Dreamweaver設定與CreativeCloud同步 在Dreamweaver中使用Git 管理檔案 建立和開啟檔案 管理檔案和資料夾 下載和上傳伺服器檔案 存回和取出檔案 同步化檔案 比較檔案差異 遮罩Dreamweaver網站中的檔案和資料夾 啟用Dreamweaver網站的設計備註 防止Gatekeeper遭到潛在惡意利用 版面和設計 使用視覺輔助以配置版面 關於使用CSS配置頁面 使用Bootstrap設計回應式網站 在Dreamweaver中建立及使用媒體查詢 以表格呈現內容 顏色 使用流變格線版面的互動設計 Dreamweaver中的Extract CSS 了解串接樣式表 使用CSS設計工具配置頁面 在Dreamweaver中使用CSS預處理器 如何在Dreamweaver中設定CSS樣式偏好設定 在Dreamweaver中移動CSS規則 在Dreamweaver中將行內CSS轉換為CSS規則 使用div標籤 套用漸層至背景 在Dreamweaver中建立與編輯CSS3轉變效果 格式化程式碼 頁面內容和資產 設定頁面屬性 設定CSS標題屬性和CSS連結屬性 處理文字 尋找和取代文字、標籤和屬性 DOM面板 在即時檢視中編輯 在Dreamweaver中進行文件編碼 在文件視窗中選取並檢視元素 在屬性檢視窗中設定文字屬性 檢查網頁拼字 在Dreamweaver中使用水平線 在Dreamweaver中新增和修改字體組合 使用資源 在Dreamweaver中插入和更新日期 在Dreamweaver中建立和管理最愛資源 在Dreamweaver中插入及編輯影像 新增媒體物件 在Dreamweaver中加入視訊 插入HTML5視訊 插入SWF檔 新增音效效果 在Dreamweaver中插入HTML5音效 使用圖庫項目 在Dreamweaver中使用阿拉伯文和希伯來文文字 連結和導覽 關於連結和導覽 連結 影像地圖 連結疑難排解 jQueryWidget和效果 在Dreamweaver中使用jQueryUI和MobileWidget 在Dreamweaver中使用jQuery效果 撰寫網站程式碼 關於在Dreamweaver中撰寫程式碼 Dreamweaver的程式碼撰寫環境 設定程式碼撰寫偏好設定 自訂程式碼色彩標示 撰寫和編輯程式碼 程式碼提示和程式碼完成 收合和展開程式碼 利用片段重複使用程式碼 Lint程式碼 最佳化程式碼 在設計檢視中編輯程式碼 使用頁面的檔頭內容 在Dreamweaver中插入伺服器端包含 在Dreamweaver中使用標籤資料庫 匯入自訂標籤到Dreamweaver 使用JavaScript行為(一般說明) 套用內建的JavaScript行為 關於XML與XSLT 在Dreamweaver中執行伺服器端XSL轉換 在Dreamweaver中執行用戶端XSL轉換 在Dreamweaver中新增XSLT字元實體 格式化程式碼 跨產品工作流程 安裝與使用Dreamweaver的擴充功能 Dreamweaver中的應用程式內更新 在Dreamweaver中插入MicrosoftOffice文件(僅適用於Windows) 使用Fireworks和Dreamweaver 使用Contribute編輯Dreamweaver網站的內容 Dreamweaver-BusinessCatalyst整合 建立個人化的電子郵件行銷活動 範本 關於Dreamweaver範本 辨識範本和以範本為架構的文件 建立Dreamweaver範本 建立範本的可編輯區域 在Dreamweaver中建立重複區域和表格 使用範本中的選擇性區域 在Dreamweaver中定義可編輯的標籤屬性 如何在Dreamweaver中建立巢狀範本 編輯、更新和刪除範本 在Dreamweaver中匯出及匯入XML內容 對現有的文件套用或移除範本 編輯Dreamweaver範本的內容 Dreamweaver中範本標籤的語法規則 設定範本區域的標示偏好設定 使用Dreamweaver範本的好處 行動裝置和多螢幕 建立媒體查詢 為行動裝置變更頁面方向 使用Dreamweaver為行動裝置建立網頁用程式 動態網站、網頁和網站表單 了解網頁用程式 設定您的電腦以進行應用程式開發 疑難排解資料庫連線 在Dreamweaver中移除連線Script 設計動態網頁 動態內容來源總覽 定義動態內容的來源 將動態內容新增至頁面 在Dreamweaver中變更動態內容 顯示資料庫記錄 在Dreamweaver中提供即時資料及進行疑難排解 在Dreamweaver中新增自訂伺服器行為 使用Dreamweaver建立表單 使用表單向使用者收集資訊 在Dreamweaver中建立及啟用ColdFusion表單 建立網站表單 加強對HTML5表單元素的支援 使用Dreamweaver開發表單 以視覺化方式建立應用程式 在Dreamweaver中建立主要和細節頁面 建立搜尋及結果頁面 建立記錄插入頁面 在Dreamweaver中建立更新記錄頁面 在Dreamweaver中建立記錄刪除頁面 在Dreamweaver中使用ASP命令修改資料庫 建立註冊頁面 建立登入頁面 建立唯有授權用戶才能存取的頁面 使用Dreamweaver保護ColdFusion中的資料夾 在Dreamweaver中使用ColdFusion組件 測試、預覽和發佈網站 預覽頁面 在多部裝置上預覽Dreamweaver網頁 測試Dreamweaver網站   了解如何使用div標籤來置中處理內容區塊、在欄位上建立效果、建立不同的顏色區域等等。

您可以手動插入div標籤並將CSS定位樣式套用到這些標籤，建立頁面版面。

div標籤是用來定義網頁內容中的邏輯分區。

您可以使用div標籤來置中處理內容區塊、在欄位上建立效果、建立不同的顏色區域等等。

如果您不熟悉使用div標籤與CascadingStyleSheets(CSS)來建立網頁的方式，可以依據Dreamweaver隨附的其中一個預先設計的版面來建立CSS版面。

如果您不熟悉使用CSS的方式，但是熟悉使用表格的方式，也可以嘗試使用表格。

插入div標籤 您可以使用div標籤建立CSS版面區塊，並將其定位在文件中。

當現有CSS樣式表的樣式已經附加到文件中時，這個方法就很有用。

Dreamweaver可讓您快速地插入div標籤，並為它套用現有的樣式。

在「文件」視窗中，將插入點放在您想要顯示div標籤的位置上。

執行下列其中一項作業： 選取「插入>HTML>Div」。

在「插入」面板的「HTML」類別中，按一下「Div」。

設定下列任何一個選項： 插入 可讓您為現有標籤選取div標籤的位置和標籤名稱。

類別 顯示目前套用至標籤的類別樣式。

如果附加了樣式表，在清單中便會出現該樣式表中所定義的類別。

使用這個彈出式選單可選取要套用至標籤的樣式。

ID 可讓您變更用來識別div標籤的名稱。

如果附加了樣式表，在清單中便會出現該樣式表中所定義的ID。

不會列出已經存在文件中的區塊ID。

註解： 如果您輸入與文件中另一個標籤相同的ID，Dreamweaver便會發出警告。

新增CSS規則 開啟「新增CSS規則」對話方塊。

按一下「確定」。

div標籤便會在文件中以方塊顯示，其中包含預留位置文字。

當您將滑鼠指標移過方塊邊緣時，Dreamweaver就會將其標示。

如果div標籤已絕對定位，就會變成AP元素(您可以編輯不是絕對定位的div標籤)。

編輯div標籤 在插入div標籤之後，您就可以操作它或是在上面新增內容。

註解： 已絕對定位的div標籤會變成AP元素。

如果您將邊框指定給div標籤，或者您已選取「CSS版面外框」，這個標籤便會顯示邊框(在「檢視>視覺輔助」選單中，預設會選取「CSS版面外框」)。

當您將滑鼠指標移過div標籤時，Dreamweaver會標示該標籤。

您可以變更標示的顏色或停用標示功能。

當您選取div標籤時，可以使用CSS設計工具檢視並編輯其規則。

您也可以將插入點放置在div標籤內部，然後新增內容至div標籤中，新增內容的方式就如同將內容新增至頁面。

執行下列其中一項作業以選取div標籤： 按一下div標籤的邊框。

註解： 請尋找標示以查看邊框。

按一下div標籤的內部，然後按Control+A鍵(Windows)或按Command+A鍵(Macintosh)兩次。

按一下div標籤的內部，然後從「文件」視窗底部的標籤選取器中，選取div標籤。

選取「視窗>CSS設計工具」以開啟「CSS設計工具」面板(如果面板尚未開啟)。

套用至div標籤的規則，便會出現在面板中。

視需要進行編輯。

變更div標籤的標示顏色 當您在「設計」檢視中，將滑鼠指標移過div標籤邊緣時，Dreamweaver便會標示標籤的邊框。

您就可以依需要啟用或停用標示功能，或是在「偏好設定」對話方塊中，變更標示的顏色。

選取「編輯>偏好設定」(Windows)或「Dreamweaver>偏好設定」(Macintosh)。

選取左側分類清單中的「標示」。

執行下列其中一項變更，然後按一下「確定」： 若要變更div標籤的標示顏色，請按一下「滑鼠移過」顏色方塊，然後使用檢色器選取標示顏色(或在文字方塊中，輸入標示顏色的十六進位值)。

若要啟用或停用div標籤的標示功能，請選取或取消選取「滑鼠滑過時」的「顯示」核取方塊。

註解： 這些選項會影響到所有的物件，例如表格，尤其是當您將滑鼠指標移過去時Dreamweaver就會將其標示的那些表格。

CSS版面區塊 當您在「設計」檢視中工作時，可以視覺化處理CSS版面區塊。

CSS版面區塊是一項HTML頁面元素，您可以將它放置在頁面上的任何一處。

更明確地說，CSS版面區塊是不含display:inline的div標籤，或包含display:block、position:absolute或position:relativeCSS宣告的任何其他頁面元素。

下列是一些在Dreamweaver中被視為CSS版面區塊元素的範例： div標籤指定了絕對或相對位置的影像指定了display:block樣式的a標籤指定了絕對或相對位置的段落 註解： 為了視覺上的呈現，CSS版面區塊不包含行內元素(也就是程式碼位於一行文字內的元素)或簡單區塊元素(像是段落)。

Dreamweaver提供了幾項檢視CSS版面區塊的視覺輔助。

例如，當您設計時，可以啟用CSS版面區塊的外框、背景和方塊模型。

當您將滑鼠指標滑過版面區塊時，您也可以檢視顯示選取的CSS版面區塊屬性的工具提示。

下列清單說明Dreamweaver針對每一個項目所呈現的CSS版面區塊視覺輔助： CSS版面外框 顯示頁面上所有CSS版面區塊的外框。

CSS版面背景 顯示暫時指定給個別CSS版面區塊的背景顏色，並隱藏通常顯示在頁面上的任何其他背景顏色或影像。

每當您啟用視覺輔助以檢視CSS版面區塊背景時，Dreamweaver便會自動指定每個CSS版面區塊的不同背景顏色(Dreamweaver利用一種演算程序來選取顏色，您無法自己指定顏色)。

指定的顏色看起來都不同，並且是專為協助您在CSS版面區塊之間進行分辨而設計的。

CSS版面方塊模型 顯示選定CSS版面區塊的方塊模型(也就是間距和邊界)。

檢視CSS版面區塊 您可以視需要開啟或關閉CSS版面區塊的視覺輔助。

如果要檢視所有的CSS版面區塊，請選取「檢視>設計檢視選項>視覺輔助」。

您可以啟用或停用「CSS版面背景」、「CSS版面方塊模型」和「CSS版面外框」。

更多類似項目教學課程：如何使用CSS為div和其他版面元素設定樣式教學課程：為頁首和導覽選單設定樣式使用CSS配置頁面管理標籤資料庫 登入您的帳戶 登入 管理帳戶 快速連結 檢視您的所有計劃 管理您的計劃 法律說明   |   線上隱私權政策 [FeedbackV2Badge] LanguageNavigation LanguageNavigation 選擇您的地區 選取地區會變更Adobe.com上的語言及/或內容。

Americas Brasil Canada-English Canada-Français Latinoamérica México Chile UnitedStates AsiaPacific Australia HongKongS.A.R.ofChina India-English NewZealand SoutheastAsia(IncludesIndonesia,Malaysia,Philippines,Singapore,Thailand,andVietnam)-English 中国 中國香港特別行政區 台灣地區 日本 한국 Singapore Thailand-English ประเทศไทย Europe,MiddleEastandAfrica Africa-English België-Nederlands Belgique-Français Belgium-English Českárepublika Cyprus-English Danmark Deutschland Eesti España France Greece-English Ireland Israel-English Italia Latvija Lietuva Luxembourg-Deutsch Luxembourg-English Luxembourg-Français Magyarország Malta-English MiddleEastandNorthAfrica-English Nederland Norge Österreich Polska Portugal România Schweiz Slovenija Slovensko Suisse Suomi Svizzera Türkiye UnitedKingdom България Россия Україна الشرقالأوسطوشمالأفريقيا-اللغةالعربية ישראל-עברית Sverige SaudiArabia-English UnitedArabEmirates-English الإماراتالعربيةالمتحدة المملكةالعربيةالسعودية