1、網(wǎng)頁設(shè)計(jì)與制作第三版項(xiàng)目三利用Dreamweaver CS6制作網(wǎng)頁認(rèn)識Dreamweaver CS61制作簡單頁面2利用表格工具制作網(wǎng)頁3利用AP DIV和Spry制作網(wǎng)頁4項(xiàng)目三利用Dreamweaver CS6制作網(wǎng)頁基于行為與Spry特效制作網(wǎng)頁7利用框架技術(shù)制作網(wǎng)頁5使用CSS修飾和美化網(wǎng)頁6使用模板快速制作網(wǎng)頁8任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面Dreamweaver CS6的起始頁任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面Dreamweaver CS6的標(biāo)準(zhǔn)工作界面任務(wù)1認(rèn)識Dre

2、amweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(一)菜單欄菜單欄文件:管理文件，例如，新建、打開、保存、另存為、導(dǎo)人、導(dǎo)出及打印。編輯:編輯文本，例如，剪切、復(fù)制、粘貼、查找、替換和參數(shù)設(shè)置。查看:切換視圖模式以及顯示、隱藏標(biāo)尺、網(wǎng)格線等輔助視圖功能。插入:插入各種元素，例如，圖片、多媒體組件、表格、框架及超級鏈接。修改:修改頁面元素，例如，在表格中再插人表格及拆分、合并單元格。格式:對文本進(jìn)行操作，例如，設(shè)置文本格式。命令:所有的附加命令項(xiàng)。站點(diǎn):創(chuàng)建和管理站點(diǎn)。窗口:顯示和隱藏控制面板以及切換文檔窗口。幫助:聯(lián)機(jī)幫助功能。例如，按下Fl鍵，就會打開電子幫助文本。任

3、務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(二)面板組面板組“插入”面板組任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(四)標(biāo)準(zhǔn)工具欄標(biāo)準(zhǔn)下具欄標(biāo)準(zhǔn)工具欄包含執(zhí)行“文件”和“編輯”菜單中常見操作的按鈕:如新建、打開、在Bridge中瀏覽、保存、全部保存、打印代碼、剪切、復(fù)制、粘貼、撤銷和重做，如圖所示。任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(五)樣式呈現(xiàn)工具欄“樣式呈現(xiàn)”工具欄（默認(rèn)情況下處于隱藏狀態(tài)）包含一些按鈕，如果使用依賴于媒體的樣式表，則這些按鈕可幫

4、助您查看設(shè)計(jì)在不同媒體類型中的呈現(xiàn)方式。它還包含一個(gè)允許您啟用或禁用 CSS 樣式的按鈕。若要顯示該工具欄，請選擇“查看”“工具欄”“樣式呈現(xiàn)”。樣式呈現(xiàn)工具欄任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(六)文檔窗口當(dāng)打開或創(chuàng)建一個(gè)項(xiàng)目，進(jìn)人文檔窗口時(shí)，可以在文檔區(qū)域中進(jìn)行文字輸人、表格插人和圖片編輯等操作。文檔窗口顯示當(dāng)前文檔，可以選擇以下任一視圖。任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(七)狀態(tài)欄文檔窗口底部的狀態(tài)欄提供與正創(chuàng)建的文檔有關(guān)的其他信息。狀態(tài)欄任務(wù)1認(rèn)識Dreamweaver CS6

5、一、認(rèn)識Dreamweaver CS6的工具界面(八)“屬性”面板 “屬性”面板可以檢查和編輯當(dāng)前選定頁面元素(如文本和插人的對象)的最常用屬性。“屬性”面板的內(nèi)容根據(jù)選定的元素的不同會有所不同。“屬性”面板任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(九)“文件”面板使用“文件”面板可以查看和管理Dreamweaver站點(diǎn)中的文件，如圖所示。文件面板任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(十) CSS樣式”面板 使用“CSS樣式”面板可以跟蹤影響當(dāng)前所選頁面元素的CSS規(guī)則和屬性或影響整個(gè)文檔的規(guī)則

