網(wǎng)頁(yè)制作與設(shè)計(jì)課程_第1頁(yè)
網(wǎng)頁(yè)制作與設(shè)計(jì)課程_第2頁(yè)
網(wǎng)頁(yè)制作與設(shè)計(jì)課程_第3頁(yè)
網(wǎng)頁(yè)制作與設(shè)計(jì)課程_第4頁(yè)
網(wǎng)頁(yè)制作與設(shè)計(jì)課程_第5頁(yè)
已閱讀5頁(yè)，還剩10頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、目錄一、網(wǎng)頁(yè)制作與設(shè)計(jì)課程21、網(wǎng)頁(yè)文件格式22、網(wǎng)頁(yè)中插入圖像33、網(wǎng)頁(yè)制作與設(shè)計(jì)34、設(shè)置段落4二、DreamWeaver創(chuàng)建本地站點(diǎn)4三、表單技術(shù)41、表單52、腳本53、表單的排版54、表單的web瀏覽65、捕獲表單所提交的數(shù)據(jù)66、web瀏覽表單并進(jìn)行數(shù)據(jù)提交67、錨點(diǎn)的設(shè)置7四、圖層:時(shí)間軸71、時(shí)間軸:72、層和時(shí)間軸7（1）在Dreamweaver中創(chuàng)建層8（2）選擇,移動(dòng),調(diào)整層的大小和刪除層8（3）設(shè)置層的屬性面板8(4)使用層管理器管理層8五.設(shè)置與層相關(guān)的行為91.顯示層,隱藏層,拖動(dòng)層行為9(1)拖動(dòng)層9(2)顯示-隱藏層92.行為涉及對(duì)象,事件,動(dòng)作.9(1)彈出消

2、息行為9(2)調(diào)用javascript腳本10(3)調(diào)用javascript10(4)調(diào)用javascript10(5)轉(zhuǎn)到URL行為10(6)跳轉(zhuǎn)菜單行為11(7)跳轉(zhuǎn)菜單開(kāi)始行為11(8)打開(kāi)瀏覽器窗口行為11(9)顯示彈出式菜單行為11六、模板12七、布局表格121、布局單元格122、保證布局表格中各列的寬度12八、如何使用模板生成頁(yè)面12九、如何更新模板13十、模板13十一、庫(kù)13十二、自定義CSS樣式14十三、如何進(jìn)行本地站點(diǎn)的上傳操作14十四、局域網(wǎng)內(nèi)創(chuàng)建FTP服務(wù)器,實(shí)現(xiàn)網(wǎng)站的上傳.15一、網(wǎng)頁(yè)制作與設(shè)計(jì)課程1、網(wǎng)頁(yè)文件格式網(wǎng)頁(yè)文件的擴(kuò)展名 htm網(wǎng)頁(yè)制作的基本評(píng)言 HTML語(yǔ)言

3、Hyper Text Markup Language 超文本標(biāo)識(shí)語(yǔ)言總共只有不到 100條命令,非常簡(jiǎn)單.完全使用它并不能制作動(dòng)態(tài)網(wǎng)頁(yè).隨著網(wǎng)頁(yè)設(shè)計(jì)要求的提高及動(dòng)態(tài)效果的引入,需要另外的軟件加以配合,誕生了CSS樣式表.CSS樣式表:它為網(wǎng)頁(yè)設(shè)計(jì)提供了更多更規(guī)范的屬性,使得網(wǎng)頁(yè)設(shè)計(jì)變得更加輕松.HTML命令-每一條命令稱(chēng)為一個(gè)標(biāo)簽.標(biāo)簽由一對(duì)小括號(hào)括起來(lái): <html>(html、html)<html> <HTML> <Html>都可以，但是推薦使用小寫(xiě)英文字母任何一個(gè)網(wǎng)頁(yè) 必須以 <html>開(kāi)始，以 </html>結(jié)束

4、，<html>和</html>是一對(duì)標(biāo)簽，雙標(biāo)簽網(wǎng)頁(yè)也有兩部分組成：頭部和主體目前，由于大家水平的限制，頭部只能定義網(wǎng)頁(yè)標(biāo)題文字所有需要在瀏覽器中顯示的內(nèi)容全部定義在網(wǎng)頁(yè)的主體內(nèi)定義頭部的標(biāo)簽：<head> . </head>定義網(wǎng)頁(yè)標(biāo)題的標(biāo)簽：<title> . </title>定義網(wǎng)頁(yè)主體的標(biāo)簽：<body>.</body>提示：標(biāo)簽之間可能嵌套，得不能交叉：網(wǎng)頁(yè)最基本的結(jié)構(gòu)如下：<html><head> <title>網(wǎng)頁(yè)標(biāo)題文字</title>

5、</head><body> 這里填寫(xiě)網(wǎng)頁(yè)具體的內(nèi)容</body></html>為網(wǎng)頁(yè)標(biāo)簽添加屬性：語(yǔ)法格式：<標(biāo)簽名稱(chēng) 屬性名稱(chēng)=屬性值 .>可以添加個(gè)屬性，屬性與標(biāo)簽之間使用空格隔開(kāi)，屬性之間也使用空格隔開(kāi)，屬性之間沒(méi)有先后順序提示：不同的標(biāo)簽有不同的屬性插入網(wǎng)頁(yè)背景圖像：只能插入 jpg ，gif，png格式的圖像圖像最好使用英文名稱(chēng)，中文會(huì)出現(xiàn)編碼錯(cuò)誤圖像必須存在，而且必須與網(wǎng)頁(yè)保存在同一個(gè)文件夾內(nèi)<body bgcolor=red> 這是設(shè)置網(wǎng)頁(yè)的背景顏色<body background=aa.jpg>

