1、第4章 網(wǎng)頁設(shè)計與美化.第4章 網(wǎng)頁設(shè)計與美化4.1 制造框架網(wǎng)站4.2 層與時間軸的運用4.3 利用行為制造動態(tài)頁面4.4 制造表單頁面.4.1 制造框架網(wǎng)站框架是一個比較早出現(xiàn)的HTML對象，框架的作用就是把閱讀器窗口劃分為假設(shè)干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。運用框架可以非常方便的完成導(dǎo)航任務(wù)，而且各個框架之間決不存在干擾問題，所以在模板出現(xiàn)以前框架技術(shù)不斷普遍運用于頁面的導(dǎo)航，它可以使網(wǎng)站導(dǎo)航比較明晰。.4.1 制造框架網(wǎng)站運用框架建立網(wǎng)站的最大的特點是使網(wǎng)站風(fēng)格可以堅持一致。一個網(wǎng)站的眾多網(wǎng)頁最好都有一樣的地方，來做到風(fēng)格一致?？梢园堰@個一樣的部分單獨的制造一個頁面，作為框架

2、構(gòu)造的各個子框架的內(nèi)容給整個站點公用。經(jīng)過這個方法到達了網(wǎng)站的風(fēng)格的一致。.4.1 框架的根本操作創(chuàng)建框架集和框架選擇框架和框架集保管框架和框架集設(shè)置框架集屬性設(shè)置框架的背風(fēng)光在框架中設(shè)置鏈接.創(chuàng)建框架集和框架框架有兩部分組成,即框架集和單個框架。框架集是在一個文檔內(nèi)定義一組框架構(gòu)造的HTML網(wǎng)頁，它定義了一個網(wǎng)頁中的框架數(shù)目、每個框架的大小、載入每個框架的網(wǎng)頁源和每個框架的其他屬性等；單個框架指在網(wǎng)頁中定義的一個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。創(chuàng)建框架集和創(chuàng)建框架是同步進展的。只需創(chuàng)建了框架就一定構(gòu)成了框架集；同樣，創(chuàng)建的框架集就一定具有框架。.創(chuàng)建框架頁面運用“新建文檔對話框運用菜單

3、命令運用規(guī)劃面板創(chuàng)建框架頁面.運用“新建文檔對話框.運用菜單命令新建一個空白文檔執(zhí)行“插入“HTML“框架命令，在彈出的子菜單中選擇所需的選項.運用規(guī)劃面板創(chuàng)建框架頁面以上方法既是創(chuàng)建框架集也是創(chuàng)建框架的。.創(chuàng)建框架集創(chuàng)建自定義框架集，可以執(zhí)行“查看“可視化助理“框架邊框.選擇框架和框架集在文檔窗口的設(shè)計視圖中，在選定了一個框架后，其邊框被虛線環(huán)繞；在選定了一個框架集后，該框架集內(nèi)的框架的一切邊框都被虛線環(huán)繞。選擇框架按住Alt鍵選擇框架運用框架面板選擇框架選擇框架集單擊框架的邊框單擊“框架面板中最外層的邊框.保管框架和框架集在閱讀器中預(yù)覽框架集前，必需保管框架集文件，以及要在框架中顯示的一切

4、文檔?？梢詥为毐９苊總€框架集文件和帶框架的文檔，也可以同時保管框架集文件和框架中出現(xiàn)的一切文檔。.保管框架集選擇框架集之后，進展保管。只保管框架集的框架構(gòu)造頁面是不能完全顯示的，還必需將每個框架文檔進展保管。保管框架鼠標單擊框架文檔，進展框架頁保管。.保管框架集和框架執(zhí)行“文件， “保管全部，將整個框架集保管為index.html接著保管下面的各框架。.設(shè)置框架屬性選定詳細框架，利用“屬性面板進展設(shè)置。.設(shè)置框架集屬性選定框架集后，利用“屬性面板進展設(shè)置。.設(shè)置框架的背風(fēng)光將光標置于要改動背風(fēng)光的框架中執(zhí)行“修正 “頁面屬性命令，翻開“頁面屬性對話框進展設(shè)置.在框架中設(shè)置鏈接運用一個框架的一個

