萬盛學電腦網

 萬盛學電腦網 >> 媒體工具 >> FrontPage簡明教程:網頁布局

FrontPage簡明教程:網頁布局

  通常網頁的布局使用到的是FrontPage中的表格和框架菜單欄裡的命令。

  表格(TABLE)是將頁面中的內容以表格的形式排列,常用於單一頁面內圖片與文字的安排,是最常用的布局命令。

FrontPage簡明教程:網頁布局 三聯

  圖3.1

  框架(FRAMES)是在同一浏覽器窗口中顯示多個相互隔離的HTML頁的結構。使用框架組織頁面時,每個框架顯示一個不同的獨立頁面或者圖像,你可以將一些框架中的內容永遠保留在浏覽器窗口中,而其余窗口則發生改變。

FrontPage簡明教程:網頁布局

  圖3.2

  表格的使用十分簡單,一般經過如下步驟:

  § 插入表格

  § 修改表格樣式

  § 填充內容

  一、輕輕松松插入表格

  點擊“表格”菜單中的“插入表格”,在彈出的對話框中可以對所需表格的行列數及邊框屬性進行設置。插入一個大概樣子的表格,自己調整它在整個網頁中的位置,為之後填充內容做好准備。

FrontPage簡明教程:網頁布局

  圖3.3

  二、對表格外觀進行前所未有的美化

  鼠標左擊已經插入的表格,彈出的菜單中選擇“表格屬性”選項。彈出的對話框可以讓你對表格的外觀進行設置。基本上除了行列數這些需要使用插入行列等菜單完成的功能,在此設置的大都和表格的外觀有關。

FrontPage簡明教程:網頁布局

  圖3.4

  FrontPage 2002的新功能:表格自動套用格式提供了快速和容易的方法,來創建具有專業外觀的表格。用戶可以選擇他們想要使用的樣式,可以自動更改表格的邊框、底紋和顏色。使用新的填充表格,用戶可以將一個單元格的內容快速地重復輸入到該單元格右側的單元格(向右填充),或輸入其下面的單元格(向下填充)。當用戶想要將相同內容復制到多個單元格中時,該功能將節約用戶的時間。拆分表格讓用戶能夠將任何位置的表格快速和容易地拆開。當用戶想要在表格的各行之間添加文本或圖形時,這會很方便。

  § 在 FrontPage 中編輯任何表格時,單擊該表格,並從表格菜單中選擇表格自動套用格式。從幾個表格格式和設計中選擇,以創建想要的外觀。

  § 從表格菜單中單擊插入,插入五個新行,然後選擇行或列。在想要復制的內容下面,添加所需數量的行。選中想要復制的文本和想要填充的單元格。從表格菜單中選擇表格填充,然後選擇向下填充或向右填充,以匹配突出顯示的單元格。

  § 在表格中間挑選一個單元格,然後從表格菜單中選擇拆分表格。

  三、簡單填充完內容。

  只需點擊鼠標在表格中與插入的地方,就可以輸入文字或者創建圖像,或者導入文字圖像等等,簡簡單單的操作之後,一張有條有理的網頁就做好了。

FrontPage簡明教程:網頁布局

  圖3.5

  與以往的FrontPage一樣,在FrontPage 2002中可以非常方便地利用框架來組織頁面。

  一般地,利用框架組織WEB頁面需要經過如下步驟:

  一.創建框架

  二.設置框架屬性

  三.設定初始頁面

  四.確定框架間的調用關系

  一、創建框架原來如此輕松!

  在FrontPage 2002中,點擊新建圖標旁的小三角調出新建網頁模板選擇窗口,選擇滿意的模板創建框架Web頁面。如果沒有模板符合需要,你可以選擇最接近的風格,然後改變框架大小或者增加框架以得到想要的結構。

