目前分類:Web Design (19)

瀏覽方式: 標題列表 簡短摘要

 

這次嘗試使用pug看看能不能讓做網頁變得更快。之後用得感想之後再來回報

然後它本來的名子叫jade,後來改成叫pug喔!

pug官網

http://jade-lang.com/

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

Laragon真的很好用,它還有內建的命令提示字元,用Laragon也可以輕鬆的安裝CSS預處理器。非常推薦做網頁的人用Laragon搭建環境!

安裝好SASS之後,在Laragon裡怎麼監控檔案呢?只要輕輕鬆鬆輸入下列:

undefined

就是這樣,這個命令提示字元就會幫你把你在scss資料夾中編輯的sass檔案,轉換成相同檔案名稱的css檔案,放到css的資料夾中囉。

《指令小解說》

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

哈哈哈

undefined

朋友的說明:@yield就像一個區塊,用來裝@section


文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

在打HTML的時候只要輸入此php,就可以讓HTML迴圈輸出。

<? for($a=1;$a<=30;$a++){ ?>

------- HTML 內容 ---------

<? } ?>

 

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

undefined

很多網站其實都有一個只有管理員才看得到的後台,這篇來記載一些網路上有的教學和筆記。

要會架一個簡單的後台,大概需要以下的PHP技能:

1. PHP class的使用

 

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

最近忙著寫網頁,想說有什麼方法可以加快前端的速度,就來研究了一下Sass

1.先安裝RubyInstaller

2.開啟命令提示字元,輸入:

gem install sass

3.接著再輸入:

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()



$calss()->method()->xxxx
文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇提供一些常見的錯誤寫法,一方面用來提醒自己用,有時候會犯一些好白痴的錯誤,例如忘記加上單位PX之類的…。

錯誤:

background-image:url('../img/logo.png') center center no-repeat;

正確是:

background: url('../img/logo.png') center center no-repeat;

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()


做網頁設計一般都要了解的GA(Google Analytics)其實一開始接觸會覺得很複雜,因為可以按的地方真的太多了,會有迷路的感覺,所以寫了一篇導航文。話說真的是要常常接觸,不然太久沒看應該又忘記了,就像公司的後台一樣,要常常用才知道要怎麼點…最近跟做行銷的朋友聊天,他說他每天都會看一下GA和AW,GA通常也是網路行銷上必學的工具。其實我覺得能光看數據就知道要怎麼找到問題點加以改善的人很勵害…希望大數據時代下我也可以從數據中找到問題。

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

Bower是一款可以協助管理專案函式庫的管理器。因為Bower是Node.js的一個模組,所以我們要先到Node.js的官網安裝Node.js。

安裝好了之後,打開【附屬應用程式→命令提示字元】,輸入以下指令就可以知道有沒有安裝成功囉!Node.js安裝過程中預設是也會安裝npm package manager的。

node -h

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

有時候真的被IE煩到頭快炸開了,這篇分享一些面對IE瀏覽器很好用的補丁(polyfill)

Selectivizr

有用到CSS3 pseudo-classes 和 attribute selectors 語法的話就需要,庭喵也常常用到,不過它是針對IE6-8的,不巧我目前同事剛好用IE8,好衰。

嵌入語法:

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇介紹一些網路收集下來的資源,其實一天學會不難,很多功能可以先大致了解就好,因為不一定會用到,先挑需要用到的來了解一下,就可以用Bootstrap來設計網站囉! 

 

英文教學影片,基礎教學,聲音好聽,推薦給大家!

 

Bootstrap 3 中文手冊

文章標籤

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

很多主管會說希望網頁要大氣,這裡有一篇參考文章,不過每個人心中的大氣說不定不一樣,主管心中的大氣可能也不一樣,參考參考。 

怎样做出大气的网页作品 设计大气的网页的方法(图文教程)

超大字体排版的40个网页设计欣赏

让一个网站看起来高大上且更有设计感的方法介绍

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

Starbucks




 簡單大方的設計,沒有許多網頁的華麗感,可能因為星巴克已經夠出名了?



 Nostalgia

 


黃色除了活力、明亮之外,還有讓人感到「不安」的成份在,這網頁的背景又是張佔滿全景的照片,看起來很有動力,氣氛熱鬧十足。
 後面的人好像會走一樣。不過我個人不太喜歡。

 
 

  地圖資訊和表單傳送資訊我倒還蠻喜歡的!右邊的框框雖然設計得很簡單,卻給人一種可愛的感覺。

 



Lovely Bride


 
 




 Marius Fabre



手工皂的網站,光看就好想要用噢

 

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇整理一些Responsive Website Design的教學重點,還有一些參考文章

  1. CSS設定box-sizing:border-box
  2. CSS設定 img{max-width:100%}避免影像超出父元素寬度
  3. 在head中必加這段原始碼 <meta name="viewport" content="width=device-width, initial-scale=1">
  4. 使用media query判定裝置寬度:@media only screen and {}
  5. 字體都用em、許多寬高也可使用em(相對尺寸單位)
  6. 使用方法讓影像RWD化,例如data-fullsrc屬性(隨不同寬度變更圖檔)降低使用者讀取圖片負擔
  7. RWD設計需先從最小寬度著手設計
  8. 響應式影片可利用CSS定位製作relative容器(padding-bottom: 56.25%)absolute的<iframe>(有詳細寫法)
  9. 善用公式製作寫CSS容器寬度【target ÷ context = result】
  10. icon可使用圖示字型來取代

詳細文章解析:

RWD重點總匯文章:

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

美麗的網頁俯拾即是,決定來好好收集紀錄它們的寫真!!

Great Lakes Chocolate & Coffee Co.
 

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

最近做的專案,適合智慧型手機網頁呈現:

http://www.mofang.com.tw/Gameplus/event1022/tos/mobile/index.php

 

做一個適合手機觀看、桌上型電腦觀看的網站,不轉網址的話,我是直接寫

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

這篇介紹一些CSS小技巧

 

1、想將背景色調成透明,不影響前面文字的話,設定成這樣即可

background: rgba(0,0,0,0.6);

最後的0.6是透明度,可以任意調整。

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

HTML裡的table相關tag還不少

有時候漏掉一個就會變型得很奇怪…

這張圖是畫給自己看的,在寫的時候稍微畫一下可以有不少幫助。

 

HTML教學

庭喵 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論