主題網(wǎng)站設(shè)計(jì)

主題網(wǎng)站設(shè)計(jì)第1頁/共134頁網(wǎng)頁設(shè)計(jì)欣賞班級(jí)：09視傳1班姓名：楊薇學(xué)號(hào)：2009110079

牛牛文庫文檔分享第2頁/共134頁優(yōu)勢(shì)：這個(gè)圖片的位置放的恰到好處。很有吸引力。第3頁/共134頁優(yōu)勢(shì)：體現(xiàn)了衣服的本質(zhì)跟價(jià)值。第4頁/共134頁優(yōu)勢(shì)：整體看起來比較一目了然，看著比較清爽。和諧。

給人們眼前一亮的感覺。第5頁/共134頁第6頁/共134頁第7頁/共134頁第8頁/共134頁第9頁/共134頁第10頁/共134頁第11頁/共134頁第12頁/共134頁第13頁/共134頁網(wǎng)站規(guī)劃一般需要以下幾個(gè)階段1、整體策劃階段2、收集資料階段3、制作階段4、編輯調(diào)試階段5、網(wǎng)站發(fā)布與維護(hù)階段第14頁/共134頁一、確定主題，規(guī)劃網(wǎng)站一個(gè)優(yōu)秀的網(wǎng)站，應(yīng)具有主題明確、特色鮮明、內(nèi)容豐富、圖文并茂、動(dòng)靜結(jié)合等特點(diǎn)，給訪問者以賞心悅目的感受。欣賞學(xué)生設(shè)計(jì)的保護(hù)珍稀動(dòng)物網(wǎng)站。第15頁/共134頁10.1.1規(guī)劃網(wǎng)站要點(diǎn)（1）明確建設(shè)網(wǎng)站的目的。（2）進(jìn)行可行性分析：網(wǎng)站建設(shè)需要花費(fèi)多少時(shí)間、精力、人力，性價(jià)比是否合理。（3）網(wǎng)站的內(nèi)容設(shè)計(jì)：根據(jù)網(wǎng)站建設(shè)的目的，分析瀏覽者的需要，確定網(wǎng)站的內(nèi)容。（4）網(wǎng)站的表現(xiàn)形式設(shè)計(jì)：主要指網(wǎng)頁的版面布局設(shè)置，網(wǎng)站的標(biāo)志、網(wǎng)站的圖文排版等。第16頁/共134頁探究學(xué)習(xí)：上網(wǎng)瀏覽下面的網(wǎng)站，比較它們各自的特點(diǎn)。中少在線：中國(guó)黃山風(fēng)景區(qū)：第17頁/共134頁10.1.2規(guī)劃網(wǎng)站設(shè)計(jì)一個(gè)主題為“動(dòng)物——人類的朋友”網(wǎng)站。欄目名文件名主要內(nèi)容首頁index.htm展示網(wǎng)站宗旨和公益廣告多彩的生物biaoge.htm介紹一些動(dòng)物的生活習(xí)性人與動(dòng)物kuangjia.htm介紹人與動(dòng)物息息相關(guān)的內(nèi)容動(dòng)物保護(hù)知多少biaodan.htm網(wǎng)上知識(shí)征答，具有交互功能走進(jìn)動(dòng)物世界youqing.htm鏈接更多的相關(guān)網(wǎng)站，讓訪問者了解更多人與動(dòng)物方面的知識(shí)

牛牛文庫文檔分享第18頁/共134頁10.2收集素材確定主題后，需要圍繞主題收集素材（圖像、文字、動(dòng)畫、聲音等），并將素材歸類整理，以方便網(wǎng)頁設(shè)計(jì)制作。在收集和保存資料的過程中，除了注意文件的存儲(chǔ)位置外，還需要注意素材文件的命名，文件名要盡可能用英文或漢語拼音來命名。在收集素材的過程中，更要注意素材的有效性和真?zhèn)涡?，不要將與主題無關(guān)的資料下載到素材文件中。第19頁/共134頁五、建站網(wǎng)頁素材的收集與加工處理1、文本文件素材的收集與處理2、圖像文件素材的收集與處理3、動(dòng)畫文件素材的收集與處理4、音頻文件素材的收集與處理（二）網(wǎng)頁素材的收集與處理6、網(wǎng)頁特效素材的收集與處理5、視頻文件素材的收集與處理第20頁/共134頁文本文件素材的收集與處理網(wǎng)頁素材的收集與處理第21頁/共134頁圖像文件素材的收集與處理ACDSee圖像瀏覽工具Firework圖像編輯工具第22頁/共134頁Flash動(dòng)畫素材的收集與處理動(dòng)畫制作工具Flash文字動(dòng)畫編輯工具Flax300Flash動(dòng)畫破解工具SWFDecompiler（碩思閃客）第23頁/共134頁音頻素材的收集與處理CoolEditPro音頻編輯軟件AudioConverter音頻格式轉(zhuǎn)換利器GoldWave音頻處理工具第24頁/共134頁素材的收集方式網(wǎng)頁素材素材來源途徑或方法素材文件類型文字素材網(wǎng)上下載或自制TXTDOC圖像素材網(wǎng)上下載或自制JPGGIF聲音素材網(wǎng)上下載或自制WAVMIDI動(dòng)畫素材網(wǎng)上下載或自制SWFGIF

牛牛文庫文檔分享第25頁/共134頁10.2利用MicrosoftforntPage制作網(wǎng)站10.2.1FrontPage窗口1.認(rèn)識(shí)FrontPage窗口第26頁/共134頁10.2.1認(rèn)識(shí)FrontPage窗口2.FrontPage有六種視圖方式：網(wǎng)頁、文件夾、報(bào)表、導(dǎo)航、超級(jí)鏈接、任務(wù)。通過視圖切換，可有針對(duì)性的查看內(nèi)容或網(wǎng)站結(jié)構(gòu)。3.編輯窗口有設(shè)計(jì)模式、拆分模式、代碼模式、預(yù)覽模式等四種模式。第27頁/共134頁

