Dreamweaver 8中文版網(wǎng)頁制作教程完整版講義

1、Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第二講 走進Dreamweaver 8 1、啟動與退出 2、工作界面 3、創(chuàng)立簡單頁面 1、啟動與退出1啟動2退出3.翻開網(wǎng)頁文檔4.關(guān)閉網(wǎng)頁文檔1.1. 啟動 在Windows窗口中執(zhí)行命令執(zhí)行【開始】/【所有程序】/【Macromedia】/【Macromedia Dreamweaver 8】命令即可啟動Macromedia Dreamweaver 8程序，如以下圖所示。 1.2退出 Dreamweaver 8程序常用的退出方法有如下四種。單擊Dreamweaver 8窗口右上角的關(guān)閉按鈕。單擊Dreamweaver 8窗口左上角的圖標(biāo)

2、，在翻開的下拉菜單中執(zhí)行【關(guān)閉】命令。在Dreamweaver 8窗口中執(zhí)行【文檔】/【退出】命令。當(dāng)當(dāng)前活動窗口為Dreamweaver 8時，按Alt+ F4 組合鍵也可退出Dreamweaver 8。 1.3翻開網(wǎng)頁文檔執(zhí)行【文件】/【翻開】命令，翻開【翻開】對話框 ，找到需要翻開的網(wǎng)頁文檔，單擊選中，然后單擊“翻開按鈕，即可翻開 。1.4關(guān)閉網(wǎng)頁文檔編輯完文檔后，可以單擊文檔工具欄上的按鈕 ，關(guān)閉文檔。假設(shè)文檔有改動那么彈出如下圖的提示框，詢問是否保存改動。2、 工作界面2.1 窗口介紹2.2 面板組 2.3 重組面板2.4 首選參數(shù)設(shè)置2.1窗口介紹 在默認(rèn)狀態(tài)下，Dreamweav

3、er 8窗口主要有標(biāo)題欄、菜單欄、文檔工具欄、編輯區(qū)、【屬性】面板、插入欄、面板組、狀態(tài)欄等組成，如上圖所示。標(biāo)題欄：顯示當(dāng)前正在編輯的文檔的目錄和名稱。菜單欄：菜單欄位于標(biāo)題欄的下面，有10個菜單組成，包含了幾乎所有的Dreamweaver8命令。文檔工具欄：文檔工具欄中包含按鈕，使用這些按鈕可以在文檔的不同視圖間快，還包含一些與查看文檔、在本地和遠(yuǎn)程站點間傳輸文檔有關(guān)的常用命令和選項，如下圖。插入欄：包含用于創(chuàng)立和插入對象如表格、層和圖像的按鈕。當(dāng)鼠標(biāo)指針滾動到一個按鈕上時，會出現(xiàn)一個工具提示，其中含有該按鈕的名稱，如以下圖所示。插入欄 插入欄上的插入命令按鈕被分成了如下七個常用類別：【常

4、用】、【布局】、【表單】、【文本】、【HTML】、【效勞器代碼】、【應(yīng)用程序】、【Flash 元素】、【收藏】。狀態(tài)欄：編輯窗口底部的狀態(tài)欄提供與用戶正創(chuàng)立的文檔有關(guān)的其它信息，如以下圖所示。編輯區(qū)：主要用來設(shè)計頁面和編輯代碼的工作區(qū)域。它有三種視圖模式：設(shè)計視圖、代碼視圖、拆分視圖。【屬性】面板：對當(dāng)前編輯區(qū)選中的對象進行屬性設(shè)置，如設(shè)置文本的字體、大小、顏色。2.2面板組面板組是組合在一個標(biāo)題下面的相關(guān)面板的集合。面板組中選定的面板顯示為一個選項卡。每個面板組都可以展開或折疊，并且可以和其它面板組停靠在一起或取消?？俊ＤJ(rèn)情況下，Dreamweaver 8的都是把幾個功能相近的面板集合成一

5、個面板組，集中管理的，但這些面板不是固定的，可以自由更改，因此用戶可以將自己常用到的幾個面板集合到一個面板組中，方便使用 。2.3變更面板默認(rèn)情況下，Dreamweaver 8都是將幾個功能相近的面板集合成一個面板組，以進行集中管理，但這些面板不是固定的，可以自由更改，因此用戶可以將自己常用到的幾個面板集合到一個面板組中，以便使用 。例如，將【層】移到【應(yīng)用程序】面板組的操作如以下圖所示。 2.4首選參數(shù)設(shè)置 執(zhí)行【編輯】/【首選參數(shù)】命令，翻開【首選參數(shù)】對話框 ，通過設(shè)置這些參數(shù)，可以尋找一個最適合個人習(xí)慣的配置。3、 創(chuàng)立簡單頁面3.1 創(chuàng)立頁面3.2 保存頁面 3.3 設(shè)置頁面屬性3.

6、1創(chuàng)立頁面 啟動Dreamweaver 8程序后，執(zhí)行【文件】/【新建】命令 ，翻開【新建文檔】對話框，在【常規(guī)】選項卡的【類別】列表選擇“根本頁，在【根本頁】列表選擇“HTML項，然后單擊“創(chuàng)立按鈕即可，如以下圖。 在窗口中執(zhí)行【文件】/【保存】 ，翻開【另存為】對話框，在【保存在】項選擇目錄，然后在【文件名】后面輸入需要保存的文件名“index.html，如下圖。單擊“保存按鈕后，即可完成保存文檔 。3.2保存頁面3.2設(shè)置頁面屬性 在【屬性】面板中單擊“頁面屬性按鈕 ，翻開翻開【頁面屬性】對話框 ，然后進行相應(yīng)的設(shè)置，如下圖。在【頁面屬性】對話框中可以設(shè)置網(wǎng)頁的外觀、鏈接、標(biāo)題、標(biāo)題/編

7、碼、跟蹤圖像共五個方面的內(nèi)容。外觀：可以設(shè)置當(dāng)前頁面的字體、字號、背景色和4個邊距等。鏈接：設(shè)置網(wǎng)頁中的鏈接屬性。標(biāo)題效果：設(shè)置1-6級標(biāo)題的字號、顏色。標(biāo)簽/編碼：設(shè)置網(wǎng)頁的標(biāo)題以及網(wǎng)頁在使用中的語言選擇，一般都選擇編碼為簡體中文GB2312)。跟蹤圖像：在設(shè)計網(wǎng)頁時，用于做參考的網(wǎng)頁圖像，單擊按鈕可以載入規(guī)劃好的圖片。講課結(jié)束 下課休息第三講 站點管理 1、定義站點 2、管理站點 3、用站點管理文件. 1、定義站點1站點的概述2定義站點1.1. 站點的概述在 Dreamweaver 8中建立站點，是進行網(wǎng)站開發(fā)的一個關(guān)鍵前提步驟。這里所講的定義站點，其實就是在 Dreamweaver 8中

8、定義一個文件夾目錄，用于存放頁面文件和素材、籌劃網(wǎng)站結(jié)構(gòu)、部署開發(fā)環(huán)境。定義站點是為了更好地利用【文件】面板對站點文件進行管理，也是為減少一些錯誤的出現(xiàn)，如路徑出錯，鏈接出錯等等。許多初學(xué)者開始做網(wǎng)頁時，就只知道做單一網(wǎng)頁，對文件的條理性、結(jié)構(gòu)性不加以管理，沒有對文件進行分類管理，使整個站點結(jié)構(gòu)顯得很亂；所以在開發(fā)之前應(yīng)該認(rèn)真籌劃好站點結(jié)構(gòu)。1.2定義站點執(zhí)行【站點】/【新建站點】命令，然后依次操作。2、 管理站點2.1 翻開站點2.2 管理站點2.3 刪除站點2.4 復(fù)制站點2.1翻開站點 啟動Dreamweaver 8 后，在窗口中執(zhí)行【窗口】/【文件】命令，翻開【文件】面板。在【文件】面