6、和屬性(“全部”模式)。使用“CSS樣式”面板頂部的切換按鈕可以在“全部”和“當(dāng)前”兩種模式之間切換，還可以在“全部”和“當(dāng)前”兩種模式下修改CSS屬性，如圖所示。CSS樣式”面板任務(wù)1認(rèn)識Dreamweaver CS6一、認(rèn)識Dreamweaver CS6的工具界面(十一)可視化輔助線Dreamweaver提供了幾種可視化輔助線，幫助用戶設(shè)計(jì)文檔和大概估計(jì)文檔在瀏覽器中的外觀。用戶可以執(zhí)行以下任一操作: (1)將文檔窗口與所需的窗口對齊，查看元素如何更好地適合頁面。 (2)用跟蹤圖像作為頁面背景，可幫助用戶復(fù)制在插圖或圖像編輯應(yīng)用程序(如Adobe Photoshop或Adobe Firew

7、orks)中創(chuàng)建的設(shè)計(jì)。 (3)用標(biāo)尺和輔助線為精確定位和調(diào)整頁面元素提供可視的提示。 (4)使用網(wǎng)格標(biāo)記可以精確定位絕對定位元素(AP元素)以及調(diào)整其大小。任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(一)自適應(yīng)流體網(wǎng)格布局創(chuàng)建自適應(yīng)流體網(wǎng)格布局頁面任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(二)“多屏預(yù)覽”面板“多屏預(yù)覽”面板任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(三)CSS過渡效果任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS

8、6的新功能(四)增強(qiáng)型j Query移動框架支持創(chuàng)建針對手機(jī)的文件任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(四)增強(qiáng)型j Query移動框架支持應(yīng)用“jQuery Mobile色板”面板 任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(五)改善的FTP性能改善的站點(diǎn)管理任務(wù)1認(rèn)識Dreamweaver CS6二、體驗(yàn)Dreamweaver CS6的新功能(六)更新的實(shí)時(shí)視圖通過實(shí)時(shí)視圖測試后的網(wǎng)頁任務(wù)2制作簡單頁面一、新建站點(diǎn)(一)設(shè)置站點(diǎn)的本地信息設(shè)置站點(diǎn)的本地信息任務(wù)2制作簡單頁面一、新建站點(diǎn)(二)設(shè)置遠(yuǎn)

9、程服務(wù)器的連接方式選擇“站點(diǎn)”“新建站點(diǎn)”命令，在彈出的對話框中選擇“服務(wù)器”選項(xiàng)，在“基本”選項(xiàng)卡中選擇“連接方法”為“FTP”，然后分別設(shè)置網(wǎng)站的“FTP地址”“用戶名”和“密碼”等信息，如圖所示。任務(wù)2制作簡單頁面一、新建站點(diǎn)(三)完成站點(diǎn)建立站點(diǎn)設(shè)置完成后，可以看到“文件”面板中列出了站點(diǎn)中的文件，如圖3-2 2所示。如果“文件”面板沒有顯示，可以執(zhí)行“窗口”“文件”命令查看(快捷鍵為F8)。站點(diǎn)文件夾任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空白網(wǎng)頁(1)在菜單欄中執(zhí)行“文件”一“新建”命令，彈出“新建文檔”對話框，如圖所示?！靶陆ㄎ臋n”對話框任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空

10、白網(wǎng)頁 (2)在“空白頁”選項(xiàng)卡中選擇頁面類型為“HTML，以及布局為“無”，單擊“創(chuàng)建”按鈕，創(chuàng)建一個(gè)新的可編輯的網(wǎng)頁，在“標(biāo)題”文本框中輸人“南通羅德紡織品有限公司”，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(一)創(chuàng)建空白網(wǎng)頁 (3)在文檔窗口中輸人相應(yīng)代碼后，選擇“文件”“保存”命令，將網(wǎng)頁保存在站點(diǎn)中，文件命名為index. Html。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性 (1)在菜單欄執(zhí)行“修改”一“頁面屬性”命令，彈出“頁面屬性”對話框，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性 (2)設(shè)置網(wǎng)頁外觀。一般情況下，設(shè)置字體大小為12像素，文本顏色、背景顏色

