使用Dreamweaver CS6編寫網(wǎng)頁的步驟
2018-09-29 11:17 更新
在手工編寫制作頁面的時候，會遇到這樣的問題，就是要求用戶對各個標簽屬性進行準確的記憶，才能熟練編寫，這對于剛剛接觸CSS的x新手來說顯然很吃力。那么有沒有辦法不通過識記這些屬性就能快速上手呢？回答是肯定的。那就是通過工具軟件輔助，這里介紹的是Dreamweaver CS6。并且對于熟手來說，使用工具可以加大開發(fā)的進度，并且容易維護。
使用Dreamweaver創(chuàng)建頁面
使用Dreamweaver編寫代碼的步驟如下：
（1）打開Dreamweaver CS6，單擊【文件】＞【新建】命令，創(chuàng)建新的html文件，并保存為03-07.html，更改<title>標簽內容為“Dreamweaver CS6制作實例”，效果如下圖所示：
（2）選擇拆分模式，把光標定位到右邊設計框里，輸入三段文字信息，在段落結束按【Enter】鍵，效果如下圖所示：
（3）選中第一行，在下面的【屬性】窗口選中【格式】為“標題1”，結果如下圖所示：
（4）在標題下新增一行，選擇【插入】＞【圖像】命令，結果如下所示：
（5）選擇圖片后單擊【確定】按鈕，在Dreamweaver中的效果如下圖所示：
在Dreamweaver中新建CSS規(guī)則
在上節(jié)我們已經(jīng)通過工具實現(xiàn)基本的網(wǎng)頁框架，接下來需要考慮怎么建立css規(guī)則，具體操作步驟如下：
（1）在【CSS樣式】標簽框中單擊鼠標右鍵，選擇【新建】命令，如下圖所示：
注意：可以選擇菜單中【格式】＞【CSS】＞【新建】來創(chuàng)建規(guī)則。
（2）打開【新建CSS規(guī)則】對話框，單擊【CSS規(guī)則選擇上下文選擇器類型】下拉按鈕，在彈出的列表中選擇【標簽】選項，如下圖所示：
（3）在【選擇或輸入選擇器名稱】下拉框中輸入h1，單擊【確定】按鈕，彈出【h1的CSS規(guī)則定義】對話框，單擊類型區(qū)域中【color】按鈕，如下圖所示：
（4）在彈出的顏色列表中選擇紅色，單擊【確定】按鈕，把標題字體設為紅色，如下圖所示：
注意：顏色值可以選擇一個十六進制的值，也可以輸入手工制作的“red”、“blue”等顏色字符串。
（5）選擇【h1的CSS規(guī)則定義】＞【分類】＞【背景】選項，選擇【Background-color】顏色為綠色，如下圖所示：
（6）選擇【h1的CSS規(guī)則定義】＞【分類】＞【區(qū)塊】，選擇【Text-align】為居中，實現(xiàn)把標題文字居中，如下圖所示：
（7）選擇【h1的CSS規(guī)則定義】＞【分類】＞【方框】選項，如下圖所示：
（8）在右邊方框設置padding為全部相同，值為20。這樣h1標簽的屬性值就設置完了，單擊【確定】按鈕，在頁面文件中已經(jīng)增加了相應CSS規(guī)則，如下圖所示：
通過這個實踐可以知道，使用工具可以實現(xiàn)與手工輸入一致的效果。
以上內容是否對您有幫助：
更多建議：