您的位置:首頁 > 網頁制作 > FrontPage

FrontPage2003輕松布局網頁

日期:2005-11-12 00:00:00 點擊: 來自: 作者:

  很多朋友對FrontPage2003中增加的網頁布局功能很感興趣,現在我們一起來深入了解這一實用功能。

  用FrontPage2003的“布局表格和單元格”功能布局網頁時,需要通過兩部分來完成。

  首先通過“布局表格”功能來為網頁布局創建一個框架,然后通過“布局單元格”功能為該框架填充包含有網頁內容(包括文本、圖像、Web部件和其他元素)的區域,也就是單元格。

  下面我們就以設置一個單位網站首頁為例來了解一下用布局表格給網頁布局的過程。

  一、創建布局表格

  1.創建布局表格

  打開一個空白網頁,并切換到“設計”視圖下,單擊“表格”菜單中的“布局表格和單元格”命令,隨后在右側彈出一個任務窗口(圖1),在該任務窗口下面程序提供了多種表格布局模板,在此單擊其中需要的模板即可將該模板添加到網頁中。


圖1

  2.繪制布局表格

  如果你對模板中提供的布局表格不太滿意,還可以用手工繪制的方法創建一個布局表格。創建時首先在“新建表格和單元格”項中單擊“繪制布局表格”,隨后將指針移到操作窗口最左端,然后拖動鼠標即可繪制表格。

  3.設置表格屬性

  插入表格后,還需對表格屬性進行設置。在“表格屬性”項中設置該表格所需的屬性。

  提示:在設置表格時,如果要想覆蓋網頁的默認邊距,并讓布局表格跨到文檔窗口的邊緣,可以將表格中的各個邊距的屬性都設置為0。

  在設計框架時經常需要調整某一行或列的屬性,這時可以通過表格中列寬和行高的標簽來完成。在操作窗口中單擊布局表格需要調整的邊框,每一側都會出現顯示列寬和行高的標簽。每個標簽都包括一個下拉箭頭,如更改行高度時,單擊此下拉箭頭彈出一個下拉菜單,選擇“更改行高”命令,在彈出的“行屬性”對話框中重新輸入該行高度值即可。

  FrontPage2003還提供了一個表格自動功能,它可以按照比例自動伸縮,調整表格的寬度和高度,使用時在邊距標簽下拉菜單中選擇“自動伸縮”命令即可快速地對表格的尺寸進行調整,非常方便。


  二、單元格的添加和設置

  1.添加單元格

  布局表格創建了網頁框架后,還要向表格中添加單元格。添加時單擊“新建表格和單元格”項下的“繪制布局單元格”,隨后按照繪制表格的方式來繪制單元格。如果我們需要繪制連續的單元格時,單擊“繪制布局單元格”后,按住Ctrl鍵同時拖動鼠標即可。

  2.設置單元格

  由于首頁中需要添加的鏈接和按鈕較多,因此該頁面中的單元格比較復雜。為了美觀,在該頁面中還需要對單元格進行相關的設置。

  (1)單元格屬性設置

  在“單元格屬性設置”任務窗口中單擊“單元格屬性和邊框”命令,隨后可以對選中單元格的高度、寬度、背景顏色、邊框、邊距等項進行相應的設置。設置方法與表格的設置相似。

  (2)設置單元格角部屬性

  為了美觀,在制作網頁時還需要添加一些圓角圖片來修飾網頁,如導航工具條邊緣等。以前在網頁中添加這些圖片非常麻煩,而在FrontPage2003中我們可以通過對單元格角部屬性的設置輕松解決這一問題。

  首先在“單元格格式”窗口中單擊“單元格角部和陰影”,隨后在下面出現了“角部”和“陰影”的設置窗口。在“角部”項中點選“使用默認圖像”選項,隨后設置好該角部的寬度和高度,并在下面的顏色中設置好該角部的顏色。設置后在“應用”中選擇一種角部樣式,即可將該角部添加到單元格中。

  此外,我們可以通過“使用自定義圖像”來添加一個自制的圖片樣式(圖2)。


圖2

  (3)設置單元格的陰影屬性

  在“陰影”項中首先對陰影的寬度進行設置,隨后在“柔和度”框中鍵入所需的值。單擊“顏色”下拉菜單可以為該陰影選擇一種顏色,在“應用”項中輸入一種陰影樣式,即可將設置好的陰影添加到網頁單元格中。

More..素材圖片 Picture Navigation
FrontPage熱門 Class Hot
FrontPage推薦 Class Commend
版權所有:中國網站資源 2005- 未經授權禁止復制或建立鏡像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.21ftd.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
ope电竞