《FrontPage網(wǎng)頁(yè)制作》教案

1、【導(dǎo)入新課】 HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)制作要能充分吸引訪問(wèn)者的注意力，讓訪問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與 HYPERLINK :/baike.baidu /view/8972.htm t _blank 網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來(lái)。 t _blank 網(wǎng)站設(shè)計(jì)是將籌劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識(shí)通過(guò)藝術(shù)的手法表現(xiàn)出來(lái)；網(wǎng)頁(yè)制作通常就是將 HYPERLINK :/baike.baidu /view/29716.htm t _blank 網(wǎng)頁(yè)設(shè)計(jì)師所設(shè)計(jì)出來(lái)的設(shè)計(jì)稿，

2、按照W3C標(biāo)準(zhǔn)用 HYPERLINK :/baike.baidu /view/115411.htm t _blank html語(yǔ)言將其制作成網(wǎng)頁(yè)格式?！拘抡n講解】第一章 網(wǎng)頁(yè)設(shè)計(jì)與制造概論第1節(jié) 什么是網(wǎng)頁(yè)網(wǎng)頁(yè)(web page)，是網(wǎng)站中的一頁(yè)，通常是HTML格式 HYPERLINK :/baike.baidu /view/70172.htm t _blank 文件擴(kuò)展名為。html或。htm或。asp或。aspx或。php或。jsp等。網(wǎng)頁(yè)通常用 HYPERLINK :/baike.baidu /view/42116.htm t _blank 圖像檔來(lái)提供圖畫(huà)。網(wǎng)頁(yè)要使用 HYPERLIN

3、K :/baike.baidu /view/455968.htm t _blank 網(wǎng)頁(yè)瀏覽器來(lái)閱讀。1、什么是網(wǎng)頁(yè)是構(gòu)成 HYPERLINK :/baike.baidu /view/4232.htm t _blank 網(wǎng)站的根本 HYPERLINK :/baike.baidu /view/19993.htm t _blank 元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗的說(shuō)，您的網(wǎng)站就是由網(wǎng)頁(yè)組成的。如果您只有域名和 HYPERLINK :/baike.baidu /view/7383.htm t _blank 虛擬主機(jī)而沒(méi)有制作任何網(wǎng)頁(yè)的話，您的客戶仍舊無(wú)法訪問(wèn)您的網(wǎng)站。 網(wǎng)頁(yè)英文：Web pag

4、e是一個(gè) HYPERLINK :/baike.baidu /view/345685.htm t _blank 文件，他存放在世界某個(gè)角落的某一部 HYPERLINK :/baike.baidu /view/3314.htm t _blank 計(jì)算機(jī)中，而這部計(jì)算機(jī)必須是與 HYPERLINK :/baike.baidu /view/6825.htm t _blank 互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址 HYPERLINK :/baike.baidu /view/1496.htm t _blank URL來(lái)識(shí)別與存取，當(dāng)我們?cè)?HYPERLINK :/baike.baidu /view/7718.htm

5、 t _blank 瀏覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。是 HYPERLINK :/baike.baidu /view/7833.htm t _blank 萬(wàn)維網(wǎng)中的一“頁(yè)，通常是 HYPERLINK :/baike.baidu /view/692.htm t _blank HTML格式文件擴(kuò)展名為.html或.htm。網(wǎng)頁(yè)通常用 /view/42116.htm t _blank 圖像檔來(lái)提供圖畫(huà)。網(wǎng)頁(yè)要透過(guò) HYPERLINK :/baike.baidu /view/455968.htm t _blan

6、k 網(wǎng)頁(yè)瀏覽器來(lái)閱讀。 2、構(gòu)成網(wǎng)頁(yè)元素 HYPERLINK :/baike.baidu /view/32894.htm t _blank 文字與 HYPERLINK :/baike.baidu /view/19159.htm t _blank 圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最根本的元素。你可以簡(jiǎn)單的理解為：文字，就是網(wǎng)頁(yè)的內(nèi)容，圖片，就是網(wǎng)頁(yè)的美觀。除此之外，網(wǎng)頁(yè)的元素還包括 HYPERLINK :/baike.baidu /view/7262.htm t _blank 動(dòng)畫(huà)、音樂(lè)、程序等等。3、網(wǎng)頁(yè)的類型通常我們看到的網(wǎng)頁(yè)，都是以 htm 或 html 后綴結(jié)尾的文件，俗稱 HYPERLINK

7、:/baike.baidu /view/394827.htm t _blank HTML文件。不同的后綴， 分別代表不同類型的網(wǎng)頁(yè)文件，例如以 CGI 、 HYPERLINK :/baike.baidu /view/2616.htm t _blank ASP、 PHP 、 JSP 甚至其他更多?！菊n堂小結(jié)】了解什么是網(wǎng)頁(yè)；了解構(gòu)成網(wǎng)頁(yè)的根本元素；了解網(wǎng)頁(yè)的類型【布置作業(yè)】整理筆記復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】了解什么是網(wǎng)頁(yè)；了解構(gòu)成網(wǎng)頁(yè)的根本元素；了解網(wǎng)頁(yè)的類型【導(dǎo)入新課】 HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)制作要能充分吸引訪問(wèn)者的注

8、意力，讓訪問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng)作的時(shí)候就必須將網(wǎng)站的整體設(shè)計(jì)與 HYPERLINK :/baike.baidu /view/8972.htm t _blank 網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)原理緊密結(jié)合起來(lái)。 HYPERLINK :/baike.baidu /view/50036.htm t _blank 網(wǎng)站設(shè)計(jì)是將籌劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識(shí)通過(guò)藝術(shù)的手法表現(xiàn)出來(lái)；網(wǎng)頁(yè)制作通常就是將 HYPERLINK :/baike.baidu /view/29716.htm t _blank 網(wǎng)頁(yè)設(shè)計(jì)師所設(shè)計(jì)出來(lái)的設(shè)計(jì)稿，按照W3C標(biāo)準(zhǔn)用 HYPERLINK :/baike.ba

9、idu /view/115411.htm t _blank html語(yǔ)言將其制作成網(wǎng)頁(yè)格式?！拘抡n講解】第一章 網(wǎng)頁(yè)設(shè)計(jì)與制造概論第2節(jié) www效勞1、概述 WWW效勞3W效勞也是目前應(yīng)用最廣的一種根本互聯(lián)網(wǎng)應(yīng)用，我們每天上網(wǎng)都要用到這種效勞。通過(guò)WWW效勞，只要用鼠標(biāo)進(jìn)行本地操作，就可以到達(dá)世界上的任何地方。由于WWW效勞使用的是超文本鏈接HTML，所以可以很方便的從一個(gè)信息頁(yè)轉(zhuǎn)換到另一個(gè)信息頁(yè)。它不僅能查看文字，還可以欣賞圖片、音樂(lè)、動(dòng)畫(huà)。最流行的WWW效勞的程序就是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟的IE瀏覽器。2、WW

10、W效勞的特點(diǎn)1.以超文本方式組織網(wǎng)絡(luò)多媒體信息 2.用戶可以在世界范圍內(nèi)任意查找、檢索、瀏覽及添加信息。 3.提供生動(dòng)直觀、易于使用且統(tǒng)一的圖形用戶界面。 4.效勞器之間可以互相鏈接。 5.可以訪問(wèn)圖像、聲音、影像和文本型信息。第3節(jié) 常用的網(wǎng)頁(yè)制作工具最根本的網(wǎng)頁(yè)三劍客Dreamweaver是由美國(guó)著名的軟件開(kāi)發(fā)商Macromedia公司推出的一個(gè)“所見(jiàn)即所得的可視化網(wǎng)站開(kāi)發(fā)工具。Fireworks是Macromedia公司網(wǎng)頁(yè)設(shè)計(jì)“三劍客之“火焰，它以處理網(wǎng)頁(yè)圖片為特長(zhǎng)，并可以輕松創(chuàng)作GIF動(dòng)畫(huà)。 flash是Macromedia公司網(wǎng)頁(yè)三劍客之中的“閃電，其以制作網(wǎng)上動(dòng)畫(huà)為特長(zhǎng)，它做出的

