顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

2013年12月25日 星期三

什麼是響應式設計?


拜行動裝置上網普及,因此目前 Responsive Web Design 響應式設計 這個 Web 設計方式很熱門,而要做到這個設計,必須要先認識CSS3 Media Queries,這個可以讓你根據裝置或瀏覽器的長寬不同,而可以有不同的CSS呈現,比方,當夠寬的時候,會呈現三個Column(不是真的欄,是排版的欄)。縮小的時候,可能剩下兩個或甚至一個,而原本有橫向的多個選項,也可能被合併成一個按鈕或LIST,點了才會展開,......等等


所以,什麼是響應式設計呢?就是會彈性的根據你裝置的尺寸不同,呈現不同的外觀,相同的內容,並讓使用者在最適當的、最少需要用手指放大滑動的一種設計概念。

2013年10月18日 星期五

網頁上要透過JS取得物件的left或top,請先讓他出現在畫面上

如果該物件(比方div、img、h4)的狀態是被hide起來,並沒有顯示在畫面上
那麼透過JQuery去取得該物件的位置,比方$(this).position().left將會得到0
你一定要先讓物件show()在畫面上,才能去取得或設定他的位置。

2013年8月26日 星期一

如何讓一個DIV包含另外一個DIV ------ 如何控制網頁元素(Tag element)讓元素從原本的位置(指的是親子位置)變更到其他位置

我在設計網頁的時候,經常會需要用一個Design的DIV來試著排版,但這內容可能在一開始得隱藏,並且之後是在按下按鈕之後才出現在PAGE的主要DIV當中,所以得用JS來動態的在按鈕事件中將物件元素搬移或加入到另外一個DIV中。

原本以為會用到的是 JQuery 的 add(),但是跟想像的有所差異

add()是用來把指定的元素加入自己所在的集合,然後一起去做什麼事情。比方說
這個例子,他是把所有的DIV加上邊框,之後包含著<P>元素來做把背景變成黃色。然而,<P>元素本身並不會變更其親子關係,也就是<P>元素如果在其他DIV中,這個關係不會變。




應該要用 JQuery 的 append(), prepend(), after(), before()來做,才是真正的把元素加到某個元素中。差異說明(請先下載範例):




畫面被分割成上、中、下:Div_Header、Div_Content、Div_Footer三個區塊,每個區塊各自放了一些方塊,而「我會被搬走」這個方塊則是在按下上方的按鈕之後,會被移動,可從上方的藍色框線看出Div_Header的範圍,進而判斷出是否DivAdd01在Div_Header之中。

1.比方我要把DivAdd01這個ID的DIV放到Div_Header中,則該使用append(),跟prepend(),兩個函式,會把DivAdd01加到Div_Header中,並決定放置在最後或最前面的位置。

2.另外,after(), before()則是會把DivAdd01加到Div_Header的父親層,讓DivAdd01跟Div_Header處於同一層,然後差異也在於放在之前或之後。

3.按下add按鈕,則會把left連同Top_left,具有這兩個class的元素都會被設定為被景色白色。

2013年8月7日 星期三

版面設計的基礎知識

版面設計的基礎知識:

網頁是用來呈現資訊的,資訊的量通常不小,要讓來看網頁的人能有好的吸收能力才行,要傳達的資訊有視覺元素與文字元素兩大類,將資訊做好分類、群組之後,藉由底下的技巧,達成良好吸收的目的。

