網(wǎng)頁設計及制作

-.z.規(guī)劃在建立之前，需了解的開發(fā)流程，按照工程管理模式對進展必要的規(guī)劃、開發(fā)、測試和發(fā)布使用。一般流程如下：建立前進展必要的市場分析。明確建立的目的及功能定位。制定技術(shù)解決方案。根據(jù)的目確實定容、構(gòu)造和功能。進展網(wǎng)頁設計，并根據(jù)技術(shù)方案實施建立。做出經(jīng)費預算。測試。發(fā)布及推廣。維護。根底知識〔Website〕，是指在因特網(wǎng)上根據(jù)一定的規(guī)定，使用HTML等工具制作的用于展示特定容的相關(guān)網(wǎng)頁的集合。的組成域名〔DomainName〕，是由一串用點分隔的字母組成的Internet上*一臺計算機或計算機組的名稱?？臻g，常見空間有虛擬主機、虛擬空間、獨立效勞器、VPS。程序，即建立與修改所使用的編程語言，換成源碼就是一堆按一定格式書寫的文字和符號。網(wǎng)頁網(wǎng)頁〔Webpage〕，是中的任意一個頁面，通常是HTML格式，文件擴展名為html、或htm、或asp、或asp*、或php、或jsp等。根本構(gòu)成元素：文字、圖像、超級。閱讀方式：瀏覽器。類型：以不同的后綴代表不同類型的網(wǎng)頁文件。通常分為靜態(tài)頁面、動態(tài)頁面。動態(tài)網(wǎng)頁〔activewebpage〕：指網(wǎng)頁容可根據(jù)用戶的不同請求從而返回其對應的數(shù)據(jù)，一般情況下動態(tài)網(wǎng)頁通過數(shù)據(jù)庫進展架構(gòu)，一般文件名均以開發(fā)語言做后綴，如php、asp等。也可以說但凡結(jié)合了HTML以外的高級程序設計語言和數(shù)據(jù)庫技術(shù)進展的網(wǎng)頁編程技術(shù)生成的網(wǎng)頁都是動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁：指全部由HTML標記頁面，頁面的容和顯示效果根本不發(fā)生變化，所有的容包含在網(wǎng)頁文件中。一般文件名均以htm、html、shtml等為后綴。術(shù)語〔WorldWideWeb〕，亦稱作“Web〞、“〞、“'W3'〞，中文名字為“萬維網(wǎng)〞，"環(huán)球網(wǎng)"等，常簡稱為Web。分為Web客戶端和Web效勞器程序。可以讓Web客戶端〔常用瀏覽器〕訪問瀏覽Web效勞器上的頁面。在這個系統(tǒng)中，每個有用的事物，稱為一樣“資源〞；并且由一個全局“統(tǒng)一資源標識符〞〔URL〕標識；這些資源通過超文本傳輸協(xié)議〔Hyperte*tTransferProtocol〕傳送給用戶，而后者通過點擊來獲得資源。URL〔UniformResourceLocator〕，統(tǒng)一資源定位符，是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標準資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。動態(tài)網(wǎng)頁的URL是不固定的；而靜態(tài)網(wǎng)頁的URL是固定的。HTTP(Hyperte*ttransferprotocol)，超文本傳輸協(xié)議，是一種詳細規(guī)定了瀏覽器和萬維網(wǎng)效勞器之間互相通信的規(guī)則，通過因特網(wǎng)傳送萬維網(wǎng)文檔的數(shù)據(jù)傳送協(xié)議。配色216網(wǎng)頁平安色216網(wǎng)頁平安色：指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示的顏色集合〔調(diào)色板〕，這些顏色在任何顯示設備上的顯示效果都是一樣的。網(wǎng)頁平安色是當紅色〔R〕、綠色〔G〕、藍色〔B〕顏色數(shù)字信號值為〔DACCount〕：0,51,102,153,204和255。網(wǎng)頁文字及配色文字是網(wǎng)頁的主體。文字的優(yōu)勢主要表達在信息量大、所用存儲空間非常小，利于網(wǎng)頁的快速翻開，信息的直觀呈現(xiàn)。要求：字體不超過三種〔標題、正文、導航〕，文本字號形成比照——突出〔網(wǎng)頁標題〕、層次〔欄目標題〕、清楚〔正文，字體偏小，適于文字信息量大的容〕規(guī)定：字號影響文字的清晰度，分辨率1024*768，正文：12號、宋體字；分辨率高于1024，正文：13-14號、宋體字；文章標題字號偏大，一般要使用平滑〔消除鋸齒〕的字體。文字與背風光彩搭配：文字能見度：高明度色彩背景+低明度文字錯誤色彩搭配：黃+白；綠+灰、綠+紅；紫+紅、紫+黑；青+黑前進色：紅、黃、橙、白背風光柔和、淡雅——深色文字深色背景——淺色文字不深不淺——根據(jù)色彩選擇適合的顏色〔色相、明度、飽和度〕文字色彩可以與主題相照應，協(xié)調(diào)主色調(diào)、副主色調(diào)等。文字色彩有劃分層次的作用，網(wǎng)頁上一樣色彩的文字都屬于同一層次。文字與圖片的配色遵循三個原則：文字周圍的背景盡量單純化。圖片與文字比照盡量明顯，易于識別。〔通常淺色圖片配深色文字，深色圖片配淺色和高亮度的文字〕文字與背景圖片比照擬弱不易識別時，可用其他色彩襯托文字的方式強化文字與圖片間的比照。網(wǎng)頁中的圖像圖像給人的視覺效果要比文字強烈得多。靈活應用圖像，在網(wǎng)頁中可以起到點綴的效果。但是應用不當，會使網(wǎng)頁變得凌亂不堪。Web頁上的圖像文件大局部都是使用JPG和GIF格式。因為他們除了具有壓縮比例高外，還具有跨平臺特性。圖像在網(wǎng)頁中的應用主要有以下幾種形式。圖像標題一般在網(wǎng)頁中都要有標題，用以提示瀏覽者這個是做什么的，起到了導航的作用，應用圖像標題可以使網(wǎng)頁更加美觀，背景圖像的另一個重要應用是作為網(wǎng)頁的背景。網(wǎng)頁背景千變?nèi)f化，特別是一些個人，應用圖片背景比擬多。網(wǎng)頁主圖網(wǎng)頁上除了用小圖像美化網(wǎng)頁外，通常還會在網(wǎng)頁上用一些較大的圖片來突出網(wǎng)頁主題，占滿網(wǎng)頁的整個空間。特別是主頁中用主圖的比擬多，或者直接用圖片取代文字作為超級按鈕，可以使網(wǎng)頁更加美觀。網(wǎng)頁圖像分類網(wǎng)頁圖像分為靜態(tài)圖像和動態(tài)圖像。動態(tài)圖像：gif動畫：適于短小動畫，畫面數(shù)少，圖像簡單。【89a】flash動畫〔.swf〕：flv視頻〔.flv〕：體積小，壓縮率高，適于傳播但畫面不夠清晰。靜態(tài)圖像：JPG：優(yōu)秀的圖畫品質(zhì)，較為合理的文件大小，不支持透明格式。GIF：256色，壓縮后損失圖像色彩但不影響圖像失真；支持透明格式?！?7a】PNG：支持透明背景，支持48位色彩的圖像模式；平滑的透明邊緣；品質(zhì)好，體積小。網(wǎng)頁上圖片考前須知良好的視覺吸引力，“閱讀最省力原則〞圖片要清晰，不能模糊、變形，太大的圖片要進展分割。圖片的主體含義要簡單明了，圖片上的文字要清晰容易識別。采用的圖片顏色要符合網(wǎng)頁整體色彩。關(guān)于色彩由光譜可以得出6個根底色相，增加過渡色可形成12色相環(huán)和24色相環(huán)。同類色：指在同一色相中不同的顏色變化。鄰近色：在色環(huán)上任一顏色同其毗鄰之色。補色：在色環(huán)上彼此相距180°的兩個色相互為補色。色彩比照網(wǎng)頁色彩搭配主要從色彩冷暖、面積、色相、明度、純度。色相比照色相比照：兩種以上色彩組合時，由于色相差異而形成的色彩比照效果。比照強弱關(guān)系可以從色相環(huán)上的距離〔角度〕入手，距離越小比照越弱；反之亦然。有彩色間的比照，按弱→強關(guān)系分為：同類色相比照〔無色相差、色相距離在45°，基于明度和純度的比照〕——單調(diào)鄰近色相比照〔色相距離在90°左右〕——較為豐富、耐看比照色相比照〔色相距離在130°左右〕——鮮明、強烈〔配色時需要考慮主色與次色間的關(guān)系、色彩面積，降低視覺疲勞〕互補色比照〔色相距離在180°左右〕——色彩比照很強〔易產(chǎn)生不安定感，配色時需考慮色彩面積、色彩的分散度〕明度比照明度比照：指色彩明暗度的比照，也稱作黑白度比照，即黑、白、灰效果。純度比照純度比照分為高、中、低純度。純度比照表現(xiàn)出色彩艷麗效果，也是決定色調(diào)感覺的關(guān)鍵。特點：增強用色的鮮艷感，即通常說的明確感。表現(xiàn)：艷麗、生動、活潑無彩色比照，如黑與白、深灰與淺灰。表現(xiàn)：大方、穩(wěn)重、高雅、樸素冷暖比照暖色系：顏色接近紅、橙、黃。冷色系：顏色偏向藍、青。中色系：綠色和紫色面積比照同一視覺圍色彩的面積不同會產(chǎn)生不同的比照效果。網(wǎng)頁色彩的搭配網(wǎng)頁的色調(diào)：網(wǎng)頁中的色彩，總存在*種容聯(lián)系組成一個統(tǒng)一的整體，從而形成畫面色彩的趨勢。主色調(diào)——頁面色彩的主要色調(diào)。顯示站點整體容和風格；其他配色面積一般不大于該視覺面積。輔色調(diào)——襯托主色調(diào)，支持主色調(diào)，協(xié)助主色調(diào)營造整體視覺氣氛〔面積次之〕。突出顏色——強調(diào)色，用于突出主題效果，一般多用于按鈕、標簽之類。背風光——協(xié)調(diào)、襯托整體軟件介紹軟件界面常見問題窗口不顯示插入工具欄。[方法]Ctrl+F2；或者菜單命令[窗口-插入]，勾選。找不到屬性窗口。[方法]Ctrl+F3；或者菜單命令[窗口-屬性]，勾選。文件面板顯示根節(jié)點不是命名的站點名稱。[方法]文件面板-管理站點；或者菜單命令[站點-管理站點]。窗口顯示的信息不完整，感覺窗口小了。[方法]檢查計算機的屏幕分辨率，分辨率不低于1024*768。站點建立制作之前除了準備資料、規(guī)劃構(gòu)造、設計布局以外，最好創(chuàng)立一個本地站點，易于管理和上傳。特別是制作動態(tài)，本地站點的創(chuàng)立必不可少。站點的建立應注意以下情況：站點的路徑構(gòu)造中不能含有中文，即文件夾、文件的命名都不含有中文，且命名有規(guī)律易查找。習慣上在站點根文件夾下建立用于存放圖片的子文件夾，如果中用到其他較多媒體類文件也可以建立相應的文件夾存放，但目錄層次不易過深。創(chuàng)立的素材不能放在站點根文件夾中，站點文件夾中存入的圖片、音頻、視頻或者動畫只能是真正在網(wǎng)頁中應用到的元素，一般在制作頁面的過程中都會提示保存到站點文件夾下。創(chuàng)立站點的視頻演示創(chuàng)立站點的命令菜單命令：[站點-新建站點]文件面板：[管理站點-新建]創(chuàng)立站點的關(guān)鍵步驟說明新建站點對話框中，[根本]選項卡相當于一個建立站點的向?qū)?，引導設計者一步步地完成根本的站點設置，[高級]選項卡用于站點屬性的詳細設置。初學者可先在[根本]選項卡中完成站點的根本設置，再進入[高級]選項卡做進一步設置，如“默認圖像文件夾〞，應注意：1〕設置了默認圖像文件夾后，制作頁面時每次插入圖像都會自動將應用到的圖片自動存放到該文件夾中；2〕不能將所有下載或處理過的圖像素材都拷貝到該文件夾中，造成不必要的存儲負擔。新建站點的名稱可以包含中文、符號或字母，但站點路徑不能包含中文和符號。創(chuàng)立站點的關(guān)聯(lián)操作站點編輯：進展站點定義的補充設置或者重新設置。站點刪除：刪除無關(guān)站點或者冗余站點。站點導出：導出站點信息，并以.ste為擴展名的存儲一個站點定義文件，該文件一般存儲在站點根文件夾。站點導入：將站點根文件夾的站點定義文件導入〔擴展名.ste〕，導入中注意站點根文件夾和站點圖像文件夾的指向，便于快速、正確的重構(gòu)站點。常用布局方法簡介版面布局根底網(wǎng)頁默認習慣標志放在頁面上部豎排導航時，導航放在頁面左側(cè)；橫排導航時，放在標志或頂部廣告之下信息放在頁面底部第一屏：是指翻開一個頁面不拖動滾動條的情況下能看到的頁面局部。分辨率800*6001024*768第一屏760*4201002*600頁面寬度：<=1002頁面高度：<=3*600表格表格是Dreamweaver中最常用的布局工具，不但可以準確定位網(wǎng)頁在瀏覽器中的顯示位置，還可以控制網(wǎng)頁元素在網(wǎng)頁中的準確布局。創(chuàng)立表格及表格屬性設置的視頻演示創(chuàng)立表格的命令菜單命令：[插入記錄-表格]插入工具欄：[常用-表格]表格的重要屬性說明表格的寬度可以用兩種方式表示：像素、百分比。在布局時，最外圍的表格屬性〔寬度〕單位必須用像素，而部的嵌套表格寬度單位可以使用像素，也可以用百分比，使用百分較為靈活。嵌套的表格之間需要嚴密相貼，則表格屬性中應將“邊距〞、“間距〞和“邊框〞值設置為0。表格可以嵌套表格，但無法穿插；表格穿插的錯誤容易出現(xiàn)在代碼局部。根本的表格標簽<table>：定義表格<th>：定義表頭<tr>：定義表格行<td>：定義表格單元〔tabledata〕，即數(shù)據(jù)單元格的容。表格標簽的可選屬性DTD指示此屬性允許在哪種DTD中使用。S=Strict,T=Transitional,F=Frameset.屬性值描述DTDalignleftcenterright不贊成使用。請使用樣式代替。規(guī)定表格相對周圍元素的對齊方式。TFbgcolorrgb(*,*,*)*******colorname不贊成使用。請使用樣式代替。規(guī)定表格的背景顏色。TFborderpi*els規(guī)定表格邊框的寬度。STFcellpaddingpi*els%規(guī)定單元邊沿與其容之間的空白。STFcellspacingpi*els%規(guī)定單元格之間的空白。STFframe〔表格外框線〕above只外部的頂部邊線STFbelow只外部的底部邊線border顯示表格的邊框線bo*顯示表格的整體hsides顯示外部的頂部和底部邊線rhs只顯示外部的右側(cè)邊線lhs只顯示外部的左側(cè)邊線void外部的所有邊線全部不顯示vsides只顯示外部的左側(cè)和右側(cè)邊線rules〔表格局部割線〕none部所有線框不顯示STFgroups部橫向和縱向線框不顯示rows只顯示部的橫向線框cols只顯示部的縱向線框all顯示所有部線框summaryte*t規(guī)定表格的摘要。STFwidth%pi*els規(guī)定表格的寬度。STF表格標簽的標準屬性id,class,title,style,dir,lang,*ml:lang表格的其他操作導入或?qū)С霰砀駭?shù)據(jù)菜單命令：[插入記錄-表格對象-導入表格式數(shù)據(jù)]，其中導入的數(shù)據(jù)要具有制表符、逗號、分號、引號或者其他定界符?；蛘卟藛蚊睿篬文件-導入]，可選擇“表格式數(shù)據(jù)〞或者E*cel文檔。菜單命令：[文件-導出]。表格的排序菜單命令：[命令-排序表格]典型案例表格布局由于最初表格并不是用于布局設計，而是由于顯示數(shù)據(jù)的，所以對于初學者來說，要想使用表格設計出布局合理的頁面，往往會適得其反。為了簡化利用表格布局頁面，Dreamweaver中就特意提供了一種布局模式，在該模式下使用布局工具，設計者可以輕松地在頁面中畫出布局表格以及單元格，然后對其進展修改、移動等，并且可以方便地設置布局表格和單元格的屬性，布局表格可以有一定的固定寬度，也可以占據(jù)整個瀏覽器窗口。設置布局模式的參數(shù)及命令菜單命令：[編輯—首選參數(shù)]，在左側(cè)的[分類]欄中選中[布局模式]選項，即可為布局模式中的表格和單元格邊框設置不同的顏色。插入工具欄：[布局-擴展]或者菜單命令：[查看-表格模式-布局模式]或者ALlt+F6組合鍵在布局模式中創(chuàng)立表格和單元格在布局模式中可以在文檔中隨意地繪制表格，在布局模式下點擊插入工具欄中的圖標，鼠標在文檔窗口即可拖動繪制布局表格；點擊圖標，拖動鼠標即可繪制布局單元格。需要注意以下幾個問題：不能在布局單元格中繪制表格。布局表格可以嵌套，布局單元格不可以嵌套，布局表格和布局單元格均不可以交疊，即在繪制布局表格和布局單元格時，不能直接在布局表格的旁邊插入其他布局表格和布局單元格，只能在布局表格或表格的下方添加其他布局表格和布局單元格。布局表格和布局表格之間不能相互重疊，創(chuàng)立相鄰的布局表格時〔小于8像素〕，Dreamweaver會自動將它們對齊，如果在繪制布局表格是按下Atl鍵，可以取消Dreamweaver的自動對齊功能。移動布局表格和單元格：可使用Dreamweaver提供的網(wǎng)格線作為輔助向?qū)?，[查看-網(wǎng)格-顯示網(wǎng)格]命令顯示網(wǎng)格線，或者按下Ctrl+shift+G快捷鍵。移動表格的方法是：單擊布局表格標簽，然后拖動表格到適宜的位置即可；如果同時按住Shift鍵，每次可以移動10個像素的距離，注意只有嵌套表格才可以移動。調(diào)整布局表格尺寸的方法是:單擊布局表格標簽，表格將出現(xiàn)8個控制柄，然后拖動控制柄到適宜的位置即可。調(diào)整和移動單元格的方法：單擊布局單元格的邊框進展拖動，或者按下Ctrl鍵的同時單擊布局單元格進展拖動，當?shù)竭_適宜的位置時，釋放鼠標即可。如果要改變單元格的大小，可以先選中該單元格，然后拖動控制柄到滿意的尺寸即可。布局表格需注意的屬性設置：選項作用刪除所有間隔圖像按鈕：去除表格中的所有間隔刪除嵌套按鈕：去除嵌套表格，只有當存在嵌套表格時，該選項才顯示模板在制作具有幾十個甚至幾百個風格根本相似的時，如果每次都重新設定網(wǎng)頁構(gòu)造以及一樣欄目下的導航條、各類圖標就會顯得非常麻煩，如果借助Dreamweaver中的模版功能就可以簡化操作。創(chuàng)立模板及模板設置的視頻演示創(chuàng)立模板的命令將現(xiàn)有的網(wǎng)頁文檔創(chuàng)立為模板〔方法一〕：菜單命令：[文件-另存為]，選擇相應的站點名稱。在該站點根文件夾下新建子文件夾Templates，將保存路徑切換到該文件夾下。保存類型：模板文件〔*.dwt〕，輸入模板名稱并保存。新建空模板〔方法二〕：[文件-新建-空模板-HTML模板]模板的重要說明模版實際是擴展名為.dwt的文檔，必須存放在站點根目錄的Templates文件夾中，才能被站點識別。模板中應該至少包含一個可編輯區(qū)域，否則模板無效，無法編輯該模板的頁面。兩種創(chuàng)立方法的區(qū)別模版文件夾不是原本就有的，如果是使用方法二的方式創(chuàng)立，則Templates文件夾會自動生成；而如果使用方法一的方式創(chuàng)立，則需要手動創(chuàng)立Templates文件夾。其中一個重要區(qū)別在代碼局部，方法二將在head標簽把title標簽包含在一個可編輯區(qū)域，則之后由模板創(chuàng)立的各個頁面都可以設置不同的頁面標題；而方法一則需要在代碼視圖手動輸入可編輯區(qū)域的代碼，將title標簽至于可編輯區(qū)域中，否則以后創(chuàng)立的各個頁面都只能是統(tǒng)一的一個頁面標題，無法靈活設置。另一個重要區(qū)別表達在CSS的使用上。根據(jù)之上的區(qū)別，如果將模板中的CSS定義也置于可編輯區(qū)域，則由模板創(chuàng)立的頁面的CSS定義也將帶來多樣的變化。模板的其他操作從模板創(chuàng)立文件菜單命令：[新建-模板中的頁]，選擇站點及其模板文件從當前模板中別離菜單命令：[修改-模板-從模板中別離]將一般頁面套用到模板菜單命令：[修改-模板-應用模板到頁]修改模板并更新站點當已經(jīng)利用模板創(chuàng)立了多個網(wǎng)頁時，又想更改模板中的*些網(wǎng)頁元素，可以直接在模板中更改，按Ctrl+S鍵保存，彈出[更新模板文件]對話框，單擊[更新]按鈕翻開[更新頁面]對話框自動更新，當保存模板的同時也更新了基于模板建立的所有網(wǎng)頁。模板中的區(qū)域類型模板中有些區(qū)域是不能編輯的，稱為鎖定區(qū)；有些區(qū)域則是可以編輯的，稱為可編輯區(qū)域。Dreamweaver提供了4種模板區(qū)域類型，即：可編輯區(qū)域、重復區(qū)域、可選區(qū)域和可編輯標簽屬性。可編輯區(qū)域是基于模板的文檔中的未鎖定區(qū)域。操作：插入工具欄[常用-可編輯區(qū)域]或者菜單命令[插入記錄-模板對象-可編輯區(qū)域]或者組合鍵Ctrl+Alt+V。重復區(qū)域〔RepeatingRegion〕是文檔中重復顯示的局部，屬于不可編輯區(qū)域。在模板中定義重復區(qū)域，可以讓用戶在網(wǎng)頁中創(chuàng)立可擴展的列表，并可保持模板中表格的設計不變。重復區(qū)域分為重復區(qū)和重復表〔RepeatingTable〕，可以將整個表格或者一個單元格定義為重復區(qū)域，但是不可以一次將多個單元格定義為重復區(qū)域；如果要在重復區(qū)域中編輯不同的容，必須在重復區(qū)域中插入可編輯區(qū)域。操作：首先在文檔窗口中選擇想要設置為重復區(qū)域的文本或容，執(zhí)行菜單命令[插入記錄-模板對象-重復區(qū)域]或者插入工具欄：[常用-重復區(qū)域]按鈕可選區(qū)域是在創(chuàng)立模板時定義的用于顯示和隱藏特別標簽的區(qū)域。在使用模板創(chuàng)立網(wǎng)頁時，對于可選區(qū)域的容〔如文本、圖片等〕，可以選擇顯示或者不顯示。使用可選區(qū)域可以控制不一定在基于模板的文檔中顯示的容。使用可選區(qū)域，在這些區(qū)域中用戶無法編輯容?？蛇x區(qū)域的模板選項卡在單詞if之后。根據(jù)模板中設置的條件，可以定義該區(qū)域在它們所創(chuàng)立的頁面中是否可見。操作：先在模板文檔中選擇需要將其設置為可編輯區(qū)域的文本或容，然后單擊插入工具欄[常用-模板下拉箭頭按鈕，從彈出的下拉菜單中選擇[可選區(qū)域]命令]設置：選中可選區(qū)域，在屬性面板上點擊“編輯〞命令，在“高級〞選項卡中為區(qū)域設置現(xiàn)有參數(shù)或者表達式，指定區(qū)域是否可見?？删庉嫎撕瀸傩?，是指允許基于模板的文檔中可進展修改的屬性的標簽定義?？删庉嫎撕瀸傩蕴峁?種類型：文本、布爾值、顏色和URL。利用可編輯標簽屬性這一功能，在設計模板的時候，就可以根據(jù)的總體規(guī)劃，解除模板中*些頁面元素的*個或*些屬性的鎖定，使之可以編輯，從而設計出風格大體一致但又有適當變化的一組網(wǎng)頁來。操作：首先在文檔窗口中選擇想要設置為可編輯標簽屬性的工程或容，菜單命令[修改-模板-令屬性可編輯]。典型案例框架及浮動框架我們都知道一個是由幾個甚至幾十個網(wǎng)頁組成的，如果中的所有網(wǎng)頁是同一個布局，并且其中在一樣的位置有一樣的網(wǎng)頁元素時，這時就可以使用另外一種方式來制作，那就是框架?？蚣芫W(wǎng)頁與表格網(wǎng)頁不同，框架網(wǎng)頁包括表格網(wǎng)頁，正確地說框架網(wǎng)頁是由多個表格網(wǎng)頁組成而成?？蚣芫W(wǎng)頁由框架集和框架兩個局部組成?？蚣芗窃谝粋€文檔定義一組框架構(gòu)造的HTML網(wǎng)頁，即框架集定義了頁面顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁源和其他可以定義的屬性等。單個框架是指在網(wǎng)頁上定義的一個區(qū)域，主要指向?qū)⑤d入的網(wǎng)頁源。創(chuàng)立框架及框架屬性設置的視頻演示創(chuàng)立框架及框架集的準備工作菜單命令：[查看-可視化助理-框架邊框]，勾選“框架邊框〞，將框架的邊框?qū)傩栽O置為可見。菜單命令：[窗口-框架]，或者組合鍵Shift+F2。創(chuàng)立框架的命令插入工具欄：[布局-框架]，選擇框架樣式。如果選擇多個框架構(gòu)造，將逐個按說選拆分框架?；蛘卟藛蚊睿篬文件-新建-例如中的頁-框架集]，選擇框架集的樣式?；蛘卟藛蚊睿篬插入-HTML-框架]，從彈出的子菜單中選擇框架樣式?？蚣艿闹匾f明依據(jù)框架的拆分方式，可看出框架的層次是嵌套形式的，當有行列組合搭配的框架構(gòu)造時，除總框架集外一定還嵌著其他的框架集，故而在設置框架的行高或者列寬時總是相對于其所在的框架集而進展設置?？虼翱偸前从缮隙?、由左至右的次序。框架集的特點使得在使用框架方式創(chuàng)立的在保存時最好使用菜單命令[文件-保存全部]，更為快捷和完整。由于框架的窗口構(gòu)造，在為網(wǎng)頁元素設置超級時增加了構(gòu)造中的多個框架，所以當設置超級時必須指明目標，使之能在指定的窗口中翻開。框架的屬性設置中包含框架集和單個框架的屬性設置，可借助框架工具面板，選擇框架集或者框架進展屬性設置；其中單個框架的屬性設置除框架自身屬性設置〔文件源、滾動、是否調(diào)整大小、邊界高度、邊界寬度、邊框、邊框顏色〕外，也和一般的根本的網(wǎng)頁頁面一般設置?？蚣艿牟僮魈砑涌蚣懿藛蚊睿篬修改-框架集]，選擇拆分框架的方法。或者操作：將光標放置于網(wǎng)頁編輯窗口的邊緣或者父框架的邊框上，拖動鼠標到擬增加的位置釋放，即可增加框架構(gòu)造。刪除框架將光標放置于要刪除的框架的邊框之上，并且拖拽框架邊框到父框架邊框或者是網(wǎng)頁編輯窗口邊緣，即可刪除框架構(gòu)造?？蚣軜撕灱罢f明標記類型譯名或意義作用備注<FRAMESET>●定義框架集定義如何將窗口分割為框架，即定義了一系列的行或者列<FRAME>○定義框架定義單個框架，即定義了放置在框架中的HTML文檔<IFRAME>○浮動框架在頁面插入浮動框架IE<NOFRAMES>●不支持框架設定當瀏覽器不支持框架時的提示<NOFRAMES>當使用的瀏覽器版本太低不支持框架功能時，為了防止瀏覽時一片空白可使用<NOFRAMES>標簽，<NOFRAMES>與</NOFRAMES>之間的容就能出現(xiàn)在使用者的瀏覽器窗口。這些容可以是提醒瀏覽者采用新的瀏覽器的字句，也可以是一個沒有框架的網(wǎng)頁或切換到?jīng)]有框架的版本的均可。Frame標簽的標準屬性與可選屬性可選屬性值描述frameborder01規(guī)定是否顯示框架周圍的邊框。longdescURL規(guī)定一個包含有關(guān)框架容的長描述的頁面。marginheightpi*els定義框架的上方和下方的邊距。marginwidthpi*els定義框架的左側(cè)和右側(cè)的邊距。namename規(guī)定框架的名稱。noresizenoresize規(guī)定無法調(diào)整框架的大小。scrollingyesnoauto規(guī)定是否在框架中顯示滾動條。srcURL規(guī)定在框架中顯示的文檔的URL。標準屬性：id,class,title,styleFrameset標簽的可選屬性與標準屬性可選屬性值描述colspi*els%*定義框架集中列的數(shù)目和尺寸。rowspi*els%*定義框架集中行的數(shù)目和尺寸。標準屬性：id,class,title,style浮動框架浮動框架也叫聯(lián)框架、行框架，標簽<iframe>，是將一個HTML文件嵌入在另一個HTML中顯示，即將HTML文件直接嵌于一個HMTL中，與之文件容相互融合，成為一個整體。操作方法：插入工具欄：[布局-浮動框架]代碼視圖：在代碼視圖中輸入<iframe></iframe>，并為<iframe>添加必要的屬性，如src、width、height、target等。浮動框架標簽屬性值描述描述alignleftrighttopmiddlebottom不贊成使用。請使用樣式代替。規(guī)定如何根據(jù)周圍的元素來對齊此框架。frameborder10規(guī)定是否顯示框架周圍的邊框。heightpi*els%規(guī)定iframe的高度。longdescURL規(guī)定一個頁面，該頁面包含了有關(guān)iframe的較長描述。marginheightpi*els定義iframe的頂部和底部的邊距。marginwidthpi*els定義iframe的左側(cè)和右側(cè)的邊距。nameframe_name規(guī)定iframe的名稱。sandbo*""allow-formsallow-same-originallow-scriptsallow-top-navigation啟用一系列對<iframe>中容的額外限制?！睭TML5〕scrollingyesnoauto規(guī)定是否在iframe中顯示滾動條。seamlessseamless規(guī)定<iframe>看上去像是包含文檔的一局部?！睭TML5〕srcURL規(guī)定在iframe中顯示的文檔的URL。srcdocHTML_code規(guī)定在<iframe>中顯示的頁面的HTML容?！睭TML5〕widthpi*els%定義iframe的寬度。典型案例層〔APDiv〕層與表格一樣，都是在網(wǎng)頁設計過程中用來放置頁面元素的容器，在一個網(wǎng)頁中可以由多個層存在，與表格之間最大的區(qū)別在于層可以重疊，可以決定其是否可見，可自定義各層之間的層次關(guān)系。在高版本中將層的名稱用APDiv來描述。層是一種新的網(wǎng)頁元素定位技術(shù)，使用層可以自由控制網(wǎng)頁元素的位置。層可以放置在頁面中的任意位置，還可以控制*個層是顯示在前面還是后面，是顯示還是隱藏。層是指存放用DIV和SPAN標簽描述的HTML容的容器。層可以包含文本、圖像、表單、插件，甚至層還可以包含其他層。在Dreamweaver中，可以使用兩種處理頁面容格式的層：CSS層和Netscape層。CSS層使用DIV和SPAN標簽來定義，由W3C組織給出，是一種非常實用的網(wǎng)頁元素定義規(guī)則，能夠使網(wǎng)頁制作者有效地定制、改善網(wǎng)頁。Netscape層使用LAYER和ILAYER標簽來確定層在頁面中的位置，由Netscape公司定義。創(chuàng)立層〔APDiv〕及其屬性設置的視頻演示創(chuàng)立層〔APDiv〕的準備工作菜單命令：[編輯-首選參數(shù)-不可見元素]，勾選“AP元素的錨點〞，使得層錨記可以在編輯窗口顯示。菜單命令：[窗口-AP元素]，或者快捷鍵F2。創(chuàng)立層〔APDiv〕的命令插入工具欄：[布局-繪制APDiv]，在編輯窗口拖動鼠標繪制層；或者按住按鈕，從插入面板中拖到文檔窗口中即可；當按下Ctrl鍵不放，在文檔窗口中就可以連續(xù)畫出不同的層。菜單命令：[插入記錄-布局對象-APDiv] 層的重要屬性說明創(chuàng)立層的方法中，使用插入工具欄繪制的層使用的是絕對定位，即相對于瀏覽器的位置信息；而使用菜單命令插入的層使用的是相對定位，位置相對于包含層的容器中，容器可以是表格、Div等。一個APDiv瞄記代表一個層，可以通過剪切、復制、粘貼層瞄記來完成對層的剪切、復制和粘貼層。使用[AP元素]面板可以管理文檔中的層，可以防止重疊，更改其可見性，允許嵌套，以及選擇一個或多個層。[AP元素]面板中的“Z〞用數(shù)字描述，說明層的順序，值得增大說明其越位于頁面頂層，是后建立的層；故可以修改層的“Z〞值，使多個層位于同一層次；在面板中，選中一個層并且按下Ctrl鍵，然后將其拖動到要嵌入的層的位置，可以將其變?yōu)樵搶拥那短讓?。層會隨著窗口大小、分辨率等原因發(fā)生錯位的現(xiàn)象，可以借助修改成的相關(guān)屬性來保證其位置的穩(wěn)定。盡量使用容器放置層，如表格；并使用菜單命令插入層，根據(jù)需要在屬性面板中調(diào)整層的大小、顏色等。如果使用的是插入工具欄繪制的層，則在代碼視圖修改成的屬性：1〕刪除層的left、top屬性；2〕增加margin-top、margin-left屬性，需要說明的是除了在Dreamweaver8版本外，高版本的Dreamweaver中的這兩個屬性的設置將在對應層的CSS描述局部修改，而不再在行style中修改；3〕position屬性默認就是absolute。層的嵌套并不是單指外觀上的一層位于另一層，其本質(zhì)是一層的HTML代碼嵌套在另一層的HTML代碼之；故在視覺上嵌套的層會出現(xiàn)跟隨移動效果一致但卻不在同一位置。幾個需要單獨說明的屬性：名稱功能描述層編號為層指定一個名稱來標識層。層的名稱只能包含英文字母和數(shù)字，不能使用特殊字符，并且不能以數(shù)字開頭Z軸指定層的疊放順序，值較大的層位于較小的層之上，Z軸值可正可負，也可以為零可見性Default默認，不指定可見性屬性。當未指定可見性時，大多數(shù)瀏覽器都會默認為繼承Inherit繼承，使用該層父級的可見性屬性Visible可見，顯示該層的容，而不管父級的值是什么Hidden隱藏，隱藏層的容，而不管父級的值是什么類可將CSS規(guī)則定義應用于對象溢出可見擴展層的大小，時溢出的局部也可以顯示，層將向右下方擴展隱藏保持層的大小，并剪切去與層大小不符的容，不顯示滾動條滾動條給層添加滾動條，不管容是否超出層的大小。特別是通過提供滾動條來防止在動態(tài)環(huán)境中顯示和不顯示滾動條導致的混亂自動在層的容超過邊界時自動顯示滾動條剪輯定義層的可視區(qū)域，在左、右、上、下文本框中分別輸入一個值來指定距層邊界的距離層〔APDiv〕的其他操作技巧技巧1：同時修改多個層的屬性。按下Shift鍵，然后在頁面中單擊要選擇的層，或者在層面板中單擊要選擇的層，即可選中多個層。同時屬性面板將顯示這幾個層的屬性交集，在屬性面板中所作的任何修改，都會作用于所選中的層。技巧2：對齊多個層。使用層對齊命令即菜單命令：[修改-排列順序]，選擇一種對齊方式即可。該操作可以將一個或多個層與最后選定的層邊界對齊。在對齊層時，沒有選中的子層因為要保持與父層的相對位置而隨著移動。技巧3：巧用網(wǎng)格線。菜單命令：[查看-網(wǎng)格-顯示網(wǎng)格]，使用對齊功能，則在移動層或者調(diào)整層的大小時，層會自動定位在最近的網(wǎng)格位置。菜單命令：[查看-網(wǎng)格-靠齊到網(wǎng)格]命令，勾選，此時選定并拖動一個層，釋放鼠標后，如果層與網(wǎng)格靠得很近，則會自動跳至最近的網(wǎng)格位置與之對齊，“網(wǎng)格設置〞對話框中的選項及選項作用選項作用顏色指定網(wǎng)格格線的顏色顯示網(wǎng)格設置網(wǎng)格的可見性，其功能與執(zhí)行：查看——網(wǎng)格——顯示網(wǎng)格靠齊到網(wǎng)格用于翻開或關(guān)閉對齊功能。其功能與執(zhí)行：查看——網(wǎng)格——靠齊到網(wǎng)格命令一樣間隔設置網(wǎng)格線之間的距離。輸入一個數(shù)字，然后在其后的下拉列表中選擇像素、英寸或厘米作為單位顯示指定網(wǎng)格的顯示形式是實線還是虛線技巧4:層與表格之間的轉(zhuǎn)換?？梢杂脤涌焖僭O計一個頁面，在將層轉(zhuǎn)換為表格，以適合不支持層的瀏覽器；還可以通過對層與表格的相互轉(zhuǎn)換優(yōu)化頁面設計。菜單命令：[修改-轉(zhuǎn)換-將APDiv到表格/或者將表格轉(zhuǎn)到APDiv]“轉(zhuǎn)換層為表格〞對話框中的選項及作用選項作用表格布局最準確為每個層創(chuàng)立一個單元格，并附加保存層之間的空間所需的任何單元格最?。汉喜⒖瞻讍卧付ㄈ绻麑佣ㄎ辉谥付〝?shù)目的像素，則層的邊緣應對齊。如果選擇此選項，表中將包含較少的空行和空列，但可能不與布局準確匹配使用透明GIF用透明的GIF填充表的最后一行。這將確保該表在所有瀏覽器中以一樣的列寬顯示。當啟用該選項后，不能通過拖動表列來編輯結(jié)果表。當禁用該選項后，表中將不包含透明GIF，但是不同的瀏覽器中可能會具有不同的列寬置于頁面中央將表放置在頁面的中央布局工具防止層重疊可以防止層重疊顯示層面板轉(zhuǎn)換完成后顯示層面板顯示網(wǎng)格在轉(zhuǎn)換完成后顯示網(wǎng)格靠齊到網(wǎng)格啟用吸附到網(wǎng)格行為行為是被用來動態(tài)響應用戶操作、改變當前頁面效果或是執(zhí)行特定任務的一種方法。使用行為可以使訪問者與網(wǎng)頁之間產(chǎn)生一種交互，來改變頁面或者觸發(fā)任務。行為事實上是由預先編寫好的JavaScript代碼構(gòu)成。一個行為是由一個事件和一個動作構(gòu)成。任何一個動作都需要一個事件激活，兩者相鋪相成。行為有3個重要局部：對象、事件和動作。對象是產(chǎn)生行為的主體，許多網(wǎng)頁元素都可以成為對象，如圖片、文字、多媒體文件等。事件是觸發(fā)動態(tài)效果的條件，它可以被添加到各種頁面元素上，也可以被添加到HTML標簽中。不同的瀏覽器支持的事件種類和數(shù)量不一樣，通常高版本瀏覽器支持更多的事件。行為通過動作來完成動態(tài)效果，動作是一段JavaScript代碼，在Dreamweaver中使用置的行為，系統(tǒng)會自動向頁面中添加JavaScript。Dreamweaver8置了很多行為動作，形成一個JavaScript程序庫。除此之外用戶還可以到Macromedia官方下載并安裝更多的行為。如果用戶熟悉JavaScript語言，也可以設計自己的行為，添加到Dreamweaver8中。添加行為的準備工作翻開行為面板，便于做進一步的設置。菜單命令：[窗口-行為]，或者組合鍵Shift+F4.選擇添加行為的對象，為其在行為面板中添加行為，并設置合理的事件。關(guān)于添加行為的說明在添加行為時，僅在操作的對象有效時才能選擇其適應的行為，而有效行為在面板中顯示黑色；灰色的局部則意味行為無效。一個對象可以通過行為面板中的“獲取更多行為〞，獲得在線提供的行為；也可以通過“調(diào)用Javascript〞來添加外部已經(jīng)編寫的行為。編輯行為時，選擇一個添加了行為的對象，如果要改變動作參數(shù)，可以選中該行為，然后單擊右鍵，在彈出菜單中重新進展編輯。如果要修改動作的事件，可以在事件列表中單擊該事件，然后在下拉事件列表中進展選擇。應用行為在網(wǎng)頁中適當?shù)靥砑有袨椋梢云鸬絼討B(tài)效果并使用戶與網(wǎng)頁之間具有交互性。交換圖像行為說明：交換圖像行為既可以將一個圖像與另一個圖像進展交換，也可以交換多個圖像。操作要點：1〕使用交換圖像行為之前，應先插入一個圖像并且將其選中作為行為的對象。2〕交換時應換入與原圖像具有一樣高度和寬度大小的圖像，以使其適應初始化圖像的大小。演示視頻：翻開瀏覽器窗口行為說明：使用翻開瀏覽器窗口動作可以使得單擊*個時翻開一個新的窗口，用來顯示目標文件，窗口大小、名稱和屬性由用戶設置。窗口屬性主要包括：導航工具欄、菜單條、地址工具條、滾動條、狀態(tài)欄、調(diào)整大小手柄。操作要點：可以基于圖像或者文字，一般用于縮略圖模式瀏覽網(wǎng)頁時，同該該行為顯示縮略圖對應圖片更為詳細的信息；也可以直接作用于頁面，但事件只能指定為“Onload〞?！睮E瀏覽器〕演示視頻：彈出信息行為說明：給網(wǎng)頁一個彈出信息窗口，予以提示。操作要點：一般用將該行為用于頁面，事件直接指定為“Onload〞。演示視頻：改變屬性行為說明：改變屬性動作構(gòu)成的行為來動態(tài)地改變*個對象的屬性，例如改變層的背景或者圖像的大小。一般來說，這個行為能夠改變的屬性決定附加動作的對象和瀏覽器的類型?？梢允褂迷撔袨樾薷膶傩缘膶ο笥袑印D像、表單以及表單中的各元素。操作要點：演示視頻：設置文本行為說明：設置文本行為包括4種：設置層文本，以指定容替換*一頁上存在的層的容和格式，該容可以包括任何有效的HTML源代碼，但是保存層的屬性和顏色。還可以在文本框中嵌入任何有效的JavaScript函數(shù)調(diào)用、屬性、全局變量或其他的表達式。如果要嵌入JavaScript代碼，應將其放置在大括號。如果要顯示大括號，在它前面加一個反斜杠即可。設置文本域文字設置框架文本設置狀態(tài)欄文本，行為可以設置瀏覽器窗口左下端狀態(tài)欄中顯示當前狀態(tài)的提示信息。操作要點：前三種文本設置必須在一定的條件下，比方設置層文本時必須在[設計]窗口中創(chuàng)立層，而后一種可以在任何狀態(tài)下添加的行為。如果同時存在多個層，則在[設置層文本]對話框的[層]下拉列表中選擇目標層演示視頻：拖動層行為說明：如果在網(wǎng)頁中添加拖動層動作，首先在網(wǎng)頁中繪制層，并在層插入圖片或文字，然后點擊行為選擇拖動層，完成對話框設置。操作要點：[根本]選項卡參數(shù)名稱及功能描述名稱功能描述層在下拉菜單中選擇要拖動的層名稱移動限制對滑動控制或者可以移動的布景，一般選擇該項，這樣可以將層的移動限制在一定的區(qū)域不限制如果要設計拼圖或者拖動、放下的游戲，可以選擇此項，表示不限制層的移動圍放下目標在文本框中輸入數(shù)值，是相對于瀏覽器左上角的距離，用于確定該層的目的點坐標靠齊距離輸入一個值，只有當層被拖動到目的點距離小于此數(shù)值時，層才會被認為移動到了目的點并且自動拖放到指定目的點上去拖動層高級選項卡中參數(shù)名稱及功能描述名稱功能描述拖動控制點整個層在層上的任意一點都可以拖動層層區(qū)域在文本框中指定拖動層中的*個區(qū)域，層才能被拖動拖動時將層移至最前在層拖動時將層移動到最前面，然后在其下拉菜單中選擇“留在最上方〞表示拖動后將層停留在最前方；或者選擇“恢復z軸〞表示拖動后返回到原來在棧中的層次呼叫JavaScript輸入JavaScript代碼或者是JavaScript函數(shù)名，當層被拖動時，這個函數(shù)和代碼會不斷地被重復執(zhí)行放下時輸入JavaScript代碼或者函數(shù)名稱。當訪問者松開鼠標時，就會執(zhí)行這個方框中所指明的JavaScript代碼或者函數(shù)只有在靠齊時選中該復選框，只有當層放下并且到達指定的位置后才執(zhí)行該行為中的JavaScript代碼和函數(shù)演示視頻：顯示-隱藏層行為說明：顯示-隱藏層利用頁面上的各種事件顯示、隱藏或者恢復層原本的可見性屬性，還可以控制多個層的顯示。該行為命令常常被用來顯示提示信息，操作要點：產(chǎn)生該行為的層初始狀態(tài)需設為隱藏，再設置觸發(fā)行為的事件，其中要注意設置一個事件觸發(fā)顯示行為，也要同樣設置一個事件觸發(fā)隱藏行為。演示視頻：應用時間軸行為說明：應用時間軸可以在不同的時間部位放置不同的容或者添加相應的行為，就可以讓對應的時間發(fā)生對應事件。操作要點：時間軸的修改〔延長動畫時間、改變關(guān)鍵幀速度、添加或刪除幀、改變動畫路徑、調(diào)整播放模式〕演示視頻：HTMLHTMLHTML指的是超文本標記語言(HyperTe*tMarkupLanguage)HTML不是一種編程語言，而是一種標記語言(markuplanguage)標記語言是一套標記標簽(markuptag)HTML使用標記標簽來描述網(wǎng)頁HTML標簽〔HTMLtag〕HTML標簽是由尖括號包圍的關(guān)鍵詞，比方<html>HTML標簽通常是成對出現(xiàn)的，比方<b>和</b>標簽對中的第一個標簽是開場標簽，第二個標簽是完畢標簽，開場和完畢標簽也被稱為開放標簽和閉合標簽HTML文檔=網(wǎng)頁HTML文檔描述網(wǎng)頁HTML文檔包含HTML標簽和純文本HTML文檔也被稱為網(wǎng)頁整個頁面由〈html〉標注，頁面又分文檔頭和文檔體，分別對應標簽<head>和<body>標注。HTML元素HTML元素以開場標簽起始<標簽>HTML元素以完畢標簽終止</標簽>元素的容是開場標簽與完畢標簽之間的容*些HTML元素具有空容〔emptycontent〕空標簽在開場標簽中進展關(guān)閉〔以開場標簽的完畢而完畢，如li〕大多數(shù)HTML元素可擁有屬性大多數(shù)HTML元素可以嵌套〔可以包含其他HTML元素〕。DIVDIV元素是用于分組HTML元素的塊級元素，常與CSS設置共同用于網(wǎng)頁布局設計。DIV可定義文檔中的分區(qū)或節(jié)〔division/section〕，該標簽可以把文檔分割為獨立的、不同的局部，也意味著它的容自動地開場一個新行。它可以用作嚴格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用id或class來標記<div>，則該標簽的作用會變得更加有效。創(chuàng)立Div及其屬性設置的視頻演示創(chuàng)立DIV的命令插入工具欄：[布局-插入div標簽]或者菜單命令：[插入記錄-布局對象-div標簽]或者代碼視圖：直接輸入<div>并做進一步設置完成上述命令后，通過<div>的class或id應用額外的樣式。DIV的重要說明不必為每一個<div>都加上類或id，雖然這樣做也有一定的好處?？梢詫ν粋€<div>元素應用class或id屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class用于元素組〔類似的元素，或者可以理解為*一類元素〕，而id用于標識單獨的唯一的元素。<div>是一個塊級元素，也就是說，瀏覽器通常會在div元素前后放置一個換行符。最好使用<div>元素來組合塊級元素，這樣就可以使用樣式對它們進展格式化。Div標簽及說明可選屬性值描述alignleftrightcenterjustify不贊成使用。請使用樣式取而代之。規(guī)定div元素中的容的對齊方式。全局屬性：<div>標簽支持HTML中的全局屬性。CSSCSS即為級聯(lián)樣式表或?qū)盈B樣式表，通常用名字或者HTML標簽表示，在HTML文檔中的CSS樣式表可以控制大多數(shù)傳統(tǒng)的文本格式，比方字體、字號以及對齊方式，還可以指定特殊的HTML屬性，例如定位、表格樣式和特殊效果等。把樣式添加到HTML4.0中，解決了容與表現(xiàn)別離的問題，使得網(wǎng)頁更新效率更高；同時多個樣式定義可層疊。創(chuàng)立CSS及其屬性設置的視頻演示創(chuàng)立標簽的CSS視頻演示：創(chuàng)立類的CSS視頻演示：創(chuàng)立高級CSS的視頻演示：創(chuàng)立行樣式表的視頻演示：創(chuàng)立外部CSS樣式表的視頻演示：文字應用CSS的演示:圖片應用CSS的演示：表格應用CSS的演示：創(chuàng)立CSS的命令菜單命令：[窗口-CSS樣式]，在CSS樣式面板中新建CSS或者代碼視圖：直接編寫CSS代碼CSS的重要說明樣式通常存儲在樣式表中，分為行樣式表、部樣式表、外部樣式表。行樣式表：樣式可以規(guī)定在單個的HTML元素中，即形如標簽<style=〞屬性.屬性值；屬性.屬性值〞>部樣式表：在HTML頁的頭元素中，即在<head></head>之間，被<!-->的html注釋外部樣式表：在一個外部的CSS文件中，即通過定義擴展名為.CSS的文件，使之應用到多個頁面文檔；可以在同一個HTML文檔部引用多個外部樣式表。外部樣式表可以極大提高工作效率，可同時改變站點中所有頁面的布局和外觀。CSS的分類：標簽選擇器：標簽定義，全局性〔形式：標簽〕類選擇器：自定義選族，局部〔形式：.名稱〕ID選擇器：ID選擇，根據(jù)ID應用〔形式：*ID〕其中，類選擇器的名稱不要與系統(tǒng)標簽同名。定義形式CSS選擇器+{聲明；}CSS選擇器{聲明；}其中，聲明格式：屬性:屬性值;CSS濾鏡Alpha濾鏡語法：Alpha(Opacity=",FinishOpacity=",Style=",Start*=",StartY=",Finish*=",FinishY=")參數(shù)和功能：使對象產(chǎn)生透明度。Blur濾鏡語法：Blur(Add=",Direction=",Strength=")參數(shù)和功能：使對象產(chǎn)生模糊效果。Chroma濾鏡語法：Chroma(Color=")參數(shù)和功能：*個顏色變透明。這個功能對圖片的支持不是很好。Dropshadow濾鏡語法：DropShadow(Color=",Off*=",OffY=",Positive=")參數(shù)和功能：陰影效果。這個功能對圖片的支持不是很好，普遍用于文字。FlipH、FlipV濾鏡無任何參數(shù)。FlipH使對象產(chǎn)生水平翻轉(zhuǎn)效果；FlipV使對象產(chǎn)生垂直翻轉(zhuǎn)效果。Glow濾鏡語法：Glow(Color=",Strength=")參數(shù)和功能：使對象的外輪廓產(chǎn)生一種光暈效果。一般用于文字效果。Gray濾鏡無任何參數(shù)。使圖片由彩色變?yōu)榛野咨{(diào)。Invert濾鏡無任何參數(shù)。使圖片產(chǎn)生照片底片的效果。Light濾鏡語法：Light(")參數(shù)和功能：模擬光源的投射效果。不過要通過調(diào)用方法來實現(xiàn)，這就需要用到Javascript動態(tài)濾鏡編程。在這里就不細說了。Mask濾鏡語法：Mask(Color=")參數(shù)和功能：在對象上建立一個覆蓋于外表的膜。對圖像的支持不好，普遍用于文字。Shawdow濾鏡語法：Shadow(Color=",Direction=")參數(shù)和功能：與dropshadow非常相似，也是一種陰影效果。dropshadow沒有漸進感，shadow有漸進的陰影感。*-ray濾鏡無任何參數(shù)。使圖片只顯示其輪廓。Wave濾鏡語法：Wave(Add=",Freq=",LightStrength=",Phase=",Strength=")參數(shù)和功能：使對象在垂直方向上產(chǎn)生波浪的變形效果。除了這些之外，css還包含兩種動態(tài)濾鏡，BlendTrans混合轉(zhuǎn)換濾鏡和Revealtrans顯示轉(zhuǎn)換濾鏡。這兩類濾鏡不能單獨在html中調(diào)用，必須要結(jié)合在scripts程序中，由spripts程序?qū)ζ溥M展控制。DIV+CSS綜合典型案例CSS布局與table表格式布局是兩種完全不同的布局方式。DIV是*HTML中指定的，專門用于布局設計的容器對象。在CSS不布局中，Div則是這種布局方式的核心對象。使用CSS布局則完全不同，設計者首先考慮的不是如何分割網(wǎng)頁，而是從網(wǎng)頁容的邏輯關(guān)系出發(fā)，區(qū)分出容的層次的重點。然后根據(jù)邏輯關(guān)系，把網(wǎng)頁的容使用<div>或其他的HTML標記組織好，再考慮網(wǎng)頁的形式如何與容相適應。下面簡單介紹幾種常見的網(wǎng)頁布局形式。Div標簽作為頁面元素的主要容器，可容納所有子Div標簽、圖像和文字等容，并根據(jù)具體需要對各子Div標簽和對象進展格式化。設計者要能靈活掌握Div+CSS準確定位頁面元素的排版技術(shù)，創(chuàng)立布局合理、美觀的網(wǎng)頁。通常用Div標簽來定義網(wǎng)頁上的一個特定的區(qū)域，將文字、圖片和表格等網(wǎng)頁元素放到此區(qū)域中，再用CSS對該Div標簽定義的區(qū)域進展定位和樣式的設置。CSS樣式表不僅是定義頁面樣式的最正確工具，同時也具有準確地定位獨享的控制能力，因此，它成為不可多得的網(wǎng)頁布局工具。為了提高設計效率，可以事先定義好布局所需的CSS樣式規(guī)則，然后在“插入Div標簽〞對話框中應用。使用這種方法排版的網(wǎng)頁中的代碼簡潔且更新方便，更能兼容更多的瀏覽器。典型案例其他網(wǎng)頁元素音頻音效在網(wǎng)頁動畫中有畫龍點睛的作用，使網(wǎng)頁給訪問者留下深刻的印象。Dreamweaver提供了多種在網(wǎng)頁中插入聲音的方法，比方之間插入法和代碼法等。網(wǎng)頁中常用的音頻格式比擬多，通常使用的主要有MP3、WMA、RM、MID以及AIF等格式的音頻。其中MID文件一般只用來做網(wǎng)頁的背景音樂。下表描述了一些常見的聲音文件格式以及每種聲音格式用于Web設計時的優(yōu)點和缺點。音頻格式用于網(wǎng)頁設計時的優(yōu)缺點.midi或.mid(電子樂器化數(shù)據(jù)接口)主要用于電子樂器音樂。很多瀏覽器不用插件也可以支持MIDI文件。雖然其聲音品質(zhì)非常好，但同時也取決于來訪者聲卡的好壞。一個非常小的MIDI文件也可以提供相當長的聲音剪輯。MIDI文件不能錄制，必須在計算機上使用特殊的硬件和軟件進展人工合成。.wav(波形擴展)該文件有好的聲音品質(zhì)，很多瀏覽器不用插件也可以支持WAV文件。也可以從CD、磁帶、麥克風等輸入設備錄制自己的WAV文件。然后其龐大的文件尺度限制了在Web頁上使用聲音剪輯的長度。.aif(聲音交換文件格式，或AIFF)和WAV格式一樣，它也有非常好的聲音品質(zhì)，很多瀏覽器不用插件也可以支持AIF文件。也可以從CD、磁帶、麥克風等輸入設備錄制自己的AIF文件。然后其龐大的文件尺寸限制了在Web頁上使用聲音剪輯的長度.mp3(電影莊家組聲音，或者MPEGAudioLayer-3)一種聲音文件大小有實質(zhì)性縮小壓縮格式。其聲音品質(zhì)非常好。如果正確錄制和壓縮MP3文件，其聲音品質(zhì)可以和CD媲美，新技術(shù)可以將文件“流式化〞，這樣來訪者就無須等待下載并安裝一個輔助應用程序或者插件，比方QuickTime、WindonwsMediaPlayer或者RealPlayer。.ra、.ram、.rpm或RealAudio有非常搞的壓縮比，所以比MP3文件還要小。完整的歌曲文件可以在較短的時間完成下載。由于該類文件可以從一個普通的Web效勞器上“流式〞播放，所以來訪者可以在文件還沒完全下載之前變開場欣賞音樂。這類文件音質(zhì)不如MP3，但是最新版本的播放器和解碼器已經(jīng)極大提高了聲音品質(zhì)。來訪者必須下載并安裝RealPlayer應用程序或者輔助插件來播放這些文件。命令操作：代碼輸入法背景音樂是在瀏覽網(wǎng)頁時聽到的背景聲音，它一般不需要控制，播放的方式為循環(huán)播放。<BGSOUND>標簽添加到網(wǎng)頁文件的><head><head>之間，設置好背景音樂的路徑就可以了。行為插入法在Dreamweaver中，還有最直接的方法在網(wǎng)頁中插入音樂，利用這種方法既可以將其設置為網(wǎng)頁背景音樂，還可以將其設置為在線音樂，這種方法就是利用Dreamweaver中[行為]面板中的[播放聲音]命令。但高版本Dreamweaver已經(jīng)不建議使用該方法。插入音頻演示視頻越來越多的為了吸引瀏覽者的目光，在中添加了視頻，例如商業(yè)將其產(chǎn)品介紹制作成視頻放在中，或者將公司的新聞拍攝成視頻放置在中，而很多音樂也是通過網(wǎng)絡中的MTV視頻傳播流行的。在Dreamwaver中可以通過不同的方式插入不同格式的視頻，比方輸入一段代碼，或者利用Active控件、Shockwave影片以及FlashVideo等。插入Active*Active*技術(shù)的前身是OLE技術(shù)，但是只是為了開展一種小型的可以從網(wǎng)絡上快速下載的可重用組件。在網(wǎng)頁中添加一些不同功能的Active*控件，就可以播放視頻、顯示試算表容等，只要瀏覽者的瀏覽器支持Active*控件的功能，就會自動下載并且執(zhí)行它。Dreamweaver中的Active*對象允許用戶在網(wǎng)頁訪問者的瀏覽器中為Active*控件設置屬性和參數(shù)。Dreamweaver使用Object標簽來標識網(wǎng)頁中Active*控件出現(xiàn)的位置，并且為該Active*控件提供參數(shù)。插入工具欄：[常用-Active*]插入ShockwaveShockwave影片是Macromedia網(wǎng)上交互多媒體的標準，是一種允許用Macromedia的Director軟件創(chuàng)立的媒體文件，能夠快速下載并能被大多數(shù)瀏覽器播放的壓縮格式。播放Shockwave影片的軟件創(chuàng)立的媒體文件，能夠快速下載并能被大多數(shù)瀏覽器播放的壓縮格式。播放Shockwave影片的軟件既可以作為NetscapeNavigator插件，也可以作為Active*控件。當插入一個Shockwave影片時，Dreamweaver將同時使用object標簽和enbed標簽，以便在所有的瀏覽器類型中都獲得最正確效果。當在[屬性]面板中修改影片時，Dreamweaver將同時對object標簽和enbed標簽中的參數(shù)作適當?shù)男薷?。插入工具欄：[常用-Shockwave]插入FlashVideoFLV流媒體格式是一種新的視頻格式，全稱為FlashVideo。從FlashM*2004開場就對其提供了完美的支持，它的出現(xiàn)有效地解決了視頻文件導入Flash后，使導出的SWF文件體積龐大，不能在網(wǎng)絡上很好地使用等缺點。插入工具欄：[常用-FlashVideo]插入視頻演示Flash文本在Dreamweaver中可以創(chuàng)立只包含文本的Flash文件，這樣就可以使用自己設計器的字體和文本創(chuàng)立較小的矢量圖形影片。在創(chuàng)立文本超時，不管之前怎樣設置文本的顏色屬性，在添加后，文本都會變成統(tǒng)一的顏色。Flash文本就不會發(fā)送這種情況，并且還可以創(chuàng)立鼠標經(jīng)過效果。插入工具欄：[常用-Flash文本]或者菜單命令：[插入記錄-媒體-Flash文本]關(guān)鍵參數(shù)：wmode，值：transparent，作用：使得Flash背景透明注意：1〕要想在Dreamweaver中創(chuàng)立Flash文本，必須新建一個文檔并且將其保存。2〕保存的Flash文件名不能包含中文。插入Flash文本視頻演示Flash按鈕利用Flash按鈕對象，用戶可以定制和插入一個以及設計好的Flash按鈕，即使不會使用Flash軟件的用戶也可以在Dreamweaver中直接插入Flash動畫格式的按鈕?，F(xiàn)在只需輸入文字就可以了，而且要比傳統(tǒng)的點陣圖文字或者按鈕文件更小，效果更漂亮。插入工具欄：[常用-Flash按鈕]或者菜單命令：[插入記錄-媒體-Flash按鈕]關(guān)鍵參數(shù)：wmode，值：transparent，作用：使得Flash背景透明考前須知與創(chuàng)立ash文本一樣。插入Flash按鈕視頻演示Flash動畫雖然在Dreamweaver中可以直接插入Flash文本和Flash按鈕，但是如果想要插入帶有動畫效果的Flash,就需要利用外部軟件制作，然后在Dreamweaver中插入制作的Flash動畫。插入工具欄：[常用-Flash]或者菜單命令：[插入記錄-媒體-Flash]關(guān)鍵參數(shù)：wmode，值：transparent，作用：使得Flash背景透明插入Flash視頻演示圖像查看器圖像查看器，將圖片以Flash效果呈現(xiàn)，可以通過點擊圖片進入頁面詳細閱讀，是一種更為簡單的、靈活的Flash動畫效果。菜單命令：[插入記錄-媒體-圖像查看器]屬性描述bgColor設置圖片播放界面的背景顏色captionColor設置圖片的標題顏色captionFont設置圖片的標題字體captionSize設置圖片的標題字體大小frameColor設置動畫框架顏色frameShow設置是否顯示框架frameThickness框架的厚度imageCaptions圖片標題imageLinks圖片地址imageLindTarget窗口翻開方式imageURLs制作的圖片瀏覽器所含有圖片的來源位置showControls是否顯示控制條titleColo