dreamweaver網(wǎng)頁設(shè)計(jì)-資料下載頁
2025-03-10 11:34本頁面
【正文】 .css的文件而存在，文件中內(nèi)容即是所有樣式的選擇和聲明。該文件可做為共享文件，讓多個(gè)文檔共同引用并應(yīng)用，達(dá)到站點(diǎn)文件樣式的一致性。同時(shí)，如果修改該樣式表文件，所有引用的文檔都將改變其樣式，達(dá)到網(wǎng)站迅速改版的目的。 ? 內(nèi)部 CSS樣式表：只存在于當(dāng)前文檔中，并只針對(duì)當(dāng)前頁進(jìn)行樣式應(yīng)用的方法。一般存在于文檔 head部分的 style標(biāo)簽內(nèi)。 使用 CSS面板 ? 利用“ CSS”面板，可以輕松創(chuàng)建和管理 CSS規(guī)則。本小節(jié)主要介紹“ CSS”面板的基本操作，包括所有模式與當(dāng)前模式的切換、移動(dòng) CSS規(guī)則、刪除 CSS規(guī)則、重命名類等。在 Dreamweaver CS4中，單擊“窗口” |“ CSS樣式”命令菜單，打開“ CSS”面板，如圖所示。 ? 注意：使用快捷鍵“ Shift” +“ F11”，也可以展開“ CSS”面板，若再按下快捷鍵“ Shift” +“ F11”，則將“ CSS”面板隱藏。 “所有”模式與“當(dāng)前”模式 ? （ 1）“ CSS”面板默認(rèn)情況下，是以“所有”模式展開。在“所有”模式下，“ CSS”面板顯示應(yīng)用到當(dāng)前文檔的所有 CSS規(guī)則。單擊其中一個(gè)規(guī)則，該規(guī)則的屬性出現(xiàn)在下方的列表框中，如圖 ，默認(rèn)情況下屬性以“類別視圖”排列。 ? （ 2）在“ CSS”面板中，單擊“顯示列表視圖”按鈕，屬性以“列表視圖”排列，如圖 。 ? （ 3）在“ CSS”面板中，單擊“只顯示設(shè)置屬性”按鈕，屬性只顯示已設(shè)置的屬性，如圖 。 ? （ 4）切換到“當(dāng)前模式”。在“ CSS”面板中，單擊“切換到當(dāng)前選擇模式”按鈕。此時(shí)，在“當(dāng)前”模式中，“ CSS”面板顯示當(dāng)前所選內(nèi)容的屬性的摘要，如圖所示。 ?二 、 創(chuàng)建 CSS樣式 ? Dreamweaver CS4提供了 4種 CSS樣式表的類型 ， 即類樣式表 、 標(biāo)簽樣式表 、 ID樣式表和復(fù)合樣式表 。 ? （ 1） 在菜單欄中依次選擇 “ 格式 ” |“ CSS樣式 ” |“ 新建 ” 命令 ， 如圖所示 。 ? （ 2） 打開 “ 新建 CSS規(guī)則 ” 對(duì)話框 ， 在 “ 選擇器類型 ” 中選擇要建立的CSS規(guī)則類型 ， 選擇 “ ID” ， 接著在 “ 選擇器名稱 ” 中輸入自定義的 CSS樣式名稱 “ menu” ， 再選中 “ 規(guī)則定義 ” 中的 “ 僅限該文檔 ” 選項(xiàng) ， 單擊 “ 確定 ” 按鈕 。 ? （ 3） 彈出 “ menu的 CSS規(guī)則定義 ” 對(duì)話框 ， 如圖所示 ， 進(jìn)行設(shè)置 。 ? （ 4） 單擊 “ 確定 ” 按鈕 ， 完成 CSS樣式的定義 。 ?三 、 編輯 CSS樣式 ?（ 1） 選擇需要編輯的樣式類型 ， 單擊“ 編輯樣式 ” 按鈕 ， 如下圖所示 。 ?（ 2） 在彈出的 “ CSS規(guī)則定義 ” 對(duì)話框中進(jìn)行相應(yīng)的修改 ， 然后單擊 “ 確定 ” 按鈕 。 ?四 、 應(yīng)用 CSS樣式 ?（ 1） 選中要應(yīng)用樣式的文本 。 ?（ 2） 在 CSS樣式面板中 ， 右擊要應(yīng)用的CSS選項(xiàng) ， 在彈出的快捷菜單中選擇 “ 套用 ” 命令 ， 如左圖所示 。 另外 ， 還可以通過 “ 屬性 ” 面板的 “ ID” 下拉列表框中選擇剛才新建的樣式 “ menu” ， 這樣就可以將該樣式應(yīng)用到文本中了 。 如圖所示 。 五、 CSS屬性 ? 在“ CSS規(guī)則定義”對(duì)話框的“分類”列表框中，共有類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展等八大類。根據(jù) CSS樣式表的用途和要求，分別設(shè)置不同類型的參數(shù)。 ? ：類型屬性主要用來定義文字的字體、大小、樣式、顏色等屬性。下面以新建的類“ .word”為例，來說明如何設(shè)置類型屬性。 ? ：背景屬性主要用來定義頁面的背景顏色或背景圖像。 ? ：區(qū)塊屬性主要用來定義間距和對(duì)齊方式。 ? ：方框?qū)傩灾饕脕矶x元素在頁面上的位置。 ? ：邊框?qū)傩杂脕矶x元素周圍的邊框，例如邊框的寬度、顏色和樣式等。 ? ：列表屬性主要用來定義列表各種屬性，如列表項(xiàng)目符號(hào)、位置等。 ? ：定位屬性主要用來定義層的大小、位置、可見性、溢出方式、剪輯等屬性。 框架的使用 ? 使用框架可以固定共同的部分，在單擊菜單時(shí)把相關(guān)內(nèi)容顯示到可變換的區(qū)域中?？蚣芫褪峭ㄟ^劃分瀏覽器的顯示區(qū)域，把多個(gè)網(wǎng)頁文檔顯示在一個(gè)瀏覽器中。 ? 框架結(jié)構(gòu)的優(yōu)點(diǎn)有以下幾點(diǎn) 。 ? （ 1）統(tǒng)一風(fēng)格。 ? （ 2）便于修改。 ? （ 3）方便訪問。 一、創(chuàng)建框架集 二、框架和框架集的基本操作 三、設(shè)置框架屬性檢查器選項(xiàng) 四、在框架中使用超級(jí)鏈接 一、創(chuàng)建框架集 ? （ 1）由新建文件創(chuàng)建框架集 ? （ 2）由插入工具欄“布局”類別創(chuàng)建框架集 ? （ 3）單擊“創(chuàng)建”按鈕之后，會(huì)彈出“框架標(biāo)簽輔助功能屬性”對(duì)話框，在其中可以為每個(gè)框架設(shè)置標(biāo)題 二、框架和框架集的基本操作 ? 1）選擇框架與框架集 ? 選擇框架與框架集的操作步驟如下： ? （ 1）選擇“窗口” → “框架”命令，打開“框架”面板。 ? （ 2）在面板中單擊框架名稱選中框架，單擊較粗的邊框選中框架集。 ? 2）保存框架與框架集 三、設(shè)置框架屬性檢查器選項(xiàng) ? 1）查看或設(shè)置框架屬性 ? （ 1）在“框架”面板中選擇某個(gè)框架。 ? （ 2）在屬性檢查器中，單擊右下角的展開箭頭，查看所有框架屬性。 ? 2）查看或設(shè)置框架集屬性 ? 選中要設(shè)置屬性的框架集，在“屬性”面板中將顯示該框架集的屬性。 四、在框架中使用超級(jí)鏈接 ? 在屬性面板的“目標(biāo)”下拉菜單中可以指定目標(biāo)文件的顯示窗口?！澳繕?biāo)”下拉菜單的選項(xiàng)如下 : ? （ 1） _blank：放在新窗口中。 ? （ 2） _parent：放到父框架集或包含該鏈接的框架窗口中。 ? （ 3） _self：放在相同窗口中（默認(rèn)窗口無須指定）。 ? （ 4） _top：放到整個(gè)瀏覽器窗口并刪除所有框架。 添加多媒體元素 一、插入網(wǎng)頁背景音樂 二、插入視頻 三、插入 Flash動(dòng)畫 演講完畢，謝謝觀看！
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1