6、這是設(shè)置網(wǎng)頁(yè)的背景圖像在網(wǎng)頁(yè)中插入超級(jí)鏈接：超級(jí)鏈接是網(wǎng)頁(yè)制作的核心，它將若干個(gè)相關(guān)的資源文檔進(jìn)行鏈接在mm.htm網(wǎng)頁(yè)中添加超級(jí)鏈接，指向 qqq.htm 網(wǎng)頁(yè)：<a href=qqq.htm>打開(kāi)qqq.htm網(wǎng)頁(yè)</a>，語(yǔ)法格式：<a href=目標(biāo)網(wǎng)頁(yè)名稱(chēng)>鏈接說(shuō)明文字</a>由于剛剛的qqq.htm頁(yè)面與當(dāng)前頁(yè)面保存在一起，為當(dāng)前站點(diǎn)資源，因此只需要給出文件名，而不需要給出路徑如果你準(zhǔn)備鏈接搜狐網(wǎng)，怎么辦？這是錯(cuò)誤的：<a href=>打開(kāi)搜狐網(wǎng)</a>這是正確的：<a href=>打開(kāi)搜狐網(wǎng)<

7、;/a>2、網(wǎng)頁(yè)中插入圖像如何在網(wǎng)頁(yè)中插入圖像：圖像最好使用英文名稱(chēng)圖像必須與網(wǎng)頁(yè)保存在一起圖像只能為 jpg gif png格式<img src=圖像名稱(chēng).擴(kuò)展名>以下是錯(cuò)誤的：<img scr=圖像名稱(chēng).擴(kuò)展名>在網(wǎng)頁(yè)中插入段落：段與段之間會(huì)自動(dòng)空一行！<p>段落文字</p>如何對(duì)文字進(jìn)行居中顯示<p align=center>這是我的第一個(gè)網(wǎng)頁(yè)</p>如何更改文字的大小，顏色和字體<font size=大小 color=顏色 face=字體>字符</font>3、網(wǎng)頁(yè)制作與設(shè)計(jì)在網(wǎng)頁(yè)中設(shè)

8、置字符的顏色,大小和字體<font size=大小 color=顏色 face=字體>字符</font>大小 1 -7 號(hào),7號(hào)最大顏色:一般使用顏色字符表示,但顏色字符英文太多,非常難記,而且表述也不好! blue red yellow purple pink black white字體:宋體 仿宋 楷體_gb2312,幼圓,隸書(shū)等.如何具體描述字符的大小?無(wú)法使用HTML來(lái)完成,只能使用CSS樣式表來(lái)完成.在使用CSS表示網(wǎng)頁(yè)字符大小時(shí),有 px 度量單位(像素)講的3號(hào)字,其實(shí)就是 16px(16個(gè)像素)如何在網(wǎng)頁(yè)中引入CSS樣式表呢?<標(biāo)簽名稱(chēng) style

9、="屬性名稱(chēng):屬性值;."><font style="font-size:16px;color:red;font-family:隸書(shū)">font-size 字符大小font-family 字符字體color 顏色任何一個(gè)HTML標(biāo)簽都有兩種屬性:HTML屬性,CSS樣式屬性,推薦使用CSS樣式屬性,因?yàn)樗?更規(guī)范4、設(shè)置段落如何設(shè)置段落:段落與段落之間會(huì)自動(dòng)空一行.<p>段落文字</p>居中顯示標(biāo)簽:<center>字符</center>段落的首行縮進(jìn):使用CSS樣式表完成首行縮進(jìn)&l

10、t;p style="text-indent:32px"></p>要求改變網(wǎng)頁(yè)狀態(tài)欄文字(使用javascript腳本)如何在網(wǎng)頁(yè)中嵌入javascript腳本:<script language=javascript>document.title="javascript腳本練習(xí)"window.status="網(wǎng)頁(yè)制作與設(shè)計(jì)教學(xué)"</script>二、DreamWeaver創(chuàng)建本地站點(diǎn)首先需要在你本地的計(jì)算機(jī)的磁盤(pán)上創(chuàng)建一個(gè)本地站點(diǎn)(1.在你計(jì)算機(jī)的磁盤(pán)上創(chuàng)建一個(gè)文件夾;2.將該文件夾設(shè)置為Dr

11、eamweaver的本地站點(diǎn)文件夾)也就是當(dāng)前站點(diǎn)涉及的全部資源文件必須全部存放在你創(chuàng)建的文件夾內(nèi)!自動(dòng)刷新本地文件列表:使Dreamweaver本地文件列表窗口的內(nèi)容與本地站點(diǎn)對(duì)應(yīng)的磁盤(pán)文件夾內(nèi)容保持同步!如果不勾選"自動(dòng)刷新本地文件列表"選項(xiàng),則用戶(hù)需要按f5刷新本地文件列表窗口"默認(rèn)圖像文件夾"參數(shù):首先在本地站點(diǎn)文件夾內(nèi)新建一個(gè)專(zhuān)門(mén)用于保存站點(diǎn)圖像的文件夾(如:images),然后設(shè)置該參數(shù),其值為本地站點(diǎn)內(nèi)專(zhuān)門(mén)保存圖像的文件夾.作用:當(dāng)用戶(hù)在編輯網(wǎng)頁(yè)時(shí),使用的任何一張不在當(dāng)前站點(diǎn)內(nèi)的圖像時(shí),Dreamweaver會(huì)自動(dòng)將其復(fù)制到站點(diǎn)內(nèi)指定的圖像

