<optgroup id="sn3cy"></optgroup>
  • <code id="sn3cy"></code>
    <blockquote id="sn3cy"></blockquote>

    <blockquote id="sn3cy"></blockquote>
    1. <tt id="sn3cy"></tt><thead id="sn3cy"><sup id="sn3cy"></sup></thead>

      網頁制作技術

      2014年09月27日

      dreamweaver利用預設模板來快速的架構一個簡易網站

      dreamweaver提供了快速建立網站框架的方式,我們可以通過簡單預設模板來達到快速的架構一個簡易網站的目的。看看下面這個網頁的基本結構,這是我們今天的目標,左側導航欄,右側顯示主頁面。

      dreamweaver怎樣利用模板快速創建網站框架


      軟件名稱:Macromedia Dreamweaver MX 2004 官方簡體中文專業版軟件大小:63.23MB更新時間:2013-05-08


      步驟

      1、打開dreamweaver,按快捷鍵“ctr+N”來到“新建文檔”界面,我們新建一個基本html頁面。

      dreamweaver怎樣利用模板快速創建網站框架

      2、在這個頁面中輸入du小策,作為小策的個人頁面。

      dreamweaver怎樣利用模板快速創建網站框架

      3、接下來為小策插入一張藝術照。

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

      4、暫且完成了這個簡單的頁面,一會要用到。

      dreamweaver怎樣利用模板快速創建網站框架

      5、同樣的方法給du幫幫建一個個人頁面。

      dreamweaver怎樣利用模板快速創建網站框架

      6、接著將這兩個文件存起來。按快捷鍵“trl+s”,彈出這個對話框。文件名設為du小策,然后點擊確定。

      以同樣的方法把幫幫存起來,以后備用。

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

      7、按快捷鍵“ctrl+n”新建一個頁面。點擊圖中所示的位置,選擇布局。

      dreamweaver怎樣利用模板快速創建網站框架

      8、在標簽欄選擇框架類型,如圖所示,這是頁面的整體布局,左側是預覽圖,右側hi名稱,我們選擇第一個作為示范。

      dreamweaver怎樣利用模板快速創建網站框架

      9、彈出了一個對話框,這個對話框要對頁面的各個部分進行命名,這一步比較重要,一會我們要用到,所以看準,左欄叫做leftframe,右欄叫做mainframe。

      dreamweaver怎樣利用模板快速創建網站框架

      10、在左側輸入百度經驗,du小策,du幫幫,在右側主頁面輸入百度經驗。此頁面的輸入和word的輸入沒有區別,就是直接打字,回車就是換行。我們看到下圖的樣子,左欄為導航欄,就是我們平時在網頁上看到的導航。

      dreamweaver怎樣利用模板快速創建網站框架

      11、點擊“文件”——全部保存,記住這一步不是“ctrl+s”,因為框架頁面是有兩個頁面構成的,所以要選擇全部保存。

      dreamweaver怎樣利用模板快速創建網站框架

      12、彈出了一個保存對話框,這一步非常重要,接下來還會彈出兩個這樣的對話框。那么這第一個是整個頁面的,第二個對話是右欄的,第三個是左側導航,他們分別儲存于不同的文件中。

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

      13、看看效果,把鼠標放在不同的部分,標簽欄上會出現不同的文件名稱。

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

      14、接下來我們要對左側導航建立鏈接。選中左欄中“百度經驗”,點擊右下角的一個圓圈,拖動圓圈到右面的相應文件,這樣就建立了一個鏈接。接著在界面的下面選擇目標為mainframe。mainframe是我們在第九步中命名的右側欄的名字,你可以返回去看看。百度經驗這四個字建立了鏈接指向“右側.html”這個文件,同時這個文件將在mainframe這個位置打開,也就是在右欄打開。

      dreamweaver怎樣利用模板快速創建網站框架

      dreamweaver怎樣利用模板快速創建網站框架

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

      16、我們按快捷鍵F12,預覽界面,看看這是打開了主頁面“百度經驗”

      dreamweaver怎樣利用模板快速創建網站框架

      17、點擊“du小策”這個鏈接

      dreamweaver怎樣利用模板快速創建網站框架

      18、點擊“du幫幫”這個鏈接,看看效果。這個小網站的基本框架就建構好了。

      dreamweaver怎樣利用模板快速創建網站框架

      二維碼 返回頂部
      内蒙古时时彩十一选五
      <optgroup id="sn3cy"></optgroup>
    2. <code id="sn3cy"></code>
      <blockquote id="sn3cy"></blockquote>

      <blockquote id="sn3cy"></blockquote>
      1. <tt id="sn3cy"></tt><thead id="sn3cy"><sup id="sn3cy"></sup></thead>
        <optgroup id="sn3cy"></optgroup>
      2. <code id="sn3cy"></code>
        <blockquote id="sn3cy"></blockquote>

        <blockquote id="sn3cy"></blockquote>
        1. <tt id="sn3cy"></tt><thead id="sn3cy"><sup id="sn3cy"></sup></thead>