一些平鋪直敘技術相關文: 網頁

顯示具有網頁標籤的文章。顯示所有文章

2012年6月20日星期三

CSS Sprites圖片整合，加速網頁載入速度

今天在網路上看一些如何讓網頁加速的一些法則
突然想到前陣子在看一些關於jquery Mobile的書，提到了這個部分
說到CSS Sprites ，或許有些CSS排版的工具書有用到類似的概念，
只是我們用過了，卻不知道他是甚麼，
說實在當初知道這種圖片整合的概念的確有讓我驚艷了一下xd
心裡常會OS說，埃，早知道就這樣弄了

到底什麼是CSS Sprites呢?

根據wiki的解釋是說:

(透過google翻譯簡單的說是...)
為了減少瀏覽器對http請求的數量，一些網頁設計師結合了眾多的小圖片或圖標進入一個較大的圖像稱為一個sprite表或title set。[21] CSS被用來選擇複合圖像顯示部分在頁面的不同點。
如果一個頁面有10個1 KB的圖像，它們可以組合成一個10 KB的圖像，下載一個HTTP請求，然後用CSS定位，減少HTTP請求的數量，可以使網頁加載更快。

蛤 ? 所以呢，甚麼意思?
是的，光看解釋好像有那麼一丁點的不是很了解，我舉個例子好了，比方說我前陣子在看的jquery mobile的書(我看書都不實作的，我只是看他怎麼做...)，我們都知道手機網頁的介面有好多種icon，比方說:

像這張圖呢，是從jquery mobile下載下來的zip檔的demo，他的demo很完整，就是一個完整的index.html檔，好~這個不重要，我們在使用手機頁面的時候，像照片裡面被我框起來的部分，都是屬於icon，由於手機會用到的icon大小都差不多，因此在研究jquery mobile時，你會發現會用到icon的圖片其實都是來自同一張，重點取決於它的定位點，

這時候就可以看一下網站跟目錄的images的資料夾:

這時候我們會就發現，真的所有的icon都是同一張圖，
檔案還有分black跟white
比如說 icons-18 -blcak.png這個檔案來說

這張圖包含18個icon，
因此在網頁上我們只需要匯入這張圖片，利用css去調整他的水平位置就可以了。

舉個寫法的例子:
比方說現在有張圖叫做nav.png
他是一張選單的圖案，把四個選單的圖片整合成同一張圖
因此在 background 的設定上
除了指定背景圖片都是同一張nav.png之外，後面還必須去指定他的位子
意思就是這樣。

#navigation li#home      {
  background: url(../images/nav.png) no-repeat 0 0;
}
#navigation li#about    {
  background: url(../images/nav.png) no-repeat -236px -43px;
}
#navigation li#works  {
  background: url(../images/nav.png) no-repeat 0 -86px;
}
#navigation li#contact {
  background: url(../images/nav.png) no-repeat 0 -129px;
}

結論:
CSS sprites以背景定位的方式來顯示
可以減少瀏覽器下載圖片的次數
大部分的瀏覽器可以支援。

缺點 :
製作費時，定位必須非常精準。

延伸連結 :
CSS sprites產生器 http://csssprites.com/

會員管理畫面設計(前台)

其實我原本只是想練習一下php工具書的範例而已
這個範例很單純真的就只是做會員管理的模組
想說要自己弄個好看的畫面再開始做這個模組，順便當作一個經驗，因為書本是用pear的auth去做會員管理，這個我超有興趣的想說要好好地做出來。
結果一用起photoshop就high了xdd
花了些許的時間只畫了前台的部分，看來這個練習可能會花蠻久的時間
好吧....希望我順利把它做完..

這是首頁

忘記密碼頁面

註冊會員

註冊中

帳號已被註冊

註冊成功

登入成功

登入失敗

2012年6月12日星期二

fancybox如何使用

fancybox如何使用
首先請先到官網下載fancybox的壓縮檔
http://fancybox.net/
下載rar壓縮檔到你的網站目錄底下，
比方說我的網站叫做myweb，而這個壓縮檔就要放在myweb裡面

然後呢，將他解壓縮，只留下文件檔就好

接著打開這個jquery.fancybox-1.3.4資料夾 :

可以看到裡面有很多檔案
index.html 就是示範檔，點開後可以看到很多範例

