我愛(ài)自學(xué)網(wǎng)DreamweaverCS6課程筆記_第1頁(yè)
我愛(ài)自學(xué)網(wǎng)DreamweaverCS6課程筆記_第2頁(yè)
我愛(ài)自學(xué)網(wǎng)DreamweaverCS6課程筆記_第3頁(yè)
我愛(ài)自學(xué)網(wǎng)DreamweaverCS6課程筆記_第4頁(yè)
我愛(ài)自學(xué)網(wǎng)DreamweaverCS6課程筆記_第5頁(yè)
已閱讀5頁(yè),還剩14頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、 我愛(ài)自學(xué)網(wǎng)原創(chuàng)出品Adobe DreamweaverCS6課程筆記第一節(jié)、Dreamweaver CS6軟件簡(jiǎn)介和安裝1、DreamweaverCS6是由美國(guó)Adobe公司最新開(kāi)發(fā)的一款網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站管理為一體的專 業(yè)軟件。2、為了保讓能夠正常安裝,在安裝時(shí),請(qǐng)斷開(kāi)網(wǎng)絡(luò)。第二節(jié)、DWCS6軟件界面的簡(jiǎn)介一、軟件界面組成1、菜單欄2、工作區(qū)3、屬性欄4、浮動(dòng)面板(文件、資源、 CSS樣式、行為等)二、界面的切換:為滿足不同人群的需求。三、界面的恢復(fù):窗口一一工作區(qū)一一重置設(shè)計(jì)器四、插入面板的調(diào)用。第三節(jié)、網(wǎng)頁(yè)相關(guān)知識(shí)1、DreamweaverCS6是由美國(guó)Adobe公司最新開(kāi)發(fā)的一款網(wǎng)頁(yè)設(shè)計(jì)、

2、網(wǎng)站管理為一體的專 業(yè)軟件。2、什么是網(wǎng)頁(yè)(網(wǎng)頁(yè)的概念)在互聯(lián)網(wǎng)上基于http協(xié)議傳播信息的頁(yè)面。3、什么是網(wǎng)站反應(yīng)同一主題的多個(gè)網(wǎng)頁(yè)的集合。4、網(wǎng)頁(yè)內(nèi)容的組成(網(wǎng)頁(yè)元素)(1)文字(2)圖片(jpg, gif , png)(3)動(dòng)畫(swf, gif)(4)多媒體(5)超鏈接(6)表單(7)網(wǎng)頁(yè)特效(8)其它元素第四節(jié)、網(wǎng)頁(yè)制作方法與站點(diǎn)建立1、網(wǎng)頁(yè)的制作方法(1)代碼法:html(2)軟件制作: Dreamweaver、frontpage (所見(jiàn)即所得)。2、制作網(wǎng)站前準(zhǔn)備工作:建立站點(diǎn)。3、站點(diǎn):用來(lái)存放網(wǎng)站中所有元素的文件夾,為了制作方便需要將這個(gè)文件夾和制作軟件相鏈接。4、站點(diǎn)的建立

3、(鏈接)(1)站點(diǎn)建立(2)文件面板(3)應(yīng)用程序欄(窗口一一應(yīng)用程序欄)5、站點(diǎn)的分類(按照網(wǎng)站的位置)(1)本地站點(diǎn)(2)遠(yuǎn)程站點(diǎn)第五節(jié)、規(guī)劃本地站點(diǎn)目錄結(jié)構(gòu)1、規(guī)劃本地站點(diǎn)目錄結(jié)構(gòu)(1) images (圖片)(2) swf (動(dòng)畫)(3) css (CSS樣式)(4) script (存放網(wǎng)頁(yè)特效)JS(5) other (其它)2、網(wǎng)站主頁(yè)名稱(1) index.htm(2) index.html(3) default.htm(4) default.html注:主頁(yè)必須放在網(wǎng)站的根目錄下面,同時(shí)名稱也有特殊的要求。第六、七節(jié)、網(wǎng)頁(yè)中文字的輸入1-21、網(wǎng)頁(yè)的四個(gè)視圖(1)設(shè)計(jì)視圖(2

4、)代碼視圖(3)拆分視圖(4)實(shí)時(shí)視圖2、網(wǎng)頁(yè)中的文字(1)文字直接輸入就可以了。(2)回車表示換段。(3) shift+回車:表示換行。(4)輸入空格時(shí)要在全角輸入法狀態(tài)下輸入。(5)特殊字符的插入:”插入一一html 特殊字符”(6)文字也可以從網(wǎng)站中復(fù)制,但是在復(fù)制時(shí)需要將網(wǎng)頁(yè)中文字的格式去掉。(注:如何去除復(fù)制來(lái)的文字格式,只需要將文字粘貼到記事本中,然后從記事本中再?gòu)?fù)制文字就可以了。)3、預(yù)覽網(wǎng)頁(yè):文件一一在瀏覽器中預(yù)覽一一IExplore (快捷鍵:F12)第八、九節(jié)、頁(yè)面屬性1-21、頁(yè)面屬性(1)修改頁(yè)面屬性(2)或通過(guò)屬性欄2、屬性(1)左邊距、右邊距、上邊距、下邊距。(2)

