文章專區

最新網頁設計文章

網頁設計上時常需要各式各樣的icon,網路上也有許多資源可以使用,像是知名的Font-Awesome(可看此介紹Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用!) 若想嘗試不一樣風格的話,不妨來試試這款線稿風格的icon,讓整體畫面看起來更清爽! 首先到下載網址 按「Clone or Download」即可下載   下載回來將檔案解壓縮後,有個「fonts資料夾」和「style.css」,只要將這兩者放到你的檔案目錄裡即可   打開index.html就可以看到圖示和各自對應的class名稱一覽表   先將style.css置入連結,然後複製要使用的圖示名稱,貼到class裡去,就可以使用了唷!   比如說我要用icon-documents這個icon,便將它加進class裡。   還可以根據自己的需求更改圖示大小唷,相當實用。
  本站先前介紹過Google Analytics分析-看見網站績效的說明,從 Analytics 追蹤分析當中,我們瞭解到訪客在網站當中的操作喜好與閱讀效率等詳細資訊,可以進而作為網站營運優化的指標,因此對於網站管理人員是有著極大的幫助分析工具,而本次將進階推薦介紹由 Google Analytics 延伸的 Page Analytics 單頁網站流量分析擴充功能。    Page Analytics 是由 Google Analytics 原本的追蹤權限資訊做為延伸的擴充工具,主要是應用在網站"單頁畫面"進行流量與連結的統計與說明,讓管理人員能夠在網站每個畫面中一目瞭然的清楚知道連結應用資訊,得達精確的訪客應用效率,所以網站在原本申請並置入過追蹤碼後,便能透過安裝工具直接做使用(若尚未安裝過追蹤碼可參考文章開頭連結進行設定),擴充工具可以從 Google Chrome 瀏覽器的"線上應用程式商店"搜尋 Page analytics 找到申裝資訊。   在安裝擴充工具後,可以透過瀏覽器左上方的開關圖示進行快速開關查看頁面資訊。
雖然電腦有內建截圖工具,但是大部分只能截取全螢幕,如果需要截整條頁面時,就必須滑動滾輪分段截,然後再用修圖工具拼起來,相當麻煩。不過現在有個chrome外掛套件可以輕鬆截取整個網頁唷!讓你不用再特地分好幾次截圖了!   首先到外掛頁面選取,點選「加到chrome」。 下圖因為已安裝外掛,所以上面直接顯示的是「已加到chrome」   FireShot安裝外掛請點此   在想截取的頁面上按右鍵,移到「捕捉網頁截圖 -捕捉FireShot的」,選擇「捕捉整個頁面」,或是依自己需求也可以選擇「捕捉可見部分」,也就是全螢幕。   如此就可以另存為圖片囉,圖檔為PNG,也可以保存成PDF檔。   如此便可以存到完整的頁面了喔!  
      本站之前淺談過 API 應用程式介面是什麼,瞭解了 API 的核心架構,主要是開放物件功能和資訊打包成可物件連結的應用程式介面與其它網站可進行串接、共享,本次將延伸介紹的是 Facebook Graph API與網頁設計的實際串接應用,透過 Facebook 廣大會員人數資訊,我們可以整合會員帳號、e-mail、喜好等眾多同意公開資訊,進而應用提供用戶們可以更方便操作使用網站。     從 Facebook Graph API explorer 進入操作介面後, 選擇將要應用的公開資訊, 確定需要取得的資訊後進行提交,Graph API 將會產出相關對應的讀取參數, 可以透過"取得代碼",來轉換打包將要對應的程式語法, 最後再透過呼叫參數與對應打包語法就能加以延伸應用在一般網站之中。    
在設計網頁時通常會加進一些豐富活潑的動畫特效,不僅能夠增進瀏覽者與網頁的互動性,也加強了設計上的視覺效果。而CSS3提供了不少相關的特效屬性,但是語法相當複雜,因此,我們來介紹一個可以直接套用CSS3特效的套件,讓你輕鬆展示網頁效果。 首先到套件下載網站 ianlunn.github.io/Hover   裡面有許多簡單特效   還有icon的特效   點Clone or Download 下載   解壓縮檔案,點進CSS的資料夾 找到hover.css或是hover-min.css,將這支css放到自己的專案裡。並家連結在檔案裡。   那麼重點來了,該如何套用這支css裡的特效呢? 首先到下載網站(ianlunn.github.io/Hover)裡,開啟瀏覽器的使用者開發工具(例:chrome瀏覽器-在頁面上按右鍵-->檢查),找到自己想套用的特效,看class的名稱。   例如想要套用shrink的特效,便打開工具檢查發現此特效的class名稱為''hvr-shrink'',便複製這行到自己的檔案裡欲套用的項目,就可以直接使用了唷!  

ARTICLE

6

API是什麼?

   什麼是"API",應用程式介面 (Application Programming Interface),在現行網際網路發達的時代,因應網路平台的多樣性的發展,許多大型網站平台逐漸開放物件功能和資訊與其它網站進行串接、共享,不僅能接觸整合多元資訊,更可以提升跨平台使用者的友善性,達到平台多元發展的市占性,而大型平台將這些開放分享的資訊功能開發打包成可物件連結的應用程式介面,提供其它開發者進行應用串接,便是API的核心架構。     在日常中我們常應用的大型網站,如:Google Maps、Facebook Graph API  等眾多平台,都開發分享了許多能與它們連結並共享資訊的API相關功能,最常見的便是網站中越來越常見的社群網站鑲嵌資訊與影音相關媒體應用,讓一般普通網站也跟大平台有了聯繫,也令使用者在資訊接收應用上更為豐富自由,是網站未來發展的重要趨勢。     網站豐富多元的內容資訊能夠帶給使用者完善齊全的需求,也能吸引更多使用者的應用,因此網站多元的連結應用是發展的趨勢,在製作網站的同時可以多參考符合需求的API跨平台功能,便能將網站的豐富性提升。
