《Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作》課件 項(xiàng)目六 CSS 和 div 的應(yīng)用_第1頁
《Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作》課件 項(xiàng)目六 CSS 和 div 的應(yīng)用_第2頁
《Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作》課件 項(xiàng)目六 CSS 和 div 的應(yīng)用_第3頁
《Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作》課件 項(xiàng)目六 CSS 和 div 的應(yīng)用_第4頁
《Dreamweaver CC網(wǎng)頁設(shè)計(jì)與制作》課件 項(xiàng)目六 CSS 和 div 的應(yīng)用_第5頁
已閱讀5頁，還剩61頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

項(xiàng)目六CSS和div的應(yīng)用1601

美化婚慶策劃網(wǎng)頁頭部2美化婚慶策劃網(wǎng)頁其他欄目目錄CONTENTS1613布局婚慶策劃網(wǎng)頁任務(wù)1

美化婚慶策劃網(wǎng)頁頭部1621.?了解CSS的概念、功能、優(yōu)勢和語法格式。2.?了解選擇器的定義、類型和語法格式。3.?了解盒子模型及盒子的有關(guān)屬性。4.?能創(chuàng)建并引用CSS樣式表，使用CSS類選擇器、標(biāo)簽選擇器、ID選擇器、復(fù)合選擇器美化網(wǎng)頁元素，編輯CSS樣式代碼。163本任務(wù)是網(wǎng)頁頭部的美化實(shí)例（見下圖）。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“CSS設(shè)計(jì)器”面板、“屬性”面板、代碼視圖來新建、編輯、引用CSS樣式來美化網(wǎng)頁頭部元素的過程和方法，熟悉“CSS規(guī)則定義”對話框和網(wǎng)頁配色技巧。164婚慶策劃網(wǎng)頁頭部效果一、樣式表概述1.?樣式表的定義CSS是cascading?style?sheets的縮寫，一般翻譯為層疊樣式表，簡稱樣式表，是W3C組織制定的網(wǎng)頁樣式設(shè)計(jì)標(biāo)準(zhǔn)，可方便地用于網(wǎng)頁外觀的控制。CSS3發(fā)布于2008年，是CSS的一個(gè)重要版本，其后續(xù)版本CSS4并沒有作為一個(gè)完整的標(biāo)準(zhǔn)發(fā)布，而是引入新的模塊和特性。使用CSS3不僅可以設(shè)計(jì)炫酷美觀的網(wǎng)頁，還能在一定程度上提高網(wǎng)頁性能。1652.?樣式表文件樣式表文件就是人們常說的CSS文件，其擴(kuò)展名為.css，是用于存儲網(wǎng)頁元素格式設(shè)置的文本文件，CSS的格式設(shè)置由選擇器和屬性設(shè)置項(xiàng)構(gòu)成。1663.?在網(wǎng)頁中引用CSS樣式表的幾種方式（1）內(nèi)部樣式表內(nèi)部樣式表是將CSS樣式代碼集中寫在HTML文檔的頭部標(biāo)簽<head>和</head>之間，并用<style>標(biāo)簽定義，其基本語法格式如下。167（2）行內(nèi)樣式表行內(nèi)樣式表也稱為內(nèi)聯(lián)樣式表，是將CSS樣式表放置在HTML文件主體中，通過標(biāo)簽的style屬性來設(shè)置元素的樣式，其基本語法格式如下。168（3）鏈接樣式表鏈接樣式表是將所有的樣式放在HTML文件外部的一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下。169（4）導(dǎo)入樣式表通過在HTML頭部文檔<style></style>標(biāo)簽內(nèi)的開頭處使用@import語句，即可導(dǎo)入外部樣式表文件。其基本語法格式如下。170二、選擇器1.?選擇器的定義選擇器（select）也稱選擇符，它是CSS樣式表的構(gòu)成成分之一，用于指明樣式對哪些網(wǎng)頁元素生效。2.?CSS選擇器的命名規(guī)則存放CSS樣式表文件的目錄一般命名為style或css。CSS樣式表文件一般命名為style.css或css.css。171所有CSS選擇器必須由英文字母、數(shù)字或下劃線組成，必須以字母開頭，不能為純數(shù)字。設(shè)計(jì)者要用有意義的單詞或單詞組合來命名選擇器，做到“見其名知其意”。具體可以參考下表中的選擇器命名。172選擇器命名參考3.?選擇器的分類CSS選擇器可分為5類：簡單選擇器、組合器選擇器、偽類選擇器、偽元素選擇器、屬性選擇器。（1）簡單選擇器簡單選擇器可分為標(biāo)簽選擇器、類選擇器、id選擇器和通配符選擇器。1）標(biāo)簽選擇器。標(biāo)簽選擇器是指用HTML標(biāo)簽名作為選擇器，根據(jù)標(biāo)簽名來選擇HTML元素，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下。1732）類選擇器。類選擇器用來選擇有特定class屬性的HTML元素。選擇器使用“.”（英文標(biāo)點(diǎn)）進(jìn)行標(biāo)識，后面緊跟類名，其基本語法格式如下。3）id選擇器。id選擇器使用HTML元素的id屬性來選擇特定元素。元素的id在頁面中是唯一的，因此，id選擇器用于選擇一個(gè)唯一的元素。id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下。1744）通配符選擇器。通配符選擇器（*）也稱全局選擇器，其作用是選擇頁面上的所有HTML元素均使用同一種樣式，它是作用范圍最廣的選擇器，其基本語法格式如下。175（2）組合器選擇器組合器選擇器由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過不同的方式組合而成，可以更準(zhǔn)確、更精細(xì)地選擇目標(biāo)元素。CSS3中包含了后代選擇器（以空格分隔）、子元素選擇器、相鄰兄弟選擇器、普通兄弟選擇器、并集選擇器等組合方式。這里介紹經(jīng)常用到的后代選擇器和并集選擇器。1761）后代選擇器。后代選擇器又稱為包含選擇器，其作用是選擇某元素的子孫后代。其基本語法格式如下。2）并集選擇器。并集選擇器用逗號分隔多個(gè)選擇器，它可以把選擇器不同但樣式相同的CSS語法塊進(jìn)行合并，簡化代碼。177三、CSS樣式表的創(chuàng)建和修改方法在Dreamweaver?CC中，可以用兩種方式創(chuàng)建樣式表，一是在代碼視圖中直接輸入需要的樣式代碼創(chuàng)建；二是在“CSS設(shè)計(jì)器”面板的圖文界面中創(chuàng)建。（1）直接編寫代碼創(chuàng)建CSS樣式在代碼視圖中直接編寫CSS樣式代碼，或者在獨(dú)立的.css文件中編寫CSS樣式代碼。178（2）使用“CSS設(shè)計(jì)器”面板創(chuàng)建CSS樣式使用“CSS設(shè)計(jì)器”面板創(chuàng)建CSS樣式的步驟如下。1）單擊“窗口”→“CSS設(shè)計(jì)器”命令，顯示“CSS設(shè)計(jì)器”面板。在“CSS設(shè)計(jì)器”面板中可以新建樣式表，查看、創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到當(dāng)前文檔；使用“CSS設(shè)計(jì)器”面板還可以在“全部”和“當(dāng)前”模式下修改CSS屬性。2）在“CSS設(shè)計(jì)器”面板中單擊“源”選項(xiàng)區(qū)中的“+”按鈕，可選擇網(wǎng)頁是使用外部CSS樣式還是使用內(nèi)部CSS樣式。單擊“選擇器”選項(xiàng)區(qū)中的“+”按鈕，可以添加選擇器（新建CSS樣式）。1792.?在“屬性”面板中應(yīng)用和修改CSS樣式（1）對元素應(yīng)用樣式選中要應(yīng)用CSS樣式的元素，在其“屬性”面板中選擇要應(yīng)用的CSS樣式。180（2）修改元素的樣式在“屬性”面板（CSS）中可以看到當(dāng)前頁面應(yīng)用的樣式、“目標(biāo)規(guī)則”按鈕以及“編輯規(guī)則”按鈕。選擇要修改的樣式，單擊“屬性”面板（CSS）上的“編輯規(guī)則”按鈕可打開“CSS規(guī)則定義”對話框，在該對話框中可方便地編輯樣式。“屬性”面板（CSS）如圖所示。181“屬性”面板（CSS）上的“編輯規(guī)則”按鈕3.?樣式表的查看方法（1）打開樣式表文件“style.css”，可查看樣式表的形式、構(gòu)成、語法格式以及樣式表中定義的樣式語法格式和注釋信息，如圖所示。（2）單擊“窗口”→“設(shè)計(jì)器”命令，顯示“CSS設(shè)計(jì)器”面板，查看“CSS設(shè)計(jì)器”面板的構(gòu)成，如圖所示。182樣式表文件“style.css”的內(nèi)容及“CSS設(shè)計(jì)器”面板的構(gòu)成四、使用“CSS規(guī)則定義”對話框設(shè)置“字體”屬性在DreamweaverCC中，可以利用“CSS規(guī)則定義”對話框方便地編輯CSS樣式。在“CSS規(guī)則定義”對話框的“分類”中選擇“類型”，可設(shè)置“字體”屬性，如圖所示。183184使用“CSS規(guī)則定義”對話框設(shè)置“字體”屬性“CSS規(guī)則定義”對話框中的“字體”屬性及其說明見下表。185“字體”屬性及其說明五、使用“CSS規(guī)則定義”對話框設(shè)置“背景”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“背景”，可設(shè)置“背景”屬性，如圖所示。186使用“CSS規(guī)則定義”對話框設(shè)置“背景”屬性“CSS規(guī)則定義”對話框中的“背景”屬性及其說明見下表。187“背景”屬性及其說明六、使用“CSS規(guī)則定義”對話框設(shè)置“方框”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“方框”，可設(shè)置“方框”屬性，如圖所示。188使用“CSS規(guī)則定義”對話框設(shè)置“方框”屬性“CSS規(guī)則定義”對話框中的“方框”屬性及其說明見下表。189“方框”屬性及其說明七、盒子模型概述CSS的盒子模型把存放網(wǎng)頁元素的容器看作是一個(gè)盒子，用來封裝HTML元素，它包括外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content），如圖所示。190盒子模型原理圖盒子的屬性及說明見下表。191盒子的屬性及說明任務(wù)2美化婚慶策劃網(wǎng)頁其他欄目1921.了解盒子模型、浮動的含義及應(yīng)用。2.了解偽類選擇器的含義、分類及應(yīng)用。3.能編輯CSS樣式代碼。4.能創(chuàng)建并使用偽類選擇器、復(fù)合選擇器美化網(wǎng)頁元素。5.能美化婚慶策劃網(wǎng)的導(dǎo)航欄、內(nèi)容區(qū)、友情鏈接區(qū)和版權(quán)信息區(qū)。193本任務(wù)是美化婚慶策劃網(wǎng)頁其他欄目的實(shí)例，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“CSS設(shè)計(jì)器”面板、“屬性”面板和代碼視圖來新建、編輯、引用偽類選擇器以及復(fù)合選擇器美化婚慶策劃網(wǎng)頁的方法。194