牛牛文庫文檔分享啟動(dòng)FrontPage網(wǎng)頁的書寫一般是使用HTML語言，也就是超文本標(biāo)記語言（HypertextMarkupLanguage）的英文縮寫。為了更容易制作網(wǎng)頁，人們開發(fā)了如FrontPage2000、Dreamweaver等軟件來直觀地進(jìn)行網(wǎng)頁制作，利用Flash等軟件制作各式的動(dòng)畫，利用Photoshop、Firework等軟件進(jìn)行各式圖形處理，使得網(wǎng)頁更加生動(dòng)活潑，多姿多彩！啟動(dòng)FrontPage的兩種方法：開始菜單和桌面圖標(biāo)。

請(qǐng)一位同學(xué)上來示范一下。

第28頁/共134頁羅定市新樂中學(xué)29FrontPage2003界面第29頁/共134頁

牛牛文庫文檔分享練習(xí)一

每位同學(xué)在D盤新建一個(gè)站點(diǎn)，站點(diǎn)名稱使用A+班號(hào)+學(xué)號(hào)；然后打開此站點(diǎn)文件夾，觀察里面有哪些文件和文件夾。

第30頁/共134頁

牛牛文庫文檔分享制作新網(wǎng)頁第31頁/共134頁

牛牛文庫文檔分享練習(xí)二分別使用三種方法制作一張新的網(wǎng)頁，并分別保存為new1.htm

、new2.htm和new3.htm。

第32頁/共134頁

牛牛文庫文檔分享保存網(wǎng)頁的方法第33頁/共134頁

牛牛文庫文檔分享預(yù)覽網(wǎng)頁的方法第34頁/共134頁

牛牛文庫文檔分享瀏覽網(wǎng)頁的方法第35頁/共134頁10.2.2．創(chuàng)建網(wǎng)站制作首頁一、新建站點(diǎn)：1.執(zhí)行“文件-新建”彈出“新建”，單擊“由一個(gè)網(wǎng)頁組成的網(wǎng)站”按鈕，彈出“網(wǎng)站模式”。

網(wǎng)站模板對(duì)話框

站點(diǎn)內(nèi)文件夾第36頁/共134頁實(shí)踐學(xué)習(xí)：2。單擊“空白網(wǎng)站”，在“指定新網(wǎng)站的位置”輸入“d：\dongwu”后按回車鍵，建立新站點(diǎn)。3。單擊“文件-關(guān)閉網(wǎng)站”，關(guān)閉站點(diǎn)。第37頁/共134頁10.2.2．創(chuàng)建網(wǎng)站制作首頁二、設(shè)計(jì)首頁（index.htm）第38頁/共134頁10.2.2．創(chuàng)建網(wǎng)站制作首頁三、首頁（index.htm）:《動(dòng)物—人類的朋友》制作要求如下：：1.標(biāo)題與正文之間用水平線隔開;2.在標(biāo)題左邊插入一個(gè)網(wǎng)站標(biāo)志圖;3.展示一段關(guān)于網(wǎng)站的文字介紹;4.給網(wǎng)頁設(shè)置背景圖片和背景音樂;5.插入鏈接到下一頁的圖標(biāo)。第39頁/共134頁實(shí)踐學(xué)習(xí)：1.打開站點(diǎn)。執(zhí)行“文件-打開站點(diǎn)”2.創(chuàng)建新網(wǎng)頁。執(zhí)行“文件-新建”單擊“空白網(wǎng)頁”3.制作首頁標(biāo)題。輸入“動(dòng)物-人類的朋友”執(zhí)行“格式-字體”，設(shè)置字體、字號(hào)、顏色4.插入水平線。執(zhí)行“插入-水平線”5插入網(wǎng)站標(biāo)志圖。執(zhí)行“插入-圖片-來自文件”，單擊插入。6文字輸入與排版。選中-格式；第40頁/共134頁7設(shè)置網(wǎng)頁背景圖片及背景音樂。右擊網(wǎng)頁空白處，執(zhí)行“網(wǎng)頁屬性”命令。8保存網(wǎng)頁。執(zhí)行“文件-另存為”在文件名處輸入文件名。第41頁/共134頁探究學(xué)習(xí)：設(shè)計(jì)和制作具有個(gè)性的網(wǎng)站歡迎頁面，更加靚麗。第42頁/共134頁10.2.3應(yīng)用表格布局網(wǎng)頁結(jié)構(gòu)

設(shè)計(jì)要求：1.用表格進(jìn)行版面布局2.在網(wǎng)頁中添加相應(yīng)的文字和圖片3.網(wǎng)頁中有橫幅、滾動(dòng)字幕、flash動(dòng)畫和導(dǎo)航欄。第43頁/共134頁10.2.3應(yīng)用表格布局網(wǎng)頁結(jié)構(gòu)《多彩的生物》網(wǎng)頁第44頁/共134頁步驟：1.首先規(guī)劃表格的結(jié)構(gòu)2.制作表格3.在整個(gè)表格外部加上僅有一個(gè)單元格的表格，即用表格嵌套。如下圖第45頁/共134頁10.2.3應(yīng)用表格布局網(wǎng)頁結(jié)構(gòu)《多彩的生物》表格布局網(wǎng)頁結(jié)構(gòu)：第46頁/共134頁實(shí)踐學(xué)習(xí)1.打開站點(diǎn)：d:\dongwu，新建一張空白網(wǎng)頁2.執(zhí)行“表格-插入”命令。3.設(shè)置表格或單元格屬性。右擊表格或單元格，在彈出的菜單中執(zhí)行“表格屬性”或單元格屬性。4.根據(jù)表格結(jié)構(gòu)插入圖片與文字。在第9-12單元格分別插入“朱鹮、藏羚羊”等動(dòng)物圖片，在第13-16單元格插入相應(yīng)文字介紹。并排版文字。第47頁/共134頁5。單擊“保存”按鈕，彈出“另存為”對(duì)話框，輸入文件名，保存的同時(shí)將圖片存儲(chǔ)在“images”文件夾中。第48頁/共134頁10.2.4給網(wǎng)頁增加動(dòng)感效果4.1、添加滾動(dòng)字幕在“biaoge.htm”中添加滾動(dòng)字幕“歡迎光臨保護(hù)動(dòng)物網(wǎng)站”。步驟：1.打開站點(diǎn)“d：\dongwu”，并打開“biaoge.htm”2.將插入點(diǎn)移到放滾動(dòng)字幕的單元格中。執(zhí)行：插入—組件—字幕—修改屬性。設(shè)置參數(shù)。第49頁/共134頁3.預(yù)覽網(wǎng)頁，觀察插入字幕后的網(wǎng)頁顯示效果。

