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

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

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

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

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

2015年6月12日 星期五

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

資料來源

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


[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

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的內容,過度的堆疊關鍵字反而會被當成垃圾網站,如果沒有把握的話,建議不要使用。