網頁制作技術

                    2014年09月27日

                    FrontPage教程:編輯網頁

                    第一課:FrontPage教程:網頁制作基礎知識 
                    1.視圖與模式(一) 
                    現在進入FrontPage。單擊任務欄“開始”按鈕,選擇“程序”選項,單擊“Microsoft FrontPage”選項就可以了。 可能你會發現FrontPage界面和Word很相似[圖2-1],這是因為編輯WEB頁面和編輯Word文檔有很多同樣的設置,這些設置所用的圖標和Word中的是一樣的。 
                     
                    [圖2-1]FrontPage2000 界面 
                    視圖中的組框是用來切換視圖的,單擊里面的小圖標就可以切換到不同的視圖。FrontPage共有6種視圖[如圖2-1左],使用不同的視圖可以從不同的側面查看設計的WEB站點。對一個WEB站點而言,不斷更新是很重要的。隨著站點的成長,維護站點的工作量會越來越大。建立站點可能很快,但是如果沒有這6種視圖的幫助,維護起來就很困難了。 
                    這些視圖的使用不用一下就全部掌握,只要知道有這些視圖就可以了。 
                    2.視圖與模式(二) 
                    下面看一看同一個WEB站點在不同視圖中是怎樣顯示的。 
                    (1)單擊“網頁”按鈕,切換到網頁視圖,再單擊工具欄上的“文件夾列表”按鈕 ,窗口中增加了一個文件夾列表框[圖2-2]。網頁視圖是用來顯示選中的網頁的,雙擊文件夾列表中的某一個HTM文件,在最右方的工作區中就會顯示該網頁的內容。 
                    注意,此時工作區的左下角有三個切換顯示模式的選項卡[圖2-3]。單擊“普通”選項卡,就切換到了普通模式。在普通模式可以編輯網頁的內容以及設置各種格式。單擊“預覽”選項卡就到了預覽模式。如果要看一看當前編輯的文件在瀏覽器中的顯示情況,就使用預覽模式,在預覽模式下,是不能編輯網頁的。也可以切換到HTML模式直接對網頁對應的HTML文本文件進行編輯,從而為網頁作一些特殊的設置,前提是你要懂一點HTML語言(在教程附錄中有相關說明)。 
                     
                    (2)文件夾視圖以列表的形式給出了當前WEB站點的文件夾和文件夾里包含的文件[圖2-4]。由于一個WEB站點要涉及到許多文件,因此將這些文件分類并分別放到不同的文件夾就很有必要。比如,可以把所有的圖形文件放入IMAGES文件夾。FrontPage還提供了一個_PRIVATE文件夾,用來存放一些對網絡瀏覽者不可見的信息。下面為當前站點再添加一個SOUND文件夾,用來存放WEB站點用到的聲音文件:選中站點的根目錄,然后單擊“文件”菜單的“新建”項,在彈出的子菜單中選擇“文件夾”命令。在輸入SOUND,新文件夾就建立好了[圖2-5]。

                     
                    其實一個站點實際上就是一個目錄,在這個目錄下可以建立許多子目錄,并將站點的各種文件放在這些目錄里。 
                    (3)報表視圖給出了當前站點的一些統計信息。這里可以知道在站點的目錄中哪些文件被鏈接進站點了,哪些沒有。 
                    (4)導航視圖可以方便地組織站點中各網頁的層次關系,在本視圖中,每一個頁框代表一個網頁。如果站點設置了導航功能,就可以先在這里設置好各網頁的層次關系,然后用導航欄把這種層次關系表現出來。 
                    (5)超鏈接視圖是用來察看選中網頁中設置的超鏈接的。通過它可以方便地知道在網頁中設置了多少超級鏈接,以及是什么類型的鏈接。 
                    (6)任務視圖里放著關于站點維護的任務列表,如果站點大到由許多人共同維護,他們就可以通過任務列表知道工作的進展情況了。 
                    3.創建網頁 
                    這一節我們討論怎樣創建頁面。  
                    創建頁面最簡單的方法就是單擊FrontPage“常用”工具欄的“新建”按鈕。它的右方有一個向下的小箭頭,它是用來選擇要新建什么,可以用“新建”按鈕新建網頁、站點、文件夾和任務。默認狀態下是新建網頁。 
                     
                    如果要新建網頁,可以不用向下箭頭鍵選擇,而直接單擊“新建”按鈕。不過使用文件菜單的“新建”命令來新建網頁能夠有更大的選擇。 
                    單擊文件菜單的“新建”命令,選擇“新建網頁”,在“新建”對話框里,可以看到FrontPage提供的許多網頁模板[圖2-6],我們可以用這些模板來建立相應的網頁。在右下角的預覽框里可以看到選中模板的外觀。選擇“兩欄正文”網頁,這樣就創建了一個新的分為兩欄的網頁了。然后點確定。 

                    使用模板可以不用總是從空白網頁開始編輯,這樣就省力很多。


                    4.修飾文本 
                    怎樣使文字更豐富、活潑呢?一個簡單的方法就是使用“格式”工具欄。 
                    字體設置:選上文字,打開格式工具欄的“字體”下拉列表框,在里面選擇相應的字體就可以了。如果瀏覽網頁的人使用的計算機沒有設置的字體?瀏覽器會用系統默認的字體代替你設置的字體。不過,使用常用字體是一個好習慣。 
                    字號設置:在“格式”工具欄“字號”下拉列表框中選擇相應字體就可以了。 
                    工具欄上的B、I、U圖標的作用是: 
                    按下B按鈕 ,被選中的文字就會變為粗體 
                    按下I按鈕 ,被選中的文字就會變為斜體 
                    按下u按鈕 ,被選中的文字就會帶下畫線 
                    字的顏色:單擊“格式”工具欄“字體顏色”按鈕旁的向下箭頭[圖2-9],選擇適當的顏色,字的顏色就改變了。

                     
                    還可以對字體進行一些其他設置。選擇“格式”菜單的“字體”命令,在這里我們還可以作進一步的設置。這里除了“格式”工具欄可以做的設置以外,還可以設置許多效果。 
                    “字符間距”選項卡:它是用來設置文字的間距的。單擊“間距”下拉列表,可以選擇字符的間距是普通、擴充還是緊縮的。選擇擴充,這時預覽框的文字間距就變大了。也可以調整間距大小來改變間距,輸入10,文字的間距就更大了。 
                    “定位”下拉列表:在FrontPage中每一行都有一個底線,定位就是指文字相對于底線的距離。也就是把文字上下移動,現在選擇“上移”,文字就向上移動了。預覽框中的黑線就是行的底線。 
                    5.項目符號和編號 
                    設計網頁應該層次分明,結構清晰。這可以通過FrontPage的列表功能解決。 
                    選中要列表的內容,單擊“格式”工具欄上的“項目符號”按鈕 ,默認情況下,項目符號是一個小黑點。你也可以選擇其它的項目符號,單擊“格式”菜單,選擇“項目符號和編號”命令。選擇“圖片項目符號”選項卡,單擊“瀏覽”按鈕,點“剪貼畫”,再點Web符號按鈕,選擇合適的圖片,單擊“確定”按鈕。 
                    對有順序的內容列表可以使用編號。單擊“格式”菜單的“編號”按鈕 。現在有一個問題,“站點的主題”、“站點的共享邊框”兩行是屬于“設計站點風格”的內容,可是也編號了。解決的方法是把這兩項選中,單擊工具欄上的“增加縮進”按鈕 ,再次單擊“增加縮進”按鈕,這樣就可以了[圖2-12]。要把這兩項改為其他編號方式,可以選擇“格式”菜單的“項目符號和編號按鈕”,在編號框里選擇合適的編號形式,單擊“確定”按鈕。 
                    怎樣解決列表分級太多而顯得不簡潔的問題?方法是把子列表折疊起來,稱為“折疊大綱”。將鼠標光標移到要折疊的列表的上一級處,單擊鼠標右鍵,選擇“列表屬性”命令,將“啟用折疊大綱”和“開始時折疊復選框”選中,單擊“確定”按鈕。 打開它時只要單擊它就打開了。 
                    6.插入水平線 
                    在網頁中適時的插入水平線可以使層次分明。最簡單的方法是插入水平線使需要分隔的部分分開。把插入點調整到插入水平線的位置,選擇“插入”菜單的“水平線”命令。 
                    雙擊插入的線條,在彈出的“水平線屬性”對話框里單擊“顏色”下拉列表, 選擇相應的顏色,可以改變線條顏色。在對話框中有“窗口寬度百分比”和“像素”選項,它們的作用是通過調整寬度數值設置線條的寬度,但是這個數值的單位卻是由它后面的選擇決定,調整“高度”的數值,可以改變線條高度。 
                    單擊水平線,選中它。按ALT ENTER鍵,也可直接進入水平線對話框。 
                    水平線變化有限,裝飾性不強。我們還可以插入更豐富的線條來修飾頁面,那就是線條圖像。 線條圖像就是一個特別狹長的圖像。將水平線選中,按DEL鍵,將水平線刪除,選擇“插入”菜單的“圖片”命令,單擊“剪貼畫”選項。選擇“圖片”選項卡,這里把FrontPage提供的剪貼畫按類別放在了下面的列表框中,選擇“WEB框架”,選擇小石頭圖像,單擊“插入剪輯”按鈕。由小石頭構成的線條就插入完成了。 
                    如果想把線條縮短一點,可以在線條上單擊鼠標右鍵,選擇“圖像屬性”命令,打開“圖片屬性”對話框,選擇“外觀”選項卡,選擇“指定大小”,將寬度的單位設置為百分比,將寬度調整為80,單擊“確定”按鈕。 
                    7.插入時間標記 
                    在Internet上我們經常看到許多網頁上都有一個最新更新日期,用來告訴用戶頁面上一次更新是什么時候,這是怎么做的呢?看完下面的部分你就知道了。 
                    時間標記當活動網頁被重新編輯或自動更新之后,會自動改變。設置起來也很容易:在頁面末尾輸入:“更新時間”,執行“插入”菜單的“日期與時間”命令,在“日期時間屬性”對話框中選擇“該網頁上次編輯日期”,如果要改變日期的格式,可以單擊“日期格式”下拉列表,選擇合適的格式。 
                    8.插入注釋 
                    怎么在網頁里插入注釋呢?(在我們創建編輯和修改網頁的過程中,經常需要插入一些文字,表明設計的意圖和方法,在編輯網頁時作為參考和提示,這就是注釋。) 
                    插入注釋的方法是:普通模式下單擊當前網頁要插入注釋的位置,把插入點設置到那里。選擇“插入菜單”的“注釋”命令,這樣就會彈出“注釋”對話框,在“注釋”文本框中輸入注釋的內容,單擊“確定”按鈕。 
                    在指定的位置注釋出現了。現在單擊“預覽”選項卡,切換到預覽模式,注釋沒有出現。 實際上注釋并不是在瀏覽器中顯示的網頁的一部分,瀏覽者通過瀏覽器是看不到網頁里的注釋的。 
                    9.預覽新建頁面 
                    設計好的頁面,應該檢查它在瀏覽器中是否顯示正常。 
                    方法是,一般只要切換到預覽模式就可以了。單擊“預覽”選項卡,在這個預覽模式下的顯示和在瀏覽器中的顯示是一樣的。但這并不意味著我們就不必用瀏覽器來檢查編輯的網頁了。因為即使是同一個頁面,可能在不同的瀏覽器中顯示會不太一樣。比如在Internet Explorer中是這樣顯示的,但是在Netscape中又是那樣顯示的。所以,我們要在自己的機器上多裝幾個瀏覽器,用來檢查網頁的兼容性。 
                    怎么用不同的瀏覽器來檢查呢?選擇“文件”菜單的“在瀏覽器中預覽”選項,在瀏覽器列表框中選擇不同的瀏覽器[圖2-18]。(以Internet Explorer 5.0為例)單擊“確定”按鈕。就可以看到新建頁面在瀏覽器中的效果了。 
                    這一部分內容很簡單,但是這些內容在制作網頁的過程中幾乎每次都會用到,“萬丈高樓平地起”,不要小看這些最基本的操作呀。

                    上一篇:沒有了
                    下一篇:Frontpage教程:教你制作網頁框架

                    二維碼 返回頂部
                    31选7走势图