版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
項目六使用CSS和Div網(wǎng)頁設(shè)計與制作立體化教程（Dreamweaver
CC
2018）（第2版）（微課版）目錄Contents任務(wù)一美化“圈粉”內(nèi)容頁面任務(wù)二制作“圈粉”網(wǎng)站首頁實訓一美化“車友會年會活動”網(wǎng)頁實訓二布局“愛尚汽車”首頁課后練習本任務(wù)將使用CSS美化“show.html”網(wǎng)頁，在制作時先新建CSS，再將其應(yīng)用到“show.html”網(wǎng)頁。通過本任務(wù)可讓用戶更加熟練地掌握CSS的各種屬性和各屬性的作用，以及CSS在網(wǎng)頁設(shè)計中的相關(guān)操作。本任務(wù)制作完成后的效果如下圖所示。一、任務(wù)目標二、相關(guān)知識（一）認識CSS1．CSS的功能靈活控制網(wǎng)頁中文本的字體、字號、顏色、間距和位置等。隨意設(shè)置一個文本塊的行高和縮進，并能為其添加三維效果的邊框。方便定位網(wǎng)頁中的任何元素，并為其設(shè)置不同的背景顏色和背景圖像。精確控制網(wǎng)頁中各元素的位置。為網(wǎng)頁中的元素設(shè)置各種過濾器，從而產(chǎn)生諸如陰影、模糊、透明等效果。與腳本語言結(jié)合使用，能使網(wǎng)頁中的元素產(chǎn)生各種動態(tài)效果。二、相關(guān)知識（一）認識CSS2．CSS的特點容易管理的源代碼提高讀取網(wǎng)頁的速度使用方式多樣共享樣式設(shè)定沖突處理二、相關(guān)知識（一）認識CSS3．CSS語法規(guī)則CSS語法規(guī)則由兩部分組成：選擇器和聲明（大多數(shù)情況下為包含多個聲明的代碼塊）。選擇器是標識已設(shè)置格式元素的術(shù)語（如p、h1、類名稱或ID），聲明則用于定義樣式屬性。右圖所示的代碼，title_1是選擇器，介于大括號({})之間的所有內(nèi)容都是聲明。聲明由兩部分組成：屬性（如font-family）和值（如“仿宋”）。二、相關(guān)知識（一）認識CSS4．CSS樣式的定義類型CSS樣式位于網(wǎng)頁代碼的<head></head>標簽之間，其作用范圍由符合CSS規(guī)范的文本進行定義。CSS樣式有以下4種類型，不同類型的CSS樣式作用范圍不同。類ID二、相關(guān)知識（一）認識CSS4．CSS樣式的定義類型標簽復合內(nèi)容二、相關(guān)知識（二）CSS設(shè)計器Dreamweaver
CC
2018中的
CSS設(shè)計器是一個綜合性面板，可以可視化地創(chuàng)建或附加樣式表、媒體查詢、選擇器以及設(shè)置CSS屬性。在Dreamweaver
CC
2018中，可以通過選擇【窗口】/【CSS設(shè)計器】菜單命令或按【Shift+F11】組合鍵，打開“CSS設(shè)計器”面板，如右圖所示。二、相關(guān)知識（二）CSS設(shè)計器1．創(chuàng)建和附加CSS文件在Dreamweaver
CC
2018中，可以創(chuàng)建新的CSS文件（見左圖）、使用現(xiàn)有的CSS文件（見中圖），
也可以直接在網(wǎng)頁中定義CSS樣式。其具體操作為：在“CSS設(shè)計器”面板中的“源”列表框中單擊“添加CSS源”按鈕，在打開的下拉列表中選擇相應(yīng)的選項，如右圖所示。二、相關(guān)知識（二）CSS設(shè)計器2．定義媒體查詢?nèi)缃竦木W(wǎng)頁開發(fā)需要適應(yīng)更多的設(shè)備，如PC端、移動端。而各種設(shè)備的頁面尺寸是不一樣的，這就加大了網(wǎng)頁的制作難度，而運用CSS的定義媒體查詢功能可以解決這一問題。左圖所示的代碼表示為：當設(shè)備分辨率在768px~1200px之間，則“box”類按@media中的CSS樣式顯示，否則按前一個“box”類的CSS樣式顯示，如右圖所示。二、相關(guān)知識（二）CSS設(shè)計器3．定義
CSS選擇器在“CSS設(shè)計器”中定義選擇器的操作方法為：選擇“源”列表框中的某個CSS源或“@媒體”列表框中的某個媒體查詢，然后在“選擇器”列表框中單擊按鈕，在列表文本框中輸入類或ID名稱，如右圖所示。二、相關(guān)知識（三）設(shè)置CSS樣式的屬性1．文本樣式的屬性在“CSS設(shè)計器”面板的“屬性”列表框中單擊“文本”按鈕，則可在“屬性”列表框中顯示關(guān)于文本的屬性及屬性值，如右圖所示。此時可方便、快速地定義各文本的屬性樣式，同時也可避免在Deamweaver中設(shè)置文本字體和字號后，在瀏覽器中的預覽效果時與網(wǎng)頁文檔中顯示效果不一致的問題。二、相關(guān)知識（三）設(shè)置CSS樣式的屬性2．邊框樣式的屬性在“CSS設(shè)計器”面板的“屬性”列表框中單擊“邊框”按鈕，則可在“屬性”列表框中顯示關(guān)于邊框的屬性及屬性值，如左圖所示。二、相關(guān)知識（三）設(shè)置CSS樣式的屬性3．背景樣式的屬性在“CSS設(shè)計器”面板的“屬性”列
表框中單擊“背景”按鈕，則可在“屬性”列表框中顯示關(guān)于背景的屬性及屬性值，
如右圖所示。二、相關(guān)知識（四）CSS過渡效果的應(yīng)用1．新建CSS過渡效果在Dreamweaver
CC
2018中新建過渡效果的操作方法為：選擇【窗口】/【CSS過渡效果】菜單命令，打開“CSS過渡效果”面板，單擊“新建過渡效果”按鈕，在打開的“新建過渡效果”對話框進行相關(guān)設(shè)置，如左圖所示，單擊“創(chuàng)建過渡效果”按鈕完成創(chuàng)建，在“CSS過渡效果”面板中可查看添加的CSS過渡效果，如右圖所示。二、相關(guān)知識（四）CSS過渡效果的應(yīng)用1．新建CSS過渡效果在Dreamweaver
CC
2018中創(chuàng)建好CSS過渡效果后，若需要修改或添加其他過渡效果，則可使用“CSS過渡效果”面板來編輯CSS過渡效果的屬性，其方法有以下兩種。在“CSS過渡效果”面板中，選擇需要編輯的CSS過渡效果選項，然
后雙擊鼠標左鍵，打開“編輯過渡效果”對話框，在該對話框中可以修改過渡效果的各種屬性及過渡樣式。通過雙擊編輯通過按鈕編輯在“CSS過渡效果”面板中，選擇需要編輯的CSS過渡效果選項，然后單擊“編輯所選過渡效果”按鈕，在打開的“編輯過渡效果”對話框中可以編輯過渡效果的屬性。二、相關(guān)知識（四）CSS過渡效果的應(yīng)用3．刪除CSS過渡效果如果不需要某個CSS過渡效果，可直接刪除。其操作方法為：在Dreamweaver
CC
2018中的“CSS過渡效果”面板中選擇需要刪除的過渡效果，然后單擊“刪除選定的過渡效果”按鈕，在打開的“刪除過渡效果”對話框中單擊按鈕即可，如下圖所示。二、相關(guān)知識（五）應(yīng)用CSS樣式1．使用“HTML屬性”面板其方法是：選擇要應(yīng)用CSS樣式的網(wǎng)頁元素后，在“HTML屬性”面板的“類”下拉列表框中選擇需要應(yīng)用的CSS樣式選項，如左圖所示。預覽效果如右圖所示。二、相關(guān)知識（五）應(yīng)用CSS樣式2．使用“CSS屬性”面板其方法是：選擇要應(yīng)用CSS樣式的網(wǎng)頁元素后，在“屬性”面板的“目標規(guī)則”下拉列表框中選擇需要應(yīng)用的CSS樣式選項，如左圖所示。預覽效果如右圖所示。三、任務(wù)實施（一）創(chuàng)建CSS樣式下面將在打開的網(wǎng)頁文檔中創(chuàng)建CSS樣式，以美化頁面效果，具體操作如下。打開網(wǎng)頁文檔設(shè)置“tr
td
p”標簽屬性三、任務(wù)實施（一）創(chuàng)建CSS樣式設(shè)置“titile_l”類的屬性設(shè)置“title_r”類的屬性三、任務(wù)實施（一）創(chuàng)建CSS樣式設(shè)置“title_2”類的屬性設(shè)置“title_3”類的屬性三、任務(wù)實施（一）創(chuàng)建CSS樣式設(shè)置“title_4”類的屬性設(shè)置“a:link”屬性三、任務(wù)實施（一）創(chuàng)建CSS樣式設(shè)置“a:hover”屬性設(shè)置“a:visited”屬性三、任務(wù)實施（二）應(yīng)用CSS樣式下面應(yīng)用創(chuàng)建好的CSS樣式，對頁面中的文本進行美化，具體操作如下。應(yīng)用title_l類應(yīng)用“title_r”類三、任務(wù)實施（二）應(yīng)用CSS樣式設(shè)置單元格背景樣式設(shè)置菜單超鏈接三、任務(wù)實施（二）應(yīng)用CSS樣式設(shè)置單元格背景樣式設(shè)置欄目標題樣式三、任務(wù)實施（二）應(yīng)用CSS樣式設(shè)置其他欄目標題樣式目錄Contents任務(wù)一美化“圈粉”內(nèi)容頁面任務(wù)二制作“圈粉”網(wǎng)站首頁實訓一美化“車友會年會活動”網(wǎng)頁實訓二布局“愛尚汽車”首頁課后練習本任務(wù)為“圈粉”網(wǎng)站制作首頁，首先在新建的空白區(qū)域插入Div進行布局，然后為Div標簽添加CSS樣式，對添加的標簽進行定位并設(shè)置相應(yīng)的屬性。本任務(wù)制作完成后的最終效果如下圖所示。一、任務(wù)目標二、相關(guān)知識（一）認識Div1．插入Div在Dreamweaver
CC
2018中能夠快速地插入Div并為它應(yīng)用現(xiàn)有的CSS樣式。其操作方法為：將插入點定位到在“文檔”窗口中要插入D
i
v標簽的位置，然后選擇【插入】/【HTML】/【Div】菜單命令或者在“插入”面板的HTML類別中單擊“Div”按鈕，在打開的“插入Div”對話框中設(shè)置“插入”“Class”或“ID”參數(shù)，單擊即可，如下圖所示。二、相關(guān)知識（一）認識Div2．編輯Div插入Div之后，可以使用“CSS設(shè)計器”查看和編輯Div的CSS規(guī)則，如下圖所示，也可以在Div中添加內(nèi)容，其操作方法是：將插入點定位到Div中，然后直接插入文本、圖像等網(wǎng)頁元素。二、相關(guān)知識Div+CSS盒子模型是根據(jù)CSS規(guī)則中涉及的margin（邊界）、border（邊框）、padding（填充）、content（內(nèi)容）來建立網(wǎng)頁布局的一種方法，右圖圖所示即為一個標準的Div+CSS布局結(jié)構(gòu)，左側(cè)
為代碼，右側(cè)為效果圖。（二）認識Div+CSS盒子模型2．編輯Div二、相關(guān)知識（三）Div+CSS定位定位是網(wǎng)頁設(shè)計的難點，不清晰的定位可能會影響網(wǎng)頁效果實現(xiàn)。要正確使用CSS定位，需要了解如下4個方面。1．塊模型4．浮動和清除模型2．文檔流模型3．相對定位和絕對定位模型二、相關(guān)知識（四）使用“CSS設(shè)計器”布局網(wǎng)頁使用Div+CSS布局網(wǎng)頁時，既可以在代碼視圖中直接輸入代碼，也可以通過“CSS設(shè)計器”面板快速布局網(wǎng)頁。在“CSS設(shè)計器”面板的“屬性”列表框中單擊“布局”按鈕，“屬性”列表框中將顯示關(guān)于布局的屬性及屬性值，如右圖所示。三、任務(wù)實施（一）創(chuàng)建CSS文件本任務(wù)將使用“CSS設(shè)計器”創(chuàng)建CSS文件，并通過代碼視圖創(chuàng)建用于布局和美化頁面的代碼，具體操作如下。新建html文檔創(chuàng)建新的CSS文件三、任務(wù)實施（一）創(chuàng)建CSS文件創(chuàng)建body標簽三、任務(wù)實施（一）創(chuàng)建CSS文件頁面美化的屬性代碼中間內(nèi)容布局和列表美化的屬性代碼三、任務(wù)實施（一）創(chuàng)建CSS文件底部布局的屬性代碼菜單列表樣式代碼搜索布局和美化屬性代碼三、任務(wù)實施（二）使用Div+CSS布局頁面下面在頁面中使用Div+CSS布局頁面并美化內(nèi)容，具體操作如下。設(shè)置Div的CSS類為頁面插入Div布局添加logo標簽和文本三、任務(wù)實施（二）使用Div+CSS布局頁面添加菜單項目列表插入clr
<div>標簽三、任務(wù)實施（二）使用Div+CSS布局頁面插入并布局文本插入文本三、任務(wù)實施（二）使用Div+CSS布局頁面插入并布局文本插入文本和超鏈接文本三、任務(wù)實施（二）使用Div+CSS布局頁面復制和粘貼代碼復制代碼并修改內(nèi)容三、任務(wù)實施（二）使用Div+CSS布局頁面復制菜單列表添加頁腳內(nèi)容三、任務(wù)實施（二）使用Div+CSS布局頁面預覽網(wǎng)頁效果目錄Contents任務(wù)一美化“圈粉”內(nèi)容頁面任務(wù)二制作“圈粉”網(wǎng)站首頁實訓一美化“車友會年會活動”網(wǎng)頁實訓二布局“愛尚汽車”首頁課后練習實訓要求美化“車友會年會活動”網(wǎng)頁，要求使用CSS定義文本樣式，通過本實訓掌握使用CSS美化網(wǎng)頁的方法。實訓一美化“車友會年會活動”網(wǎng)頁在打開的素材網(wǎng)頁中創(chuàng)建CSS，并應(yīng)用CSS樣式對網(wǎng)頁中的文本進行美化。本實訓的參考效果如下圖所示。實訓思路實訓一美化“車友會年會活動”網(wǎng)頁步驟提示打開“advert.html”網(wǎng)頁文件，在“CSS設(shè)計器”中新建基于頁面中定義的CSS。新建title類、title_1類和title_2類，設(shè)置title類的“color”“fontfa
m
i
l
y”“s
i
z
e”“a
lign”分別為“#31
2
C
5A”“方正琥珀簡體”“2
8
p
x”“c
e
n
t
e
r”，t
i
l
t
l
e
_
1類的“c
o
l
o
r”“fo
n
t-f
a
m
i
l
y”“s
i
z
e”分別為“#312C5A”“黑體”“20px”，title_2類的“color”“font-family”“size”“align”分別為“#5A5A5A”“仿宋”“20px”“right”。新建超鏈接a:link，分別設(shè)置“color”“font-family”“size”“decoration”為
“#5A5A5A”“黑體”“18px”“none”。新建ol
li標簽，分別設(shè)置“color、font-family”為“#312C5A”“華為新魏”，新建p標簽，分別設(shè)置“color”“font-family”“size”“l(fā)ine-height”“text-indent”為“#5A5A5A”“仿宋”
“16px”“1.5em”“28px”。在設(shè)計視圖中分別選擇主標題和副標題文本，在“HTML屬性”面板中選擇對應(yīng)的類，為文本應(yīng)用
CSS樣式。選擇最后一行日期文本，在“HTML屬性”面板中選擇“類”為“title_2”。目錄Contents任務(wù)一美化“圈粉”內(nèi)容頁面任務(wù)二制作“圈粉”網(wǎng)站首頁實訓一美化“車友會年會活動”網(wǎng)頁課后練習實訓二布局“愛尚汽車”首頁實訓要求制作“愛尚汽車”網(wǎng)站首頁，通過實訓練習創(chuàng)建
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024綜合視頻監(jiān)控維護保障協(xié)議樣本
- 2024年新式打樁機租賃協(xié)議樣本
- 2024專用內(nèi)墻環(huán)保涂料供應(yīng)協(xié)議
- 2024年園林建設(shè)綜合性服務(wù)協(xié)議范本
- 2024年精密設(shè)備搬遷服務(wù)協(xié)議
- 2024年車輛維修及保養(yǎng)費用補充協(xié)議
- 公園節(jié)慶活動安全保障方案
- 2024年國家級科技專項任務(wù)承接協(xié)議
- 小型企業(yè)消防安全自查方案
- 煙囪改建施工腳手架安全措施方案
- 中國古代樓閣PPT課件
- 排舞教案_圖文
- 簡單趨向補語：V上下進出回過起PPT課件
- 路由和波長分配PPT課件
- 超聲檢測工藝卡
- 光伏組件開路電壓測試記錄
- 公司“師帶徒”實施方案
- AP1000反應(yīng)堆結(jié)構(gòu)設(shè)計
- 《內(nèi)科護理學》病例分析（完整版）
- 5GQoS管理機制介紹
- 學校中長期發(fā)展規(guī)劃方案
評論
0/150
提交評論