Pages

Subscribe:

Ads 468x60px

Labels

2015年6月26日 星期五

Bootstrap 超好用工具 – Start Bootstrap 免費版型&資源網站


初期使用bootstrap的人可能會很苦手不知要怎麼下手版型，Google關鍵字「Bootstrap Theme」其實可以找到許多資源網站，一般免費的Theme 網站大都也是提供基礎的配色跟樣式，但那對初學者來說已經很夠用。目前看過最喜歡也最實用的是 Start Bootstrap 這個網站，不但有基本分類而且也有提供Unstyle的版型，基本Layout都排好了，比如Single Page、Portfolios、Ecommerce….等，且沒有太多花俏的樣式增加修改的難度；另外此網站還蒐集並整理了其他網路上Bootstrap的資源，有官方資源、免費版型樣式、付費版型樣式、範例網站、jQuery外掛…等等，非常詳盡且方便。
主選單上有幾種分類可以選：
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型
startBS_3
Full Websites – 整個網站的雛形都有了
startBS_4
Unstyled Templates – 有各式Layout可以選擇，都是基本沒有添加樣式的版型
startBS_6
One Page Websites – 一頁式類型，除了有幾組有完整的theme以外，其他也有基本unstyle的版型
startBS_7
另外到 Buy Bootstrap Templates也可以看到各種付費版型的列表頁面，這些作品都會直接連結到幾個常見的付費版型網頁
startBS_8
比如Wrap Bootstrap，但其實綜合看下來在這裡出現的付費版型也都幾塊~十幾塊美金而已，說真的不貴，換算台幣也不過兩百多到四百多塊左右，而且有些基本架構或動態都已經很完整，事實上買來使用在專案上也很划算。
startBS_9
另一個前面提過這個網站很棒的地方就是資源蒐集的部份，點選Bootstrap Resources List
startBS_12
左邊分類選單
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具，比如 UI Bootstrap 中優化及改善基本功能；Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具，比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛
startBS_10
除了分享簡介功能以外，也直接提供了連結網址，非常實用，下次再來介紹其他免費資源~
startBS_11
張貼者： hivenson 於 上午11:42 0 意見
標籤： , ,

40 個設計師必備免費資源，超推懶人包！

40 個設計師必備免費資源，超推懶人包！
張貼者： hivenson 於 上午11:38 0 意見

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計
張貼者： hivenson 於 上午11:33 0 意見
標籤： , , ,

2015年6月12日 星期五

[JQUERY] 倒數計時(還有X天X時X分X秒)

資料來源

jQuery 倒數計時, 需要 jQuery.Timers 這個 plugin.
startDate 可以用 server 的時間輸出, 避免 client 的電腦時間不準。


張貼者： hivenson 於 下午2:40 0 意見
標籤：

[jQ]jquery-counter

不知道各位有沒有看過 hTC 在行動裝置上的那個會翻頁的時鐘呢？jquery-counter 雖然目前是一個倒數計時的外掛套件，但作者利用了類似影格的方式來改變圖片，進而產生翻頁的錯覺效果。

套件名稱：jquery-counter
套件網址：N/A
作者網站：http://code.google.com/p/jquery-countdown/
套件網址：N/A
發佈日期：2009-07-10
檔案大小：3.53 KB
檔案下載：jquery.countdown.js

HTML 屬性說明：
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

stepTime(選填)
描述： 圖片切換的移動速度(1000毫秒 = 1秒)；如果是使用作者提供的圖片的話，建議不要變更此值
預設值： 60
 
format(選填)
描述： 時間格式
預設值： "dd:hh:mm:ss"
 
startTime(選填)
描述： 要倒數的時間；這邊填入的時間格式要跟 format 的一樣才行
預設值： "01:12:32:55"
 
digitImages(選填)
描述： 每一秒是包含幾格圖片；如果是使用作者提供的圖片的話，建議不要變更此值
預設值： 6
 