9、板中的下拉列表中，選擇要翻開的站點“個人站點，即可翻開站點。 2.2管理站點如果站點設(shè)置需要改動，可以通過編輯站點來完成，在窗口中執(zhí)行【站點】/【管理站點】命令翻開【管理站點】對話框，在左側(cè)的站點列表中選中需要編輯站點，如圖1所示，然后單擊 按鈕，翻開站點定義對話框，如圖2所示，再進行重新編輯。2.3刪除站點 窗口中執(zhí)行【站點】/【管理站點】命令，翻開【管理站點】對話框，在【管理站點】對話框的站點列表中選中“我的相冊，直接單擊右側(cè)的“刪除按鈕即可。2.4復(fù)制站點 翻開【管理站點】對話框，選中要復(fù)制的站點，然后單擊“復(fù)制 按鈕，如圖1所示，那么在【管理站點】對話框的站點列表中就復(fù)制了一個該站點的

10、副本，如圖2所示。3、 用站點管理文件3.1 創(chuàng)立文件夾3.2 移動文件夾3.3 復(fù)制文件3.4 刪除文件3.1創(chuàng)立文件夾創(chuàng)立：在站點內(nèi)的目錄下單擊鼠標(biāo)右鍵，翻開右鍵快捷菜單，在菜單中選擇【新建文件】命令或者【新建文件夾】命令，如下圖。3.2移動文件夾移動：單擊選中需要移動的文件，拖曳到目標(biāo)位置，如圖1所示，然后釋放鼠標(biāo)左鍵，彈出【更新文件】對話框，如圖2所示，單擊“更新按鈕，系統(tǒng)會自動更新文件中的鏈接 。3.3復(fù)制文件右鍵單擊要復(fù)制的文件，在快捷菜單中執(zhí)行【編輯】/【復(fù)制】命令，如右圖所示，在該文件的下方增加一個副本 。3.4刪除文件站點目錄下，右擊要刪除的文件，然后執(zhí)行【編輯】/【刪除】命

11、令即可，如以下圖所示。 講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第四講 用表格設(shè)計頁面 1、表格插入 2、表格的設(shè)置 3、用表格設(shè)計頁面 1、表格的插入1表格概述2表格結(jié)構(gòu)3插入表格1.1. 表格概述表格是網(wǎng)頁設(shè)計制作中不可缺少的元素，它不僅用于頁面上的數(shù)據(jù)顯示，還可以用來設(shè)計頁面框架。使用表格可以將圖片、文本、數(shù)據(jù)和表單等元素有序地顯示在頁面上，使得頁面看起來簡潔明了、編排整齊。用表格設(shè)計的頁面，框架布局清晰，在不同平臺、不同分辨率的瀏覽器里都能保持其原有的布局，并且在不同的瀏覽器平臺都具有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。1.2. 表格結(jié)構(gòu)

12、表格是由一個或多個單元格組成的集合。表格中橫向的一排稱之為行，縱向的一排稱之為列，中間的單個小方塊稱之為單元格。單元格與單元格之間的距離叫做單元格間距，單元格內(nèi)容到單元格邊框之間的距離叫邊距。每個單元格的四周稱之為單元格邊框，整個表格的四周稱之為表格邊框，以下圖展示了表格各局部的對應(yīng)關(guān)系。1.3. 插入表格在【常用】插入欄中單擊表格按鈕 ，翻開【表格】對話框 ，設(shè)置【行數(shù)】、【列數(shù)】、【表格寬度】等參數(shù)后單擊“確定按鈕即可 。2、表格的設(shè)置1表格選取2設(shè)置表格屬性3拆分表格4. 合并表格2.1. 表格的選取 表格的選取包括整表的選取、單元格的選取、表格行與列的選取。整表的選?。褐恍枰獙⑹髽?biāo)指針

13、移到表格的邊框，當(dāng)鼠標(biāo)指針右下角出現(xiàn)圖標(biāo)時單擊鼠標(biāo)左鍵即可選中整個表格；或者先在表格內(nèi)任意處單擊一次鼠標(biāo)左鍵，然后在標(biāo)簽選擇器上單擊“標(biāo)簽，也可選中這個表格。單元格的選?。喊醋trl鍵，然后單擊某一單元格，即可選中該單元格；或者先在單元格內(nèi)單擊一次鼠標(biāo)左鍵，然后單擊狀態(tài)欄上的“標(biāo)簽，也可選中該單元格。表格行與列的選取：將鼠標(biāo)指針移到某一行的左側(cè)，當(dāng)鼠標(biāo)指針變成形狀時，單擊鼠標(biāo)左鍵，即可選中該行；將鼠標(biāo)指針移到某一列的頂部，當(dāng)鼠標(biāo)指針變成形狀時，單擊鼠標(biāo)左鍵，即可選中該列。 2.2. 設(shè)置表格的屬性先選中表格，然后在【屬性】面板中設(shè)置整個表格的邊框、間距、背景顏色、邊框顏色等，也可以針對單個、

14、某一行、某一列單元格分別進行設(shè)置 。2.3. 拆分表格 拆分：單擊要拆分的單元格，在【屬性】面板中單擊拆分單元格按鈕 ，在彈出的【拆分單元格】對話框中設(shè)置拆分行或列，并設(shè)置要拆分成的行數(shù)或列數(shù)，然后單擊按鈕即可將單元格拆分成多行或多列 ，如以下圖所示。2.3. 合并表格選中需要合并的多個連續(xù)的單元格后，在【屬性】面板中單擊合并單元格按鈕 ，將多個單元格合并，如以下圖所示。3、用表格設(shè)計頁面1嵌套表格2. 表格化的頁面結(jié)構(gòu)3用表格規(guī)劃頁面結(jié)構(gòu)4. 用表格設(shè)計頁面3.1. 嵌套表格 簡單地說，嵌套表格就是一個表格中含有另一個表格。引入嵌套表格有3個方面的原因。網(wǎng)頁的排版有時會很復(fù)雜，在外部需要一個

15、表格來控制總體布局，如果內(nèi)部排版的細(xì)節(jié)也通過總表格來實現(xiàn)，容易引起行高列寬等的沖突，給排版工作帶來困難。其次，瀏覽器在解析網(wǎng)頁的時候，是將整個網(wǎng)頁下載完畢之后才顯示表格，如果不使用嵌套，表格非常復(fù)雜，瀏覽者需要等待很長時間才能看到網(wǎng)頁內(nèi)容。在嵌套表格中，可以利用表格的背景圖像、邊框、間距和邊距等屬性得到漂亮的邊框效果，制作出精美的網(wǎng)頁。 創(chuàng)立嵌套表格的操作方法很簡單，先插入總表格，然后將鼠標(biāo)光標(biāo)置于要插入嵌套表格的單元格中，繼續(xù)插入表格即可。3.2. 表格化的頁面結(jié)構(gòu) 一個頁面的主要骨架結(jié)構(gòu)，大體可分為如下幾局部：Container所有內(nèi)容、Logo標(biāo)志、Header頭部、Navigation

