網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

怎樣用Dreamweaver製作網頁模板

欄目: IT技術 / 釋出於: / 人氣:2.38W

工具/材料

Adobe Dreamweaver cs6

操作方法

首先我們先開啟軟體,然後新建一個HTML檔案和一個css檔案,然後依次點選檔案儲存為、。方法如下:

怎樣用Dreamweaver製作網頁模板

一個網頁分為二部分,即head和body。網頁的標題(title)就是在在head裡面,標題出現的位置在瀏覽器的最上方。如下圖:

怎樣用Dreamweaver製作網頁模板 第2張

而body裡面就是設計網頁的主體內容了,不管是網頁的導航、內容、還是友情連結都是在body裡面。如下圖:

怎樣用Dreamweaver製作網頁模板 第3張

關聯css需要在Adobe Dreamweaver右下方,屬性裡面找到附加樣式表。如下圖:

怎樣用Dreamweaver製作網頁模板 第4張

然後會彈出一個連線外部樣式表,點選瀏覽,找到剛才儲存的檔案,雙擊返回對方框後點擊確定,就會下程式碼去裡面自動生成一段引入外部樣式程式碼,即link。如下圖:

怎樣用Dreamweaver製作網頁模板 第5張

然後在Adobe Dreamweaver工具欄裡面就會出現剛才新增的style檔案,然後在裡面輸入網頁樣式程式碼。如下圖:

怎樣用Dreamweaver製作網頁模板 第6張

css裡面的程式碼在html裡面呼叫,都是以div來呼叫,具體如下圖:

怎樣用Dreamweaver製作網頁模板 第7張

特別提示

設計網站前,一定要出效果圖哦