digitWidth(選填)
描述： 數字圖片的寬度(以一小格為主)
預設值： 53
 
digitHeight(選填)
描述： 數字圖片的高度(以一小格為主)
預設值： 77
 
timerEnd(選填)
描述： 當時間到了要執行的動作
預設值： function(){}
 
image(選填)
描述： 數字圖片的來源
預設值： "digits.png"
方法說明：
檢視原始碼 JavaScript
1
2

// 在指定的區塊上進行倒數計時效果
$(selector).countdown(userOptions);
使用範例：
檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<style type="text/css">
 #counter2 {
  margin-top: 50px;
  clear: both;
 }
 .cntSeparator { /* 分隔符號的樣式 */
  font-size: 54px;
  margin: 10px 7px;
  color: #000;
 }
 .desc {
  margin: 7px 3px;
 }
 .desc div {
  float: left;
  font-family: Arial;
  width: 70px;
  margin-right: 65px;
  font-size: 13px;
  font-weight: bold;
  color: #000;
 }
</style>
<script type="text/javascript">
 $(function(){
  // 第一個倒數計時, 圖片來源為 images/digits.png
  // 倒數時間為 1 天 12 小時又 12 分 0 秒
  $('#counter').countdown({
   image: 'images/digits.png',
   startTime: '01:12:12:00'
  });
 
  // 第二個倒數計時, 圖片來源為 images/digits.png
  // 倒數時間為 1 分 30 秒, 格式為 mm分ss秒
  // 時間到了跳出對話方塊
  $('#counter2').countdown({
   image: 'images/digits.png',
   startTime: '01分30秒',
   timerEnd: function(){
    alert('時間終了!');
   },
   format: 'mm分ss秒'
        });
 });
</script>
 
<body>
 <div id="counter"></div>
 <div class="desc">
  <div>日</div>
  <div>時</div>
  <div>分</div>
  <div>秒</div>
 </div>
 
 <div id="counter2"></div>
 <div class="desc">
  <div>分</div>
  <div>秒</div>
 </div>
</body>
範例 1
張貼者： hivenson 於 下午2:37 0 意見
標籤： ,

2015年6月2日 星期二

4個SEO優化不容錯過的設定！

資料來源
有許多方法可以提升網頁自然排名，加強SEO優化。今天Astral Web要從網頁架構的角度來看SEO，和大家介紹4種優化設定，首先我們以在Google搜尋Magento 台灣，看看自然排名結果，詳見下圖。
Google搜尋Magento台灣
接著來到第一名搜尋結果的網頁，檢視該網頁的原始碼。
網頁原始碼
上圖為網頁原始碼截圖，可看到幾個seo優化不容錯過的設定，接下來就讓我們逐一介紹吧！

一、宣告網頁內容的語言

這裡指的是網站的內容是英文、中文，還是日文。
或
常用設定：
zh-Hant：繁體中文
zh-Hans：簡體中文
zh-Hant-TW：台灣地區使用的繁體中文
zh-TW：台灣地區使用的中文

二、宣告網頁使用的編碼語言

big5表示為繁體中文，gb2312為簡體中文，utf8為萬國語言
HTML 4.01 和 HTML5  不同的設定方法：
HTML 4.01: HTML5: 三、網頁標題 title
Magento台灣│Astral Web歐斯瑞公司
出現在搜尋結果的第一行，適當加入關鍵字將有助搜尋排行。
* 避免使用重複的標題

四、網頁描述 meta description

搜尋結果底下的小字內容，如果沒有設定的話，搜尋引擎將直接抓取網站內容。
另外值得一提的是網頁關鍵字(keywords)
很多網頁設計公司都會強調 keywords meta 的設定，但其實Google 並不理會keywords meta的內容，過度的堆疊關鍵字反而會被當成垃圾網站，如果沒有把握的話，建議不要使用。
張貼者： hivenson 於 晚上7:11 0 意見
標籤： ,
訂閱： 文章 (Atom)