16、導(dǎo)航欄、Main Content主要內(nèi)容、Sidebar側(cè)欄、Footer頁腳，如右圖所示。這些局部都可以看成由一個個表格組成的。Container：指頁面包含的所有內(nèi)容，所有的Web頁面都用一個Container，主要為了包含一些頁面元素。Header：網(wǎng)頁的頭部，嚴(yán)格意義上來說，Header并不是一個特定的元素，它更多用于放置Logo、導(dǎo)航欄等常見元素。Logo：Logo是一個專用標(biāo)志，用于說明網(wǎng)站的身份和品牌。一般將Logo放在Header的左上角，使訪問者第一眼就能看到。 Navigation：導(dǎo)航欄局部。頁面導(dǎo)航是最重要的元素之一，訪問者一般都使用它來訪問網(wǎng)站中的其他內(nèi)容，為了便于用

17、戶使用，容易找到，就放在頂端附近。Main Content：主要內(nèi)容局部。這是網(wǎng)站的核心，它是Web頁面的焦點。Sidebar：側(cè)欄局部。主要放置一些次要內(nèi)容，如廣告、站點搜索、訂閱鏈接、聯(lián)系方法等，這個內(nèi)容不是必需的。一般將Sidebar放在頁面右側(cè)，也可以將其放在左側(cè)或兩邊，只要不干擾主要內(nèi)容的瀏覽就行，Sidebar往往是用縱向?qū)Ш?。Footer：頁腳局部。Web頁面的尾部總會有一個頁腳，這是Web頁面的結(jié)束局部。和Header一樣，F(xiàn)ooter也不是一個特定的元素。在頁腳里一般包含版權(quán)、法律聲明以及主要的聯(lián)系方式，也可以包含一些重要的鏈接。3.3. 用表格規(guī)劃頁面結(jié)構(gòu) 在設(shè)計頁面時，為

18、了整體把握頁面結(jié)構(gòu)，可以先用表格將頁面的主體框架勾勒出來，然后再針對每個局部進行內(nèi)容的填充，如以下圖所示。具體操作參考范例解析。3.4. 用表格設(shè)計頁面頁面的框架設(shè)計好之后就可以填充相應(yīng)的內(nèi)容了，如以下圖所示，具體操作參見范例解析。講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第五講 文本處理 1、文本輸入 2、文本的編輯 3、特殊文字處理 1、文本的輸入1文本概述2輸入文本3導(dǎo)入文檔4復(fù)制文檔1.1. 文本概述在絕大多數(shù)網(wǎng)頁中，文本內(nèi)容占據(jù)著核心的地位，它負(fù)責(zé)主要信息的傳播，是信息的主要載體。同時為了使頁面美觀整齊，還需要對輸入的文本進行修飾和排版。如果在頁面中要輸

19、入的文本較少，可直接通過鍵盤輸入文本，假設(shè)是在其他位置存在的大段文本內(nèi)容那么可以通過復(fù)制、粘貼或?qū)氲姆绞絹硗瓿?。無論是直接輸入文本還是從外部導(dǎo)入，都需要先在網(wǎng)頁中單擊一次鼠標(biāo)來定位，即指定文本開始的地方，對于表格性的文字內(nèi)容，可以直接按Tab鍵跳到下一個單元格。 1.2. 輸入文本鼠標(biāo)單擊一下編輯區(qū)，此時鼠標(biāo)光標(biāo)在編輯區(qū)閃動，即可直接輸入文本，如以下圖所示。1.3. 導(dǎo)入文檔如果有現(xiàn)成的Word文檔內(nèi)容需要輸入到頁面來，可以采用導(dǎo)入的方法 。將鼠標(biāo)光標(biāo)置于需要導(dǎo)入文本的單元格內(nèi)，然后執(zhí)行【文件】/【導(dǎo)入】/【W(wǎng)ord文檔】命令，翻開【導(dǎo)入Word文檔】對話框，選中需要導(dǎo)入的Word文檔 ，

20、單擊“翻開按鈕，將Word文檔導(dǎo)入到頁面中 。1.4. 復(fù)制文檔首先選中需要的文本，按Ctrl+C組合鍵復(fù)制，或者執(zhí)行右鍵快捷菜單中的【復(fù)制】命令。將鼠標(biāo)光標(biāo)置于要插入文本的地方，按Ctrl+V組合鍵粘貼，或者執(zhí)行右鍵快捷菜單中的【粘貼】命令，將所需文本粘貼到文檔中。2、特殊字符處理1文本屬性面板2 設(shè)置字體字號3設(shè)置段落格式4應(yīng)用樣式2.1. 文本屬性面板在文本的【屬性】面板中，可以對文本的屬性進行詳細(xì)的編輯和設(shè)置，如以下圖所示。對文本的編輯主要包括大小、字體、字形、顏色等。文本常用到的對齊方式有：左對齊、居中對齊、右對齊和兩端對齊 。 2.2. 設(shè)置字體字號選中文本后，直接在屬性面板中，選

21、擇相應(yīng)的字體、字號即可，如以下圖所示。2.3. 設(shè)置段落格式添加段落可以直接在需要分段的地方按Enter鍵。在兩行文字之間添加一空行，可以按Shift+Enter組合鍵。按Ctrl + Shift +Space組合鍵可添加多個空格。給多行文字添加工程符號或編號前，要先用Enter鍵將他們分開，如果間隙太大，可在代碼視圖中，將多余的“和空行刪除。2.4. 應(yīng)用樣式在設(shè)計其他文本格式時，系統(tǒng)會自動生成樣式，再設(shè)置其他文本時，假設(shè)需要設(shè)置同樣的樣式可以直接套用樣式。選中其他文本然后在【屬性】面板的【樣式】下拉列表中選擇樣式，即可將其他文本設(shè)置成相同的格式了，如右圖所示。3、特殊字符處理1添加字體2

22、特殊字符3插入水平線4插入版權(quán)符3.1 添加字體 Dreamweaver 8系統(tǒng)自帶的字體比較少，用戶可以自己添加一些常用的其他字體 ，具體操作如下。3.2 特殊字符對于網(wǎng)頁中需要的特殊字符，可以通過執(zhí)行【插入】/【HTML】/【特殊字符】命令，在特殊字符列表中選擇，單擊即可插入，如下圖。 3.3 插入水平線 在文本排版中，可以使用水平線來分隔文本。插入水平線的方法及屬性設(shè)置如下：3.4 插入版權(quán)符 執(zhí)行【插入】/【HTML】/【特殊字符】/【版權(quán)】命令，插入版權(quán)符號，如右圖所示。 講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第六講 圖像處理 1、圖像的插入 2、設(shè)

23、置圖像格式 3、插入圖像對象. 1、圖像的插入1常用的圖像格式2圖像插入3圖像的上傳保存1.1. 常用的圖像格式 在網(wǎng)頁中經(jīng)常使用的圖像是JPG和GIF圖，還有少量的PNG圖。JPG格式：全稱是JPEG，即聯(lián)合圖像專家組格式，是用于攝影或連續(xù)色調(diào)圖像的高級格式，這是因為JPG圖可以包含幾百萬種顏色。隨著JPG文件品質(zhì)的提高，文件的大小也將隨之增加。通常通過壓縮JPG文件在圖像的品質(zhì)和文件大小之間到達(dá)良好的平衡。GIG格式：即圖形交換模式。此類格式形成一種壓縮的8位圖像文件。正因為它是經(jīng)過壓縮的，而且又是8位的，所以這種格式的文件大多用于網(wǎng)絡(luò)傳輸上，速度要比傳輸其它格式的圖像文件快得多，它的缺點