5、主要目的是實現(xiàn)框架之間的鏈接。.浮動框架。天氣預(yù)告浮動框架.4.2 層與時間軸的運用層是一種HTML元素，可以將它定位到網(wǎng)頁的恣意位置。層可以包含文字、圖像或其他任何可在HTML文檔正文中放入的內(nèi)容。層最主要的特性是它可以懸浮在網(wǎng)頁內(nèi)容之上。換句話說，可以在網(wǎng)頁上恣意改動層的位置，實現(xiàn)對層的準確定位。正是由于層的這種特性，才利用層實現(xiàn)對網(wǎng)頁中的內(nèi)容進展準確定位。層可以被顯示或隱藏，經(jīng)過程序在網(wǎng)頁中控制層的顯示或隱藏，實現(xiàn)層上內(nèi)容的動態(tài)交替顯示，實現(xiàn)一些特殊的顯示效果。層還可以被重疊，因此可以在網(wǎng)頁中實現(xiàn)內(nèi)容的重疊效果。.層的根本操作在Dreamweaver中可以直接在網(wǎng)頁中插入層。經(jīng)過“層面板

6、可以管理文檔中的層。運用“層面板可防止重疊，更改層的可見性，將層嵌套或?qū)盈B，以及選擇一個或多個層。執(zhí)行“窗口 “層命令，或按F2鍵，翻開“層面板，可以看到一切的層都顯示在其中。要更改層的陳列次序，可經(jīng)過修正層的Z值來實現(xiàn)。單擊Z列中的數(shù)字，為所選層輸入新的Z值，即可改動層的陳列順序。.層的根本操作插入層設(shè)置層的屬性選擇層調(diào)整層的大小挪動層.插入層將光標置于要插入層的位置，執(zhí)行“插入 “規(guī)劃對象 “層命令 設(shè)置層的屬性選擇一個層，執(zhí)行“窗口 “屬性命令，翻開“屬性面板來更改層的屬性。.選擇層選擇層的三種方法是： 將光標挪動至需選擇的層邊框，光標變?yōu)?，單擊鼠標左鍵即可選擇該層。 在層的內(nèi)部單擊屬

7、性，顯示層的選擇柄 ，單擊選擇柄，即可選擇層，假設(shè)選擇柄不可見，可在該層中的恣意位置單擊以顯示該選擇柄。 翻開“層面板，在“層面板中選擇層稱號，即可選擇該層。按shift可以選擇多個層。.調(diào)整層的大小單擊層的邊框調(diào)整層的大小運用屬性面板調(diào)整層的大小.4.3 利用行為制造動態(tài)頁面普通說來，動態(tài)網(wǎng)頁是經(jīng)過JavaScript或基于JavaScript的DHTML代碼來實現(xiàn)的。包含JavaScript腳本的網(wǎng)頁，還可以實現(xiàn)用戶與頁面的簡單交互。但是編寫腳本既復(fù)雜又專業(yè)，需求專門學(xué)習(xí)，而Dreamweaver 提供了“行為的機制，雖然行為也是基于JavaScript來實現(xiàn)動態(tài)網(wǎng)頁和交互的，但卻不需書寫

8、任何代碼。在可視化環(huán)境中單擊幾個按鈕，填幾個選項就可以實現(xiàn)豐富的動態(tài)頁面效果，實現(xiàn)人與頁面的簡單交互。.利用行為制造動態(tài)頁面行為的概念運用行為創(chuàng)建動感網(wǎng)頁利用腳本制造特效網(wǎng)頁.4.3.1 行為的概念行為是目前設(shè)計網(wǎng)頁的主流技術(shù)之一，它強大的網(wǎng)頁互動功能，使眾多的網(wǎng)頁設(shè)計者能發(fā)揚最大的思想空間，其效果更令網(wǎng)絡(luò)上的眾多閱讀者感慨不已。行為是一些JavaScript程序，它由兩部分組成：一部分是事件，另一部分是動作。動作是特定的JavaScript程序，只需事件發(fā)生，相應(yīng)的程序就會自動運轉(zhuǎn)。.事 件事件用于指定選定的行為動作在何種情況下發(fā)生。網(wǎng)頁窗口事件onMove:移動窗口時發(fā)生的事件。onLoa