可以看到總共有12張小圖，然後還有下面的範例，我們只需要留一種範例就可以知道其他的原理了，首先先以notepad++開啟index.html編輯這個檔案，我們刪掉<body>與</body>之間其他語法，只留下

<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>

另外<script type="javascript">與</script>之間只留下

<script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
</script>

修改完後的html檔如:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
    </script>
</head>
<body>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</body>
</html>

修改完後按下存檔在瀏覽一次，這時候只會剩一張圖片跟一種特效，

所以，一張圖片之所以可以套用的facnybox的原因有很2種:

第一，在<head>標籤裡要嵌入fancybox的css檔案與javascript檔案
這幾個是必遷入的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

第一個是jquery的套件
第二個是mouseweel效果的javascript套件
第三個是這個fancybox的效果套件
第四個是fancybox的css檔

第二，要套用效果的圖片要有<a id="一個名稱">
如這張圖是 <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
他的id是example4，那麼相對應的<script></script>標籤裡面也一定要有jquery去選取這個$example4，然後設定他的效果。
像這個範例中就是example4

$(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });

至於需要的甚麼樣的效果，或者是跳出來的長寬多少想要自己設定，網站上或是原本其他的example都多多少少可以看出他的設定方式，可以看他的api設定方式 http://fancybox.net/api

2012年6月7日星期四

小 winwin 飲料店之畫面設計

今天晚上原本要來弄一個小練習，所以下午就很興奮地，畫了一個簡陋版型，
原本只打算做"我要訂飲料"的頁面部分，後來晚上去參加送舊舞會就... 沒把他弄完了
所以只能有機會再來弄了...

首頁畫面:
主要分為四個超連結
分別是菜單(飲料的list)，然後我要訂飲料就是這次練習的表單主要的功能，在來是訂單查詢，在訂飲料的表單中會讓使用者輸入基本資料，其中姓名與電話為登入的主要資訊，再來是QnA

這個是訂單的畫面，上方為使用者輸入基本資訊，下方為訂購表單，
訂購表單分別為品名數量甜度與冰塊，品名由資料庫取出飲料的名稱，作為下拉選單。
接著送出後到下一頁。

這一頁為訂購成功後的畫面，如果可以的話比較喜歡以jquery的套件做彈跳式的畫面出現，
個人比較喜歡這種質感xdd，所以才設計這樣的DEMO畫面。

2012年4月28日星期六

套用/更換blogger版面

一直以來我都很想換掉本來內建的版面

其實也不是不好，只是看得有點膩了，而且常有種說不出的感覺所以今天下午就研究了一下。

上網google找到了一個提供blogger範本的網站 http://btemplates.com/

這個網站蠻不錯的，可以依照欄位的數量去篩選.風格篩選.色系篩選

選定喜歡的先下載下來，一個網站分別是一個rar檔

當rar檔打開解壓後會有該網站名的資料夾跟MACOSX資料夾 (有的範本沒有)

如果是windows系統的就不用看MACOSX這個資料夾了

而資料夾名為網站名的資料夾打開後有很多檔案，只需要使用附檔名是.xml檔的就可以了

另外也會有教你怎麼設定的html檔，也可以參考

比較困難的應該是怎麼套用吧!?(對我來說xd)

如果不會套用可以先看網站的教學 :

http://btemplates.com/faqs/#questionhow-to-install-a-blogger-template

這個教學蠻簡明好懂。

比方說你必須先在範本設定按下右上角的還原/備份

這裡的還原與備份並不是只有還原跟備份兩種功能而已..

再來在上載剛剛所下載的.xml檔案，上傳成功版換就換掉了。

但是，該範本所需要設定的相關超連結，必須自己開啟xml修改，比方說email的超連結

或者是你的facebook連結，這些都是必須在xml就先設定好(notepad++ or 筆記本 or dreamweaver等等)再上傳的，

屬於這方面的設定，無法利用blogger現有的介面去調整。

(若有需要可以先備份原本的xml檔，以防萬一~)

blogger這個功能倒是挺上手又安全的。

2012年3月3日星期六

jQuery練習-demo-isotope同位素網站

isotope這個網站做的東西我覺得很有趣
isotope是元素表吧?!
總之我覺得這個jquery還蠻不錯的，所以就來demo一下
好久沒有這麼熱血一整天弄個東西出來
繼上次以來已經好幾的月了

