目前分類:Web Design (19)
- Jul 27 Wed 2016 11:29
Web Design:pug介紹(jade)
- Jul 24 Sun 2016 05:37
網頁設計:在Laragon中安裝Sass
Laragon真的很好用,它還有內建的命令提示字元,用Laragon也可以輕鬆的安裝CSS預處理器。非常推薦做網頁的人用Laragon搭建環境!
安裝好SASS之後,在Laragon裡怎麼監控檔案呢?只要輕輕鬆鬆輸入下列:
就是這樣,這個命令提示字元就會幫你把你在scss資料夾中編輯的sass檔案,轉換成相同檔案名稱的css檔案,放到css的資料夾中囉。
《指令小解說》
- May 16 Mon 2016 12:09
Web Design:Laravel Blade學習筆記
哈哈哈
朋友的說明:@yield就像一個區塊,用來裝@section
- May 05 Thu 2016 12:08
Web Design:PHP迴圈
在打HTML的時候只要輸入此php,就可以讓HTML迴圈輸出。
<? for($a=1;$a<=30;$a++){ ?>
------- HTML 內容 ---------
<? } ?>
- May 03 Tue 2016 14:48
Web Design:PHP CMS相關教學
- Mar 16 Wed 2016 20:36
Web Design:Sass安裝
- Nov 06 Fri 2015 17:35
PHP當中【->】的意思
- Oct 12 Mon 2015 00:48
Web Design:常見CSS錯誤寫法
這篇提供一些常見的錯誤寫法,一方面用來提醒自己用,有時候會犯一些好白痴的錯誤,例如忘記加上單位PX之類的…。
錯誤:
background-image:url('../img/logo.png') center center no-repeat;
正確是:
background: url('../img/logo.png') center center no-repeat;
- Oct 11 Sun 2015 01:10
GA:如何產生追蹤碼
做網頁設計一般都要了解的GA(Google Analytics)其實一開始接觸會覺得很複雜,因為可以按的地方真的太多了,會有迷路的感覺,所以寫了一篇導航文。話說真的是要常常接觸,不然太久沒看應該又忘記了,就像公司的後台一樣,要常常用才知道要怎麼點…最近跟做行銷的朋友聊天,他說他每天都會看一下GA和AW,GA通常也是網路行銷上必學的工具。其實我覺得能光看數據就知道要怎麼找到問題點加以改善的人很勵害…希望大數據時代下我也可以從數據中找到問題。
- Sep 28 Mon 2015 19:15
安裝Bower管理專案的函式庫
Bower是一款可以協助管理專案函式庫的管理器。因為Bower是Node.js的一個模組,所以我們要先到Node.js的官網安裝Node.js。
安裝好了之後,打開【附屬應用程式→命令提示字元】,輸入以下指令就可以知道有沒有安裝成功囉!Node.js安裝過程中預設是也會安裝npm package manager的。
- Sep 05 Sat 2015 08:13
面對IE:IE瀏覽器需要的插件
有時候真的被IE煩到頭快炸開了,這篇分享一些面對IE瀏覽器很好用的補丁(polyfill)
Selectivizr
有用到CSS3 pseudo-classes 和 attribute selectors 語法的話就需要,庭喵也常常用到,不過它是針對IE6-8的,不巧我目前同事剛好用IE8,好衰。
嵌入語法:
- Sep 03 Thu 2015 14:01
Framework:一天學會Bootstrap
這篇介紹一些網路收集下來的資源,其實一天學會不難,很多功能可以先大致了解就好,因為不一定會用到,先挑需要用到的來了解一下,就可以用Bootstrap來設計網站囉!
英文教學影片,基礎教學,聲音好聽,推薦給大家!
- Sep 03 Thu 2015 03:46
如何做出大氣風格的網頁?
很多主管會說希望網頁要大氣,這裡有一篇參考文章,不過每個人心中的大氣說不定不一樣,主管心中的大氣可能也不一樣,參考參考。
- Jun 12 Sun 2011 15:12
Web Design:Free Style
Starbucks
簡單大方的設計,沒有許多網頁的華麗感,可能因為星巴克已經夠出名了?
Nostalgia
黃色除了活力、明亮之外,還有讓人感到「不安」的成份在,這網頁的背景又是張佔滿全景的照片,看起來很有動力,氣氛熱鬧十足。
後面的人好像會走一樣。不過我個人不太喜歡。
地圖資訊和表單傳送資訊我倒還蠻喜歡的!右邊的框框雖然設計得很簡單,卻給人一種可愛的感覺。
Marius Fabre
手工皂的網站,光看就好想要用噢
- Feb 23 Wed 2011 17:21
Web Design:RWD網站建立重點整理
這篇整理一些Responsive Website Design的教學重點,還有一些參考文章
- CSS設定box-sizing:border-box
- CSS設定 img{max-width:100%}避免影像超出父元素寬度
- 在head中必加這段原始碼 <meta name="viewport" content="width=device-width, initial-scale=1">
- 使用media query判定裝置寬度:@media only screen and {}
- 字體都用em、許多寬高也可使用em(相對尺寸單位)
- 使用方法讓影像RWD化,例如data-fullsrc屬性(隨不同寬度變更圖檔)降低使用者讀取圖片負擔
- RWD設計需先從最小寬度著手設計
- 響應式影片可利用CSS定位製作relative容器(padding-bottom: 56.25%)absolute的<iframe>(有詳細寫法)
- 善用公式製作寫CSS容器寬度【target ÷ context = result】
- icon可使用圖示字型來取代
詳細文章解析:
RWD重點總匯文章:
- Feb 03 Thu 2011 22:56
Web Design:Coffee & Chocolate
- Jun 21 Sun 2009 14:03
手機網站撰寫心得
最近做的專案,適合智慧型手機網頁呈現:
http://www.mofang.com.tw/Gameplus/event1022/tos/mobile/index.php
做一個適合手機觀看、桌上型電腦觀看的網站,不轉網址的話,我是直接寫
- Apr 02 Wed 2008 06:32
CSS:小技巧篇
這篇介紹一些CSS小技巧
1、想將背景色調成透明,不影響前面文字的話,設定成這樣即可
background: rgba(0,0,0,0.6);
最後的0.6是透明度,可以任意調整。
- Aug 07 Tue 2007 11:26
HTML <table> 標籤解說