1.      讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。
2.      除非精心設計過,否則不建議使用置中對齊,會造成視覺流程障礙,多半使用靠左對齊為佳。
3.      利用字體大小、影像形狀的大反差,來做出對比,做出強調,引導使用者的視覺
4.      相同的呈現理念,就可以反覆的一致的應用在同樣的元素上,讓使用者習慣並很快的吸收變成經驗,看到這種呈現,就知道會是甚麼類型的資訊。
5.      版面大小有兩種設計:
l   一種是固定寬度設計,內容版面的位置不會因為拉大縮小視窗而改變,但是,當使用者的螢幕(解析度)太大或大小或瀏覽器視窗拉大拉小,會導致周圍的空白太多而顯眼,或者是導致橫向捲軸出現,這兩種狀況都可能讓使用者不愉快。
l   另外一種則是動態寬度設計,會隨著螢幕(解析度)或瀏覽器視窗拉大拉小而改變整個版面寬度,但設計上內容元素如果也是要動態寬度高度才比較適合,但,這會限制某些設計的發揮,因為長寬無法固定,比例也無法固定,某些圖文的比例會失控。
6.      首頁的任務:大多數人都知道,首頁是跟其他內容頁面有絕大的不同,他是使用者第一眼見到的頁面,要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的,比方有些網站是以提供大量資訊為目的,就會一次呈現大量的分類資訊,比方Yahoo,而有的是萬分明確的告訴你目的,畫面元素簡單到不行,比方Google,其他比方有企業常用的設計方式,鮮明企業形象的視覺元素,透過導覽列來逐一挑選使用者想看的內容,通常注重在衝擊力的設計。比方ASUSAcer
7.      導覽列的任務:導覽列肩負著引導使用者方向的重要功能,所以在可用性的注重上,會高過外觀的設計。導覽列設計上大至有分四種:
l   圖像化項目分類型:圖像化有比較好的視覺效果,但是一旦日後需要增加項目,則可能造成版型設計困難崩壞。
l   文字連結型:通常會在入口網站、購物網站使用,由於每天或經常性的更新內容,所以文字連結來當導覽項目較為容易修改。
l   收納型:就是列出大項目,滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多,變動性不高的網頁,很適合這種作法,因為設計耗時。
l   麵包屑分層指引型:這個算是一種輔助的類型,在項目有多層之下,麵包屑指的是網頁上會有地方列出目前所在位置,通常用這種方式來表示:「首頁>產品>主機板」。

8.      版面配置並沒有一定制式的規定,但是,通常有一些常用的型,從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型,通常越自由,就越考驗著設計師的功力就是了。

2013年6月13日 星期四

讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置,不隨著捲軸而移動

如何讓畫面中某個區塊或圖形固定在整個瀏覽器視窗的某個位置,不隨著捲軸而移動?

這個有幾種作法,其中一種,最簡單的,就是利用CSS的Potision屬性,有一個設定值為fixed,這樣,設定的TOP跟LEFT就會讓那個物件固定在該位置,不會因為捲軸捲動或放大縮小,聽起來一切都很完美,只有一點小瑕疵,就是當使用瀏覽器的放大縮小的時候,這個圖形或區塊的大小不會變,但是,這物件裡頭的物件(比方Label)或文字則會跟著放大,這樣,我現在的老闆不能接受,因為他會放大到400%倍,然後說內容都亂了(大囧)


沒辦法,只好用另外一種方法,就是自己寫Script來控制,這個也不難,就是把該物件,比方DIV,設定Potision為absolute,然後取得瀏覽視窗高跟寬,以視窗的高來減去物件高度加上ScrollY以及用視窗的寬減去物件寬度加上ScrollX(備註一)。把上述的這個計算公式寫在Resize()跟Window.Scroll()事件中,隨時把位置固定。




備註一:由於各家瀏覽器不同,所以取得視窗高度、寬度的方式有所不同。取得捲軸位置也有所不同。



//取得瀏覽器視窗高度
function getBrowserHeight() 
{
    if ($.browser.msie) 
{
        return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    } 
else 
{
        return self.innerHeight;
    }
}




//取得瀏覽器捲軸位置X
function getBrowserScrollX() 
{
    if ($.browser.msie) 
{
        return document.body.parentNode.scrollLeft;
    } 
else 
{
        return window.scrollX;
    }
}

2013年4月2日 星期二

top跟margin-top,left跟margin-left,這些位置控制碼的不同之處

首先:

如果你設定的position是absolute
那麼元件就會脫離排列流「layout flow」
那麼,上述就沒有差別。

如果你設定的position是relative
那麼上述兩種作法就會有不同的效果

設定top, left.....就會讓物件從原本該出現的位置偏移
但是其他的(relative)物件不受到影響還是會在原本的位置

但設定了margin-top, margin-left的話,會影響到排列流「layout flow」,會讓後續所有的(relative)物件跟著偏移。

2013年3月29日 星期五

HTML如何控制文字的換行、斷行後不顯示等等

