練習 1.4:設計網站的外觀和操作方式
您必須先完成練習 1.3:將網頁移入網站,才能開始設計您的網站。
組成網站的網頁單元應該有類似的視覺設計和佈置。
個別網頁應該看起來彼此相關,使整個網站一致。
在專案開始之初,最好先構想網站的設計,再建立個別網頁。
否則,網站可能會有許多互不相關的網頁,沒有組織,從視覺上看不出關係。
建立網站共同外觀和操作方式的最佳方式是使用網頁範本。
網頁範本是單一檔案,可用來控制網站所有網頁的共用元素。
在網頁上套用範本之後,可以使將來的設計變更工作減到最少,您只需要變更範本一次,變更就會套用在使用這個範本的所有網頁上。
網頁範本設計成有共用區域和內容區域。
共用區域是使用網頁範本的所有網頁共用的區域,適用於每個網頁都相同的元素,如網站橫幅和導覽區。
內容區域則是每個網頁各不相同。
將範本套用在個別網頁之後,您可以編輯這些網頁中的內容區域來新增這個網頁專用的資訊。
特定網頁專用的文字和影像等網頁元素是放在網頁範本內容區域中的元素類型。
您可以依照您的需要,在範本中建立任意數目的內容區域和共用區域。
利用網頁範本來控制網站佈置的外觀和操作方式,與利用樣式表來控制非常不同。
請進一步學習網頁範本和樣式表的差異。
在這個指導教學中,我們要建立一個網頁範本和定義一些內容和共用區域來設計整個分類廣告網站一致的外觀和操作方式。
這個網頁範本將確定每個網頁看起來都會如同下列設計:
建立新的網頁範本
- 在「專案導覽器」視圖中,用滑鼠右鍵按一下專案名稱 ClassifiedsTutorial。
- 從蹦現功能表中選取新建 > 網頁範本檔。這時會開啟「新建網頁範本檔」精靈。
- 接受預設資料夾 (/ClassifiedsTutorial/WebContent)。這是範本檔建立好之後所在的位置。
- 在「檔案名稱」欄位中,輸入範本檔的名稱。在這個指導教學中,請將檔案命名為 template。請注意,產生的檔案的完整名稱是 template.jtpl。
- 確定已選取 HTML 作為標記語言。
- 選取包含 Faces 元件的範本作為模型。
- 保持不勾選配置進階選項勾選框。
- 按一下完成。這時會在 Page Designer 中開啟新範本。
當開啟空白範本時,對話框會提示您在範本中加入至少一個內容區。按一下確定來關閉對話框。
將一些元素新增至空白範本中
現在,範本已建立好,您必須將一些元素新增至空白範本中。
- 首先,請刪除預設內容區域。
按一下預設文字請將內容放在這裡,便可以看到預設內容區域。
內容區域周圍會有不可見的邊框。
- 佈置網頁範本結構最簡單的方式是使用不可見的表格。
這個方式可讓您指定將以不同方式來使用的網頁區段,您可以控制物件在網頁中的放置方式。
- 在「選用區」視圖中,按一下 HTML 標示抽屜來展開它。
- 從選用區中,將表格元件拖曳到空白範本中。這時會開啟「插入表格」精靈。
- 在這個範本中,您需要 3 列 1 直欄。
請在列欄位中輸入 3,在直欄欄位中輸入 1。
- 之後,按一下確定。這時表格會顯示在範本網頁中。
- 開始時,表格很小。您必須編輯表格屬性來調整表格的大小和結構。
- 在「屬性」視圖中,按一下表格標籤。
- 在對齊欄位中,選取置中。這會將表格放在網頁中間。
- 您必須增加表格的整體大小,使範本的結構依網頁所在畫面的大小而展開。
否則,網頁的設計會顯示成固定大小,可能會在小畫面中顯得很大,在大畫面中顯得很小。
在表格寬度和表格高度欄位中,輸入 90,再選取百分比 (%) 符號。
- 由於您不要表格輪廓實際出現在網頁中,因此,您也必須將邊框設成 0 像素。Page Designer 會將不可見的表格邊框顯示成點虛線。
- 由於您要每個網頁頂端的橫幅顯示網站名稱和將網站連結起來的視覺化項目,因此,您必須在這個佈置表格中,將它的區域格式化。
另外,雖然您可能會請圖形設計師建立網站的標誌或橫幅影像,但您也可以新增文字來作為這個範本中的橫幅位置保留區。
- 選取表格中的頂端資料格。
- 選好這個資料格之後,請在「屬性」視圖的資料格標籤中,將高度指定為 70 像素。
如果您知道您是在建立必須含有圖形設計師所建立之橫幅圖形的範本,您可以指定這個資料格完全符合橫幅圖形的大小。
- 在「屬性」視圖的資料格標籤中,將顏色設定為下拉功能表中的灰色。
如果您要使用不同的顏色,您可以利用顏色滴管工具,從畫面中的任何位置選取顏色,您也可以在欄位中輸入 RGB 值(如灰色是 #808080)。
- 按一下最上列的任何位置,輸入歡迎使用分類廣告!
- 由於預設文字很小,看不清楚,因此,您必須增加字型大小。請選取整個詞組,按一下格式 > 字型。
- 如果要使網站像新聞報紙,請在字型中選取 Courier。在大小中選取 6,在顏色中選取白色,以便從這個資料格的灰色背景中突顯出來。
- 之後,按一下確定。
- 如果要使橫幅文字置中,請再選取一次文字,按一下格式 > 對齊 > 水平置中。
- 如果要讓使用者移至不同網頁,橫幅之下,必須有一個鏈結列。
您稍後將新增導覽標籤,不過,現在要將第二列格式化來保留按鈕空間。
- 選取表格中的第二個資料格。
- 在「屬性」視圖資料格標籤的高度中輸入 70 像素,將這個資料格設成橫幅的相同大小。
- 第三列是放置內容的位置。您必須確定內容會對齊列的頂端。
- 選取表格中的第三列。
- 在「屬性」視圖的資料格標籤中,垂直對齊選取頂端。
新增內容區域
您需要一個用來顯示各網頁特定內容的範本區域,如 filtered_records 網頁中的搜尋結果或 create_record 網頁中用來填入新張貼文章的表單。
您已定義了網站的一般結構和顏色設計,現在,您已準備好新增內容區域。
- 在「選用區」視圖中,按一下網頁範本抽屜。
- 將內容區域元件拖放到第三列中。這是個別網頁將提供特定內容的位置。
這時會開啟「插入網頁範本的內容區域」精靈。
- 您可以按一下確定來接受 bodyarea 的預設內容區域名稱。
內容區域名稱可讓您指定不同名稱給不同內容區域,以便加以組織。
比方說,如果您在設計的網站,每個網頁都會有兩個內容區,您可以命名將移入主要內容 bodyarea 的區域,以及將移入搜尋結果 searcharea 的區域。
如果您需要將網頁範本套用在已存在的網頁上,這也適用,因為您可以依標記標示指派現有網頁的區域來移入範本的特定內容區域。
內容區域會插入表格資料格中。
- 將網頁範本變更儲存起來。
現在,您的基本範本結構應該看起來如下:
現在,您已建立了含有定義一些網站共用區域和內容區域的網頁範本。
您已準備好開始練習 1.5:將網頁範本套用在網站上。