字幕屬性第50頁/共134頁4.2制作交互式按鈕目的：為了方便用戶瀏覽或提交個(gè)信息，網(wǎng)頁中常常提供具有交互式功能的按鈕、圖片、文字等。實(shí)踐學(xué)習(xí)：在biaoge網(wǎng)頁的導(dǎo)航欄中，選擇標(biāo)號(hào)為3-7的單元格插入交互式按鈕。第51頁/共134頁步驟：

1.執(zhí)行插入-web組件命令，雙擊“動(dòng)態(tài)效果”中的交互式按鈕2.在彈出的對(duì)話框中，選擇按鈕形式為“浮雕膠囊1”，在“文本”框輸入名稱“首頁”3.單擊“圖像”標(biāo)簽，設(shè)置圖形屬性，選中“按鈕為gif圖像并具有透明背景色”。4.用同樣的方法，設(shè)置其他按鈕。第52頁/共134頁10.2.4給網(wǎng)頁增加動(dòng)感效果制作交互式按鈕執(zhí)行：插入—組件—懸停按鈕—修改屬性

懸停按鈕屬性第53頁/共134頁10.2.4給網(wǎng)頁增加動(dòng)感效果4.3、插入flash動(dòng)畫執(zhí)行：插入—圖片-flash影片，選擇一個(gè)flash文件（dongwu.swf）。高級(jí)—插件—修改屬性

插件屬性第54頁/共134頁探究學(xué)習(xí)：在網(wǎng)頁中插入一個(gè)“日歷控件”第55頁/共134頁10.2.5制作交互網(wǎng)頁表單10.2.5表單網(wǎng)頁：第56頁/共134頁10.2.5制作交互式網(wǎng)頁1、表單元件

2、制作表單

第57頁/共134頁1.什么是表單表單是網(wǎng)頁訪問者與站點(diǎn)進(jìn)行信息傳遞、互動(dòng)交流的工具，它一般以窗體的形式存在頁面中。表單依靠具體的表單對(duì)象收集信息，表單對(duì)象包含多種類型，如文本框、文本區(qū)域、按鈕、單選框、復(fù)選框、列表/菜單等，訪問者可以在表單對(duì)象內(nèi)輸入或者選擇信息，然后通過按鈕將信息提交給網(wǎng)站，網(wǎng)站對(duì)信息再進(jìn)行處理。如右圖所示，展示了表單在留言簿頁面中的一個(gè)應(yīng)用實(shí)例，其中使用了表單對(duì)象有文本框、文本區(qū)域、列表/菜單、按鈕。第58頁/共134頁2．表單對(duì)象

【表單】插入欄列出了具體的表單對(duì)象，如上圖所示?！氨韱巍保嚎稍谖臋n中插入表單。任何其他表單對(duì)象，如文本域、按鈕等，都必須插入表單之中，這樣所有瀏覽器才能正確處理這些數(shù)據(jù)?！拔谋居颉保嚎稍诒韱沃胁迦胛谋居?。文本域可接受任何類型的字母數(shù)字項(xiàng)。輸入的文本可以顯示為單行、多行或者顯示為項(xiàng)目符號(hào)或星號(hào)（用于保護(hù)密碼）。

第59頁/共134頁“復(fù)選框”：可在表單中插入復(fù)選框。復(fù)選框允許在一組選項(xiàng)中選擇多項(xiàng)，用戶可以選擇任意多個(gè)適用的選項(xiàng)?！皢芜x按鈕”：可在表單中插入單選按鈕。單選按鈕代表互相排斥的選擇。選擇一組中的某個(gè)按鈕，就會(huì)取消選擇該組中的所有其他按鈕。例如，用戶可以選擇“是”或“否”?！皢芜x按鈕組”：可插入共享同一名稱的單選按鈕的集合。“列表/菜單”：可使用戶可以在列表中創(chuàng)建用戶選項(xiàng)?！傲斜怼边x項(xiàng)在滾動(dòng)列表中顯示選項(xiàng)值，并允許用戶在列表中選擇多個(gè)選項(xiàng)?！安藛巍边x項(xiàng)在彈出式菜單中顯示選項(xiàng)值，而且只允許用戶選擇一個(gè)選項(xiàng)。“跳轉(zhuǎn)菜單”：插入可導(dǎo)航的列表或彈出式菜單。跳轉(zhuǎn)菜單允許您插入一種菜單，在這種菜單中的每個(gè)選項(xiàng)都鏈接到文檔或文件。請(qǐng)參見創(chuàng)建跳轉(zhuǎn)菜單?！皥D像域”：可使用戶可以在表單中插入圖像?？梢允褂脠D像域替換“提交”按鈕，以生成圖形化按鈕。“文件域”：可在文檔中插入空白文本域和“瀏覽”按鈕。文件域使用戶可以瀏覽到其硬盤上的文件，并將這些文件作為表單數(shù)據(jù)上傳?！鞍粹o”：可在表單中插入文本按鈕。按鈕在單擊時(shí)執(zhí)行任務(wù)，如提交或重置表單。可以為按鈕添加自定義名稱或標(biāo)簽，或者使用預(yù)定義的“提交”或“重置”標(biāo)簽之一?！皹?biāo)簽”：可在文檔中給表單加上標(biāo)簽，以<label></label>形式開頭和結(jié)尾?！白侄渭保嚎稍谖谋局性O(shè)置文本標(biāo)簽。第60頁/共134頁3．插入表單操作：將【常用】插入欄切換到【表單】插入欄，然后單擊【表單】插入欄上的表單按鈕，即可在編輯窗口添加表單，如下圖所示。第61頁/共134頁4．插入表單對(duì)象

