frontpage網頁設計制作步驟_第1頁
frontpage網頁設計制作步驟_第2頁
frontpage網頁設計制作步驟_第3頁
frontpage網頁設計制作步驟_第4頁
frontpage網頁設計制作步驟_第5頁
已閱讀5頁,還剩66頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

1、frontpage 2003 網頁設計制作步驟 單擊“開始”“所有程序”“Microsoft Office”“Microsoft Office FrontPage 2003”,啟動FrontPage 2003,進入網頁編輯窗口; 在網頁編輯窗口,單擊“文件”“保存”,彈出Windows保存窗口,指定目標文件夾為“我的文檔”,指定文件名稱“index.htm”; 單擊“保存”,則index.htm文件建立完畢。 網頁制作步驟 添加標題圖片 單擊菜單“插入”“圖片”“來自文件”,彈出打開圖片對話框,選擇所要插入的圖片; 單擊“插入”,標題圖片插入完成。網頁制作步驟 在標題圖片下添加滾動文字 單擊回

2、車鍵,使光標位于標題圖片下最左端; 單擊“插入”“Web組件”,在“組件類型”欄中選擇“動態效果”,在“選擇一種效果”欄中選擇“字幕”; 單擊“完成”; 在文本欄內輸入比如“你好!歡迎訪問我的個人網頁”,單擊“樣式”“格式”,彈出格式菜單。單擊“字體”,彈出“字體”對話框。在“字體”欄內選擇文本字體,在“大小”欄內改大小,在“顏色欄”內選擇顏色,單擊“字符間距”選項卡,顯示字符間距欄,在“間距”欄內選擇間距,在“間距大小”欄內填入大小; 單擊“確定”關閉所有對話框,添加字幕完畢。 網頁制作步驟 在網頁中添加四條橫線 光標移到字幕末尾,敲擊鍵盤上回車鍵,使光標位于字幕的下一行左側; 單擊“插入”

3、“水平線”,插入一條水平線;雙擊該水平線,彈出“水平線屬性”對話框;在“顏色”欄內選擇顏色,在“高度”欄內填寫高度;單擊“確定”,退出“水平線屬性”對話框; 單擊菜單“格式”“邊框和底紋”,彈出“邊框和底紋”對話框;在“樣式”欄內選擇樣式,然后單擊“確定”,退出“邊框和底紋”對話框。 復制水平線;單擊菜單“編輯”“復制”;重復三次:單擊菜單“編輯”“粘貼”,繪制水平線。 網頁制作步驟 插入表格 在第一條水平線下添加一個表格,邊框粗細為0,編輯表格文字的文本和大小,居中;分別填寫你自己需要的內容; 移動光標至第二條水平線首;敲擊回車鍵,使第一條水平線與第二條水平線之間留出空行; 插入表格:單擊菜

4、單“表格”“插入”“表格”,彈出“插入表格”對話框;在“大小”欄內分別填寫:行數和列數;在“邊框”欄的“粗細”欄中輸入0;在“布局”欄內的“對齊方式”欄中選擇方式; 表格字體設置:選定表格;在格式工具欄內選定字體,字號 填寫文字:分別選定表格單元格,依次填寫:你所需要的內容。 在第四條水平線下添加一個的表格,表格文字居中;并在表格中分別填寫內容。 移動光標至第四條線末尾,敲擊回車鍵; 插入表格:單擊菜單“表格”“插入”“表格”,彈出“插入表格”對話框;在“大小”欄內分別填寫:行數列數;在“邊框”欄的“粗細”欄中輸入0;在“布局”欄內的“對齊方式”欄中選擇方式; 填寫文字:分別選定表格單元格,依

5、次填寫。 添加文字:移動光標至第四條線末尾;敲擊回車鍵,留出空行;輸入文字。 網頁制作步驟 “我的學校”制作 在第二條水平線下添加文字:“我的學校”,另起一行添加學校介紹并設置字體。 移動光標至第三條線首;敲擊回車鍵,使第二條線與第三條線之間留出空行;輸入文字“我的學校”,回車另起一行; 輸入或復制所需要的文字。光標定位到網頁文件“我的學校”下一行行首;粘貼學校說明文字。 調整文字對齊方式;調整文字字體、字號。 網頁制作步驟 “所有城市”制作 在第三條水平線下添加文字:“所有城市”,另起一行,添加兩張圖片。 移動光標至第四條線首;敲擊回車鍵,使第三條線與第四條線之間留出空行;輸入文字“所在城市

6、”,回車另起一行; 插入圖片:單擊菜單“插入”“圖片”來自文件”,彈出打開圖片對話框;選定所要的圖片然后單擊“打開”; 重復以上步驟 網頁制作步驟 添加鏈接 添加本網頁內鏈接 指定書簽:選定第一條水平線下的文字“我的學校”;單擊菜單“插入”“書簽”,彈出“書簽”對話框;單擊“確定”,第一個書簽設置完成。 選定第二條水平線下的文字“所在城市”;單擊菜單“插入”“書簽”,彈出“書簽”對話框;單擊“確定”,第二個書簽設置完成。 選定第四條水平線下的文字“友情鏈接”;單擊菜單“插入”“書簽”,彈出“書簽”對話框;單擊“確定”,第三個書簽設置完成。 添加網頁內第一個鏈接。選定第一個表中的文字“我的學校”

