Microsoft FrontPage XP提示-打造一個新的天堂

來源:互聯網
上載者:User
frontpage|技巧

網頁製作是什嗎?

網頁製作就是根據網頁效果圖,把它實現成瀏覽器中可以瀏覽的網頁。我們已經使用過或者聽別人介紹過很多的網頁製作工具。FrontPage,Dreamweaver,GoLive等等這些都是我們平常所知道的網頁設計軟體,而FrontPage毫無疑問是一個簡單易用,功能強大的網頁製作工具。如今FrontPage推出了新的版本,他依舊是和Office 一起推出的,不過不同於以往的是,新版本Office系列軟體不再是以年份來命名了,使用了新的命名方式,MicroSoft公司將其冠名為Office XP,XP是單詞Experience(“體驗”)的縮寫。所以我們下面介紹的就是FrontPage XP。毫無疑問,我們下面的網頁製作過程將是一個不同於以往的全新的體驗過程。

設計初步――建立網站

  • 啟動FrontPage XP,如果是第一次啟動FrontPage XP時,會發現新版的FrontPage在使用者介面上做了一些改動,在右邊有一個幾乎佔據螢幕五分之一空間的任務窗(圖一),集中了一些主要的命令,而這些任務命令會隨著你操作的不同而改變。實際上,Office XP的每一個應用程式,從Outlook到Publisher,都有工作列。

     

圖一 FrontPage XP介面

  • 我們選擇空白網站,因為我們需要建立的是一個網站,而不僅僅是一個頁面,當然,我們在網站建立的過程中需要添加頁面的時候,當然是選擇建立一個空白頁面了。然後彈出Web網站模版視窗,實際上又很多模版可供選擇,如:個人網站,公司展示網站,客戶支援網站等等,這些模板都是很不錯的選擇。為了簡單起見,我們選擇個人網站,圖二就是用個人網站模版建立的網站的頁面。

     

圖二 用個人網站模板建立的網站的頁面

  • 我們先切換到超連結檢視狀態看看FrontPage XP是如何設計整個網站的吧。

     

圖三 超連結視圖

左邊的樹狀結構列出了所有的頁面,可以通過按加號和減號來擴充和收縮。右邊列出當前頁的串連,同樣也可以通過按加號和減號來擴充和收縮。

基本要素――文字、超連結、映像

     

  • 先建立一個頁面吧,還是從一個空白的頁面開始。

     

  • 首先是對頁面屬性的設定,在網頁上按右鍵,選擇網頁屬性,當然你也可以通過選擇主菜單中的檔案->屬性,然後在彈出的對話方塊中就可以設定頁面屬性了,如圖四。

     

常規設定的是頁面標題,位置,背景音樂以及使用的指令碼等等;背景設定的是背景顏色,圖片以及連結的顏色等等;邊距設定的是頁面邊距等等;此外還可以設定自訂變數和語言選項等等。

  • 文本在網站上的應用是最廣泛的,一個內容充實的網站必然會用到大量的文本,而怎樣編輯好這些文本成了擺在我們面前的第一問題。在以往的HTML編寫中,經常要考慮文本前後的HTML標籤,這實在是一種麻煩的事。不過在FrontPage XP中,這變成了一種簡單的事情了。我們在頁面中簡單的添加幾個字元,然後就可以通過工具列中改變字元的屬性等等,一切就像在Word中操作一樣。

     

圖五 設定字元屬性的格式工具列

對於具體的字元屬性設定,可以在選擇要設定的字元以後點擊右鍵,然後選擇字型,你可以看到一個更加強勁的字型的設定選項。

  • 如果覺得這樣的設定不夠規範,或者太煩了,自己懶的動手,FrontPage XP也為你提供了一種方便的方法――設定主題,在FrontPage XP中,使用者可以使用的主題數有67個。每一個主題都有不同的外觀和風格,包括按鈕、背景、字型等。使用者不僅可以在一個網頁中採用一種主題,而且可以在整個網站中採用一種主題。而且,現在的FrontPage XP,擁有更多的可操作性,你可以隨心所欲的修改這些主題風格。

     

圖六 主題風格

  • 當然,對於字元,我們也可以給他設定超級連結,選中字元以後點擊右鍵,選擇超連結,然後在超連結設定對話方塊中你可以發祥FrontPage XP的超連結設定比任何一個版本的FrontPage都要強,甚至於比Dreamweaver等工具強多了。

     

圖七 超連結設定

不僅可以設定當前檔案夾,瀏覽過的頁面以及近期使用的檔案,而且可以是文檔中的書籤,建立文檔,電子郵件地址,當然可以是直接的頁面地址。我們在這裡設定成Http://www.microsoft.com/china。

  • 對於頁面上的任何內容,我們可以加上動態HTML效果,選中打算加上效果的字元,圖片等等,然後在主菜單中選擇格式->動態HTML效果,然後就可以設定具體的DHTML效果了,格式是在(選擇一種事件)應用(選擇一種效果)(選擇設定)。

     

圖八 動態HTML效果

對於網頁的過渡,在主菜單的格式->網頁過渡中也可以設定。不要小看了這個小小的動態HTML效果和網頁過渡,如果運用恰當的話,他可以為你的網頁增色不少。

  • 在網頁設計上,圖形並不只單純地表達一項資訊或意義,還可以表現一個網站的風格、加強網站的特色。FrontPage XP提供了很多繪畫工具,習慣使用Word和PowerPoint使用者一定不會對這些繪圖工具感到陌生。使用者還可以利用Office 剪貼簿把其它Office應用程式中製作的圖片粘貼到FrontPage XP中。FrontPage XP中雖然不能直接製作現在網路上流行使用的GIF、JPEG等格式的檔案,但是可以間接的插入其他軟體製作好的檔案。在主菜單裡選擇

     

 

