使用Dreamweaver CS6編寫網(wǎng)頁(yè)的步驟
2018-09-29 11:17 更新
在手工編寫制作頁(yè)面的時(shí)候，會(huì)遇到這樣的問(wèn)題，就是要求用戶對(duì)各個(gè)標(biāo)簽屬性進(jìn)行準(zhǔn)確的記憶，才能熟練編寫，這對(duì)于剛剛接觸CSS的x新手來(lái)說(shuō)顯然很吃力。那么有沒(méi)有辦法不通過(guò)識(shí)記這些屬性就能快速上手呢？回答是肯定的。那就是通過(guò)工具軟件輔助，這里介紹的是Dreamweaver CS6。并且對(duì)于熟手來(lái)說(shuō)，使用工具可以加大開(kāi)發(fā)的進(jìn)度，并且容易維護(hù)。
使用Dreamweaver創(chuàng)建頁(yè)面
使用Dreamweaver編寫代碼的步驟如下：
（1）打開(kāi)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)通過(guò)工具實(shí)現(xiàn)基本的網(wǎng)頁(yè)框架，接下來(lái)需要考慮怎么建立css規(guī)則，具體操作步驟如下：
（1）在【CSS樣式】標(biāo)簽框中單擊鼠標(biāo)右鍵，選擇【新建】命令，如下圖所示：
注意：可以選擇菜單中【格式】＞【CSS】＞【新建】來(lái)創(chuàng)建規(guī)則。
（2）打開(kāi)【新建CSS規(guī)則】對(duì)話框，單擊【CSS規(guī)則選擇上下文選擇器類型】下拉按鈕，在彈出的列表中選擇【標(biāo)簽】選項(xiàng)，如下圖所示：
（3）在【選擇或輸入選擇器名稱】下拉框中輸入h1，單擊【確定】按鈕，彈出【h1的CSS規(guī)則定義】對(duì)話框，單擊類型區(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è)置完了，單擊【確定】按鈕，在頁(yè)面文件中已經(jīng)增加了相應(yīng)CSS規(guī)則，如下圖所示：
通過(guò)這個(gè)實(shí)踐可以知道，使用工具可以實(shí)現(xiàn)與手工輸入一致的效果。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：