目前分類:網頁製作 (111)

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

每個事件都有其時間性,過了就是歷史,例如,一個人從出生、就學到就業中間經過的成就等等,即便是用長篇文字來敘述,讀者還是要經過歸納才能吸收,若能加入時間軸的概念,利用時間點的索引搭配文字或圖片的敘述,相信更能讓讀者在短時間內就能清楚的了解故事中所要傳達的訊息。TimelineJS 是個線上就可建立時間軸的免費服務,透過其提供的範本,就能輕鬆地建立圖文並茂的網頁式時間軸,讓簡報、教學、製作生平經歷......等等都能更清楚的呈現。

 

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

製作網頁如果預期會有較長時間的等待,通常會在等待的時間加入一個 loading 的動畫圖示來告知,避免用戶誤以為網頁沒有反應而離開,想要加入一個等待載入的動態圖示,可以來試試 loading.io 網站所提供可自訂圖示動態速度與顏色的動畫圖示產生器,不但可產生 GIF 檔外,還可產生出 CSS 或 SVG 檔,還提供範例語法,讓你輕易地運用到網頁裡。

 

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

想要在網頁上表現如紙本般的文件內容,通常不難,甚至在排版上都能勝過紙本,但若碰到有特殊符號,例如 5 + 6 ≥ 10 或是 A ∩ B 、∈、∡...等,若是不知道有這些特殊符號可以應用,想要數位化這些紙本內容,也只能做一半,想要應用這些特殊符號,可以來 HTML character codes 這個網頁特殊符號應用表來查詢,每個符號大抵有提供 HTML code、HTML name code、JS escape sequence 這三種編碼方式讓你應用。

 

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

在社群網站當道的時代,多數的網站都免不了要向其靠攏,在自家網頁上擺上社群網站的分享按鈕,方便使用者可快速地分享。想要在網頁上放置社群網站的分享按鈕,最快速的方法莫過於使用 Simple Sharing Buttons Generator 這個 HTML + CSS 線上產生器,只要挑選好所要的風格與所需的社群網站,再依序回答幾個問題,便能快速產生出分享按鈕的語法,方便你在網頁上的應用。

 

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

需要對顏色生成圖片,可以來使用 Colorism 這套調色與取色二合一免費工具,在調色方面,可任意拉動 RGB 三項數據,並即時顯示顏色,而在取色方面,可讓你使用滑鼠取出指標目前所指顏色,兩者都可以產生 png 圖檔,讓你後續方便應用。
 

 

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

不論是 windows、web、Android、iOS 的開發,甚至是平面設計,總是免不了 ICON 圖示的應用,既然稱為圖示,當然就不是要使用者去猜,而是必須設計成一看就知道要做什麼。想要有一致的圖示風格又能符合 ICON 的設計準則,網路上有很多免費下載 ICON 圖示的網站,而現在 Google Design 中的 Material icons 網站,則是提供 Action、Alert、AV、Communication、Content、Device、Editor、File、Hardware、Image、Maps、Navigation、Notification、Social、Toggle 等多種類型的 ICON,且每個圖示均提供 18dp、24dp、36dp、48dp 尺寸與 PNG、SVG 兩種圖檔格式,供你免費下載應用。
 

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

Web 字型,主要在解決網頁設計所使用的字型,可能與瀏覽端的字型不一致所造成的排版差異與視覺感受,而 Google 有提供免費的 Web 英文字型,想要應用,可以到 Google fonts 輕鬆取得相關的連結語法。如果想要先試試每種字體在網頁上的呈現效果,可以利用 TypeWonder 這個免費的網站來進行測試,只要輸入要測試的網址,便可使用自己所選擇的英文字型來呈現,且可以產生連結語法,方便應用到網頁上。
 

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

製作網頁時,當要用到一些特殊符號,例如要有箭頭 ↕、數學 ≧、貨幣$、數字 ⅗、字母 Â或一些特殊符號 ℉,可以來 HTML Arrows 這個網站,每種符號均提供 Unicode、Hex、HTML 等編碼供你應用。

 

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

以前想要讓網頁有動畫效果,多數要靠 JaveScript、GIF 或是 Flash,而現在則可以透過 CSS 3,不過想要透過 CSS 3 語法來做動態特效,其學習門檻著實不低。但若只想在網頁放一些較為簡單的特效,可以來參考 CSS3 Animation 這個網站所提供的 CSS 3 動畫語法免費範本,包含有兩大類:

  • ENTRANCES :slideUp、slideDown、slideLeft、slideRight、slideExpandUp、expandUp、fadeIn、expandOpen、bigEntrance、hatch
  • MISC:bounce、pulse、floating、tossing、pullUp、pullDown、stretchLeft、stretchRight

下載後,只要經過簡單的語法加工,就能套用範本,讓自己的網頁輕鬆動起來。

 

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

網站開發免不了都要使用到 JavaScript、CSSSWFimages 等專屬前端網頁的開發應用,例如 JQuery 程式庫,若自己的網站流量夠大,當然可以將其下載到自己網站上來應用,若想節省自身網站的流量,也可以在網頁裡直接引用有提供 CDN 的網站上的程式庫,像是 Google CDN 或是 Microsoft runs their own CDN,若在前述兩個網站上找不到要應用的資源,可以到本身也是做 CDN 主機的 CloudFlare CDNJS 上找找看,其穩定性與效能也還算不錯喔。
 

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