24、就是不能用于存儲真彩的圖像文件。PNG格式：PNG(Portable Network Graphic Format，便攜式網(wǎng)絡(luò)圖象格式)是W3C 組織在20世紀(jì)90年代中期開始開發(fā)的一種無損位圖文件存儲格式，是一種輕便、無法律障礙、壓縮性能好且標(biāo)準(zhǔn)好的一個標(biāo)準(zhǔn)，其目的是企圖替代GIF和TIFF，同時增加一些它們文件格式所不具備的特性。1.2插入圖像執(zhí)行【插入】/【圖像】命令，翻開【選擇圖像源文件】對話框，在【查找范圍】下拉列表中找到圖片所在目錄，單擊選中，然后單擊“確定按鈕即可，如以下圖所示。1.3圖像的上傳保存在創(chuàng)立站點的時候，一般都會在根目錄下創(chuàng)立一個images 文件夾，用于專門的存放圖

25、片文件。假設(shè)插入的圖片與網(wǎng)頁文件不在相同的根目錄下，系統(tǒng)會提示用戶復(fù)制圖片到根目錄下。2、 設(shè)置圖像格式1. 圖像格式2. 具體設(shè)置方法3圖像編輯區(qū)4. 編輯圖像2.1圖像格式 圖像的格式主要有下面幾個方面：圖像大小更改：更改圖像大小有兩種方法，方法一：在【屬性】面板中設(shè)置【高】文本框和【寬】文本框；方法二：直接拖拉圖像邊框的控點。更給圖像的大小后，可以直接按按鈕，將圖片恢復(fù)到初始大小。對齊方式：圖像的對齊方式有3種：左對齊、居中對齊、右對齊。默認(rèn)的對棄方式是：左對齊。圖文混排：在圖文混排的頁面中，可以通過設(shè)置【垂直邊距】文本框和【水平邊距】文本框來設(shè)置圖片和四周文本之間的間距的。在【對齊】列

26、表中列舉了多種圖文混排的對齊方式。2.2具體設(shè)置方法改變大?。涸O(shè)置對齊：設(shè)置邊距： 2.3圖像編輯區(qū)除了對圖像的格式進行設(shè)置外，在【屬性】面板中還可以對圖像進行編輯美化操作，如對圖像進行編輯、裁減、亮度和比照度以及銳化等菜做，如下圖的圖片編輯區(qū) 。2.4圖像編輯 對圖像編輯主要有下面幾個方面：亮度、比照度、銳化等，以下圖列舉了亮度和比照度的設(shè)置、銳化的設(shè)置。3、 插入圖型對象1. 圖型對象2. 圖像占位符3鼠標(biāo)經(jīng)過圖像4. 導(dǎo)航條3.1圖像對象 在Dreamweaver 8中，系統(tǒng)為用戶提供了一些特殊的功能：圖像對象，如鼠標(biāo)經(jīng)過圖像、導(dǎo)航條、占位符等，如以下圖所示。3.2 圖像占位符 在設(shè)計網(wǎng)

27、頁，如果頁面的框架已經(jīng)設(shè)計好了，但需要的圖像素材還沒有準(zhǔn)備齊全，此時可以插入一個指定大小的占位符，等將來圖片準(zhǔn)備好之后，再替換成圖片 。3.3 鼠標(biāo)經(jīng)過圖像 在瀏覽器中當(dāng)鼠標(biāo)經(jīng)過圖像時，該圖像發(fā)生變化，這就是鼠標(biāo)經(jīng)過圖像。它實際上是由兩個圖像組成，當(dāng)鼠標(biāo)不在圖像上時，顯示原來圖像，當(dāng)鼠標(biāo)經(jīng)過時那么顯示另外一個圖像 。3.4 導(dǎo)航條 由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。導(dǎo)航條通常為在站點上的頁面和文件之間移動提供一條簡捷的途徑。當(dāng)鼠標(biāo)移到導(dǎo)航條上時，導(dǎo)航條的文字內(nèi)容標(biāo)成圖片按鈕，擋按下鼠標(biāo)時又發(fā)生了變化，給人很新鮮的感覺。 講課結(jié)束 下課休息Dreamweaver 8 中文版

28、網(wǎng)頁制作基礎(chǔ)主講人 第七講 超鏈接技術(shù) 1、認(rèn)識超鏈接 2、超鏈接的種類 1、認(rèn)識超鏈接1超鏈接的概念2文本超鏈接3. 更改超鏈接默認(rèn)屬性4圖像超鏈接1.1. 超鏈接的概念什么是超鏈接：所謂的超鏈接是指從一個對象指向另一個對象的鏈接關(guān)系，源對象可以是文本、圖像、按鈕等，目標(biāo)對象可以是一個頁面、一張圖片、一個文件、一個郵件地址或者一個應(yīng)用程序等等。當(dāng)鼠標(biāo)光標(biāo)移到添加了超鏈接的對象上時，光標(biāo)就變成了小手狀如圖1，在超鏈接對象上單擊后，鏈接目標(biāo)將被翻開或者運行，如圖2。在默認(rèn)狀態(tài)下，如果為文本添加了超鏈接后，那么該文本就顯示為藍(lán)色字體且?guī)в邢聞澗€，用于與普通文本區(qū)別，單擊后文本的顏色又會發(fā)生改變。用

29、戶也可以在頁面屬性里修改鏈接的顯示狀態(tài)。1.2文本超鏈接首先選中文本，在【常用】插入欄單擊插入超鏈接按鈕，翻開【超級鏈接】對話框，在【文本】文本框中輸入超鏈接文本，在【鏈接】選項框輸入目標(biāo)網(wǎng)頁名稱或者單擊按鈕選擇目標(biāo)文件，在【目標(biāo)】選項框的列表中選擇翻開目標(biāo)的位置，在【標(biāo)題】文本框輸入相關(guān)文本，如以下圖所示 【超級鏈接】對話框中需要設(shè)置的各項的含義?！疚谋尽课谋究颍涸陧撁嬷酗@示的帶有超鏈接的文本，【鏈接】選項框：單擊超鏈接后將要跳轉(zhuǎn)到的目標(biāo)對象?！灸繕?biāo)】選項框：目標(biāo)對象的翻開位置：_bank代表在一個新的窗口中翻開鏈接對象；_self表示在當(dāng)前窗口翻開鏈接對象，它是系統(tǒng)的默認(rèn)值；_parent

30、和_top都表示在一個完整的窗口翻開鏈接目標(biāo)?！緲?biāo)題】文本框：鼠標(biāo)光標(biāo)移到超鏈接文本上時顯示的文字 默認(rèn)情況下，帶超鏈接的文本顯示為藍(lán)色，且?guī)в邢聞澗€，用戶可以自行設(shè)置不同的顯示狀態(tài)。在【屬性】面板單擊按鈕，翻開【頁面屬性】對話框，在【分類】欄單擊【鏈接】項，然后在右側(cè)具體的工程中進行具體的設(shè)置，如以下圖所示。1.3. 更改超鏈接默認(rèn)屬性1.4圖像超鏈接單擊選中一個圖片，在【屬性】面板中單擊【鏈接】文本框后的按鈕 ，如圖1，翻開【選擇文件】對話框，如圖2，找到目標(biāo)文件“Description001.html，然后單擊“確定按鈕 ，為圖像創(chuàng)立超鏈接完成，最終的【屬性】面板顯示如圖3所示 。2、超