12、文件夾內(nèi).啟用緩存:在Dreamweaver站點(diǎn)啟動(dòng)時(shí),它會(huì)自動(dòng)將本地站點(diǎn)內(nèi)全部的文件之間的鏈接關(guān)系保存在緩存中,只要用戶(hù)在Dreamweaver本地文件列表窗口中移動(dòng)文件或改變文件的名稱(chēng),Dreamweaver會(huì)自動(dòng)更新與當(dāng)前文件相關(guān)的全部鏈接.不致于發(fā)生鏈接中斷,網(wǎng)頁(yè)或其他資源無(wú)法訪問(wèn)的情況.提示:網(wǎng)站創(chuàng)建后,千萬(wàn)不要在本地文件列表窗口之外去更改站點(diǎn)內(nèi)文件的名稱(chēng)或移動(dòng)站點(diǎn)內(nèi)指定的文件或文件夾,否則會(huì)發(fā)生鏈接中斷!站點(diǎn)名稱(chēng)站點(diǎn)文件夾默認(rèn)圖像文件夾http地址是否自動(dòng)刷新本地文件列表窗口是否啟動(dòng)緩存三、表單技術(shù)1、表單表單(form) 就是數(shù)據(jù)輸入輸出的窗口.通過(guò)表單技術(shù),客戶(hù)端用戶(hù)可以將數(shù)據(jù)

13、提交給遠(yuǎn)程的WEB服務(wù)器.表單是客戶(hù)端與服務(wù)端進(jìn)行數(shù)據(jù)交互的重要手段.一個(gè)網(wǎng)頁(yè)原則上可以設(shè)置多個(gè)表單,但實(shí)際上只有一個(gè).<form>.</form>參數(shù)講解:<form name=表單名稱(chēng) method=post/get action=動(dòng)態(tài)網(wǎng)頁(yè)文件> 表單內(nèi)容定義</form>表單內(nèi)部的對(duì)象非常多,比如:單行文本框,密碼框,多行文本框,復(fù)選框,單選框(單選按鈕),下拉列表框,提交按鈕,重置按鈕,普通按鈕(可添加腳本)上述對(duì)象必須添加在<form>.</form>標(biāo)簽之間,否則無(wú)效.2、腳本腳本:添加到網(wǎng)頁(yè)中,用以實(shí)現(xiàn)特殊網(wǎng)

14、頁(yè)效果的命令,稱(chēng)為腳本.腳本環(huán)境有兩種:VBScript和JavaScript.默認(rèn)情況下,使用的是JavaScript.VBScript是VB的簡(jiǎn)版,用于網(wǎng)頁(yè)中.它不區(qū)分命令字符的大小寫(xiě).JavaScript是嚴(yán)格區(qū)分字符大小寫(xiě).在兩種腳本環(huán)境中均定義了系統(tǒng)的相關(guān)對(duì)象:window代表整個(gè)瀏覽器窗口;document代表當(dāng)前正在瀏覽的網(wǎng)頁(yè). window.close() window對(duì)象下的close()方法,用于關(guān)閉當(dāng)前正在瀏覽的網(wǎng)頁(yè)在網(wǎng)頁(yè)對(duì)象上添加相關(guān)的動(dòng)作,當(dāng)動(dòng)作發(fā)生時(shí)將會(huì)執(zhí)行指定的命令:onclick - 鼠標(biāo)的單擊動(dòng)作onclick="javascript:window.

15、close()"下面是一個(gè)完整的提交關(guān)閉網(wǎng)頁(yè)窗口的按鈕源代碼:<input type=button value="關(guān)閉網(wǎng)頁(yè)" onclick="javascript:window.opener='null'window.close()">onclick="javascript:document.fgColor='red'" 前景onclick="javascript:document.bgColor='red'" 背景3、表單的排版用表格對(duì)象對(duì)表

16、單進(jìn)行排版先插入一個(gè)表單,然后在表單內(nèi)插入一個(gè)用于排版的表格,最后按要求將表單對(duì)象添加到表格單元格內(nèi)要進(jìn)行表單數(shù)據(jù)的提交，必須要進(jìn)行web瀏覽因此，需要在<form>標(biāo)簽中添加 action 屬性，其值<form . action=20080888.asp>表示當(dāng)點(diǎn)擊提交按按鈕后，當(dāng)前表單中填寫(xiě)的數(shù)據(jù)遞交給20080888.asp動(dòng)態(tài)網(wǎng)頁(yè)進(jìn)行處理。編輯 20080888.asp 動(dòng)態(tài)網(wǎng)頁(yè)<% 中間是asp命令，用于獲取客戶(hù)端提交的數(shù)據(jù)%>變量名稱(chēng)=request("表單的名稱(chēng)")獲取表單中指定對(duì)象的值，并存放指定的變量中xm=reques

17、t("xm") 將表單中xm對(duì)象的值存放在變量xm中response.write xm 將變量xm的值顯示在瀏覽器窗口中4、表單的web瀏覽為了正確提交表單的數(shù)據(jù),必須采用web方式瀏覽表單.需要使用IIS來(lái)發(fā)布你的本地站點(diǎn).開(kāi)始->程序->管理工具->internet服務(wù)管理器,在窗口的右側(cè)區(qū)域展開(kāi)"默認(rèn)WEB站點(diǎn)"選項(xiàng).右擊"默認(rèn)WEB站點(diǎn)"->屬性,在彈出的屬性對(duì)話框窗口中,選擇"WEB站點(diǎn)"選項(xiàng)卡,在當(dāng)前選項(xiàng)卡中填寫(xiě)當(dāng)前WEB站點(diǎn)的名稱(chēng),瀏覽當(dāng)前WEB站點(diǎn)所使用的IP地址,填寫(xiě)當(dāng)前W

