FrontPage2003建站全攻略2

來源:互聯網
上載者:User
frontpage|攻略

  主題

  經過以上過程,我首頁製作也基本完成了。但頁面的背景圖、導覽列、顏色選擇,邊框等都不太令我滿意,而這些都是模板自動設計的,而且不能修改。這個時候,就要使用主題了。

  主題,就是FrontPage針對頁面中的背景、導覽列、橫幅、按鈕、各種邊框自動進行設定,主題的內容有幾十種,操作者可以根據自己的喜好選擇,這樣,就可以省去自己分別對這些頁面元素的設定。

  操作 為網頁指定主題:開啟首頁,選擇“格式/主題”,彈出主題視窗。在主題視窗的左邊,列出了可以選擇的主題,預設的是“直邊”,點擊這些主題,可以在右面視窗查看該主體的風格,如橫幅是什麼樣、是什麼樣的顏色、標題的樣式、超連結的顯示樣式,導航條的樣式等等。另外,還可以設定是否需要背景圖片,是否使用鮮豔的顏色等。選擇“漸藍”主題,單擊確定,即可在網頁視窗看到效果了。

  主題都是事先設計好的,如果你有什麼特殊要求,而FrontPage又不允許你在網頁編輯時修改,這個時候,可以自訂佈景主題。

  操作 測試網頁和網站:現在,我的首頁基本完成了,要實地測驗一下首頁和整個網站的情況,看頁面顯示是否正常,各個超連結是否正確,設計上還有什麼缺陷。開啟要預覽的首頁,然後選擇“檔案/在瀏覽器中預覽首頁”,這樣,我就看到了我精心設計的首頁的真正模樣了。測試的時候,要仔細看頁面的各種元素,看是不是有不正確的地方。多改變一下瀏覽器的一些相關設定,如字型大小、全屏、縮放視窗。點擊頁面上的超連結,看是否能跳轉到正確的頁面。另外,最好將整個網站檔案夾複製到其他機器上,看是否正確,特別是字型顯示是否正確。

  操作 查看網站報表情況:在視圖視窗選擇“報表”表徵圖,開啟報表視窗,在這個視窗,可以看到整個網站的一些統計資料。仔細查看這些資料,看看有沒有什麼問題,如無效的超連結等。如果一切沒有問題,就發行就緒了。

  進一步學習的建議:網頁的美化是一個經驗和修養的問題,一方面多實踐,另一方面多看優秀的網頁。另外,網站的測試很重要,要摸索和掌握這方面的經驗和技巧。

  樂有五音,善用五音而成樂師。食有五味,善用五味而成庖廚。我用什麼來建家?水木金火土。

  文  字

  通過模板建立的網站和網頁只是一個結構雛形,現在來開啟這些網頁,添加各種元素,開始建設自己的家。我們首先從首頁面(index.htm)開始,這可是家的大門。

  操作 認識模板頁面:開啟首頁檔案,在“網頁”視圖視窗可以看到該首頁的大致結構。頁面分成了三個部分,上面的部分主要放置標題圖片(圖片元素為主),左面的部分主要放置連結到其他網頁的目錄(連結元素為主),而中間的大部分放置該首頁的主要內容(文字元素為主)。

  一般模板首頁,通常由橫幅、目錄、本文等幾個部分組成,只是數量和相片順序不一樣罷了,或者多一些特殊的元素。當然,也有完全是有一些特殊元素構成的頁面,如多重巢狀表格格、組件等。但這些對於我這樣的個人築巢者,一般都用不到,用起來也麻煩費事,不如多用這一簡單而簡潔的頁面。

  操作 粘貼和輸入文字:複製一段開場白的文字到剪貼簿,然後在網頁視窗中點擊滑鼠到要插入的位置,然後複製,就可以看到該文字在頁面中出現了。也可以直接輸入一段文字。將網頁中不要的文字刪除。

  粘貼和輸入這項操作很簡單,和一般的文本編輯程式沒有區別。實際上,很多的文字編輯操作都跟Word程式相似。包括輸入、複製、粘貼、撤銷、尋找、樣式、字型、顏色、間距、符號、邊框、段落格式等。

  儘管FrontPage的大多數文字修飾的操作方法都和Word相類似,但還是有很多細小的差別,不過這些差別並不會對使用者造成很大的困擾,但還是要注意一些差別。

  在網頁中,段落和換行的差別很大,一般段落和段落的間距很大,因此常常注意到要用換行(按“Shift+Enter”)。如果要在網頁中顯示分行符號和段落符,則可以點擊工具列中的“全部顯示”按鈕(在第一排工具按鈕的後面)。
  
  進一步學習的建議:文字編輯的技巧性很強,而且操作的功能也很多,要熟練掌握必須要多練習,多用。一般使用Word排版熟練的人就很容易上手。

  圖  片

  首頁中的主要文字編輯好後,若需要在其中添加一幅小照和幾幅示意圖,讓頁面更傳神。小照圖片已經事先? 好,並用影像編輯工具進行適當的編輯,如將圖片縮放到合適的大小,圖片內容修飾,並根據圖片的內容將圖片儲存為GIF格式。注意,如果圖片顏色豐富,或者是風景、人物照片,則一般儲存為JPEG格式。而示意圖則在程式內建的剪貼畫庫中找。

  操作 添加剪貼圖片:在FrontPage中,內建了很多剪貼畫,可以很方便地添加。在網頁將滑鼠移動到要添加的位置,然後“插入/圖片/剪貼畫”,開啟剪貼畫選擇視窗,這裡面的剪貼畫非常豐富,並分類存放,尋找非常方便。找到需要的剪貼畫後,點擊該剪貼畫,在彈出的菜單中點擊“插入圖片”按鈕。然後就可以在網頁編輯視窗看到該圖片了)。

  操作 儲存圖片:現在儲存網頁,則程式提示將儲存圖片到網站所在的檔案夾,選擇圖片儲存的目錄、檔案名稱和檔案格式(也可以按照預設設定),就將該圖片儲存到網站中了。建議將圖片儲存在網站資料夾中設立的專門儲存圖片的檔案夾“image”。

  圖片添加後,可能要重新調整圖片在網頁中的位置,添加各種圖片的效果和設定圖片的屬性。

  操作 編輯圖片:在網頁編輯視窗中,選擇圖片,然後拖動圖片邊框可改變大小。拖動圖片可改變在網頁中的位置。另外,當選擇圖片後,在介面視窗的下面將顯示圖片編輯工具列,包含各種圖片編輯工具,如在圖片中添加文字、調整位置。要注意的是,當調整了圖片大小,程式將會以新的圖片大小來儲存圖片。

  操作 設定圖片的屬性:圖片的屬性一般指圖片的一些內部性質,如源檔案、格式參數、顯示方式、對齊、邊框和留白等等。滑鼠右鍵點擊圖片,在快顯功能表中選擇“圖片屬性”,即可在彈出的圖片屬性視窗中設定圖片屬性了。

  操作 插入圖片檔案:先將要插入圖片拷貝到網站資料夾中,選擇菜單“插入/圖片/來自檔案”,在快顯視窗選擇要插入的圖片檔案。然後,按照上面的方法調整和修改圖片。

  進一步學習的建議:深入瞭解各種網頁圖片格式,深入學習各種圖片效果的編輯,掌握圖片位置的調整,學習使用背景圖片等。

  超 鏈 接

  網頁的強大之處就在它的超連結,在瀏覽器中通過點擊網頁中的超連結,可以很方便地開啟另外一個網頁,或者是圖片、檔案、郵件地址。一個網頁中的連結分成兩個部分:連結的載體和連結的目標地址。

  連結的載體就是在網頁中文字和圖片,凡是包含連結的文字和圖片都稱為超連結。

  操作 設定文字的超連結:開啟首頁檔案,用滑鼠反白選擇要超連結的文字——“歡迎光臨網站名稱”,然後按滑鼠右鍵。在快顯功能表中選擇“超連結”。彈出超連結設定視窗,然後在列表中選擇要超串連網頁檔案——“Photo.htm”,確定後,就可以看到超級連結已建立好了。注意,在網頁編輯視窗,可以按住“Ctrl”鍵,點擊超連結就可以開啟超連結指向的網頁。

  操作 設定圖片的超連結:滑鼠右鍵點擊要設定超連結的圖片,在右鍵菜單中選擇“超連結屬性”,然後設定要連結的檔案,也可以連結圖片、E-Mail地址等。

  操作 管理超連結:一個網站的超連結就像一張網一樣,網住了網站的所有檔案。在“視圖”視窗中點擊“超連結”,開啟超連結的管理視窗,在這個視窗中,我們可以看到各個檔案相互間的連結情況,例如,要看“photo.htm”檔案中連結了哪些檔案,又被哪些檔案連結,可以在旁邊的檔案夾視窗中選擇該檔案,然後即可在連結示意視窗中查看了。也可以在超連結的示意視窗直接展開某個檔案的上、下超連結。

  進一步學習的建議:掌握各種超連結的設定、書籤,學習使用導航條,學習使用圖形熱點。學習使用圖片的熱區。

  規劃網站

  規劃網站,其實就是網站的整體定位。說得時髦一點就有點像CI(corporate identity),意思是通過視覺來統一企業的形象。算了,還是不要這麼複雜吧,我只是一個小家碧玉者。