5、文字字體、大小、顏色。注:A、字體:選擇常用字體。如:宋體B、大?。赫奈淖忠话阍O(shè)置為12-16px。(3)頁(yè)面背景。(4)背景圖片。(默認(rèn)情況自動(dòng)填充、平鋪)注:A、圖片要放在站點(diǎn)內(nèi)。(有關(guān)網(wǎng)站中的所有元素都必須放在站點(diǎn)內(nèi))。B、圖片名稱不能為中文。注:如果同時(shí)設(shè)置背景顏色和背景圖片,以背景圖片為準(zhǔn)。第十節(jié)、Html網(wǎng)頁(yè)基本代碼格式1、網(wǎng)頁(yè)基本代碼<html><head><title></title></head><body></body></html>注:(1) head:開(kāi)頭部分(2) tit

6、le :標(biāo)題(3) body:正文部分2、常用代碼(1) <p></p> :換段(2) <br>:換行注:多數(shù)html代碼都有對(duì)稱性的特點(diǎn)。第十一節(jié)、圖片的插入一、圖片1、圖片格式(1) JPG:圖片質(zhì)量較高,一般用于較大的圖片。如:人物、風(fēng)景。(不支持透明)(2) gif:用于制用按鈕、動(dòng)畫、導(dǎo)航條等,圖片較小,只有 256種顏色。(支持透明)(3) png:兼有兩種格式的特點(diǎn)。(支持透明)注:圖片的大小一般盡量控制在200K以下。2、鏈接(1) _blank:在新的網(wǎng)頁(yè)打工。(2) _self:在自身網(wǎng)頁(yè)打開(kāi)。第十二節(jié)、圖片熱點(diǎn)1、熱點(diǎn)(1)矩形熱點(diǎn)(2

7、)圓形熱點(diǎn)(3)多邊形熱點(diǎn)注:編輯一一首選參數(shù)一一輔助功能一一圖像2、替換(1)用于圖片的注釋。(2)當(dāng)圖片無(wú)法顯示的時(shí)候用此內(nèi)容代替。3、寬度和高度的設(shè)置4、相關(guān)html代碼(1) Img :圖片。(2) Src:位置。(3)熱點(diǎn):<map></map>第十三節(jié)、圖片的編輯一、裁剪、亮度對(duì)比度、銳化注:使用Dreamweaver編輯圖像是個(gè)不好的習(xí)慣,如果要編輯圖像,最好使用專門的圖像 編輯軟件(如:Fireworks、photoshop),編輯好了以后,再重新插入進(jìn)來(lái)。二、插入一一圖像對(duì)象一一鼠標(biāo)經(jīng)過(guò)圖像三、水平線的插入插入html水平線四、背景顏色的代碼:bgco

8、lor第十四節(jié)、超鏈接一、超鏈接指的是通過(guò)點(diǎn)擊一個(gè)對(duì)象可以鏈接打開(kāi)另外一個(gè)對(duì)象(網(wǎng)頁(yè)、圖片、程序等) 二、鏈接的代碼(即鏈接的標(biāo)簽)<a href= " UR吶容 </a><a href= " URL' target= " 承鎘</嫁> >三、超鏈接的狀態(tài)(修改頁(yè)面屬性鏈接)(1)鏈接:鏈接默認(rèn)顏色。(2)變換圖像:鼠標(biāo)移上去時(shí)的顏色。(3)已訪問(wèn):訪問(wèn)以后鏈接的顏色。(4)活動(dòng):鼠標(biāo)點(diǎn)下去時(shí)的顏色。第十五節(jié)、超鏈接打開(kāi)方式一、鏈接頁(yè)面打開(kāi)的目標(biāo):_blank:新窗口打開(kāi)網(wǎng)頁(yè)New:新窗口打開(kāi)網(wǎng)頁(yè)_parent:父

