1、【導入新課】 HYPERLINK :/baike.baidu /view/828.htm t _blank 網頁制作要能充分吸引訪問者的注意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與 HYPERLINK :/baike.baidu /view/8972.htm t _blank 網頁設計的相關原理緊密結合起來。 t _blank 網站設計是將籌劃案中的內容、網站的主題模式，以及結合自己的認識通過藝術的手法表現出來；網頁制作通常就是將 HYPERLINK :/baike.baidu /view/29716.htm t _blank 網頁設計師所設計出來的設計稿，

2、按照W3C標準用 HYPERLINK :/baike.baidu /view/115411.htm t _blank html語言將其制作成網頁格式。【新課講解】第一章 網頁設計與制造概論第1節 什么是網頁網頁(web page)，是網站中的一頁，通常是HTML格式 HYPERLINK :/baike.baidu /view/70172.htm t _blank 文件擴展名為。html或。htm或。asp或。aspx或。php或。jsp等。網頁通常用 HYPERLINK :/baike.baidu /view/42116.htm t _blank 圖像檔來提供圖畫。網頁要使用 HYPERLIN

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

4、e是一個 HYPERLINK :/baike.baidu /view/345685.htm t _blank 文件，他存放在世界某個角落的某一部 HYPERLINK :/baike.baidu /view/3314.htm t _blank 計算機中，而這部計算機必須是與 HYPERLINK :/baike.baidu /view/6825.htm t _blank 互聯網相連的。網頁經由網址 HYPERLINK :/baike.baidu /view/1496.htm t _blank URL來識別與存取，當我們在 HYPERLINK :/baike.baidu /view/7718.htm

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

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

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

8、意力，讓訪問者產生視覺上的愉悅感。因此在網頁創作的時候就必須將網站的整體設計與 HYPERLINK :/baike.baidu /view/8972.htm t _blank 網頁設計的相關原理緊密結合起來。 HYPERLINK :/baike.baidu /view/50036.htm t _blank 網站設計是將籌劃案中的內容、網站的主題模式，以及結合自己的認識通過藝術的手法表現出來；網頁制作通常就是將 HYPERLINK :/baike.baidu /view/29716.htm t _blank 網頁設計師所設計出來的設計稿，按照W3C標準用 HYPERLINK :/baike.ba

9、idu /view/115411.htm t _blank html語言將其制作成網頁格式。【新課講解】第一章 網頁設計與制造概論第2節 www效勞1、概述 WWW效勞3W效勞也是目前應用最廣的一種根本互聯網應用，我們每天上網都要用到這種效勞。通過WWW效勞，只要用鼠標進行本地操作，就可以到達世界上的任何地方。由于WWW效勞使用的是超文本鏈接HTML，所以可以很方便的從一個信息頁轉換到另一個信息頁。它不僅能查看文字，還可以欣賞圖片、音樂、動畫。最流行的WWW效勞的程序就是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟的IE瀏覽器。2、WW

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

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

12、將停止提供FrontPage軟件并改名為SharePoint Designer。【新課講解】第2章 FrontPage2003簡介FrontPage的新用處和說明FrontPage2003是比較有用的offline2003中的一個，有許多剛買電腦想用它的人們，總是找不到：咦，FrontPage2003哪里去了？其實，FrontPage2003原本電腦中沒有安裝過的，所以想使用它的人們，要另行安裝，在你買電腦的時候，不會有FrontPage。 突出的9個新功能FrontPage 2003相比FrontPage 2000來說在功能上增強了不少，下面我們一起來看看新版本中比較突出的9個新功能： 在設

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

14、有這個功能，現在傲慢的 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟也開始學習這個優點了。點擊菜單欄上的“視圖描摹圖像設置，在彈出對話框中，選擇指定圖像，再設置其坐標即在設計頁面上顯示的位置。最后，設置透明度，再確認即可。這個描摹圖像只是顯示在FrontPage 2003的設計視圖中，不會在你制作完畢的頁面中顯示出來。 過去，FrontPage最欠缺的功能之一就是無法像Macromedia Dreamweaver那樣使用層。而層的應用在網頁制作中已經是不可或缺了。好在FrontPage 2003終于支持了此項功能。 點擊菜單欄上的“插入層

15、，將在當前頁面中顯示一個默認為“layer1的層。用鼠標在各節點上拖曳，調節其大小，然后把光標插入點置于層中，輸入所需的文字圖2。另外，將光標定位于該層內，在其右鍵彈出菜單中選擇“層屬性，就可在界面右側的任務窗格上設置該層的ID，邊框和底紋的樣式、邊距，以及定位樣式與位置等參數。 點擊菜單欄上的“插入交互式按鈕，彈出如圖3所示對話框，在“按鈕標簽頁中，設置按鈕的顯示文字、樣式以及鏈接。在“ HYPERLINK :/baike.baidu /view/285104.htm t _blank 字體標簽頁中設置其相關選項。最后，我們再切換到“圖像標簽頁，設置懸停圖像及鼠標鍵按下時的圖像等。 行為一直

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

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

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