操作：首先插入一個(gè)表單，然后將鼠標(biāo)光標(biāo)置于表單域內(nèi)，單擊【表單】插入欄上的表單對(duì)象按鈕即可，如下圖，插入一個(gè)按鈕表單對(duì)象。第62頁/共134頁5．表單使用對(duì)于網(wǎng)頁中的表單，用戶可以根據(jù)需要調(diào)整它的布局，例如可以使用換行符、段落標(biāo)記、預(yù)格式化的文本或表來設(shè)置表單的格式。使用表格為表單對(duì)象和域標(biāo)簽提供結(jié)構(gòu)是比較常用的一種調(diào)整表單布局的方法。當(dāng)在表單中使用表格時(shí)，請(qǐng)確保所有的table標(biāo)簽都位于兩個(gè)form標(biāo)簽之間。需要注意的是不能將一個(gè)表單插入到另一個(gè)表單中，即標(biāo)簽不能交迭，但是可以在一個(gè)頁面中包含多個(gè)表單。第63頁/共134頁6．文本域表單文本域和按鈕是網(wǎng)頁表單中最常用的表單對(duì)象之一，在文本域中可以輸入任何類型的文本內(nèi)容。根據(jù)文本域的行數(shù)和顯示不同，可分為三種類型：?jiǎn)涡形谋居?、多行文本域、密碼文本域。密碼文本域在頁面中不顯示具體的文本內(nèi)容，而以“*”代替或者其他指定的符號(hào)代替，它的屬性和單行文本域基本相同。本例中涉及的幾個(gè)屬性項(xiàng)的含義。第64頁/共134頁【文本域】文本框：用于為文本域指定一個(gè)名稱，此名稱必須是唯一的?！咀址膶挾取课谋究颍涸O(shè)置在瀏覽器中顯示的文本長(zhǎng)度。【最多字符數(shù)】文本框：指定文本域中最多可輸入的字符數(shù)。超出了將發(fā)出警告聲，不填則可輸入任意數(shù)量的字符?！绢愋汀繂芜x項(xiàng)：指定文本域的類型?！境跏贾怠课谋究颍河糜谥付ㄝd入表單時(shí)文本域中顯示的文本內(nèi)容，一般用來提示訪問者以使他們知道輸入的內(nèi)容。例如，“請(qǐng)輸入名字”請(qǐng)求名字信息?！绢悺窟x項(xiàng)框：用于設(shè)置文本域的CSS樣式?！靖叨取课谋究颍河糜跒槲谋居蛟O(shè)置高度，超出高度用滾動(dòng)條顯示?！緭Q行】選項(xiàng)框：用于選擇輸入內(nèi)容時(shí)，文本域中換行方式。有4個(gè)選項(xiàng)：“默認(rèn)”：用瀏覽器默認(rèn)的方式換行；“關(guān)”：當(dāng)輸入的文本內(nèi)容超過文本域?qū)挾葧r(shí)不換行，自動(dòng)出現(xiàn)水平滾動(dòng)條，滾動(dòng)顯示；“虛擬”：當(dāng)輸入的內(nèi)容超過文本域時(shí)自動(dòng)換行，但發(fā)送的數(shù)據(jù)中沒有換行符；“實(shí)體”：當(dāng)輸入的內(nèi)容超過文本域時(shí)自動(dòng)換行，但發(fā)送的數(shù)據(jù)中有換行符。【按鈕名稱】文本框：用于指定按鈕的名稱。【值】文本框：設(shè)置按鈕上顯示的文本內(nèi)容，以表明該按鈕的作用。如此處輸入“提交留言”，則按鈕上就顯示“提交留言”?！緞?dòng)作】單選項(xiàng)：設(shè)置單擊按鈕后發(fā)生的動(dòng)作，有3個(gè)選項(xiàng)?！疤峤槐韱巍保簩⒈韱螖?shù)據(jù)提交到表單指定的位置；“重設(shè)表單”：將表單內(nèi)的所有對(duì)象內(nèi)容還原；“無”：不發(fā)生任何動(dòng)作。第65頁/共134頁7．單選按鈕【單選按鈕】文本框：定義單選組的名稱，一組中的單選按鈕具有相同的名字；【選定值】文本框：該項(xiàng)被選中時(shí)，提交給服務(wù)器的值；【初始狀態(tài)】選項(xiàng)組：設(shè)置該按鈕在初始狀態(tài)是否被選中，一組中只能有一個(gè)初始狀態(tài)設(shè)為選中。第66頁/共134頁8．菜單/列表【列表/菜單】文本框：用于指定列表或者菜單的名稱；【類型】選項(xiàng)組：設(shè)定當(dāng)前對(duì)象是菜單還是列表；【高度】文本框：設(shè)置列表的高度；【初始化時(shí)選定】文本框：設(shè)定首次載入表單時(shí)選中那些選項(xiàng)；按鈕：設(shè)定列表/菜單的項(xiàng)目和項(xiàng)目值。第67頁/共134頁9訪客留言頁面第68頁/共134頁10用戶注冊(cè)頁面第69頁/共134頁實(shí)踐學(xué)習(xí)制作“知識(shí)問答”表單步驟：p59第70頁/共134頁

制作框架網(wǎng)頁《人與動(dòng)物》10.2.6框架網(wǎng)頁《人與動(dòng)物》第71頁/共134頁網(wǎng)頁的制作已經(jīng)基本掌握了，怎樣才能將它們整合成為一個(gè)網(wǎng)站呢？怎樣才能讓別人在網(wǎng)上看到我的網(wǎng)站呢？一連串的問題都來了！還是趁熱打鐵，趕緊學(xué)習(xí)一下吧。任務(wù)引入第72頁/共134頁知識(shí)技能點(diǎn)FrontPage2003的表格的創(chuàng)建和使用FrontPage2003的框架的創(chuàng)建和使用FrontPage2003的表單的創(chuàng)建和使用FrontPage2003的網(wǎng)頁的發(fā)布和維護(hù)第73頁/共134頁初始網(wǎng)頁第74頁/共134頁效果圖第75頁/共134頁任務(wù)準(zhǔn)備在網(wǎng)站中新建一個(gè)網(wǎng)頁在網(wǎng)頁上設(shè)置字體在網(wǎng)頁上插入一個(gè)四行一列的表格設(shè)置表格的屬性第76頁/共134頁創(chuàng)建框架