11、動(dòng)畫(huà)聲音動(dòng)畫(huà)效果都是其他軟件無(wú)法比較的。 photoshop 圖像處理軟件，能更好的工具網(wǎng)頁(yè)的需要美化你的圖片，操作簡(jiǎn)單?！菊n堂小結(jié)】了解什么是網(wǎng)頁(yè)；了解構(gòu)成網(wǎng)頁(yè)的根本元素；了解網(wǎng)頁(yè)的類型【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】了解什么是網(wǎng)頁(yè)；了解構(gòu)成網(wǎng)頁(yè)的根本元素；了解網(wǎng)頁(yè)的類型【導(dǎo)入新課】Frontpage，是e.baidu /view/2353.htm t _blank 微軟公司出品的一款網(wǎng)頁(yè)制作入門級(jí) HYPERLINK :/baike.baidu /view/37.htm t _blank 軟件。FrongPage使用方便簡(jiǎn)單，會(huì)用Word就能做網(wǎng)頁(yè)，微軟在2006年年底前

12、將停止提供FrontPage軟件并改名為SharePoint Designer?！拘抡n講解】第2章 FrontPage2003簡(jiǎn)介FrontPage的新用處和說(shuō)明FrontPage2003是比較有用的offline2003中的一個(gè)，有許多剛買電腦想用它的人們，總是找不到：咦，F(xiàn)rontPage2003哪里去了？其實(shí)，F(xiàn)rontPage2003原本電腦中沒(méi)有安裝過(guò)的，所以想使用它的人們，要另行安裝，在你買電腦的時(shí)候，不會(huì)有FrontPage。 突出的9個(gè)新功能FrontPage 2003相比FrontPage 2000來(lái)說(shuō)在功能上增強(qiáng)了不少，下面我們一起來(lái)看看新版本中比較突出的9個(gè)新功能： 在設(shè)

13、計(jì)網(wǎng)頁(yè)時(shí)，可實(shí)時(shí)調(diào)節(jié)當(dāng)前頁(yè)面為在 HYPERLINK :/baike.baidu /view/930.htm t _blank 客戶端顯示的分辨率，以便預(yù)覽當(dāng)前效果。大家查看FrontPage 2003界面右下端狀態(tài)上顯示網(wǎng)頁(yè)大小的區(qū)域，默認(rèn)為792533，右鍵單擊后，彈出如圖1所示菜單，在此可設(shè)置任意分辨率方便進(jìn)行預(yù)覽。 大家在學(xué)習(xí)書(shū)法的時(shí)候，都接觸過(guò)臨摹吧，描摹圖像的功用與其類似，就是通過(guò)創(chuàng)立一個(gè)圖像一般為網(wǎng)頁(yè)的效果圖為參照物，以便于網(wǎng)頁(yè)的設(shè)計(jì)制作。在Dreamweaver HYPERLINK :/baike.baidu /view/37.htm t _blank 軟件的各個(gè)版本中根本上都

14、有這個(gè)功能，現(xiàn)在傲慢的 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟也開(kāi)始學(xué)習(xí)這個(gè)優(yōu)點(diǎn)了。點(diǎn)擊菜單欄上的“視圖描摹圖像設(shè)置，在彈出對(duì)話框中，選擇指定圖像，再設(shè)置其坐標(biāo)即在設(shè)計(jì)頁(yè)面上顯示的位置。最后，設(shè)置透明度，再確認(rèn)即可。這個(gè)描摹圖像只是顯示在FrontPage 2003的設(shè)計(jì)視圖中，不會(huì)在你制作完畢的頁(yè)面中顯示出來(lái)。 過(guò)去，F(xiàn)rontPage最欠缺的功能之一就是無(wú)法像Macromedia Dreamweaver那樣使用層。而層的應(yīng)用在網(wǎng)頁(yè)制作中已經(jīng)是不可或缺了。好在FrontPage 2003終于支持了此項(xiàng)功能。 點(diǎn)擊菜單欄上的“插入層

15、，將在當(dāng)前頁(yè)面中顯示一個(gè)默認(rèn)為“l(fā)ayer1的層。用鼠標(biāo)在各節(jié)點(diǎn)上拖曳，調(diào)節(jié)其大小，然后把光標(biāo)插入點(diǎn)置于層中，輸入所需的文字圖2。另外，將光標(biāo)定位于該層內(nèi)，在其右鍵彈出菜單中選擇“層屬性，就可在界面右側(cè)的任務(wù)窗格上設(shè)置該層的ID，邊框和底紋的樣式、邊距，以及定位樣式與位置等參數(shù)。 點(diǎn)擊菜單欄上的“插入交互式按鈕，彈出如圖3所示對(duì)話框，在“按鈕標(biāo)簽頁(yè)中，設(shè)置按鈕的顯示文字、樣式以及鏈接。在“ HYPERLINK :/baike.baidu /view/285104.htm t _blank 字體標(biāo)簽頁(yè)中設(shè)置其相關(guān)選項(xiàng)。最后，我們?cè)偾袚Q到“圖像標(biāo)簽頁(yè)，設(shè)置懸停圖像及鼠標(biāo)鍵按下時(shí)的圖像等。 行為一直

16、是Dreamweaver的強(qiáng)項(xiàng)，而FrontPage2003現(xiàn)在也有這個(gè)功能了。 點(diǎn)擊菜單欄上的“格式行為，查看界面右側(cè)的“行為窗格，點(diǎn)擊“插入向下箭頭按鈕，在彈出菜單中可選擇播放聲音、彈出消息、調(diào)用 HYPERLINK :/baike.baidu /view/54.htm t _blank 腳本及彈出菜單等事件。在選擇指定的插入對(duì)象后，將彈出相應(yīng)的設(shè)置對(duì)話框，在其中按需操作。所有添加的行為事件，均會(huì)顯示在列表中。 小知識(shí)：行為是事件和由該事件觸發(fā)的動(dòng)作的組合。由于行為代碼是客戶端的javascript代碼，因此它無(wú)需效勞器的支持就可觸發(fā)事件。 在FrontPage 2003中，點(diǎn)擊菜單欄上的

17、“工具中文簡(jiǎn)繁轉(zhuǎn)換插入重定向代碼，在彈出對(duì)話框中，設(shè)置簡(jiǎn)體頁(yè)面網(wǎng)址及繁體頁(yè)面網(wǎng)址。而后，插入的代碼將通過(guò) HYPERLINK :/baike.baidu /view/7718.htm t _blank 瀏覽器對(duì)支持語(yǔ)言的檢測(cè)，實(shí)現(xiàn)自動(dòng)轉(zhuǎn)向。 點(diǎn)擊菜單欄上的“工具輔助功能，在彈出對(duì)話框中設(shè)置檢查范圍、內(nèi)容及顯示對(duì)象，接著點(diǎn)擊“檢查按鈕即可。利用此項(xiàng)功能，就可快速找出指定網(wǎng)頁(yè)是否有錯(cuò)誤，并可查看問(wèn)題之所在。 FrontPage系列過(guò)去在代碼效率方面做得相當(dāng)不好，經(jīng)常產(chǎn)生大量的垃圾代碼。而在FrontPage 2003中，點(diǎn)擊菜單欄上的“工具優(yōu)化HTML，彈出如圖4所示對(duì)話框，在其中可酌情選擇刪除對(duì)