19、】1整理筆記2復習、預習新課【復習提問】了解FrontPage2003的根本功能【導入新課】Frontpage，是 HYPERLINK :/baike.baidu /view/2353.htm t _blank 微軟公司出品的一款網頁制作入門級 HYPERLINK :/baike.baidu /view/37.htm t _blank 軟件。FrongPage使用方便簡單，會用Word就能做網頁，微軟在2006年年底前將停止提供FrontPage軟件并改名為SharePoint Designer。【新課講解】一、新建網站提示：如果圖片覺得小，將鼠標移到圖片上，向上滾動鼠標滾輪，圖片會放大翻開F

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

21、來學習如何創立一個個人站點。學完本單元的全部內容后，同學們就可以創立出有自己風格的個人站點，并且將它發布到因特網上去，與大家分享和交流了。【新課講解】第3章 設計一個簡單的網頁1、網站與網頁網頁設計制作是根底，是建設網站的第一步，但網站的設計要復雜得多。將數量眾多的網頁有條理地組合在一起，形成一個網站，可不是一件容易的事。網站建設的一般流程是：選定網站主題，規劃結構，設計制作，測試修改，發布站點等。2、設計一個簡單網站確定網站的主題主題定位要準，內容要精。題材最好是自己擅長或者喜愛的內容。設計網站的根本結構網站的主題確定后，下一步的任務就是根據主題，將所要表達的信息進行劃分，確定網站的根本結構

22、，最終完成網站的欄目設計。3、設計主頁的布局與色彩主頁的布局應根據網站的類型而設計，不同網站的主頁有不同的風格，但應具備標題、網站標識logo、導航、網頁內容等根本布局元素。常見的網頁布局：“同字形、“匡字形、“回字形、“川字形繪制網頁布局根據網站的內容和自己的設計風格確定了主頁根本構思后，先不要急于動手。一般來說，網頁設計師們會先在紙上繪制自己網站的藍圖。色彩搭配選擇色彩要和網頁的內涵相關聯，網頁色彩搭配時，網頁的色彩要容易引人注目，色彩和表達的內容氣氛相適合。常用的配色方案：暖色調、冷色調、比照色調【課堂小結】了解設計一個簡單的網頁的根本過程【布置作業】1整理筆記2復習、預習新課【復習提問

23、】了解FrontPage2003的根本功能【導入新課】上一課同學們已經學會了如何啟動Frontpage 2000，并且知道Frontpage 2000是用來制作網頁的工具，但是有了好的工具我們還要學會如何來利用它做出好的網頁來。今天我們就來學習如何制作一個簡單的網頁。【新課講解】第3章 設計一個簡單的網頁1、啟動Frontpage 2003。2、根據以下步驟進行。1請同學們單擊工具欄上的“新建按鈕，建立一個新的網頁。注意講解這個時候看不到任何東西。2請同學們利用鍵盤輸入文字：“歡送進入星星網！3請同學們按照要求設置字體和對齊方式。選擇字體大小為7號字，并選擇對齊方式為居中方式進行。4通過鍵盤自

24、己調節文字在頁面中的位置。5完成后可以請同學們在“編輯區點擊“預覽方式看看作完后在網頁的顯示效果，如有不滿意及時調整。6完成后教師可以選折先做好的同學演示給沒有完成的同學看。3、課堂練習1、在網頁中輸入文字“歡送你的光臨！注意文字設置為7號，并居中顯示。2、請同學們自主練習輸入一個自我介紹的網頁內容，教師可以指定文字內容和設置的格式，也可以由學生自己設置。要求保存到D:班級名自己名字為以后的課做準備。【課堂小結】1、使學生初步認識Frontpage 2003中文字的添加。 2、使學生初步利用Frontpage 2003制作簡單的網頁。【布置作業】1整理筆記2復習、預習新課【復習提問】Front

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

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

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

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

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

30、解】第4章 設計網頁布局【站點的翻開】分別找學生介紹自己的不同的翻開方法會出現直接翻開站點文件夾現象和啟動FrontPage軟件后“文件“翻開站點兩種情況初學者易出錯點這兩種情況中哪一種能對網頁進行修改？試試看通過出錯并修正錯誤來學習新知識一種是瀏覽方式，一種是編輯方式【任務】大家已經知道哪一種翻開站點的方法能對不滿意的網頁進行修改了，接下來我們要對網頁進行一些美化工作了。下面大家比較一下哪一張網頁比較吸引你？并說說原因？播送展示比照網頁學生通過觀察了解到：文字進行了字體變大著色、居中修飾、網頁的背景變顏色。引導1：我們在學習文字處理軟件時也對文檔進行修飾，大家能不能也對我們的網頁中的文字進行

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

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

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

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

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

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

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