含義：把各個(gè)網(wǎng)頁放在屏幕不同區(qū)域顯示的方法是使用框架網(wǎng)頁。新建框架網(wǎng)頁的方法編輯各部分網(wǎng)頁的內(nèi)容創(chuàng)建網(wǎng)站中的超級(jí)鏈接第77頁/共134頁創(chuàng)建框架

在“文件”框的“新建”子框中選擇“網(wǎng)頁”命令，打開“新建”對(duì)話框；如圖8—19所示。圖8—33新建對(duì)話框圖第78頁/共134頁創(chuàng)建框架

選擇其中“其他網(wǎng)頁模板”命令，彈出“網(wǎng)頁模板”對(duì)話框，如圖8—20所示。圖8—34網(wǎng)頁模板圖

第79頁/共134頁創(chuàng)建框架

您根據(jù)實(shí)際情況，選擇“橫幅和目錄”的框架網(wǎng)頁，打開如圖8—21

所示。圖8—35“橫幅和目錄”的框架網(wǎng)頁圖橫幅區(qū)網(wǎng)頁內(nèi)容區(qū)目錄區(qū)第80頁/共134頁創(chuàng)建框架超鏈接一個(gè)新的框架網(wǎng)頁不包含任何內(nèi)容，F(xiàn)rontPage2003將在每個(gè)新框架中顯示和兩個(gè)按鈕，單擊前一按鈕可以從站點(diǎn)中選擇已準(zhǔn)備好的網(wǎng)頁，單擊后一按鈕可以在框架中創(chuàng)建一個(gè)新的空白網(wǎng)頁。

由于您已經(jīng)準(zhǔn)備好了4個(gè)“中國(guó)節(jié)日”的網(wǎng)頁，所以他就單擊選擇已準(zhǔn)備好的網(wǎng)頁。首先單擊橫幅區(qū)的，彈出如圖8—22

所示圖8—36插入超鏈接圖第81頁/共134頁創(chuàng)建框架

新建橫幅網(wǎng)頁，如圖8—23所示圖8—37插入橫幅圖第82頁/共134頁創(chuàng)建框架

插入目錄網(wǎng)頁，網(wǎng)頁就變成9—24所示圖8—38插入目錄圖第83頁/共134頁拆分框架當(dāng)使用模板創(chuàng)建的框架結(jié)構(gòu)不能滿足需要時(shí)，可以通過拆分框架制作出更為復(fù)雜的框架網(wǎng)頁。操作步驟如下：（1）選擇要拆分的框架；（2）在“框架”框中選擇“拆分框架”命令，打開“拆分框架”對(duì)話框；（3）根據(jù)需要選擇“拆分為列”或“拆分成行”選項(xiàng)；（4）單擊“確定”按鈕完成拆分。刪除框架可以從框架結(jié)構(gòu)中刪除指定的框架。此時(shí)，系統(tǒng)只是把框架從框架網(wǎng)頁中刪去，而此框架中的網(wǎng)頁文件仍然存在。操作方法是：選擇要?jiǎng)h除的框架，在“框架”框中選擇“刪除框架”命令即可。第84頁/共134頁第一步：選擇文字“更多節(jié)日…”。第二步：利用“插入”菜單或右鍵菜單中“超鏈接”命令，打開“創(chuàng)建超鏈接”對(duì)話框。插入超鏈接圖8-19圖8-18第85頁/共134頁第三步：在“創(chuàng)建超鏈接”對(duì)話框中輸入網(wǎng)址/ch-jieri/，使得點(diǎn)擊文字時(shí)，打開新的網(wǎng)頁。第四步：?jiǎn)螕簟按_定”按鈕，完成超鏈接的添加。第五步：也可以鏈接到電腦上的某個(gè)文件。例如為“春節(jié)”設(shè)置超鏈接，指向網(wǎng)頁“chunjiehtm”，該網(wǎng)頁上節(jié)課已創(chuàng)建。第六步：也可以為圖片設(shè)置超級(jí)鏈接，方法與上面相同。插入超鏈接第86頁/共134頁創(chuàng)建框架網(wǎng)頁超鏈接下面要分別插入4個(gè)“節(jié)日”的網(wǎng)頁，這就要分別對(duì)應(yīng)創(chuàng)建超鏈接，其方法如下：（1）選擇要定義超鏈接的文字或圖片；（2）單擊“常用”工具欄上的“超鏈接”按鈕，出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框；（3）在“查找范圍”中選擇需要插入鏈接的目標(biāo)網(wǎng)頁；（4）單擊“更改目標(biāo)框架”按鈕，出現(xiàn)“目標(biāo)框架”對(duì)話框；（5）在“當(dāng)前框架網(wǎng)頁”區(qū)域中單擊要用作目標(biāo)的框架；（6）單擊“確定”按鈕，返回到“創(chuàng)建超鏈接”對(duì)話框，在“目標(biāo)框架”欄中顯示出設(shè)置的目標(biāo)框架名稱；（7）單擊“確定”按鈕。第87頁/共134頁創(chuàng)建框架網(wǎng)頁超鏈接在指定目標(biāo)框架時(shí)，除了當(dāng)前的框架之外，還提供了一些特殊的框架來創(chuàng)建不同效果的目標(biāo)框架。這些特殊框架位于“目標(biāo)框架”對(duì)話框中的“公用的目標(biāo)區(qū)”區(qū)域，有以下幾種：相同框架：將鏈接的網(wǎng)頁顯示在包含該超鏈接的

同一個(gè)框架內(nèi)。整頁：將框架展開為整個(gè)窗口后，顯示鏈接網(wǎng)頁。新建窗口：打開另外一個(gè)新窗口，顯示鏈接網(wǎng)頁。父框架：在當(dāng)前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁。

第88頁/共134頁設(shè)置框架屬性通過對(duì)框架屬性的設(shè)置，可以更改框架超鏈接的網(wǎng)頁、調(diào)整框架大小等。基本操作是：選擇目標(biāo)框架，從“框架”框中選擇“框架屬性”命令，出現(xiàn)如圖8—26所示的“框架屬性”對(duì)話框，設(shè)置框架屬性。圖8—40框架屬性對(duì)話框圖第89頁/共134頁設(shè)置框架屬性