9、窗口(框架結(jié)構(gòu))_self:自身窗口、原窗口_top:頂窗口(框架結(jié)構(gòu))第十六、十七、十八、十九節(jié)、超鏈接對(duì)象一、超鏈接的對(duì)象(1)文字(2)圖片(3)熱點(diǎn)(4)空鏈接(#)(5)郵件鏈接:mailto:郵箱地址(可以利用菜單命令直接插入)(6)下載鏈接(瀏覽器打不開(kāi)的內(nèi)容即為下載鏈接)(7)錨點(diǎn)鏈接(鏈接到網(wǎng)頁(yè)的具體位置)步驟:(1)創(chuàng)建錨點(diǎn)(2)制作鏈接(#錨記)隱藏錨點(diǎn):編輯一一首選參數(shù)一一不可見(jiàn)元素注:錨點(diǎn)鏈接不但可以鏈接本頁(yè)面中的錨點(diǎn),也可以鏈接到其它頁(yè)面中的錨點(diǎn)。(8)腳本鏈接(實(shí)現(xiàn)特殊功能)Javascript:window.close()關(guān)閉窗口Javascript:windo

10、w.print()打 文字第二十節(jié)、表格一、表格的作用1、制作表格2、定位布局 二、表格的建立1、插入一一表格2、常用面板三、表格的元素及代碼1、<td> .</td>:?jiǎn)卧?、<tr> .</tr>:行3、<table> .</table> 表格四、元素的選擇1、單元格2、行3、表格第二十一節(jié)、表格屬性一、表格參數(shù)1、行數(shù)和列數(shù)2、寬度單位:(1)象素表示絕對(duì)值(固定值)。(2)用表示相對(duì)值。3、填充:?jiǎn)卧裰械膬?nèi)容與邊框的距離。4、間距:表示單元格與單元格之間的距離。5、邊框:設(shè)置表格是否留有邊線。6、對(duì)齊7、清除行

11、高和列寬8、將寬度轉(zhuǎn)換為象素9、將寬度轉(zhuǎn)換為百分比第二十二節(jié)、行和單元格局性1、水平:?jiǎn)卧駜?nèi)容水平對(duì)齊方式。2、垂直:?jiǎn)卧駜?nèi)容垂直對(duì)齊方式。3、寬:?jiǎn)卧駥挾取?、高:?jiǎn)卧窀叨取?、背景顏色:?jiǎn)卧癖尘邦伾?、拆分和合并單元格。注:在利用表格排版時(shí)網(wǎng)頁(yè)中各種元素都是放入單元格內(nèi)進(jìn)行排版的。第二十三節(jié)、網(wǎng)頁(yè)布局和大小一、網(wǎng)頁(yè)布局分類(1) “同”字式(2) “廠”字式或反“廠”字式二、網(wǎng)頁(yè)大小(寬度大小)(1) 800*600分辨率寬度設(shè)為 778象素(2) 1024*768分辨率寬度設(shè)為 950象素或1002象素注:滾動(dòng)條一般占有 22個(gè)象素第二十四、二十五、二十六節(jié)、實(shí)例一一網(wǎng)頁(yè)制作

12、1一、制作網(wǎng)站時(shí)的步驟:1、設(shè)置頁(yè)面邊距(0, 0, 0, 0)即上、下、左、右邊距都為0。2、先整體后局部:先插入一個(gè)大表格用來(lái)定位和決定網(wǎng)頁(yè)寬度,然后再插入小表格來(lái)定位 每一個(gè)部分。注:(1)大表格盡量不拆分。(即一行一列)(2)表格與表格之間可以嵌套。3、插入表格(0, 0, 0)即填充、邊框、間距為0。4、表格大小和居中(1) 800*600分辨率寬度設(shè)為 778象素(2) 1024*768分辨率寬度高為 950象素或1002象素5、將單元格內(nèi)光標(biāo)定位到左上角(選單元格設(shè)置)6、將單元格的高度設(shè)置和圖片高度一樣(作為背景時(shí))第二十七一一三十一節(jié)、實(shí)例一一網(wǎng)頁(yè)制作1-81、圖片可以直接插

13、入到表格中、也可以作為背景插入。注:什么時(shí)候直接插入到表格、什么時(shí)候作為背景插入呢?(1)當(dāng)需要在單元格內(nèi)添加文字時(shí)就必須使用背景插入。(2)如果需要做超鏈接時(shí)就必須作為圖片插入。2、選擇表格標(biāo)簽后插入表格可以將新插入的表格放在所選擇表格的下面。3、插入一一圖像對(duì)象一一圖像占位符注:插入圖像占位符后就可以任意設(shè)置表格的寬度和高度。第三十二、三十三節(jié)、實(shí)例一一網(wǎng)頁(yè)制作9-10一、添加行和列1、插入插入表格對(duì)象2、布局標(biāo)簽3、Tab鍵(光標(biāo)定位在最后一個(gè)單元格內(nèi)按tab鍵)第三十四節(jié)、參數(shù)的優(yōu)先級(jí)一、參數(shù)優(yōu)先級(jí):?jiǎn)卧?>>行>> 表格注:表格間距部分的顏色取決于表格背景顏

14、色。二、圖像大于顏色且自動(dòng)復(fù)制1、背景顏色:bgcolor2、背景圖像:background第三十五節(jié)、表格中單元格大小的設(shè)置1、寬度要根據(jù)實(shí)際大小來(lái)進(jìn)行設(shè)置。2、在設(shè)置表格單元格寬度時(shí),可以保留某一列單元格的寬度不設(shè)置。第三十六一一三十八節(jié)、細(xì)線邊框表格的制作1-31、利用表格的間距屬性來(lái)制作。2、利用表格的填充屬性來(lái)制作。第三十九節(jié)、實(shí)例一一簡(jiǎn)單導(dǎo)航條1、利用表格的間距屬性來(lái)制作。第四十節(jié)、實(shí)例一一水平細(xì)線與標(biāo)題欄1、插入圖像占位符2、刪除單元格中的空格占位符:&nbsp;第四十一節(jié)、實(shí)傷J圓角表格 1第四十二節(jié)、實(shí)傷J圓角表格 21、height="100%"

