工具/材料

Adobe Dreamweaver cs6

操作方法

• 01

  首先我們先打開(kāi)軟件，然后新建一個(gè)HTML文件和一個(gè)css文件，然后依次點(diǎn)擊文件保存為index.html、style.css。方法如下：

  
• 02

  一個(gè)網(wǎng)頁(yè)分為二部分，即head和body。網(wǎng)頁(yè)的標(biāo)題（title）就是在在head里面，標(biāo)題出現(xiàn)的位置在瀏覽器的最上方。如下圖：

  
• 03

  而body里面就是設(shè)計(jì)網(wǎng)頁(yè)的主體內(nèi)容了，不管是網(wǎng)頁(yè)的導(dǎo)航、內(nèi)容、還是友情鏈接都是在body里面。如下圖：

  
• 04

  關(guān)聯(lián)css需要在Adobe Dreamweaver右下方，屬性里面找到附加樣式表。如下圖：

  
• 05

  然后會(huì)彈出一個(gè)連接外部樣式表，點(diǎn)擊瀏覽，找到剛才保存的style.css文件，雙擊返回對(duì)方框后點(diǎn)擊確定，就會(huì)下代碼去里面自動(dòng)生成一段引入外部樣式代碼，即link。如下圖：

  
• 06

  然后在Adobe Dreamweaver工具欄里面就會(huì)出現(xiàn)剛才添加的style文件，然后在style.css里面輸入網(wǎng)頁(yè)樣式代碼。如下圖：

  
• 07

  css里面的代碼在html里面調(diào)用，都是以p來(lái)調(diào)用，具體如下圖：

  

特別提示

設(shè)計(jì)網(wǎng)站前，一定要出效果圖哦