上面我們介紹的是FrontPage XP中網頁基本元素――文字,連結,影像檔的製作,從下面開始,我們介紹是FrontPage XP中的一些進階技術。雖然稱為進階技術,不過他們在FrontPage XP中仍然是很容易就可以實現的。

裝飾一新――進階技術的使用

  • 我們先在頁面的最上方添加一個網頁橫幅,也就是在主菜單裡選擇插入->網頁橫幅,然後選擇圖片。然後我們在頁面上可以看到這樣一串字元“[將此網頁添加到“導航”視圖中,以便在此處顯示網頁橫幅]”,我們切換到導航視圖,我們把頁面從左邊資料夾清單拖到右邊的導航中,你可以看到有一條虛線出來了,這個表示的就是導航的位置。

     

圖九 導航視圖

然後切換回整頁模式,可以發現原來的字元已經變了模樣。這裡的“”全新體驗是我們在前面設定的頁面標題。

圖十 網頁橫幅效果

  • FrontPage XP中能插入的表單有所改善,能插入的類型如圖十一所示,其中一些在其他網頁製作工具裡很難達到的效果都可以通過很簡單的操作完成,如檔案上傳,試想想看,如果在Dreamweaver裡面做這個效果,你會如何辦了?在FrontPage XP裡,當然簡單了,你只需要點擊一個按鈕,然後剩下的一切操作都交給FrontPage XP了。

     

圖十一的左下角顯示的就是插入的檔案上傳的表單的顯示,在選中這個表單以後通過表單屬性就可以設定這個表單提交的內容是提交到一個檔案,一個Email地址,或者直接放到資料庫中,或者是提交給一個ASP等指令檔,還可以通過選項來設定參數。

  • 表格在網頁設計中的意義遠非一般概念中的表格應用的理解,它最大的用處在於控制頁面元素,使網頁排版更加次序井然。除了動態HTML的層外,表格是唯一能將頁面元素按設計者要求顯示的工具。而FrontPage XP中的表格操作已經簡單到了如同在Word中操作一樣。如果你熟悉Word中表格的操作,那麼FrontPage XP中的表格操作就很簡單,如果不熟悉,那也沒關係,因為它的確太簡單了。關於表格的所有設定都在主菜單的表格設定中。如圖十二所示。

     

眾所周知,FrontPage的每一個新版本都會推出新的或者增強功能的WEB組件,在FrontPage XP中也不例外,FrontPage XP的WEB組件是無可比擬,前所未聞的,通過這些功能強大的WEB組件,使用者可以快速地在網頁中加入進階技術。其中新增的組件包括圖片庫、連結條、儲存到資料庫、自動網頁內容等。利用FrontPage XP的這些進階技術,使用者不必進行複雜的編程就可以達到專業的效果,節省了很多時間。除了上面這些新增的組件外,FrontPage XP還增加了一些新的工具,如:自動網頁內容、活動討論板、動態線上調查表、訪問分析、Top 10列表、增強報告功能等等。正是這些工具,使網站管理員的繁重工作變得輕鬆起來了。其中圖片庫的功能簡單易用而又功能強大,下面我們看看圖片庫是如何使用的。

  • 在主菜單中選擇插入->WEB組件->圖片庫,然後選擇投影片版式。FrontPage XP中為我們提供了四種圖片庫版式,分別是:水平編排、蒙太奇編排、投影片式編排和豎直編排。這四種方式都是由FrontPage XP來建立縮圖的,不需要我們手工操作的。然後在圖片庫屬性中,首先添加我們打算在這個頁面中顯示的映像,對於這些映像,我們可以事先定義他們在整個圖象庫中顯示的順序,就是通過上移、下移來達到。而且,對於每一副圖片,我們都可以加上標題,而且我們可以定義這個標題顯示的方式。

     

     

  • 在主菜單的檔案裡面選擇用瀏覽器預覽,然後選擇使用的瀏覽器和解析度,點擊預覽,就可以在瀏覽器中看到我們的頁面了。

     

圖十三 頁面預覽

可以看到,網頁上方是預覽小圖片,下面是大映像。縮圖按行編排方式並可以左右滾動,而在上方選中的圖片在下面的中央以完全尺寸顯示。

  • 在FrontPage XP中還有一些有用的網頁工具,如重新計算超連結和網頁最佳化。在以前版本中所說的FrontPage中頁面臃腫龐大的情況在FrontPage XP中一無是處了,他們都不再存在了。你只需要執行一下網頁最佳化,就可以在報告中看到你的網頁已經變小很多了。在FrontPage XP只需要一個簡單的點擊就可以完成簡體中文和繁體中文網頁的相互轉換。因此你不再需要為製作多語言網站的繁瑣事情而煩勞了。

     

打造一個天堂

一個高明的網頁創作者,不僅希望能夠建立出美觀的頁面,而且希望產生最精簡和高效的HTML原始碼。而這正是FrontPage XP帶給你的一份禮物,你能夠對網頁原始碼進行直接精確地控制,你能控制全域,你能感受到網頁編寫的所有樂趣。FrontPage XP儼然是一個活潑的精靈,它聽你指揮,聽你講述每一個夢想。為你打造一個全新的天堂!



聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.