18、象，包括注釋性內(nèi)容及空白信息等，從而刪除大量垃圾代碼，提高網(wǎng)頁(yè)代碼執(zhí)行的效率，為網(wǎng)頁(yè)“減肥。 一個(gè)成功的設(shè)計(jì)作品，大都需要事先為其規(guī)劃設(shè)計(jì)布局，以便于宏觀控制其內(nèi)容。在Dreamweaver中，從其4.0版本開(kāi)始就參加了頁(yè)面規(guī)劃視圖來(lái)方便設(shè)計(jì)者對(duì)頁(yè)面布局進(jìn)行設(shè)計(jì)，如今FrontPage 2003也具有這個(gè)功能了。 點(diǎn)擊菜單欄上的“表格布局表格和單元格，在程序右側(cè)窗格中將顯示相應(yīng)的屬性設(shè)置。我們著重查看“表格布局下拉列表，在其中有假設(shè)干布局樣式可供選擇。當(dāng)我們選擇一種適宜的應(yīng)用于當(dāng)前頁(yè)面上后，可隨時(shí)在設(shè)計(jì)視圖中按需自行調(diào)節(jié)其布局樣式?！菊n堂小結(jié)】了解FrontPage2003的根本功能【布置作業(yè)

19、】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】了解FrontPage2003的根本功能【導(dǎo)入新課】Frontpage，是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟公司出品的一款網(wǎng)頁(yè)制作入門級(jí) HYPERLINK :/baike.baidu /view/37.htm t _blank 軟件。FrongPage使用方便簡(jiǎn)單，會(huì)用Word就能做網(wǎng)頁(yè)，微軟在2006年年底前將停止提供FrontPage軟件并改名為SharePoint Designer?！拘抡n講解】一、新建網(wǎng)站提示：如果圖片覺(jué)得小，將鼠標(biāo)移到圖片上，向上滾動(dòng)鼠標(biāo)滾輪，圖片會(huì)放大翻開(kāi)F

20、rontPage2003點(diǎn)擊新建菜單命令會(huì)彈出一個(gè)對(duì)話框，有不同的模板供選擇。選擇你想要的一個(gè)，然后確定，會(huì)自動(dòng)生成一個(gè)網(wǎng)站。二、新建一個(gè)空白網(wǎng)頁(yè)你也可選擇新建空白網(wǎng)頁(yè)，或點(diǎn)新建工具按鈕。當(dāng)然，這上面的內(nèi)容你要自己編輯。三、翻開(kāi)一個(gè)網(wǎng)站點(diǎn)擊翻開(kāi)網(wǎng)站四、瀏覽網(wǎng)頁(yè)“文件“瀏覽有幾個(gè)選項(xiàng)不同分辨率五、編輯方式有“設(shè)計(jì)“拆分“代碼“瀏覽【課堂小結(jié)】通過(guò)上機(jī)實(shí)踐操作了解FrontPage2003的根本功能【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】了解FrontPage2003的根本功能【導(dǎo)入新課】 通過(guò)前面的學(xué)習(xí)，我們已經(jīng)學(xué)會(huì)在FrontPage 2002中創(chuàng)立簡(jiǎn)單的網(wǎng)頁(yè)了。從本課開(kāi)始，我們一起

21、來(lái)學(xué)習(xí)如何創(chuàng)立一個(gè)個(gè)人站點(diǎn)。學(xué)完本單元的全部?jī)?nèi)容后，同學(xué)們就可以創(chuàng)立出有自己風(fēng)格的個(gè)人站點(diǎn)，并且將它發(fā)布到因特網(wǎng)上去，與大家分享和交流了?！拘抡n講解】第3章 設(shè)計(jì)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)1、網(wǎng)站與網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)制作是根底，是建設(shè)網(wǎng)站的第一步，但網(wǎng)站的設(shè)計(jì)要復(fù)雜得多。將數(shù)量眾多的網(wǎng)頁(yè)有條理地組合在一起，形成一個(gè)網(wǎng)站，可不是一件容易的事。網(wǎng)站建設(shè)的一般流程是：選定網(wǎng)站主題，規(guī)劃結(jié)構(gòu)，設(shè)計(jì)制作，測(cè)試修改，發(fā)布站點(diǎn)等。2、設(shè)計(jì)一個(gè)簡(jiǎn)單網(wǎng)站確定網(wǎng)站的主題主題定位要準(zhǔn)，內(nèi)容要精。題材最好是自己擅長(zhǎng)或者喜愛(ài)的內(nèi)容。設(shè)計(jì)網(wǎng)站的根本結(jié)構(gòu)網(wǎng)站的主題確定后，下一步的任務(wù)就是根據(jù)主題，將所要表達(dá)的信息進(jìn)行劃分，確定網(wǎng)站的根本結(jié)構(gòu)

22、，最終完成網(wǎng)站的欄目設(shè)計(jì)。3、設(shè)計(jì)主頁(yè)的布局與色彩主頁(yè)的布局應(yīng)根據(jù)網(wǎng)站的類型而設(shè)計(jì)，不同網(wǎng)站的主頁(yè)有不同的風(fēng)格，但應(yīng)具備標(biāo)題、網(wǎng)站標(biāo)識(shí)logo、導(dǎo)航、網(wǎng)頁(yè)內(nèi)容等根本布局元素。常見(jiàn)的網(wǎng)頁(yè)布局：“同字形、“匡字形、“回字形、“川字形繪制網(wǎng)頁(yè)布局根據(jù)網(wǎng)站的內(nèi)容和自己的設(shè)計(jì)風(fēng)格確定了主頁(yè)根本構(gòu)思后，先不要急于動(dòng)手。一般來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)師們會(huì)先在紙上繪制自己網(wǎng)站的藍(lán)圖。色彩搭配選擇色彩要和網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)，網(wǎng)頁(yè)色彩搭配時(shí)，網(wǎng)頁(yè)的色彩要容易引人注目，色彩和表達(dá)的內(nèi)容氣氛相適合。常用的配色方案：暖色調(diào)、冷色調(diào)、比照色調(diào)【課堂小結(jié)】了解設(shè)計(jì)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)的根本過(guò)程【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)

23、】了解FrontPage2003的根本功能【導(dǎo)入新課】上一課同學(xué)們已經(jīng)學(xué)會(huì)了如何啟動(dòng)Frontpage 2000，并且知道Frontpage 2000是用來(lái)制作網(wǎng)頁(yè)的工具，但是有了好的工具我們還要學(xué)會(huì)如何來(lái)利用它做出好的網(wǎng)頁(yè)來(lái)。今天我們就來(lái)學(xué)習(xí)如何制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)?！拘抡n講解】第3章 設(shè)計(jì)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)1、啟動(dòng)Frontpage 2003。2、根據(jù)以下步驟進(jìn)行。1請(qǐng)同學(xué)們單擊工具欄上的“新建按鈕，建立一個(gè)新的網(wǎng)頁(yè)。注意講解這個(gè)時(shí)候看不到任何東西。2請(qǐng)同學(xué)們利用鍵盤輸入文字：“歡送進(jìn)入星星網(wǎng)！3請(qǐng)同學(xué)們按照要求設(shè)置字體和對(duì)齊方式。選擇字體大小為7號(hào)字，并選擇對(duì)齊方式為居中方式進(jìn)行。4通過(guò)鍵盤自