單擊“框架屬性”對(duì)話框中“框架網(wǎng)頁”按鈕，彈出如圖8—27所示。在這里可以調(diào)整框架間距。清除“顯示邊框”復(fù)選框時(shí)，可以隱藏框架邊框。您完成了整個(gè)網(wǎng)頁的設(shè)計(jì)，接著要做的工作是把網(wǎng)頁發(fā)布在學(xué)校的網(wǎng)站上。

圖8—41網(wǎng)頁屬性對(duì)話框圖第90頁/共134頁保存框架

FrontPage2003提供的常用的幾種關(guān)于創(chuàng)建框架的操作：保存框架網(wǎng)頁當(dāng)完成框架網(wǎng)頁之后，就需要保存這個(gè)框架網(wǎng)頁。操作步驟如下：（1）單擊“常用”工具欄中的“保存”按鈕，打開“另存為”對(duì)話框，在右邊的框架網(wǎng)頁預(yù)覽圖中，其中一個(gè)框架高亮顯示，表示正在保存該網(wǎng)頁；（2）在“文件名”框中輸入網(wǎng)頁名稱；（3）單擊“更改”按鈕，設(shè)置網(wǎng)頁的標(biāo)題；（4）單擊“保存”按鈕，該網(wǎng)頁保存完畢，框架圖中的另一個(gè)框架處于高亮狀態(tài)；（5）重復(fù)步驟（2）～（4）的操作；（6）當(dāng)對(duì)話框中的整個(gè)框架處于高亮狀態(tài)時(shí)，表示正在保存框架網(wǎng)頁本身；（7）輸入框架網(wǎng)頁的文件名稱及標(biāo)題；（8）單擊“保存”按鈕。第91頁/共134頁學(xué)生練習(xí)：根據(jù)講授內(nèi)容，創(chuàng)建自己的框架網(wǎng)頁p63完成實(shí)踐學(xué)習(xí)。評(píng)出最美的網(wǎng)站。

圖8—41網(wǎng)頁屬性對(duì)話框圖第92頁/共134頁

創(chuàng)建框架網(wǎng)頁步驟

制作框架網(wǎng)頁《人與動(dòng)物》第93頁/共134頁制作框架網(wǎng)頁的注意點(diǎn)：1.框架網(wǎng)頁的實(shí)質(zhì)是一個(gè)框架網(wǎng)頁中可包含多個(gè)相互獨(dú)立的網(wǎng)頁；2.框架網(wǎng)頁中“設(shè)置初始網(wǎng)頁”與“新建網(wǎng)頁”的區(qū)別；3.注意“框架網(wǎng)頁”與利用“表格制作網(wǎng)頁”的區(qū)別。

制作框架網(wǎng)頁注意點(diǎn)第94頁/共134頁10.2.7設(shè)置超鏈接

超鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)目的端的鏈接，比如說指向另一個(gè)網(wǎng)頁或者相同網(wǎng)頁上的不同位置。 當(dāng)一個(gè)站點(diǎn)訪問者單擊超鏈接時(shí)，目的端將顯示在Web瀏覽器上，并根據(jù)目的端的類型來打開或運(yùn)行。第95頁/共134頁10.2.7設(shè)置超鏈接常用超鏈接形式：同一站點(diǎn)內(nèi)頁面之間的超鏈接；不同網(wǎng)站之間的網(wǎng)頁鏈接。10.2.7：創(chuàng)建超鏈接返回本節(jié)第96頁/共134頁每當(dāng)我們?cè)跒g覽網(wǎng)頁時(shí)，都會(huì)發(fā)現(xiàn)當(dāng)鼠標(biāo)指針移動(dòng)到某些文字或圖片時(shí)，就會(huì)變成一只手掌“”的樣子，這時(shí)只需單擊鼠標(biāo)左鍵就可以打開另一網(wǎng)頁了。這就是我們將要講述的網(wǎng)頁“超鏈接”方式。

正是由于有了“超鏈接”，因特網(wǎng)才會(huì)如此神奇和流行！第97頁/共134頁

所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序.而在一個(gè)網(wǎng)頁中用來超鏈接的對(duì)象,可以是一段文本或者是一個(gè)圖片.網(wǎng)頁上的超鏈接，從網(wǎng)頁角度來看有兩種：網(wǎng)頁之間的超鏈接；網(wǎng)頁內(nèi)的超鏈接。從網(wǎng)址角度來看：一種是相對(duì)網(wǎng)址(同一網(wǎng)站下)的超鏈接；第二種是與絕對(duì)網(wǎng)址（如）的超鏈接；第三種是指在同一網(wǎng)頁內(nèi)的超鏈接。一、超鏈接的定義及分類/~lf1/index.htm第98頁/共134頁實(shí)例:操作步驟：（1）在創(chuàng)建好的新網(wǎng)站中，新建幾個(gè)網(wǎng)頁文件：主頁.htm，班級(jí)新聞.htm，相冊(cè).htm，喜愛站點(diǎn).htm等文件。（2）打開主頁.htm文件。（3）選定網(wǎng)頁內(nèi)的文字“班級(jí)新聞”作為鏈接點(diǎn)，單擊“

”超鏈接工具按鈕，或單擊右鍵快捷菜單中的【超鏈接】，出現(xiàn)【編輯超鏈接】對(duì)話框。在對(duì)話框的文件列表中選擇“班級(jí)新聞.htm”網(wǎng)頁文件。（4）與（3）操作類似，對(duì)文字“相冊(cè)”、“喜愛站點(diǎn)”分別設(shè)置超鏈接到文件“相冊(cè).htm”、“喜愛站點(diǎn).htm”。（5）最后保存文件到“主頁.htm”。