31、鏈接的種類1按路徑分類2按性質(zhì)分類3. 錨記鏈接4熱點鏈接5. 電子郵件鏈接2.1按路徑分類 根據(jù)鏈接對象的路徑不同，可以分為：內(nèi)部鏈接、外部鏈接和錨記鏈接。內(nèi)部鏈接：鏈接到當(dāng)前網(wǎng)站內(nèi)的其他網(wǎng)頁，上一節(jié)所列舉的兩個例子都是內(nèi)部鏈接。外部鏈接：鏈接到網(wǎng)站外的其他網(wǎng)頁，在【鏈接】文本框輸入完整的地址，如鏈接到搜狐網(wǎng)站首頁，那么要輸入“ :/。錨記鏈接：鏈接到當(dāng)前翻開的網(wǎng)頁中某個指定位置。 根據(jù)鏈接對象的性質(zhì)不同，鏈接又可分為：文本鏈接、圖像鏈接、電子郵件鏈接、多媒體文件鏈接和空鏈接等。其中的文本鏈接和圖像鏈接是大家比較常用的鏈接，需要特別說明一點的是圖像鏈接的一個特例：熱點鏈接。熱點鏈接：鏈接指向

32、一張圖片的某一局部。電子郵件鏈接：鏈接指向一個E-mail地址。多媒體文件鏈接：鏈接指向一個多媒體文件。 空鏈接：鏈接不指向任何目標(biāo)文件，一般用“#代替。2.2按性質(zhì)分類2.3錨記鏈接 通過建立錨記鏈接，直接跳轉(zhuǎn)到指定的位置。 2.4熱點鏈接熱點鏈接又叫圖像映射，它是指將一個圖片劃成多個區(qū)域，每個區(qū)域鏈接到不同的對象上去。當(dāng)瀏覽者單擊映射圖時，瀏覽器會自動判斷鼠標(biāo)單擊在哪個熱點上，并根據(jù)判斷跳轉(zhuǎn)到相應(yīng)的對象上去 。2.5電子郵件鏈接 電子郵件鏈接是指連接到E-mail地址的鏈接。如果用戶的機器已經(jīng)安裝了Outlook、Foxmail等郵件軟件，在瀏覽網(wǎng)頁時單擊一個E-mail地址鏈接就會自動翻

33、開一個郵件發(fā)送窗口，并且地址欄已經(jīng)自動添加了鏈接的E-mail地址。先選中目標(biāo)，在屬性面板添加電子郵件地址。單擊含有電子郵件鏈接的目標(biāo)，自動翻開郵件軟件講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第八講 框架的使用 1、認(rèn)識框架 2、設(shè)置框架屬性 3、設(shè)計框架頁面 1、認(rèn)識框架1什么是框架、框架集2應(yīng)用框架3創(chuàng)立框架集4調(diào)整框架集5命名框架6刪除框架1.1. 什么是框架框架是瀏覽器窗口中的一個區(qū)域，獨立顯示一個HTML文檔內(nèi)容，這局部內(nèi)容既可以與瀏覽器的其他區(qū)域內(nèi)容毫無關(guān)系，也可以與其他區(qū)域內(nèi)容合成一個整體 ?？蚣芗且粋€HTML 文件，它定義一組框架的布局和屬性，

34、包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的 URL?？蚣芗募旧聿话跒g覽器中顯示的 HTML 內(nèi)容，但 noframes 局部除外；框架集文件只是向瀏覽器提供給如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息 。1.2應(yīng)用框架框架用的最多的場合就是導(dǎo)航，一組框架用來顯示導(dǎo)航欄，另一組框架用來顯示具體內(nèi)容，如下圖，這是一個左右結(jié)構(gòu)的框架頁面，左側(cè)顯示的是導(dǎo)航欄，右側(cè)是主框架，用來顯示左側(cè)每個欄目的具體信息 。請注意，框架不是文件。用戶很可能會以為當(dāng)前顯示在框架中的文檔是構(gòu)成框架的一局部，但該文檔實際上并不是框架的一局部?？蚣苁谴娣盼臋n的容器，任何一個框架都可

35、以顯示任意一個文檔。1.3創(chuàng)立框架集 常用的創(chuàng)立框架集的方法，如下：從插入工具欄創(chuàng)立，在【布局】插入欄單擊圖標(biāo)右側(cè)的倒三角，翻開下拉樣式表，單擊選擇需要的框架樣式即可。用菜單創(chuàng)立，在窗口中執(zhí)行【插入】/【HTML】/【框架】命令，然后選擇某一個框架集即可。用命令創(chuàng)立，在窗口中執(zhí)行【文件】/【新建】/【框架集】命令也可以創(chuàng)立框架集。1.4調(diào)整框架集 使用預(yù)定義插入的框架集并不一定完全符合用戶的需要，用戶可以根據(jù)自己的需要，進一步設(shè)計自己的框架集 ，將鼠標(biāo)光標(biāo)置于需要變動的頂部框架內(nèi)，執(zhí)行【修改】/【框架頁】/【拆分左框架】命令，如右圖所示。1.5命名框架 對于框架集中每個框架的命名，用戶自己可以

36、設(shè)置新的名稱，也可以采用默認(rèn)的框架命名，如左邊框架就叫l(wèi)eftFrame、頂部框架就叫topFrame、中間的主要內(nèi)容框架叫mainFrame、右邊的叫rightFrame、底部的叫bottomFrame。在絕大多數(shù)的情況下，我們都用系統(tǒng)默認(rèn)的命名方法，形象好記 。1.6刪除框架 框架集中的框架是不可以直接刪除的，要想刪除框架怎么辦呢？其實很簡單，只需要將要刪除框架的邊框拖出編輯區(qū)即可 ，將鼠標(biāo)光標(biāo)移到需要刪除框架的邊框上，待光標(biāo)變成雙箭頭，按住鼠標(biāo)左鍵不放 抓圖，拖出編輯區(qū)即可，如以下圖所示。2、 設(shè)置框架屬性1. 選擇框架和框架集2. 設(shè)置框架屬性3. 設(shè)置框架集屬性2.1選擇框架和框架集

37、 利用框架面板，可以很方便的選種框架和框架集?？蚣苊姘迳现苯訂螕暨x中“topFrame框架，那么編輯區(qū)中被選中的框架邊框呈虛線狀態(tài)，如左圖所示 ，在框架面板中單擊框架集的邊框，可以選中整個框架集，此時編輯區(qū)的框架集邊框呈虛線狀態(tài)，如右圖所示 。2.2設(shè)置框架屬性 選種框架以后，利用屬性面板設(shè)置框架屬性。 框架【屬性】面板上的各項含義：【框架名稱】文本框：用于設(shè)置框架的名稱?！驹次募课谋究颍河糜谥付ㄔ诳蚣苤酗@示的網(wǎng)頁文件?！緷L動】選項框：指定框架中是否顯示滾動條?！静荒苷{(diào)整大小】復(fù)選框：設(shè)置瀏覽時是否能夠改變框架的大小?！具吙蝾伾课谋究颍簽榭蚣艿倪吙蛟O(shè)置顏色?！具吔鐚挾取?、【邊界高度】文本框

38、：用于設(shè)定框架的內(nèi)容與左右、上下邊框之間的距離，以像素為單位。2.3設(shè)置框架集屬性 框架集【屬性】面板上的局部項含義：【框架集】：用于顯示當(dāng)前框架集的結(jié)構(gòu)，顯示所選框架集是幾行幾列?！具吙?qū)挾取课谋究颍涸O(shè)置框架集中所有邊框的寬度，單位為像素?！具吙蝾伾课谋究颍涸O(shè)置框架邊框的顏色，默認(rèn)為灰色?！局怠课谋究颍涸O(shè)置選定行的高度或者選定列的寬度?！締挝弧浚河糜谠O(shè)置行或列尺寸的度量單位。3、設(shè)計框架頁面1用框架設(shè)計頁面2設(shè)置無框架內(nèi)容3.1用框架設(shè)計頁面 用框架設(shè)計頁面的根本步驟：創(chuàng)立框架頁面-保存框架頁面-設(shè)置每個框架的源文件-保存預(yù)覽3.2設(shè)置無框架內(nèi)容 有些瀏覽器不支持框架技術(shù)，就不能正確瀏覽框