11、和背景圖像可自行設(shè)定。同時(shí)設(shè)置網(wǎng)頁四邊的邊距，一般只設(shè)置上邊距為0像素，如圖所示。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(二)設(shè)置頁面屬性(3)選擇背景圖像。單擊“瀏覽”按鈕，在彈出的“選擇圖像源文件”對話框中選擇背景圖片為201.jpg，然后單擊“確定”按鈕返回。任務(wù)2制作簡單頁面二、新建網(wǎng)頁(三)預(yù)覽網(wǎng)頁 在菜單欄中執(zhí)行“文件”“在瀏覽器中預(yù)覽”“Internet Explorer”命令或單擊工具欄中 按鈕即可打開IE瀏覽器，預(yù)覽網(wǎng)頁。網(wǎng)頁預(yù)覽效果如圖所示。任務(wù)2制作簡單頁面三、添加文本(一)添加文本(1)直接輸入文本。(2)從其他文檔復(fù)制并粘貼。粘貼文字到空白文檔任務(wù)2制作簡單頁面三、添加文本(

12、二)設(shè)置文字格式(1)用鼠標(biāo)選擇文檔窗口中第一行的“企業(yè)介紹”四個(gè)字，在“屬性”面板的“HTML中選擇“格式”為“標(biāo)題2，如圖所示。字體屬性設(shè)置任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式(2)在“屬性”面板的“CSS中設(shè)置對齊方式為居中對齊(單擊圖標(biāo))，彈出如圖所示的“新建CSS規(guī)則”對話框?！靶陆–SS規(guī)則”對話框任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式(3)建立自定義類“. t1，然后設(shè)置字體顏色為“# FF0000，結(jié)果如圖3-30所示。文字格式設(shè)置完成任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式 (4)設(shè)置第一段文字為“楷體、14號、紅色、斜體”，第二段文字為“黑體、

13、18號、藍(lán)色、居中對齊、粗體”。用鼠標(biāo)選擇第一段文字，在CSS“屬性”面板中選擇14號字體，隨即彈出“新建CSS規(guī)則”對話框，定義自定義類“. t2，如圖所示，完成后單擊“確定”按鈕。定義自定義類“. t2任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式編輯字體列表。Dreamweaver CS6預(yù)設(shè)的可供選擇的只有13項(xiàng)英文字體，要想使用其他字體，需編輯字體列表。編輯字體列表任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式 分別設(shè)置第一段文字和第二段文字的字體。選中對應(yīng)文字，從CSS“屬性”面板中的“字體”下拉列表中分別選擇“楷體”“黑體”。設(shè)置字體大小。從CSS屬性”面板中的“大小”下拉列

14、表中分別選擇14號和18號字體。字號數(shù)字從小到大，對應(yīng)的字也逐漸增大。設(shè)置文字顏色。單擊CSS屬性”面板中的顴按鈕，在彈出的顏色列表中選擇所需要的顏色，即紅色和藍(lán)色。設(shè)置字符樣式。單擊CSS屬性”面板中的樹或俐按鈕，將選定文本設(shè)置為粗體或斜體，如圖所示。設(shè)置字符樣式任務(wù)2制作簡單頁面三、添加文本(二)設(shè)置文字格式各項(xiàng)設(shè)置完成后，預(yù)覽網(wǎng)頁，如圖所示。預(yù)覽字體設(shè)置效果任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置換行文本空格插入特殊字符插人水平線插人項(xiàng)目列表插人文件頭標(biāo)簽任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置首選參數(shù)設(shè)置任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置插人特殊字符