同一網(wǎng)站內(nèi)的超鏈接相對(duì)網(wǎng)址的超鏈接——二、網(wǎng)頁間的超鏈接（一）第99頁/共134頁完成實(shí)踐學(xué)習(xí)p66教師指導(dǎo)第100頁/共134頁操作步驟：（1）打開“喜愛站點(diǎn).htm”網(wǎng)頁文件。輸入標(biāo)題“我喜愛的站點(diǎn)”，“文字鏈接：”。（2）文字上的超鏈接：輸入“中文搜狐”并選定，然后單擊超鏈接工具按鈕，在出現(xiàn)的對(duì)話框“URL”欄內(nèi)輸入“”，最后單擊【確定】按鈕。（3）圖片上的超鏈接：選定插入的圖片，單擊超鏈接工具按鈕，在出現(xiàn)的對(duì)話框中“URL”欄內(nèi)輸入網(wǎng)址“//”。單擊【確定】按鈕。（4）輸入文字“[返回主頁]”，創(chuàng)建一個(gè)超鏈接到“主頁.htm”文件。（5）保存網(wǎng)頁文件到“喜愛站點(diǎn).htm”。絕對(duì)網(wǎng)址的超鏈接二、網(wǎng)頁間的超鏈接（二）第101頁/共134頁1、輸入鏈接網(wǎng)頁名稱在已經(jīng)準(zhǔn)備好正文內(nèi)容的網(wǎng)頁中，選擇插入點(diǎn)輸入即將創(chuàng)建的超鏈接網(wǎng)頁主題或名稱。2、選定鏈接點(diǎn)選定鏈接網(wǎng)頁的名稱作為鏈接點(diǎn)3、輸入正確的鏈接地址在【編輯超鏈接】對(duì)話框中輸入正確的鏈接地址：相對(duì)網(wǎng)址需要在網(wǎng)頁文件列表中選擇目標(biāo)網(wǎng)頁；創(chuàng)建網(wǎng)頁間超鏈接的關(guān)鍵點(diǎn)絕對(duì)網(wǎng)址則需要在URL中輸入該網(wǎng)頁的網(wǎng)絡(luò)地址。第102頁/共134頁當(dāng)一個(gè)網(wǎng)頁文件比較長(zhǎng)的時(shí)候，為了便于瀏覽，我們往往在網(wǎng)頁中使用書簽。在網(wǎng)頁中使用書簽的步驟分為兩步：

1、先定義書簽，即在網(wǎng)頁中某位置上定義一個(gè)書簽；

2、使用書簽，即定義一個(gè)超鏈接到該書簽。第103頁/共134頁1、定義書簽：（1）在”班級(jí)新聞“網(wǎng)頁bjxw.htm中輸入新聞三則，標(biāo)題分別為“一份愛心”、“新一輪班干部”、“向**同學(xué)看齊”，將標(biāo)題置于網(wǎng)頁正文上方的標(biāo)題區(qū)。（2）添加書簽：選中第一條新聞?wù)牟糠种械臉?biāo)題即目的點(diǎn)“一份愛心”，單擊“插入”菜單，選擇“書簽”命令，出現(xiàn)“書簽”對(duì)話框。（3）將“新聞a”輸入對(duì)話框作為書簽名稱。（4）按此方法為另外兩條新聞標(biāo)題加上書簽。

——

書簽三、同一網(wǎng)頁內(nèi)的超鏈接第104頁/共134頁2、使用書簽：（1）選定網(wǎng)頁正文上方標(biāo)題區(qū)內(nèi)的新聞標(biāo)題“一份愛心”，然后單擊超鏈接工具按鈕，出現(xiàn)【編輯超鏈接】對(duì)話框。（2）在對(duì)話框中的【可選】區(qū)域中，打開【書簽】下拉列表框，出現(xiàn)上面所定義過的三個(gè)書簽名稱：新聞a、新聞b、新聞c。選中“新聞a”后單擊【確定】按鈕，（3）用同樣的方法將“新一輪班干部”、“向**同學(xué)看齊”兩則新聞分別鏈接到“新聞b”、“新聞c”書簽。（4）將網(wǎng)頁文件保存起來，并在瀏覽器中瀏覽。當(dāng)單擊標(biāo)題區(qū)內(nèi)的“一份愛心”、“新一輪班干部”、“向**同學(xué)看齊”時(shí)，屏幕會(huì)自動(dòng)滾動(dòng)到相應(yīng)的書簽位置并顯示內(nèi)容。

——

書簽三、同一網(wǎng)頁內(nèi)的超鏈接第105頁/共134頁完成實(shí)踐學(xué)習(xí)p69教師指導(dǎo)第106頁/共134頁大家謝謝第107頁/共134頁

網(wǎng)站的發(fā)布與管理

牛牛文庫文檔分享第108頁/共134頁10.3網(wǎng)站的發(fā)布與評(píng)價(jià)1.檢查與測(cè)試網(wǎng)站;2.發(fā)布站點(diǎn);3.評(píng)價(jià)網(wǎng)站。第109頁/共134頁目錄空間申請(qǐng)與網(wǎng)站發(fā)布2網(wǎng)站的管理、維護(hù)與更新3同步練習(xí)4網(wǎng)站的測(cè)試1第110頁/共134頁一、網(wǎng)站的測(cè)試

1）Frontpage報(bào)表檢測(cè)：

報(bào)表能夠清晰的呈現(xiàn)網(wǎng)站的許多重要的相關(guān)信息，在“查看”菜單中，指向“報(bào)表”，從后面的選項(xiàng)列表中勾取“站點(diǎn)總覽”，經(jīng)過一段時(shí)間后，會(huì)進(jìn)入站點(diǎn)情況的報(bào)告項(xiàng)目列表，如圖：

牛牛文庫文檔分享第111頁/共134頁網(wǎng)站的測(cè)試注意：如果您的站點(diǎn)中包含了隱藏文件夾中的文件，那么這些文件將不會(huì)出現(xiàn)在此報(bào)表中。若要讓隱藏文件夾中的文件出現(xiàn)在您的報(bào)表中，請(qǐng)單擊“工具”菜單中的“站點(diǎn)設(shè)置”，再單擊“高級(jí)”選項(xiàng)卡，然后選擇“顯示隱藏目錄中的文檔”復(fù)選框。如圖：

第112頁/共134頁網(wǎng)站的測(cè)試2）超連接檢測(cè)

點(diǎn)擊“查看”-“超連接”或是直接點(diǎn)擊左邊的“超連接”按鈕都可以進(jìn)入連接查看窗口，這時(shí)窗口會(huì)提示你“在左邊的文件列表中任意的選定一個(gè)目標(biāo)文件”，選中以后在右邊窗口中會(huì)自動(dòng)顯示目標(biāo)網(wǎng)頁的雙向連接情況（即指定及被指向的所有網(wǎng)頁），并且通過箭頭標(biāo)出，如圖顯示一個(gè)簡(jiǎn)單的例子：