18、EB服務(wù)的端口號(hào)(維持80不變)選擇"主目錄"選項(xiàng)卡:在當(dāng)前選項(xiàng)卡中設(shè)置當(dāng)前WEB站點(diǎn)對(duì)應(yīng)的本地站點(diǎn)文件夾,及當(dāng)前WEB站點(diǎn)的訪問(wèn)權(quán)限(只需要選擇腳本資源訪問(wèn)和只讀).選擇"文檔"選項(xiàng)卡:在當(dāng)前選項(xiàng)卡中設(shè)置當(dāng)前WEB站點(diǎn)的默認(rèn)主頁(yè),一般是:該進(jìn)行WEB瀏覽表單網(wǎng)頁(yè)了:在Internet信息管理服務(wù)器窗口的右側(cè)子區(qū)域,右擊指定的表單網(wǎng)頁(yè),選擇"瀏覽"即可.5、捕獲表單所提交的數(shù)據(jù)設(shè)置簡(jiǎn)單的ASP網(wǎng)頁(yè),用于捕獲表單所提交的數(shù)據(jù)在asp中有兩個(gè)重要的系統(tǒng)內(nèi)置對(duì)象request對(duì)象:用于捕獲表單提交的數(shù)據(jù)response對(duì)象:用于將變量的數(shù)據(jù)

19、顯示在瀏覽器窗口中所有ASP腳本命令必須全部放在<% %>標(biāo)簽內(nèi)部.獲取表單中指定對(duì)象的值的命令:變量名稱(chēng)=request.form("表單對(duì)象名稱(chēng)")xm=request.form("xm")在瀏覽器窗口中顯示指定變量的值:response.write "字符串" & 變量名稱(chēng)response.write "姓名=" & xm & "<br>"在點(diǎn)擊表單的提交按鈕時(shí),自動(dòng)調(diào)用相關(guān)的asp網(wǎng)頁(yè)進(jìn)行表單數(shù)據(jù)的處理在dreamweaver的設(shè)計(jì)視圖窗口

20、,選擇表單對(duì)象,然后在屬笥面板的動(dòng)作文本框內(nèi)填寫(xiě)相關(guān)的asp網(wǎng)頁(yè)名稱(chēng)即可.6、web瀏覽表單并進(jìn)行數(shù)據(jù)提交在網(wǎng)頁(yè)中設(shè)置超級(jí)鏈接在網(wǎng)頁(yè)中制作超級(jí)鏈接,鏈接的資源可以是任何資源類(lèi)型:如果是文本文件,會(huì)直接打開(kāi)如果是word文檔,用戶(hù)可以選擇打開(kāi)或保存如果是網(wǎng)頁(yè),會(huì)直接打開(kāi)并顯示如果是圖片,會(huì)直接顯示圖片如果是音樂(lè),會(huì)播放音樂(lè)或視頻如果是flash動(dòng)畫(huà),會(huì)直接播放動(dòng)畫(huà)如果是壓縮文檔,則會(huì)選擇下載如果是可執(zhí)行文件,也會(huì)選擇下載如果在新開(kāi)窗口打開(kāi)鏈接的內(nèi)容:選擇鏈接文字,在屬性面板的"目標(biāo)"下拉列表框中,選擇"_blank"選項(xiàng).7、錨點(diǎn)的設(shè)置其實(shí)就是一篇文章中的

21、標(biāo)簽.在同一個(gè)網(wǎng)頁(yè)內(nèi)部可以創(chuàng)建N個(gè)錨點(diǎn),然后再在網(wǎng)頁(yè)的開(kāi)頭設(shè)置超級(jí)鏈接,指向這些錨點(diǎn),這樣實(shí)現(xiàn)的是:同一篇網(wǎng)頁(yè)內(nèi)容的快速定位.錨點(diǎn)鏈接:一般只指向同一篇文章的內(nèi)部的錨點(diǎn)處,用于快速定位,但也可以指向另一個(gè)網(wǎng)頁(yè)中聽(tīng)錨點(diǎn),語(yǔ)法:<a href=網(wǎng)頁(yè)地址和名稱(chēng)#錨點(diǎn)名稱(chēng)>鏈接文字</a>制作過(guò)程:先在網(wǎng)頁(yè)中定義N個(gè)錨點(diǎn):常用->錨點(diǎn)標(biāo)記在網(wǎng)頁(yè)的開(kāi)頭新建多個(gè)鏈接,每個(gè)鏈接指向剛剛新建的錨點(diǎn),在鏈接名稱(chēng)前面一定要添加"#"四、圖層:時(shí)間軸1、時(shí)間軸:最簡(jiǎn)單的動(dòng)畫(huà)gif動(dòng)畫(huà),目前幾乎都是FLASH動(dòng)畫(huà).時(shí)間軸中的每一個(gè)小方格為一幀.就是動(dòng)畫(huà)某一時(shí)刻播放的內(nèi)