15、:表示高度為 100%。第四十三節(jié)、網(wǎng)頁(yè)平面效果圖1、網(wǎng)站在制作前首先要做網(wǎng)頁(yè)效果平面圖。2、平面圖做好以后再用photoshop、或Fireworks等軟件中的切片工具做切片。3、切片做好后并進(jìn)行保存。4、刪除不要的部分,保留需要的部分并進(jìn)行重命名。第四十四節(jié)、滾動(dòng)效果代碼1、<marquee>內(nèi)容 </marquee>(1) direction:方向(2) scrollamount:速度(一般設(shè)為 3)(3) on mouseover= "this.stop()”: 鼠標(biāo)移上去停止(4) on mouseout="this.start()”:鼠標(biāo)

16、離開(kāi)時(shí)開(kāi)始。第四十五節(jié)、層一、什么是層層是網(wǎng)頁(yè)中比較特殊的對(duì)象,它可以自由移動(dòng)、顯示或隱藏,同時(shí)還可以相互嵌套、疊加,所以很大程度上彌補(bǔ)了表格排版的不足。但是層的定位比較難處理;同一個(gè)網(wǎng)頁(yè)在不同版本的瀏覽器中顯示的位置有差別, 因此完全使用層排版的網(wǎng)頁(yè)較少, 它主要被用來(lái)完成一些動(dòng) 態(tài)效果。二、層的作用1、可以靈活定位2、層可以嵌套層3、可以制作特效三、層的創(chuàng)建1、布局面板2、按住ctrl鍵表示連續(xù)繪制層。3、層標(biāo)的html標(biāo)簽是:<div></div>第四十六節(jié)、層的相關(guān)屬性1一、層的屬性1、左/上:表示層距離頁(yè)面的左邊或上邊的距離。2、寬/高:層的大小。二、Z軸:代

17、表層的次序,數(shù)值越大越在上面。三、可見(jiàn)性1、default:默認(rèn)2、inherit:繼承3、visible :可見(jiàn)4、hidden:隱藏第四十七、四十八節(jié)、層的相關(guān)屬性2-3一、背景圖像二、溢出1、visible :可見(jiàn),表示根據(jù)內(nèi)容的多少來(lái)決定顯示區(qū)域大小。2、hidden:隱藏,如果內(nèi)容超過(guò)規(guī)定的區(qū)域?qū)?huì)被隱藏。3、scroll :滾動(dòng)條(右邊和下邊都會(huì)出現(xiàn)滾動(dòng)條)4、auto:自動(dòng),根據(jù)內(nèi)容多少和層的大小來(lái)決定是否出現(xiàn)滾動(dòng)條。第四十九節(jié)、行為一、很多網(wǎng)站在頁(yè)面上添加了用JavaScript來(lái)實(shí)現(xiàn)的動(dòng)態(tài)特效,這些效果在Dreamweaver中也可以通過(guò)行為來(lái)實(shí)現(xiàn)。由此可見(jiàn)行為主要是用來(lái)做一

18、些動(dòng)態(tài)效果、是網(wǎng)頁(yè)中設(shè)置好的腳本特效。二、窗口一一行為三、行為組成行為由3個(gè)部分組成:它們分別是對(duì)象、事件、動(dòng)作。1、對(duì)象:指的是可以添加行為的對(duì)象。(如圖像,文字等)2、事件:觸發(fā)添加在對(duì)象上的動(dòng)態(tài)特效條件。3、動(dòng)作:動(dòng)態(tài)特效。四、常用事件包括有:(1) onclick :按下。(2) onmouseup: 釋放。(3) onmouseout: 離開(kāi)。(4) onmouseover: 經(jīng)過(guò)。第五十一一五十二節(jié)、實(shí)例一一菜單1-3一、菜單的制作方法1、主菜單:選中對(duì)應(yīng)的單元格,加入“顯示 /隱藏層”顯示自己,隱藏其它層。2、子菜單:選中子菜單所在的層,加入“顯示 /隱藏層”行為。當(dāng)鼠標(biāo)移上去顯