第113頁/共134頁網(wǎng)站的測(cè)試

3）網(wǎng)站兼容性的設(shè)置

考慮到現(xiàn)在網(wǎng)頁標(biāo)準(zhǔn)及技術(shù)的不同，F(xiàn)rontpge允許你將站點(diǎn)設(shè)置為與特定的瀏覽器或是技術(shù)兼容，從而根據(jù)不同的用戶獲得更好的顯示效果，當(dāng)然一旦你設(shè)定了當(dāng)前網(wǎng)站的兼容性，那么在Frontpage中與該技術(shù)相關(guān)的命令會(huì)自動(dòng)顯示為灰色，即不能正常使用狀態(tài)。

“工具”菜單中選“網(wǎng)頁選項(xiàng)”，并指向最右邊“兼容性”選項(xiàng)卡，如圖：注意:要設(shè)定特定的技術(shù)支持需要選擇前者的“自定義”選項(xiàng)，然后可以啟動(dòng)或是禁用他們前面的復(fù)選框，另外你也可以通過選擇指定的瀏覽器及版本來由Frontpage自動(dòng)選擇其支持的技術(shù)。第114頁/共134頁二、空間申請(qǐng)與網(wǎng)站發(fā)布

1．免費(fèi)空間申請(qǐng)?jiān)O(shè)計(jì)好了網(wǎng)頁文件之后，只能在本地計(jì)算機(jī)上用瀏覽器瀏覽。要想讓更多的人瀏覽就必須放到Internet的Web服務(wù)器上。目前有很多網(wǎng)絡(luò)公司免費(fèi)為網(wǎng)友們提供個(gè)人主頁空間，而且有的服務(wù)非常周到。如等等。第115頁/共134頁空間申請(qǐng)與網(wǎng)站發(fā)布第116頁/共134頁空間申請(qǐng)與網(wǎng)站發(fā)布

2．網(wǎng)站的發(fā)布：

在Frontpage中發(fā)布網(wǎng)站提供了兩種形式，HTTP形式和FTP形式。

當(dāng)服務(wù)器上安裝了Frontpage擴(kuò)展時(shí)，可以直接使用HTTP方式完成發(fā)布，相反如果沒有安裝就要使用后面的FTP形式完成了，下面主要著重的介紹一下FTP方式。

設(shè)置試服務(wù)器設(shè)置文檔類型在“文件”菜單中，單擊“發(fā)布站點(diǎn)”，同時(shí)單擊“選項(xiàng)”以展開選項(xiàng)列表。

指定只發(fā)布已更改的網(wǎng)頁，還是所有的網(wǎng)頁，若要發(fā)布子站點(diǎn)，請(qǐng)選擇“包含子站點(diǎn)”復(fù)選框。

在“指定發(fā)布站點(diǎn)的位置”框，鍵入FTP站點(diǎn)服務(wù)器的位置（如圖中的），如果發(fā)布位置在本地機(jī)上，可以直接通過右邊的“瀏覽”按鈕來選定，最后點(diǎn)擊發(fā)布，這時(shí)Frontpage會(huì)試圖連接上面的服務(wù)器并需要你提供準(zhǔn)確的登錄信息（用戶名稱及密碼）輸入即可完成傳輸。如右圖

（發(fā)布選項(xiàng)設(shè)置）第117頁/共134頁空間申請(qǐng)與網(wǎng)站發(fā)布（Frontpage試圖連接服務(wù)器）（FTP登錄信息驗(yàn)證窗口）第118頁/共134頁三、網(wǎng)站的管理、維護(hù)與更新對(duì)于一個(gè)網(wǎng)站的管理而言，并不是指某一階段的管理，而是貫穿在整個(gè)網(wǎng)站開發(fā)的過程中。網(wǎng)站發(fā)布后，仍然需要相當(dāng)?shù)臅r(shí)間在站點(diǎn)的維護(hù)上。目標(biāo)：通過這一節(jié)的學(xué)習(xí)，了解站點(diǎn)的導(dǎo)入與刪除、站點(diǎn)文件的管理、維護(hù)站點(diǎn)的一些常見任務(wù)以及保持站點(diǎn)更新的方式。第119頁/共134頁網(wǎng)站的管理

導(dǎo)入實(shí)際上就是把導(dǎo)入目標(biāo)原封不變地復(fù)制到當(dāng)前站點(diǎn)內(nèi)。比如我們要導(dǎo)入另外的一個(gè)站點(diǎn)可以這樣操作：首先在文件夾列表中選中導(dǎo)入內(nèi)容存放的文件夾，這里我們選擇當(dāng)前站點(diǎn)的根目錄。1、導(dǎo)入站點(diǎn)第120頁/共134頁選擇“文件”菜單的“導(dǎo)入”命令，在“導(dǎo)入”對(duì)話框中可以選擇“添加文件”按鈕添加文件到當(dāng)前站點(diǎn)中，也可以選擇添加文件夾復(fù)制某文件夾到當(dāng)前站點(diǎn)。在這里我們選擇“來自站點(diǎn)”。

第121頁/共134頁如果知道被導(dǎo)入站點(diǎn)的存放目錄，我們可以選擇從本地計(jì)算機(jī)或源文件所在的目錄；如果知道被到入站點(diǎn)的URL地址，我們可以選擇從全球廣域網(wǎng)站點(diǎn)。在這里我們選擇從本地計(jì)算機(jī)或源文件所在的目錄，然后在位置框輸入站點(diǎn)對(duì)應(yīng)的盤符路徑名，將“包含子文件夾”復(fù)選框選中，以確保復(fù)制被導(dǎo)入站點(diǎn)的所有內(nèi)容。

單擊“下一步”，再單擊“下一步”，再單擊“完成”。這樣，我們就把一個(gè)站點(diǎn)導(dǎo)入進(jìn)當(dāng)前站點(diǎn)了。第122頁/共134頁2、刪除站點(diǎn)在文件夾列表中選中站點(diǎn)的根目錄，第123頁/共134頁執(zhí)行“編輯”菜單的“刪除”命令。如果選擇“只刪除此站點(diǎn)中的FrontP