39、架式網(wǎng)頁。Dreamweaver 8中允許創(chuàng)立無框架內(nèi)容，以備用戶因瀏覽器問題不能正常瀏覽網(wǎng)頁時顯示提示信息 。 具體操作：執(zhí)行【修改】/【框架頁】/【編輯無框架內(nèi)容】命令，切換到無框架頁面，在無框架內(nèi)容編輯窗口輸入文本“很抱歉，您的瀏覽器不支持框架技術(shù)，無法正常顯示！等內(nèi)容，再次執(zhí)行【修改】/【框架頁】/【編輯無框架內(nèi)容】命令，回到正常的編輯窗口。 講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第九講 層的使用 1、層的根本知識 2、層的屬性設(shè)置 3、層的高級應(yīng)用 1、層的根本知識1層的概念2插入層3繪制層4嵌套層1.1. 層的概念什么是層？層是一個被準(zhǔn)確定位的HT

40、ML網(wǎng)頁元素，它和文字、圖像等一樣都是網(wǎng)頁的組成局部；層也是一個網(wǎng)頁內(nèi)容的容器，可以在層中放入任何頁面元素；同時層也可以層疊和疊加。利用層可以控制網(wǎng)頁元素的位置，可以實現(xiàn)網(wǎng)頁對象的重疊和立體化等動態(tài)效果，使網(wǎng)頁內(nèi)容變得更加豐富。1.2插入層在【插入】菜單欄執(zhí)行【插入】/【布局對象】/【層】命令，即可在頁面中插入一個默認(rèn)的層，如下圖 。用菜單命令插入的層，采用的是程序默認(rèn)的設(shè)置，寬是200像素，高115像素。 1.3繪制層將【常用】插入欄切換到【布局】插入欄 ，單擊繪制層按鈕 ，移動鼠標(biāo)光標(biāo)到編輯窗口，待鼠標(biāo)光標(biāo)變成十字狀，按住鼠標(biāo)左鍵拖拉出一個16070像素的層，如下圖。放開鼠標(biāo)即可完成，用這

41、個方法插入的層可以控制大小 。層的大小1.4嵌套層 嵌套是將一個層包含在另一個層中。嵌套層通常用于層的疊加和組織，并且子層可隨父層一起移動，可繼承父層的一些屬性。 首先在編輯窗口插入一個層 ，將鼠標(biāo)光標(biāo)置于父層內(nèi)，再執(zhí)行【插入】/【布局對象】/【層】命令插入一個子層，這就是嵌套層，如下圖。子層父層2、 層的根本屬性2.1 層的選取2.2 層的屬性設(shè)置 2.3 移動層2.4 多個層操作2.1層的選取 設(shè)置層屬性前要先選中層，常用的層的選擇方法有如下幾種：直接在編輯窗口中單擊層的邊框。將鼠標(biāo)光標(biāo)置于層內(nèi)，然后在單擊標(biāo)簽選擇器上的標(biāo)簽。單擊層上面的圖標(biāo) ，也可選中層。執(zhí)行【窗口】/【層】命令，翻開【

42、層】面板，在面板中單擊層名稱即可選中。 2.2層的屬性設(shè)置 選中層之后，就可以在【屬性】面板查看和設(shè)置層的屬性層【屬性】面板局部項的說明如下：【層編號】選項框：設(shè)置層名，此名稱唯一?！咀蟆课谋究?、【上】文本框：設(shè)置層相對于編輯窗口或父層左上角的位置?！緦挕课谋究?、【高】文本框：設(shè)置層的大小?！綵軸】文本框：設(shè)置層的層次順序號?！究梢娦浴窟x項框：設(shè)置層的可見性，包括“default默認(rèn)、“inherit繼承父層的該屬性、“visible可見、“hidden隱藏4個選項?！绢悺窟x項框：添加對CSS樣式的引用?！疽绯觥窟x項框：僅用于CSS層指的是層的內(nèi)容過大時如何處理?！皏isible：增加尺寸以顯

43、示去不內(nèi)容；“hidden：只能顯示層以內(nèi)的內(nèi)容；“scroll：增加滾動條，無論內(nèi)容是否超出；“auto：只有內(nèi)容超出時才增加滾動條?！炯糨嫛浚河脕碇付▽拥哪囊痪植績?nèi)容是可見的，“左、“右、“上、“下輸入的數(shù)值是距離層的4個邊界的像素值。2.3移動層 移動層：移動鼠標(biāo)光標(biāo)到層的邊框上，待鼠標(biāo)光標(biāo)變成 狀時，按住鼠標(biāo)左鍵不放，拖動層，到達(dá)目的后放開鼠標(biāo)即可 。2.4多個層操作多個層操作：按住Shift鍵，然后依次單擊選中三個層 ，將它們同時選中，執(zhí)行【修改】/【排列順序】/【左對齊】等命令 ，如下圖。3、 層的高級應(yīng)用3.1 隱藏與顯示3.2 層的堆疊3.3 與表格的相互轉(zhuǎn)化3.1 隱藏與顯示

44、層的隱藏與顯示可以通過【層】面板上的眼形 列來設(shè)定，在眼形圖標(biāo)所在的列中，單擊層名的前部，單擊一次鼠標(biāo)，就改變一種狀態(tài)。當(dāng)層名前的圖標(biāo)為 時，表示該層處于隱藏狀態(tài)；當(dāng)層名前的圖標(biāo)為 時，表示該層處于顯示狀態(tài)；如果層名前沒有任何圖標(biāo)，表示該層處于瀏覽器默認(rèn)狀態(tài)或者繼承其父層的可見性。設(shè)置層的顯示/隱藏狀態(tài)在未設(shè)置層的顯示狀態(tài)前，層名前面不顯示任何圖標(biāo)，即采用默認(rèn)的顯示狀態(tài)。單擊一次，顯示 ，表示隱藏，再單擊一個，顯示 ，表示顯示，再單擊一次，圖標(biāo)消失，回到默認(rèn)狀態(tài) 。3.2 層的堆疊 在【層】面板中可以直接拖動某層到新的位置，從而改變層的堆疊次序，如下圖 3.3 與表格的相互轉(zhuǎn)化文檔中先選中層，

45、然后執(zhí)行【修改】/【轉(zhuǎn)換】/【層到表格】 ，可以將層轉(zhuǎn)化為表格。選中整個表格，執(zhí)行【修改】/【轉(zhuǎn)換】/【表格到層】命令 ，可以將表格轉(zhuǎn)化為多個層。講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第十講 應(yīng)用多媒體技術(shù) 1、插入Flash動畫 2、插入視頻文件 3、添加音樂背景 1、插入Flash動畫1插入FLash動畫2插入FLash文本3插入FLash按鈕1.1. 插入Flash動畫執(zhí)行【插入】/【媒體】/【Flash】命令 Flash【屬性】面板局部設(shè)置項的含義：【Flash】文本框：指定用來標(biāo)識Flash以進行腳本撰寫的名稱?！疚募浚褐付ㄖ赶?Flash 對象文