我先講一下isotope這個套件
其實我最喜歡的就是他這個過濾的功能用元素表來表示過濾的功能真貼切
這樣的過濾功能能做的就是分類顯示甚麼東西真的是很實用
isotope英文版的網站在此: http://isotope.metafizzy.co/index.html

isotope網站http://isotope.metafizzy.co/index.html

ps 雖然網站提供下載使用，並不提供商業用途。
後來我用這個範例提供的basic.html去改變我要的樣子
用班上的人員分組來做過濾的功能
最後在用fancybox的套件來做個人單頁點案後的資料顯示
真的是挺有趣的呵呵xd
這訣竅就是慢慢用GOOGLE翻譯跟測測什麼id或class影響了什麼
以各種分類來說
每個人員都是一個<div class="elmenent + 分類名稱">
若以木竹組來說則為 <div class="elmenent wood">
wood必須事先在css中定義。

練習結果: http://yiying2.ueuo.com/isotope_practice/demos/basic.html
如果無法正確顯示請使用較新版的瀏覽器。

http://yiying2.ueuo.com/isotope_practice/demos/basic.html練習結果

2012年1月7日星期六

mobile_web練習二

http://yiyingwu.zxq.net/p1_mobile/index.html

http://yiyingwu.zxq.net/p1_mobile/index.html
(練習網址，請將瀏覽器縮成約略手機螢幕的比例，如上圖xdd )

昨天看到一個不錯的範本就co下來解析解析一下
跟上一次練習的mobile web功能不太一樣，這個範本多了怎麼放google MAP，而且css也好理解很多... 謝天謝地，終於比較懂了點。上次在網路上看到範本太驚人的深奧了。

原來google的地理位置在url連結裡有，害我點了好久都找不到，像這樣
http://maps.google.com/maps?q=%E5%9C%8B%E7%AB%8B%E9%AB%98%E9%9B%84%E5%A4%A7%E5%AD%B8&hl=zh-TW&ie=UTF8&ll=22.731461,120.281925&spn=0.051377,0.066175&sll=37.0625,-95.677068&sspn=44.928295,67.763672&vpsrc=6&hq=%E5%9C%8B%E7%AB%8B%E9%AB%98%E9%9B%84%E5%A4%A7%E5%AD%B8&radius=15000&t=m&z=14&iwloc=B
原來連結已經透露地理位置了。

不過有些功能還是很不能理解，可能真的要有智慧型手機才能真的知道mobile web需要功能是什麼吧。寒假再來好好研究。

2011年12月24日星期六

做網站企劃書的好工具

發現了一個很棒的好網站 http://mockflow.com/

不管是做網站企劃書.版面規劃都很不錯，請先註冊，登入後就可以開始選擇版型
一般的網頁甚至iphone. Android或是facebook app .Mobile Web都可以設計，元件已經都內建好了
不過內文區，似乎是不能打中文的~
他還有HTML5 FORMAT的功能。
以上圖片擷取自: http://mockflow.com/

更多連結:
網站企劃--企劃書的前置作業
Wireframes: Conceito & Ferramentas

訂閱：文章 (Atom)

一些平鋪直敘技術相關文

2012年6月20日星期三

CSS Sprites圖片整合，加速網頁載入速度

會員管理畫面設計(前台)

2012年6月12日星期二

fancybox如何使用

2012年6月7日星期四

小 winwin 飲料店之畫面設計

2012年4月28日星期六

套用/更換blogger版面

http://btemplates.com/faqs/#questionhow-to-install-a-blogger-template

2012年3月3日星期六

jQuery練習-demo-isotope同位素網站

2012年1月7日星期六

mobile_web練習二

2011年12月24日星期六

做網站企劃書的好工具

Vue multiselect set autofocus and tinymce set autofocus

關於我自己

2012年6月20日 星期三

2012年6月12日 星期二

2012年6月7日 星期四

2012年4月28日 星期六

2012年3月3日 星期六

2012年1月7日 星期六

2011年12月24日 星期六

2012年6月20日星期三

2012年6月12日星期二

2012年6月7日星期四

2012年4月28日星期六

2012年3月3日星期六

2012年1月7日星期六

2011年12月24日星期六