設計字型永遠不嫌多,雖然台灣網頁在內容上中文字佔大部分,但是適當地加上美觀的英文字,可以提高整體的質感唷! 這次來介紹相當方便也算常見的英文字型下載網站-1001 fonts https://www.1001freefonts.com/ 上面的類別繁多、清楚明瞭,分類上也相當仔細,可以幫助你更快速地找到想要的字型。   選好想要的風格類別後便會跳出該風格的搜尋結果,只要按右邊的「download」鍵即可下載。   點進字型可預覽   下載有分100%免費和供個人免費使用,如果只想免費使用但又有可能用在商業用途時可以選擇此類,而標示為供個人使用(Free for Personal Use)的字型,這類型的若要商業使用的話,必須選擇購買(Buy Commercial License)。購買方式依據作者不同而有不同的價格和方案。 如下圖的字型價格為20美元,買到的字型就是擁有不可轉讓、可商業使用的永久權利。另外也可以捐贈作者(Donate To Designer)支持一下唷!  
  在資料庫與主機系統日新月異,不斷推陳出新的現今,以往舊版本的資料庫系統也逐漸需要汰換,在進行"轉移資料庫"的時候,大多數情況可能會遇到不能使用如新建立的資料表單匯入資料庫時的"新增查詢"方法,原因是因為運行許久的資料庫檔案內容已經累積較為龐大的資訊,使用新增查詢這項功能時將會有記憶體不足無法匯入的情況。    因此本次將要分享得是,解決資料庫備份檔案.sql過大,如何使用命令提示字元cmd的匯入方法。   1.在進行命令提示字元cmd匯入資料庫前,先使用記事本開啟備份檔案.sql檢查修改確認資料庫的名稱是否符合將要匯入的資料庫  名稱,若備份的資料庫名稱與將要匯入的名稱不同,請依照將要匯入的名稱修改並儲存!     2.確認要匯入的資料名稱與資料庫名稱相符後,由桌面左下開始按鍵搜尋命令提示字元cmd開啟視窗,使用命令提示字元操作         sqlcmd -S  -i C:\.sql      ex:sqlcmd -S 127.0.0.1 -i d:\SQLbackup\webdesignex.sql     輸入資料庫IP位置-在這是本機 127.0.0.1 再鍵入要匯入與對應資料庫名稱得路徑與檔案名稱 d:\SQLbackup\webdesignex.sql 進行執行-之後系統將會把資料庫備份檔匯入資料庫中,等待資訊完整匯入便能解決資料庫備份檔案.sql過大的問題。 已上提供範例參考,若有相關疑問也歡迎聯絡我們,本站將會竭盡服務說明。      
Elastislide是一款精美的響應式jquery圖片循環展示套件,類似底片的排列方式,水平垂直皆可,只要點其中一張圖片即可觀看大圖,實用而常見。 首先到https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/下載壓縮檔,解壓縮後便會有此特效所需要的CSS和JS。 而此網站也提供了相關範例可以參考唷。https://tympanus.net/Development/Elastislide/   以下以Example 4 ( https://tympanus.net/Development/Elastislide/index4.html )為例。   HTML 前面放大的原圖,後面放排列的小圖。     CSS 直接放入elastislide.css、custom.css、demo.css的連結,別忘了修改檔案的路徑唷! 若想修改樣式可更改demo.css內容的設定   JS 同css一樣放入以下連結:      
  根據資策會及全球許多具有公信力的網路平台、廣告公司等,都發表了關於行動裝置在網際網路中實際使用流量的佔有例已經超越了傳統桌上型或筆記型電腦裝置,根據多家網站線上品牌管理服務提供商,公佈2017全球網路使用裝置趨勢調查報告中指出,全球約有二分之一的人口擁有智慧型手機,超過一半以上網路流量是來自行動裝置,其中又以"網站瀏覽、社群聯繫、APP資訊應用"為主。    從使用者習慣與行動流量的分系報告中能瞭解,網站瀏覽與社群聯繫的應用佔據了全球大部分的流量,因此社群網站也逐漸跟一般網站進行相容結合,由最常見的例子:一般網站透過資訊的升級與整合後能透過分享功能將訊息轉載至Facebook中,可以從這樣的跨領域合作中發現,原本是不同領域的網站類型卻能在相互應用後能夠互相豐富彼此的資源,因此本次本站將簡單說明網站如何透過資訊升級與整合後能分享至Facebook的方法。    Facebook應用了傳統網站的meta資訊進行延伸讀取應用並分享至大眾社群,而傳統網站只需要在原有的meta資訊中加入對應 Facebook需要讀取的 Open Graph protocol 標記語言,相關資訊便能透過分享功能將自己的網站推廣至社群網站中,以下將示範說明需要加入的meta資訊:        <meta property="og:url"                content="https://原網站連結(ex:webdesigns).com" />     <meta property="og:type"               content="website" />     <meta property="og:locale"             content="zh_TW" />     <meta property="og:title"              content="網站標題" />     <meta property="og:description"        content="網站簡短文字說明。" />     <meta property="og:image"              content="縮圖的連結位置" />