22、容.在控制動(dòng)畫(huà)播放時(shí),主要有兩種幀:關(guān)鍵幀,一種是普通幀.我們只需要控制關(guān)鍵幀中的內(nèi)容,普通幀的內(nèi)容由系統(tǒng)根據(jù)需求自動(dòng)決定.用戶(hù)只需要控制關(guān)鍵幀中的內(nèi)容即可.如何對(duì)文字或圖像制作動(dòng)畫(huà),必須先將文字或圖像存放在層內(nèi),再對(duì)層做運(yùn)動(dòng).補(bǔ)間動(dòng)畫(huà):動(dòng)畫(huà)中除了關(guān)鍵幀,還有普通幀,普通幀的動(dòng)容由系統(tǒng)自動(dòng)決定.逐幀動(dòng)畫(huà):動(dòng)畫(huà)中的每一幀都是關(guān)鍵幀,可能非常細(xì)致地刻畫(huà)人物的表情.兩個(gè)關(guān)鍵幀決定直線運(yùn)動(dòng),兩個(gè)以上的關(guān)鍵幀可以做曲線運(yùn)動(dòng).如何添加關(guān)鍵幀:按住ctrl鍵,在時(shí)間軸面板中當(dāng)前動(dòng)畫(huà)的指定幀處點(diǎn)擊,即可添加一個(gè)關(guān)鍵幀.記錄層的運(yùn)動(dòng)路徑:選擇層左上角的層標(biāo)志,右擊,在彈出的快捷菜單中點(diǎn)擊"記錄路徑&q

23、uot;,然后開(kāi)始拖動(dòng)層,最后松下鼠標(biāo),在時(shí)間軸面板中就記錄了你拖動(dòng)層運(yùn)動(dòng)的所有路徑.制作電子顯示屏效果:跑火燈效果:1.制作子父層:完成子父層的制作后,應(yīng)調(diào)整子層的位置,位于父層的一側(cè).2.將子層拖入時(shí)間軸,為其制作動(dòng)畫(huà)效果,從父層的一側(cè)運(yùn)動(dòng)到另一側(cè).(往返運(yùn)動(dòng))3.一定要設(shè)置父層的溢出屬性為hidden.2、層和時(shí)間軸在默認(rèn)情況下,網(wǎng)頁(yè)中的全部對(duì)象都布局在舞臺(tái)(網(wǎng)頁(yè)的背景層)中.對(duì)象與對(duì)象之間遵守嚴(yán)格的排版和布局約束.對(duì)象與對(duì)象不可以在空間布局上發(fā)生重疊.它給網(wǎng)頁(yè)內(nèi)容的編輯帶來(lái)一定的困難. 克服這一難題的解決辦法就是在網(wǎng)頁(yè)中使用層技術(shù).層技術(shù)是使用CSS樣式表來(lái)定義的.通過(guò)引入層技術(shù),可以

24、實(shí)現(xiàn)特殊的動(dòng)態(tài)網(wǎng)頁(yè)效果.（1）在Dreamweaver中創(chuàng)建層可能通過(guò)菜單和工具按鈕完成,但兩者的效果不同.一般通過(guò)工具欄按鈕來(lái)完成(布局->描述層->然后通過(guò)鼠標(biāo)的拖動(dòng)在設(shè)計(jì)視圖窗口中描繪一個(gè)指定大小的圖層)在點(diǎn)擊上述描述層按鈕之前,按住ctrl鍵不放,可以連續(xù)繪制多個(gè)圖層.第二種創(chuàng)建層的方法(菜單):插入->布局對(duì)象->層,通過(guò)這種方式插入的是一個(gè)固定大小的默認(rèn)層.是否可以更改默認(rèn)層的大小和其他參數(shù)呢?（2）選擇,移動(dòng),調(diào)整層的大小和刪除層選擇層:在層內(nèi)點(diǎn)擊,然后點(diǎn)擊層的左上方的標(biāo)志來(lái)選擇層;還可以在層的邊線上點(diǎn)擊直接選擇層(會(huì)在層的邊線上顯示8個(gè)控點(diǎn))如何移動(dòng)層:

25、通過(guò)直接拖動(dòng)層的邊線或?qū)幼笊戏降臉?biāo)志來(lái)移動(dòng)層.如何調(diào)整層的大小:必須要先選擇層,使層的邊線上出現(xiàn)8個(gè)控點(diǎn),然后通過(guò)拖動(dòng)控點(diǎn)來(lái)改變層的大小.如何刪除層:選擇指定的層后,直接按鍵盤(pán)上的delete刪除鍵.（3）設(shè)置層的屬性面板寬和高位置:左邊距和上邊距定義層的空間位置:xy為一個(gè)平面,xyz就是一個(gè)三維z軸值:為當(dāng)前層位于舞臺(tái)層的哪個(gè)方向上,是三維參數(shù)的定義.默認(rèn)的舞臺(tái)層的z值是0,可不可以將一個(gè)層的z值設(shè)置為負(fù)數(shù).如果將一個(gè)層設(shè)置為網(wǎng)頁(yè)的背景層,則需要將該層的z值設(shè)置為負(fù)數(shù).該層中所有Flash動(dòng)畫(huà)的內(nèi)容要保持透明.z值越大,越靠近用戶(hù)的眼睛.背景圖像背景顏色為層重新命名(4)使用層管理器管理層