婚慶策劃網(wǎng)頁其他欄目最終效果一、偽類選擇器偽類選擇器主要應(yīng)用在<a>標(biāo)簽上，給超鏈接的不同狀態(tài)添加不同的樣式，能使網(wǎng)頁元素呈現(xiàn)特殊動態(tài)效果，見下表。195

偽類選擇器及其說明二、“CSS規(guī)則定義”對話框中的長度單位在DreamweaverCC中，可以利用“CSS規(guī)則定義”對話框方便地編輯CSS樣式。在定義CSS規(guī)則時(shí)，經(jīng)常用到長度單位，主要用于寬度、高度、字號、行高、邊距、邊框等屬性設(shè)置，長度單位包括絕對類型和相對類型兩種。常用的長度單位及說明見下表。196197常用的長度單位及說明三、“CSS規(guī)則定義”對話框中的顏色表示方法在定義CSS規(guī)則時(shí)，顏色的表示方法主要有以下幾種。1.用#RRGGBB形式的十六進(jìn)制值表示。2.直接用顏色名稱表示。3.使用rgb()函數(shù)指定紅、綠、藍(lán)三色的值表示，每個(gè)值為0～255。4.使用rgba()函數(shù)指定紅、綠、藍(lán)三色的值和alpha通道，每個(gè)紅、綠、藍(lán)三色的值為0～255；alpha通道用于指定透明度，值范圍為0（完全透明）到1（完全不透明）。198常用顏色的指定名稱及代碼對照見下表。199常用顏色的指定名稱及代碼對照四、使用“CSS規(guī)則定義”對話框設(shè)置區(qū)塊的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“區(qū)塊”，可設(shè)置“區(qū)塊”屬性，如圖所示。200“CSS規(guī)則定義”對話框中的“區(qū)塊”屬性“區(qū)塊”的屬性及說明見下表。201“區(qū)塊”的屬性及說明五、使用“CSS規(guī)則定義”對話框設(shè)置方框的“Clear”和“Float”屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“方框”，可設(shè)置方框的屬性，如圖所示。202“CSS規(guī)則定義”對話框中的“方框”屬性方框的“Clear”和“Float”屬性及說明見下表。203