46、件的路徑。單擊文件夾圖標(biāo)以瀏覽到某一文件，或者鍵入路徑?！敬怪边吘唷?、【水平邊距】文本框：指定Flash動畫邊框與頁面上邊界和做邊界的距離，以像素為單位?！酒焚|(zhì)】選項框：為定義該按鈕的 object 和 embed 標(biāo)簽設(shè)置 quality 參數(shù)。設(shè)置越高，F(xiàn)lash 內(nèi)容的顯示效果就越好?！颈壤窟x項框：為定義按鈕或文本對象的 object 和 embed 標(biāo)簽設(shè)置 scale 參數(shù)。此參數(shù)定義 Flash 內(nèi)容在由 width 和 height 值為該 SWF 文件定義的區(qū)域內(nèi)顯示的方式。 按鈕： 單使它可以在“文檔窗口中預(yù)覽 Flash 對象。 按鈕：將選定的對象重設(shè)為原始大小。 按鈕：

47、翻開一個對話框，可以在其中輸入附加參數(shù)。 按鈕：翻開 Flash 對象對話框，可以對選定的 Flash 對象進行編輯。1.2插入FLash文本 執(zhí)行【插入】/【媒體】/【Flash文本】命令 ，翻開【插入Flash文本】對話框 ，設(shè)置完畢后，插入Flash文本的效果如以下圖所示的“行業(yè)快訊。 【插入Flash文本】對話框局部項含義：【顏色】文本框：Flash文本的初始顏色。【滾動顏色】文本框：設(shè)置鼠標(biāo)移動上面的變換顏色?！炬溄印课谋究颍簽檫@個Flash文本內(nèi)容添加超級鏈接對象?！灸繕?biāo)】選項框：指定連接的對象在頁面中翻開的位置?！颈尘吧课谋究颍涸O(shè)置Flash文本的背景顏色?！玖泶鏋椤课谋究颍河?/p>

48、來設(shè)置保存此swf文件的地址和文件名。 1.3插入Flash按鈕執(zhí)行【插入】/【媒體】/【Flash按鈕】命令，翻開【插入Flash按鈕】對話框 ，先選擇按鈕樣式，再輸入文本，然后確定即可。2、 插入視頻文件2.1 根本知識2.2 插入WMV視頻文件 2.3 插入RM文件2.1根本知識在網(wǎng)頁中插入的視頻文件格式有多種，如常見的AVI、WMV、MPEG、RM、RMVB、ASF等。但是視頻的格式不同，對應(yīng)的播放器是有區(qū)別的，如AVI、WMV、ASF一般用Windows自帶的Media Player進行播放，RM格式的文件一般用RealPlayer播放。雖然它們播放器不同，但它們一般都是使用Acti

49、veX控件或者插件來播放。ActiveX控件是Microsoft公司對瀏覽器能力的一個擴展。當(dāng)瀏覽器載入一個頁面后，發(fā)現(xiàn)這個頁面含有瀏覽器不支持的ActiveX控件時，瀏覽器就提示安裝所需軟件。插件功能是針對Netscape瀏覽器而言的，通過這個插件可以使瀏覽器可以播放多種動畫和視頻文件 。 2.2插入WMV視頻文件執(zhí)行【插入】/【媒體】/【插件】命令 ，在【選擇文件】對話框中選擇好WMV文件 ，然后通過屬性面板設(shè)置相應(yīng)屬性即可。2.3插入RM文件 執(zhí)行【插入】/【媒體】/【ActiveX】命令 ，然后在【屬性】面板中的【ClassID】下拉框中輸入：“CFCDAA03-8BEA-11cf-B

50、84B-0020AFBBCCFA ，【屬性】面板中單擊“參數(shù)按鈕，翻開【參數(shù)】對話框，添加自動播放參數(shù)“aotoStart，并設(shè)置值為“1，再添加 “SRC的表示路徑的參數(shù)，并將其值設(shè)置為視頻文件安定額路徑 。3、 插入音樂背景執(zhí)行【插入】/【媒體】/【插件】命令 ，在【選擇文件】對話框中選擇好音樂文件，然后選中音樂占位符，在【屬性】面板中將【寬】和【高】都設(shè)為“0像素，左后設(shè)置一下參數(shù)即可。 講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第十講 CSS樣式表 1、認(rèn)識樣式表 2、應(yīng)用樣式表 3、CSS濾鏡 1、認(rèn)識樣式表1CSS樣式表概念2創(chuàng)立CSS樣式3樣式表類型

51、4CSS規(guī)那么定義5. CSS樣式結(jié)構(gòu)樣式表概念什么是CSS？CSS英文全稱是Cascading Style Sheets，中文意思是層疊樣式表，簡稱樣式表或者CSS。CSS技術(shù)由W3CWorld Wide Web Consortium，全球廣域網(wǎng)協(xié)會推薦使用，1996年批準(zhǔn)了CSS1標(biāo)準(zhǔn)，隨后又公布了CSS2標(biāo)準(zhǔn)，樣式表得到了更多的充實，目前絕大多數(shù)都是用的CSS2標(biāo)準(zhǔn)。CSS樣式表是一系列格式規(guī)那么的集合，它可以控制網(wǎng)頁內(nèi)容的外觀，使得網(wǎng)頁內(nèi)的各文本、圖像、表格等對象具有統(tǒng)一的風(fēng)格，省去了為每個對象單獨設(shè)置格式的繁瑣。使用CSS樣式，不僅可以控制一個網(wǎng)頁中內(nèi)容的格式，還可以同時控制多個網(wǎng)頁

52、中的內(nèi)容格式。當(dāng)CSS樣式發(fā)生變動時，頁面中所有應(yīng)用該樣式的對象的格式都會自動發(fā)生改變。通過CSS技術(shù)可以有效地對網(wǎng)頁布局、字體、顏色、背景和其他對象的顯示效果做精準(zhǔn)的控制。同時使用CSS可以防止頁面中同類對象格式的重復(fù)設(shè)置，提高了工作效率，減少了頁面的負(fù)擔(dān) 。1.2創(chuàng)立CSS樣式執(zhí)行【窗口】/【CSS樣式】命令，展開【CSS樣式】面板，在【CSS樣式】面板中單擊新建CSS規(guī)那么按鈕 ，翻開【新建CSS規(guī)那么】對話框，在【選擇器類別】中選擇類型，然后在【名稱】選項框中輸入名稱，單擊“確定按鈕后翻開定義規(guī)那么對話框，在【分類】列表中選擇【類型】后設(shè)置具體的樣式內(nèi)容，如以下圖所示。 1.3樣式表類

53、型 樣式表根據(jù)使用的對象不同，分為3個類別?！绢惪捎糜谌魏螛?biāo)簽】：可以創(chuàng)立自定義名稱的CSS樣式，可將樣式規(guī)那么屬性應(yīng)用于任何頁面元素上。所有類樣式均以句點 (.) 開頭，【標(biāo)簽重新定義特定標(biāo)簽的外觀】：可對HTML標(biāo)簽進行重新定義、標(biāo)準(zhǔn)或者擴展其屬性，如body，h1，h2，h3，ul，li等標(biāo)簽。當(dāng)創(chuàng)立或更改CSS樣式時，所有使用該進行格式化的對象都自動更新?！靖呒塈D、偽類選擇器等】：該選項會對標(biāo)簽組合或者是含有特定ID屬性的標(biāo)簽應(yīng)用樣式。當(dāng)html中出現(xiàn)用id的元素時，可以使用這個id來設(shè)置樣式，使用方法與類相似。偽類常用的有a：link，a：visited，a：hover，a：act