24、己調(diào)節(jié)文字在頁(yè)面中的位置。5完成后可以請(qǐng)同學(xué)們?cè)凇熬庉媴^(qū)點(diǎn)擊“預(yù)覽方式看看作完后在網(wǎng)頁(yè)的顯示效果，如有不滿意及時(shí)調(diào)整。6完成后教師可以選折先做好的同學(xué)演示給沒(méi)有完成的同學(xué)看。3、課堂練習(xí)1、在網(wǎng)頁(yè)中輸入文字“歡送你的光臨！注意文字設(shè)置為7號(hào)，并居中顯示。2、請(qǐng)同學(xué)們自主練習(xí)輸入一個(gè)自我介紹的網(wǎng)頁(yè)內(nèi)容，教師可以指定文字內(nèi)容和設(shè)置的格式，也可以由學(xué)生自己設(shè)置。要求保存到D:班級(jí)名自己名字為以后的課做準(zhǔn)備?！菊n堂小結(jié)】1、使學(xué)生初步認(rèn)識(shí)Frontpage 2003中文字的添加。 2、使學(xué)生初步利用Frontpage 2003制作簡(jiǎn)單的網(wǎng)頁(yè)?！静贾米鳂I(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】Front

25、Page2003的簡(jiǎn)單操作【導(dǎo)入新課】最開(kāi)始，網(wǎng)頁(yè)呈現(xiàn)在你面前的時(shí)侯，它就好似一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思。在開(kāi)始的時(shí)侯，你需要明白，雖然你能控制一切你所能控制的東西，但假設(shè)你知道什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣，那么你可以在此根底上加上自己的東西。你當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案，但如果你是初學(xué)者，那么最好明白網(wǎng)頁(yè)布局的根本概念?！拘抡n講解】第4章 設(shè)計(jì)網(wǎng)頁(yè)布局由于頁(yè)面尺寸和顯示器大小及分辨率有關(guān)系，網(wǎng)頁(yè)的局限性就在于你無(wú)法突破顯示器的范圍，而且因?yàn)闉g覽器也將占去不少空間，留下給你的頁(yè)面范圍變得越來(lái)越小。一般分辨率在800 x600的情況下，頁(yè)面的顯示尺寸為：7

26、80 x428個(gè)象素；分辨率在640 x480的情況下，頁(yè)面的顯示尺寸為:620X311個(gè)象素；分辨率在1024X768的情況下，頁(yè)面的顯示尺寸為：1007x600。從以上數(shù)據(jù)可以看出，分辨率越高頁(yè)面尺寸越大。瀏覽器的工具欄也是影響頁(yè)面尺寸的原因。一般目前的瀏覽器的工具欄都可以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí)，頁(yè)面的尺寸是不一樣的。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容(尺寸)的方法。但我想提醒大家除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否那么不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪

27、問(wèn)者瀏覽。什么是造型，造型就是創(chuàng)造出來(lái)的物體形象。這里是指頁(yè)面的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。對(duì)于不同的形狀，它們所代表的意義是不同的。比方矩形代表著正式，規(guī)那么，你注意到很多ICP和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié), HYPERLINK :/ chinasim 會(huì)員卡設(shè)計(jì)，溫暖，平安等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造

28、型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作用是定義頁(yè)面的主題。比方一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。文本在頁(yè)面中出現(xiàn)都數(shù)以行或者塊(段落)出現(xiàn)，它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過(guò)去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著DHTML的興起

29、，文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。頁(yè)腳和頁(yè)頭相照應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè)腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將表達(dá)在這里。除了文本和圖片，還有聲音，動(dòng)畫(huà)，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。 【課堂小結(jié)】了解網(wǎng)頁(yè)布局的根本概念【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】FrontPage2003的網(wǎng)頁(yè)布局的根本內(nèi)容【導(dǎo)入新課】修飾網(wǎng)頁(yè)中的文字和背景【新課講

30、解】第4章 設(shè)計(jì)網(wǎng)頁(yè)布局【站點(diǎn)的翻開(kāi)】分別找學(xué)生介紹自己的不同的翻開(kāi)方法會(huì)出現(xiàn)直接翻開(kāi)站點(diǎn)文件夾現(xiàn)象和啟動(dòng)FrontPage軟件后“文件“翻開(kāi)站點(diǎn)兩種情況初學(xué)者易出錯(cuò)點(diǎn)這兩種情況中哪一種能對(duì)網(wǎng)頁(yè)進(jìn)行修改？試試看通過(guò)出錯(cuò)并修正錯(cuò)誤來(lái)學(xué)習(xí)新知識(shí)一種是瀏覽方式，一種是編輯方式【任務(wù)】大家已經(jīng)知道哪一種翻開(kāi)站點(diǎn)的方法能對(duì)不滿意的網(wǎng)頁(yè)進(jìn)行修改了，接下來(lái)我們要對(duì)網(wǎng)頁(yè)進(jìn)行一些美化工作了。下面大家比較一下哪一張網(wǎng)頁(yè)比較吸引你？并說(shuō)說(shuō)原因？播送展示比照網(wǎng)頁(yè)學(xué)生通過(guò)觀察了解到：文字進(jìn)行了字體變大著色、居中修飾、網(wǎng)頁(yè)的背景變顏色。引導(dǎo)1：我們?cè)趯W(xué)習(xí)文字處理軟件時(shí)也對(duì)文檔進(jìn)行修飾，大家能不能也對(duì)我們的網(wǎng)頁(yè)中的文字進(jìn)行

31、修飾呢？能不能也給我們的網(wǎng)頁(yè)換個(gè)漂亮的背景呢？大家動(dòng)手試試看學(xué)生進(jìn)行實(shí)踐活動(dòng)播送展示學(xué)生網(wǎng)頁(yè)文字修飾展示的過(guò)程中提示學(xué)生：1盡量使用黑體、楷體、宋體、仿宋體、幼圓體這5種標(biāo)準(zhǔn)字體，以便網(wǎng)上其他計(jì)算機(jī)能順利顯示網(wǎng)頁(yè)是的文字；2合理搭配網(wǎng)頁(yè)中的文字與背景的顏色，以到達(dá)賞心悅目的效果。引導(dǎo)2：在網(wǎng)頁(yè)中還有一個(gè)細(xì)節(jié)之處不知大家發(fā)現(xiàn)了沒(méi)有？水平線學(xué)生答復(fù)：我們也試著給自己的網(wǎng)頁(yè)中添加水平線來(lái)美化我們的網(wǎng)頁(yè)。學(xué)生動(dòng)手實(shí)踐并互相交流問(wèn)題：能否將水平線加粗變顏色呢？右鍵的屬性學(xué)生動(dòng)手發(fā)現(xiàn)【任務(wù)】：在網(wǎng)頁(yè)中一種顏色做背景好似有點(diǎn)兒枯燥，能不能換一個(gè)淡雅一點(diǎn)的圖片做背景呢？提示：圖片做背景應(yīng)該還在“背景對(duì)話框中找

32、。學(xué)生動(dòng)手實(shí)踐播送展示學(xué)生的發(fā)現(xiàn)注意點(diǎn)：1在網(wǎng)頁(yè)中插入的圖片或動(dòng)畫(huà)、音樂(lè)、小電影都要及時(shí)保存，并保存在網(wǎng)站images文件夾中，以防止發(fā)布到網(wǎng)上出現(xiàn)鏈接錯(cuò)誤；2想看網(wǎng)頁(yè)存完后的結(jié)果可以使用“預(yù)覽，所看即所得。【任務(wù)延伸】：大家使用圖片修飾的是一張網(wǎng)頁(yè)背景，那么我做了多張網(wǎng)頁(yè)的背景也用這種方法就太累人了，能不能有一種“一勞永逸的方法讓所有的網(wǎng)頁(yè)與第一張相同呢？方法是有的，“格式菜單下的“主題大家試試看注意點(diǎn)：1使用了主題后，再使用背景是不能的，必須先刪除所用的主題，方法是：“主題對(duì)話框中使用“無(wú)主題即可；2想應(yīng)用所有的網(wǎng)頁(yè)時(shí)選擇“所有網(wǎng)頁(yè)這一項(xiàng)。【任務(wù)延伸】1【舉一反三】從“文字顏色“網(wǎng)頁(yè)背景單