方框的“Clear”和“Float”屬性及說明六、使用“CSS規(guī)則定義”對話框設(shè)置邊框的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“邊框”，可設(shè)置“邊框”屬性，如圖所示。204“CSS規(guī)則定義”對話框中的“邊框”屬性“邊框”屬性及其說明見下表。205“邊框”屬性及其說明七、使用“CSS規(guī)則定義”對話框設(shè)置“列表”的屬性在“CSS規(guī)則定義”對話框的“分類”中選擇“列表”，可設(shè)置“列表”的屬性，如圖所示。206“CSS規(guī)則定義”對話框中的“列表”屬性“列表”屬性及其說明見下表。207“列表”屬性及其說明任務(wù)3

布局婚慶策劃網(wǎng)頁2081.了解盒子模型的原理和用法。2.了解網(wǎng)頁浮動布局的原理和常用布局方法。3.了解重構(gòu)網(wǎng)頁常用的HTML元素。4.了解float和clear屬性的用法。5.能插入div、段落等塊元素，引用CSS樣式控制其大小、位置和顯示方式。209本任務(wù)是一個(gè)用div、段落等塊元素布局婚慶策劃網(wǎng)頁的實(shí)例，效果如圖所示。通過本任務(wù)的學(xué)習(xí)，可以掌握利用“插入”面板、設(shè)計(jì)視圖、代碼視圖來插入div、段落等塊元素，引用CSS來布局網(wǎng)頁的過程和方法，熟悉網(wǎng)頁布局和配色技巧。210

