快速建立網(wǎng)站

1、1第第7章章 快速建立網(wǎng)站快速建立網(wǎng)站通過各種元素制作出豐富的單個網(wǎng)頁后，就是將這些網(wǎng)頁組成一個完整的網(wǎng)站。最簡單的方法就是通過超級鏈接將每個獨立的網(wǎng)頁組成一個網(wǎng)站，只是這種方法在制作過程中，具有過多的重復操作，并且在后期修改過程中較為麻煩，因為需要逐個去修改。Dreamweaver提供了兩個快速建立網(wǎng)站的方法，模板與框架。使用前者建立網(wǎng)站時，需要確定網(wǎng)站風格必須是統(tǒng)一的；使用后者建立網(wǎng)站時，需要確定網(wǎng)站布局必須是統(tǒng)一的。2本章知識要點：本章知識要點：創(chuàng)建模板 基于模板創(chuàng)建網(wǎng)頁 創(chuàng)建框架 創(chuàng)建浮動框架37.1 模板網(wǎng)頁模板網(wǎng)頁 模板是一種特殊類型的文檔，用于設計固定的頁面布局，然后便可以基于模

2、板創(chuàng)建文檔，而創(chuàng)建的文檔會繼承模板的頁面布局。這樣在后期修改網(wǎng)頁時，可以修改模板網(wǎng)頁，所有基于該模板創(chuàng)建的網(wǎng)頁會同時被更新。7.1.1 創(chuàng)建模板創(chuàng)建模板 模板實際上也是文檔，它的擴展名是.dwt，存放在根目錄的Templates文件夾中。模板文件夾并不是原來就有的，它只是創(chuàng)建模板的時候才自動生成。在Dreamweaver中有兩種建立模板的方法，一種是建立一個新的空白模板，另一種是將一個已經(jīng)存在的網(wǎng)頁另存為模板。4選擇創(chuàng)建7.1.2 編輯模板編輯模板 模板文檔只是一個制作網(wǎng)站網(wǎng)頁的樣板，所以模板中有些區(qū)域是不能編輯的，稱為鎖定區(qū)，確保網(wǎng)頁風格的統(tǒng)一性；有些區(qū)域則是可以編輯的，稱為可編輯區(qū)，這樣才

3、可以制作出不同的網(wǎng)頁。Dreamweaver提供了4種模板區(qū)域類型，下面詳細介紹如何在模板中使用這些區(qū)域類型。5參數(shù)參數(shù)功能功能屬性選擇我們想要使其可編輯的屬性，可以在下拉菜單中選擇。如果該屬性沒有列在【屬性】下拉菜單中，可以單擊【添加】按鈕，然后在打開的對話框中輸入想要添加的屬性的名稱，再單擊【確定】按扭。在此對話框中是選擇TD標簽的屬性，這些都是HTML標簽語言中指定的屬性令屬性可編輯確保此項被選定，否則無法使用可編輯標簽屬性標簽此文本框用來輸入屬性的惟一名稱。這里需要填寫易于記住含義的名稱類型在此下拉菜單中選擇該屬性所允許具有的值的類型。若要讓用戶為屬性輸入文本值，可以選擇“文本”；若要

4、讓用戶可編輯元素的鏈接，可以選擇“URL”；若要使模板用戶可以鍵入數(shù)值以更新屬性，例如更改圖像的高度，或者表格高寬和單元格高寬，可以選擇“數(shù)字”；或者選擇“顏色”；“真/假”極少使用默認表示模板中所選標簽屬性的值?？梢源宋谋究蛑休斎胍粋€新值，為基于模板的文檔中的參數(shù)設置初始值7.1.3 應用模板應用模板 創(chuàng)建模板文檔后，就可以基于該模板創(chuàng)建具有統(tǒng)一風格的不同信息內(nèi)容的網(wǎng)頁。得到的網(wǎng)頁還可以從模板文檔中分離，形成獨立的網(wǎng)頁文檔。 1從模板創(chuàng)建文件從模板創(chuàng)建文件 2在現(xiàn)有的文檔中應用模板在現(xiàn)有的文檔中應用模板 3從模板中分離文檔從模板中分離文檔 4編輯區(qū)域類型編輯區(qū)域類型 5修改模板并更新站點修改

5、模板并更新站點67.2 框架網(wǎng)頁框架網(wǎng)頁 框架提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同HTML文檔的方法。使用框架的最常見情況就是，一個框架顯示包含導航菜單的文檔，而另一個框架顯示包含內(nèi)容的文檔。77.2.1 創(chuàng)建各種框架創(chuàng)建各種框架 框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及最初在每個框架中顯示的頁面的URL。使用框架布局除了框架集外，還可以使用浮動框架。87.2.2 編輯框架集編輯框架集 創(chuàng)建的框架集為沒有任何內(nèi)容的空白網(wǎng)頁，要想為其添加網(wǎng)頁元素，就必須選擇正確的位置。 1選擇布局框架選擇布局框架 2為框架添加內(nèi)容為框架添加內(nèi)容

