剖析:Dreamweaver網(wǎng)頁(yè)制造訣竅之一 |
發(fā)布時(shí)間:2020-03-23 文章來(lái)源:本站 瀏覽次數(shù):2678 |
中心提示:介紹如何善用Dreamweaver里的一些功用,分別是:規(guī)劃網(wǎng)頁(yè)頁(yè)面(Dreamweaver里具有彈性的頁(yè)面規(guī)劃功用)、搭配Macromedia其它產(chǎn)品一同運(yùn)用Dreamweaver(制造動(dòng)畫(huà)和圖片不求人)、自訂運(yùn)用界面(享用個(gè)性化的運(yùn)用經(jīng)驗(yàn))和最終的參加Dreamweaver擴(kuò)大程序(在網(wǎng)頁(yè)中載入擴(kuò)大 一、布景剖析 對(duì)想要在視覺(jué)化環(huán)境下制造復(fù)雜網(wǎng)頁(yè)的專(zhuān)業(yè)網(wǎng)頁(yè)制造者來(lái)說(shuō),Dreamweaver現(xiàn)已逐漸在網(wǎng)頁(yè)修正東西中展露頭角,成為專(zhuān)業(yè)人士編寫(xiě)網(wǎng)頁(yè)的最佳挑選。 根據(jù)Macromedia公司的調(diào)查,Dreamweaver現(xiàn)在已累積有超過(guò)七十萬(wàn)名的運(yùn)用者,占有率在網(wǎng)頁(yè)修正東西中居冠,像“Adobe GoLive”和“NetObjects Fusion”等競(jìng)爭(zhēng)者都被遙遙拋在后頭。因而一般地預(yù)估Dreamweaver的運(yùn)用群體將會(huì)持續(xù)的添加。 刻不容緩,以下咱們介紹如何善用Dreamweaver里的一些功用。以下密技共有十二項(xiàng),可分紅四個(gè)主題。分別是:規(guī)劃網(wǎng)頁(yè)頁(yè)面(Dreamweaver里具有彈性的頁(yè)面規(guī)劃功用)、搭配Macromedia其它產(chǎn)品一同運(yùn)用Dreamweaver(制造動(dòng)畫(huà)和圖片不求人)、自訂運(yùn)用界面(享用個(gè)性化的運(yùn)用經(jīng)驗(yàn))和最終的參加Dreamweaver擴(kuò)大程序(在網(wǎng)頁(yè)中載入擴(kuò)大高級(jí)功用 )。 二、規(guī)劃網(wǎng)頁(yè)頁(yè)面的訣竅 不管你是要運(yùn)用HTML原始語(yǔ)法逐字逐字來(lái)編寫(xiě)網(wǎng)頁(yè),或是運(yùn)用規(guī)范化窗口來(lái)進(jìn)行網(wǎng)頁(yè)的視覺(jué)規(guī)劃,以下的小訣竅都能夠派得上用場(chǎng)。 訣竅1:讓網(wǎng)頁(yè)頁(yè)面巨細(xì)更有彈性 有些網(wǎng)頁(yè)開(kāi)發(fā)者稱(chēng)以下要介紹的這種技巧為“l(fā)iquid”,在這兒則把這種技巧叫做是“彈性延伸的技巧”。這是一種技巧,可在訪客瀏覽器窗口巨細(xì)改動(dòng)時(shí)也隨之調(diào)整網(wǎng)頁(yè)頁(yè)面巨細(xì),因而假如窗口過(guò)大就不會(huì)有空白處;窗口過(guò)小邊緣就不會(huì)跑出上下移動(dòng)的拉條。 其實(shí)大多數(shù)簡(jiǎn)略的網(wǎng)頁(yè)會(huì)自己隨著瀏覽器窗口巨細(xì)來(lái)調(diào)整頁(yè)面巨細(xì),可是假如是網(wǎng)頁(yè)里用到許多不同的框架及表格,網(wǎng)頁(yè)頁(yè)面巨細(xì)就很難主動(dòng)彈性地調(diào)整。通常網(wǎng)頁(yè)規(guī)劃者會(huì)用混合運(yùn)用固定寬度的框架,和GIF圖片作為間隔來(lái)規(guī)劃網(wǎng)頁(yè)頁(yè)面,這樣一來(lái)不論是用Internet Explorer或是用Netscape Navigator,頁(yè)面巨細(xì)都會(huì)固定而不會(huì)跑掉。用Dreamweaver 4.0能夠輕而易舉的規(guī)劃出會(huì)主動(dòng)彈性調(diào)整的網(wǎng)頁(yè)。要怎么做呢? 具體做法:用東西面板(Object palette)上的按鈕翻開(kāi)網(wǎng)頁(yè),而且轉(zhuǎn)換到“格局檢查”(Layout vIEw)。這時(shí)能夠看到文字方塊的欄度,每一欄的方框上方中間還有一個(gè)小小的下拉式箭頭,點(diǎn)選想要設(shè)置彈性顯現(xiàn)的欄上方的小箭頭,接著挑選“將欄設(shè)為彈性顯現(xiàn)”(Make Column Autostretch)。(設(shè)置主動(dòng)調(diào)整欄的寬度以一欄為限)這時(shí)該欄方框上方就會(huì)呈現(xiàn)一條波浪形的線(xiàn),而不是本來(lái)表示欄度的數(shù)字。 Dreamweaver會(huì)主動(dòng)制造出固定版面的空格圖片,這個(gè)空白圖片是以欄上方的兩個(gè)長(zhǎng)條形的空白表格表示,如此版面會(huì)主動(dòng)被填充,才會(huì)完結(jié)彈性版面設(shè)置。(在第一次添加空白圖片時(shí)會(huì)跳出一個(gè)對(duì)話(huà)框問(wèn)你是否要運(yùn)用內(nèi)置圖片,為求作用,咱們主張你讓Dreamweaver主動(dòng)產(chǎn)生一個(gè),不然就不必運(yùn)用空白圖片來(lái)填充版面。) 訣竅2:發(fā)明個(gè)人調(diào)色板 Dreamweaver新的“Assets panel”(特點(diǎn)控制面板)是一種能夠在修正網(wǎng)站時(shí)根據(jù)文件格局,例如圖片、款式等來(lái)辦理文件的新東西。 具體做法:當(dāng)你界說(shuō)新站點(diǎn)時(shí)(點(diǎn)選Site New Site),一切類(lèi)型的物體會(huì)主動(dòng)添加到“Asset panel” 里的恰當(dāng)表框中。這個(gè)新參加的“Assets panel”特點(diǎn)控制面板里也有色彩框,貯存你網(wǎng)站里所用到的一切色彩,包括文字的色彩、布景的色彩,以及超鏈接的色彩等。 這是一個(gè)為運(yùn)用者量身定做的網(wǎng)站導(dǎo)航色彩盤(pán)。只需啟動(dòng)“Assets panel”(先選 “Window”再點(diǎn)“Assets”),接著點(diǎn)左方那個(gè)小小的色彩卷軸,就能夠看到你網(wǎng)站里各式各樣的色彩選項(xiàng)。當(dāng)然你能夠?qū)⑦@些色彩拉到某些特定選取的文字中。乃至當(dāng)你挑選某種色彩時(shí),畫(huà)面上會(huì)呈現(xiàn)這種色彩的十六進(jìn)位值的色彩淡濃度,和三原色對(duì)照碼(RGB)。 假如想將調(diào)色板東西欄縮小一點(diǎn),乃至能夠僅參加某些色彩到調(diào)色板的“我的最?lèi)?ài)”里。只需將選取的色彩反白、點(diǎn)選窗口里一個(gè)叫做“新增到我的最?lèi)?ài)的”按鈕(最下方靠右的按鈕),就能夠完結(jié)了。 具體做法:首先在“Fireworks”里開(kāi)端,挑選某個(gè)圖片,然后在“Set Pop-Up Menu”的對(duì)話(huà)框里點(diǎn)選“ Insert Pop-Up Menu”,你能夠輸入項(xiàng)目(items)的稱(chēng)號(hào)并點(diǎn)“PLUS”(參加)按鈕,來(lái)新增該項(xiàng)目。你能夠持續(xù)在跳出來(lái)的信息框里進(jìn)行細(xì)項(xiàng)設(shè)置,例如設(shè)置該項(xiàng)目所要用的文字及超鏈接,當(dāng)然也能夠新增子菜單,并重新安排下一層的設(shè)置。 完結(jié)時(shí),點(diǎn)選“Next”(下一步),持續(xù)設(shè)置各種參數(shù)值,例如色彩、字體等等。這時(shí)菜單完結(jié)后,既能夠預(yù)覽HTML語(yǔ)法,也可預(yù)覽圖象。再點(diǎn)“ Finish”(完結(jié))。這時(shí)當(dāng)鼠標(biāo)移動(dòng)到原來(lái)的圖片時(shí),會(huì)呈現(xiàn)菜單系統(tǒng)的內(nèi)容一覽。接著將制造好的文件導(dǎo)出時(shí),“Fireworks”會(huì)主動(dòng)生產(chǎn)出一切 Dreamweaver 需要用到的HTML、JavaScript,以及圖象文件。 訣竅4:讓圖片動(dòng)起來(lái) 假如你一起裝置有Dreamweaver、Fireworks Studio,這兩種軟件搭配的完美程度將使你贊不絕口。即便你不是專(zhuān)業(yè)的圖片規(guī)劃者,在規(guī)劃網(wǎng)頁(yè)時(shí)也多多少少想把一些GIF圖片修正得栩栩如生。Dreamweaver能夠讓你制造動(dòng)畫(huà)不求人。 具體做法:在規(guī)范窗口里挑選要進(jìn)行修正的圖片,然后在“Property Inspector”里點(diǎn)選“修正”(Edit)。假如你裝置的Dreamweaver里附有“Fireworks”,“Fireworks”就是Dreamweaver預(yù)設(shè)圖片修正器,這時(shí)圖片就會(huì)主動(dòng)載入到“Fireworks”。(假如仔細(xì)看,你會(huì)發(fā)現(xiàn)Fireworks的畫(huà)面會(huì)呈現(xiàn)“Editing From Dreamweaver”這樣的文字和圖樣,指示你能夠在Dreamweaver里進(jìn)行圖片修正。) 好了,現(xiàn)在在“Fireworks”里點(diǎn)選要修正的圖片,挑選“ Modify Animate Animate Selection”。 接下來(lái)完結(jié)“Animate dialog box”里的設(shè)置,選定動(dòng)畫(huà)的幀數(shù),動(dòng)畫(huà)移動(dòng)的方向、透明度等等設(shè)置。你也能夠點(diǎn)選“Frames”東西設(shè)置移動(dòng)速度,挑選“Object”面板來(lái)改動(dòng)設(shè)置。 要導(dǎo)出文件時(shí),只需點(diǎn)選“ Optimize ”東西欄,在文件類(lèi)型的地方挑選“Animated GIF”。完結(jié)今后,“Fireworks”就會(huì)主動(dòng)將圖片以最佳化設(shè)置導(dǎo)出,而且主動(dòng)將 GIF 圖片更新,還會(huì)在Dreamweaver里將更新過(guò)的圖片顯現(xiàn)出來(lái)。點(diǎn)選“File Preview in Browser”,這樣就能夠在瀏覽器里預(yù)覽剛剛制造完結(jié)的心愛(ài)圖片。 訣竅5:讓按鈕有閃爍作用 在Dreamweaver中,不必有Flashs,也能夠制造有閃爍作用的Flash按鈕物體。Dreamweaver內(nèi)置有好幾個(gè) Flash按鈕物體,能夠制造好幾個(gè)不同方式的按鈕。 具體做法:點(diǎn)選“Insert Interactive Images Flash Button”就可看到有那些內(nèi)置按鈕。在對(duì)話(huà)框內(nèi)乃至能夠用鼠標(biāo)指到想要運(yùn)用的按鈕方式,然后看看在瀏覽器里的作用如何。 用鼠標(biāo)指針把要用的按鈕方式選定,再依順序輸入?yún)?shù),例如按鈕上的文字、字形、色彩、超鏈接等,或是自設(shè)文件姓名。按下OK。接下來(lái)就會(huì)有一個(gè)“SWF”格局的文件產(chǎn)生,文件并會(huì)主動(dòng)導(dǎo)入你的網(wǎng)頁(yè)中。按一下這個(gè)做好的文件,會(huì)看到“Property Inspector”(特點(diǎn)明細(xì))中會(huì)顯現(xiàn)出文件的特點(diǎn)。將文件特點(diǎn)顯現(xiàn)出來(lái)時(shí),假如擴(kuò)展文件特點(diǎn)明細(xì)表,會(huì)呈現(xiàn)“Play”(播映),點(diǎn)選之后能夠不必翻開(kāi)瀏覽器來(lái)預(yù)覽按鈕的閃爍作用。 訣竅6:制造活動(dòng)文字 在網(wǎng)頁(yè)中添加活動(dòng)文字就像添加咱們剛剛介紹的Flash按鈕相同簡(jiǎn)略。相同地,不必裝置Flash,用 Dreamweaver供給的新功用就能夠輕松辦到。常用HTML語(yǔ)法寫(xiě)網(wǎng)頁(yè)、沒(méi)有互動(dòng)式媒體經(jīng)驗(yàn)的網(wǎng)頁(yè)制造者也能夠輕松制造出小巧的Flash方式的活動(dòng)文字。這項(xiàng)新功用能夠在不添加相兼容性費(fèi)事的狀況下為網(wǎng)頁(yè)增加一些瀏覽上與訪客的互動(dòng)性。 具體做法:點(diǎn)選“Insert Interactive Images Flash Text”,再將參數(shù)設(shè)置一一填入(例如要更改作用的文字、字形、字體色彩及字體巨細(xì)等等)。 |
|