我在設計網頁的時候，經常會需要用一個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月9日 星期五
顏色的基礎知識
顏色的基礎知識
常用Photoshop的人應該都對於一些色彩相關用詞不陌生才是，顏色有三個屬性
色相：色彩的外相，比方紅、藍、黃、綠這樣的表現方式。
明度：就是顏色的亮度。
彩度：顏色的鮮豔度，彩度越高越鮮豔。
而色調，就是以明度跟彩度的組合來表示，通常只要掌握度色調的統一，即便用了多色相，也不至於讓顏色混亂不協調。只不過，高彩度的色調使用上要特別謹慎，顏色太重且太多的話，容易失焦。
就像黑白對比強烈一般，利用互補色，經常可以達到很好的視覺效果，而互補色在色表上以16進位來呈現時，恰巧可以發現實用的特性：比方 #00ffff 跟 #ff0000就是視覺對比強烈的互補色，#0080ff跟 #ff8f00也是一對互補色。
在配色上，通常除非是天才，不然，通常會遵照一些範本或規範。通常有主要的基準色（目的鮮明，比方跟水有關的網站，可能會用藍色當基準），以及一些輔助色。
2013年8月7日 星期三
版面設計的基礎知識
版面設計的基礎知識：
網頁是用來呈現資訊的，資訊的量通常不小，要讓來看網頁的人能有好的吸收能力才行，要傳達的資訊有視覺元素與文字元素兩大類，將資訊做好分類、群組之後，藉由底下的技巧，達成良好吸收的目的。
1.
讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。
2.
除非精心設計過，否則不建議使用置中對齊，會造成視覺流程障礙，多半使用靠左對齊為佳。
3.
利用字體大小、影像形狀的大反差，來做出對比，做出強調，引導使用者的視覺
4.
相同的呈現理念，就可以反覆的一致的應用在同樣的元素上，讓使用者習慣並很快的吸收變成經驗，看到這種呈現，就知道會是甚麼類型的資訊。
5.
版面大小有兩種設計：
l
一種是固定寬度設計，內容版面的位置不會因為拉大縮小視窗而改變，但是，當使用者的螢幕（解析度）太大或大小或瀏覽器視窗拉大拉小，會導致周圍的空白太多而顯眼，或者是導致橫向捲軸出現，這兩種狀況都可能讓使用者不愉快。
l
另外一種則是動態寬度設計，會隨著螢幕（解析度）或瀏覽器視窗拉大拉小而改變整個版面寬度，但設計上內容元素如果也是要動態寬度高度才比較適合，但，這會限制某些設計的發揮，因為長寬無法固定，比例也無法固定，某些圖文的比例會失控。
6.
首頁的任務：大多數人都知道，首頁是跟其他內容頁面有絕大的不同，他是使用者第一眼見到的頁面，要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的，比方有些網站是以提供大量資訊為目的，就會一次呈現大量的分類資訊，比方Yahoo，而有的是萬分明確的告訴你目的，畫面元素簡單到不行，比方Google，其他比方有企業常用的設計方式，鮮明企業形象的視覺元素，透過導覽列來逐一挑選使用者想看的內容，通常注重在衝擊力的設計。比方ASUS，Acer。
7.
導覽列的任務：導覽列肩負著引導使用者方向的重要功能，所以在可用性的注重上，會高過外觀的設計。導覽列設計上大至有分四種：
l
圖像化項目分類型：圖像化有比較好的視覺效果，但是一旦日後需要增加項目，則可能造成版型設計困難崩壞。
l
文字連結型：通常會在入口網站、購物網站使用，由於每天或經常性的更新內容，所以文字連結來當導覽項目較為容易修改。
l
收納型：就是列出大項目，滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多，變動性不高的網頁，很適合這種作法，因為設計耗時。
l
麵包屑分層指引型：這個算是一種輔助的類型，在項目有多層之下，麵包屑指的是網頁上會有地方列出目前所在位置，通常用這種方式來表示：「首頁>產品>主機板」。
8.
版面配置並沒有一定制式的規定，但是，通常有一些常用的型，從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型，通常越自由，就越考驗著設計師的功力就是了。
2013年8月6日 星期二
Javascript 處理鍵盤事件，Enter, ESC ......
事件註冊的方式，跟一般 Click 差不多
$('.Input_Group_InputName').keypress( function (event)
{
// 處理
} );
也可以針對某些按鈕才做不同的處理方式
$('.Input_Group_InputName').keypress( function (event)
{
if ( event.which == 13 || event.keyCode == 13 )
{
// 處理
}
} );
幾個比較特別的按鈕
Enter按鈕 的 KeyCode 是13，ESC按鈕是27
ESC 按鈕只能被 KeyUp 抓到，無法在 KeyPress 抓到（限定瀏覽器）
有些瀏覽器沒有 event.keyCode，只有event.which，所以兩個都要寫。
$('.Input_Group_InputName').keypress( function (event)
{
// 處理
} );
也可以針對某些按鈕才做不同的處理方式
$('.Input_Group_InputName').keypress( function (event)
{
if ( event.which == 13 || event.keyCode == 13 )
{
// 處理
}
} );
幾個比較特別的按鈕
Enter按鈕 的 KeyCode 是13，ESC按鈕是27
ESC 按鈕只能被 KeyUp 抓到，無法在 KeyPress 抓到（限定瀏覽器）
有些瀏覽器沒有 event.keyCode，只有event.which，所以兩個都要寫。
訂閱：
文章 (Atom)