文、李明謙老師

早期網站架構大都以表格為主流,幾乎網站都以表格為定位來製作網頁;現在網站建製架構大都為利用Div與Css配合運用,故網頁的多元化變的更有看頭囉。

以目前的網站架構,主要是以Html為骨架,Css為美化工作,如此便可以達到百分之百的完美網頁,但要怎麼去製作卻是個難題,基本上,CSS並不難,難在於怎麼運用以及想法上。

假設我們已經將網頁需要的樣版製作完成並切割需要的圖檔後,便開始利用dramweaver來將這些已切割的圖檔再次組合至網頁內。

首先,開啟一個新網頁檔案,並在網頁內利用DiV與Css的實例運用001.jpg 建立四個與樣版同樣的區塊,插入時,插入為在插入點上,ID須各自命名為top、left、right、bott。

 DiV與Css的實例運用002.jpg DiV與Css的實例運用003.jpg

打開CSS面板,並新增一個外部連結,並命名為Css.css,步驟如下:

DiV與Css的實例運用004.jpg  

點選1位置,加入CSS外部連結,按下2位置瀏覽後,直接在檔案名稱欄位上輸入css.css即可。

分別對DIV的ID進行CSS編輯,按下新增CSS樣式按鈕後,分別將類型、名稱輸入。

DiV與Css的實例運用005.jpg

在CSS規則視窗內點選定位並輸入以下值(ID: left (寬:1000 高:238 top:0 left:0)

 DiV與Css的實例運用006.jpg

 ID: left (寬:214 高:466 top:238 left:0)

 DiV與Css的實例運用007.jpg

 ID: right (寬:786 高:466 top:238 left:214)

 DiV與Css的實例運用008.jpg

ID: left (寬:214 高:466 top:238 left:0)

 DiV與Css的實例運用019

不知道各位看官們有沒有注意到,top和left這二個值的設定還滿有趣的,也就是說,為了達到合併的效果,我們便將每個DIV的top上及left左的設定上個DIV的設定值,這樣就可以達到緊密接合了。

 DiV與Css的實例運用011.jpg

而另外,各位有沒覺得似曾相識,是的,這就是AP DIV,但AP DIV是直接將語法寫入HTML檔案,於是乎變的不活用,而DIV便是為了達到HTML做架構,而CSS做美化工作而使用的,現在我們便再加入圖案,使畫面更接近我們所要求的!

1.重新開啟ID:top的CSS樣式設定:直接點擊CSS面版中的 ,然後點選視窗左邊的背景,並按下瀏覽選擇一圖片,做為底圖。

DiV與Css的實例運用013.jpg

2.編輯ID:left的CSS樣式設定:如1,這次換成另一張圖片

DiV與Css的實例運用014.jpg

3.編輯ID:bott的CSS樣式設定:在背景設定時,僅給予Background-color背景顏色:黑色並另在字型分類設定如下

DiV與Css的實例運用015.jpg

4.而ID:right因內容與框必須保留適當距離,故得重設在方框內設定內容與邊框的距離,以確保文字不會太接近邊緣,而造成壓迫感,其設定如下:

DiV與Css的實例運用016.jpg

但因此造成DIV的寬高便超出設定範圍,所以必須再將DIV的寬高縮減方框的設定,如下:

 DiV與Css的實例運用017.jpg

便將該距離縮減至區域內了!同時內容區域(ID:right)可再設定字型樣式便大功告成囉~

 DiV與Css的實例運用018.jpg

目前各大型網站都是利用此架構形成網站(頁),方便修改及維護,也就是說只要利用或懂得CSS便可以改造網頁變成我們想要的樣子,好比,房子的主架構完成,再來就是裝潢囉,而目前大多數的部落格網站都是利用此種方式,讓使用者自行完成CSS,有些更會利用程式去帶領使用者自行定義~這就是現在很多人在講的HTML為主架構,CSS為美化工作的原因!

 

延伸閱讀,李明謙老師技術文件:

聯成電腦技術前線:網頁版型設計與編排

聯成電腦技術前線:淺談網頁設計與接案流程

 

, , , , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()