9、d:選定的對象出現(xiàn)在瀏覽器時發(fā)生的事件。onResize:訪問者改變窗口的大小時發(fā)生的事件。onUnload:訪問者退出網(wǎng)頁文檔時發(fā)生的事件。.關(guān)于鼠標和鍵盤的事件onClick:用鼠標單擊選定元素的一瞬間發(fā)生的事件。onFocus:鼠標指針移動到窗口上，即激活之后發(fā)生的事件。onMouseDown:單擊鼠標右鍵一瞬間發(fā)生的事件。onMouseMove:鼠標指針經(jīng)過選定元素上方時發(fā)生的事件。onMouseOut:鼠標指針經(jīng)過選定元素之外時發(fā)生的事件。onMouseOver:鼠標指針經(jīng)過選定元素上方時發(fā)生的事件。onMouseUp:單擊鼠標右鍵,然后釋放時發(fā)生的事件。onScroll:訪問者在瀏

10、覽器上移動滾動條的時候發(fā)生的事件。onKeyDown:在鍵盤上按住特定鍵時發(fā)生的事件。onKeyPress:在鍵盤上按特定鍵時發(fā)生的事件。onKeyUp:在鍵盤上按下特定鍵并釋放時發(fā)生的事件。.關(guān)于表單的事件onAfterupdate:更新表單文檔的內(nèi)容時發(fā)生的事件。onBeforeUpdate:改變表單文檔的項目時發(fā)生的事件。onChange:訪問者修改表單文檔的初始值時發(fā)生的事件。onReset:將表單文檔重設(shè)置為初始值時發(fā)生的事件。onSubmit:訪問者傳送表單文檔時發(fā)生的事件。onSelect:訪問者選定文本字段中的內(nèi)容時發(fā)生的事件。.其他事件onError:在加載文檔的過程中，發(fā)生

11、錯誤時發(fā)生的事件。onFilterChange:運用于選定元素的字段發(fā)生變化時發(fā)生的事件。Onfinish:用功能來顯示的內(nèi)容結(jié)束時發(fā)生的事件。Onstart:開始應(yīng)用功能時發(fā)生的事件。.4.3.2 運用行為創(chuàng)建動感網(wǎng)頁交換圖象彈出信息翻開閱讀器窗口顯示-隱藏層檢查表單設(shè)置形狀欄文本轉(zhuǎn)到URL創(chuàng)建跳轉(zhuǎn)菜單.交換圖象在網(wǎng)絡(luò)上看到過這樣的網(wǎng)頁，當(dāng)鼠標挪動到圖象上，網(wǎng)頁會自動變換成不同的圖象，這種方法用來展現(xiàn)產(chǎn)品，效果挺不錯。.交換圖象選中文檔中的圖片，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“交換圖象選項，翻開“交換圖象 對話框.彈出信息彈出信息動作顯示一個帶有JavaScrip

12、t警告。“彈出信息動作不能控制JavaScript警告的外觀，這是由訪問者的閱讀器決議的。假設(shè)希望對信息的外觀進展更多的控制，可運用“翻開閱讀器窗口行為。.翻開文檔，單擊窗口左下角的標簽，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“彈出信息選項，翻開“彈出信息 對話框留意：將事件設(shè)置為onload,表示載入頁面時彈出該信息。.翻開閱讀器窗口運用“翻開閱讀器窗口動作可以在一個新的窗口中翻開URL,可以指定新窗口的屬性、特性和稱號。翻開文檔，單擊窗口左下角的標簽，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“翻開閱讀器窗口選項，翻開“翻開閱讀器窗口 對話框.“翻開閱讀