15、任務(wù)2制作簡單頁面三、添加文本(三)文字的其他設(shè)置水平線屬性設(shè)置列表屬性設(shè)置文件頭內(nèi)容任務(wù)2制作簡單頁面四、添加圖像目前互聯(lián)網(wǎng)上支持的圖像格式主要有GIF, JPEG和PNG三種，其中使用最為廣泛的是GIF和JPEG。在制作網(wǎng)頁時(shí)，要先構(gòu)想好網(wǎng)頁布局，在圖像處理軟件中將需要插入的圖片進(jìn)行處理，然后存放在站點(diǎn)根目錄下的文件夾中。任務(wù)2制作簡單頁面四、添加圖像(一)在“公司介紹”四個(gè)字符下面添加企業(yè)圖片任務(wù)2制作簡單頁面四、添加圖像(二)選擇圖像路徑任務(wù)2制作簡單頁面四、添加圖像 注意:如果要插入的圖片不在根文件夾中，會彈出如圖所示的對話框，提醒用戶將該圖片保存到根文件夾中，一般情況下都單擊“是”

16、按鈕，然后將該圖片保存到根文件夾中。任務(wù)2制作簡單頁面四、添加圖像(三)設(shè)置圖像屬性圖像的屬性任務(wù)2制作簡單頁面四、添加圖像(四)在Dreamweaver中編輯圖像Dreamweaver提供了基本的圖像編輯功能，可以在Dreamweaver中重新取樣、裁剪、優(yōu)化和銳化圖像，還可以調(diào)整圖像的亮度和對比度。Dreamweaver的圖像編輯工具旨在使網(wǎng)頁設(shè)計(jì)者能與內(nèi)容設(shè)計(jì)者(負(fù)責(zé)創(chuàng)建網(wǎng)站中使用的圖像文件)輕松地實(shí)現(xiàn)協(xié)作。任務(wù)2制作簡單頁面四、添加圖像(五)插入其他圖像元素1.插入圖像占位符任務(wù)2制作簡單頁面四、添加圖像(五)插入其他圖像元素2.鼠標(biāo)經(jīng)過圖像任務(wù)2制作簡單頁面五、添加鏈接鏈接是一個(gè)網(wǎng)站

17、的靈魂，一個(gè)網(wǎng)站是由多個(gè)頁面組成的，而這些頁面之間依據(jù)鏈接確定相互之間的導(dǎo)航關(guān)系。超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)與Web之間的連接關(guān)系，它可以使站點(diǎn)內(nèi)的所有網(wǎng)頁成為有機(jī)的整體，還能夠使不同站點(diǎn)之間建立聯(lián)系。超級鏈接由兩部分組成:鏈接載體和鏈接目標(biāo)。任務(wù)2制作簡單頁面五、添加鏈接(一)關(guān)于鏈接路徑根路徑相對路徑絕對路徑任務(wù)2制作簡單頁面五、添加鏈接(二)創(chuàng)建外部鏈接1.直接輸入地址鏈接屬性設(shè)置任務(wù)2制作簡單頁面五、添加鏈接(三)創(chuàng)建內(nèi)部鏈接創(chuàng)建內(nèi)部鏈接任務(wù)2制作簡單頁面五、添加鏈接(四)創(chuàng)建E-mail鏈接創(chuàng)建E-mail鏈接手動輸人電子郵件地址任務(wù)2制作簡單頁面五、添加鏈接(五)創(chuàng)建錨記