6、97.2.3 保存框架集保存框架集 如果一個站點在瀏覽器中顯示為包含兩個框架的單個頁面，則實際上至少由三個HTML文檔組成：框架集文件以及兩個文檔，這兩個文檔包含最初在這些框架內(nèi)顯示的內(nèi)容。在Dreamweaver中設計使用框架集的頁面時，必須保存所有這三個文件，該頁面才能在瀏覽器中正常顯示。10117.3 框架屬性框架屬性 選擇不同的框架部分，會得到不同的屬性。而框架集網(wǎng)頁中，有些框架網(wǎng)頁為固定網(wǎng)頁，而框架集中的mailFrame框架網(wǎng)頁為活動網(wǎng)頁，所以框架集的超級鏈接目標與普通網(wǎng)頁會有所不同。127.3.1 布局框架基本屬性布局框架基本屬性 由于布局框架中包括框架集、框架、框架網(wǎng)頁，所以選

7、擇不同，【屬性】面板中顯示的屬性也不盡相同。而某些框架屬性還會覆蓋框架集中的某些屬性，所以在設置過程中要有所注意。選選 項項 名名 稱稱選選 項項 含含 義義邊框設置文檔在瀏覽器中被瀏覽時是否顯示框架邊框邊框?qū)挾容斎胍粋€數(shù)字以指定當前框架集的邊框?qū)挾?，輸?，指定無邊框邊框顏色輸入顏色的十六進制值，或者使用拾色器為邊框選擇顏色行/列設置行高或者列寬，其后面的單位可以選擇像素、百分比和相對像素將選定行或列的大小設置為一個絕對值。對于應始終保持相同大小的框架而言，此選項是最佳選擇。在為以【百分比】或【相對】值指定大小的框架分配空間前，為以【像素】為單位指定大小的框架分配空間。設置框架大小的最常用方

8、法是將左側(cè)框架設置為固定像素寬度，將右側(cè)框架設置為相對大小，這樣分配像素寬度后，能夠使右側(cè)框架伸展以占據(jù)所有剩余空間。百 分比指定選定行或列應相對于其框架集的總寬度或總高度的百分比。以【百分比】為單位的框架分配空間是在以【像素】為單位的框架之后，但在將單位設置為【相對】的框架之前。相對指定在為【像素】和【百分比】框架分配空間后，為選定行或列分配其余可用空間：剩余空間在大小設置為【相對】的框架中按比例劃分。7.3.2 框架鏈接框架鏈接 框架頁的超級鏈接之所以要特別指出，是因為框架網(wǎng)頁少則2個，多則幾個框架，鏈接的網(wǎng)頁在哪一個框架中打開，是需要設定的。在創(chuàng)建框架集后，在【框架】面板中會顯示每個框架

9、網(wǎng)頁的默認名稱。13選項選項含義含義_blank:在新的窗口中打開鏈接。_parent:在當前框架的父框架結(jié)構(gòu)中打開鏈接。_self:在框架自己內(nèi)部打開鏈接。_top:在瀏覽器窗口中打開鏈接，取消所有的框架結(jié)構(gòu)。mainFrame:在mainFrame框架中打開網(wǎng)頁。leftFrame:在leftFrame框架中打開網(wǎng)頁。7.3.3 框架標簽框架標簽 創(chuàng)建框架集后，在【代碼】視圖中發(fā)現(xiàn)，選擇單個框架與選擇框架集的代碼是不同的，因為頁面所有框架標簽需要放在一個HTML的文檔，這個檔案只記錄了該框架如何分割，不會顯示任何資料。 在布局框架代碼中，為框架集標簽，為框架標簽，為瀏覽器不支持框架時的標簽，以及脫離框架集的浮動框架標簽。147.4 課堂練習：使用模板制作網(wǎng)頁課堂練習：使用模板制作網(wǎng)頁 對于制作網(wǎng)頁不熟練的人，只要網(wǎng)頁主題相同，就可以使用現(xiàn)有的網(wǎng)頁作為模板，來制作自己的網(wǎng)頁。這種方法既簡單，又快捷，并且還方便后期網(wǎng)頁的統(tǒng)一更新，但是前提是必須建立站點。157.5 課堂練習：創(chuàng)建框架網(wǎng)頁課堂練習：創(chuàng)建框架網(wǎng)頁 要想在不改變網(wǎng)頁布局的情況下，大量的顯示網(wǎng)頁信息，可以使用Dreamweaver中的框架網(wǎng)頁。由于框架是由若干個獨立的HTML文件組成的，所以還可以單獨地制作各個框架文件。在利用框架制作網(wǎng)頁時，要特別注意超級