33、色“網(wǎng)頁(yè)背景圖片“多個(gè)網(wǎng)頁(yè)背景一致主題，由淺入深，形成線與珠的關(guān)系。2使用右鍵的“快捷菜單便利?！菊n堂小節(jié)】1本節(jié)課在文字修飾塊內(nèi)容教師可以略說(shuō)，學(xué)生自己動(dòng)手實(shí)踐，但其中就存在一個(gè)問(wèn)題，假設(shè)文字處理軟件沒(méi)有學(xué)習(xí)，此內(nèi)容就會(huì)影響本節(jié)課的完成效果。2任務(wù)延伸這塊內(nèi)容可根據(jù)整體學(xué)生掌握情況加以取舍，也可對(duì)個(gè)別學(xué)習(xí)較快的做為知識(shí)的延伸內(nèi)容。3內(nèi)容銜接比較緊湊。【布置作業(yè)】翻開(kāi)你的素材庫(kù)完成?多彩民族?的網(wǎng)頁(yè)制作并做修飾教師展示一張展示學(xué)生作業(yè)并點(diǎn)評(píng)【復(fù)習(xí)提問(wèn)】FrontPage2003的網(wǎng)頁(yè)布局的根本內(nèi)容【導(dǎo)入新課】修飾網(wǎng)頁(yè)中的文字和背景【新課講解】第5章 網(wǎng)頁(yè)裝飾設(shè)計(jì)一文字的修飾導(dǎo)入第一個(gè)新知識(shí)點(diǎn)：

34、制作的網(wǎng)頁(yè)，所有的文檔內(nèi)容已經(jīng)輸入，但視覺(jué)效果不是很好，你們能幫他把網(wǎng)頁(yè)“我們一家人“梳妝打扮一下嗎？任務(wù)一：為網(wǎng)頁(yè)“梳妝打扮。教師翻開(kāi)網(wǎng)頁(yè)A，引導(dǎo)學(xué)生回憶在word中學(xué)過(guò)對(duì)文檔的修飾及美化，過(guò)渡到網(wǎng)頁(yè)的文字修飾，方法和Word文檔的編排幾乎一樣。然后和學(xué)生一起，共同探討美化網(wǎng)頁(yè)的好方法。同時(shí)請(qǐng)學(xué)生注意FrontPage 2003工具欄中哪些工具欄按鈕與Word 2003不同。設(shè)置網(wǎng)頁(yè)的背景問(wèn)題導(dǎo)入下一新知識(shí)點(diǎn)：我們剛剛已經(jīng)把網(wǎng)頁(yè)“我們一家人的文字打扮得很漂亮了，那么大家能否再給它穿上一件“花衣服，讓它看起來(lái)更漂亮些呢？任務(wù)二：給網(wǎng)頁(yè)“穿上花衣。添加背景音樂(lè)第三個(gè)新知識(shí)銜接：剛剛大家給網(wǎng)頁(yè)“我

35、們一家人添加了背景、修飾了文字，已經(jīng)夠漂亮了，但大家能否給它再加上悅耳的音樂(lè)，讓我們的網(wǎng)頁(yè)“有聲有色呢？任務(wù)三：讓網(wǎng)頁(yè)“有聲有色。然后對(duì)添加背景音樂(lè)的前后效果進(jìn)行比照。四插入水平線導(dǎo)入第四知識(shí)點(diǎn)：我們的網(wǎng)頁(yè)根本上可以說(shuō)是“有聲有色了，但看起來(lái)布局還有點(diǎn)零亂，各局部之間界限不明確，那么怎樣才能使它條理清楚，層次清楚呢？那就是插入“水平線。任務(wù)四：使網(wǎng)頁(yè)“條理清楚、層次清楚。提示：在網(wǎng)頁(yè)中使用水平線是分隔章節(jié)、主題和其他元素的方法。如果不喜歡固定格式的水平線，還可以插入圖片作為水平線。【課堂小節(jié)】本節(jié)課主要學(xué)習(xí)了網(wǎng)頁(yè)文字修飾，通過(guò)設(shè)置“網(wǎng)頁(yè)屬性、插入“水平線等操作，把網(wǎng)頁(yè)變得整潔有序，美觀大方，還

36、給網(wǎng)頁(yè)添加背景音樂(lè)，使網(wǎng)頁(yè)“有聲有色。【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】FrontPage2003的網(wǎng)頁(yè)裝飾設(shè)計(jì)的根本內(nèi)容【導(dǎo)入新課】在學(xué)生初步認(rèn)識(shí)并掌握了網(wǎng)頁(yè)制作根本操作的根底上，指導(dǎo)學(xué)生對(duì)網(wǎng)頁(yè)文字進(jìn)行修飾，并配上漂亮的背景、動(dòng)聽(tīng)的音樂(lè)，以及插入水平線分隔層次，從而完成對(duì)網(wǎng)頁(yè)“我們一家人的裝扮、修飾、美化任務(wù)，提高自身藝術(shù)修養(yǎng)?！拘抡n講解】第5章 網(wǎng)頁(yè)裝飾設(shè)計(jì)一文字的修飾導(dǎo)入第一個(gè)新知識(shí)點(diǎn)：制作的網(wǎng)頁(yè)，所有的文檔內(nèi)容已經(jīng)輸入，但視覺(jué)效果不是很好，你們能幫他把網(wǎng)頁(yè)“我們一家人“梳妝打扮一下嗎？任務(wù)一：為網(wǎng)頁(yè)“梳妝打扮。教師翻開(kāi)網(wǎng)頁(yè)A，引導(dǎo)學(xué)生回憶在word中學(xué)過(guò)對(duì)文檔的修飾及美

37、化，過(guò)渡到網(wǎng)頁(yè)的文字修飾，方法和Word文檔的編排幾乎一樣。然后和學(xué)生一起，共同探討美化網(wǎng)頁(yè)的好方法。同時(shí)請(qǐng)學(xué)生注意FrontPage 2003工具欄中哪些工具欄按鈕與Word 2003不同。并要求學(xué)生掌握技巧：變化文字大小可使文章更顯活潑，便于突出重點(diǎn)。給一些特殊的文字加上特殊的修飾以進(jìn)行強(qiáng)調(diào)。改變文字的顏色刺激視覺(jué)，給人留下深刻印象。然后學(xué)生親自實(shí)踐操作練習(xí)，完成任務(wù)一，靈活熟練地對(duì)網(wǎng)頁(yè)文字進(jìn)行修飾。并請(qǐng)優(yōu)秀作品的小組代表前臺(tái)演示，教師綜合評(píng)點(diǎn)。最后將網(wǎng)頁(yè)文字修飾前后的效果進(jìn)行比照，讓學(xué)生體會(huì)哪個(gè)更美。設(shè)置網(wǎng)頁(yè)的背景問(wèn)題導(dǎo)入下一新知識(shí)點(diǎn)：我們剛剛已經(jīng)把網(wǎng)頁(yè)“我們一家人的文字打扮得很漂亮了，

