!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

      成為CSS高手之路系列文章第七篇來嚕!!上一篇設計嵐說明了如何針對文字設定邊框以及轉灰階圖片的CSS語法,今天來介紹一個更實用的技巧~文繞圖的設定,這個技巧之所以重要,原因有二:1.網頁內文不作文繞圖排版上很難看 2.使用DIV+CSS排版是目前網頁標準化的一個標準作法,網頁設計師必備技能!!

1.首先設計嵐先用Dreamweaver開一個新網頁並且放入文字以及一張圖片在同一個段落,此時各位會發現,由於圖片有長寬大小,與文字同段落會造成文字上方被撐開而有一大塊空白,在版面上不但造成空間浪費也不好看。

1.jpg 

2.為解決這個問題,在傳統的做法中,有人習慣用表格排版,但表格有其限制比較不靈活;另外則有人使用以下方法:

A.選取圖片→屬性面板→對齊→靠左或靠右對齊。

2.jpg 

B.設定後確實有了文繞圖效果,然而圖片和文字的間距則會非常小而顯得擁擠(如下圖):

3.jpg 

C.有些設計師會利用程式碼進行修改,加上hspacevspace的指令設定水平及垂直間距,然而這個方法會受限於瀏覽器版本的支援度,在有些瀏覽器會無法正確顯示,因此設計嵐不示範此種方法。

3.較正統且符合標準的做法,則是使用DIV搭配CSS進行設定,做法如下:

A.在頁面中放入文字後,先不插入圖片,而是將插入點游標放在文字最前面(下圖紅圈處),然後執行『插入』面板→版面→插入Div標籤選項。

5.jpg 

B.在設定畫面中設定Div的ID名稱,並且點選『新增CSS規則』(取ID名稱的目的在於用ID的選取器類型設定CSS規則,可讓規則只套用於對應的ID物件,關於ID建立CSS規則可參閱成為CSS高手之路(四)~CSS在DW中的設定與語法宣告方式Part II-整頁套用的CSS規則(下)一文)

6.jpg 

C.出現以下畫面直接按下確定即可。(套用ID選取器)

7.jpg 

D.點選『方框』標籤,針對Div的相關參數進行設定。

8.jpg 

‧上圖中的Float就是設定文繞圖方式,有Left(圖左文右)以及Right(圖右文左)兩種設定值,各為可依所需設定。

‧上圖中的Margin則是設定Div與周圍物件的『間距』,由於設計嵐選擇了圖左文右的方式,所以我僅針對Right(右側)以及Bottom(下方)設定間距。

‧設定完成按下確定

E.回到剛剛的畫面後按下確定完成Div的插入。

9.jpg 

F.此時文字最前面會出現一個虛線框(下圖紅框處),這個就是Div,接著可在虛線框中放入文字或圖片等所需的內容。

10.jpg 

G.刪除Div中原有註解文字,插入所需圖片並且調整好尺寸大小,便會看到文繞圖成功出現了。

11.jpg 

H.實際用瀏覽器預覽,可發現圖片的右邊和下方都和文字有了一個適當的間距(下圖紅框處):

12.jpg 

p.s.如果對於相關設定不滿意,可在CSS樣式面板上的對應規則上連點兩下修改設定內容。

13.jpg 

4.切換至『程式碼』模式,會出現幾段語法:

A.在<head>中的<style>和</style>之間會出現定義給Div的CSS設定語法(下圖紅框處)。

14.jpg 

‧#pic為ID規則的名稱,{ }之間則是此規則的設定內容。

‧float:設定文繞圖方式。

‧margin-right和margin-bottom則分別設定右方及下方的間距。

B.在<body>中的圖片標籤<img>前後則會用<div></div>標籤包住,因為圖片式插入在Div中的。

15.jpg 

      以上就是Div+CSS的一種簡單的運用,各位可以試試看,由於這樣的排版是目前的主流方式,陸續設計嵐還會再介紹Div+CSS的相關應用教學。

創作者介紹

『嵐設』-設計教學部落

設計嵐 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • joe333tw
  • mike蔡:我覺得好像很難>"<....
    平常在公司這類排版的事都是交給專業的資訊室同仁去做,
    我只負責出圖或是繪製機械工程圖......
    所以:我要找個時間好好觀摩你的文章~學一些自己不會的知識了!
  • 其實CSS很重要的喔~~網頁先不說,Blog的樣式全都是用CSS去設定的,所以會CSS可以讓自己的Blog版面與眾不同喔~~例如小弟的Blog版面,是先套用一個樣式後再改成現在這樣子的,還沒改完~~有時間慢慢弄,所以嚕!咱們一起研究!!成為CSS高手..6^.^

    設計嵐 於 2010/04/27 01:38 回覆

  • ruru814
  • 這真的是很受用,我永遠是被表格不斷折磨耐心.....
    而且不知道為什麼一直覺得Div好像很難,這樣看起來好像不太難,哈哈哈!
    CSS也是超重要的,通常設計師只做版面設計,常常規範不好CSS,就像我XD...
  • 加油喔~^^...我會繼續由淺入深寫CSS相關教學文章以及DIV的相關應用,還請多多支持喔~~只要多多運用,一定會熟練的^^..

    設計嵐 於 2010/04/29 21:06 回覆

  • 呼呼屋
  • 能分享就是一種幸福

    寫得真棒./.....
  • 謝謝您的誇獎~~我會繼續努力..^^..還請繼續支持喔!!

    設計嵐 於 2010/05/13 11:13 回覆

  • dien
  • 謝謝你的分享,終於明白CSS的基本介紹、使用方式了。
    很期待有新的文章 : )
  • 您放心~~成為CSS高手之路會繼續連載下去的..^^

    設計嵐 於 2010/08/17 14:01 回覆