iT邦幫忙

網頁設計相關文章
共有 583 則文章

技術 Google Web Designer

Google出的有趣的玩意兒 官網: https://www.google.com/webdesigner/ Demo影片: 底下是更多Demo影片: htt...

技術 用jquery,extjs 編排公司網頁

我的網站很單純只是提供一些資料庫設計的概念,以前用 html 排網頁總覺得很困難,導入jquery後使用 div 配置概念變得方便多了. 目前用Chrome,F...

鐵人賽 開發技術 DAY 30
作個網站吧! 系列 第 30

技術 作個網站吧!完賽感想

當初偶然看到鐵人賽的資訊,抱著不做就等於什麼也沒做的心情註冊+報名參加,雖然整體文章寫得零零落落(自首orz)但~呼~終於寫完30天!耶比~ 老實說,原本以為自...

鐵人賽 開發技術 DAY 45
30天掌握Sass語法 系列 第 41

達標好文 技術 45天掌握Sass語法-完賽心得

終於結束這45天的奇幻之旅, 真的寫得很盡興,很高興有這個活動讓我有機會整理我腦袋上的東西。 每天花上8~12小時不間斷地錄製教學影片和撰寫文章, 最初的目的是...

鐵人賽 開發技術 DAY 29
作個網站吧! 系列 第 29

技術 作個網站吧!友善的網頁

今天想統整一下對使用者友善的網頁要點... 今天想統整一下對使用者友善的網頁要點,什麼是友善的網頁?我認為在開發時有些要注意: 速度 開啟網頁的速度、圖片讀取的...

鐵人賽 開發技術 DAY 44
30天掌握Sass語法 系列 第 40

技術 Sass開發流程設計 - (14)Susy RWD Grid排版流程(下)

延續上章, 為了讓大家了解Susy Grid的設計流程, 我的程式碼都會以乾淨的色塊來呈現內容, 建議下載github原始檔, 以方便後續學習: https:/...

鐵人賽 開發技術 DAY 43
30天掌握Sass語法 系列 第 39

技術 Sass開發流程設計 - (13)Susy RWD Grid排版流程(上)

前面花了幾章篇幅討論Susy該怎麼用, 這次我們就直接進入實作吧, 首先我先找了個free的template:http://www.html5mania.com...

鐵人賽 開發技術 DAY 28
作個網站吧! 系列 第 28

技術 作個網站吧!檔案控管-SourceTree

SourceTree是Mac上一個免費的檔案控管軟體,界面好看而且也支援Win7以上。 以下記錄一些基本的使用,有誤還請指正,謝謝。 SourceTree是Ma...

鐵人賽 開發技術 DAY 27
作個網站吧! 系列 第 27

技術 作個網站吧!SUSY使用心得

SUSY相較於Bootstrap而言,是一個靈活度較高的Framework,以下記錄一下使用SUSY的心得。 接觸時間不長,內容如有誤還請指正,謝謝。 SUSY...

鐵人賽 開發技術 DAY 42
30天掌握Sass語法 系列 第 38

技術 Sass開發流程設計-(12) Compass Vertical Rhythm & Susy other setting

Compass Vertical Rhythm - 網頁上的字型大小與行距的統一調整 在以往我們在設計網頁時, 通常在設定一些文字排版上的元素設定line-he...

鐵人賽 開發技術 DAY 26
作個網站吧! 系列 第 26

技術 作個網站吧!除蟲幫手們

做網站時除了撰寫的工具以外,幫忙debug的工具也很重要,今日記錄了部分主流瀏覽器的除錯工具,內容如有誤還請指正,謝謝。 做網站時除了撰寫的工具以外,幫忙deb...

鐵人賽 開發技術 DAY 41
30天掌握Sass語法 系列 第 37

技術 Sass開發流程設計 - (11) Prepos 前端利器介紹

如果你希望可以立即寫Sass, 不用去設定繁瑣的安裝流程, 除了fire.app以外, 你也可以選擇使用prepos, 只要下載安裝完就可以直接玩Sass, 這...

鐵人賽 開發技術 DAY 25
作個網站吧! 系列 第 25

技術 作個網站吧!Bootstrap使用心得

在RWD盛行的今日,除了自己手刻Code以外,還有些Framework可以幫助我更快的完成RWD頁面。 今天與明天將記錄其中兩個Framework:Bootst...

鐵人賽 開發技術 DAY 40
30天掌握Sass語法 系列 第 36

技術 Sass開發流程設計 - (10)Susy 版型種類介紹

這一次我想聊的是關於susy所提供的grid種類, 因為他不單單只能設計RWD版型而已, 一些常見的網頁版型設定也都有支援提供, 後面如果有時間的話也會設計一個...

鐵人賽 開發技術 DAY 24
作個網站吧! 系列 第 24

技術 作個網站吧!Web Font(2)-誰說icon不能放大

除了昨天記錄的線上字型以外,現在icon也可以直接利用轉檔功能把自己畫的icon“變成”網路的字型。 不想多費力氣去做icon?網路上也有很多免費現成的可以使用...