26、窗口->層,打開(kāi)層管理器浮動(dòng)面板.在層管理器面板中可以進(jìn)行層的重新命名,可以改變層的z值.還可以顯示和隱藏層.在層的管理面板中,自下而上,層的z值是不斷增加的,最上面一個(gè)層處于網(wǎng)頁(yè)的最前面.在層的管理面板中創(chuàng)建子父層:(非常重要的內(nèi)容)嵌套層:一個(gè)層里面還有一個(gè)層,進(jìn)行層的嵌套.按住ctrl鍵,在層管理面板中選擇需要作為子層的層,將它拖入父層中即可(如果失敗,再來(lái)一次)沒(méi)有實(shí)現(xiàn)嵌套時(shí),層的定位是采用絕對(duì)值,即相對(duì)于瀏覽器左邊線和上邊線的距離,一旦作為子層,層的定位則采用相對(duì)值,即相對(duì)父層的左邊線和上邊線.如何控制一個(gè)子層(當(dāng)子層的大小范圍超過(guò)父層的邊線范圍時(shí),是否顯示超出的部分呢)這使用

27、父層的溢出屬性進(jìn)行控制.默認(rèn)情況下,父層的溢出屬性為空白,表明子層超出父層的部分顯示.如果將溢出屬性變?yōu)閔idden,則表明子層超出父層的部分不顯示.1.顯示層,隱藏層,拖動(dòng)層行為(1)拖動(dòng)層不要在頁(yè)面中選擇任何對(duì)象,點(diǎn)擊"窗口->行為",打開(kāi)行為面板,在行為面板的標(biāo)題欄中應(yīng)該看見(jiàn)的是body標(biāo)簽,此時(shí),點(diǎn)擊"+"添加拖動(dòng)層的行為,在彈出的對(duì)話框中選擇要拖動(dòng)的具體的層的名稱(chēng),確定.在行為面板中觸發(fā)當(dāng)前行為的動(dòng)作應(yīng)該選擇:onload,onmousedown(2)顯示-隱藏層通過(guò)按鈕來(lái)實(shí)現(xiàn)層的顯示和隱藏先在頁(yè)面上創(chuàng)建二個(gè)層,并在層內(nèi)插入相關(guān)內(nèi)容在頁(yè)面

28、插入兩個(gè)普通按鈕,不要添加表單點(diǎn)擊隱藏層按鈕,點(diǎn)擊窗口->行為,顯示行為浮動(dòng)面板,點(diǎn)擊行為面板中的"+",添加隱藏-顯示層行為,在彈出的對(duì)話框中,選擇要隱藏的層,最后確定.在行為面板中一定要保證當(dāng)前行為必須作用在指定的按鈕上,而且觸發(fā)當(dāng)前行為的動(dòng)作一定要是onclick(單擊事件)跑火燈2.行為涉及對(duì)象,事件,動(dòng)作.如何不用Dreamweaver,用戶(hù)可以完全通過(guò)腳本的編制實(shí)現(xiàn)行為的效果.通過(guò)行為來(lái)實(shí)現(xiàn)非常方便,不需要用戶(hù)編制大量的腳本代碼,只需要通過(guò)鼠標(biāo)的簡(jiǎn)單的操作,即可完成復(fù)雜腳本才能完成的功能.但在設(shè)置行為時(shí),必須要注意:行為設(shè)置在哪個(gè)對(duì)象上交換圖像行為:當(dāng)鼠標(biāo)

29、滑向圖像時(shí),出現(xiàn)另一個(gè)圖像恢復(fù)圖像行為:當(dāng)鼠標(biāo)滑出圖像時(shí),恢復(fù)原有的圖像在網(wǎng)頁(yè)的設(shè)計(jì)視圖中插入圖像選擇圖像,打開(kāi)行為面板,添加交換圖像行為事件名稱(chēng) onmouseover勾選"預(yù)告載入圖像"勾選"當(dāng)鼠標(biāo)滑出時(shí)恢復(fù)圖像":其實(shí)就是添加恢復(fù)圖像行為恢復(fù)圖像:事件名稱(chēng) onmouseout(1)彈出消息行為網(wǎng)頁(yè)打開(kāi)時(shí),顯示"歡迎光臨"對(duì)話框窗口.行為作用在 body 標(biāo)簽上事件名稱(chēng):onLoad(網(wǎng)頁(yè)打開(kāi)時(shí)自動(dòng)執(zhí)行的行為事件名稱(chēng)必須是onLoad)行為:彈出消息行為網(wǎng)頁(yè)離開(kāi)時(shí),顯示"歡迎下次再來(lái)"對(duì)話框窗口行為作用在 b

30、ody 標(biāo)簽上事件名稱(chēng):onUnload行為:彈出消息行為是在網(wǎng)頁(yè)離開(kāi)時(shí),而不是在關(guān)閉時(shí).如何通過(guò)彈出消息行為,而禁止使用網(wǎng)頁(yè)右鍵菜單<body onclick="MM_popupMsg('本網(wǎng)頁(yè)禁止使用鼠標(biāo)右鍵!')">更改:<body oncontextmenu="MM_popupMsg('本網(wǎng)頁(yè)禁止使用鼠標(biāo)右鍵!');return false">(2)調(diào)用javascript腳本關(guān)閉網(wǎng)頁(yè)按鈕行為:調(diào)用javascript事件:onclick對(duì)象:作用在按鈕上命令:window.opener=&

31、#39;null'window.close()更改網(wǎng)頁(yè)背景按鈕(3)調(diào)用javascript事件:onclick對(duì)象:作用在按鈕上命令:document.body.style.backgroundColor='blue'更改網(wǎng)頁(yè)前景按鈕document.body.style.color='white'更改段落內(nèi)容:必須事先為段落命名:<p id=pp>段落文字</p>行為作用在按鈕上事件名稱(chēng):onClick命令:pp.innerText='趙懷明'更改圖像對(duì)象必須事先為圖像命名將行為作用在按鈕上事件名稱(chēng):oncli

