《Web編程實用技術(shù)教程(第二版)第2章靜態(tài)網(wǎng)頁的制作》由會員分享，可在線閱讀，更多相關(guān)《Web編程實用技術(shù)教程(第二版)第2章靜態(tài)網(wǎng)頁的制作（98頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、單擊此處編輯母版標題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,第,2,章 靜態(tài)網(wǎng)頁的制作,Web,編程實用技術(shù)教程,學(xué)習(xí)目標,了解網(wǎng)頁制作工具（,Dreamweaver,、,Flash,）的簡單使用方法，用之制作靜態(tài)網(wǎng)頁；,學(xué)會將,Dreamweaver,作為開發(fā),Web,程序的平臺；,掌握超級鏈接的創(chuàng)建；,學(xué)會利用表格和框架進行網(wǎng)頁布局；,學(xué)會使用,HTML,和,XML,語言編制網(wǎng)頁。,目 錄,2.1 常用的網(wǎng)頁制作工具,2.2 制作第一個簡單網(wǎng)頁,2.3 超文本和超圖像鏈接,2.4 網(wǎng)頁制作中的,Flash,動畫,2.5 利用表格和框架制作網(wǎng)頁,2.6,HTML,

2、與,XML,標識語言,Dreamweaver,是一套專業(yè)化的網(wǎng)頁創(chuàng)作工具，它采用,“,所見即所得,”,的可視化編輯方式，能夠快速高效地創(chuàng)建各種具有專業(yè)水平的網(wǎng)頁，不需要編寫任何代碼。如果需要在代碼界面進行工作，只需進入,HTML,代碼窗口或源代碼檢視器中，就能同步看到,Dreamweaver,生成的源代碼。它支持最新的,DHTML,、,CSS,標準及分層技術(shù)，具有極好的兼容性，適用于各種平臺和各種瀏覽器。,2.1 常用的網(wǎng)頁制作工具,Dreamweaver,啟動,Dreamweaver,程序,在“開始”菜單的“所有程序”中找到“,Adobe Dreamweaver CS3”,，并單擊該命令。,

3、Dreamweaver,將立即啟動，在“文檔”窗口內(nèi)將打開一個空白文檔，如下圖所示。,2.,Dreamweaver,的用戶界面,Dreamweaver,由,頁面編輯器,和,站點管理器,兩大部分組成。下圖所示的是,Dreamweaver,的頁面編輯器，包括頁面編輯窗口和各種浮動面板。,(1) 頁面編輯窗口：,頁面編輯窗口由標題欄、菜單欄、工具欄、文檔編輯區(qū)和狀態(tài)欄等基本部分組成，各部分的功能如下：, 標題欄：顯示當前頁面的標題，括號中顯示對應(yīng)文檔的路徑和文件名。, 菜單欄：包含所有的操作命令。,Dreamweaver,共有,10,個系統(tǒng)菜單，分別為文件、編輯、查看、插入記錄、修改、文本、命令、站

4、點、窗口、幫助。單擊系統(tǒng)菜單，打開對應(yīng)的下拉菜單，可選擇下拉菜單中的操作命令。面板上的各個操作按鈕基本上都有菜單操作命令與之相對應(yīng)。, 工具欄：放置常用工具。如：左邊第一個按鈕用于切換到,HTML,代碼窗口，第二個按鈕切換到,HTML,代碼視圖和頁面設(shè)計視圖雙狀態(tài)同步窗口，第三個按鈕則切換到頁面編輯窗口。, 文檔編輯區(qū)：編輯網(wǎng)頁的區(qū)域。,Dreamweaver,啟動后，自動創(chuàng)建一個空白的網(wǎng)頁文檔等待編輯。, 狀態(tài)欄：顯示當前網(wǎng)頁的有關(guān)信息。在狀態(tài)欄中從左到右依次為標簽選擇器、基本工具、窗口設(shè)置框和下載指示器。,標簽選擇器：編輯網(wǎng)頁時，利用標簽選擇器可以顯示和修改,HTML,標簽，單擊標簽按鈕可