19、示自己,隱 藏其它層,當(dāng)離開(kāi)時(shí)隱藏所有層。第、窗口AP元素注:防止重疊主要是避免繪制的層產(chǎn)生重疊。第五十三節(jié)、行為2一、行為1、彈出信息:彈出一個(gè)信息窗口。2、打開(kāi)瀏覽器窗口。3-設(shè)置文件一一設(shè)置狀態(tài)欄文本4、轉(zhuǎn)至ij URL第五十四節(jié)、網(wǎng)頁(yè)背景音樂(lè)的添加一、背景音樂(lè)(可以放在網(wǎng)頁(yè)的任何一個(gè)位置,只要不破壞其它代碼的結(jié)構(gòu)。)插入媒體插件<embed src="music/bg1.mp3" width="32" height="32" hidden="true"></embed>1、Hidde

20、n :隱藏播放器。第五十五一一六十一節(jié)、表單一、什么是表單在申請(qǐng)E-mail郵箱、注冊(cè)會(huì)員時(shí),網(wǎng)站往往會(huì)要求用戶填寫一些個(gè)人信息。(如:姓名,年齡、聯(lián)系方式等)。在填寫信息的頁(yè)面上往往會(huì)包括很多表單元素,如:用戶名,密碼,單 選框或多選框等。所有這些表單元素合在一起,我們稱之為表單。免費(fèi)注冊(cè)會(huì)員用尸名有個(gè)字符組成請(qǐng)輸入您要被置的密碼諳再i史輸入您設(shè)置的密媽諳選擇您的性別話輸入您有效的電子郵箱話選搽您的密保問(wèn)題話輸入?yún)^(qū)的密保答案+7fl 主理二、表單的作用表單的主要作用是讓瀏覽者能夠有地方填寫數(shù)據(jù),然后再利用程序來(lái)收集并處理這些數(shù)據(jù)。程序可以是:ASP、PHP、.NET、JSP等。三、表單的創(chuàng)建

21、1、在制作表單時(shí),首先要插入表單然后再插入表單域。2、在制作表單時(shí),如果要用表格來(lái)定位,一定要將表格放在表單內(nèi)。3、文本域(1)字符寬度:文本域的長(zhǎng)度(2)最多字符數(shù):文本域中可以輸入的最多字符數(shù)。4、文本區(qū)域5、復(fù)選框6、復(fù)選框組:一次性可以創(chuàng)建多個(gè)復(fù)選框按鈕。7、單選按鈕8、單選按鈕組:一次性可以創(chuàng)建多個(gè)單選按鈕。9、菜單或列表域(菜單只能是單選,列表可以多選)10、跳轉(zhuǎn)菜單(是特殊的超鏈接)11、按鈕:按鈕有三種情況:“提交” “重置” “無(wú)”四:表單提交后有兩種處理方式(1)、提交到郵箱(2)、提交到指定程序處理第六十二節(jié)、框架一、什么是框架所謂框架網(wǎng)頁(yè)指的是具有一定版式的網(wǎng)頁(yè)集合(是

22、有多個(gè)網(wǎng)頁(yè)組成),框架用來(lái)拆分瀏覽器窗口,在不同的區(qū)域顯示不同的網(wǎng)頁(yè)。框架的使用讓網(wǎng)頁(yè)的組織變得更加有序。(框架網(wǎng)頁(yè)一般應(yīng)用于網(wǎng)站后臺(tái)頁(yè)面比較多。)二、框架網(wǎng)頁(yè)的制作方法1、新建一個(gè)網(wǎng)頁(yè)2插入html框架(1)左對(duì)齊(2)左側(cè)及上方嵌套(3)上方及左側(cè)嵌套三、框架網(wǎng)頁(yè)的保存文件一一保存全部第六十三節(jié)、框架頁(yè)面屬性設(shè)置 1一、框架管理面板窗口 一一框架二、框架屬性1、列值單位:象素(絕對(duì)值)和百分比(相對(duì)值)。2、相對(duì):其它框架設(shè)置了高度或?qū)挾纫院?,剩余的高度或?qū)挾榷紩?huì)分配給單位設(shè)置為“相對(duì)”的框架。通常將值設(shè)為1。第六十四節(jié)、框架頁(yè)面屬性設(shè)置 2第六十五節(jié)、實(shí)伊J音樂(lè)天堂1第六十六節(jié)、實(shí)伊J音

23、樂(lè)天堂 2一、框架網(wǎng)頁(yè)標(biāo)題的設(shè)置整體框架代碼:frameset第六十七一一六十八節(jié)、庫(kù)一、什么是庫(kù)庫(kù)是可以實(shí)現(xiàn)網(wǎng)頁(yè)同步變化的元素。二、創(chuàng)建庫(kù)1-修改一一庫(kù)一一增加對(duì)象到庫(kù)三、使用庫(kù)在要使用的地方直接插入就可以了。四、修改庫(kù)五、窗口一一資源一一庫(kù)(在資源面板中)注:庫(kù)是以單獨(dú)的頁(yè)面存儲(chǔ)的,如果要調(diào)用庫(kù),要從資源面板中應(yīng)用。應(yīng)用庫(kù)以后的文件也可以脫離聯(lián)系和關(guān)聯(lián)(在屬性面板改)。第六十九節(jié)、模板一、什么是模板庫(kù)可以將部分的頁(yè)面內(nèi)容作為一個(gè)對(duì)象插入到新的頁(yè)面中,這種方法主要用于不同網(wǎng)頁(yè)間共用相同內(nèi)容的情況。 但是假如是在多個(gè)網(wǎng)頁(yè)中,頁(yè)面大部分的內(nèi)容都是相同的,只有一個(gè)區(qū)域或幾個(gè)域區(qū)是不同的, 像這種情