32、ck命令:圖像對(duì)象的名稱(chēng).src='圖像文件的名稱(chēng)'img1.src='grass.jpg'希望網(wǎng)頁(yè)在打開(kāi)時(shí),全屏顯示:事件名稱(chēng):onload作用對(duì)象:body(4)調(diào)用javascript命令:window.moveTo(0,0) 移動(dòng)窗口的命令window.resizeTo(screen.width,screen.height)將當(dāng)前頁(yè)面擴(kuò)展成與屏幕一樣寬一樣高兩個(gè)命令之間必須使用;分開(kāi)(5)轉(zhuǎn)到URL行為制作類(lèi)似于超級(jí)鏈接的效果.1.首先需要在頁(yè)面中添加按鈕或文字(先設(shè)置<span></span>標(biāo)簽,然后再在該標(biāo)簽內(nèi)部添加文字)2

33、.選擇<span>標(biāo)簽,在當(dāng)前標(biāo)簽上添加轉(zhuǎn)到URL行為4.在框架中使用該行為,可以實(shí)現(xiàn)一次點(diǎn)擊,在多個(gè)子窗口內(nèi)打開(kāi)多個(gè)頁(yè)面.(6)跳轉(zhuǎn)菜單行為類(lèi)似于表單中的下拉列表框,但是用戶(hù)在選擇某一個(gè)選項(xiàng)時(shí),系統(tǒng)會(huì)自動(dòng)打開(kāi)相關(guān)的頁(yè)面,這就是跳轉(zhuǎn)菜單.注意:下拉列表框中的每個(gè)選項(xiàng)的value值都是一個(gè)頁(yè)面的URL地址.當(dāng)前行為的事件名稱(chēng)必須是onChange.制作過(guò)程:首先在網(wǎng)頁(yè)中制作一個(gè)下拉列表框下拉列表框中每一個(gè)選項(xiàng)的值,都是一個(gè)網(wǎng)站或網(wǎng)頁(yè)(資源)的URL地址.為當(dāng)前下拉列表框重新命名,并選擇它在行為面板中選擇"跳轉(zhuǎn)菜單",點(diǎn)擊確定按鈕在行為面板中保證跳轉(zhuǎn)菜單的事件名稱(chēng)為

34、onChange缺陷:只有在用戶(hù)選擇了非當(dāng)前選項(xiàng)后,網(wǎng)頁(yè)才會(huì)跳轉(zhuǎn),因?yàn)橹挥羞x擇了非當(dāng)前選項(xiàng),下拉列表框的值才會(huì)變化,才會(huì)觸發(fā)onchange事件.如何克服上述缺陷,使用另一個(gè)行為"跳轉(zhuǎn)菜單開(kāi)始"行為.在跳轉(zhuǎn)菜單下拉列表框后面緊接著需要?jiǎng)?chuàng)建一個(gè)按鈕,并在該按鈕上添加跳轉(zhuǎn)菜單開(kāi)始按鈕,即使用戶(hù)不改變跳轉(zhuǎn)菜單的選擇,直接點(diǎn)擊跳轉(zhuǎn)開(kāi)始按鈕,也可以打開(kāi)當(dāng)前選項(xiàng)所表示的頁(yè)面.(7)跳轉(zhuǎn)菜單開(kāi)始行為(8)打開(kāi)瀏覽器窗口行為其實(shí)用的就是window.open命令.window.close() 關(guān)閉頁(yè)面window.open 打開(kāi)頁(yè)面window.status 改變狀態(tài)欄文字1.在頁(yè)面上創(chuàng)建

35、一個(gè)按鈕,在按鈕上作用打開(kāi)瀏覽器行為,通過(guò)點(diǎn)擊按鈕,打開(kāi)指定的頁(yè)面.肯定需要在被彈出的窗口中顯示的頁(yè)面中添加window.close()命令,但該命令不是立即執(zhí)行,而是被延時(shí)N秒后才執(zhí)行.如何在頁(yè)面中創(chuàng)建延時(shí)器:<script language=javascript>window.setTimeout("將要執(zhí)行的命令",延時(shí)的毫秒數(shù))</script>(9)顯示彈出式菜單行為彈出式菜單有兩個(gè)部分組成:水平菜單條,彈出式菜單.首先設(shè)計(jì)水平菜單條:確定有多少個(gè)條目(使用表格)必須對(duì)水平菜單條中各個(gè)選項(xiàng)制作假鏈接(關(guān)鍵)具體設(shè)計(jì)每一個(gè)彈出式菜單六、模板同

36、一個(gè)網(wǎng)站內(nèi)所有的頁(yè)面(特別是某一個(gè)欄目?jī)?nèi)的全部網(wǎng)頁(yè))其風(fēng)格應(yīng)該保持一致(頁(yè)面布局,色彩搭配,給人留下的整體映象).做網(wǎng)站其實(shí)就是做:主頁(yè)+模板.除主頁(yè)之外的全部頁(yè)面,都應(yīng)該使用模板來(lái)生成.模板就是用于制作網(wǎng)頁(yè)的網(wǎng)頁(yè).在模板中只包括所有頁(yè)面的共性?xún)?nèi)容,不允許出現(xiàn)具體頁(yè)面的個(gè)性化內(nèi)容.一般情況下,模板只包括有:頁(yè)面的整體布局,色彩搭配和所有頁(yè)面的共性?xún)?nèi)容.一個(gè)網(wǎng)站內(nèi)的全部模板存放在指定的文件夾內(nèi):templates文件夾.模板文件的擴(kuò)展名是:dwt沒(méi)有模板之前,我們用戶(hù)必須先進(jìn)行頁(yè)面的整體布局,色彩搭配,然后再進(jìn)行內(nèi)容的編輯.使用布局表格進(jìn)行網(wǎng)頁(yè)的整體布局:在標(biāo)準(zhǔn)模式下只能使用普通標(biāo)準(zhǔn)表格,如何希