基本上文字容器我慣用的是<label>
這個label的css控制碼當中,如果你不設定寬、高或任何其他控制碼,
那就是有多少文字,他就秀多少文字直到超過父親容器的寬度就換行。


如果你設定了寬度,那麼超過寬度的部分就會換行,一直換行到所有文字都呈現完畢為止。


如果你再設定了高度,那麼超過寬度換行下來,超過高度之後,還是都有顯示,並不會截斷。


所以我們知道單純的高度設定,是控制不了文字的。


我們先把高度去掉,我們只設定寬度,然後加上一個white-space: nowrap;這樣會怎樣呢?你會看到畫面上只顯示一行文字,而且一直往右,超過父親容器(比方body)的話,父親會出現捲軸(除非父親有設定不要捲軸)。


接著,我們再加上overflow:hidden;你會發現,超過寬度的部分,被截斷了,終於不會把所有文字都呈現了。


再來,我們再加上text-overflow:ellipsis;之後,會發現,被截斷的文字,顯示方式是在最後會出現「 ... 」三個逗號當結尾,可以讓使用者知道這文字沒有全部顯示,這應該是比較適當、常用的一種用法。
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

最後我在跟各位分享一種組合,但是,我個人覺得不好看


設定寬度、設定高度、設定overflow:hidden;這樣就可以讓文字鎖定在範圍內,但是,此時text-overflow:ellipsis;無法作用,就會讓使用者看到被截斷的文字,不是很好看。

2013年3月23日 星期六

AJAX簡單說

介紹一下最簡單的AJAX模式,看前端如何跟後端溝通,然後讓前端只更新部分畫面,而不會重刷(Reflash),作法很簡單,請先下載範例程式。從client.html中可以看到裡面很簡單,有個按鈕,會觸發JS的function,去做AJAX,而那個JS的function可以從client.js當中看出來,他有一個JQuery提供的,ajax特定格式跟語法。知道了之後,就非常簡單。

利用JQuery提供的,ajax()函式,寫好url : ,告訴程式要呼叫後端哪個PHP,error : 當Ajax失敗,則執行這個函式,看要怎麼顯示給使用者都可以。success : 則是當數值傳回來時要怎麼運作,比方這裡是把#msg那個DIV所包含的子元件替換成PHP回傳的數值:Hello Ajax字串。這樣就不會整頁重刷,而只是更新某些元件,也就即時的更新整個頁面的某一小塊罷了。

還能透過JQuery所提供的 fade in 跟 fade out特效,來達成更完美的更新。

2013年2月19日 星期二

Imgae這個TAG在IE8之前版本會有藍色框框的問題

好比底下的HTML

<a href="http://www.google.com/">
    <img src="/img/ball.png">
</a>


在IE8之前的版本(之後不確定)會因為圖片是可點的連結,所以會被藍色框框包起來。在Crome跟FireFox則不會。
為了避免藍色框框出現,可以這麼做
要在Style中(可能在CSS檔或同一檔案中)設定:


img
{
    border:hidden;
}

2013年2月6日 星期三

Html中,元件位置的控制,Position屬性

位置的控制,Position屬性有四個設定值,整理如下表:


position參數
absolute
relative
static(預設值)
fixed
中文意義
絕對位置
相對位置
靜態位置
固定位置
位置參考基準
父元素內容區邊界
在顯示流中相對其他元件的位置
不變
螢幕視窗最大可視範圍邊界(備註)
移動參考基準
文件
文件
文件
螢幕視窗最大可視範圍
可改變顯示位置
可調整大小
displayblock:可displayinline:否
displayblock:可displayinline:否
從顯示流中去除



一、什麼是fixed ? 最簡單的理解方式,就是很多大陸網站,會有廣告,會跟著你畫面,無論你滑鼠怎麼上下滾,廣告永遠出現在那個位置,那就是fixed的最直接示範。


二、什麼是跟absolute?跟fixed差不多,在畫面上元件都放在固定的位置,但會跟著捲軸的捲動,而跟著上下跑,這就是所謂的absolute。但是,你所設定的位置(left, top是根據你的父親容器來決定,不是螢幕範圍,而且,這個父親還必須具備「位置參數有設定為absolute或relative,如果父親容器沒有設定absolute或relative那就再看上一層父親元件,若沒有這種父親容器,則位置參考就會依據螢幕範圍。)