13、器窗口 對話框.顯示-隱藏層“顯示-隱藏層動作顯示、隱藏或恢復(fù)層的默許可見性，此動作用于在用戶與網(wǎng)頁進展交互時顯示信息。.檢查表單選中表單域，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“檢查表單選項，翻開“檢查表單 對話框.設(shè)置形狀欄信息“設(shè)置形狀欄文本動作在閱讀器窗口底部左側(cè)的形狀欄中顯示信息?？梢赃\用此動作在形狀欄闡明鏈接的目的，而不是顯示與之關(guān)聯(lián)的URL。翻開文檔，單擊窗口左下角的標簽，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“設(shè)置文本選項，選擇“設(shè)置形狀欄文本，翻開“設(shè)置形狀欄文本 對話框.轉(zhuǎn)到URL利用轉(zhuǎn)到URL動作可在當(dāng)前窗口或指定的框架中翻開一個

14、新頁,此動作對經(jīng)過一次單擊更改兩個或多個框架的內(nèi)容特別有用。還可以在時間軸中調(diào)用此動作在指定的時間間隔后跳到一個新頁。翻開文檔，單擊窗口左下角的標簽或恣意對象，翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“轉(zhuǎn)到URL選項，翻開“轉(zhuǎn)到URL 對話框.“轉(zhuǎn)到URL 對話框.創(chuàng)建跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是超級鏈接的一種方式，運用跳轉(zhuǎn)菜單要比其他方式鏈接節(jié)省更多的空間，跳轉(zhuǎn)菜單從菜單開展而來，閱讀者單擊并選擇下拉菜單時會跳轉(zhuǎn)到目的網(wǎng)頁。將光標置于文檔中，執(zhí)行“插入菜單 “表單 “跳轉(zhuǎn)菜單.跳轉(zhuǎn)菜單開場創(chuàng)建跳轉(zhuǎn)菜單插入按鈕,翻開 “行為面板，單擊面板上的“+按鈕，在彈出的菜單中選擇“跳轉(zhuǎn)菜單開場選

15、項，翻開“跳轉(zhuǎn)菜單開場 對話框.4.3.3 利用腳本制造特效網(wǎng)頁自動顯示當(dāng)前日期 .制造滾動公告.滾動新聞類 - 51js - biyuanbody text-align:center;td font-size:12px; line-height:20px; text-align:left;.marquee width:100%; height:100%; overflow:hidden;.m height:20px;.m2 height:90px; 根本上夠用了吧！ function BYMarquee() this.Content = ; /顯示內(nèi)容 this.Speed = 20; /上

16、移速度 this.Object = ; /knowsky marquee容器對象 this.Pause = true; /能否停留 this.Start = function() var o = this.Object; var Pause = this.Pause; var Stop = false; var Stop2 = false; o.onmouSEOver = function() Stop = Stop2 = true; o.onmouseout = function() Stop = Stop2 = false; var BodyHtml = ; for(var i in th

17、is.Content) BodyHtml.push( + this.Contenti.text + ); var Dv = document.createElement(div); Dv.innerHTML = BodyHtml.join(); o.appendChild(Dv); var DvHeight = Dv.offsetHeight; while(Dv.offsetHeight /2 o.offsetHeight) Dv.innerHTML += + Dv.innerHTML; Dv.innerHTML += + Dv.innerHTML; setInterval(function(

18、) if(!Stop) o.scrollTop +; if(o.scrollTop = o.scrollHeight - o.offsetHeight) o.scrollTop = DvHeight - o.offsetHeight; if(Pause) if(o.scrollTop % o.offsetHeight = 0) Stop = true; setTimeout(function() Stop = Stop2; , 3000); , this.Speed); /實例1var marquee1 = new BYMarquee();marquee1.Content = link : #

19、, text : 英法國防部證明兩國核潛艇相撞, link : #, text : 中國赴歐采購清單敲定 涉及金額150億元;marquee1.Object = document.getElementById(marquee1);marquee1.Start();/實例2var marquee2 = new BYMarquee();marquee2.Content = link : #, text : 劍仙李橫握鋒利囂張的地銅劍，左右晃動, link : #, text : 他的奴隸【劍仙李】奮起對抗，被他狠狠地教訓(xùn)了一頓！, link : #, text : 我的奴隸 Su.新武將 在奴隸市場輸給了 金光燦爛;marquee2.Speed = 10;marquee2.Obj