18、鏈接插人命名錨記插人命名錨記后的網(wǎng)頁任務(wù)2制作簡單頁面五、添加鏈接(五)創(chuàng)建錨記鏈接創(chuàng)建錨記鏈接任務(wù)2制作簡單頁面五、添加鏈接(六)制作圖像映射圖片的“屬性”面板熱點(diǎn)鏈接任務(wù)2制作簡單頁面六、添加多媒體插入Flash插入FLV視頻添加背景音樂插入視頻任務(wù)3利用表格工具制作網(wǎng)頁一、設(shè)計(jì)表格結(jié)構(gòu)羅德紡織品有限公司網(wǎng)站首頁任務(wù)3利用表格工具制作網(wǎng)頁二、添加表格表格屬性設(shè)置任務(wù)3利用表格工具制作網(wǎng)頁二、添加表格表格的邊距和間距任務(wù)3利用表格工具制作網(wǎng)頁三、設(shè)置表格屬性設(shè)置表格屬性填充:用來設(shè)置單元格邊距。間距:用來設(shè)置單元格間距。對齊:用來設(shè)置表格的對齊方式，默認(rèn)的對齊方式為左對齊。邊框:用來設(shè)置表格

19、邊框的寬度。任務(wù)3利用表格工具制作網(wǎng)頁四、設(shè)置單元格屬性設(shè)置單元格屬性水平:用來設(shè)置單元格內(nèi)元素的水平排版方式，可以是居左、居右或居中。垂直:用來設(shè)置單元格內(nèi)元素的垂直排版方式，可以是頂端對齊、底端對齊或居中對齊。高、寬:用來設(shè)置單元格的寬度和高度。不換行:勾選該選項(xiàng)防止單元格中較長的文本自動換行。標(biāo)題:使選擇的單元格成為標(biāo)題單元格，單元格內(nèi)的文字自動以標(biāo)題格式顯示出來。背景顏色:用來設(shè)置表格的背景顏色。任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列修改表格任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列“插入列或行”對話框任務(wù)3利用表格工具制作網(wǎng)頁六、插入嵌套表格并設(shè)計(jì)網(wǎng)頁元素(1)在第一行的

20、左邊單元格中插人一個(gè)公司標(biāo)記的Flash文件，將top.jpg設(shè)置為右邊單元格的背景圖片。(2)在第二行的單元格中嵌套插人一個(gè)新的一行兩列的表格，并進(jìn)行相應(yīng)設(shè)置，作為網(wǎng)站導(dǎo)航。(3)在第三行中插人公司宣傳的Flash文件。完成步驟(1)(3)后的效果任務(wù)3利用表格工具制作網(wǎng)頁五、修改表格的行和列(4)在第四行中分別插人三個(gè)嵌套表格，并對其進(jìn)行相應(yīng)設(shè)置。(5)在第五行中插入友情鏈接圖片，并采用圖像映射方式分別設(shè)置其導(dǎo)航。(6)在第六行中插人網(wǎng)站版本信息并設(shè)置其背景顏色為“#c7eefd”。任務(wù)4利用AP DIV和Spry制作網(wǎng)頁一、繪制AP DIV(一)插入AP DIV(二)拖放APP DIV(

21、三)瀏覽AP元素任務(wù)4利用AP DIV和Spry制作網(wǎng)頁二、設(shè)置AP DIV的屬性AP DIV的屬性任務(wù)4利用AP DIV和Spry制作網(wǎng)頁三、AP DIV和表格之間的轉(zhuǎn)換由于AP DIV在網(wǎng)頁布局上非常方便，因此一些人可能不喜歡使用表格來創(chuàng)建自己的頁面，而是喜歡通過AP DIV來進(jìn)行設(shè)計(jì)。Dreamweaver CS6可以使用AP DIV來創(chuàng)建布局，然后將它們轉(zhuǎn)換為表格。任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計(jì)網(wǎng)站首頁利用AP DIV布局的羅德紡織品公司網(wǎng)站的首頁任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計(jì)網(wǎng)站首頁(一)使用跟蹤圖像輔助頁面

22、的布局選擇“跟蹤圖像”任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計(jì)網(wǎng)站首頁(二)布局頁面頂部頁面頂部布局完成任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計(jì)網(wǎng)站首頁(三)布局頁面中間的主體部分頁面中間主體部分布局完成任務(wù)4利用AP DIV和Spry制作網(wǎng)頁四、利用AP DIV布局設(shè)計(jì)網(wǎng)站首頁(四)布局頁面下方的友情鏈接及公司信息AP DIV布局整體結(jié)構(gòu)任務(wù)4利用AP DIV和Spry制作網(wǎng)頁五、使用Spry布局網(wǎng)頁(一)使用Spry菜單欄提示復(fù)制相關(guān)文件Spry菜單欄”對話框設(shè)置Spry菜單欄屬性任務(wù)4利用AP DIV和Spry制作網(wǎng)頁五、使用Spr