三、什麼是static?原本瀏覽器預設的就是static,就是按照原本的顯示流來排版,完全不能改變位置(下CSS指令無效)。


四、什麼是relate?比static略有彈性,就是在原本的顯示流上,然後作位置的調整,比方原本的位置流應該要讓元件B放在元件A下方位置,比方在x=20px, y=300px。而指定了left:30px, top:100px的話,就會讓位置出現在x=50px, y=400px了。



備註:


通常用fixed都會指定想放置的位置才對,但是如果你對某個元件沒有指定位置,他會依照顯示流中相對其他元件的位置來放置,但是,畫面捲動時又會固定住位置,不會隨著捲動,然後偶而又會被別的元件蓋住,行為難以理解。



顯示流說明參考:
http://my-web-design.blogspot.tw/2007/10/css-divposition.html



從10種位置範例設定來瞭解:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

2013年1月24日 星期四

Input元件的Width, Size, MaxLength, InputTyoe


文字輸入框在HTML中算是很常用的元件
這裡介紹一些簡單的屬性


<input maxlength="12" size ="12" type="password" value=""/>

其中的type,可以設定為text,可以設定為password,更可以設定為button,submit ........
今天針對text跟password來說明一下,也就是功能跟顯示上為文字輸入框

能輸入幾個文字,由maxlength來決定,而寬度,可以由size來決定,會根據font-size加上這裡的size屬性,決定出寬度,當然,你也可以不用這樣設定,而是在CSS當中直接設定width。

另外,當你設定為password來讓使用者輸入密碼的時候,預設會用「‧」來當成遮蔽字元,但是這個字元會根據不同的字型,在不同的瀏覽器可能會有大小差很多的情況,比方,用微軟粗黑體,那在Firefox底下看到的這個小圓點會變成大圓點。字型改為Arial則不會有這種情形了。

2012年11月5日 星期一

用Javascript寫Modal Dialog並拖動對話框簡易教學


