網頁設計的專業首選

在網頁上的區塊是依照html的書寫順序排列，但如果換成設計RWD自適應網頁時，有時為了閱覽方便或其他需求，會需要將原本的區塊順序作更動，雖然可以用float浮動或是position定位來設定，在調整上較為麻煩，這時我們可以使用flexbox(詳細介紹請看: CSS3的flexbox版面配置－flex container(容器)可用的屬性和CSS3的flexbox版面配置－flex items(子項目)可用的屬性) 裡的order屬性，此屬性可以直接以數字設定區塊的前後順序，非常快速！   首先寫一個html框架，內有四個div區塊，為方便區分設定order的前後差異，依照html裡的順序分別設001、002、003、004。 將最外圍的div的class命名為container，設display:flex   顯示出的如下圖   然後設order屬性，此範例設定四個div的順序為反過來，在html碼裡排列第一的div(001)設為order:4，以此類推。   為方便看出差異，另外加上每個div的order數值   可以清楚地發現，div的排列會跟著order的數值作更動。

  網頁結構化資料是什麼?相信大多數人都有使用過搜尋引擎尋找過資料，搜尋結果列表出來的資訊會盡量貼近符合搜尋的關鍵字，而搜尋引擎又是靠什麼資訊去歸類排序網際網路廣大多元的資訊呢?其中最主要的歸類方向便是"網頁結構化資料"，網頁結構化資料簡單來說就是網頁最基礎的編輯資訊，也是我們在搜尋排名常看見的網站說明資訊，這些說明資訊不僅提供了搜尋者閱讀查證資料是否符合之外，更提供了搜尋引擎進行歸類排序等用途。    一般人可能會認為大多數搜尋引擎都會自動收錄基礎閱讀資訊，又為什麼需要額外在結構化資料著墨呢?原因在於大多數搜尋引擎在收錄時只會針對簡單的基礎資訊進行收錄，而大部分網站若沒有將進階資訊設定到正確對應的收錄位置時，就少掉許多貼近關鍵字訊息的資料，自然在歸類與排名上會顯得較為模糊薄弱。      從圖片資訊中能發現，搜尋較為明確方向的關鍵字時，搜尋引擎也會把結構化資料顯示得更加符合貼近，因此"網頁結構化資料"在 SEO 上算是最基礎的頁面資訊，卻也是極為重要的關鍵資訊。

網頁設計上時常需要各式各樣的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''，便複製這行到自己的檔案裡欲套用的項目，就可以直接使用了唷！  

   什麼是"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  ＜server＞ -i C:\＜your file here＞.sql      ex：sqlcmd -S 127.0.0.1 -i d:\SQLbackup\webdesignex.sql     輸入資料庫IP位置-在這是本機 127.0.0.1 再鍵入要匯入與對應資料庫名稱得路徑與檔案名稱 d:\SQLbackup\webdesignex.sql 進行執行-之後系統將會把資料庫備份檔匯入資料庫中，等待資訊完整匯入便能解決資料庫備份檔案.sql過大的問題。 已上提供範例參考，若有相關疑問也歡迎聯絡我們，本站將會竭盡服務說明。