dreamwaver網(wǎng)設(shè)計(jì)第章二

第4章網(wǎng)頁(yè)設(shè)計(jì)與美化第4章網(wǎng)頁(yè)設(shè)計(jì)與美化4.1制作框架網(wǎng)站4.2層與時(shí)間軸的應(yīng)用4.3利用行為制作動(dòng)態(tài)頁(yè)面4.4制作表單頁(yè)面4.1制作框架網(wǎng)站框架是一個(gè)比較早出現(xiàn)的HTML對(duì)象，框架的作用就是把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)。使用框架可以非常方便的完成導(dǎo)航工作，而且各個(gè)框架之間決不存在干擾問(wèn)題，所以在模板出現(xiàn)以前框架技術(shù)一直普遍應(yīng)用于頁(yè)面的導(dǎo)航，它可以使網(wǎng)站導(dǎo)航比較清晰。4.1制作框架網(wǎng)站使用框架建設(shè)網(wǎng)站的最大的特點(diǎn)是使網(wǎng)站風(fēng)格能夠保持統(tǒng)一。一個(gè)網(wǎng)站的眾多網(wǎng)頁(yè)最好都有相同的地方，來(lái)做到風(fēng)格統(tǒng)一。可以把這個(gè)相同的部分單獨(dú)的制作一個(gè)頁(yè)面，作為框架結(jié)構(gòu)的各個(gè)子框架的內(nèi)容給整個(gè)站點(diǎn)公用。通過(guò)這個(gè)方法達(dá)到了網(wǎng)站的風(fēng)格的統(tǒng)一。4.1框架的基本操作創(chuàng)建框架集和框架選擇框架和框架集保存框架和框架集設(shè)置框架集屬性設(shè)置框架的背景色在框架中設(shè)置鏈接創(chuàng)建框架集和框架框架有兩部分組成,即框架集和單個(gè)框架?？蚣芗窃谝粋€(gè)文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè)，它定義了一個(gè)網(wǎng)頁(yè)中的框架數(shù)目、每個(gè)框架的大小、載入每個(gè)框架的網(wǎng)頁(yè)源和每個(gè)框架的其他屬性等；單個(gè)框架指在網(wǎng)頁(yè)中定義的一個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)。創(chuàng)建框架集和創(chuàng)建框架是同步進(jìn)行的。只要?jiǎng)?chuàng)建了框架就一定形成了框架集；同樣，創(chuàng)建的框架集就一定具有框架。創(chuàng)建框架頁(yè)面使用“新建文檔”對(duì)話框使用菜單命令使用布局面板創(chuàng)建框架頁(yè)面使用“新建文檔”對(duì)話框使用菜單命令新建一個(gè)空白文檔執(zhí)行“插入”“HTML”“框架”命令，在彈出的子菜單中選擇所需的選項(xiàng)使用布局面面板創(chuàng)建框框架頁(yè)面以上方法既既是創(chuàng)建框框架集也是是創(chuàng)建框架架的。創(chuàng)建框架集集創(chuàng)建自定義義框架集，，可以執(zhí)行行“查看””““可視化助助理”““框架架邊框”選擇框架和和框架集在文檔窗口口的設(shè)計(jì)視視圖中，在在選定了一一個(gè)框架后后，其邊框框被虛線環(huán)環(huán)繞；在選選定了一個(gè)個(gè)框架集后后，該框架架集內(nèi)的框框架的所有有邊框都被被虛線環(huán)繞繞。選擇框架①按住Alt鍵選選擇框架②使用框框架面板選選擇框架選擇框架集集①單擊框框架的邊框框②單擊““框架”面面板中最外外層的邊框框保存框架和和框架集在瀏覽器中中預(yù)覽框架架集前，必必須保存框框架集文件件，以及要要在框架中中顯示的所所有文檔。。可以單獨(dú)獨(dú)保存每個(gè)個(gè)框架集文文件和帶框框架的文檔檔，也可以以同時(shí)保存存框架集文文件和框架架中出現(xiàn)的的所有文檔檔。保存框架集集選擇框架集集之后，進(jìn)進(jìn)行保存。。只保存框架架集的框架架結(jié)構(gòu)頁(yè)面面是不能完完全顯示的的，還必須須將每個(gè)框框架文檔進(jìn)進(jìn)行保存。。保存框架鼠標(biāo)單擊框框架文檔，，進(jìn)行框架架頁(yè)保存。。保存框架集集和框架執(zhí)行“文件件”，““保存全部部”，將整整個(gè)框架集集保存為index.html接著保存下下面的各框框架。設(shè)置框架屬屬性選定具體框框架，利用用“屬性””面板進(jìn)行行設(shè)置。設(shè)置框架集集屬性選定框架集集后，利用用“屬性””面板進(jìn)行行設(shè)置。設(shè)置框架的的背景色將光標(biāo)置于于要改變背背景色的框框架中執(zhí)行“修改改”““頁(yè)面面屬性”命命令，打開(kāi)開(kāi)“頁(yè)面屬屬性”對(duì)話話框進(jìn)行設(shè)設(shè)置在框架中設(shè)設(shè)置鏈接應(yīng)用一個(gè)框框架的一個(gè)個(gè)主要目的的是實(shí)現(xiàn)框框架之間的的鏈接。浮動(dòng)框架<iframe>。。。。。。。</iframe>天氣預(yù)報(bào)浮浮動(dòng)框架<iframesrc="/m/pn1/weather.htm"width=""height=""marginwidth="0"marginheight="0"hspace="0"vspace="0"frameborder="0"scrolling="no"></iframe>4.2層層與時(shí)間間軸的應(yīng)用用層是一種HTML元元素，可以以將它定位位到網(wǎng)頁(yè)的的任意位置置。層可以以包含文字字、圖像或或其他任何何可在HTML文檔檔正文中放放入的內(nèi)容容。層最主要的的特性是它它可以懸浮浮在網(wǎng)頁(yè)內(nèi)內(nèi)容之上。。換句話說(shuō)，，可以在網(wǎng)網(wǎng)頁(yè)上任意意改變層的的位置，實(shí)實(shí)現(xiàn)對(duì)層的的精確定位位。正是由由于層的這這種特性，，才利用層層實(shí)現(xiàn)對(duì)網(wǎng)網(wǎng)頁(yè)中的內(nèi)內(nèi)容進(jìn)行精精確定位。。層可以被顯顯示或隱藏藏，通過(guò)程程序在網(wǎng)頁(yè)頁(yè)中控制層層的顯示或或隱藏，實(shí)實(shí)現(xiàn)層上內(nèi)內(nèi)容的動(dòng)態(tài)態(tài)交替顯示示，實(shí)現(xiàn)一一些特殊的的顯示效果果。層還可可以被重疊疊，因此可可以在網(wǎng)頁(yè)頁(yè)中實(shí)現(xiàn)內(nèi)內(nèi)容的重疊疊效果。層的基本操操作在Dreamweaver中中可以直接接在網(wǎng)頁(yè)中中插入層。。通過(guò)“層””面板可以以管理文檔檔中的層。。使用“層層”面板可可防止重疊疊，更改層層的可見(jiàn)性性，將層嵌嵌套或?qū)盈B疊，以及選選擇一個(gè)或或多個(gè)層。。執(zhí)行“窗口”““層”命令，或或按F2鍵，打開(kāi)““層”面板板，可以看看到所有的的層都顯示示在其中。。要更改層的的排列次序序，可通過(guò)過(guò)修改層的的Z值來(lái)實(shí)現(xiàn)。單單擊Z列中中的數(shù)字，，為所選層層輸入新的的Z值，即即可改變層層的排列順順序。層的基本操操作插入層設(shè)置層的屬屬性選擇層調(diào)整層的大大小移動(dòng)層插入層將光標(biāo)置于于要插入層層的位置，，執(zhí)行“插插入”““布局對(duì)對(duì)象”““層”命令令設(shè)置層的屬屬性選擇一個(gè)層層，執(zhí)行““窗口”““屬性”命命令，打開(kāi)開(kāi)“屬性””面板來(lái)更更改層的屬屬性。選擇層選擇層的三三種方法是是：①將光標(biāo)標(biāo)移動(dòng)至需需選擇的層層邊框，光光標(biāo)變?yōu)?，，單單擊鼠?biāo)左左鍵即可選選擇該層。。②在層的的內(nèi)部單擊擊屬性，顯顯示層的選選擇柄，，單擊擊選擇柄，，即可選擇擇層，如果果選擇柄不不可見(jiàn)，可可在該層中中的任意位位置單擊以以顯示該選選擇柄。③打開(kāi)“層”面板板，在“層””面板中選選擇層名稱稱，即可選選擇該層。。按shift可以以選擇多個(gè)個(gè)層。調(diào)整層的大大小單擊層的邊邊框調(diào)整層層的大小使用屬性面面板調(diào)整層層的大小4.3利利用行為為制作動(dòng)態(tài)態(tài)頁(yè)面一般說(shuō)來(lái)，，動(dòng)態(tài)網(wǎng)頁(yè)頁(yè)是通過(guò)JavaScript或基于于JavaScript的DHTML代碼來(lái)實(shí)實(shí)現(xiàn)的。包包含JavaScript腳腳本的網(wǎng)頁(yè)頁(yè)，還能夠夠?qū)崿F(xiàn)用戶戶與頁(yè)面的的簡(jiǎn)單交互互。但是編編寫(xiě)腳本既既復(fù)雜又專(zhuān)專(zhuān)業(yè)，需要要專(zhuān)門(mén)學(xué)習(xí)習(xí)，而Dreamweaver提供供了“行為為”的機(jī)制制，雖然行行為也是基基于JavaScript來(lái)來(lái)實(shí)現(xiàn)動(dòng)態(tài)態(tài)網(wǎng)頁(yè)和交交互的，但但卻不需書(shū)書(shū)寫(xiě)任何代代碼。在可可視化環(huán)境境中單擊幾幾個(gè)按鈕，，填幾個(gè)選選項(xiàng)就可以以實(shí)現(xiàn)豐富富的動(dòng)態(tài)頁(yè)頁(yè)面效果，，實(shí)現(xiàn)人與與頁(yè)面的簡(jiǎn)簡(jiǎn)單交互。。利用行為制制作動(dòng)態(tài)頁(yè)頁(yè)面行為的概念念使用行為創(chuàng)創(chuàng)建動(dòng)感網(wǎng)網(wǎng)頁(yè)利用腳本制制作特效網(wǎng)網(wǎng)頁(yè)4.3.1行為為的概念行為是目前前設(shè)計(jì)網(wǎng)頁(yè)頁(yè)的主流技技術(shù)之一，，它強(qiáng)大的的網(wǎng)頁(yè)互動(dòng)動(dòng)功能，使使眾多的網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)者者能發(fā)揮最最大的思維維空間，其其效果更令令網(wǎng)絡(luò)上的的眾多瀏覽覽者感嘆不不已。行為是一些些JavaScript程序序，它由兩兩部分組成成：一部分分是事件，，另一部分分是動(dòng)作。。動(dòng)作是特特定的JavaScript程序，只只要事件發(fā)發(fā)生，相應(yīng)應(yīng)的程序就就會(huì)自動(dòng)運(yùn)運(yùn)行。事件事件用于指指定選定的的行為動(dòng)作作在何種情情況下發(fā)生生。網(wǎng)頁(yè)窗口事件onMove:移動(dòng)窗口時(shí)發(fā)生的事件。onLoad:選定的對(duì)象出現(xiàn)在瀏覽器時(shí)發(fā)生的事件。onResize:訪問(wèn)者改變窗口的大小時(shí)發(fā)生的事件。onUnload:訪問(wèn)者退出網(wǎng)頁(yè)文檔時(shí)發(fā)生的事件。關(guān)于鼠標(biāo)和鍵盤(pán)的事件onClick:用鼠標(biāo)單擊選定元素的一瞬間發(fā)生的事件。onFocus:鼠標(biāo)指針移動(dòng)到窗口上，即激活之后發(fā)生的事件。onMouseDown:單擊鼠標(biāo)右鍵一瞬間發(fā)生的事件。onMouseMove:鼠標(biāo)指針經(jīng)過(guò)選定元素上方時(shí)發(fā)生的事件。onMouseOut:鼠標(biāo)指針經(jīng)過(guò)選定元素之外時(shí)發(fā)生的事件。onMouseOver:鼠標(biāo)指針經(jīng)過(guò)選定元素上方時(shí)發(fā)生的事件。onMouseUp:單擊鼠標(biāo)右鍵,然后釋放時(shí)發(fā)生的事件。onScroll:訪問(wèn)者在瀏覽器上移動(dòng)滾動(dòng)條的時(shí)候發(fā)生的事件。onKeyDown:在鍵盤(pán)上按住特定鍵時(shí)發(fā)生的事件。onKeyPress:在鍵盤(pán)上按特定鍵時(shí)發(fā)生的事件。onKeyUp:在鍵盤(pán)上按下特定鍵并釋放時(shí)發(fā)生的事件。關(guān)于表單的事件onAfterupdate:更新表單文檔的內(nèi)容時(shí)發(fā)生的事件。onBeforeUpdate:改變表單文檔的項(xiàng)目時(shí)發(fā)生的事件。onChange:訪問(wèn)者修改表單文檔的初始值時(shí)發(fā)生的事件。onReset:將表單文檔重設(shè)置為初始值時(shí)發(fā)生的事件。onSubmit:訪問(wèn)者傳送表單文檔時(shí)發(fā)生的事件。onSelect:訪問(wèn)者選定文本字段中的內(nèi)容時(shí)發(fā)生的事件。其他事件onError:在加載文檔的過(guò)程中，發(fā)生錯(cuò)誤時(shí)發(fā)生的事件。onFilterChange:運(yùn)用于選定元素的字段發(fā)生變化時(shí)發(fā)生的事件。Onfinish:用功能來(lái)顯示的內(nèi)容結(jié)束時(shí)發(fā)生的事件。Onstart:開(kāi)始應(yīng)用功能時(shí)發(fā)生的事件。使使用行為創(chuàng)創(chuàng)建動(dòng)感網(wǎng)網(wǎng)頁(yè)交換圖象彈出信息打開(kāi)瀏覽器器窗口顯示-隱藏藏層檢查表單設(shè)置狀態(tài)欄欄文本轉(zhuǎn)到URL創(chuàng)建跳轉(zhuǎn)菜菜單交換圖象在網(wǎng)絡(luò)上看看到過(guò)這樣樣的網(wǎng)頁(yè)，，當(dāng)鼠標(biāo)移移動(dòng)到圖象象上，網(wǎng)頁(yè)頁(yè)會(huì)自動(dòng)變變換成不同同的圖象，，這種方法法用來(lái)展示示產(chǎn)品，效效果挺不錯(cuò)錯(cuò)。交換圖象選中文檔中中的圖片，，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“交換圖象”選項(xiàng)，打打開(kāi)“交換換圖象”對(duì)對(duì)話框彈出信息彈出信息動(dòng)動(dòng)作顯示一一個(gè)帶有JavaScript警告。?！皬棾鲂畔⑾ⅰ眲?dòng)作不不能控制JavaScript警告的的外觀，這這是由訪問(wèn)問(wèn)者的瀏覽覽器決定的的。如果希望對(duì)對(duì)信息的外外觀進(jìn)行更更多的控制制，可使用用“打開(kāi)瀏瀏覽器窗口口”行為。。打開(kāi)文檔，，單擊窗口口左下角的的<body>標(biāo)簽，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“彈出信息”選項(xiàng)，打打開(kāi)“彈出出信息”對(duì)對(duì)話框注意：將事事件設(shè)置為為onload,表示載入頁(yè)頁(yè)面時(shí)彈出出該信息。。打開(kāi)瀏覽器器窗口使用“打開(kāi)開(kāi)瀏覽器窗窗口”動(dòng)作作可以在一一個(gè)新的窗窗口中打開(kāi)開(kāi)URL,可以指定定新窗口的的屬性、特特性和名稱稱。打開(kāi)文檔，，單擊窗口口左下角的的<body>標(biāo)簽，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“打開(kāi)瀏覽器器窗口”選項(xiàng)，打打開(kāi)“打開(kāi)開(kāi)瀏覽器窗窗口”對(duì)對(duì)話框“打開(kāi)瀏覽覽器窗口””對(duì)話框框顯示-隱藏藏層“顯示-隱隱藏層”動(dòng)動(dòng)作顯示、、隱藏或恢恢復(fù)層的默默認(rèn)可見(jiàn)性性，此動(dòng)作作用于在用用戶與網(wǎng)頁(yè)頁(yè)進(jìn)行交互互時(shí)顯示信信息。檢查表單選中表單域域，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“檢查表單”選項(xiàng)，打打開(kāi)“檢查表單”對(duì)話框框設(shè)置狀態(tài)欄欄信息“設(shè)置狀態(tài)態(tài)欄文本””動(dòng)作在瀏瀏覽器窗口口底部左側(cè)側(cè)的狀態(tài)欄欄中顯示信信息。可以以使用此動(dòng)動(dòng)作在狀態(tài)態(tài)欄說(shuō)明鏈鏈接的目標(biāo)標(biāo)，而不是是顯示與之之關(guān)聯(lián)的URL。打開(kāi)文檔，，單擊窗口口左下角的的<body>標(biāo)簽，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“設(shè)置文本”選項(xiàng)，選選擇“設(shè)置狀態(tài)欄欄文本”，打開(kāi)““設(shè)置狀態(tài)態(tài)欄文本””對(duì)話框框轉(zhuǎn)到URL利用轉(zhuǎn)到URL動(dòng)作作可在當(dāng)前前窗口或指指定的框架架中打開(kāi)一一個(gè)新頁(yè),此動(dòng)作對(duì)對(duì)通過(guò)一次次單擊更改改兩個(gè)或多多個(gè)框架的的內(nèi)容特別別有用。還還可以在時(shí)時(shí)間軸中調(diào)調(diào)用此動(dòng)作作在指定的的時(shí)間間隔隔后跳到一一個(gè)新頁(yè)。。打開(kāi)文檔，，單擊窗口口左下角的的<body>標(biāo)簽或或任意對(duì)象象，打開(kāi)“行為”面面板，單擊面板板上的“+”按鈕鈕，在彈出的的菜單中選選擇“轉(zhuǎn)到URL”選項(xiàng)，打打開(kāi)“轉(zhuǎn)到到URL””對(duì)話框框“轉(zhuǎn)到URL”對(duì)對(duì)話框創(chuàng)建跳轉(zhuǎn)菜菜單跳轉(zhuǎn)菜單是是超級(jí)鏈接接的一種形形式，使用用跳轉(zhuǎn)菜單單要比其他他形式鏈接接節(jié)省更多多的空間，，跳轉(zhuǎn)菜單單從菜單發(fā)發(fā)展而來(lái)，，瀏覽者單單擊并選擇擇下拉菜單單時(shí)會(huì)跳轉(zhuǎn)轉(zhuǎn)到目標(biāo)網(wǎng)網(wǎng)頁(yè)。將光標(biāo)置于文檔中，執(zhí)行“插入”菜單“表單”“跳轉(zhuǎn)菜單”跳轉(zhuǎn)菜單單開(kāi)始創(chuàng)建跳轉(zhuǎn)轉(zhuǎn)菜單插入按鈕鈕,打開(kāi)開(kāi)“行為””面板，單擊面面板上的的“+”按按鈕，在彈出出的菜單單中選擇擇“跳轉(zhuǎn)菜單單開(kāi)始”選項(xiàng)，，打開(kāi)“跳轉(zhuǎn)