-
- 素材大小：
- 1.8 MB
- 素材授權(quán)：
- 免費(fèi)下載
- 素材格式：
- .ppt
- 素材上傳：
- lipeier
- 上傳時(shí)間：
- 2018-07-12
- 素材編號(hào)：
- 201611
- 素材類別：
- 培訓(xùn)教程PPT
-
素材預(yù)覽
這是div css教程ppt（部分ppt內(nèi)容已做更新升級(jí)），包括了傳統(tǒng)布局與CSS布局，XHTML與CSS基礎(chǔ)，CSS網(wǎng)頁布局與定位，實(shí)例：三欄居中式布局等內(nèi)容，歡迎點(diǎn)擊下載。
div css教程ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款培訓(xùn)教程PPT類型的PowerPoint.
《DIV+CSS布局基礎(chǔ)經(jīng)典》
講師:趙海海
課程大綱
1.1.1 傳統(tǒng)Table布局
傳統(tǒng)Table布局方式只是利用了HTML的table元素所具有的零邊框特性
因此，Table布局的核心是：
設(shè)計(jì)一個(gè)能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個(gè)單元格中，間距及空格使用透明gif圖片實(shí)現(xiàn)，最終的結(jié)構(gòu)是一個(gè)復(fù)雜的表格（有時(shí)候會(huì)出現(xiàn)多次嵌套），顯然，這樣不利于設(shè)計(jì)和修改。
1.1.2 傳統(tǒng)Table布局示意圖
1.1.3 Table布局的缺點(diǎn)
設(shè)計(jì)復(fù)雜，改版時(shí)工作量巨大
表現(xiàn)代碼與內(nèi)容混合，可讀性差
不利于數(shù)據(jù)調(diào)用分析
網(wǎng)頁文件量大，瀏覽器解析速度慢如蝸牛
2.2.0 Web標(biāo)準(zhǔn)的構(gòu)成（選）
1.2.1 Web標(biāo)準(zhǔn)布局
基于Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)的核心目的：
如何使網(wǎng)頁的表現(xiàn)與內(nèi)容分離！
這樣做的好處：
高效率的開發(fā)與簡單維護(hù)
信息跨平臺(tái)的可用性
降低服務(wù)器成本；加快網(wǎng)頁解析速度
更良好的用戶體驗(yàn)
那么，CSS2.0從真正意義實(shí)現(xiàn)了設(shè)計(jì)代碼與內(nèi)容分離
1.2.2 DIV+CSS布局示意圖
真正的表現(xiàn)與內(nèi)容完全分離，代碼可讀性強(qiáng)，樣式可重復(fù)應(yīng)用
1.2.3 CSS布局代碼示例
2.1.1 向Web標(biāo)準(zhǔn)過度 / XHTML 基礎(chǔ)
為什么要使用XHTML?
XHTML是在HTML4.0基礎(chǔ)上，用XML規(guī)則擴(kuò)展得到的，建立XHTML的目的就是為了實(shí)現(xiàn)HTML向XML的過度。
HTML:更多的被用于網(wǎng)頁設(shè)計(jì)和表現(xiàn)
XHTML:它的初衷就不是為了表現(xiàn)，而是對(duì)網(wǎng)頁內(nèi)
容進(jìn)行結(jié)構(gòu)設(shè)計(jì)，嚴(yán)格的說它是面向文檔
結(jié)構(gòu)的語言，更符合未來的發(fā)展要求！
2.1.2 選擇合適的DTD
2.1.3 DreamweaverCS3中DTD
2.1.4 XHTML 語法規(guī)范
屬性名稱必須小寫
屬性值必須使用雙引號(hào)
不允許使用標(biāo)簽簡寫
使用id替代name
必須使用結(jié)束標(biāo)簽
注意：選擇合適的標(biāo)簽（區(qū)別與table布局的習(xí)慣..）
布局用：<div></div>；
文本用：<h1～6></h1>，<p></p>
圖片用：<img></img>
列表用：<ul><ol><li><dl><dt><dd>
數(shù)據(jù)用：<table></table>
其他的：form，input，select
2.2.1 CSS語法基礎(chǔ)
何為CSS（Cascading Style Sheet）？
CSS中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許
將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。
即:告訴瀏覽器，這段樣式將應(yīng)用到哪個(gè)對(duì)象..
2.2.2 CSS選擇器（符）
2.2.3 選擇器的聲明
<style type=“text/css” >
body，td，th，#header，.one{color:blue;font-size:12px;}
</style>
2.2.4 如何應(yīng)用CSS到網(wǎng)頁中
行內(nèi)樣式表
內(nèi)部（內(nèi)嵌）樣式表
外部（鏈接）樣式表
導(dǎo)入式樣式表
2.2.5 實(shí)例代碼:CSS按位置的分類
2.2.5 樣式優(yōu)先權(quán)問題
2.6 CSS開發(fā)環(huán)境與調(diào)試環(huán)境
3.1 被遺忘的主角 DIV
3.2 CSS盒子模型
3.3 文檔流及浮動(dòng)概念
3.4 浮動(dòng)定位與絕對(duì)定位
4.0 一個(gè)簡單的CSS布局實(shí)例
網(wǎng)頁制作流程：
效果圖—切圖——布局（DIV+CSS、table— 嵌入動(dòng)態(tài)程序或模板標(biāo)簽——測試——發(fā)布
學(xué)習(xí)要點(diǎn)及
CSS（Cascading Style Sheet），中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。
【本章學(xué)習(xí)目的】
本章通過多個(gè)CSS樣式的應(yīng)用實(shí)例，重點(diǎn)介紹了CSS樣式表功能、定義CSS規(guī)則的方法，應(yīng)用內(nèi)嵌式樣式表和鏈接外部樣式表的方法等，通過本章的學(xué)習(xí)，讀者應(yīng)了解CSS樣式表的用途，掌握創(chuàng)建和應(yīng)用CSS樣式表的方法，學(xué)會(huì)用CSS樣式表進(jìn)行網(wǎng)頁的美化和網(wǎng)頁布局。
5.1 利用CSS 樣式表的網(wǎng)頁實(shí)例
5.1 利用CSS 樣式表的網(wǎng)頁實(shí)例
【例5.5】利用CSS樣式還可以代替表格進(jìn)行網(wǎng)頁布局，這是目前較為流行頁面排版方式，如圖所示。
該實(shí)例主要采用了div標(biāo)簽＋css樣式，涉及到的知識(shí)點(diǎn)有以下幾點(diǎn)：
分析構(gòu)架：畫出構(gòu)架圖；
模塊拆分：分別定義Div的CSS樣式；
在網(wǎng)頁中插入Div標(biāo)簽，在Div中填充網(wǎng)頁內(nèi)容；
總體調(diào)整：色彩及內(nèi)容調(diào)整，適當(dāng)修改CSS樣式。
5.2 使用CSS樣式表
5.2.1 CSS樣式表概述
1、樣式表的使用
CSS樣式表的使用常用的方法有以下兩種：
頁面內(nèi)嵌法。將樣式表代碼直接寫在HTML標(biāo)簽的head區(qū)。
外部鏈接法。將樣式表寫在一個(gè)獨(dú)立的后綴名為CSS文件中，在需要應(yīng)用CSS樣式的網(wǎng)頁中鏈接該文件，在頁面<head>和</head>之間用以下代碼調(diào)用。 <link href="css/master.css" rel="stylesheet" type="text/css" />
5.2 使用CSS樣式表
2、CSS樣式表語法 選擇符 { 屬性1：值1；屬性2：值2…… }
參數(shù)說明：
屬性和屬性值之間用冒號(hào)(:)隔開，定義多個(gè)屬性時(shí)，屬性之間用分號(hào)(;)隔開。
5.2.2 在Dreamweaver中定義CSS
1. 創(chuàng)建CSS樣式
選擇“窗口”菜單｜“CSS樣式”命令，打開“CSS樣式”面板，單擊右下角的“新建CSS規(guī)則”按鈕，或選擇“文本”菜單｜“CSS樣式”｜“新建”命令，彈出“新建CSS規(guī)則”對(duì)話框.
5.2.2 在Dreamweaver中定義CSS
選擇器類型有以下三種：
（1） 類
自定義 CSS 規(guī)則，它的特點(diǎn)是靈活多變，可以重復(fù)將樣式應(yīng)用于網(wǎng)頁元素。在應(yīng)用時(shí)，它會(huì)在HTML標(biāo)簽內(nèi)加入一個(gè)類（class）的定久來規(guī)定標(biāo)簽中的格式。比如將類的樣式mystyle定義于某個(gè)標(biāo)題，那么代碼為：
<h1 class=”mystyle”>標(biāo)題1應(yīng)用自定義的樣式</h1>
（2） 標(biāo)簽
重新定義指定標(biāo)簽的外觀，例如：創(chuàng)建或更改 h1 標(biāo)簽的 CSS 樣式時(shí)，所有用 h1 標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新，實(shí)現(xiàn)了批量快速更改格式的特點(diǎn)。
5.2.2 在Dreamweaver中定義CSS
（3） 高級(jí)
在CSS 選擇器中，它的功能最為強(qiáng)大，可以定義超鏈接的特效，定義特定元素組合的格式設(shè)置（例如：body，table，td，用逗號(hào)隔開），定義嵌套的樣式（td img 空格隔開），定義包含特定 id 屬性的標(biāo)簽的格式設(shè)置。
2.編輯和刪除CSS樣式
創(chuàng)建CSS樣式后，如果要修改CSS樣式，在“CSS樣式”面板中，單擊“CSS樣式”面板右下角的“編輯”按鈕，進(jìn)入“CSS規(guī)則定義”的對(duì)話框，可進(jìn)行修改。
某個(gè)CSS樣式不再需要時(shí)，在“CSS樣式”面板中，首先選中某個(gè)樣式，單擊CSS樣式面板右下角的“刪除”按鈕。
5.3 CSS 樣式的應(yīng)用
5.3.3 樣式表的實(shí)例應(yīng)3：方框和邊框 樣式的應(yīng)用
在【例5.6】中，插入一幅圖像，通過CSS樣式的應(yīng)用，實(shí)現(xiàn)了圖文混排的效果。該實(shí)例中主要設(shè)置了方框的浮動(dòng)和邊界及填充的距離，實(shí)現(xiàn)了圖像與文本之間的環(huán)繞，還設(shè)置了邊框，添加了一個(gè)虛線邊框修飾圖像。這里首先定義了一個(gè)類的CSS規(guī)則，然后將此類應(yīng)用于某個(gè)圖像上。
圖像邊距的設(shè)置
圖像的邊框的設(shè)置
5.3.4 樣式表的實(shí)例應(yīng)用4：動(dòng)態(tài)鏈接樣式
簡單的CSS鏈接樣式可以在頁面屬性中的“鏈接”選項(xiàng)卡中設(shè)置，5.1節(jié)中已經(jīng)講過。
在【例5.6】中，建立較為復(fù)雜的CSS鏈接樣式，當(dāng)鼠標(biāo)經(jīng)過鏈接文字時(shí)，文字顏色會(huì)變色、字體樣式變粗、出現(xiàn)背景顏色、文字修飾有下劃線等。這里還講解兩個(gè)重要的知識(shí)點(diǎn)：如何建立CSS鏈接樣式和如何調(diào)用外部CSS樣式表。
1.建立鏈接CSS樣式
單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，選擇器類型：高級(jí)，單擊“選擇器”下拉列表，分別選擇a:llink（鏈接后效果）、a:visited（訪問后效果）、a:hover（鼠標(biāo)經(jīng)過效果），分別定義其樣式。
2. 調(diào)用CSS樣式文件
其它網(wǎng)頁要應(yīng)用剛才建立的CSS樣式文件，如何調(diào)用呢？單擊“CSS樣式”面板中的“附加樣式表”按鈕，彈出“鏈接外部樣式表”的對(duì)話框，在“文件/URL”文本框中輸入外部CSS文件路徑和文件名，添加為選擇“鏈接”選項(xiàng)，將新建的樣式文件鏈接到此文件，如圖所示。
5.3.5 樣式的實(shí)例5：濾鏡效果的應(yīng)用
CSS濾鏡并不是瀏覽器的插件，也不符合CSS標(biāo)準(zhǔn)，而是微軟公司為增強(qiáng)瀏覽器功能而特意開發(fā)的并整合在IE瀏覽器中的一類功能集合。由于瀏覽器IE有著廣泛的使用范圍，因此CSS濾鏡也被廣大設(shè)計(jì)者所喜愛。
CSS濾鏡可以為樣式控制的對(duì)象指定特殊效果。
✿注意：CSS濾鏡只能作用于有區(qū)域限制的對(duì)象，如表格、單元格、圖片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在單元格或?qū)又校缓髮?duì)單元格或?qū)討?yīng)用CSS樣式。
Alpha—透明效果
Blur—模糊效果
Chroma—將指定的顏色設(shè)置成透明
Dropshadow—投影效果
FlipH—進(jìn)行水平翻轉(zhuǎn)
FlipV－進(jìn)行垂直翻轉(zhuǎn)
Glow－發(fā)光效果
Grayscale－產(chǎn)生灰階
Invert－反轉(zhuǎn)底片效果
Light－燈光投影
Mask－遮罩
Shadow－陰影效果
Wave－水平與垂直波動(dòng)效果
Xray－設(shè)置X光效果
3.定義頁面屬性和定義特定 Id 屬性的DIV標(biāo)簽的CSS樣式。
4.插入網(wǎng)頁元素和調(diào)整頁面結(jié)構(gòu)
最后，保存網(wǎng)頁，瀏覽網(wǎng)頁效果。
本 章 小 結(jié)
本章主要介紹了CSS樣式的創(chuàng)建與應(yīng)用，通過CSS樣式的使用，使得網(wǎng)頁樣式更加豐富多彩。
1．CSS的概念： CSS樣式、樣式的分類、CSS的語法結(jié)構(gòu)等
2．CSS樣式的創(chuàng)建
3．CSS樣式的應(yīng)用
div css布局ppt：這是div css布局ppt，包括了盒子模型，布局技術(shù)，“上中下”布局，“左中右”布局等內(nèi)容，歡迎點(diǎn)擊下載。
-
素材評(píng)分榜
素材排行榜
-
猜你喜歡
-
- div css布局ppt
- 文檔大小：1 MB
- 上傳時(shí)間：02-13
![div css布局ppt]()
-
- 消毒隔離培訓(xùn)ppt
- 文檔大�。�318 KB
- 上傳時(shí)間：12-16
![消毒隔離培訓(xùn)ppt]()
-
- 模特培訓(xùn)ppt
- 文檔大小：37 KB
- 上傳時(shí)間：12-16
![模特培訓(xùn)ppt]()
-
- 秘書培訓(xùn)ppt
- 文檔大�。�854 KB
- 上傳時(shí)間：12-15
![秘書培訓(xùn)ppt]()
-
