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

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