▌訂閱、追蹤本站最新文章
§歡迎加入臉書粉絲團
§歡迎加入Google+社交圈

angryTools CSS Animation Kit 純 CSS 語法動態特效產生器

寫網頁時,當需要應用一些特效,例如標題文字會閃動、旋轉等,以吸引讀者的注意,很多人都會考慮使用 JavaScript 來實現,如果要透過 CSS 來呈現,對 CSS 語法不熟悉,則變成是一個困擾,即便寫出,還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效,支援 Edge、Chrome 主要瀏覽器,選好效果可立即檢視與產生 CSS 語法,複製即可使用,簡單方便。
ContentPhoto2637

全方位幫你的網站把脈,Google 推 TestMySite 網頁品質測試工具

對網站經營與開發者來說,要做好一個網站並不容易,撇開完成開發後要經營的層面來說,光是要讓網頁能夠完美的呈現在電腦、平板、手機各種不同裝置的螢幕尺寸上就是一個不小的課題,再加上各家瀏覽器對 HTML、CSS、JavaScript 等版本技術支援程度各有不同,讓網頁加載的速度也會有差別。網路上有不少網站品質與 SEO的檢測工具,各有各的著眼點,但應該沒人會否認現在網站做得好不好,還是會以 Google 說了算,現在 Google 推 TestMySite 網頁品質測試工具,從友善程度到移動設備的呈現全面幫你的網站總體檢,只要輸入網站網址,除了幫你打分數,還告訴你該如何改進。
ContentPhoto2604

利用 Google Resizer 看看自己的網頁在不同螢幕尺寸所呈現的樣子

隨著可上網瀏覽網頁的設備越來越多元化,如果網站設計還僅侷限在以電腦瀏覽器為主時,將難以提供使用者良好的體驗。因此當網頁設計好,要如何觀看在不同設備間且多種螢幕尺寸下所呈現的方式呢?其實,不需要真的去購買這麼多的設備一一來測試,透過 Google 所推出的 Resizer 網站,只要輸入網址,便可以觀察自己的網頁在不同螢幕尺寸下所呈現的樣子,藉以調整,事半功倍。
ContentPhoto2544

quickMockup 快速建立程式介面模型,方便與客戶溝通

在系統分析階段,常需要與客戶溝通系統需求,但因為沒有系統介面,多數的時候,都是靠描述想像然後用文字加以記錄,等到文件交到程式設計師手上,程式設計師對說明文字還有可能做出不同的理解,造成落差。因此,在系統分析的諸多方法中,有一個方法為雛型法,其透過工具快速地建立介面原型,利用界面原型來與客戶進行功能溝通,如此,客戶可以不需要憑空想像將來的系統操作方法,對所要的輸入、輸出資料,也能在系統分析初期快速地確定,加快系統建構與導入的時程。quickMockup 內建視窗與網頁程式設計常用的元件,使用拖拉的方式便可建立,並設計備註,以期系統分析階段能與客戶縮小彼此間的認知,進入程式設計階段,也能按圖施工,做出更符合客戶需求的系統。
相關文章,還可以參閱:
ContentPhoto2543

Pic2Icon 網站 Favicon 圖示線上產生器

網頁顯示時,在分頁上方通常都會加入網站的代表圖示,讓瀏覽者方便在眾多分頁中識別,其格式為 ico,需要在<head></head>加入 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />這樣便可在分頁中顯示,想要產生 ico 圖示,如果慣用的圖片編輯器,無法產生,可以來 Pic2Icon 這個網站進行圖示轉換,方便你後續的應用。
ContentPhoto2524

CSS Portal 線上 CSS 按鈕、圓角、選單、框架語法產生器

對學習 CSS 來說,不論是初學或是要進階,有可以參考的語法是相當重要的,畢竟各家瀏覽器支援的 CSS 語法不見得相同,CSS Portal 是一個提供網頁常用到的 CSS 的語法產生器,包含 CSS Box Shadow、CSS Button、CSS Gradient、CSS Flip Switch、CSS Menu、CSS3 Menu、CSS RGBA、CSS Ribbon、CSS3 Rounded Corners、CSS Sprite 、CSS Text Rotate、CSS Text Shadow 、CSS Tooltip 、Layout 、Style Input Range 讓你在製作網頁時,可以即時預覽樣式與語法。

ContentPhoto2515