用Dreamweaver MX實現(xiàn)網(wǎng)站批量更新_Dreamweaver教程
1、首先我們來看看模板的應(yīng)用,與Dreamweaver 4.0不同的是,DW MX把模板的操作拓展到了“Modify”與“Insert”兩個菜單下。同時,在 “File”選項的“Assert”子選項中也可以直接創(chuàng)建模板。
2、找到“Assert”子選項,在左邊的工具欄中單擊“Templates”按鈕,此時的模板為空,我們可以在右下角單擊“New Template”按鈕,一個空白的模板就會出現(xiàn)在面板中(如圖1),點擊模板名稱,是模板進(jìn)入可編輯狀態(tài)。注重,此時的模板還沒有任何添加任何元素,我們可以像編輯普通網(wǎng)頁一樣在模板上添加表格、圖像、文字等。添加完后,保存模板,可以在默認(rèn)站點文件夾的“Templates”子文件夾下找到剛才做好的模板,擴(kuò)展名為.dwt。

假如嫌這樣麻煩,DW MX還提供了一種更直接的方法,編輯好要保存為模板的網(wǎng)頁后,在“File”菜單中點擊“Save as Templates”,即可生成模板。
3、模板生成之后,還要建立可編輯區(qū)域,為將來填入不同的網(wǎng)頁內(nèi)容做預(yù)備。打開模板,單擊菜單“Insert/Template Object/Editable Region”,出現(xiàn)可編輯區(qū)域?qū)υ捒颍付▍^(qū)域名稱后,可以看到模板中出現(xiàn)了藍(lán)色的方框。 保存后就建立了可編輯區(qū)的模板。
4、如何批量生成網(wǎng)頁呢?單擊菜單“File/New”,選擇“Templates”選項,馬上就可以看到建立生成的模板,單擊“Create”按鈕,模板就開始自動套用在網(wǎng)頁上。這個時候我們可以看到,原來的模板區(qū)域是黃色,其中的元素已經(jīng)固定,不能編輯,而我們剛剛指定的可編輯區(qū)域是藍(lán)色,可以編輯。這樣一來,不但大大簡化了我們生成相似網(wǎng)頁的工作量,而且有效地保證了網(wǎng)頁風(fēng)格的一致性。
5、最后,就是關(guān)聯(lián)網(wǎng)頁批量更新,這是大型網(wǎng)站更新網(wǎng)頁時必不可少的一項技術(shù),在DW MX中可以輕易實現(xiàn)。因為我們所有的網(wǎng)頁都套用了相同的模板,而且這些網(wǎng)頁都被保存在同一個站點目錄下,當(dāng)我們要對所有網(wǎng)頁的公共元素進(jìn)行改動時,只需修改模板中的元素即可。
打開“Templates”子選項,雙擊關(guān)聯(lián)網(wǎng)頁的模板,這時候模板進(jìn)入了可編輯狀態(tài),黃色區(qū)域消失,改變了模板的內(nèi)容后,保存時就會出現(xiàn)一個提示對話框:“下列網(wǎng)頁使用了當(dāng)前模板,是否進(jìn)行更新?”(如圖2)單擊“Update”,此時,網(wǎng)站中所有基于模板創(chuàng)建的關(guān)聯(lián)網(wǎng)頁都將得到更新(如圖3)。

圖2

圖3
與模板類似,DW MX的庫就顯得更加靈活,在“Assert”選項卡上單擊“Library”,打開庫,暫時庫中沒有任何元素,我們把網(wǎng)頁中要生成庫的元素,如表格、圖像,直接拖到庫面板中即可(如下圖)。

圖4
注重,庫中的元素決不僅僅是圖像或文字本身,而且還包含了網(wǎng)頁中排列這些圖像的代碼。因此,我們也可以像模板中一樣,在網(wǎng)頁上添加相同的庫元素,從而批量生產(chǎn)風(fēng)格類似的網(wǎng)頁。這時,我們只要在庫面板中將元素拖回到新網(wǎng)頁上即可,而相關(guān)的代碼會自動復(fù)制到新網(wǎng)頁上。
而且,庫元素也可以實現(xiàn)網(wǎng)站的批量更新,我們在庫面板中單擊庫元素,使庫進(jìn)入可編輯狀態(tài)(如圖5),當(dāng)改變了庫元素并進(jìn)行保存時,凡是使用了庫元素的網(wǎng)頁,會自動進(jìn)行同步更新。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver網(wǎng)頁制作教程:行為事件
- Dreamweaver制作網(wǎng)頁之圖片應(yīng)用技巧
- 如何用Dreamweaver批量做web網(wǎng)頁
- 分欄及回復(fù)的實現(xiàn)-Dreamweaver構(gòu)建Blog
- 技巧:用Dreamweaver進(jìn)行網(wǎng)頁優(yōu)化
- Dreamweaver網(wǎng)頁制作教程:超級鏈接
- 解決Dreamweaver不支持中文文件名
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- Dreamweaver MX進(jìn)階教程(十六)制作可拖動表格
- Dreamweaver使用快技法十三則 [1]
猜你也喜歡看這些
- div css視頻教程
- 動態(tài)網(wǎng)頁設(shè)計視頻全教程
- 視友工作室網(wǎng)站頁設(shè)計制作全面通
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- 精通JavaScript+jQuery視頻教程
- 北風(fēng)網(wǎng)資深web講師李炎恢講師Dreamweaver系列課程(已完結(jié)|45課時)陸續(xù)更新中
- Dreamweaver MX 2004中文版完全自學(xué)手冊
- Xhtml全套課程(含項目案例,李炎恢主講)
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- 開天辟地-網(wǎng)頁設(shè)計與網(wǎng)站架設(shè)
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-用Dreamweaver MX實現(xiàn)網(wǎng)站批量更新
。