37、望使用布局表格進(jìn)行頁(yè)面的布局,則需要進(jìn)入布局模式:工具欄中"布局"選項(xiàng)卡中的"布局"按鈕,進(jìn)入布局模式:七、布局表格1、布局單元格操作:用戶(hù)可以先手式繪 制布局表格,然后再在布局表格中繪制所有的布局單元格;但推薦的方法:是直接在頁(yè)面中繪制布局單元格,讓系統(tǒng)自動(dòng)生成布局表格.一定要將布局表格中的全部單元格變成布局單元格:按往ctrl鍵,可以連續(xù)繪制布局單元格.2、保證布局表格中各列的寬度如何保證布局表格中各列的寬度在頁(yè)面布局過(guò)程中不會(huì)發(fā)生變化,從而影響頁(yè)面的整體效果.使用間隔圖像來(lái)完成.在制作完布局表格后,點(diǎn)擊布局表格下方各列的列寬標(biāo)簽文字,在彈出的下拉列

38、表框中選擇"添加間隔圖像"(間隔圖像由系統(tǒng)自動(dòng)生成,透明,寬度與當(dāng)前列一樣寬,高度僅為1個(gè)像素,它不會(huì)影響頁(yè)面的瀏覽效果)添加完間隔圖像后,Dreamweaver會(huì)自動(dòng)在當(dāng)前表格的最后添加一行,該行中的每一列放置的就是各列的間隔圖像. <tr> <td height="1"><img src="./spacer.gif" alt="" width="161" height="1"></td> <td><img

39、src="./spacer.gif" alt="" width="463" height="1"></td> <td><img src="./spacer.gif" alt="" width="160" height="1"></td> </tr>八、如何使用模板生成頁(yè)面文件->新建->模板->選擇站點(diǎn)->選擇指定站點(diǎn)下具體的模板->進(jìn)行頁(yè)面

40、編輯->保存.在制作模板時(shí),一定要留有可編輯區(qū)域:在用戶(hù)使用模板生成具體的頁(yè)面時(shí),只能編輯"可編輯區(qū)域"的內(nèi)容,其他區(qū)域不能進(jìn)行編輯.可以在模板中設(shè)置多個(gè)可編輯區(qū)域(根據(jù)需要)選擇站點(diǎn)內(nèi)templates目錄下指定的模板文件,直接雙擊打開(kāi),在需要設(shè)置為可編輯區(qū)域的地方右擊,選擇"模板->創(chuàng)建可編輯區(qū)域"->輸入可編輯區(qū)域的名稱(chēng)->保存.可以邊制作模板,邊進(jìn)行網(wǎng)頁(yè)內(nèi)容編輯,等模板做好以后,直接將模板應(yīng)用到當(dāng)前網(wǎng)頁(yè)中.修改->模板->應(yīng)用模板到頁(yè)->選擇具體的模板->選擇當(dāng)前網(wǎng)頁(yè)中的可編輯區(qū)域(任何一個(gè)網(wǎng)頁(yè)均有

41、兩個(gè)可編輯區(qū)域:body和head)->依次將它們移動(dòng)到模板的可編輯區(qū)域中.九、如何更新模板無(wú)論當(dāng)前模板已經(jīng)應(yīng)用了多少個(gè)頁(yè)面,在執(zhí)行模板更新時(shí),系統(tǒng)會(huì)自動(dòng)更新當(dāng)前模板所應(yīng)用的全部頁(yè)面.當(dāng)然用戶(hù)也可以選擇手式更新.打開(kāi)模板的另一種方式:先打開(kāi)應(yīng)用了模板的網(wǎng)頁(yè)->修改->模板->打開(kāi)附加模板->直接進(jìn)行修改->文件->保存->自動(dòng)彈出更新對(duì)話框,更新所有應(yīng)用了當(dāng)前模板的網(wǎng)頁(yè).手工更新頁(yè)面使用的模板:打開(kāi)頁(yè)面-修改-模板-更新當(dāng)前頁(yè)如何將頁(yè)面與模板分離:打開(kāi)指定的頁(yè)面-修改->模板->從模板中分離.十、模板首頁(yè)+模板模板使得網(wǎng)頁(yè)制作分為兩部分進(jìn)行:一部分是頁(yè)面的布局,另一部分是頁(yè)面內(nèi)容的編輯.在模板制作過(guò)程中,一定要有可編輯區(qū)域,在使用模板生成具體的頁(yè)面后,用戶(hù)只能對(duì)可編輯區(qū)域進(jìn)行編輯.與模板相關(guān)的操作主要有:剛剛完成:先制作模板,等模板制作完成后,再使用模板生成具體的頁(yè)面.邊制作模板,邊進(jìn)行網(wǎng)面的內(nèi)容設(shè)計(jì),等模板完成之后,再將模板應(yīng)用到具體的頁(yè)面中.十一、庫(kù)庫(kù)是一段可以重復(fù)使用的腳本代碼.是網(wǎng)站的資源.一旦將某一段代碼定義為庫(kù)對(duì)象,則網(wǎng)站中所有網(wǎng)頁(yè)均可以對(duì)其進(jìn)行引用.當(dāng)更改庫(kù)對(duì)象后,網(wǎng)站中

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論