當前位置:才華齋>設計>網頁設計>

如何用DW編輯網站模板

網頁設計 閱讀(1.08W)

使用DW製作網頁時候,網頁的框架往往在某些方面有固定的格式,像是導航欄、banner條,如果每製作一個網頁就要重新設計這些內容是很耗時間的,下面是小編為大家搜尋整理的如何用DW編輯網站模板,希望大家能有所收穫,更多精彩內容請及時關注我們應屆畢業生考試網!

如何用DW編輯網站模板

在Site中開啟網站模板檔案,將會發現跟頁面好像沒什麼分別,但其實是不一樣的,在中是無法新增可編輯區域的。可編輯區域只能在模板檔案中新增。為了讓大家更好的理解“可編輯區域”,我們先用此模板生成一個htm檔案:點FileàNew From Template,彈出Select Template視窗,在emplates中選擇body,再點選右上角的Select即可生成一個新的'htm檔案。我們將此新建頁面改名為。現在我們用DW將與兩檔案都開啟,比較一下有什麼不同。你會發現在頁面的右上角寫著“Template:body”幾個字。同時你會驚訝的發現檔案竟然不可以編輯。對了,這就是由於在模板檔案中沒有定義“可編輯區域”的結果,使得生成的頁面都不可編輯了。所以我們必須在模板檔案中新增可編輯區域。下面是新增可編輯區域的步驟:

1) 開啟模板檔案,我們希望中間的表格可以編輯。但是要在檔案中,而不是),所以要在此處新增可編輯區域。

2) 將滑鼠游標放入A處表格裡,點選滑鼠右鍵,選擇New Editable Region…, 彈出New Editable Region視窗,要求填入此可編輯區域的名稱。我們填入Region01,點選ok關閉此視窗完成當前可編輯區域標記的編輯。

說明此處有一個標記為Region01的可編輯區域。

到此為止我們定義了一個可編輯區域,如果有多個編輯區域,同樣可以如法炮製。

注:通過ModifyàTemplatesàNew Editable Region…網站模板可以生成新的可編輯區域,如果想刪除可編輯區域,可通過ModifyàTemplatesàRemove Editable Region…,然後按提示操作即可。

  【相關閱讀】

  Dreamweaver文件視窗

在“文件”視窗中通過“程式碼”檢視、“拆分程式碼”檢視、“設計”檢視、“程式碼”檢視和“設計”檢視(拆分檢視)或“實時”檢視檢視文件。

“文件”視窗顯示當前文件。可以選擇下列任一檢視:

“設計”檢視 一個用於視覺化頁面佈局、視覺化編輯和快速應用程式開發的設計環境。在該檢視中,Dreamweaver 顯示文件的完全可編輯的視覺化表示形式,類似於在瀏覽器中檢視頁面時看到的內容。

“程式碼”檢視 一個用於編寫和編輯 HTML、JavaScript、服務器語言程式碼(如 PHP 或 ColdFusion 標記語言 (CFML))以及任何其它型別程式碼的手工編碼環境。

拆分“程式碼”檢視 “程式碼”檢視的一種拆分版本,使您可以通過滾動以同時對文件的不同部分進行操作。

程式碼和“設計”檢視 使您可以在一個視窗中同時看到同一文件的“程式碼”檢視和“設計”檢視。

“實時”檢視 與“設計”檢視類似,“實時”檢視更逼真地顯示文件在瀏覽器中的表示形式,並使您能夠像在瀏覽器中那樣與文件互動。“實時”檢視不可編輯。不過,您可以在“程式碼”檢視中進行編輯,然後重新整理“實時”檢視來檢視所做的更改。

實時“程式碼”檢視 僅當在“實時”檢視中檢視文件時可用。“實時程式碼”檢視顯示瀏覽器用於執行該頁面的實際程式碼,當您在“實時”檢視中與該頁面進行互動時,它可以動態變化。“實時程式碼”檢視不可編輯。

當“文件”視窗處於最大化狀態(預設值)時,“文件”視窗頂部會顯示選項卡,上面顯示了所有開啟的文件的檔名。如果您尚未儲存已做的更改,則 Dreamweaver 會在檔名後顯示一個星號。

若要切換到某個文件,請單擊它的選項卡。

Dreamweaver 還會在文件的選項卡下(如果在單獨視窗中檢視文件,則在文件標題欄下)顯示“相關檔案”工具欄。相關文件指與當前檔案關聯的文件,例如 CSS 檔案或 JavaScript 檔案。若要在“文件”視窗中開啟這些相關檔案之一,請在“相關檔案”工具欄中單擊其檔名。