23、y布局網(wǎng)頁(二)使用Spry選項(xiàng)卡式面板Spry選項(xiàng)卡式面板Spry選項(xiàng)卡式面板的屬性任務(wù)5利用框架技術(shù)制作網(wǎng)頁框架是網(wǎng)頁中經(jīng)常使用的頁面設(shè)計(jì)方法，框架的作用就是把網(wǎng)頁在一個(gè)瀏覽器窗口中分割成幾個(gè)不同的區(qū)域，實(shí)現(xiàn)在一個(gè)瀏覽器窗口中顯示多個(gè)HTML頁面。框架示意圖框架結(jié)構(gòu)組成：框架(Frame)框架集(Frameset)任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架 (1)新建一個(gè)HTML文件，在菜單中選擇“插入”“HTML”“框架”命令，如圖所示，在彈出的下拉菜單中選擇“上方及左側(cè)嵌套”。創(chuàng)建的框架結(jié)構(gòu)如圖所示。選擇框架創(chuàng)建的框架結(jié)構(gòu)任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架(2)使用鼠標(biāo)直接拖動框架邊框

24、，直至合適的位置，這樣上方及左側(cè)嵌套的框架即完成。(3)選中框架集。選擇“窗口”“框架”命令，打開“框架”面板?！翱蚣堋泵姘逯械淖址硎久總€(gè)框架的名稱，在“框架”面板中單擊最外層的邊框，使其顯示出黑邊，則選中了框架集，如圖所示。選中框架集任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架 (4)選中框架集后，在“屬性”面板中設(shè)置各個(gè)選項(xiàng)的屬性，如圖所示。框架集的屬性任務(wù)5利用框架技術(shù)制作網(wǎng)頁一、創(chuàng)建框架(5)選中框架，設(shè)置框架屬性。在“框架”面板中單擊需要選擇的框架，使其出現(xiàn)細(xì)黑邊，然后在“屬性”面板中設(shè)置各個(gè)選項(xiàng)，如圖所示?？蚣艿膶傩匀蝿?wù)5利用框架技術(shù)制作網(wǎng)頁二、保存框架網(wǎng)頁每一個(gè)框架都有一個(gè)框架名稱，

25、可以用默認(rèn)的框架名稱，也可以在“屬性”面板中修改框架名稱。系統(tǒng)默認(rèn)的框架名稱為topFrame(上方)、leftFrame(左側(cè))、mainFrame(右側(cè))。任務(wù)5利用框架技術(shù)制作網(wǎng)頁三、在框架中使用超級鏈接在框架式網(wǎng)頁中設(shè)置超級鏈接時(shí)，一定要設(shè)置鏈接的目標(biāo)屬性，為鏈接的目標(biāo)文檔指定顯示窗口。鏈接目標(biāo)較遠(yuǎn)(其他網(wǎng)站)時(shí)，一般放在新窗口中;在導(dǎo)航條上創(chuàng)建鏈接時(shí)，一般將目標(biāo)文檔放在另一個(gè)框架中顯示(當(dāng)頁面較小時(shí))或全屏幕顯示(當(dāng)頁面較大時(shí))。任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面 (1)在菜單欄中選擇“窗口”“框架”命令，打開“框架”面板，選中整個(gè)框架集，如圖所示。在“屬性”面板中，將“行”