鐵人賽 開發技術 DAY 39
30天掌握Sass語法 系列 第 35

技術 Sass開發流程設計 - (9) Off-Canvas layout with Susy

這篇文章竟然花了我7個小時XDD 中間忘了存檔重打外, 重新打一遍又發現到新的觀念, 於是又越拖越晚...冏, 不過終於開始講到我想分享的一些較深入的Sass設...

鐵人賽 開發技術 DAY 23
作個網站吧! 系列 第 23

技術 作個網站吧!Web Font(1)-網頁也可以不一樣

網頁字型已經行之有年,國外大大小小的網站都可以看到不同字體顯示,只要連結檔案就能看到效果,多數文字再也不必依賴圖片製作,不但方便還減少檔案大小,一舉兩得~ 以下...

鐵人賽 開發技術 DAY 38
30天掌握Sass語法 系列 第 34

技術 Sass開發流程設計 - (8) susy grid教學(2)

本日susy重點: 1.利用omega並排元素內容 2.透過isolation來達成Responsive image gallery grid 在以往我們在設...

鐵人賽 開發技術 DAY 22
作個網站吧! 系列 第 22

技術 作個網站吧!Quickly Sass(4)-CSS無痛轉移Sass

既然開始學Sass了,以前的檔案當然也要趁機會轉成Sass,練習兼整理,一舉兩得~ 既然開始學Sass了,以前的檔案當然也要趁機會轉成Sass,練習兼整理,一舉...

鐵人賽 開發技術 DAY 37
30天掌握Sass語法 系列 第 33

達標好文 技術 Sass開發流程設計 - (7) susy grid教學(1)

由於行動裝置的逐步普及, Responsive Web Design(RWD)也逐漸變為市場趨勢, 所以這裡也來聊一下關於RWD的Sass格線系統, 在以前Sa...

鐵人賽 開發技術 DAY 21
作個網站吧! 系列 第 21

技術 作個網站吧!Quickly Sass(3)-神器出動:Sublime text使用心得

撰寫Code的編輯器很多種,小到記事本大到一堆有的沒的都可以用。 而我最近因為開始學著用Sublime text,覺得也很好用~於是推薦一下:D 以下簡略介紹一...

鐵人賽 開發技術 DAY 36
30天掌握Sass語法 系列 第 32

技術 Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾

在開發數個網站後, 網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程, 今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料, 範...

鐵人賽 開發技術 DAY 20
作個網站吧! 系列 第 20

技術 作個網站吧!Quickly Sass(2)-神器出動:Fireapp使用心得

前陣子接觸Fire.app,是個製作網頁原型的協助工具,個人覺得很方便,想推薦給大家。 以下紀錄一下使用心得: 前陣子接觸Fire.app,是個製作網頁原型的協...

鐵人賽 開發技術 DAY 35
30天掌握Sass語法 系列 第 31

技術 Sass開發流程設計 - (5) Sass設計資源整理

除了閉門造車設計Sass網站設計流程外, 我自己也時常會去搜尋其他網頁設計師的Sass資源, 再去從對方的設計風格和理念找出優缺, 衡量是否該改善我自己撰寫Sa...

鐵人賽 開發技術 DAY 19
作個網站吧! 系列 第 19

技術 作個網站吧!Quickly Sass(1)-少動點兒手:Sass使用心得

雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月. 坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心...

鐵人賽 開發技術 DAY 34
30天掌握Sass語法 系列 第 30

技術 Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面, 已將所有的大框架建立好了, 這裡先來提自己的排版流程習慣: 1.我習慣先把大框架設定用好後,再來微調各元素間的距離。 2.在排網頁時,我會先將...

鐵人賽 開發技術 DAY 18
作個網站吧! 系列 第 18

技術 作個網站吧!Beauty CSS(7)-CSS動一動

CSS3的特殊效果也是不得不提的功能之一, 有了它可以減少些jQuery撰寫, 對我來說相當方便. 以下紀錄一些用法, 若有誤還請指正, 謝謝. CSS3的特殊...

鐵人賽 開發技術 DAY 30
學習手機網站開發 系列 第 27

技術 Slider Menu選單-Day 30

製作FB的選單效果。 下面分享FB選單效果的插件,將相關附件崁入頁面中,在相關標籤作設定就會顯示出如FB選單的效果。 →SliderMenu中是指跳出的menu...

鐵人賽 開發技術 DAY 17
作個網站吧! 系列 第 17

技術 作個網站吧!Beauty CSS(6)-CSS好方便

CSS最方便的地方之一在於圓角陰影等外觀上的設定,可以減少依賴圖片,達到讀取速度加快,重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤...

鐵人賽 其他技術 DAY 25

技術 喜歡打羽毛球嗎?球館空檔很難明確掌控嗎?把我作的網站推薦給你常去的球館吧!

這個網站省卻了學校管理人員很多麻煩,一上線就揪出貪瀆的警衛,回歸正常收費。 已租借場地的球隊,一定不敢遲交續借費用,因為馬上有人替補而無通融餘地。 尚未租借的球...