這篇文章給大家分享的是有關(guān)dreamweaver如何利用預(yù)設(shè)模板來(lái)架構(gòu)一個(gè)網(wǎng)站的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)霍州,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

dreamweaver提供了快速建立網(wǎng)站框架的方式，我們可以通過(guò)簡(jiǎn)單預(yù)設(shè)模板來(lái)達(dá)到快速的架構(gòu)一個(gè)簡(jiǎn)易網(wǎng)站的目的?？纯聪旅孢@個(gè)網(wǎng)頁(yè)的基本結(jié)構(gòu)，這是我們今天的目標(biāo)，左側(cè)導(dǎo)航欄，右側(cè)顯示主頁(yè)面。

步驟

1、打開dreamweaver，按快捷鍵“ctr+N”來(lái)到“新建文檔”界面，我們新建一個(gè)基本html頁(yè)面。

2、在這個(gè)頁(yè)面中輸入du小策，作為小策的個(gè)人頁(yè)面。

3、接下來(lái)為小策插入一張藝術(shù)照。

4、暫且完成了這個(gè)簡(jiǎn)單的頁(yè)面，一會(huì)要用到。

5、同樣的方法給du幫幫建一個(gè)個(gè)人頁(yè)面。

6、接著將這兩個(gè)文件存起來(lái)。按快捷鍵“trl+s”，彈出這個(gè)對(duì)話框。文件名設(shè)為du小策，然后點(diǎn)擊確定。

以同樣的方法把幫幫存起來(lái)，以后備用。

7、按快捷鍵“ctrl+n”新建一個(gè)頁(yè)面。點(diǎn)擊圖中所示的位置，選擇布局。

8、在標(biāo)簽欄選擇框架類型，如圖所示，這是頁(yè)面的整體布局，左側(cè)是預(yù)覽圖，右側(cè)hi名稱，我們選擇第一個(gè)作為示范。

9、彈出了一個(gè)對(duì)話框，這個(gè)對(duì)話框要對(duì)頁(yè)面的各個(gè)部分進(jìn)行命名，這一步比較重要，一會(huì)我們要用到，所以看準(zhǔn)，左欄叫做leftframe，右欄叫做mainframe。

10、在左側(cè)輸入百度經(jīng)驗(yàn)，du小策，du幫幫，在右側(cè)主頁(yè)面輸入百度經(jīng)驗(yàn)。此頁(yè)面的輸入和word的輸入沒(méi)有區(qū)別，就是直接打字，回車就是換行。我們看到下圖的樣子，左欄為導(dǎo)航欄，就是我們平時(shí)在網(wǎng)頁(yè)上看到的導(dǎo)航。

11、點(diǎn)擊“文件”——全部保存，記住這一步不是“ctrl+s”，因?yàn)榭蚣茼?yè)面是有兩個(gè)頁(yè)面構(gòu)成的，所以要選擇全部保存。

12、彈出了一個(gè)保存對(duì)話框，這一步非常重要，接下來(lái)還會(huì)彈出兩個(gè)這樣的對(duì)話框。那么這第一個(gè)是整個(gè)頁(yè)面的，第二個(gè)對(duì)話是右欄的，第三個(gè)是左側(cè)導(dǎo)航，他們分別儲(chǔ)存于不同的文件中。

13、看看效果，把鼠標(biāo)放在不同的部分，標(biāo)簽欄上會(huì)出現(xiàn)不同的文件名稱。

14、接下來(lái)我們要對(duì)左側(cè)導(dǎo)航建立鏈接。選中左欄中“百度經(jīng)驗(yàn)”，點(diǎn)擊右下角的一個(gè)圓圈，拖動(dòng)圓圈到右面的相應(yīng)文件，這樣就建立了一個(gè)鏈接。接著在界面的下面選擇目標(biāo)為mainframe。mainframe是我們?cè)诘诰挪街忻挠覀?cè)欄的名字，你可以返回去看看。百度經(jīng)驗(yàn)這四個(gè)字建立了鏈接指向“右側(cè).html”這個(gè)文件，同時(shí)這個(gè)文件將在mainframe這個(gè)位置打開，也就是在右欄打開。

15、同樣的方式給小策和幫幫建立鏈接。分別指向“du小策.html”、“du幫幫.html”這兩個(gè)文件。

16、我們按快捷鍵F12，預(yù)覽界面，看看這是打開了主頁(yè)面“百度經(jīng)驗(yàn)”

17、點(diǎn)擊“du小策”這個(gè)鏈接

18、點(diǎn)擊“du幫幫”這個(gè)鏈接，看看效果。這個(gè)小網(wǎng)站的基本框架就建構(gòu)好了。

感謝各位的閱讀！關(guān)于“dreamweaver如何利用預(yù)設(shè)模板來(lái)架構(gòu)一個(gè)網(wǎng)站”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！