7、;單擊菜單“插入”“超鏈接”,彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“本文檔中的位置”;在書簽中選擇“我的學校”標簽; 添加網頁內第二個和第三個鏈接,參照第一個鏈接進行設置。 添加Internet鏈接。 添加第一個鏈接:選定第四條水平線下表中的文字“百度”;單擊菜單“插入”“超鏈接”,彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“原有文件或網頁”;在“地址”欄內填寫如:。 添加第二個、第三個、第四個和第五個鏈接,參照第一個鏈接進行設置。鏈接設置完成。 網頁制作步驟 添加背景顏色 單擊菜單“格式”“背景”,彈出“網頁屬性”對話框; 單擊“格式”選項卡; 單擊“顏色一背景”“其他顏色”,

8、打開Windows顏色對話框;選擇淡黃色后單擊“確定”,背景顏色插入完畢。 網頁制作步驟 保存網頁 單擊菜單“文件”“保存”,保存以上修改內容。退出FrontPage 2003。 網頁制作步驟 使用IE查看建立的網頁 單擊桌面上IE圖標; 單擊菜單“文件”“打開”,彈出打開對話框;選擇“我的文檔”下文件“index.htm”, 單擊打開,即可查看瀏覽效果在Frontpage中用框架實現網頁布局· 框架(Frame)在網頁上的應用很普遍,因為它可以同時顯示出多個獨立網頁也可以將使用者常用的連結一直顯示在畫面上,減少上一頁下一頁的切換頻率· 框架的基本操作1.先看我們要做到的成

9、品->可以看出該網站共分3個框架->上、左、右,如下圖:2.請開啟frontpage->左上角的檔案->選開新檔案->網頁,如下圖:3.會跳出如下視窗:選擇框架頁(如圖1指示位置)->選擇底下要的框架款式(如圖2指示位置)-> 在右下可以看到樣式預覽(如圖3指示位置)->接著按確定即可。4.之后出現如下畫面,可設定各框架網頁內容:開新網頁的意思是要自己做一個全新的網頁,而設定起始網頁是去連結一個已經做好的網頁o 請將上框與左框設定->開新網頁o 右框設定->設定起始網頁->§ 可選擇在電腦中已做好的網頁or網路上的某個

10、網頁§ 此例我們連結到之前做好的個人檔案(myself.htm),請點選瀏覽檔案的圖示,如下圖:5.步驟4完成后,會出現如下圖:6.此時可以先存檔->此時會有視窗引導存檔o 第一個是問您上框架的網頁要存成什么檔名,如圖(可自己取名,如top.htm)o 接下來會問您左方框架的檔案要存什么檔名,如圖(可自己取名,如left.htm)o 最后跳一個視窗->問您整個框架要存成什么檔名,如圖(可自己取名,如index.htm,一般主框頁會拿來當做首頁,通常網站的首頁會命名為index.htm)o 為什么沒有問到,右框的網頁要存成什么檔名? 這是因為我們當初設定右框是連結到一個已經

11、做好的網頁(myself.htm),既然是已經做好的網頁,自然就沒有存不存檔的問題7.框架內容的設定(取消框架線):在網頁的任一處按右鍵,選框架內容,如下圖:選框架頁->將顯示框線的勾勾去掉,即可取消框架線。8.最后按照范例,我們在上方網頁插圖,左方網頁先用做一選單。選單在設定連結時,必須指定兩項資訊(與超連結的觀念相同) (責任編輯:大寶庫)在Frontpage中用框架實現網頁布局目前實現網頁布局的基本方法無外乎表格和框架。 上面表格大家已經初步理解了,下面就要說說框架了,也即所說的Frame。其實用框架來規劃網頁本身有很大的缺點,首先不利于網友更好的利用網頁資源,因為大家總不能在線把

12、所有的東西看一遍了,而保存起來框架的缺點就出來了,你將不得不每次多余的保存同樣的兩個頁。 我們花一些時間來說說這個問題或許對大家更好的使用框架有好處。 在用框架布局時:以一個最簡單的上下框架為例,整個網頁包含兩個獨立的網頁,將被分別保存或是調入使用,另外整個框架網頁也將被作為一個也保存一次,而我們用框架時,無非是想利用他的很好的內容的切換性,這時如果保存起來本來一個網頁的內容就要同時保存3個,是不是很不劃算的。 1在編輯器里: File/new(或是直接按CTRL+N),在彈出的窗口中選Frame標簽,然后在下面的列表里。選擇相應的框架類型。 2OK以后,這時網頁已經變成了框架的結構,通過各自

13、框架Frames你可以選擇新建網頁或是導入已經存在的網頁。 setinitalpages(導入一個存在頁) newpage(點擊后新建一個頁面) 3基本的框架結構已經建立了: 這時應該看看如何實現框架中的切換連接了,因為在使用框架時最具代表性的就是三分框架,而這三部分都有各自的名稱。 最上面為banners:網頁的頭部分。 左邊為contents部分。 右邊是主體顯示部分。main 4那么如何實現點擊連接時在main窗口中打開那,在左邊的contents窗口中作連接CTRL+K或是用Edit/hyperlink來完成,這時你可以在窗口中的圖示中選擇連接打開的目標位置。 如:main。當然你同時

14、還可以設定目標Target屬性。 不過這時多少顯得就沒必要了,當各自Frame內容超出一屏幕時,滾動條會自動添加進來。你也可以設定從不顯示滾動條。 大部分的屬性可以右擊: 在Frameproperties中找到了。 如果你注意的話除了一些個人網站,商業性的正規網站很少用框架的。 不過在某些時候框架還是有它自己的優勢。Frontpage教程:制作網頁中的書簽書簽 書簽的功能是使用在同一面網頁資料過長時使用,能夠使使用者迅速的移動到所要的位置上。適合用在教學進度表、小文章集錦等教學網頁。書簽的基本操作范例:做法:1.先將教學進度做成網頁。2.在最上頭列出選單。3.在目的位置(第一周)插入標簽:將游

