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