1.確定主題和內容

  主題和內容說白一點就是做網站的目的。看了不少個人網站,感覺就是:你抄我抄大家一起抄,黃沙淘盡不見金。我絕對不能這樣,否則就成了網路垃圾了。經過冥思苦想,我決定做一個真正意義上的“個人”網站,做一個個人的家,一個在網路上宣傳自己、結交朋友的“家”。

  這樣一來,主要內容就應該是介紹自己。個人簡曆?不,那樣也太沒有意思了。就當是做一個圖文並茂的自我小傳吧!應該有簡曆的一部分內容,但還應該多說說自己的興趣愛好。此外,還少不了應該適當介紹一下和自己相關的東西啊!

  內容確定了,那是不是應該給我的網站取個好名字了?前輩說:網站名稱也是網站設計的一部分,而且是很關鍵的一個要素。很有道理,就像每個人都想取個好名字一樣,家也應該有個好名字!

  看看網上的名字,“海闊天空”有點虛,“XX的個人首頁”有點俗。還是平實一點,就以我的名字叫“豆豆之家”吧。

  2.網站結構

  參考了一下其他的個人網站,再看看前輩長篇大論,我也稀裡糊塗地明白了一些名詞。

  ●網頁——就是你看到瀏覽器內的一個頁面,由圖片和文字組成。通常有一級頁面、二級頁面之說。當你輸入網址看到的第一個頁面叫做首頁,通常的名字是index.htm。

  ●網站——簡單地說就是很多相關網頁檔案、圖片檔案? 他檔案的組合。一個網站由相關網頁組成一個關係網,通過頁面上的連結在不同的網頁之間跳轉。

  網站的結構和內容好像還有一些不成文的規定(當然都是前輩們嘮叨的):
  1. 網站一定要緊扣主題。
  2. 設定一個互動欄目,例如留言薄。
  3. 頁面簡潔,儘可能方便訪問者的瀏覽和查詢。
  4. 網站的層次不要太複雜,小網站由3層網頁構成是比較合適的。
  5. 整體的頁面設計風格要保持一致。
  
  3.風格的選擇

  網站的風格,是不是有點像人的氣質呀?“家”當然是有氣質的,或者活潑、或者嚴肅、或者精美、或者樸素、或者粗獷豪放、或者小家碧玉等。我們應該根據自己的主題和內容給它選擇一種合適的風格類型,以求內容和形式的完美結合,突出自己的特色和個性。可惜我不是學美術的,只是簡單地知道一些冷暖色,看來還得在實踐中多比較。

  4.頁面設計

  網站是由一個個頁面組成的,所以每個頁面的製作就顯得極其重要。說來說去又是一個美術設計方面的問題。我先找幾張白紙勾畫我的頁面草圖。

  這是網路上常見的幾種網頁布局。雖然都是在排列目錄、題目、本文,但真正要做到結構清晰、一目瞭然還得看具體製作的功夫。

  當然可以選擇更活潑一點的樣式,只是需要自己去發揮了,或者到網路上去學習各種漂亮的頁面設計。

  選擇製作工具

  古人說得好:工欲善其事,必先利其器。網上建家總是要工具的,製作網頁和網站的工具很多,甚至用記事本也可以(就像泥瓦匠起房子一樣,是寫網頁的原始碼)。但也有很多工具,可以直接將房子的架構搭好,剩下的工作就是確定要多少房間和如何布置房間。FrontPage2000就是這樣的工具。

  Dreamweaver3和FrontPage2000都是當前的主流網站和網頁編輯器。Dreamweaver3更加專業,其代碼的簡潔、相容性和整體功能都要比Frontpage2000強。但是FrontPage2000是微軟的產品,是Office2000中的一個組件,和大家經常使用的Word有類似的介面和操作。用FrontPage編寫網頁就像用Word寫文章一樣簡單,很適合於我這樣業餘建小“家”的人上手。

  找來FrontPage2003的書籍一看,它的功能真是強大,至少是夠我用了,而且操作真方便,會用Word就可快速學會FrontPage2003。

  1.安裝程式

  FrontPage2003已經整合在Office2003中,成為Office家族中的一員。如果你購買了Office2003,在安裝時你只須選擇安裝FrnotPage2003就行了。另外,也可以購買單獨的FrontPage2003光碟片進行安裝。

  FrnotPage2003的安裝過程非常簡單,我使用的是單獨發行的FrnotPage2003光碟片。雙擊光碟片中setup.exe的檔案,安裝程式即開始自動安裝。

  首先出現一個使用者資訊視窗,要求你正確的輸入使用者名稱、單位和密碼。然後單擊“下一步”按鈕,出現使用者許可協議畫面,選中“我接受《許可協議》中的條款”。單擊“下一步”按鈕,出現安裝選擇介面。單擊上面的“開始安裝”按鈕,FrontPage2003就按照預設的方式進行安裝,若單擊下面的“自訂”按鈕,可以選擇安裝的路徑。

  在安裝過程中,系統會重新啟動一次,然後才能繼續安裝,安裝完畢,會出現一個站台伺服器帳號設定視窗,輸入使用者名稱和密碼,安裝全部結束。

  2.啟用

  啟動FrontPage2003後,簡直就和Word是一個樣子,上部是功能表列、工具列,像我這樣熟悉Word的人就不用學習了;下面左邊是視圖區視窗,裡面有六個按鈕,代表六種不同的功能,它大大地方便了我們對網站和網頁的製作和管理。占螢幕大部分空間的是我們的工作區,所有的頁面編輯都在其中完成。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。