15、標在第一周的地方點一下->選功能列插入->書簽->為此位置取一個書簽名稱如w1 ,該位置前會出現如的小圖示。4.依此類推,將所有目的位置(第五周、第九周、第十三周、第十七周)都插入書簽名稱如w2 , w3 , w4 , w5.注意書簽名稱絕對不能重復5.為選單作相對應的超連結:例如我們希望滑鼠按下14周時,整個畫面能移動到w1段落,做法如下->選取文字14周->按右鍵->選超連結->跳出一個設定超連結的視窗->左下角設定要連到哪個書簽的區域點選下拉式選單,選擇要連結的書簽名稱即可6.重覆步驟5,完成所有的選單設定。FrontPage 2003創建

16、可折疊列表創建可折疊列表 1.在 設計 視圖中, 將您希望創建大綱插入點置于。2.on Format menu,click Bullets and Numbering 。3.在 編號 選項卡上, 選擇的數字或字母開始所需,樣式然后單擊 確定 。4.要在大綱中的每一項,無論種級別它將占用已完成的列表中,鍵入該項目然后按 ENTER 鍵。5.當您鍵入最后一項時, 按兩次 ENTER 鍵結束該列表。6.若要將每一項置于正確級別,執行下列操作: 若要將某項移動到下一個編號級別向下,單擊該項目,單擊格式設置工具條,并再單擊 增加縮進量 兩次。 若要設置的項的格式,并將其作為一個段落在當前級別 (不帶項目

17、符號或編號) 上,單擊該項目,然后單擊 增加縮進量 一次。若要 to up to previous level move item,click item,and then as many times as must so that to that want level move item click Decrease Indent 。 7.若要應用編號,應用字母,或將項目符號樣式應用于不同級別的項,用鼠標右鍵單擊一個項目,然后單擊 列表屬性 。8.單擊 圖片項目符號 選項卡,則 無格式項目列表 選項卡或 數字 選項卡,單擊想要使用,樣式,然后單擊 確定 。將整個列表設置為 Collapsibl

18、e 若要 to make list collapsible,follow these steps: 1.用鼠標右鍵單擊在列表的最高級別的項目,然后單擊 列表屬性 。2.單擊以選中 啟用可折疊大綱 復選框。3.如果您希望在 Web 瀏覽器中首次打開頁時折疊列表,單擊以選擇 時折疊 復選框,然后單擊 確定 。 注意 如果您的列表包含相同的級別上的多個項目,每個將可折疊的并且低于第一個級別的所有級別也都將可折疊的。若要設置為可折疊列表中只有一個級別,請按照下列步驟操作: 1.用鼠標右鍵單擊第一個項目在您希望可折疊,在列表的級別,然后單擊 列表屬性 。2.單擊以選中 啟用可折疊大綱 復選框。 注意 如

19、果您的列表包含相同的級別上的多個項目,每個將可折疊的并且低于第一個級別的所有級別也都將可折疊的。疑難解答 若要 to test your collapsible list,save your Web Page,click Preview ,and then click in collapsible list first item。 可折疊列表支持 Microsoft Internet Explorer 4.0,更高版本和其他 Web 瀏覽器的支持動態 HTML。FrontPage2003初級教程-基礎教程詳細圖解一、新建網站 打開FrontPage2003 點擊新建菜單命令會彈出一個對話框,有

20、不同的模板供選擇。選擇你想要的一個,然后確定,會自動生成一個網站。 二、新建一個空白網頁 你也可選擇新建空白網頁,或點新建工具按鈕。當然,這上面的內容你要自己編輯。 三、打開一個網站 點擊打開網站四、瀏覽網頁 “文件”“瀏覽”有幾個選項(不同分辨率)五、編輯方式 有“設計”“拆分”“代碼”“瀏覽”六、插入WEB組件 WEB組件中有很多常用的功能,你自己去試各項。七、插入圖片 有兩種情況:1、插單個圖片,可在菜單上直接用;2、插入圖片庫,也可插入WEB組件中,可插隊入圖片庫。有三種形式(自己試一下,因為有預瀏)。八、插入“互動按鈕”,互動按鈕可以有三種形式,鼠標經過,按過,沒按。 可選形式,在文

21、本的文本框中將按鈕文本換成你要的文本。如:首頁 還可改變文本的屬性,字體顏色,等。有初始顏色,經過顏色,按下顏色九、在網頁中插入已有的網頁 如果新建的網頁,內容想用現存的,只須插入已有的網頁就行了。比較簡便。十、書簽鏈接 有時的鏈接,不是和另一個網頁鏈接,而是和頁面中某一段鏈接,或另一頁面的一段鏈接。這種方法用在“標題和內容”之間鏈接最方便。 1、選擇:菜單、插入、書簽(被鏈接的內容)(一般自動生成名字,你也可以自己指定名字)2、制作到書簽的鏈接(標題)(責任編輯:大寶庫)3、選擇右邊的“書簽”4、找到書簽名十一、創建一個超鏈接 1、選中要建立超鏈接的文字或圖片。 2、右鍵,彈出菜單,點擊“超

22、鏈接”3、在彈出的對話框中選中被鏈接的網頁或圖片或其他(注:如是下載軟件選中它) 4、當然,最后是點擊“確定”(責任編輯:大寶庫)十二、插入表格 1、點擊菜單中“表格”再“插入”再移到“表格”單擊“表格”2、在彈出的對話框中有幾項值是要注意的: a、表格的“行數”和“列數” b、“指定寬度”和“指定高度”如果是用固定寬和高填寫數字,如果是頁面隨屏幕變化的選100% c、“使用背景圖片”點擊“瀏覽”找到圖片 d、“對齊方式”用“默認” e、“浮動”方式用“默認” f、“邊框”是表格寬度如果選“零”則不顯示表格否則顯示你選或填的數字的寬度。 g、“單元格間距”是表格線本身的襯距,如:3時,表格線兩

