Kaye

搜尋此網誌

照片網站常用的Lightbox

日期： 3月 27, 2011

取得連結
Facebook
X
Pinterest
以電子郵件傳送
其他應用程式

leandrovieira.com
http://leandrovieira.com/projects/jquery/lightbox/

CSS JavaScript

取得連結
Facebook
X
Pinterest
以電子郵件傳送
其他應用程式

留言

張貼留言

使用Adobe Illustrator設計網站時的檔案設定

常遇到學生或客戶問我用什麼軟體設計網頁。基本上，都是用 Adobe 公司出的軟體設計的。我習慣使用 Photoshop 修圖、合成、排版、切圖，對阿，排版切圖都直接用 Photoshop 沒錯。用 Dreamweaver 編寫 HTML & CSS ，對，是編寫，因為用 Dreamweaver 中提供的功能是不夠的，也不見得好用。Illustrator 只是用來畫些向量小圖案用的，幾乎不太用來做網站。雖然我自己是這樣使用這些軟體的，但不管是 Photoshop 還是 Illustrator 其實都是可以設計網頁的，檔案的設定方式也是差不多的，參考下面的圖例吧~這樣開出來的檔案，檢視比例為 100% 時就會跟真實網頁一樣大，拿去跟瀏覽器中的網頁比較一下，應該就會知道文字和圖片該設多大了。習慣做平面設計的朋友們有沒有放輕鬆了一點？解析度 72 顏色模式 RGB 單位是像素 pixel or px 寬高自己設定下面的圖檔是在 Illustrator CS6 做網頁設計的開新檔案設定請先按 Advanced (進階) 展開面版設定RGB 設定螢幕72ppi 設定單位為像素設定寬高下面這張圖是用 Photoshop 開新檔案做網頁的設定

Bulma: 基於 Flexbox 製作成的新一代的 CSS 框架

很久沒有發文了，來介紹大家一個 CSS Framework 選擇 https://bulma.io/ Bulma 是一個開放原始碼的 CSS Framework 框架，使用 CSS3 Flexbox 語法製作而成，沒有內建 javascript 組建，是個純粹專注在 CSS 上的框架，輕量、易學、內建多種常見的 UI 和版面結構用的 helper 其實 Bulma 的 Github 顯示在 2016年就已經發佈了，或許是開發初期轉為成熟的時間，也可能因為近幾年前端設計的領域已經發展成有多款 javascript 框架可選擇，所以像 Bulma 這種純 CSS 框架用來搭配 Vue.js 或 React 都可以輕鬆控制 UI 上的互動，目前已經有滿多英文教學，可能是 Bootstrap, Zurb Foundation 之外的另一個製作網站或介面的好選擇 Bulma 官網上有一個跟 Bootstrip 比較表，大家可以參考一下 https://bulma.io/alternative-to-bootstrap/

W3Schools(中文)的HTML和CSS參考手冊

如果你需要HTML和CSS的語法字典，網路上就有了還有範例和線上測試程式 HTML 4.01 / XHTML 1.0 参考手册 http://www.w3school.com.cn/tags/index.asp CSS 参考手册 http://www.w3school.com.cn/css/css_reference.asp

技術提供：Blogger

Copyright Kaye