FrontPage XP網頁的布局

來源:互聯網
上載者:User
frontpage|網頁   製作一個漂亮的網頁,離不開網頁整體布局的設計,網頁布局設計的合理與否,直接影響頁面的美觀。網頁布局設計一般採用表格和架構,表格的使用相對來說就更加普遍了,這次我們就以表格和架構為例,來看一看如何安排網頁的布局。

表格的使用

  表格是由儲存格按照行與列組成的,使用表格可以很好地將網頁中的對象按格式編排,一般常用於頁面內圖片與文字的版面安排。

STEP 1 插入表格

  建立一個空白網頁,然後將插入點放在要插入表格的位置,執行菜單“表格/插入/表格”命令,開啟插入表格對話方塊。在“行數”、“列數”框中分別輸入4和3,在“對齊”框中選擇表格在網頁上的位置為預設,並在“邊框粗細”框中輸入表格邊框寬度為0,即不需要表格邊框。要改變儲存格邊框和內容之間的間距,可以在“儲存格邊距”框中輸入數值,改變儲存格之間的間距可以在“儲存格間距”框中輸入數值,如圖1所示。


圖1 設定表格參數

STEP 2 表格的選擇

  在表格中的任意位置單擊滑鼠,然後執行菜單“表格/選擇表格”命令即可選中整個表格。如果將插入點放在儲存格中,執行“表格/選擇/儲存格”命令可以選擇目前的儲存格。如果想一次選擇多個儲存格,先選中一個儲存格,按住“Ctrl”鍵,再單擊要選擇的其他各儲存格即可。

STEP 3 表格屬性

  在“網頁”視圖中,用滑鼠右鍵單擊表格,並從捷徑功能表上選擇“表格屬性”命令,開啟表格屬性對話方塊,如圖2所示。


圖2 在邊上設定表格屬性

  在“對齊”下拉式清單中選擇表格在網頁上的位置,比如“靠左對齊”。“浮動”選項用於指定文本是以什麼方式繞表格排版,如果不需要文本繞表格排版,可以選擇“預設”。此外,還可以改變儲存格間距和儲存格邊距,以及表格的列寬和高度等。

  在“邊框”選項中,指定“大小”可以設定表格的邊框寬度,如果不需要邊框可以設定為0。“顏色”選項用於設定表格邊框顏色,“亮邊框”和“暗邊框”可以為表格設定具有立體效果的雙色邊框,設定這兩個參數的時候,要注意調節好顏色的取值。

  在“背景”選項中,可以指定表格的背景色。如果打算在表格中顯示背景圖片,可以選擇“使用背景圖片”複選框,然後單擊“瀏覽”按鈕選擇圖片即可。

STEP 4 巧用儲存格

  選擇第1行第2列和第1行第3列兩個儲存格,然後單擊滑鼠右鍵,在捷徑功能表上選擇“合併儲存格”命令,即可合并這兩個儲存格。然後將插入點定位在第1行第1列中,執行“插入/圖片/來自檔案”命令,插入網站的logo表徵圖。接下來在第1行第2列中插入網站的Banner廣告條。

  選中表格第2行,將此行合併儲存格,然後再單擊滑鼠右鍵,選擇“拆分儲存格”命令,在開啟的對話方塊中,在“列數”右側輸入數值5,這樣即可將此行儲存格拆分成為5列。

  選中此5列儲存格,單擊滑鼠右鍵,執行“儲存格屬性”命令,在開啟的對話方塊中,設定儲存格“背景”顏色為淺灰色,如圖3所示。最後在剛才設定的5個儲存格中,分別輸入網頁的導覽列目名稱,並為各個欄目設定好相應的連結。


圖3 在此設定儲存格屬性

  同樣道理,再合并其他儲存格,並完成整個頁面的製作。

架構的使用

  架構可以將瀏覽器視窗分成不同地區,每個地區都可以顯示不同的網頁。可以將一些架構中的內容永遠保留在瀏覽器視窗中,而其餘視窗則發生改變。

STEP 1 建立架構

  執行菜單“檔案/建立/網頁或網站”命令,在開啟的任務視窗中單擊“網頁模板”,然後選擇“框架頁”選項卡,單擊要使用的框架頁模板後,“確定”。

STEP 2 設定初始頁

  建立好架構後,即可進入架構設定介面,如圖4所示。


圖4 在此進行架構設定

  單擊各個架構中“設定初始頁面”按鈕,然後在檔案夾中選擇一個已建立的網頁,即可在相應的架構中顯示相應的網頁。

  此外,還可以單擊“建立網頁”按鈕,此時FrontPage XP會自動在該架構中建立一個新的空白網頁,這個新網頁會被自動設成初始頁面,讀者朋友可以結合以前介紹的相關知識對架構空白網頁進行設計。

  架構可以作為網頁布局中一項補充的工具,適當的運用可以使網頁布局更加合理。

  到站提示:要製作一個漂亮的網頁,需要靈活運用網頁布局工具,才能達到事半功倍的效果。下一站我們將在FrontPage XP中使用樣式表CCS,通過樣式表來給我們的首頁增加特效。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。