26、的值設(shè)置為“317，單位為“像素”，如圖所示。選中框架集框架集屬性設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(2)在菜單欄中選擇“窗口”“框架”命令，打開“框架”面板，選中子框架集，如圖所示。在“屬性”面板中，將“列”的值設(shè)置為“280，單位為“像素”，如圖所示。選中子框架集子框架集屬性設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(3)鼠標(biāo)在topFrame框架中的空白處單擊一下，在頁面“屬性”面板中將上、下、左、右邊距全部設(shè)為“0”。插人一個(gè)3行2列的表格，寬度為902px，高度為307px，居中對齊，先分別對第二行和第三行進(jìn)行合并單元格，在3行中依次插人bz. Swf、top. j

27、pg、x01.JPg、top3. Jpg和flash. Swf。任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(4)鼠標(biāo)在leftFrame框架中的空白處單擊一下，在頁面“屬性”面板中將上、下、左、右邊距全部設(shè)為“0。插人一個(gè)2行1列的表格，表格寬度為220px，右對齊。將第一個(gè)單元格的高度設(shè)為250px，選中其余單元格，將高度設(shè)置為50px，背景顏色設(shè)置為“#d8efff。分別輸人文字設(shè)置導(dǎo)航欄目，然后對各個(gè)導(dǎo)航欄目建立超級鏈接，鏈接路徑指向要鏈接到的網(wǎng)頁，“目標(biāo)”選擇“mainFrame，框架，如圖所示。子框架頁面設(shè)置任務(wù)5利用框架技術(shù)制作網(wǎng)頁四、制作框架頁面(5)鼠標(biāo)在mainFrame框架

28、中的空白處單擊一下，在頁面“屬性”中將上、下、左、右邊距全部設(shè)為“0。插入一個(gè)新的表格，設(shè)置為左對齊。任務(wù)6使用CSS修飾和美化網(wǎng)頁層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制Web頁面內(nèi)容的外觀。使用CSS設(shè)置頁面格式時(shí)，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容(HTML代碼)位于自身的HTML文件中，而定義代碼表現(xiàn)形式的CSS規(guī)則位于另一個(gè)文件(外部樣式表)或HTML文檔的另一部分(通常為部分)中。使用CSS可以非常靈活地控制頁面的外觀。任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式CSS樣式”面板“新建CSS規(guī)則”對話框任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式復(fù)合內(nèi)容的CSS

29、規(guī)則任務(wù)6使用CSS修飾和美化網(wǎng)頁一、創(chuàng)建CSS樣式定義.w1的CSS規(guī)則任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(一)文本樣式的設(shè)置設(shè)置CSS的文本樣式將CSS樣式應(yīng)用于標(biāo)簽應(yīng)用CSS樣式后的文字效果任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(二)背景樣式的設(shè)置WI的背景設(shè)置任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(三)區(qū)塊樣式的設(shè)置在“. WI的CSS規(guī)則定義”對話框的左側(cè)選擇“區(qū)塊”，可以在右邊區(qū)域中設(shè)置CSS的區(qū)塊樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(四)方框樣式的設(shè)置前面已經(jīng)設(shè)置過圖像的大小、圖像水平和垂直方向上的空白區(qū)域、圖像是否有文

30、字環(huán)繞效果等，方框樣式則進(jìn)一步完善和豐富了這些設(shè)置。在“. WI的CSS規(guī)則定義”對話框的左側(cè)選擇“方框”，可以在右邊區(qū)域中設(shè)置CSS的方框樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(五)邊框樣式的設(shè)置設(shè)置邊框樣式可以給對象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(五)邊框樣式的設(shè)置應(yīng)用表格邊框樣式后的效果任務(wù)6使用CSS修飾和美化網(wǎng)頁二、用CSS美化網(wǎng)頁(六)列表樣式的設(shè)置CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在“.WI的CSS規(guī)則定義”對話框的左側(cè)選擇“列表”，可以在右邊區(qū)域中設(shè)置CSS的列表樣式。任務(wù)6使用CSS修飾和美化網(wǎng)頁三、CSS樣式表的其他操作(一)編輯CSS樣式任務(wù)6使用CSS修