婚慶策劃網(wǎng)頁布局效果一、盒子模型實(shí)際尺寸的計(jì)算方式CSS把存放網(wǎng)頁元素的容器看作是一個(gè)盒子，每個(gè)盒子都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖所示。211

盒子模型示意圖盒子實(shí)際尺寸的計(jì)算方式見下表。212盒子實(shí)際尺寸的計(jì)算方式border為盒子的邊框，它具有border-style（邊框樣式）、border-width（邊框?qū)挾龋┖蚥order-color（邊框顏色）屬性。1.?border-style（邊框樣式）border-style屬性用于設(shè)置邊框的樣式，其屬性、取值及說明見下表。213border-style的屬性、取值及說明2.?border-width（邊框?qū)挾龋゜order-width屬性用于設(shè)置邊框的寬度，單位為像素（px），其常用屬性及說明見下表。214border-width的常用屬性及說明3.?border-color（邊框顏色）border-color屬性用于設(shè)置邊框的顏色，其常用屬性及說明見下表。215border-color的常用屬性及說明二、塊元素、行內(nèi)元素、行內(nèi)塊元素與div1.?塊元素塊元素是指屬性display為block的元素，通常使用塊元素搭建布局。2.?行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素，是指其屬性display為inline的元素，行內(nèi)元素可以和相鄰的行內(nèi)元素共占一行，使寬和高的屬性值不生效，完全靠內(nèi)容撐開寬和高。通常使用行內(nèi)元素來進(jìn)行文字、小圖標(biāo)的搭建。2163.?行內(nèi)塊元素行內(nèi)塊元素結(jié)合了行內(nèi)元素和塊元素，不僅使寬和高的屬性值生效，還可以使多個(gè)元素在一行內(nèi)顯示。4.?divdiv是英文division的縮寫，<div>標(biāo)記就是一個(gè)塊容器標(biāo)記，<div>與</div>之間相當(dāng)于一個(gè)容器，它可以將網(wǎng)頁文檔分割為獨(dú)立的、不同的部分，以容納段落、標(biāo)題、圖像、列表等各種網(wǎng)頁元素，通過與id、class等屬性配合，實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論