54、ive，分別用來定義鏈接未點擊時、點擊后、鼠標(biāo)移過、激活狀態(tài)下的樣式。1.4CSS規(guī)那么定義 在代碼窗口中編寫CSS樣式，對新手來說是很困難的事，在Dreamweaver 8 中可以通過可視化的窗口【CSS規(guī)那么定義】對話框來創(chuàng)立具體的CSS樣式，此處提供了8個類別的樣式設(shè)置，如圖11-8所示?！绢愋汀浚褐饕糜诙x頁面中文本的字體、大小、顏色、樣式和修飾等?！颈尘啊浚褐饕糜诙x頁面元素的背景色和背景圖像?！緟^(qū)塊】：主要用于控制頁面元素的間距，對齊方式等。【方框】：設(shè)置頁面中方框的寬、高，四周的填充、邊界的粗細(xì)?！颈砜颉浚涸O(shè)置網(wǎng)頁元素的邊框效果?！玖斜怼浚嚎刂屏斜韮?nèi)的各項元素?！径ㄎ弧浚簽樵?/p>

55、素設(shè)置精準(zhǔn)的位置，通過它可以讓網(wǎng)頁元素浮動?！緮U展】：用于設(shè)置打印的分頁符和視覺效果。1.5CSS樣式結(jié)構(gòu) CSS樣式結(jié)構(gòu)主要有選擇器和聲明兩局部組成。選擇器是標(biāo)識格式元素的術(shù)語如 P、H1、類名或 ID，聲明用于定義元素樣式。聲明由兩局部組成：屬性如font-size和值如10px。 右面的圖中，body、.text、h1都是選擇器，介于括號 之間的所有內(nèi)容都是聲明，其中body和h1是標(biāo)簽樣式，.text是自定義的類樣式。聲明聲明屬性值屬性選擇器選擇器選擇器2、 應(yīng)用樣式表知識2.1 應(yīng)用樣式表2.2 編輯樣式表 2.3 刪除樣式表2.4 附加外部樣式表2.1應(yīng)用樣式表類樣式可以應(yīng)用于頁面

56、中的任何元素，與當(dāng)前文檔相關(guān)聯(lián)的所有類樣式都顯示在【CSS樣式】面板中。如果是文本元素那么在文本屬性面板的【樣式】下拉列表中顯示所有與文本有關(guān)的類樣式；假設(shè)是表格或圖像等元素那么在對應(yīng)的屬性面板的【類】下拉列表中顯示與當(dāng)前元素相關(guān)的類樣式。要使用樣式時，先選中對象然后直接在下拉列表中選擇樣式即可。標(biāo)簽樣式建立好之后，如果在HTML中使用這些標(biāo)簽的，標(biāo)簽里面的內(nèi)容就將按照定義好的樣式出現(xiàn)。高級樣式創(chuàng)立好之后，假設(shè)當(dāng)html中出現(xiàn)用id的元素時，可以使用這個id來設(shè)置樣式，使用方法與類相似。對于偽類選擇器同標(biāo)簽樣式一樣，設(shè)置好之后就自動更新樣式 。 2.2編輯樣式表展開【CSS樣式】面板，在樣式列

57、表列表中選中需要編輯的樣式，單擊鼠標(biāo)右鍵，在右鍵快捷菜單中選擇【編輯】命令，翻開定義規(guī)那么對話框，再重新編輯CSS樣式 ，如有圖所示。2.3刪除樣式表 在【CSS樣式】面板的樣式列表中選中需要刪除的樣式，單擊鼠標(biāo)右鍵，在右鍵快捷菜單中選擇【刪除】命令項即可 ，如有圖所示。2.4附加外部樣式表 在【CSS樣式】面板中單擊附加樣式表按鈕 ，翻開【鏈接外部樣式表】對話框 ，選擇好樣式表文件后，返回【鏈接外部樣式表】對話框 ，選擇附加方式，然后“確定即可。 附加外部樣式表有兩種方式【鏈接】和【導(dǎo)入】?！炬溄印浚烘溄臃绞皆贖TML代碼中自動生成一個link href標(biāo)簽，并引用指定樣式表的URL，將其定

58、義的CSS規(guī)那么添加到當(dāng)前網(wǎng)頁。本例的link href標(biāo)簽格式如下：【導(dǎo)入】：導(dǎo)入方式將附加樣式表的CSS規(guī)那么嵌入到當(dāng)前網(wǎng)頁的HTML代碼中，并且在.標(biāo)簽之間，如同在代碼視圖編寫CSS規(guī)那么一樣。 如果附件樣式表規(guī)那么條目較多，一般采用【鏈接】方式，較為方便。3、 CSS濾鏡3.1 CSS濾鏡的類型3.2 光暈字效果3.3 圖片翻轉(zhuǎn)效果3.1 CSS濾鏡類型 CSS濾鏡分為靜態(tài)濾鏡和動態(tài)濾鏡兩大類，其中靜態(tài)濾鏡主要是使元素對象產(chǎn)生各種特殊的靜態(tài)效果。動態(tài)濾鏡主要分為混合轉(zhuǎn)換濾鏡和顯示轉(zhuǎn)換濾鏡兩種，主要用于處理圖像之間的淡入和淡出的效果。 靜態(tài)濾鏡主要有如下幾個類型。Alpha濾鏡：用于改變

59、頁面元素的透明度，可使對象呈現(xiàn)半透明的效果。Blur濾鏡：可以使元素對象顯示出風(fēng)吹模糊的效果。Wave濾鏡：可以是頁面對象在垂直方向上產(chǎn)生波浪變形效果。Chroma濾鏡：可以將圖片或者文字中的某種顏色變成透明。Dropshadow濾鏡：為頁面對象添加下落式的陰影效果。Fliph、FlipV濾鏡：FlipH使對象產(chǎn)生水平翻轉(zhuǎn)效果；FlipV使對象產(chǎn)生垂直翻轉(zhuǎn)效果。Glow濾鏡：使對象的外廓產(chǎn)生光暈效果，一般用于文本對象。Gray濾鏡：使一個彩色圖片的彩色變?yōu)榛疑{(diào)。Invert濾鏡：使圖片產(chǎn)生照片底片的效果。Light濾鏡：模擬燈光的投射效果。Mask濾鏡：利用一個對象在另一個對象上產(chǎn)生圖像的遮

60、罩效果。Shadow：添加有漸進感的陰影效果。X-ray：類似X光的效果，使圖片只顯示其輪廓。 3.2 光暈字效果 利用Dreamweaver8 的Glow濾鏡可以制作出光暈字的特殊效果 。Glow有兩個參數(shù)：Color決定光暈的顏色，可用十六進制代碼，也可用顏色單詞表示；Strength表示發(fā)光的強度，取值范圍是0255。 3.2 圖片翻轉(zhuǎn) 利用FlipV濾鏡來產(chǎn)生垂直翻轉(zhuǎn)效果 ， FlipV沒有參數(shù)。講課結(jié)束 下課休息Dreamweaver 8 中文版網(wǎng)頁制作基礎(chǔ)主講人 第十講 CSS樣式表 1、認(rèn)識樣式表 2、應(yīng)用樣式表 3、CSS濾鏡 1、認(rèn)識樣式表1CSS樣式表概念2創(chuàng)立CSS樣式3