延續上個例子用Javascript寫Modal Dialog簡易教學
加入底下紅色的程式碼(先不要加上深紅色程式片段),就可以做到移動視窗,簡單的邏輯是:

  1. 在對話框攔截 Mouse Down 事件,記錄當時對話框的位置,與滑鼠位置,與標記「滑鼠已按下」
  2. 在對話框攔截 Mouse Move 事件,根據「滑鼠是否按下」來決定是否移動對話框,移動方式為根據 ( [此時滑鼠位置] - [Mouse Down中的滑鼠位置] + [對話框在Mouse Down中的位置] )來計算出對話框目前應該要在的位置,並且移動之,(透過Java Script
  3. 在對話框攔截 Mouse Up 事件,標記「滑鼠已經放開」

這邏輯很簡單,但你會發現一個瑕疵,就是當你滑鼠移動很快,會讓畫面重繪跟不上,你的滑鼠會超出對話框,然後Mouse事件就不會被處理,所以視窗就不再被移動了。

怎麼解決?加上底下深紅色的程式片段,讓佈滿整個頁面的遮罩層也處理Mouse Move跟Mouse Up,就可以解決了。我不知道這個作法是否完美、正規。如果有人知道更好的、更正確的作法,麻煩告訴我喔,謝謝。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<!-- Script 區段 -->
<script language='JavaScript' type='text/JavaScript'>

$(document).ready(function() 
{
var DivSourceX = 0;
var DivSourceY = 0;
var DivEnvDwX = 0;
var DivEnvDwY = 0;
var DivEnvMvX = 0;
var DivEnvMvY = 0;
var DivMouseFlag = false;    // 用來判斷是否處於滑鼠按著的狀態

// 按下「X」圖隱藏遮罩層
$(".closeDialog").click(function() 
{
ShowModalDialog( false );
});

// 按鈕後顯示遮罩層
$(".btnOpenModal").click(function()
{
ShowModalDialog( true );
});

// 遮罩層控制
function ShowModalDialog( YesOrNo )
{
if ( true == YesOrNo )
{
$(".DivOverlapMask").css( "visibility", "visible" );
$(".DivDialog").css( "visibility", "visible" );
$(".closeDialog").css( "visibility", "visible" );
}
else
{
$(".DivOverlapMask").css( "visibility", "hidden" );
$(".DivDialog").css( "visibility", "hidden" );
$(".closeDialog").css( "visibility", "hidden" );
}
}

// DivDialog 為對話框主體層,需要攔截 Mouse的 Up, Down, Move
$(".DivDialog").mousedown(function(event)
{
DivMouseDown( event );
});

$(".DivDialog").mouseup(function()
{
DivMouseUp( );
});

$(".DivDialog").mousemove(function(event)
{
DivMouseMove( event );
});

// 需要加上遮罩層攔截 Mouse Up 與 Move 才能在「滑鼠意外滑出對話框時,還能繼續移動對話框」
$(".DivOverlapMask").mouseup(function()
{
DivMouseUp( );
});

$(".DivOverlapMask").mousemove(function(event)
{
DivMouseMove( event );
});

// Mouse Down 的時候,紀錄當時視窗的原始位置,滑鼠當時的位置
function DivMouseDown(EvtDw)
{
DivSourceX = $(".DivDialog").position().left;
DivSourceY = $(".DivDialog").position().top;

if ( !EvtDw )
{
EvtDw = window.event;
}

if ( EvtDw.pageX || EvtDw.pageY )
{
DivEnvDwX = EvtDw.pageX;
DivEnvDwY = EvtDw.pageY;
}
else if ( EvtDw.clientX || EvtDw.clientY )
{
DivEnvDwX = EvtDw.clientX;
DivEnvDwY = EvtDw.clientY;
}
else if ( EvtDw.x || EvtDw.y )
{
DivEnvDwX = EvtDw.x;
DivEnvDwY = EvtDw.y;
}

DivMouseFlag = true;
}

function DivMouseUp()
{
DivMouseFlag = false;
}

// Mouse Move 的時候,根據滑鼠的目前位置,原始位置,與物件原始位置,計算,然後將對話框移動到應該去的位置
function DivMouseMove(EvtMv)
{
if ( DivMouseFlag )
{
if ( !EvtMv )
{
EvtMv = window.event;
}

if ( EvtMv.pageX || EvtMv.pageY )
{
DivEnvMvX = EvtMv.pageX;
DivEnvMvY = EvtMv.pageY;
}
else if ( EvtMv.clientX || EvtMv.clientY )
{
DivEnvMvX = EvtMv.clientX;
DivEnvMvY = EvtMv.clientY;
}
else if ( EvtMv.x || EvtMv.y )
{
DivEnvMvX = EvtMv.x;
DivEnvMvY = EvtMv.y;
}

NewDivX = DivSourceX + ( DivEnvMvX - DivEnvDwX );
NewDivY = DivSourceY + ( DivEnvMvY - DivEnvDwY );

$(".DivDialog").css(
{
top: NewDivY + "px",
left: NewDivX + "px"
});

}
}
})
</script>


<!-- CSS 區段 -->  
<style type="text/css">

/* 只是背景 */
.DivGround
{
position: absolute;
width: 400px;
height: 300px;
top: 30px;
left: 30px;
border: solid;
background-color: #66ccff;
text-align:center;
}

/* 遮罩,將整個瀏覽器佈滿,讓原本背景層都無法點選 */
.DivOverlapMask
{
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
margin:0;
padding:0;
background:gray;
opacity:0.95;
visibility:hidden;
}

/* Modal Dialog 層 */
.DivDialog
{
position:absolute;
width:200px;
height:100px;
margin:0;
padding:0;
left:100px;
top:100px;
    background-color: #eeaaaa;
border-radius: 10px;
visibility:hidden;
}


/*「X」按鈕 */
.closeDialog
{
position:absolute;
width:32px;
height:32px;
right:8px;
top:8px;
cursor:pointer;
visibility:hidden;
}
</style>


<title>無標題文件</title>
</head>



<body>
    <!-- Modal Dialog 的原理就是在背景層(可以很多層)之上,蓋上一層遮罩,最後給一個DIV當成對
    話框 -->
    
<div class= "DivGround">
        <button class = "btnOpenModal" > 開 啟 </button> 
        <div class = "DivOverlapMask" >
            <div class = "DivDialog" >       
                <img class = "closeDialog" src="img/close-button.png" ></img>            </div>
        </div>
    </div>
</body>
</html>