【正文】 如圖 16）。 （圖 16） 我們?cè)傩陆ㄒ粋€(gè)網(wǎng)頁(yè)，在編輯區(qū)編輯你自己的自我介紹，然后保存，記住用英文名保存，比如用“ ” ，不能用中文。 保存好了，我們重新打開(kāi)剛才保存的主頁(yè)（ ），為主頁(yè)上的 “ 自我介紹：做超級(jí)連接。 用鼠標(biāo)左鍵括起主頁(yè)上的“自我介紹”四個(gè)字，然后點(diǎn)擊按紐欄的超級(jí)連接按紐，在彈出的窗口中選擇剛才保存的“ ” （如圖 17）。 （圖 17） （圖 18） 37 按確定。如果你發(fā)現(xiàn)“自我介紹”四個(gè)字下面多了一條橫線 ，說(shuō)明你的超級(jí)連接就做成功了：） 依次把“我的收藏”“我的愛(ài)好”等幾個(gè)網(wǎng)頁(yè)做好，并依次為它們做上連接。 當(dāng)做“給我寫(xiě)信”的連接的時(shí)候，要注意一下它的做法稍有不同。由于是給你寫(xiě)信的連接，點(diǎn)擊這個(gè)連接之后系統(tǒng)就會(huì)自動(dòng)運(yùn)行電子郵件程序給你發(fā)郵件。所以這個(gè)連接的地址應(yīng)該是你的電子郵箱地址。在點(diǎn)超級(jí)連接按紐彈出的窗口中點(diǎn)圖 18中畫(huà)著圈圈的按紐，在另一個(gè)彈出的小窗口中填寫(xiě)你的郵箱地址，就行了。 竟然文字可以做連接，那圖片可以給它做個(gè)連接嗎？當(dāng)然可以啊，點(diǎn)擊你想要做連接的圖片，并按按紐欄的超級(jí)連接按紐，跟做 文字連接的做法完全一樣。 設(shè)置圖片熱點(diǎn)連接 有時(shí)你可能不希望一張圖片都做上連接，只想為圖片的某部分做上連接，這就叫做提片熱點(diǎn)連接。如何做到呢？我們點(diǎn)擊一下想要做熱點(diǎn)連接的圖片，你會(huì)看到 Frontpage2020 會(huì)自動(dòng)在編輯區(qū)下面彈出一個(gè)工具欄（如圖 2）。 38 （圖 2） 你可以使用這些工具加工你的圖片。而做熱點(diǎn)連接我們 只需要使用到工具欄的幾個(gè)按紐。她們分別是可以選取各種形狀來(lái)做熱點(diǎn)連接。我們選擇長(zhǎng)方形的熱點(diǎn)工具，在圖片上拉取一個(gè)想要做連接的區(qū)域，它就會(huì)自動(dòng)彈出一個(gè)超級(jí)連接的窗口來(lái)，為它做好連接之后你會(huì)發(fā)現(xiàn)做熱點(diǎn)連接的圖片多了一個(gè)熱點(diǎn)區(qū)（如圖 3）。 （圖 3） 這樣就表示熱點(diǎn)連接已經(jīng)做好了。瀏覽的時(shí)候你就會(huì)發(fā)現(xiàn)這張圖片內(nèi)只有熱點(diǎn)區(qū)才有連接 而熱點(diǎn)區(qū)以外是沒(méi)有連接的。 這里還有最后的補(bǔ)充：每個(gè)網(wǎng)頁(yè)都應(yīng)該有標(biāo)題嘛，如何定置網(wǎng)頁(yè)的標(biāo)題呢？在網(wǎng)頁(yè)的空白處點(diǎn)擊鼠標(biāo)右鍵，選擇“網(wǎng)頁(yè)屬性”，彈出另一個(gè)窗口（如圖 19）。 39 （圖 19） 在“標(biāo)題”欄填寫(xiě)你想要的標(biāo)題，按確定就行了。你也可以為你的網(wǎng)頁(yè)使用背景圖案，那樣網(wǎng)頁(yè)看起來(lái)就更好了。點(diǎn)擊“網(wǎng)頁(yè)屬性”窗口的“背景”按紐， 或是使用背景色，或是使用背景圖案，一切由你決定。你還可以在這里定置超級(jí)連接的顏色呢，真是太棒了！ 要點(diǎn)： 1 學(xué)會(huì)善于運(yùn)用表格，是整個(gè)網(wǎng)頁(yè)頁(yè)面看起來(lái)更整潔。 2 多使用 “ 左對(duì)齊 ”“ 居中 ”“ 右對(duì)齊 ” 按紐配合表格的使用。 3 保存網(wǎng)頁(yè)時(shí)記住不能使用中文保存。 4 做超級(jí)連接時(shí)要細(xì)心，不然很容易出現(xiàn)連接錯(cuò)誤。 5 不談專業(yè)與否，一個(gè)出色的網(wǎng)站關(guān)鍵在于創(chuàng)意。 課后反思：超級(jí)鏈接是重點(diǎn)也是難點(diǎn)，盡管以前學(xué)過(guò)了，但還有同學(xué)不明白，出錯(cuò)，還要加強(qiáng)練習(xí) 。 40 第十四課時(shí)： 制作網(wǎng)頁(yè)練習(xí) [教 學(xué)目標(biāo) ] 加強(qiáng)網(wǎng)頁(yè)制作技巧的練習(xí)。 [教學(xué)重點(diǎn)與難點(diǎn) ] 重點(diǎn)： 選用模板制作網(wǎng)頁(yè) 難點(diǎn)： 超鏈接的使用 。 [課時(shí)安排 ] 1 課時(shí)。 [教學(xué)過(guò)程 ] 一、 項(xiàng)目主題 制作網(wǎng)頁(yè)：我喜歡的圖書(shū) 二、 項(xiàng)目要求： ? 使用表格布局 ? 文本包括內(nèi)容介紹，作者簡(jiǎn)介，目錄和精彩片段 ? 有超鏈接 ? 有圖片 三、 學(xué)生制作，教師指導(dǎo) 41 四、 展示作品，總結(jié) 課后反思：本節(jié)內(nèi)容綜合，通過(guò)小組合作，大部分同學(xué)能夠理解并掌握并完成所布置的任務(wù)，完成作品。 第十五課時(shí)： 規(guī)劃網(wǎng)站 、 創(chuàng)建一個(gè)站點(diǎn)并管理它 [教學(xué)目標(biāo) ] (1)知道從哪入手規(guī)劃網(wǎng)站 (2)依據(jù)主題，設(shè) 計(jì)好網(wǎng)站欄目 (3)搜集圖 片 和資料 。 [教學(xué)重點(diǎn)與難點(diǎn) ] 重點(diǎn)： 知道從哪入手規(guī)劃網(wǎng)站 難點(diǎn)： 依據(jù)主題，設(shè)計(jì)好網(wǎng)站欄目 [課時(shí)安排 ] 1 課時(shí)。 [教學(xué)過(guò)程 ] 42 規(guī)劃網(wǎng)站，其實(shí)就是網(wǎng)站的整體定位。說(shuō)得時(shí)髦一點(diǎn)就有點(diǎn)像CI（ corporate identity），意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象。算了，還是不要這么復(fù)雜吧，我只是一個(gè)小家碧玉者。 主題和內(nèi)容說(shuō)白一點(diǎn)就是做網(wǎng)站的目的?？戳瞬簧賯€(gè)人網(wǎng)站，感覺(jué)就是：你抄我抄大家一起抄，黃沙淘盡不見(jiàn)金。我絕對(duì)不能這樣，否 則就成了網(wǎng)絡(luò)垃圾了。經(jīng)過(guò)冥思苦想，我決定做一個(gè)真正意義上的 “ 個(gè)人 ” 網(wǎng)站，做一個(gè)個(gè)人的家，一個(gè)在網(wǎng)絡(luò)上宣傳自己、結(jié)交朋友的 “ 家 ” 。 這樣一來(lái)，主要內(nèi)容就應(yīng)該是介紹自己。個(gè)人簡(jiǎn)歷？不，那樣也太沒(méi)有意思了。就當(dāng)是做一個(gè)圖文并茂的自我小傳吧 !應(yīng)該有簡(jiǎn)歷的一部分內(nèi)容，但還應(yīng)該多說(shuō)說(shuō)自己的興趣愛(ài)好。此外，還少不了應(yīng)該適當(dāng)介紹一下和自己相關(guān)的東西啊 ! 內(nèi)容確定了，那是不是應(yīng)該給我的網(wǎng)站取個(gè)好名字了？前輩說(shuō)：網(wǎng)站名稱也是網(wǎng)站設(shè)計(jì)的一部分，而且是很關(guān)鍵的一個(gè)要素。很有道理，就像每個(gè)人都想取個(gè)好名字一樣，家也應(yīng) 該有個(gè)好名字 ! 看看網(wǎng)上的名字， “ 海闊天空 ” 有點(diǎn)虛， “ XX 的個(gè)人主頁(yè) ”有點(diǎn)俗。還是平實(shí)一點(diǎn)，就以我的名字叫 “ 豆豆之家 ” 吧。 43 參考了一下 其他 的個(gè)人網(wǎng)站，再看看前輩長(zhǎng)篇大論，我也稀里糊涂地明白了一些名詞。 ● 網(wǎng)頁(yè) —— 就是你看到瀏覽器內(nèi)的一個(gè)頁(yè)面，由圖片和文字組成。通常有一級(jí)頁(yè)面、二級(jí)頁(yè)面之說(shuō)。當(dāng)你輸入網(wǎng)址看到的第一個(gè)頁(yè) 面叫做首頁(yè)，通常的名字是 。 ● 網(wǎng)站 —— 簡(jiǎn)單地說(shuō)就是很多相關(guān)網(wǎng)頁(yè)文件、圖片文件 ? 他文件的組合。一個(gè)網(wǎng)站由相關(guān)網(wǎng)頁(yè)組成一個(gè)關(guān)系網(wǎng)，通過(guò)頁(yè)面上的鏈接在不同的網(wǎng)頁(yè)之間跳轉(zhuǎn)。 網(wǎng)站的結(jié)構(gòu)和內(nèi)容好像還有一些不成文的規(guī)定（當(dāng)然都是前輩們嘮叨的）： ? 網(wǎng)站一定要緊扣主題。 ? 設(shè)定一個(gè)交互式的欄目，例如留言薄。 ? 頁(yè)面簡(jiǎn)潔，盡可能方便訪問(wèn)者的瀏覽和查詢。 ? 網(wǎng)站的層次不要太復(fù)雜，小網(wǎng)站由 3 層網(wǎng)頁(yè)構(gòu)成是比較合適的。 ? 整體的頁(yè)面設(shè)計(jì)風(fēng)格要保持一致。 網(wǎng)站的風(fēng)格，是不是有點(diǎn)像人的氣質(zhì)呀？ “ 家 ” 當(dāng)然是有氣質(zhì)的，或者活潑、或者嚴(yán)肅、或者精美、或者樸素、或者粗獷豪放、 44 或者小家碧玉等。我們應(yīng)該根據(jù)自己的主題和內(nèi)容給它選擇一種合適的風(fēng)格類型，以求內(nèi)容和形式的完美結(jié)合，突出自己的特色和個(gè)性?？上也皇菍W(xué)美術(shù)的，只是簡(jiǎn)單地知道一些冷暖色，看來(lái)還得在實(shí)踐中多比較。 網(wǎng)站是由一個(gè)個(gè)頁(yè)面組成的，所以每個(gè)頁(yè)面的制作就顯得極其重要。說(shuō)來(lái)說(shuō)去又是一個(gè)美術(shù)設(shè)計(jì)方面的問(wèn)題。我先找?guī)讖埌准埞串?huà)我的頁(yè)面草圖。 這是網(wǎng)絡(luò)上常見(jiàn)的幾種網(wǎng)頁(yè)布局。雖然 都是在排列目錄、題目、正文，但真正要做到結(jié)構(gòu)清晰、一目了然還得看具體制作的功夫。 當(dāng)然可以選擇更活潑一點(diǎn)的樣式，只是需要自己去發(fā)揮了，或者到網(wǎng)絡(luò)上去學(xué)習(xí)各種漂亮的頁(yè)面設(shè)計(jì)。 選擇制作工具 古人說(shuō)得好：工欲善其事，必先利其器。網(wǎng)上建家總是要工具的，制作網(wǎng)頁(yè)和網(wǎng)站的工具很多，甚至用記事本也可以（就像泥瓦匠起房子一樣，是寫(xiě)網(wǎng)頁(yè)的源代碼）。但也有很多工具，可以直接將房子的框架搭好，剩下的工作就是確定要多少房間和如何布置房間。 FrontPage2020 就是這樣的工具。 Dreamweaver3 和 FrontPage2020 都是當(dāng)前的主流站點(diǎn)和網(wǎng)頁(yè) 45 編輯器。 Dreamweaver3 更加專業(yè)，其代碼的簡(jiǎn)潔、兼容性和整體功能都要比 Frontpage2020 強(qiáng)。但是 FrontPage2020 是微軟的產(chǎn)品，是 Office2020 中的一個(gè)組件，和大家經(jīng)常使用的 Word 有類似的界面和操作。用 FrontPage 編寫(xiě)網(wǎng)頁(yè)就像用 Word 寫(xiě)文章一樣簡(jiǎn)單，很適合于我這樣業(yè)余建小 “家 ”的人上手。 三、新建站點(diǎn) 這個(gè)家怎么樣才有呢？我們先運(yùn)行 Frontpage2020，在控制窗的菜單欄里選擇 “ 新建 → 站點(diǎn) ” （如圖 1）。 （圖 1） （圖 2） 在接下來(lái)彈出的窗口中你可以看到圖 2。 Frontpage2020 自帶有一些網(wǎng)站的模板（意思就是按照 它的意思去做），我們一般不使用這些模板，我們?cè)谧筮叺哪０暹x擇窗里選 “ 空站點(diǎn) ” ，然后在右邊的 “ 選項(xiàng)，指定新站點(diǎn)的位置 ” 中敲入你想保存這個(gè)網(wǎng)站的文件夾地址。一般第一次使用 Frontpage2020 的時(shí)候它自動(dòng)就生成了一 46 個(gè)新站點(diǎn)，保存的 “ 我的文檔 ” 的 “ My Webs” 文件夾中。你也可以重新建立一個(gè)文件夾作為網(wǎng)站的存放點(diǎn)。我們?cè)谝韵路Q保存網(wǎng)站的文件夾為 “ 網(wǎng)站文件夾 ” 或者是 “ 主文件夾 ” 。 建立好了新站點(diǎn)，你會(huì)發(fā)現(xiàn) Frontpage2020 的標(biāo)題欄就變成是“ C:\My Documents\My Webs” 里，這樣的話 就表示你已經(jīng)打開(kāi)了某個(gè)網(wǎng)站?；蛟S你還創(chuàng)建了其他網(wǎng)站，我們可以通過(guò) Frontpage2020的菜單欄里面的 “ 文件 → 打開(kāi)站點(diǎn) ” 來(lái)打開(kāi)其他站點(diǎn)（如圖 3）。 （圖 3） （圖 4） 在彈出的窗口下放選擇保存網(wǎng)站的文件夾地址（如圖 4），再按 “ 打開(kāi) ” 按紐就打開(kāi)了。 一般運(yùn)行了 Frontpage2020的同時(shí)它就自行打開(kāi)了最近編輯的一個(gè)站點(diǎn)。有時(shí)你不想編輯此站點(diǎn)可以點(diǎn)擊菜單欄的 “ 文件 → 關(guān)閉站點(diǎn)“ 關(guān)閉它。 創(chuàng)建了好了新站點(diǎn)的同時(shí)，你按控制窗的按紐欄里面的打開(kāi)文件夾列表或者到網(wǎng)站文件夾看一下，是不是多了兩個(gè)新文件夾？一個(gè)叫“ images” 的文件夾是供我們用來(lái)保存本網(wǎng)站中的圖片文件 47 的，在制作網(wǎng)頁(yè)之前你先把要用到的圖片都保存到這里 。還有一個(gè)叫 “ _private” 的文件夾，而且日后你會(huì)發(fā)現(xiàn)在 “ images” 文件夾或者文件夾中出現(xiàn)許多象 “ _vti_f” 之類莫名其妙的文件夾，其實(shí)這是系統(tǒng)用來(lái)做緩存的文件夾，我們不要認(rèn)為它是垃圾就把它刪了，有用的，不要?jiǎng)h了。 為了方便管理，你也可以自己添加一些文件夾用來(lái)保存其他內(nèi)容，比如添加一個(gè)名為“ webs” 的文件夾用來(lái)保存網(wǎng)站的其他網(wǎng)頁(yè)，這樣大家管理起來(lái)就不會(huì)覺(jué)得很凌亂了。 添加文件夾有兩中方法，第一個(gè)方法是先關(guān)閉 Frontpage2020，再到網(wǎng)站文件夾里新建一個(gè)文件夾，建好之后再重新運(yùn)行Frontpage2020 你按控制窗按紐欄里的打開(kāi)文件夾列表看一下，就會(huì)發(fā)現(xiàn)多了一個(gè)新的文件夾。另一個(gè)方法就是直接在文件夾列表中添加（如圖 5）。 這里要注意一下，凡是添加的文件夾，或者是保存在文件夾里面的所有東西，都必須是以英文命名的。不然就會(huì)出現(xiàn)連接錯(cuò)誤而不能瀏覽?？傊痪湓?，網(wǎng)站里的所有東西都用英文名：） 48 （圖 5） （圖 6） 當(dāng)然你也可以從網(wǎng)站中刪除某些文件或者文件夾，具體做法和新建文件夾差不多，大家多實(shí)踐一下。 到了這里，或許你會(huì)認(rèn)為什么主頁(yè)，什么第二個(gè)主頁(yè)，什么主頁(yè)又不是網(wǎng)站什么的，一頭霧水。那你可以看一下圖 6，這樣能好理解一點(diǎn)：）或者是這樣解釋：圖