38、那么大家能否再給它穿上一件“花衣服，讓它看起來更漂亮些呢？任務二：給網頁“穿上花衣。讓學生翻開網頁A自主探究練習，嘗試發現新知，深入感知綜合實踐，完成任務二。然后展示優秀作品，并進行設置網頁背景前后效果比照，感受“穿上花衣的視覺效果。添加背景音樂第三個新知識銜接：剛剛大家給網頁“我們一家人添加了背景、修飾了文字，已經夠漂亮了，但大家能否給它再加上悅耳的音樂，讓我們的網頁“有聲有色呢？任務三：讓網頁“有聲有色。翻開網頁，讓學生實踐，完成任務三，感受其“有聲有色的良好聽覺效果。并請優秀作品的小組代表前臺展示。然后對添加背景音樂的前后效果進行比照。四插入水平線 導入第四知識點：我們的網頁根本上可以說

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

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

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

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

43、接還可以分為動態 HYPERLINK :/baike.baidu /view/1383410.htm t _blank 超連接和靜態超連接。動態超連接指的是可以通過改變HTML代碼來實現動態變化的超鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象/7262.htm t _blank 動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到 HYPERLINK :/baike.baidu /view/19159.htm t _blank 圖片上圖片就產生 HYPERLINK :/baike.baidu /view/1308625.htm t _blank 反色或朦朧等等的效果。而靜態超鏈接

44、，就是沒有動態效果的超鏈接。 6、顏色在網頁中，一般文字上的超鏈接都是藍色當然，用戶也可以自己設置成其他顏色，文字下面有一條 HYPERLINK :/baike.baidu /view/547703.htm t _blank 下劃線。當移動 HYPERLINK :/baike.baidu /view/265736.htm t _blank 鼠標指針到該超鏈接上時，鼠標指針就會變成一只手的形狀，這時候用鼠標左鍵單擊，就可以直接跳到與這個超鏈接相連接的網頁或WWW網站上去。如果用戶已經瀏覽過某個超鏈接，這個超鏈接的文本顏色就會發生改變默認為紫色。只有圖像的超鏈接訪問后顏色不會發生變化。【課堂小節】

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

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

47、 ，方法如下：1建立書簽：確定要跳到的位置選中要跳轉到的目標位置的文字如：“建立書簽或圖片，單擊“插入菜單下的“書簽，輸入書簽名稱如：“建立書簽,點擊“添加，就建立了“建立書簽。2建立超鏈接到書簽：建立書簽后，我們就可以建立一個跳到書簽的超鏈接，如：點擊本講稿的開頭文字“ HYPERLINK l 學習目標 學會書簽的設置和鏈接，就會跳到建立了的書簽文字“建立書簽的位置上。演示再次演示一次：要求點擊書簽圖標，就會跳到本講稿的開頭“學習目標位置上：選中本講稿的開頭“學習目標位置，建立“學習目標書簽；不但網頁上可以建立上述各超鏈接，在其它格式文件中也可以建立超鏈接，例如WordExcel，方法類似演

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

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

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

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

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

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

54、able4是一個3行1列的表格，第一行是空白區域，第二行通過設置行屬性顯示為一條細線，第三行放置版權信息。 重點理解如下內容： 頁面布局由4個大表格組成，分別分析每個表格的作用。 b什么是嵌套表格插入嵌套表格是指在表格的單元格中插入新的表格。和嵌套表格的作用。 教師舉一些網頁布局的實際例子讓學生進行協同分析。總結：通過以上幾個實際網站頁面的例子，介紹表格布局知識，即許多網頁的表格布局可分為上、中、下三個局部，上面局部放置網頁的標題，中間局部放置網頁的主要內容,下局部放置制作者的信息及版權信息等。上、中、下三個局部又包含各自的嵌套表格來布局相應的內容。 提問：回想以前翻開一張網頁的時候是所有的內

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

56、新建文件“，然后把光盤中本單元素材中的“wkimages、“flash、“links文件夾復制到本欄目“works文件夾中。本欄目目錄結構如課本表3-1所示。 3創立表格的知識 練習插入一個表格：學會使用菜單、“插入欄、快捷鍵創立表格。 答復表格對話框中如下選項的作用： “頁眉選項組、“標題、“對齊標題、“摘要。 4自己動手 通過完本錢任務學習了： 創立表格 表格布局頁面 表格在頁面中的作用： 創立網頁，在網頁中插入一個6行5列的表格，寬500像素，邊框粗細與單元格間距均為5像素，頁眉選擇“頂部，標題為“產品信息，保存并預覽網頁。 回想插入表格的幾種方法，考慮頁眉、標題等選項出現在哪個對話框的

57、選項卡中，并考慮如何設置創立表格的相關屬性。 【課堂小節】 理解表格在網頁設計中的作用。 掌握利用表格布局頁面。 掌握創立表格的根本方法。 掌握創立嵌套表格。 掌握在網頁中利用表格進行排版。【布置作業】1整理筆記2復習、預習新課【復習提問】表格的創立【導入新課】表單，在 HYPERLINK :/baike.baidu /view/828.htm t _blank 網頁中的作用不可小視，主要負責數據采集的功能，比方你可以采集訪問者的名字和email HYPERLINK :/baike.baidu /view/494802.htm t _blank 地址、調查表、留言簿等等。【新課講解】第8章 表

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

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

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