Dreamweaver網頁製作初級教程:主體div的定義?

現如今,網頁製作以及建站成了人人需要掌握的技能,小編也從各方面得到需求說,以前有過PS的入門教程,現在能不能做一個DW的入門教程。那麼從今天開始,小編將用一些時間,為大家帶來DW的入門教程。只要能堅持,你也能成為大神。

工具/原料

Dw

方法/步驟

之前我們做過了關於頭部標題欄以及logo部分的div切分,不知道大家還記不記得。今天我們要做一些關於網站主體部分的劃分,希望大家緊跟著之前的思路哦。首先我們還是開啟dw。

Dreamweaver網頁製作初級教程:主體div的定義

自然,要定義body部分,就要用到body的程式碼。我們在body之間輸入兩個關於div的程式碼。

Dreamweaver網頁製作初級教程:主體div的定義

因為我們準備將body部分劃分為2欄,也就說,我們應該定義不同的body,起名一個l一個r,定義程式碼如下:

Dreamweaver網頁製作初級教程:主體div的定義

完畢後,我們來定義它們的樣式。來到css檔案,css檔案主要是定義樣式的,當然,因為我們定義的是id,所以這裡要用#開始。

即:

#body_l{}

#body_r{}

大括號中即是我們需要定義的屬性了。

Dreamweaver網頁製作初級教程:主體div的定義

定義完成樣式的屬性,程式碼如下:

#body_l{width:220px;height:500px;background-color:#FFC}

#body_r{width:220px;height:500px;background-color:#FFC}

先看下效果:

Dreamweaver網頁製作初級教程:主體div的定義

雖然我們定義的是左右,但是發覺右側的div跑到下方去了,其實我們忘記了一個命令,就是float。我們加上邊距margin,然後插入float命令,再看。

Dreamweaver網頁製作初級教程:主體div的定義

可以看到,雖然並排排列了,但是兩個div黏在一起,也分辨不出所以然,所以我們加入這樣的語句:

margin-left:20px

讓它距離左側20畫素,然後預覽。

Dreamweaver網頁製作初級教程:主體div的定義

剛剛好,我們分完了這些div,下節我們說一下div的再詳細劃分。

網頁, 定義, 大神, 建站, 主體,
相關問題答案