38、那么大家能否再給它穿上一件“花衣服，讓它看起來(lái)更漂亮些呢？任務(wù)二：給網(wǎng)頁(yè)“穿上花衣。讓學(xué)生翻開(kāi)網(wǎng)頁(yè)A自主探究練習(xí)，嘗試發(fā)現(xiàn)新知，深入感知綜合實(shí)踐，完成任務(wù)二。然后展示優(yōu)秀作品，并進(jìn)行設(shè)置網(wǎng)頁(yè)背景前后效果比照，感受“穿上花衣的視覺(jué)效果。添加背景音樂(lè)第三個(gè)新知識(shí)銜接：剛剛大家給網(wǎng)頁(yè)“我們一家人添加了背景、修飾了文字，已經(jīng)夠漂亮了，但大家能否給它再加上悅耳的音樂(lè)，讓我們的網(wǎng)頁(yè)“有聲有色呢？任務(wù)三：讓網(wǎng)頁(yè)“有聲有色。翻開(kāi)網(wǎng)頁(yè)，讓學(xué)生實(shí)踐，完成任務(wù)三，感受其“有聲有色的良好聽(tīng)覺(jué)效果。并請(qǐng)優(yōu)秀作品的小組代表前臺(tái)展示。然后對(duì)添加背景音樂(lè)的前后效果進(jìn)行比照。四插入水平線 導(dǎo)入第四知識(shí)點(diǎn)：我們的網(wǎng)頁(yè)根本上可以說(shuō)

39、是“有聲有色了，但看起來(lái)布局還有點(diǎn)零亂，各局部之間界限不明確，那么怎樣才能使它條理清楚，層次清楚呢？那就是插入“水平線。任務(wù)四：使網(wǎng)頁(yè)“條理清楚、層次清楚。提示：在網(wǎng)頁(yè)中使用水平線是分隔章節(jié)、主題和其他元素的方法。如果不喜歡固定格式的水平線，還可以插入圖片作為水平線。讓學(xué)生實(shí)踐操作，完成任務(wù)四，細(xì)心觀察插入水平線后的變化然后展示優(yōu)秀作品，將插入水平線前后效果比照，深刻理解插入水平線的意義?！菊n堂小節(jié)】在網(wǎng)頁(yè)中設(shè)置網(wǎng)頁(yè)背景、添加背景音樂(lè)和插入水平線，綜合運(yùn)用素材，使自己的網(wǎng)頁(yè)更美觀。【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】FrontPage2003的網(wǎng)頁(yè)裝飾設(shè)計(jì)的根本內(nèi)容【導(dǎo)入新課】超

40、鏈接在本質(zhì)上屬于一個(gè) HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)的一局部，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。【新課講解】第6章 創(chuàng)立超鏈接1、定義超鏈接在本質(zhì)上屬于一個(gè) HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)的一局部，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。2、類型按照鏈接路徑的不同, HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)中超鏈接一般分為以下3種類型: 內(nèi)部鏈接,錨點(diǎn)鏈接和外部鏈接。 3、

41、超鏈接對(duì)象如果按照使用對(duì)象的不同，網(wǎng)頁(yè)中的鏈接又可以分為：文本超鏈接， HYPERLINK :/baike.baidu /view/42116.htm t _blank 圖像超鏈接， HYPERLINK :/baike.baidu /view/8409.htm t _blank E-mail鏈接，錨點(diǎn)鏈接， HYPERLINK :/baike.baidu /view/130979.htm t _blank 多媒體文件鏈接，空鏈接等。 超鏈接是一種對(duì)象，它以特殊編碼的文本或圖形的形式來(lái)實(shí)現(xiàn)鏈接，如果單擊該鏈接，那么相當(dāng)于指示 HYPERLINK :/baike.baidu /view/7718.

42、htm t _blank 瀏覽器移至同一網(wǎng)頁(yè)內(nèi)的某個(gè)位置，或翻開(kāi)一個(gè)新的網(wǎng)頁(yè)，或翻開(kāi)某一個(gè)新的WWW網(wǎng)站中的網(wǎng)頁(yè)。 4、網(wǎng)頁(yè)超鏈接網(wǎng)頁(yè)上的超鏈接一般分為三種：一種是絕對(duì)URL的超鏈接。URLUniform Resource Locator就是 HYPERLINK :/baike.baidu /view/245485.htm t _blank 統(tǒng)一資源定位符，簡(jiǎn)單地講就是網(wǎng)絡(luò)上的一個(gè)站點(diǎn)、網(wǎng)頁(yè)的完整路徑。 :/ xxx. com/ 第二種是相對(duì)URL的超鏈接。如將自己網(wǎng)頁(yè)上的某一段文字或某標(biāo)題鏈接到同一網(wǎng)站的其他網(wǎng)頁(yè)上面去； 還有一種稱為同一網(wǎng)頁(yè)的超鏈接，這種超鏈接又叫做書(shū)簽。 5、動(dòng)態(tài)靜態(tài)超鏈

43、接還可以分為動(dòng)態(tài) HYPERLINK :/baike.baidu /view/1383410.htm t _blank 超連接和靜態(tài)超連接。動(dòng)態(tài)超連接指的是可以通過(guò)改變HTML代碼來(lái)實(shí)現(xiàn)動(dòng)態(tài)變化的超鏈接，例如我們可以實(shí)現(xiàn)將鼠標(biāo)移動(dòng)到某個(gè)文字鏈接上，文字就會(huì)象/7262.htm t _blank 動(dòng)畫(huà)一樣動(dòng)起來(lái)或改變顏色的效果，也可以實(shí)現(xiàn)鼠標(biāo)移到 HYPERLINK :/baike.baidu /view/19159.htm t _blank 圖片上圖片就產(chǎn)生 HYPERLINK :/baike.baidu /view/1308625.htm t _blank 反色或朦朧等等的效果。而靜態(tài)超鏈接

44、，就是沒(méi)有動(dòng)態(tài)效果的超鏈接。 6、顏色在網(wǎng)頁(yè)中，一般文字上的超鏈接都是藍(lán)色當(dāng)然，用戶也可以自己設(shè)置成其他顏色，文字下面有一條 HYPERLINK :/baike.baidu /view/547703.htm t _blank 下劃線。當(dāng)移動(dòng) HYPERLINK :/baike.baidu /view/265736.htm t _blank 鼠標(biāo)指針到該超鏈接上時(shí)，鼠標(biāo)指針就會(huì)變成一只手的形狀，這時(shí)候用鼠標(biāo)左鍵單擊，就可以直接跳到與這個(gè)超鏈接相連接的網(wǎng)頁(yè)或WWW網(wǎng)站上去。如果用戶已經(jīng)瀏覽過(guò)某個(gè)超鏈接，這個(gè)超鏈接的文本顏色就會(huì)發(fā)生改變默認(rèn)為紫色。只有圖像的超鏈接訪問(wèn)后顏色不會(huì)發(fā)生變化?！菊n堂小節(jié)】

45、了解超鏈接的定義、類型、鏈接對(duì)象；了解什么是網(wǎng)頁(yè)超鏈接、動(dòng)態(tài)超鏈接、靜態(tài)超鏈接；了解超鏈接的顏色【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】FrontPage2003的網(wǎng)頁(yè)裝飾設(shè)計(jì)的根本內(nèi)容【導(dǎo)入新課】超鏈接在本質(zhì)上屬于一個(gè) HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)的一局部，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。【新課講解】第6章 創(chuàng)立超鏈接一、教師演示在網(wǎng)頁(yè)中添加超鏈接到其它網(wǎng)站方法：選中要制作超鏈接的文字，單擊工具欄上的“插入超鏈接按鈕，翻開(kāi)“插入超鏈接對(duì)話框：1.超鏈接到其它網(wǎng)站：在“插入超鏈接對(duì)話框中，在UR

