Dreamweaver制作網(wǎng)頁(yè)的時(shí)候怎么定義主體div?
我要評(píng)論現(xiàn)如今，網(wǎng)頁(yè)制作以及建站成了人人需要掌握的技能，小編也從各方面得到需求說，以前有過PS的入門教程，現(xiàn)在能不能做一個(gè)DW的入門教程。那么從今天開始，小編將用一些時(shí)間，為大家?guī)?lái)DW的入門教程。只要能堅(jiān)持，你也能成為大神。
Adobe Dreamweaver CS5 簡(jiǎn)體中文綠色版
- 類型：網(wǎng)頁(yè)設(shè)計(jì)
- 大?。?/span>86MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2012-06-06
1、之前我們做過了關(guān)于頭部標(biāo)題欄以及l(fā)ogo部分的div切分，不知道大家還記不記得。今天我們要做一些關(guān)于網(wǎng)站主體部分的劃分，希望大家緊跟著之前的思路哦。首先我們還是打開dw。
2、自然，要定義body部分，就要用到body的代碼。我們?cè)赽ody之間輸入兩個(gè)關(guān)于div的代碼。
3、因?yàn)槲覀儨?zhǔn)備將body部分劃分為2欄，也就說，我們應(yīng)該定義不同的body，起名一個(gè)l一個(gè)r，定義代碼如下：
<div id="body_l"></div>
<div id="body_r"></div>
4、完畢后，我們來(lái)定義它們的樣式。來(lái)到css文件，css文件主要是定義樣式的，當(dāng)然，因?yàn)槲覀兌x的是id，所以這里要用#開始。
即：
#body_l{}
#body_r{}
大括號(hào)中即是我們需要定義的屬性了。
5、定義完成樣式的屬性，代碼如下：
#body_l{width:220px;height:500px;background-color:#FFC}
#body_r{width:220px;height:500px;background-color:#FFC}
先看下效果：
6、雖然我們定義的是左右，但是發(fā)覺右側(cè)的div跑到下方去了，其實(shí)我們忘記了一個(gè)命令，就是float。我們加上邊距margin，然后插入float命令，再看。
7、可以看到，雖然并排排列了，但是兩個(gè)div黏在一起，也分辨不出所以然，所以我們加入這樣的語(yǔ)句：
margin-left:20px
讓它距離左側(cè)20像素，然后預(yù)覽。
8、剛剛好，我們分完了這些div，下節(jié)我們說一下div的再詳細(xì)劃分。
相關(guān)推薦：
Dreamweaver怎么新建站點(diǎn)地圖?dw編輯站點(diǎn)地圖的方法
Dreamweaver建立的站點(diǎn)怎么更改圖像的默認(rèn)文件夾位置?
相關(guān)文章
Dreamweaver如何設(shè)置圖像屬性?DW設(shè)置圖像屬性方法介紹
Dreamweaver如何設(shè)置圖像屬性?很多新手并不是很清楚，所以下面小編就為大家詳細(xì)介紹DW設(shè)置圖像屬性方法，不會(huì)的朋友可以參考本文，希望能對(duì)大家有所幫助2016-02-27Dreamweaver中如何設(shè)置熱區(qū)?DW設(shè)置熱區(qū)方法圖解
Dreamweaver中如何設(shè)置熱區(qū)?很多新手并不是很清楚，所以下面小編就為大家詳細(xì)介紹DW設(shè)置熱區(qū)方法，不會(huì)的朋友可以參考本文，希望能對(duì)大家有所幫助2016-02-27Dreamweaver創(chuàng)建表格和表格的編輯方法介紹
這篇教程是向腳本之家的朋友分享Dreamweaver創(chuàng)建表格和表格的編輯方法，教程比較基礎(chǔ)，適合新手來(lái)學(xué)習(xí)，推薦到腳本之家，大家一起來(lái)學(xué)習(xí)吧2016-02-21Dreamweaver如何創(chuàng)建自己的站點(diǎn)并管理刪除呢?
Dreamweaver提供了對(duì)站點(diǎn)的創(chuàng)建及管理功能，通過以樹型結(jié)構(gòu)來(lái)展示網(wǎng)站的內(nèi)容分布，從而實(shí)現(xiàn)了對(duì)站點(diǎn)布局及細(xì)節(jié)內(nèi)容的展示及修改，這項(xiàng)功能對(duì)于各位網(wǎng)頁(yè)設(shè)計(jì)者而言更有用，2016-02-17Dreamweaver如何建立超鏈接?DW建立超鏈接方法介紹
超鏈接大家都知道吧，就是你點(diǎn)到的話會(huì)直接彈出另一個(gè)鏈接的頁(yè)面。這是很有用的推廣手段之一。那么Dreamweaver如何建立超鏈接?下面小編就為大家介紹DW建立超鏈接方法，來(lái)看2016-02-17- 今天為大家分享Dreamweaver新建文檔和打開文檔圖文教程，教程比較基礎(chǔ)，主要針對(duì)新手來(lái)學(xué)習(xí)，推薦到腳本之家，喜歡的朋友快快來(lái)學(xué)習(xí)吧2016-02-12
- 我們用Dreamweaver制作網(wǎng)頁(yè)的時(shí)候,都用F12來(lái)看一下制作后的效果，那么Dreamweaver在哪里添加瀏覽器?如何添加瀏覽器?下面小編就為大家詳細(xì)介紹一下，不會(huì)的朋友快快來(lái)學(xué)習(xí)吧2016-01-22
Dreamweaver如何新建站點(diǎn)?DW新建站點(diǎn)方法
制作網(wǎng)站的朋友愛用Dreamweaver CS6這款軟件，很多新手朋友不會(huì)利用Dreamweaver的站點(diǎn)來(lái)管理網(wǎng)頁(yè)，那么Dreamweaver如何新建站點(diǎn)?下面小編就為大家介紹DW新建站點(diǎn)方法，來(lái)看2015-12-21dreamweaver怎么設(shè)置背景圖片 dreamweaver背景圖片設(shè)置圖文教程
dreamweaver（簡(jiǎn)稱：DW）是一款非常好用的網(wǎng)頁(yè)設(shè)計(jì)軟件，受到很多新手喜愛！ 今天為大家?guī)?lái)DW設(shè)置背景圖片教程圖，一起來(lái)看看吧2015-04-01- 今天為大家介紹一下在dreamweaver中改變文字樣式的方法，下面一起來(lái)看看具體操作吧。2014-05-08