5、以選擇網(wǎng)頁中相應(yīng)的編輯對象。,基本工具：包括選取工具、手形工具、縮放工具和選擇縮放比例列表框。,窗口設(shè)置框：設(shè)置顯示窗口的大小，單擊設(shè)置區(qū)右側(cè)的小按鈕，在打開的菜單中，可以根據(jù)顯示器屏幕的分辨率選擇不同的顯示尺寸。,下載指示器：顯示當前網(wǎng)頁的文件量大小，以及網(wǎng)頁被下載所需要的時間，單位是*,k/*,秒。,(2) 浮動面板：,頁面編輯器中有2個常用的浮動面板：插入面板、屬性面板，以及放置其他面板的浮動面板集。,浮動面板是,Dreamweaver,的一大特色。利用浮動面板對網(wǎng)頁進行屬性設(shè)計，在頁面編輯窗口中可以直接看到操作結(jié)果，真正實現(xiàn)了“所見即所得”的編輯功能。,浮動面板集也是,Dreamwea

6、ver,的一大特色。設(shè)計者可以按自已的需要任意組合或拆分浮動面板集中的各種面板，也可以用鼠標拖拽浮動面板的標題欄來移動浮動面板，用鼠標拖拽浮動面板的邊框來改變浮動面板的大小。,(3) 站點管理器：,站點管理器主要用于管理站點內(nèi)的文件和目錄，可對站點內(nèi)的文件進行改名、編輯和刪除等基本操作，并可檢驗對象的鏈接情況，自動修改其他頁面指向這個對象的鏈接。利用模板和庫，可以使站點內(nèi)的部分頁面應(yīng)用相同的模板和庫，從而使多個頁面具有相同的風(fēng)格，并且可以快速進行統(tǒng)一更新。管理器還自帶,FTP,功能，能完成站點內(nèi)文件的上傳和下載，進行站點的發(fā)布和遠程管理。,制作一個瀏覽效果如下圖所示的簡單網(wǎng)頁。,2.2 制作第

7、一個簡單網(wǎng)頁,實現(xiàn)步驟如下：,首先啟動,Dreamweaver，,打開前面所建立的本地站點，接著在頁面中插入各種基本的網(wǎng)頁元素。,一、基本網(wǎng)頁元素（文字、圖像、水平線、日期和時間）的插入,1. 在頁面中添加和處理文字,(1,) 在頁面中輸入文字，操作步驟如下：, 在頁面編輯區(qū)中，按照頁面的設(shè)計內(nèi)容輸入文字，各段文本的末尾按回車鍵，如下圖所示；, 按,Ctrl+S,鍵保存網(wǎng)頁。第一次創(chuàng)建的網(wǎng)頁可以作為首頁,index.htm,文件保存，隨后該首頁將得到進一步的擴充和完善。,注意：書中所提到的“保存網(wǎng)頁”都是指,將網(wǎng)頁保存到本地站點下,。,(2) 將第一行“計算機工程系”作為網(wǎng)頁的標題文字，操作步

8、驟如下：, 選中“計算機工程系”，打開屬性面板，如下圖所示；, 在“格式”下拉選項中選擇最大標題“標題1” 以設(shè)置標題樣式；, 單擊 按鈕將字體變粗，單擊按鈕將文字居中顯示。,(3) 接著，設(shè)置中文字體。,在屬性面板上單擊字體按鈕 ，打開字體下拉列表，選擇想設(shè)置的字體。如果字體下拉列表中沒有想設(shè)置的字體，如何添加中文字體呢？操作如下：, 打開“編輯字體列表”對話框，執(zhí)行下列操作之一：,在屬性面板上單擊字體按鈕 ，打開字體下拉列表，選擇“編輯字體列表”選項，如下圖所示；,在菜單欄中選擇“文本”“字體”“編輯字體列表”命令。, 在“編輯字體列表”對話框（如下圖所示）中進行如下操作：, 在“編輯字體

9、列表”對話框中進行如下操作：,先在“字體列表”框中選定“在以下列表中添加字體”項；,在“可用字體”框中選擇一種字體（如隸書）；,單擊方向按鈕 ，選中的字體添加到“選擇的字體”框中，同時也出現(xiàn)在“字體列表”框中。,如果還要加入第二種字體，則單擊按鈕 ，再重復(fù)上面的3步即可。如果要刪除某種字體，則在“字體列表”框中選定該字體，單擊按鈕 。還可以單擊按鈕 ，將剛添加的字體上移，便于以后的使用。, 單擊“確定”按鈕。此時，屬性面板上的字體下拉列表中已經(jīng)添加了“隸書”等字體。,(4) 將第一段文本的顏色設(shè)置為紅色，將第三段文本的顏色設(shè)置為十六進制代碼#3333,CC,藍色，將后面文本的顏色設(shè)置為十六進制

10、代碼#,FF00FF,的淡紫色。操作步驟如下：, 首先選中第一段文本；, 單擊屬性面板上的字體顏色按鈕，在“顏色”調(diào)色板中用吸管吸取紅色即可，如下圖所示。,在網(wǎng)頁中，每種顏色都可用一個十六進制代碼表示。如果知道顏色的代碼，可直接在“顏色”文本框中輸入該顏色的十六進制代碼。, 用相同的方法設(shè)置下面文本的顏色。,(5) 將最后的5行文本組成一個項目列表，操作步驟如下：, 首先選中最后5行文本；, 打開屬性面板，單擊按鈕 ，則最后5行文字前便增加了圓點式的項目符號“”，如下圖所示。,(6) 如果要為選中的段落前加上1、2、3式的項目編號，則單擊 按鈕即可。同樣，項目符號的樣式是可以更改的，單擊屬性面

11、板上的“列表項目”按鈕進行相應(yīng)的設(shè)置。,(7) 同時，還可以讓“,Welcome”,文本從左到右動起來，操作步驟如下：, 首先選中“,Welcome”,文本；, 在屬性面板上單擊按鈕 ，打開快速標簽編輯器；, 在光標處直接輸入“,marquee”，,或稍等一會，在出現(xiàn)的下拉列表中選擇“,marquee”,選項，然后按回車鍵。此時，狀態(tài)欄上已多了一項加粗顯示的,。, 按,F12,鍵預(yù)覽網(wǎng)頁效果。,2. 在頁面中插入和處理圖像,(1) 將圖像插入到頁面中。操作步驟如下：, 在“學(xué)生專區(qū)”項目符號“”前按回車鍵，以確定插入圖像的位置在第三段和第四段之間；, 單擊插入面板中的 按鈕的子菜單“圖像”（或

12、者在菜單欄中選擇“插入記錄”“圖像”命令），彈出“選擇圖像源文件”對話框，如下圖所示；, 在查找范圍框中選定圖像文件所在的文件夾及文件，單擊“確定,”,按鈕。, 彈出“圖像標簽輔助功能屬性”對話框，填寫該圖像的“替換文本”及“詳細說明”內(nèi)容，單擊“確定”按鈕。,經(jīng)過上面的操作，圖像便插入到了當前的頁面中。按,F12,預(yù)覽網(wǎng)頁，可以看到當鼠標停留在圖像上時就會出現(xiàn)提示文字。這樣做的好處就是當瀏覽網(wǎng)頁時，即使圖像不能完全顯示出來，提示文字也能讓瀏覽者了解圖像的內(nèi)容或主題。但是，此時的圖像并沒有按照頁面設(shè)計的要求放置，因此需要調(diào)整圖像的對齊方式、周邊間距及圖像的大小等。,(2) 調(diào)整圖像的對齊方式。

13、關(guān)于圖像，在屬性面板上有兩種對齊方式：圖像在頁面中的對齊方式及圖像和周圍元素的對齊方式。, 調(diào)整圖像在頁面中的對齊方式,分別單擊 3個按鈕，可以看到圖像分別位于頁面的左邊、中間和右邊。再次單擊相應(yīng)對齊按鈕，圖像回到原來的位置上。此時單擊左對齊按鈕。, 調(diào)整圖像和周圍元素的對齊方式,單擊屬性面板上的“對齊”按鈕，在下拉列表選項中選擇“左對齊,”,。,(3) 調(diào)整圖像的周邊間距。操作步驟如下：, 選中圖像，打開屬性面板；, 在“垂直邊距”文本框中輸入10，設(shè)置垂直間距為10像素；, 在“水平邊距”文本框中輸入60，設(shè)置水平間距為60像素，按回車鍵。,可以看到圖像與上、下、左、右方的文字間隔都拉大了

14、，如下圖所示。如果刪除輸入框中的數(shù)值，則圖像又回到原來的位置。,(4) 調(diào)整圖像的大小。方法有兩種：, 直接拖拽圖像上的控點；, 在屬性面板的“高度”和“寬度”文本框中輸入相應(yīng)數(shù)值（單位是像素）。,如果不滿意調(diào)整圖像的大小，則可以單擊屬性面板上的“高度”和“寬度”標志，使圖像還原為原始大小。,3. 插入水平線,(1) 在頁面中插入水平線。操作步驟如下：, 在“,Welcome”,文本后單擊鼠標，以確定插入水平線的位置；, 在菜單欄中選擇“插入記錄”,|“HTML”,“水平線”命令，則,Dreamweaver,默認的水平線便插入到“,Welcome”,和第三段文字之間，如下圖所示。,(2)修改水

15、平線，將水平線居中對齊，且其寬度為瀏覽器窗口的80%，操作步驟如下：, 選中上面所插入的水平線；, 在水平線屬性面板的“寬度”文本框中輸入“80”，并選擇其單位為“%”，如下圖所示；, 在“對齊”下拉列表中選擇“居中”對齊方式。,注意：,在水平線的屬性面板上，其寬度的單位分為兩種：像素和%（百分比）。80%和80像素的區(qū)別在于：無論瀏覽器窗口怎么縮放，寬度設(shè)置為80像素的水平線都是80個像素點長；而寬度設(shè)置為80%的水平線將會自動調(diào)整長度，其寬度總是占瀏覽器窗口寬度的80%。,要插入垂直線，則選中水平線，將其高度設(shè)置為垂直線的高度（如：80像素），將寬度設(shè)置為垂直線的寬度（如：2像素）即可。,

16、(3),Dreamweaver,默認的水平線顏色為灰色，要將水平線的顏色設(shè)置為黃色，操作步驟如下：, 選中上面所插入的水平線；, 單擊水平線屬性面板的 按鈕，打開快速標簽編輯器；, 在標簽中插入屬性,color=“#FFFF00”,或,color=“yellow”,；, 按,F12,預(yù)覽，便可看到水平線是黃色。,. 插入日期和時間,在頁面中插入日期和時間，操作步驟如下：,(1) 確定所插入的日期和時間的位置；,(2) 單擊插入面板的日期按鈕 ，者在菜單欄中選擇“插入記錄”“日期”命令，打開“插入日期”對話框，如下圖所示；,(3) 在“插入日期”對話框中選擇星期、日期和時間格式，選中“儲存時自動

17、更新”項，然后單擊“確定”按鈕。在日期的屬性面板上單擊“編輯日期格式”按鈕可以重新修改日期格式。,二、網(wǎng)頁屬性（標題、背景、頁邊距等）的設(shè)置,執(zhí)行下列操作之一，打開“頁面屬性”對話框：,在菜單欄中選擇“修改”“頁面屬性”命令；,在“屬性”面板中單擊“頁面屬性”按鈕；,在網(wǎng)頁空白處單擊鼠標右鍵，在彈出的快捷菜單中選擇“頁面屬性”命令。,1. 在標題欄中增添網(wǎng)頁標題,在標題欄中增添網(wǎng)頁標題，操作步驟如下：,(1),在“頁面屬性”對話框的“分類”選項中選擇“標題,/,編碼”，在其選項卡的“標題”文本框中輸入“計算機工程系”；,(2),點擊“確定”按鈕。網(wǎng)頁標題“計算機工程系”便顯示在瀏覽器的標題欄上

18、，如下圖所示。此時，在瀏覽器窗口、歷史記錄和書簽列表中標識了頁面。,2. 增添網(wǎng)頁背景,網(wǎng)頁背景分為網(wǎng)頁背景顏色和背景圖像，其操作步驟如下：,在“頁面屬性”對話框的“分類”選項中選擇“外觀”，在其選項卡中單擊“背景顏色”按鈕，在“顏色”調(diào)色板中用吸管吸取想要的背景顏色即可。,在“外觀”選項卡中，單擊“背景圖像”文本框右邊的“瀏覽”按鈕，在“選擇圖像源文件”對話框中選擇喜歡的背景圖像，然后單擊“確定”按鈕即可。,3.調(diào)整網(wǎng)頁的邊距,在“頁面屬性”對話框中，“左邊界”和“頂部邊界”項用于設(shè)置,IE,瀏覽器的左邊距和上邊距；“邊界寬度”和“邊界高度”項用于設(shè)置,Netscape,瀏覽器的左邊距和上邊

19、距。,如果要去掉網(wǎng)頁的邊距，則在“外觀”選項卡的“左邊距”、“右邊距”、“上邊距”和“下邊距”文本框中都輸入“,0”,，如下圖所示。,一、創(chuàng)建超級鏈接,1. 創(chuàng)建內(nèi)部超級鏈接,創(chuàng)建,內(nèi)部超級鏈接,就是在同一個站點內(nèi)的不同頁面之間建立一定的相互關(guān)系。被鏈接的對象不僅可以是網(wǎng)頁，還可以是其他文檔（如：,Microsoft Office,文檔）或文件（如圖像、聲音、視頻文件等）。創(chuàng)建內(nèi)部超級鏈接，執(zhí)行下列操作之一：,(1) 選中“學(xué)生專區(qū)”，在屬性面板中單擊“鏈接”右邊的“瀏覽文件”按鈕 （如下圖所示），選中相應(yīng)的文件“,exa2-2.htm”,即可；,2.3 超文本和超圖像鏈接,(2) 選中“教師

20、專區(qū)”，在屬性面板中單擊“指向文件”按鈕，并直接拖拽鼠標，此時屏幕上會出現(xiàn)一條跟蹤直線（如下圖所示），移動鼠標到站點管理器中所要鏈接的目標文件“,exa2-3.htm”,上，當該文件被一個虛線框包圍時松開鼠標；,(3) 選中“系部專區(qū)”，在屬性面板上的“鏈接”文本框中直接輸入被鏈接的文件相對路徑及文件名（,exa2-5.htm）；,(4),選中“辦公自動化”，單擊右鍵，從快捷菜單中選擇“創(chuàng)建鏈接”，然后選擇一個要鏈接的文件（,exa2-6.htm）。,注意：,設(shè)置過的文本具有超級鏈接的特征：文字變藍，并帶有下劃線。并且在瀏覽器中當鼠標移到超級鏈接的地方將會變成手形，還在瀏覽器下方的狀態(tài)欄中顯示

21、鏈接路徑。,2. 創(chuàng)建外部超級鏈接,(1) 在頁面中輸入“友情鏈接”文本，選中其文本，在文本屬性面板上的“鏈接”文本框中直接輸入完整的網(wǎng)址（如：,http:/,）,即可。如果想在新的瀏覽器窗口中打開鏈接文件，只需在設(shè)置了超級鏈接之后，在屬性面板上的“目標”項中進行設(shè)置，選擇“_,blank”,即可。,(2) 要在頁面中創(chuàng)建,E-mail,鏈接，有兩種方法：, 選中“與我聯(lián)系”文本，然后在插入面板中單擊 按鈕或在菜單欄中選擇“插入記錄 ”“電子郵件鏈接”命令，打開 “電子郵件鏈接”對話框，在該對話框的“文本”文本框中已自動填寫了被選中的文本“與我聯(lián)系”，只需在“,E-mail”,文本框中輸入電子

22、郵件地址即可。, 選中“與我聯(lián)系”文本，然后在文本屬性面板上的“鏈接”文本框中直接輸入“,mailto:”,后加上電子郵件地址（如：,mailto:liFox,）,即可；,二、熱區(qū)和圖像,1. 熱區(qū),圖像映射圖是指在一張圖像上實現(xiàn)多個局部區(qū)域指向不同的網(wǎng)頁鏈接，而圖像上可點擊的區(qū)域被稱為熱區(qū)。,制作熱區(qū)：,新建一個網(wǎng)頁，在網(wǎng)頁中插入一個圖像；, 單擊圖像，此時屬性面板上顯示的是有關(guān)圖像的屬性。在該面板上有“地圖”一項，用它來制作熱區(qū)，在其文本框中可填寫熱區(qū)的名稱，如果不填，則,Dreamweaver,自動加上一個名字“,Map”。,繪制熱區(qū)的工具有：矩形工具、圓形工具和多邊形工具三種，根據(jù)想要

23、制作的熱區(qū)形狀來選擇使用的工具，如下圖所示。,(2) 為熱區(qū)添加文字說明及制作超級鏈接,熱區(qū)制作完后，接下來就是為每一個熱區(qū)添加文字說明及制作超級鏈接，操作步驟如下：,用鼠標選中某一個熱區(qū)；, 在熱區(qū)屬性面板上，除了 “地圖”外，還有“鏈接”、“替代”及“目標”3項，其用法與普通鏈接一樣。,同時，如果不滿意所制作的熱區(qū)，則可以進行修改，主要通過使用 來實現(xiàn)。若要刪除熱區(qū)，先選中熱區(qū)，然后直接按,Del,鍵即可。,2. 圖像,(1) 制作翻轉(zhuǎn)圖像：,當鼠標移到“圖像”上時，圖像就變成另一幅圖像；當單擊時，便鏈接到其他的網(wǎng)頁文件。操作步驟如下：,打開“,exa2-1.htm”,文件，將其另存為“,

24、exa2-3-1.htm”,文件；,在網(wǎng)頁中，刪除“學(xué)生專區(qū)”等所有的欄目文本；,要想打開“插入鼠標經(jīng)過圖像”對話框，執(zhí)行下列操作之一：,在菜單欄中選擇“插入記錄”“圖像對象”“鼠標經(jīng)過圖像”命令；,在插入面板上的“圖像” 列表中選擇“鼠標經(jīng)過圖像”選項 ，打開“插入鼠標經(jīng)過圖像”對話框，如圖,2-33,所示；,在對話框中，單擊“原始圖像”右邊的“瀏覽”按鈕，選取第一次加載該頁面時要顯示的圖像；然后，點擊“鼠標經(jīng)過圖像”右邊的“瀏覽”按鈕，選取當鼠標經(jīng)過原始圖像時要顯示的圖像；點擊“在按下時，前往的,URL”,右邊的“瀏覽”按鈕，選取點擊鼠標經(jīng)過圖像時將打開的網(wǎng)頁文件。,保存網(wǎng)頁，并且預(yù)覽網(wǎng)頁

25、效果。,(2) 制作導(dǎo)航條,導(dǎo)航條由一排縱向或橫向連接在一起的元件組成，每個元件由一組最多有四種狀態(tài)的圖像構(gòu)成，在不同的情況下元件顯現(xiàn)出不同的圖像。并且一個網(wǎng)頁里只能有一個導(dǎo)航條。其操作步驟如下：, 執(zhí)行下列方法之一，打開“插入導(dǎo)航條”對話框：,在菜單中選擇“插入記錄”“圖像對象”“導(dǎo)航條”命令；,在插入面板上的“圖像” 列表中選擇“導(dǎo)航條”選項 。,從“插入導(dǎo)航條”對話框中看到一個元件最多有下列4種狀態(tài)的圖像：,狀態(tài)圖像：又稱為初始圖像，指鼠標未移到元件上時所顯示的圖像。,鼠標經(jīng)過圖像：鼠標移到元件上時所顯示的圖像。,按下圖像：單擊元件后所顯示的圖像，表明所鏈接的網(wǎng)頁文件已訪問過。,按下時鼠

26、標經(jīng)過圖像：鼠標移到被點擊過的元件上時所顯示的圖像。,插入導(dǎo)航條對話框, 設(shè)置第一個元件的各個選項；, 單擊 按鈕，添加其他元件，再重復(fù)、步驟進行相應(yīng)的設(shè)置。, 單擊“確定”按鈕，完成導(dǎo)航條的制作。,Flash,是一種用于制作和編輯動畫和電影的軟件，用它可以制作出一種擴展名為,.,swf,的動畫文件，這種文件可以插入,HTML,，,也可以單獨生成網(wǎng)頁。,一、,Flash,的幾個重要概念,1,Flash,動畫的格式,在掌握使用,Flash,動畫之前，有必要先來了解一下,Flash,動畫的幾種格式。,2.4 網(wǎng)頁制作中的,Flash,動畫,(1),Flash,源文件格式：,Flash,源文件格式的

27、擴展名為.,fla,，,這種類型的文件只能在,Flash,應(yīng)用程序中被打開，在,Dreamweaver,或瀏覽器中都是無法打開的。用戶可以在,Flash,應(yīng)用程序中打開該文件，然后導(dǎo)出擴展名為.,swf,或.,swt,的文件，以便在瀏覽器中使用。,(2),Flash,電影文件格式：,Flash,電影文件格式的擴展名為.,swf,。,它是,Flash,源文件的壓縮版本，已經(jīng)為通過網(wǎng)絡(luò)查看而進行了優(yōu)化。因此，這種類型的文件可以在瀏覽器中播放，也可以在,Dreamweaver,中預(yù)覽，但是卻無法在,Flash,應(yīng)用程序中進行編輯。在,Dreamweaver,中允許用戶直接插入,Flash,動畫對象，

28、該對象的擴展名就是.,swf,。,2矢量圖和位圖,矢量圖是以一組指令的形式存在的，這些指令用來描述一幅圖像中所包含顏色和位置屬性的直線或曲線公式，因而矢量圖形的文件體積十分小。對于矢量圖形來說，其形狀是由曲線通過的點來描述的，而它的顏色則由曲線的顏色和曲線所包圍區(qū)域的顏色確定，與曲線內(nèi)單獨的點無關(guān)。,位圖的顯示方式是用像素來表示圖像的形狀和色彩，有多大的圖像就要用多大的像素來填充。因此，位圖的文件所占的體積比較大。常用的位圖文件格式為,bmp、gif、jpg,等。,3舞臺和工作區(qū),舞臺（,Stage）,是繪制圖形、編輯圖形、圖像的矩形區(qū)域，也是創(chuàng)建電影動畫的區(qū)域。用戶在制作動畫的過程中，放置在

29、舞臺中的內(nèi)容將體現(xiàn)在最終的動畫效果中。其默認顏色是白色。,工作區(qū)（,Work Area）,則環(huán)繞于舞臺的四周，其默認顏色為灰色。它在實際動畫制作過程中非常有用，制作者可以先將暫不參與動畫內(nèi)容放置在工作區(qū)內(nèi)，這并不影響舞臺內(nèi)動畫內(nèi)容的播放。當需要播放工作區(qū)內(nèi)的動畫時，只要將其移動到舞臺中即可。,4幀和時間線,“幀”是組成動畫的最基本單位，即圖像在某一時間點上的定格。幀又分為關(guān)鍵幀（,Keyframe,）,和普通幀（,Frame）,兩種。,(1) 關(guān)鍵幀：,在,Flash,中，一般的動畫都是依靠關(guān)鍵幀來實現(xiàn)的。用戶只需給出一個對象的幾個關(guān)鍵動作，生成關(guān)鍵幀，系統(tǒng)就會根據(jù)需要在各個關(guān)鍵幀之間自動生成

30、中間幀，來實現(xiàn)關(guān)鍵幀之間變化的動畫。,(2) 普通幀：,除了關(guān)鍵幀外，所有出現(xiàn)在時間軸中的幀都是普通幀。在,Flash,中，普通幀一般用來代表中間的畫面，也就是在兩個關(guān)鍵幀之間的幀。這些幀用來表示漸變的過程，并且由于是程序自動生成，所以無法編輯。,時間線（,Timeline）,是,Flash,中最重要的工具之一。用它可以查看每一幀的情況，調(diào)整動畫播放的速度，安排幀的內(nèi)容，改變幀與幀之間的關(guān)系，從而實現(xiàn)不同效果的動畫。,5符號和實例,符號（,Symbol）,是指一種可以重復(fù)使用的圖形、動畫、按鈕或聲音資源，存放在符號庫中。使用的時候?qū)⒎枏姆枎熘型献У轿枧_工作區(qū)中，就得到了符號的一個實例（,I

31、nstance）。,可以把符號想象成一個源文件，它的實例是它在不同地方的復(fù)制。,二、運動和形狀漸變動畫,1運動漸變動畫,運動漸變動畫（,Motion,Tweening,）,可以使對象產(chǎn)生移動、旋轉(zhuǎn)、縮放、變化速度等動畫效果。它的作用對象是實例、群組對象、文字對象、位圖對象等，不能作用于矢量圖形對象，但可以將矢量圖形轉(zhuǎn)換成符號的實例。,下面，制作內(nèi)部填充部分播放電影效果的文字，使文字的填充部分產(chǎn)生不斷的效果,。,實現(xiàn)步驟如下：,(1) 選擇菜單“文件”|“新建”，創(chuàng)建一個新文檔。,Flash,文檔的屬性面板,(2) 在屬性面板（如上圖所示）上選擇“大小”按鈕，彈出文檔屬性設(shè)置對話框，設(shè)置工作區(qū)寬

32、度為320,px,，,高度為90,px,，,設(shè)置完畢，點擊,OK,按鈕。,文檔屬性對話框,(3) 點擊工具欄中“文本工具”按鈕 ，將文本屬性面板中字體類型設(shè)置成“隸書”，字體大小為30，粗體顯示，如下圖所示。然后在工作區(qū)域中單擊鼠標，在出現(xiàn)的黑框中輸入文字“計算機工程系”。,文本屬性面板,(4) 選擇工具欄中的 箭頭工具，將文字選中并把它移動到工作區(qū)中間，如下圖所示。,文本已移動到工作區(qū)中間,(5) 單擊等時線窗口下方的 按鈕，增加一個新圖層,Layer2，,如下圖所示。,增加圖像圖層,(6) 選擇菜單“文件”|“導(dǎo)入”|“導(dǎo)入到舞臺”，彈出導(dǎo)入文件對話框，從對話框中選擇用于填充文字的圖片名稱

33、，然后單擊打開按鈕，在工作區(qū)中即調(diào)入所選圖片。,(7) 選擇菜單“修改”|“轉(zhuǎn)換為元件”，在彈出的對話框（下圖）中輸入名稱“計算機工程系”，點擊確定。這時，將發(fā)現(xiàn)這張圖已經(jīng)轉(zhuǎn)化成一個元件計算機工程系了。,(8) 用鼠標左鍵按住圖層1并把它拖到圖層2上方放開，這時將看到圖層1已經(jīng)位于圖層2上方了。,(9) 選中圖層1的第30幀，點擊鼠標右鍵，在彈出的菜單中選擇“插入幀”項。,將“,exa2-1.jpg”,轉(zhuǎn)換為圖形,(10) 選擇工具欄中的箭頭工具 ，把元件“計算機工程系”拖動到元件的左端，如左下圖所示。然后選中該層的第30幀，用鼠標右鍵單擊該幀，在彈出的菜單中選擇“插入關(guān)鍵幀”， 即在第30幀

34、處插入一個關(guān)鍵幀，把該幀的圖像拖動到元件的右端，如圖右下所示。,在第1幀時設(shè)置圖像的位置,在第30幀時設(shè)置圖像的位置,(11) 選中圖層2的第一幀，點擊鼠標右鍵，在彈出的菜單中選擇“創(chuàng)建補空動畫”。這表示元件“計算機工程系”將從第1幀的位置移動到第30幀的位置。,(12) 用鼠標右鍵單擊,Layer1,層，在彈出的菜單中選擇“遮罩層”項，這時圖層1將變成蒙板層，并對圖層2產(chǎn)生蒙板作用，如下圖所示。,時間幀及圖層的設(shè)置,(13) 選擇菜單“控制”|“播放”，打開播放器窗口，可以看到文字“計算機工程系”產(chǎn)生循環(huán)播放電影的效果。,2形狀漸變動畫（略）,形狀漸變動畫就是由一種對象逐漸變?yōu)榱硗庖环N對象，

35、可以使對象完成變形、移動、縮放及色彩變化等動畫效果。它的作用對象只能是矢量圖形。除非把其他對象打碎成矢量圖形。,利用形狀漸變動畫實現(xiàn)從一個圖形到另一個圖形之間從色彩到形狀的過渡變化。,三、制作層動畫（略）,圖層的作用不僅只是在繪制圖形時可以不影響其他對象，而且通過圖層，可以創(chuàng)建出一些令人驚奇的動畫效果。例如：可以使用遮罩圖層來創(chuàng)建如電影文字、圖像文字、探照燈、淡入淡出或顏色轉(zhuǎn)變的效果，也可以能過在運動導(dǎo)向圖層中創(chuàng)建一些不規(guī)則曲線，使符號沿此曲線而產(chǎn)生運動。,一、 表格,在,Dreamweaver,中對表格的操作方法與,Word,中非常類似，只是在,Dreamweaver,中，表格還有更重要的作

36、用頁面布局。使用表格可以進行頁面的設(shè)計和排版，控制文本和圖像在頁面上的位置，另外使用表格能使頁面看起來更加直觀和有條理。,2.5 利用表格和框架制作網(wǎng)頁,設(shè)計一個頁面布局簡單示意圖:,Web,頁可用兩個表格精確地確定文本和圖象的位置。,一個表格嵌套在另一個表格中,外部表格：定義頁面的整體結(jié)構(gòu)和布局。,內(nèi)部表格：描述正文文本與其他內(nèi)容的,排列方式。,創(chuàng)建基于表格的網(wǎng)頁可以依次按照下述步驟進行：,1在頁面中創(chuàng)建表格,操作步驟如下：,(1) 把光標定位在頁面的左上角（起始處）。,(2) 執(zhí)行以下操作之一，打開“插入表格”對話框，如下圖所示。, 在菜單欄中選擇“插入記錄 ”|“表格”命令。, 在屬性面

37、板上單擊 按鈕。,2在表格中插入頁面元素,利用前面所學(xué)知識，直接在相應(yīng)的表格中輸入內(nèi)容；單元格中的頁面元素可以文本、圖像甚至表格，還可以給文本和圖像添加超級鏈接。在單元格中插入表格稱為表格嵌套。,3設(shè)置表格屬性,無論對表格操作還是對單元格操作，都必須先選中再操作才可生效。這里先來認識單元格屬性面板。當光標定位在單元格中或是選中單元格時，屬性面板即為單元格的屬性面板，如圖2-48所示。單元格屬性面板的上半部是文本的屬性面板，可以用來設(shè)置單元格中文本的字體、字號、顏色等屬性。,單元格屬性面板的下半部是高級屬性設(shè)置選項:,（1） 合并單元格：當在表格中選擇了個以上的單元格時，該按鈕才起作用。,（2）

38、 拆分單元格：當在表格中選擇了個以上的單元格時，該按鈕才起作用。,單位格屬性面板:,（3）水平：在該下拉列表中選擇單元格內(nèi)容的水平對齊方式，如左下圖所示。,（4）垂直：在該下拉列表中選擇單元格內(nèi)容的垂直對齊方式，如右下圖所示。,（5）高：單元格的高度。,（6）寬：單元格的寬度。,（7）不換行：不勾選，文本將自動換行；,勾選，則當文本的長度超過單元格的,寬度時，文本將繼續(xù)向前，單元格的,寬度會隨之調(diào)整。,（8）標題：單元格中的文本會變粗并向中間移動。,（9）背景（上）：單元格的背景圖像。,（10）背景（下）：單元格的背景顏色。,（11）邊框：單元格的邊框線顏色。,表格屬性面板上各選項的含義：,當

39、選中表格時，屬性面板為表格的屬性面板,表格屬性面板的上半部是最基本的表格屬性，大部分與插入表格時的設(shè)置內(nèi)容相同，只是多了設(shè)置表格的命名、高度和表格的對齊方式。,（1）表格,Id：,給表格命名。,（2）行：設(shè)置表格的行數(shù)。,（3）列：設(shè)置表格的列數(shù)。,（4）寬：設(shè)置表格的寬度。,（5）高：設(shè)置表格的高度。,（6）填充：設(shè)置單元格空白。,（7）間距：設(shè)置單元格間距。,（8）對齊：設(shè)置對齊方式。,（9）邊框：設(shè)置表格的邊框線。,表格屬性的下半部是高級屬性：,（10） 清除各行的高度。,（11） 清除各列的寬度。,（12） 將當前表格的寬度尺寸從百分比轉(zhuǎn)換到相應(yīng)的像素值。,（13） 將當前表格的寬度尺

40、寸從像素值轉(zhuǎn)換到相應(yīng)的百分比。,（14）背景顏色：背景顏色,（15）背景圖像：背景圖像,（16）邊框顏色：表格邊框的顏色,二、框架,框架結(jié)構(gòu)也稱為多窗口頁面(,Frames)，,窗口也可以稱為幀（,Frame），,是設(shè)計網(wǎng)頁時非常有用的工具。它可以把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁，從而使用戶能夠一次瀏覽更多的內(nèi)容。,一個典型的框架結(jié)構(gòu)頁面,瀏覽網(wǎng)頁時，單擊左邊的某個鏈接，則對應(yīng)的鏈接內(nèi)容便顯示在右邊，而上邊的網(wǎng)站標志和左邊的導(dǎo)航欄目內(nèi)容仍然留在屏幕上；,當單擊“搜狐”時，將打開一個新的窗口顯示該網(wǎng)站的主頁。,該實例實質(zhì)上是一個應(yīng)用了頂部和左側(cè)嵌套的框架結(jié)構(gòu)的網(wǎng)頁。這

41、種框架結(jié)構(gòu)的頁面被分成了3個區(qū)域，每一個區(qū)域都是一個框架，而這些框架的集合稱為,框架集,（,Frameset）。,同時，每個框架都包含一個網(wǎng)頁，但卻用到了4個網(wǎng)頁，即3個,Frame,網(wǎng)頁（分別為,topFrame、leftFrame、mainFrame,）,和1個包含框架數(shù)、框架的大小、載入框架等信息的,Frameset,網(wǎng)頁,。,創(chuàng)建基于框架的網(wǎng)頁可以依次按照下述步驟進行：,1在頁面中創(chuàng)建框架集和框架，并對頁面布局進行適當?shù)恼{(diào)整,插入一個“頂部和嵌套的左側(cè)框架”的框架集，操作步驟如下：,（1）在菜單欄中選擇“插入記錄 ”,|“HTML”|“,框架”,|“,頂部和嵌套的左側(cè)框架”命令 。,（

42、2）在插入面板上的“布局”選項卡中選擇“框架”下拉列表，單擊按鈕 。,2輸入框架頁面內(nèi)容,利用前面所學(xué)知識，直接在相應(yīng)的框架中輸入內(nèi)容；或?qū)⒖蚣苤械木W(wǎng)頁文件事先編輯好，然后在框架中導(dǎo)入。,3保存框架集文件和框架文件,保存的方法通常有兩種：,同時保存框架集中的所有網(wǎng)頁文件。在菜單欄中選擇“文件”|“保存全部”命令。,分別保存框架集中的網(wǎng)頁和各個框架中的網(wǎng)頁文件。,（1）保存框架集網(wǎng)頁文件，操作步驟如下：, 選中整個框架集；, 在菜單欄中選擇“文件”|“保存框架頁”命令。,單獨保存框架集網(wǎng)頁文件,（2）保存單個框架網(wǎng)頁文件的操作步驟如下：, 將光標定位在要保存網(wǎng)頁文件的框架內(nèi)，或在框架面板上單擊網(wǎng)

43、頁所在的框架；, 在菜單欄中選擇“文件”|“保存框架”命令 。,保存框架網(wǎng)頁文件,4設(shè)置框架中的鏈接目標,接下來，為左邊框架中的各個導(dǎo)航欄建立一個可鏈接到右邊框架中的超級鏈接。,例如：當單擊“學(xué)生專區(qū)”時，在窗口的右邊（即在,mainFrame,框架中）顯示對應(yīng)的鏈接內(nèi)容，操作步驟如下：,（1）選中文本“學(xué)生專區(qū)”，打開文本的屬性面板。,（2）在屬性面板上單擊 按鈕，以選取要鏈接的文件,exa2-3.htm。,（3）,在屬性面板上單擊“目標”的下拉列表，點選“,mainFrame,”,這個框架名稱，以便告訴瀏覽器在,mainFrame,框架中打開被鏈接的網(wǎng)頁文件。,選擇不同的框架名稱，鏈接文件

44、將在不同的框架中打開：, 選擇“,mainFrame,”，,在窗口的右邊，,mainFrame,框架中顯示所鏈接的文件內(nèi)容；, 選擇“,leftFrame,”，,在窗口的左邊，,leftFrame,框架中顯示所鏈接的文件內(nèi)容；, 選擇“,topFrame,”，,在窗口的上邊，,topFrame,框架中顯示所鏈接的文件內(nèi)容。,（4）保存框架網(wǎng)頁，瀏覽頁面。,（5）重復(fù)以上步驟為其他導(dǎo)航欄指定相應(yīng)的超級鏈接目標。,Dreamweaver,中提供了4個默認的框架名稱。利用這些選項可以將鏈接的網(wǎng)頁在新的窗口或其他的框架中打開。,“目標”下拉列表中的“_,blank”、“_parent”、“_self”、“_top”,選項是保留關(guān)鍵字，已被定義。,其含義如下：,(1) _,blank（,空白窗口）：在另一個新的窗口中顯示鏈接內(nèi)容，這樣可以保留現(xiàn)有的窗口文檔內(nèi)容；,(2) _,parent（,父窗口）：在上一層的框架集中顯示鏈接內(nèi)容（該選項只有在框架集中還包含另一個框架集的情況下，才能產(chǎn)生效果）；,(3) _,self（,當前窗口）：在本身所在的框架中顯示鏈接內(nèi)容，這樣會覆蓋當前框架中的所有內(nèi)容。該目標是默認值；,(4) _,top（,最高）：在整個瀏覽器窗口中顯示鏈接內(nèi)容，這樣會覆蓋當前框架中所有內(nèi)容。,