46、L(網(wǎng)址)文本框中，填入該網(wǎng)站網(wǎng)址即可：演示：超鏈接“HYPERLINK :/8/效實(shí)中學(xué)到網(wǎng)站 或.28；創(chuàng)立指向一個(gè)網(wǎng)頁(yè)或文件的超鏈接：演示：超鏈接到 “ HYPERLINK 第26講 建網(wǎng)站的概念及工具簡(jiǎn)介.doc 第26講 建網(wǎng)站的 ；注意：我們可以創(chuàng)立指向一個(gè)新網(wǎng)頁(yè)再輸入內(nèi)容，但要保存好該新網(wǎng)頁(yè)，然后建立超鏈接指向該新網(wǎng)頁(yè)。演示制作發(fā)送電子郵件的超鏈接。示：超鏈接或“ HYPERLINK mailto:nbxstom ?subject=同學(xué)們好！ 我的信箱超鏈接到 HYPERLINK mailto:nbxstom nbxs；4.超鏈接到書(shū)簽： 功能：跳轉(zhuǎn)到同一網(wǎng)頁(yè)內(nèi)的指定位置書(shū)簽位置

47、 ，方法如下：1建立書(shū)簽：確定要跳到的位置選中要跳轉(zhuǎn)到的目標(biāo)位置的文字如：“建立書(shū)簽或圖片，單擊“插入菜單下的“書(shū)簽，輸入書(shū)簽名稱如：“建立書(shū)簽,點(diǎn)擊“添加，就建立了“建立書(shū)簽。2建立超鏈接到書(shū)簽：建立書(shū)簽后，我們就可以建立一個(gè)跳到書(shū)簽的超鏈接，如：點(diǎn)擊本講稿的開(kāi)頭文字“ HYPERLINK l 學(xué)習(xí)目標(biāo) 學(xué)會(huì)書(shū)簽的設(shè)置和鏈接，就會(huì)跳到建立了的書(shū)簽文字“建立書(shū)簽的位置上。演示再次演示一次：要求點(diǎn)擊書(shū)簽圖標(biāo)，就會(huì)跳到本講稿的開(kāi)頭“學(xué)習(xí)目標(biāo)位置上：選中本講稿的開(kāi)頭“學(xué)習(xí)目標(biāo)位置，建立“學(xué)習(xí)目標(biāo)書(shū)簽；不但網(wǎng)頁(yè)上可以建立上述各超鏈接，在其它格式文件中也可以建立超鏈接，例如WordExcel，方法類似演

48、示。二、學(xué)生練習(xí)建立一個(gè)內(nèi)容是本講稿的網(wǎng)頁(yè)，在網(wǎng)頁(yè)中添加各種超鏈接：1、超鏈接到其它網(wǎng)站；2、創(chuàng)立指向一個(gè)網(wǎng)頁(yè)或文件的超鏈接；3、制作發(fā)送電子郵件的超鏈接；4、超鏈接到書(shū)簽?！菊n堂小節(jié)】1.學(xué)會(huì)如何超鏈接到網(wǎng)站2學(xué)會(huì)如何超鏈接到網(wǎng)頁(yè)或文件或E-mail 3. HYPERLINK l 建立書(shū)簽學(xué)會(huì)書(shū)簽的設(shè)置和鏈接【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課 【復(fù)習(xí)提問(wèn)】學(xué)會(huì)創(chuàng)立超鏈接【導(dǎo)入新課】表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運(yùn)用表格的各種屬性，可以讓您的頁(yè)面看起來(lái)賞心悅

49、目。 【新課講解】第7章 巧用表格表格的根本用法。表格的HTML根本語(yǔ)法table標(biāo)簽的參數(shù)。table標(biāo)簽可以含以下參數(shù)。border 表格邊框cellspacing 表元之間的空白距離cellpadding 表元內(nèi)部的空白距離width 表格寬度可以用%或者具體數(shù)據(jù)表示height 表格高度表格的對(duì)齊方式.表格內(nèi)的文字對(duì)齊。語(yǔ)法： 其中#可以設(shè)定的參數(shù)有：left 橫向居左；center 橫向居中；right 橫向居右top 縱向居頂；middle縱向居中；bottom 縱向居底2.表格在頁(yè)面內(nèi)的對(duì)齊。如果你需要與表格并排放一段文字，就需要用到table標(biāo)簽的另一個(gè)個(gè)參數(shù)：其中#可以設(shè)定為

50、left(居左)，right(居右)表格的嵌套表格嵌套就是在表格里插入表格，嵌套的排版方法就是將要插入的表格當(dāng)做文字來(lái)處理同樣使用語(yǔ)句。表格的色彩表格的色彩也在標(biāo)簽里設(shè)置，參數(shù)有：bgcolor 背景顏色bordercolor 邊框顏色bordercolorlight 立體邊框亮色bordercolordark 立體邊框暗色 語(yǔ)法為： 其中RRGGBB分別為RGB三色的16進(jìn)制數(shù)值例如：borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5 cellSpacing=0 bordercolorlight=#000000【課堂小