23、根之間距為3。 h、“單元格間距”是表格中文字到框的距離。 i、當然還有顏色。十三、建立網站鏈接 這個功能和共享邊框一起使用。 1、在編輯區下方有一個選項“鏈接”點擊它。 此主題相關圖片如下:進入建立鏈接面頁 2、修改“新建網頁”為“主頁”3、添加“新建網頁”新建一個網頁或“已有的網頁”已存在的網頁,點擊找到被鏈接的網頁。 還可修改新建網頁為你想要的中文名。(責任編輯:大寶庫十四、新建自定義鏈接 默認鏈接有時不夠用,可以建自定義鏈接,獨立于默認。在插入鏈接時有兩個選項:一個是默認,另一個是自定義鏈接。 自定義鏈接可以放在主頁下面,也可以放在獨立的地方。下圖一中的“娛樂”就是放在主頁下的。圖二中

24、的新建成鏈接欄是獨立的。 當然你還可以在自定義下面添加下層鏈接。 十五、共享邊框 1、啟用 “工具”“網頁選項”“創作”選中“共享邊框” 2、“格式”中選中“共享邊框”在對話框中(注:若想損事,選:所有網頁)設置選項“上、左、右、下”(可以自定) 3、在自動出現的共享邊框中編輯鏈接欄屬性5、和上一講的鏈接欄配合使用,當你每添加一個網頁在鏈接欄中會自動生成上面的效果十六、在網頁中插入“鏈接欄” 1、光標在要插入鏈接欄的地方或選中共享邊框 2、點擊“插入”(或是編輯“鏈接欄”屬性),Web組件,找到“鏈接欄”,有兩個選項:基于導航結構的鏈接欄;自定義鏈接欄 3、點下一步4、選擇“樣式”,有多種,自

25、定。可以選中“使用鮮艷顏色”和“使用動態圖形”6、點“完成”進入“屬性”可以選中“主頁”最后點確定。 7、最后效果8、請注意:鏈接欄的屬性文件夾在_borders中,下面的幾個文件就是,你還可以對不滿意的重新進行編輯。top.htm是頂上的,left.htm是左邊的,bottom.htm是下面的,right.htm上右邊的 (責任編輯:大寶庫)十七、插入“動態文字” 1、WEB組件中 2、在文字欄中寫入你的文本3、還可以修改“樣式” 十八、插入媒體插件 1、插入“WEB組件”到高級控件到插件 2、找到數據源,編輯相關 3、注:會自動識別媒體的,有兩種RM和微軟的 到此為止,frontpage2

26、003的初級基礎課程全部給大家演示完畢,當然這只是最簡單的講解,在你的實際制作過程中,你可以發揮自己的能力,做出你最喜歡的網頁了。別忘了常來網頁制作大寶庫()看看,這里一定有你想要的教程,需要的素材。FrontPage2003建站全攻略(一)在浩瀚的Internet建設自己的家園,這是我們的需求,無論是個人、還是組織。在創建網站之前我們事先在我們的硬盤中建立一個存放站點所有文件的目錄。模板建站FrontPage可以適合不同個人和組織的需要,自動建立網“巢”站點。操作打開站點建立窗口:點擊“文件->>新建”,在打開的窗口中可以看到自動建立站點的各種向導和模板。向導特點:選擇向導程序列

27、出的條件元素,創建某類有個性的站點和網頁模板特點:直接采用已經設計好的條件元素,創建某類統一的站點和網頁在FrontPage中,使用向導創建的一般是比較復雜的商業和大型站點,不適合個人在網上安家筑巢。我的網上小家就使用模板建立站點就夠了。操作選擇模板:在新建站點窗口,選擇“個人站點”模板。在右面的選項欄中設置站點文件的存放地址。建議新建一個有意義的存放地址,如“e:webcom”,點擊“確定”。操作查看站點結構:點擊程序界面的“視圖”窗口中的“導航”按鈕,可以看到建立的站點由哪些文件組成以及站點的結構。我們看到,個人站點模板的結構是主頁下面有五個子頁,分別是“自序”、“興趣”、“收藏夾”、“圖

28、片庫”、“反饋”,而在文件夾列表欄中列出了站點中的文件,其中“image”文件夾專門存放圖片,另外還有五個HTML文件,其中的myfav3.html是備用的子網頁文件。其他四個HTML文件分別對應主頁和三個子網頁。操作查看站點中的網頁:在導航視圖窗口的網站結構示意圖中點擊某個網頁結構圖標,如“主頁”結構圖標,可以打開該網頁,我們就可以在窗口中看到這個預先定制的網頁大概結構。點擊文件夾列表中的文件也可打開。注意,打開網頁后,我們可以看到導航視圖窗口切換到了網頁視圖窗口。操作保存和打開站點:保存站點的工作很簡單,當關閉FrontPage的時候,按照提示就可以保存站點。實際上,保存站點主要就是保存網

29、頁,因此在修改編輯網頁的時候,要時刻注意到保存。保存的方法和在文字編輯程序中保存文件類似。打開站點要復雜些,選擇菜單“文件打開站點”,找到站點所在的目錄,找到站點文件夾(是一個帶有小圓球的文件夾圖標,是FrontPage建立的站點管理文件操作刪除站點:刪除站點很簡單,直接在Windows中刪除站點所在的文件夾即可。也可在程序中刪除。進一步學習的建議:熟練使用各種視圖和窗口,使用向導創建復雜的商業和項目站點。使用導入向導,將別人已經建立的站點導入,成為自己可以利用的站點。模板建網頁 目前,我的網“巢”還只有一個主頁,三個子頁,我想再添加一個“我的簡歷”的子頁。 使用模板創建站點,站點中有幾個網頁

30、都是事先設計好的,大多數情況下,都需要添加網頁,或者用新設計的網頁替換掉事先設計的網頁。建立新的網頁,使用向導和模板是最方便不過的了,因為FrontPage提供的網頁模板非常豐富,可以滿足大多數情況的需要。 操作打開網頁模板窗口:在視圖窗口中點擊“網頁”按鈕,切換到網頁視圖。選擇菜單“文件新建網頁”,打開新建網頁的模板選擇窗口。注意,不同的視圖窗口,使用“文件新建網頁”菜單命令的結果不同,后面我們將會提到。 在網頁模板選擇窗口中,有三個標簽頁,在“常規”標簽頁中有三十多個模板供選擇,一般個人網“巢”中的網頁使用“常規”標簽頁中的模板就足夠了。根據我新建網頁的內容和預想的設計,我選擇了“帶有標題

31、的寬行正文”模板。 操作選擇模板:點擊“帶有標題的寬行正文”模板項,然后點擊“確定”,程序即開始按模板新建網頁。 回到主窗口,就可以看到一個有大概結構的網頁,這個網頁以很清晰的方式提示我在哪里放標題,哪里放正文,網頁段落結構也排得很好,我只要按照提示添加內容就可以了。 新建立的網頁還沒有保存在硬盤中,由于這個網頁是要添加到剛才新建立的網站中去的,因此,我們將它保存到網站文件所在的目錄(e:webjxcom)中。操作保存新建的網頁文件:選擇“文件保存文件”,在彈出的保存文件窗口中選擇“e:webjxcom”目錄,并命名文件名為“Mytravel.htm”。點擊“確定”。 操作預覽網頁:建立了網頁

32、后,就可以通過瀏覽器來觀看該網頁了。在FrontPage中可以直接調用系統集成的IE瀏覽器來查看。方法是在網頁視圖窗口打開某網頁,然后選擇“文件預覽網頁”即可。我們在編輯修改的時候,大都是通過FrontPage內置的預覽功能來查看網頁的制作效果,方法是在網頁視圖的主窗口下面選擇“預覽”標簽項即可。 操作查看文件列表:點擊“視圖”窗口中的“文件”標簽按鈕,在主窗口中列出了站點文件夾和所選文件夾中的文件。在文件窗口中,我們看到剛才保存的新網頁文件已經位于其中,并可以看到該文件的一些屬性。雙擊這些文件時可以在網頁視圖窗口中打開編輯。 網頁標題就是網頁在瀏覽的時候,顯示在瀏覽器窗口左上角的標題文字。這

33、個標題可以讓訪問者了解該頁的內容。 操作修改網頁主標題:打開“文件”視圖窗口,在文件列表窗口找到Mytravel.htm文件,點擊“這是主標題”文字,然后輸入“我的游歷”。另外,可以將“主頁”文件的標題改為“豆豆之家”。注意,主頁的標題也就是站點的標題。進一步學習的建議:了解各種網頁模板的結構和適用方向。學習使用向導創建有復雜表單的網頁。學習創建帶框架和樣式表的網頁。修改站點和網頁 基礎的站點和網頁建立好后,我就需要在這個基礎上按照我的夢想修改了。首先,我要在第二級網頁中增加一個“我的簡歷”網頁,其次,要在“我的興趣”二級網頁下增加三個三級網頁。 操作將已有網頁添加到站點:在視圖窗口點擊“導航

34、”按鈕,切換到導航視圖。在文件夾窗口中將Mytravel.htm文件拖動到“導航”窗口,仔細選擇停放的位置,讓示意圖標和其他二級圖標在一個線上,然后就看到Mytravel.htm文件成為站點的一部分了。 注意,在站點中添加了網頁后,站點中的某些網頁將自動發生改變,當Mytravel.htm文件(“我的游歷”網頁)成為index.htm(主頁)的下級網頁后,我們在網頁視圖窗口查看主頁頁面的時候,會發現該頁面已經將“我的游歷”這樣的字樣添加進去了。 操作添加新網頁到站點:切換到導航視圖,選擇“興趣”網頁示意圖標,然后選擇“文件新建網頁”(或者工具欄中的“新建”按鈕),在“興趣”網頁圖標下就看到一個

35、新的網頁圖標,這個網頁是屬于“興趣”網頁下的子網頁,但是一個虛擬的網頁,并沒有對應的文件。雙擊新網頁的示意圖標,即可在站點文件夾中生成一個簡單的模板網頁。重復以上操作三次,就可在站點中添加三個網頁。 操作在站點中打開和關閉網頁:打開站點的網頁非常簡單,在導航視圖窗口或者文件視圖窗口雙擊要打開的網頁即可。打開網頁時程序將自動切換到網頁視圖窗口。不過注意關閉站點中暫時不編輯的網頁,以使系統節約資源。 操作修改網頁的文件名:新建的網頁我們可以改成自己需要的文件名和主標題。這個工作既可以在“文件”視圖窗口中進行,也可以在“導航”視圖窗口中進行。 操作站點的調整和刪除:站點的調整很簡單,直接在導航視圖窗

36、口中拖動要調整的網頁就可以了,刪除站點的網頁也很簡單,選擇網頁文件或者網頁示意圖標后按“Del”鍵即可。修改后的站點結構如圖10所示。我“家”的雛形已經基本建立起來了。 進一步學習的建議:設置網頁的高級屬性,自定義網頁模板,進一步修改站點結構,建立復雜的網站,站點和文件夾的管理和相互轉換。竹籬圍青瓦,芍藥伴鶴眠。苔痕上階綠,簌影落窗前。咦,誰與我家比美? 頁面修整 通過模板建立的網頁,常常預先置放了些標題欄、目錄欄(一般叫導航欄),導航欄都是用很多元素組成的,結構上稍稍復雜一些。一般情況下我們不必要對這些東西進行低層次的修改,FrontPage也不允許操作者修改,但在某些項目上,我們還是可以根

37、據自己頁面的要求來修改。操作修改頁面的主標題:在主頁(index.htm)的頁面上部,模板預置了一個名為“主頁”的橫幅標題,這個橫幅標題和整個主頁格格不入。點擊橫幅,按“Del”鍵刪除,然后在同樣位置插入一個事先準備好的橫幅圖片為主頁標題。 操作修改導航條的鏈接:在主頁的左邊,有一個導航條(目錄欄),在建立站點的時候,導航條就建立了幾個網站的鏈接。這些鏈接不能在網頁窗口中修改,只能在站點管理的“導航”視圖窗口中修改。但可以在網頁視圖窗口中給導航條添加鏈接。在導航條中點擊鼠標,然后選擇輸入文字“給我寫信”,設置文字的超鏈接,這里的鏈接地址設置的是我的郵箱地址“mailto:web”。 操作刪除頁

38、面元素:在主頁的右下,程序放置了一個LOG圖片,這個圖片和我的主頁不符,選擇該圖片,按“Del”刪除。 操作給頁面添加水平線:水平線對于規劃頁面有很大的作用,可以讓頁面清楚,簡潔。在要插入水平線的位置點擊鼠標,選擇“插入/水平線”,水平線就出現了。注意,一般模板網頁的水平線由程序自動設置外觀屬性。而其他情況下,將由操作者自己設置水平線的顏色,粗細等。 進一步學習的建議:頁面長期編輯后,可能會留下垃圾(無效代碼),如果想做得更專業一點,可以在HTML標簽窗口修改源代碼,或者使用其他網頁制作工具休整。表格 表格實際和文字、圖片一樣,是一個網頁的基本元素,但表格在網頁中,更大的用途是來規劃頁面。實際

39、上,在網頁編輯中,通過空格、段落、縮進等是很不容易規劃好一個有很多元素的頁面的,特別是圖文混排的頁面。 在FrontPage中添加常用的數據表格,和在Word中添加表格一樣的方便,直接使用插入表格命令,然后填寫數據就可以了。甚至還可以將Word文件中的? 粘貼進來。 操作添加一個簡單表格:在要插入表格的位置點擊鼠標,選擇“表格/插入/表格”,在彈出的對話框中設置表格的屬性,然后選擇表格的行數2,選擇表格的列數1,然后指定表格的寬度,可以設置表格的寬度占網頁寬度的百分比,或者直接設置表格的絕對寬度像素。其他設置表格邊框線的寬度為1,設置單元格間距為2。確定即可。 操作在表格中添入文字:在表格中輸

40、入文字和在普通編輯頁面中輸入文字沒有什么區別,另外,在生成主頁模板的時候,程序在網頁中添加了一個高級控件,可以自動顯示網頁的更新時間。將這個控件拖入到表格中。這樣,一個顯示網頁制作者的表格就制作好了。 操作設置表格的屬性:表格的屬性比較復雜,分成單元格屬性和表格屬性。選擇表格,然后選擇菜單“表格/屬性/表格”,在彈出的窗口中可以設置表格的邊框、背景、顏色等等。特別要說明的是表格的浮動,表格的浮動是設置整個表格的對齊方式,而一般的對齊方式是設置表格內的元素的對齊。 操作圖文混排:在需要的位置加入一個只有一個單元格的表格,并設置好其他屬性。在表格中添加圖片,并設置好表格的大小。再設置表格為“左浮動

41、”,調整文字,讓文字在表格的右邊。這樣,圖文相配的混排就得到了。 FrontPage 2003教程 FrontPage2003建站全攻略(二)主題 經過以上過程,我主頁制作也基本完成了。但頁面的背景圖、導航欄、顏色選擇,邊框等都不太令我滿意,而這些都是模板自動設計的,而且不能修改。這個時候,就要使用主題了。 主題,就是FrontPage針對頁面中的背景、導航欄、橫幅、按鈕、各種邊框自動進行設置,主題的內容有幾十種,操作者可以根據自己的喜好選擇,這樣,就可以省去自己分別對這些頁面元素的設置。 操作為網頁指定主題:打開主頁,選擇“格式/主題”,彈出主題窗口。在主題窗口的左邊,列出了可以選擇的主題,

42、默認的是“直邊”,點擊這些主題,可以在右面窗口查看該主體的風格,如橫幅是什么樣、是什么樣的顏色、標題的樣式、超鏈接的顯示樣式,導航條的樣式等等。另外,還可以設置是否需要背景圖片,是否使用鮮艷的顏色等。選擇“漸藍”主題,單擊確定,即可在網頁窗口看到效果了。 主題都是事先設計好的,如果你有什么特殊要求,而FrontPage又不允許你在網頁編輯時修改,這個時候,可以自定義主題。 操作測試網頁和網站:現在,我的主頁基本完成了,要實地測驗一下主頁和整個網站的情況,看頁面顯示是否正常,各個超鏈接是否正確,設計上還有什么缺陷。打開要預覽的主頁,然后選擇“文件/在瀏覽器中預覽主頁”,這樣,我就看到了我精心設計

43、的主頁的真正模樣了。測試的時候,要仔細看頁面的各種元素,看是不是有不正確的地方。多改變一下瀏覽器的一些相關設置,如字體大小、全屏、縮放窗口。點擊頁面上的超鏈接,看是否能跳轉到正確的頁面。另外,最好將整個網站文件夾復制到其他機器上,看是否正確,特別是字體顯示是否正確。 操作查看網站報表情況:在視圖窗口選擇“報表”圖標,打開報表窗口,在這個窗口,可以看到整個網站的一些統計數據。仔細查看這些數據,看看有沒有什么問題,如無效的超鏈接等。如果一切沒有問題,就可以發布了。 進一步學習的建議:網頁的美化是一個經驗和修養的問題,一方面多實踐,另一方面多看優秀的網頁。另外,網站的測試很重要,要摸索和掌握這方面的

44、經驗和技巧。 樂有五音,善用五音而成樂師。食有五味,善用五味而成庖廚。我用什么來建家?水木金火土。文字 通過模板建立的站點和網頁只是一個結構雛形,現在來打開這些網頁,添加各種元素,開始建設自己的家。我們首先從主頁面(index.htm)開始,這可是家的大門。 操作認識模板頁面:打開主頁文件,在“網頁”視圖窗口可以看到該主頁的大致結構。頁面分成了三個部分,上面的部分主要放置標題圖片(圖片元素為主),左面的部分主要放置鏈接到其他網頁的目錄(鏈接元素為主),而中間的大部分放置該主頁的主要內容(文字元素為主)。 一般模板主頁,通常由橫幅、目錄、正文等幾個部分組成,只是數量和排列方式不一樣罷了,或者多一

45、些特殊的元素。當然,也有完全是有一些特殊元素構成的頁面,如多重嵌套表格、組件等。但這些對于我這樣的個人筑巢者,一般都用不到,用起來也麻煩費事,不如多用這一簡單而簡潔的頁面。 操作粘貼和輸入文字:復制一段開場白的文字到剪貼板,然后在網頁窗口中點擊鼠標到要插入的位置,然后復制,就可以看到該文字在頁面中出現了。也可以直接輸入一段文字。將網頁中不要的文字刪除。 粘貼和輸入這項操作很簡單,和一般的文本編輯程序沒有區別。實際上,很多的文字編輯操作都跟Word程序相似。包括輸入、復制、粘貼、撤銷、查找、樣式、字體、顏色、間距、符號、邊框、段落格式等。 盡管FrontPage的大多數文字修飾的操作方法都和Wo

46、rd相類似,但還是有很多細小的差別,不過這些差別并不會對使用者造成很大的困擾,但還是要注意一些差別。 在網頁中,段落和換行的差別很大,一般段落和段落的間距很大,因此常常注意到要用換行(按“ShiftEnter”)。如果要在網頁中顯示換行符和段落符,則可以點擊工具欄中的“全部顯示”按鈕(在第一排工具按鈕的后面)。進一步學習的建議:文字編輯的技巧性很強,而且操作的功能也很多,要熟練掌握必須要多練習,多用。一般使用Word排版熟練的人就很容易上手。圖片 主頁中的主要文字編輯好后,若需要在其中添加一幅小照和幾幅示意圖,讓頁面更傳神。小照圖片已經事先? 好,并用圖像編輯工具進行適當的編輯,如將圖片縮放到

47、合適的大小,圖片內容修飾,并根據圖片的內容將圖片保存為GIF格式。注意,如果圖片顏色豐富,或者是風景、人物照片,則一般保存為JPEG格式。而示意圖則在程序內置的剪貼畫庫中找。 操作添加剪貼圖片:在FrontPage中,內置了很多剪貼畫,可以很方便地添加。在網頁將鼠標移動到要添加的位置,然后“插入/圖片/剪貼畫”,打開剪貼畫選擇窗口,這里面的剪貼畫非常豐富,并分類存放,查找非常方便。找到需要的剪貼畫后,點擊該剪貼畫,在彈出的菜單中點擊“插入圖片”按鈕。然后就可以在網頁編輯窗口看到該圖片了)。 操作保存圖片:現在保存網頁,則程序提示將保存圖片到站點所在的文件夾,選擇圖片保存的目錄、文件名和文件格式

48、(也可以按照默認設置),就將該圖片保存到站點中了。建議將圖片保存在站點文件夾中設立的專門保存圖片的文件夾“image”。 圖片添加后,可能要重新調整圖片在網頁中的位置,添加各種圖片的效果和設置圖片的屬性。 操作編輯圖片:在網頁編輯窗口中,選擇圖片,然后拖動圖片邊框可改變大小。拖動圖片可改變在網頁中的位置。另外,當選擇圖片后,在界面窗口的下面將顯示圖片編輯工具欄,包含各種圖片編輯工具,如在圖片中添加文字、調整位置。要注意的是,當調整了圖片大小,程序將會以新的圖片大小來保存圖片。 操作設置圖片的屬性:圖片的屬性一般指圖片的一些內部性質,如源文件、格式參數、顯示方式、對齊方式、邊框和留白等等。鼠標右

49、鍵點擊圖片,在彈出菜單中選擇“圖片屬性”,即可在彈出的圖片屬性窗口中設置圖片屬性了。 (責任編輯:大寶庫)操作插入圖片文件:先將要插入圖片拷貝到站點文件夾中,選擇菜單“插入/圖片/來自文件”,在彈出窗口選擇要插入的圖片文件。然后,按照上面的方法調整和修改圖片。 進一步學習的建議:深入了解各種網頁圖片格式,深入學習各種圖片效果的編輯,掌握圖片位置的調整,學習使用背景圖片等。超 鏈 接 網頁的強大之處就在它的超鏈接,在瀏覽器中通過點擊網頁中的超鏈接,可以很方便地打開另外一個網頁,或者是圖片、文件、郵件地址。一個網頁中的鏈接分成兩個部分:鏈接的載體和鏈接的目標地址。 鏈接的載體就是在網頁中文字和圖片

50、,凡是包含鏈接的文字和圖片都稱為超鏈接。 操作設置文字的超鏈接:打開主頁文件,用鼠標反白選擇要超鏈接的文字“歡迎光臨站點名稱”,然后按鼠標右鍵。在彈出菜單中選擇“超鏈接”。彈出超鏈接設置窗口,然后在列表中選擇要超連接網頁文件“Photo.htm”,確定后,就可以看到超級鏈接已建立好了。注意,在網頁編輯窗口,可以按住“Ctrl”鍵,點擊超鏈接就可以打開超鏈接指向的網頁。 操作設置圖片的超鏈接:鼠標右鍵點擊要設置超鏈接的圖片,在右鍵菜單中選擇“超鏈接屬性”,然后設置要鏈接的文件,也可以鏈接圖片、EMail地址等。 操作管理超鏈接:一個網站的超鏈接就像一張網一樣,網住了網站的所有文件。在“視圖”窗口

51、中點擊“超鏈接”,打開超鏈接的管理窗口,在這個窗口中,我們可以看到各個文件相互間的鏈接情況,例如,要看“photo.htm”文件中鏈接了哪些文件,又被哪些文件鏈接,可以在旁邊的文件夾窗口中選擇該文件,然后即可在鏈接示意窗口中查看了。也可以在超鏈接的示意窗口直接展開某個文件的上、下超鏈接。 進一步學習的建議:掌握各種超鏈接的設置、書簽,學習使用導航條,學習使用圖形熱點。學習使用圖片的熱區。規劃網站 規劃網站,其實就是網站的整體定位。說得時髦一點就有點像CI(corporate identity),意思是通過視覺來統一企業的形象。算了,還是不要這么復雜吧,我只是一個小家碧玉者。 1.確定主題和內容

52、 主題和內容說白一點就是做網站的目的。看了不少個人網站,感覺就是:你抄我抄大家一起抄,黃沙淘盡不見金。我絕對不能這樣,否則就成了網絡垃圾了。經過冥思苦想,我決定做一個真正意義上的“個人”網站,做一個個人的家,一個在網絡上宣傳自己、結交朋友的“家”。 這樣一來,主要內容就應該是介紹自己。個人簡歷?不,那樣也太沒有意思了。就當是做一個圖文并茂的自我小傳吧!應該有簡歷的一部分內容,但還應該多說說自己的興趣愛好。此外,還少不了應該適當介紹一下和自己相關的東西啊! 內容確定了,那是不是應該給我的網站取個好名字了?前輩說:網站名稱也是網站設計的一部分,而且是很關鍵的一個要素。很有道理,就像每個人都想取個好

53、名字一樣,家也應該有個好名字! 看看網上的名字,“海闊天空”有點虛,“XX的個人主頁”有點俗。還是平實一點,就以我的名字叫“豆豆之家”吧。 2.網站結構 參考了一下其他的個人網站,再看看前輩長篇大論,我也稀里糊涂地明白了一些名詞。 網頁就是你看到瀏覽器內的一個頁面,由圖片和文字組成。通常有一級頁面、二級頁面之說。當你輸入網址看到的第一個頁面叫做首頁,通常的名字是index.htm。 網站簡單地說就是很多相關網頁文件、圖片文件? 他文件的組合。一個網站由相關網頁組成一個關系網,通過頁面上的鏈接在不同的網頁之間跳轉。 網站的結構和內容好像還有一些不成文的規定(當然都是前輩們嘮叨的): 1. 網站一

54、定要緊扣主題。 2. 設定一個交互式的欄目,例如留言薄。 3. 頁面簡潔,盡可能方便訪問者的瀏覽和查詢。 4. 網站的層次不要太復雜,小網站由3層網頁構成是比較合適的。 5. 整體的頁面設計風格要保持一致。 3.風格的選擇 網站的風格,是不是有點像人的氣質呀?“家”當然是有氣質的,或者活潑、或者嚴肅、或者精美、或者樸素、或者粗獷豪放、或者小家碧玉等。我們應該根據自己的主題和內容給它選擇一種合適的風格類型,以求內容和形式的完美結合,突出自己的特色和個性。可惜我不是學美術的,只是簡單地知道一些冷暖色,看來還得在實踐中多比較。 4.頁面設計 網站是由一個個頁面組成的,所以每個頁面的制作就顯得極其重要。說來說去又是一個美術設計方面的問題。我先找幾張白紙勾畫我的頁面草圖。 這是網絡上常見的幾種網頁布局。雖然都是在排列目錄、題目、正文,但真正要做到結構清晰、一目了然還得看具體制作的功夫。 當然可以選擇更活潑一點的樣式,只是需要自己去發揮了,或者到網絡上去學習各種漂亮的頁面設計。選擇制作工具 古人說得好:工欲善其事,必先利其器。網上建家總是要工具的,制作網頁和網站的工具很多,甚至用記事本也可以(就像泥瓦匠起房子一樣,是

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論