24、況用庫(kù)顯然不太方便,此時(shí)就希望有一種方式能將這個(gè)頁(yè)面的整體結(jié)構(gòu)保存,只讓其中的部分區(qū)域可以進(jìn)行修改就可以了。這就是模板。二、保存為模板文件一一另存為模板注:模板一定要存放在Templates文件夾中,其他文件不要存放在Templates文件夾中,Templates文件夾必須位于站點(diǎn)的文件夾根目錄下。第七十節(jié)、新建可編輯區(qū)域一、建立可編輯區(qū)域右鍵一一模板一一新建可編輯區(qū)域第七十一節(jié)、模板的修改一、修改模板窗口一一資源一一模板第七十二節(jié)、定義可編輯標(biāo)簽一、定義可編輯標(biāo)簽修改一一模板一一令屬性可編輯1、文本:如果需要用戶在修改時(shí)輸入文本,選擇這項(xiàng)。2、URL :即鏈接地址,如果要修改網(wǎng)頁(yè)中插入的圖片

25、、鏈接等,可以使用這一項(xiàng)。3、顏色:修改時(shí)要選擇顏色,要設(shè)定網(wǎng)頁(yè)、表格、行、列等顏色的時(shí)候,需要選擇這一項(xiàng)。4、真/假:極少使用。5、數(shù)字:設(shè)置網(wǎng)頁(yè)邊界寬度、高度、表格高度、寬度,單元格高度、寬度等需要輸入數(shù)值 的屬性時(shí),就選擇這項(xiàng)。二、修改定義的標(biāo)簽屬性修改一一模板屬性第七十三節(jié)、新建可選區(qū)域一、可選區(qū)域指的是讓指定的區(qū)域在網(wǎng)頁(yè)中可以顯示也可以不顯示。二、新建可選區(qū)域1、插入一一模板對(duì)象一一可選區(qū)域2、通過(guò)常用選項(xiàng)欄三、設(shè)置可選區(qū)域?qū)傩孕薷囊灰荒0鍖傩运摹h除模板標(biāo)記修改一一模板一一刪除模板標(biāo)記第七十四節(jié)、可編輯的可選區(qū)域一、可編輯的可選區(qū)域指的是讓指定的區(qū)域在網(wǎng)頁(yè)中既可以編輯也可以設(shè)置顯示

26、或不顯示。二、可編輯的可選區(qū)域1、插入一一模板對(duì)象一一可編輯的可選區(qū)域2、通過(guò)常用選項(xiàng)欄三、設(shè)置可選區(qū)域?qū)傩孕薷囊灰荒0鍖傩运?、刪除模板標(biāo)記修改一一模板一一刪除模板標(biāo)記第七十五節(jié)、重復(fù)區(qū)域一、重復(fù)區(qū)域指的是讓指定的區(qū)域在網(wǎng)頁(yè)中重復(fù)顯示。注:重復(fù)區(qū)域不是可編輯區(qū)域, 如果希望重復(fù)區(qū)域可以編輯, 需要在重復(fù)區(qū)域內(nèi)再新建可編 輯區(qū)域。第七十六節(jié)、將模板應(yīng)用于已存在的網(wǎng)頁(yè)一、將模板應(yīng)用于已存在的網(wǎng)頁(yè)指的是將模板嵌套在當(dāng)前網(wǎng)頁(yè)中,讓當(dāng)前網(wǎng)頁(yè)的內(nèi)容顯示在模板中新建的可編輯區(qū)域。 如果模板中存有多個(gè)可編輯區(qū)域, 可以控制當(dāng)前網(wǎng)頁(yè)的內(nèi)容嵌套 在哪一個(gè)可編輯區(qū)域內(nèi)。修、修改一一模板一一應(yīng)用模板到頁(yè)第七十七節(jié)、分

27、離模板(脫離模板)一、分離模板指的是將應(yīng)用模板的網(wǎng)頁(yè)和原模板進(jìn)行分離,從而使網(wǎng)頁(yè)和模板之間沒(méi)有關(guān)聯(lián)。修改一一模板一一從模板中分離 第七十八節(jié)、csS羊式 一、什么是CSS樣式CSS樣式的全稱是:Cascading Style Sheet (層疊樣式表),利用它可以對(duì)頁(yè)面當(dāng)中的文本、 段落、圖像、頁(yè)面背景、表單元素外觀等實(shí)現(xiàn)更加精確的控制,甚至瀏覽器滾動(dòng)條等瀏覽器的一些屬性都可以通過(guò)它來(lái)調(diào)整。更為重要的是,CSS真正實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容和格式定義的分離,通過(guò)修改 CSS樣式表文件就可以修改整個(gè)站點(diǎn)文件的風(fēng)格,大大減小了更新站點(diǎn)的工 作量。二、CSS樣式和html的區(qū)別三、CSS樣式的作用1、對(duì)文字進(jìn)行