51、節(jié)】表格的嵌套；表格的色彩；表格的對(duì)齊方式；表格的HTML根本語(yǔ)法；table標(biāo)簽的參數(shù)【布置作業(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】學(xué)會(huì)創(chuàng)立超鏈接【導(dǎo)入新課】表格(table)是頁(yè)面的重要元素,是頁(yè)面排版的主要手段。盡管DHTML中的層(layer)也可以實(shí)現(xiàn)網(wǎng)頁(yè)元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運(yùn)用表格的各種屬性，可以讓您的頁(yè)面看起來(lái)賞心悅目。 【新課講解】第7章 巧用表格集中學(xué)生注意力，準(zhǔn)備上課。 通過(guò)提問(wèn)考察學(xué)生對(duì)插入圖像根底知識(shí)的了解。 如何在網(wǎng)頁(yè)上插入一張圖片，并調(diào)整圖片的大小、位置？ 學(xué)生分組討論如何在網(wǎng)頁(yè)上制作一個(gè)班級(jí)通訊錄，每行內(nèi)容有“姓名、照片、

52、地址、聯(lián)系 。 通過(guò)上面討論，引導(dǎo)學(xué)生認(rèn)識(shí)利用表格制作通訊錄是方便快捷的方式，再引導(dǎo)學(xué)生聯(lián)想生活中用到的表格，進(jìn)而了解表格在網(wǎng)頁(yè)制作中的廣泛應(yīng)用。 在FrontPage中，表格是用于在頁(yè)面上顯示表格式數(shù)據(jù)及對(duì)文本和圖像等元素進(jìn)行布局的強(qiáng)用力的工具。本任務(wù)將學(xué)習(xí)在網(wǎng)頁(yè)制作中如何靈活運(yùn)用表格。 提出任務(wù)：利用表格規(guī)劃、布局作品展示網(wǎng)頁(yè)。 依據(jù)設(shè)計(jì)圖樣，可以使用四個(gè)表格把頁(yè)面劃分為四個(gè)區(qū)域，四個(gè)表格分別命名為“table1、“table2、“table3和“table4。依據(jù)不同的設(shè)計(jì)內(nèi)容，這四個(gè)表格還需要進(jìn)行相應(yīng)的編輯與嵌套。 1分析網(wǎng)頁(yè)布局 教師帶著學(xué)生進(jìn)行頁(yè)面表格分析。 引導(dǎo)學(xué)生了解：“tab

53、le1是一個(gè)2行1列的表格。第一行用于放置網(wǎng)站標(biāo)題及圖像，第二行嵌套一個(gè)1行5列的表格“table1-1”，用于放置五個(gè)導(dǎo)航按鈕。 “table2是一個(gè)1行4列的表格。左右單元格為空白區(qū)域，中間兩個(gè)單元格分別用于放置“作品展示和“友情鏈接兩張圖像。 “table3是一個(gè)1行3列的表格。左右單元格為空白區(qū)域，中間單元格用于放置作品分類標(biāo)題和圖像。在中間單元格嵌套一個(gè)6行1列的表格“table3-1”?！皌able3-1”表格的每一行再嵌套一個(gè)表格，其中第一、三、五行分別嵌套一個(gè)1行2列的表格，用于放置圖標(biāo)及作品題目；第二、四、六行分別嵌套一個(gè)1行5列的表格，放置三幅作品及左右兩個(gè)空白區(qū)域。 “t

54、able4是一個(gè)3行1列的表格，第一行是空白區(qū)域，第二行通過(guò)設(shè)置行屬性顯示為一條細(xì)線，第三行放置版權(quán)信息。 重點(diǎn)理解如下內(nèi)容： 頁(yè)面布局由4個(gè)大表格組成，分別分析每個(gè)表格的作用。 b什么是嵌套表格插入嵌套表格是指在表格的單元格中插入新的表格。和嵌套表格的作用。 教師舉一些網(wǎng)頁(yè)布局的實(shí)際例子讓學(xué)生進(jìn)行協(xié)同分析?？偨Y(jié)：通過(guò)以上幾個(gè)實(shí)際網(wǎng)站頁(yè)面的例子，介紹表格布局知識(shí)，即許多網(wǎng)頁(yè)的表格布局可分為上、中、下三個(gè)局部，上面局部放置網(wǎng)頁(yè)的標(biāo)題，中間局部放置網(wǎng)頁(yè)的主要內(nèi)容,下局部放置制作者的信息及版權(quán)信息等。上、中、下三個(gè)局部又包含各自的嵌套表格來(lái)布局相應(yīng)的內(nèi)容。 提問(wèn)：回想以前翻開(kāi)一張網(wǎng)頁(yè)的時(shí)候是所有的內(nèi)

55、容都同時(shí)全部顯示嗎？如果不是的話是怎樣進(jìn)行顯示的呢？為什么這樣顯示？表格布局在這里有什么作用？ 總結(jié)：如果使用表格布局網(wǎng)頁(yè)結(jié)構(gòu)不合理，會(huì)降低網(wǎng)頁(yè)瀏覽速度。因?yàn)闉g覽器在解析網(wǎng)頁(yè)時(shí)，先將整個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)下載完后才顯示內(nèi)容，如果不使用嵌套表格布局網(wǎng)頁(yè)只使用一個(gè)表格會(huì)非常復(fù)雜，瀏覽者要等待很長(zhǎng)時(shí)間才能看到網(wǎng)頁(yè)內(nèi)容。通常用表格布局頁(yè)面時(shí)，應(yīng)該遵循以下幾點(diǎn)： a整個(gè)網(wǎng)頁(yè)不要放在一個(gè)表格里，盡量使用多個(gè)表格來(lái)進(jìn)行布局。 b表格的嵌套層次盡量要少。 c單一表格的結(jié)構(gòu)盡量整齊，不要太復(fù)雜。 2創(chuàng)立目錄結(jié)構(gòu) 在FrontPage中翻開(kāi)“幽幽我心的個(gè)人網(wǎng)站，依據(jù)第一單元建立的網(wǎng)站目錄結(jié)構(gòu)，在本欄目“works文件夾中

56、新建文件“，然后把光盤中本單元素材中的“wkimages、“flash、“l(fā)inks文件夾復(fù)制到本欄目“works文件夾中。本欄目目錄結(jié)構(gòu)如課本表3-1所示。 3創(chuàng)立表格的知識(shí) 練習(xí)插入一個(gè)表格：學(xué)會(huì)使用菜單、“插入欄、快捷鍵創(chuàng)立表格。 答復(fù)表格對(duì)話框中如下選項(xiàng)的作用： “頁(yè)眉選項(xiàng)組、“標(biāo)題、“對(duì)齊標(biāo)題、“摘要。 4自己動(dòng)手 通過(guò)完本錢任務(wù)學(xué)習(xí)了： 創(chuàng)立表格 表格布局頁(yè)面 表格在頁(yè)面中的作用： 創(chuàng)立網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入一個(gè)6行5列的表格，寬500像素，邊框粗細(xì)與單元格間距均為5像素，頁(yè)眉選擇“頂部，標(biāo)題為“產(chǎn)品信息，保存并預(yù)覽網(wǎng)頁(yè)。 回想插入表格的幾種方法，考慮頁(yè)眉、標(biāo)題等選項(xiàng)出現(xiàn)在哪個(gè)對(duì)話框的

57、選項(xiàng)卡中，并考慮如何設(shè)置創(chuàng)立表格的相關(guān)屬性。 【課堂小節(jié)】 理解表格在網(wǎng)頁(yè)設(shè)計(jì)中的作用。 掌握利用表格布局頁(yè)面。 掌握創(chuàng)立表格的根本方法。 掌握創(chuàng)立嵌套表格。 掌握在網(wǎng)頁(yè)中利用表格進(jìn)行排版?！静贾米鳂I(yè)】1整理筆記2復(fù)習(xí)、預(yù)習(xí)新課【復(fù)習(xí)提問(wèn)】表格的創(chuàng)立【導(dǎo)入新課】表單，在 HYPERLINK :/baike.baidu /view/828.htm t _blank 網(wǎng)頁(yè)中的作用不可小視，主要負(fù)責(zé)數(shù)據(jù)采集的功能，比方你可以采集訪問(wèn)者的名字和email HYPERLINK :/baike.baidu /view/494802.htm t _blank 地址、調(diào)查表、留言簿等等?！拘抡n講解】第8章 表

58、單設(shè)計(jì)1、表單的組成一個(gè)表單有三個(gè)根本組成局部： 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到效勞器的方法。 表單域：包含了 HYPERLINK :/baike.baidu /view/1137200.htm t _blank 文本框、密碼框、 HYPERLINK :/baike.baidu /view/2115164.htm t _blank 隱藏域、多行文本框、 HYPERLINK :/baike.baidu /view/1143823.htm t _blank 復(fù)選框、單項(xiàng)選擇框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)

59、傳送到效勞器上的CGI HYPERLINK :/baike.baidu /view/54.htm t _blank 腳本或者取消輸入，還可以用表單按鈕來(lái)控制其他定義了處理腳本的處理工作。 為了顧及不同的 HYPERLINK :/baike.baidu /view/8972.htm t _blank 網(wǎng)頁(yè)設(shè)計(jì)工具，本文只講述代碼的設(shè)計(jì)，不具體講述操作方法，下面就是表單的HTML代碼設(shè)計(jì)要點(diǎn)：2、表單標(biāo)簽 功能：用于申明表單，定義采集數(shù)據(jù)的范圍，也就是和里面包含的數(shù)據(jù)將被提交到效勞器或者 HYPERLINK :/baike.baidu /view/1524.htm t _blank 電子郵件里。

60、語(yǔ)法：. . . 屬性解釋見(jiàn)下表： HYPERLINK :/baike.baidu /view/494802.htm t _blank 地址(提交給程式)或一個(gè)電子郵件地址. method=get或post指明提交表單的 方法.可能的值為： post：POST方法在表單的主干包含名稱/值對(duì)并且無(wú)需包含于action特性的URL中. get：不贊成。GET方法把名稱/值對(duì)加在action的URL后面并且把新的URL送至效勞器.這是往前兼容的缺省值.這個(gè)值由于國(guó)際化的原因不贊成使用. 例如： . 表示表單將向 :/ xxx /test.asp以post的方式提交，提交的結(jié)果在新的頁(yè)面顯示，數(shù)據(jù)提交