FrontPage簡明教程:網頁布局

  圖3.6

  可以拖拉框架邊改變框架大小;增加或刪除框架則可以使用框架菜單中的拆分框架和刪除框架命令。

  在這裡我們建立一個目錄框架頁面。

  二、設置框架屬性

  點擊頁面右鍵菜單中的框架屬性,在彈出的對話框中設置框架屬性。你可以指定框架名稱、控制框架之間邊界的大小、在一個框架內是否允許滾動等。

  在顯示滾動條選項框中選擇在該框架中是否允許存在滾動條。點擊框架網頁按鈕進入該框架的頁面屬性設置窗口。在框架間距標簽中設置框架之間的邊界的寬窄,也可以取消顯示邊框的選項,不顯示框架邊框。記住,框架之間的邊界越大,對於讀者觀看頁面就越困難。

FrontPage簡明教程:網頁布局

  圖3.7

  一般地,我們把左、右兩個框架名稱定義為“contents”(目錄)和“main”(主框架)。

  三、設定初始頁面

  作為Web設計者,你要決定當第一次出現框架頁面時,在每個框架內顯示哪個頁面即初始頁面。只要框架的初始頁面存在於你的Web中,這個頁面就能夠在每次顯示框架時自動出現在框架中。

  點擊工作區域上的“設置初始頁面”按鈕,在對話窗口中設置初始頁面。這時你可以選擇點擊原有文件中的浏覽按鈕查找需要的頁面,或點擊新建頁面按鈕直接在框架中新建一個頁面。在這裡我們新建一個頁面。

FrontPage簡明教程:網頁布局

  圖3.8

  四、組織框架間的調用關系

  在使用框架時一定會遇到如何處理框架間的調用關系的問題,即點擊一個框架中的超鏈接後目的頁面將會出現在哪一個框架內,或是新打開一個浏覽器窗口。我們接著上面的例子來學習如何處理調用關系。

  現在,我們需要在左邊的頁面中加入超鏈接,選中頁面中任一藍色按鈕作為加入超鏈接的對象,這時我們希望所鏈接的頁面在調入時出現在框架“main”中。你會發現在設置超鏈接窗口的右側有一目標框架按鈕,點擊按鈕將出現目標框架窗口,在這個窗口中你可以隨意設定目的頁面將出現在哪個框架中。你可以直接在“當前框架網頁框”中選擇左或右框架作為目的框架。你也可以選擇“公共目標區框”中的選項來確定目標頁面的出現形式:

FrontPage簡明教程:網頁布局

  圖3.9

  “默認網頁(main)”:目標頁面將出現在默認目的框架中,默認目的框架可以在框架的頁面屬性設置窗口中設置。如果不加以說明,系統將按照默認目的框架調用目標頁面。

  “當前相同網頁”:目標頁面將出現在同一框架中,也就是覆蓋調用頁面。

  “整個網頁”:目標頁面將覆蓋整個框架頁面,獨立地出現在浏覽器窗口中。

  “新窗口”:目標頁面將出現在新打開的一個浏覽器窗口中,而在原來的浏覽器窗口中不發生任何變化。

  在上面的例子中,我們將“Contents”框架中所有鏈接的目的框架都設為“main”框架。

  好了,你已經能夠在你的主頁中利用框架來組織頁面了!很簡單,是嗎?

FrontPage簡明教程:網頁布局

  圖3.10

  新功能:FrontPage 2002現在支持由高級技術(例如 HTML 4)實現的功能,包括嵌入式框架、語言屬性以及表單中的按鈕和字段集。讓這些特性幫助您做出更具動感和專業的Web站點

  從插入菜單中,選擇嵌入式框架,然後選擇“設置初始網頁”並浏覽到您的站點上或 Internet 上的任何 Web 頁,(插入項的名稱/地址應當出現在地址窗口中),然後單擊確定。所選頁將出現在 Web 頁的框架中。通過選中它然後拖動角落,還可調整該框架大小。(連載)

copyright © 萬盛學電腦網 all rights reserved