28、格式2、制作特殊效果注:簡(jiǎn)單的說(shuō),CSS樣式就是用來(lái)定義網(wǎng)頁(yè)格式的代碼。代碼一般不需要手動(dòng)去編寫。因?yàn)?我們可以使用dreamweaver自動(dòng)生成代碼。即使學(xué)員不熟悉CSS的語(yǔ)法也沒(méi)有任何困難。第七十九節(jié)、CSS羊式的分類一、CSS樣式的分類1、類(可應(yīng)用于任何 html元素):自定義樣式2、ID (僅應(yīng)用于一個(gè) html元素):自定義樣式3、標(biāo)簽(重新定義 html元素):針對(duì)代碼來(lái)設(shè)置的。4、復(fù)合內(nèi)容(基于選擇的內(nèi)容):超鏈接樣式(1)鏈接:a:link :默認(rèn)。(2) 點(diǎn)擊過(guò): a:visited :點(diǎn)擊過(guò)。(3) 懸停:a:hover:鼠標(biāo)移上去。(4) 點(diǎn)擊: a:active:點(diǎn)下

29、去。二、各種CSS樣式的特點(diǎn)1、類:定義樣式以后必須在需要用樣式的地方手動(dòng)應(yīng)用它,否則就不起作用。2、ID :同上(只能應(yīng)用一次)3、標(biāo)簽:不需要手動(dòng)應(yīng)用,頁(yè)面中有該定義標(biāo)簽會(huì)自動(dòng)應(yīng)用。4、復(fù)合內(nèi)容:可以為不同的鏈接定義不同的鏈接樣式。 三、CSS樣式保存的位置1、僅限該文檔2、新建樣式表文件第八十節(jié)、CSS羊式表的漢化1、下載漢化文件2、將文件“Resources.dll”拷貝到 Adobe Dreamweaver CS6 安裝目錄中 zh_CNResources 文 件夾下面替換原文件即可。第八十一節(jié)、csS羊式的主要參數(shù)一、類型:文本的大小、字體、顏色、樣式、修飾等。(相當(dāng)于文字格式化)