很難想像英文字母也能利用 CSS 來建立,CSS SANS 利用純 CSS 建立包含 A 到 Z 的所有英文字母(沒有小寫),而且提供開放原始碼免費下載,讓網頁設計師只要透過網頁便可呈現。
 

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

網站的製作不論是初學程式或已經是高手,可能都會覺得寫 Code 來實現功能會比對網站整體顏色該如何配置來的簡單許多,因為,如何用色才能得滿分,始終是沒有標準答案的,只能說用傳統常見的顏色呢就是中規中矩,若用色大膽,有人欣賞就是創新,沒人欣賞就便垃圾了。當然,我們也可以到 BrandColors 這個網站來參考與了解知名網站是如何進行顏色搭配的,若覺得喜歡,也可下載該網站的用色 CSS 檔案,方便後續的應用。
 

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

製作網頁的過程中,為求得實際的呈現效果,常會需要製作與預期頁面大致相符的展示頁面,藉以判斷或微調版型,因此,過程中若有需要使用文字填充時,通常會剪貼一段可能不相干的文字來貼上,這對工程師自己或公司內部的展示可能無傷大雅,但若是對客戶展示,未免就顯得不夠專業。想要求得在雛型中更好的呈現效果,我們可以將這段文字改用 BLOKK font ,以橫條取代實際的字形,讓網頁還在雛形的過程中,便能展現專業的品質。
 

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

做網頁若都有只有文字,即便是功能齊全,也會讓人覺得不友善,適度的使用一些 ICON 來幫襯,不當可美化網頁,也更能貼近使用者,網路上有很多類似的網站,不過大多是固定尺寸、顏色,即便是要調整還是需要花點時間與學習。Flatty Shadow 是個 ICON 線上生成器,透過其所提供的工具,可動態產生自己想要的圖標,讓圖示風格可以一致化,讓作品看起來更具質感。

 

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

不管是網頁或平面設計總少不了要用到一些小圖標,雖說網路這類資源很多,但多有大小、顏色與修改不易等困擾。Iconfont 提供向量圖示,可自行控制圖標大小、顏色,讓你下載後,立刻可以應用,免去後續還要編修的麻煩。
 

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

初學網頁製作的人來說,當需要對「按鈕」元件進行美工時,若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器,不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外,還可自動產生所需的 CSS Code 與 PNG 圖檔,讓使用者方便影用到網頁的任意處,相當方便。

 

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

有時會覺得那些要經過層層註冊關卡才能使用的免費服務,實在是有點麻煩,若只想分享些照片,或是替網頁找個臨時圖床,實在不需要這麼大費周章,可以來試試 Photodrop 這個免註冊就可以使用的免費網路相簿,讓你可用滑鼠拖拉照片即可輕鬆將多張照片上傳,分享時也只需要一個相簿網址即可,相當方便好用。
相關應用,還可以參閱:

 

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

CSS 是用來美化與排版網頁的語言,且現在各大家瀏覽器也都支援 CSS 3版本,CSS 3 相較於之前版本,其功能更強,像是以往較難做到的圓角、漸層、陰影、旋轉......等特效,在 CSS 3都可輕易完成,不過,功能變強,也就是代表 CSS 3語法變得複雜,且學習也較有門檻。若想快速應用,建議可以來 EnjoyCSS 這個網站,其提供網頁常用到的元素,像是文字、輸入欄、按鈕、區塊等等的圓角、漸層、陰影、旋轉等特效,只要調整所需要參數,便可從範例看到參數調整後所產生的變化,當調整到滿意的作品後,可輕鬆將  CSS3 代碼產生出,且還提供個瀏覽器所支援的程度,讓你可以快速佈局到自己的網頁。
 

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

微軟的 OneDrive 雲端硬碟應用,不僅可以儲存與共享檔案外,亦可建立與編輯 Word、Excel、PowerPoint 等類型的文件,對於想將以前的 Office 文件轉到雲端做更好的應用或是已用習慣微軟 Office 當作文書編輯工具的用戶來說,微軟的 OneDrive 是一個可以無縫接軌的文書雲端應用服務。對於有需要將這些編輯好的文件嵌入到網頁內,OneDrive 也提供內嵌程式碼,讓你輕輕鬆鬆便能達成,免除文件在轉換到網頁的過程中,排版受限於文件內特殊符號的限制。
相關應用,還可以參閱:

 

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

對於要開發  Web 應用程式的初學者而言,要學的範圍很廣,最基礎的就有 HTML、JavaScript 與 CSS,若是還想結合資料庫,那可能還會選擇 PHP 或是 ASP.NET 等的開發工具來搭配所選的資料庫,因此,就基礎來說,一套有系統的整理各語法的使用方法與使用範例,絕對是初學者最快入門的方式。DevDocs 整理出 HTML、CSS、JavaScript、DOM、DOM Event、HTTP 等 Web 開發必須用到的各種語法並配上使用範例,縮短你在 Web 開發上摸索的時間與加快學習的腳步。
 

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

找更多相關文章與討論