30、二、背景:背景顏色、背景圖片的設(shè)定。區(qū)方邊塊框框文本區(qū)域的整體效果,如行間距、字符間距、文本縮進(jìn)等。(文字進(jìn)一步格式化)設(shè)定對(duì)象在網(wǎng)頁(yè)上的位置,如間距、邊界等。(設(shè)置對(duì)象大?。┨砑硬煌愋蛯挾鹊倪吙颉#ㄔO(shè)置表格邊框線)(相當(dāng)于項(xiàng)目符號(hào)和編碼)六、列表:創(chuàng)建不同類型的列表,包括創(chuàng)建圖片、列表符號(hào)等 七、定位:用于層的屬性定義。包括層的類型、位置等,但因?yàn)橹苯釉趯傩悦姘逯性O(shè)置層的屬性更方便,因此并不常用。(就是以前所講的層效果)八、擴(kuò)展:實(shí)現(xiàn)一些擴(kuò)展的功能,包括換行符、鼠標(biāo)形式和通過(guò)CSS樣式給圖片添加濾鏡效果等。九、過(guò)渡:新增功能。第八十二、八十三節(jié)、類型參數(shù) 1一、類型:文本的大小、字體、顏色

31、、樣式、修飾等。(相當(dāng)于文字格式化)1、字體(設(shè)置常用字體,如:宋體)2、大?。赫囊话銥?12象素。第八十四節(jié)、背景參數(shù)一、背景:背景顏色、背景圖片的設(shè)定。1、附件(1)固定(fixed):背景圖片固定不動(dòng)(2)滾動(dòng)(scroll):背景圖片隨著文字滾動(dòng)而滾動(dòng)第八十五節(jié)、區(qū)塊參數(shù)一、區(qū)塊:文本區(qū)域的整體效果,如行間距、字符間距、文本縮進(jìn)等。(文字進(jìn)一步格式化)第八十六、八十七節(jié)、方框和邊框參數(shù)一、方框:設(shè)定對(duì)象在網(wǎng)頁(yè)上的位置,如間距、邊界等。(設(shè)置對(duì)象大小,如:圖片、層等)二、邊框:添加不同類型寬度的邊框。(設(shè)置表格邊框線)第八十八節(jié)、多樣式的應(yīng)用一、使用類樣式02$=樣式名。Span標(biāo)簽的

32、應(yīng)用。注:在這里span沒(méi)有實(shí)質(zhì)性意義,只是為了區(qū)分不同對(duì)象應(yīng)用不同的CSS樣式。第八十九節(jié)、列表參數(shù)一、列表:創(chuàng)建不同類型的列表,包括創(chuàng)建圖片、列表符號(hào)等。(相當(dāng)于項(xiàng)目符號(hào)和編碼)類型:1、disc:圓點(diǎn)2、circle :圓圈3、square:方塊4、decimal:數(shù)字注:先要通過(guò)屬性欄應(yīng)用列表后才有效果。第九十節(jié)、擴(kuò)展參數(shù)一、擴(kuò)展:實(shí)現(xiàn)一些擴(kuò)展的功能,包括換行符、鼠標(biāo)形式和通過(guò)CSS樣式給圖片添加濾鏡。(1) fliph :左右翻轉(zhuǎn)(2) flipv :垂直翻轉(zhuǎn)(3) invert:反向(4) gray:去色(可加在 body標(biāo)簽也可以加在img標(biāo)簽)第九十一節(jié)、標(biāo)簽一、CSS樣式的分

33、類1、類(可應(yīng)用于任何 html元素):自定義樣式2、ID (僅應(yīng)用于一個(gè) html元素):自定義樣式3、標(biāo)簽(重新定義 html元素):針對(duì)代碼來(lái)設(shè)置的。4、復(fù)合內(nèi)容(基于選擇的內(nèi)容):超鏈接樣式二、樣式的應(yīng)用優(yōu)先次序用戶可以重新定義幾平所有的html標(biāo)簽,讓它們變成自己所期望的樣子。當(dāng)給不同級(jí)別的重定義html樣式發(fā)生沖突時(shí),html標(biāo)簽中層次越低的優(yōu)先級(jí)別越高。比如body、table、tr、td上都定義了文字顏色、字體、大小、那么就應(yīng)該以td的設(shè)定為準(zhǔn),所有單元格里的文字都按照td的格式來(lái)顯示。第九十二節(jié)、復(fù)合內(nèi)容一、CSS樣式的分類1、類(可應(yīng)用于任何 html元素):自定義樣式2、

34、ID (僅應(yīng)用于一個(gè) html元素):自定義樣式3、標(biāo)簽(重新定義 html元素):針對(duì)代碼來(lái)設(shè)置的。4、復(fù)合內(nèi)容(基于選擇的內(nèi)容):超鏈接樣式(1) a:link :默認(rèn)。(2) a:visited :點(diǎn)擊過(guò)。(3) a:hover :鼠標(biāo)移上去。(4) a:active:點(diǎn)下去。第九十三節(jié)、多種超鏈接樣式的定義和使用一、CSS樣式的分類1、類(可應(yīng)用于任何 html元素):自定義樣式2、ID (僅應(yīng)用于一個(gè) html元素):自定義樣式3、標(biāo)簽(重新定義 html元素):針對(duì)代碼來(lái)設(shè)置的。4、復(fù)合內(nèi)容(基于選擇的內(nèi)容):超鏈接樣式(1) .a1:link :默認(rèn)。(2) .a1:visite

35、d :點(diǎn)擊過(guò)。(3) .a1:hover :鼠標(biāo)移上去。(4) .a1:active:點(diǎn)下去。第九十四節(jié)、CSS羊式的保存位置一、CSS樣式的保存位置1、僅限該文檔(僅對(duì)定義的文件起作用)2、新建樣式表文件(任何一個(gè)文件都可調(diào)用)第九十五節(jié)、一般站點(diǎn) CSS羊式的設(shè)置一、一般站點(diǎn)CSS樣式的設(shè)置1、body標(biāo)簽:邊距、背景2、td標(biāo)簽:文字格式(全局文字格式)3、復(fù)合內(nèi)容(超鏈接)4、根據(jù)要求設(shè)置特殊樣式(用類來(lái)設(shè)置)5、保存位置選擇“新建樣式表文件”。第九十六節(jié)、實(shí)例一一CSS樣式的綜合應(yīng)用1第九十七節(jié)、實(shí)例一一CSS樣式的綜合應(yīng)用21、復(fù)制CSS樣式:按住Ctrl鍵拖動(dòng)。第九十八節(jié)、實(shí)例一一CSS樣式在表單中的應(yīng)用第九十九節(jié)、什么是IP地址和域名一、什么是IP地址?我們知道,在Internet上有千百萬(wàn)臺(tái)主機(jī),為了區(qū)分這些主機(jī),人們給每臺(tái)主機(jī)都分配了一個(gè)專門的地址,稱為IP地址。通過(guò)IP地址就可以訪問(wèn)到每一臺(tái)主機(jī)。IP地址由4組數(shù)字組成,每組數(shù)字都不大于 256,各組數(shù)字之間用小

溫馨提示

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

評(píng)論

0/150

提交評(píng)論