2014.4.25 Last updade:2017.5.29
網頁設計札記
新的學不會，舊的一直忘，趁烹鶴村v2.0剛改版還知道怎麼做的時候記一下網頁設計的瑣細。以下種種，對個人網站經營者而言應該夠用了。注意：Filezilla Client更新到3.9.0.3以後的版本，站台管理員的「加密」請選「僅使純粹的FTP」！
．CSS3
圓角矩形：把"-webkit-border-radius: 010px; -moz-border-radius: 010px; border-radius: 010px;"這段語法套用在圖層上，數字自己改，那個零不可以拿掉，別忘了設定邊框或背景才能顯示。另外還有可以四邊設定不一樣半徑的語法，大家自己找喔。
圖層置中："margin-left:auto; margin-right:auto; "或"margin: auto;"。
文字陰影："text-shadow: 0px 0px 6px #FFFFFF "。第一個數字管X軸，第二個數字管Y軸，第三個數字管擴散大小，如果要加強外光暈效果，可用","分隔套多組語法上去。
RGBA："rgba (255, 255, 255, 0.6)"—第一個數字是紅色數值，第二個數字是綠色數值，第三個數字藍色數值（色光三原色），最後一個數字是透明度，1就是百分之百不透明。
．自適應網頁
自適應網頁設計（Responsive Web Design），又譯「響應式網頁設計」。許多個人網站經營者會直接套用Bootstrap程式，但因為本網站有太多自訂版型是那種全包無法解決的，所以我是用在網路上找到的Responsive Nav語法，再加上Dreamweaver CS6來改版。Dreamweaver CS6內建流變格線網頁很好用，但是有好幾個問題無法解決，還是要自己加程式碼……
側選單「Mmenu」﹕感謝原作者Fred Heusschen（荷蘭設計師）。此選單有點複雜所以載入比較慢，不過可以自己控制的設定比較多（比如可以設定在瀏覽器多寬時展開選單），觸控效果也其他同類型選單比好很多。
上選單「Responsive Toggle Menu (Fundesigner)」﹕感謝原作者Yuxin（原作者好年輕！佩服佩服），此選單結構簡單很好改也很快載入。
嵌入網路影片自適應語法：簡言之就是用div把影片包起來，然後設定iframe, object, embed。
表格內圖片自適應語法：似乎有不少人想靠Bootsrap解決，但其實只要多寫兩行程式碼就好了，第一是表格設定table-layout:fixed，第二是圖片要設定max-width:100%。
底圖自適應：梅問題教學網這篇文章寫得很清楚，另外還有一篇介紹細節，以及一種可以向下配合IE8.0的JQuery外掛（如果要設得更全面也可以參考這篇）。另，這不是烹鶴村使用的，而是我做另一個網站用的。
隱藏橫向卷軸：參考梅問題教學網 "overflow-x:hidden; overflow-y:auto" 大法。
檢視自適應：請開Firefox按快速鍵Ctrl + Shift + M！
．Apache
設定在網站根目錄的.htaccess檔中。
錯誤轉址：常見的錯誤有206,401,402,403,404,500，要在該檔案RewriteEngine on之後加幾行"ErrorDocument 錯誤碼編號 /你自設的檔名.htm"（編號後有半形空格，/後無空格）。
超文字傳輸安全協定（https）：在虛擬主機的Cpanel後臺找Let's Encrypt™ SSL照著按即可。設定成功後，自動轉址作業則在檔案中這麼寫——
RewriteCond %{SERVER_PORT} ^80$
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [L,R]
防盜連：其實大部分虛擬主機的Cpanel後臺都可以設定，如果要自行設定可以參考連結中香腸炒魷魚那篇這樣寫——
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]
設好之後，最重要的是屏除例外（因為你還要讓自己網站與FB或G+縮圖連得上）——
RewriteCond %{HTTP_REFERER} !^http://你自己的網址/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://你自己的網址$ [NC]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?google\.com/ [NC]
RewriteCond %{HTTP_USER_AGENT} !^facebookexternalhit [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(.)+.douban.com [NC]
設定符號連結與目錄禁止顯示：加一行"Options +SymLinksIfOwnerMatch -Indexes"。
．RSS訂閱
手動建立RSS.xml的方式是參考卜維丰、阿瑟與迪迪&蒂蒂。白日夢冒險日記的文章，不過他們都未提及<guid>元素，其原理可參考我會飛，標準的寫法則可參考這裡（不可以亂命名，否則會讀不出來；而如果guid不是設成網址，一定要寫上isPermaLink="false"）；此外，打完也不要忘了在channel部分加上atom的"self"指向（記得範例斜體部分要換成自己的網址）。
RSS寫完可以到feedvalidator.org或W3C檢測。
至於怎麼訂閱，個人覺得Feedly、Pulse等線上閱讀器接收RSS更新的速度非常遲緩，而且不太準確（其Refresh按鈕形同虛設），比較推薦My Yahoo、Inoreader或直接使用Firefox等瀏覽器「書籤」功能訂閱。
．網站流量統計
AWStats：網站記錄檔分析工具，一般而言空間商會在Cpanel中提供此功能（但臺灣某些廉價空間怕吃流量就不安裝），羅列各時間點各網頁的流量、連結來源、訪客作業系統、搜尋關鍵字以及錯誤碼等。本站現存的紀錄，可追溯到二〇〇八年四月。
Google Analytics：掛載java來分析，顯示流量會比AWStats少，但能供提供比較準確的訪客人次（較不容易統計到機器人），並能觀察即時狀況、自訂追蹤碼紀錄事件。麻煩之處在於設定不易、內容複雜，且Google時不時當機。謹列出最基本的追蹤碼，歡迎討論及採用（裝好可以用Chrome外掛程式Google Analytics Debugger驗證）——
ga('create', 'UA-XXXXXXXX-X', {'siteSpeedSampleRate': 100}); // 帳號以及統計網站速度的訪客資料比例。
ga('set', '&uid', 'USER_ID'); // 紀錄已登錄User-ID的瀏覽行為。
ga('require', 'linkid', 'linkid.js'); // 加強連結歸屬。
ga('send', 'pageview');
ga('send', 'timing', 'jQuery', 'Load Library', 20, 'Google CDN'); //紀錄訪客載入JQuery的時間。
．Wordpress
自適應模板：很簡單，只要找新一點的模板套就行。不過要注意是否支援自訂選單與自訂頁首圖，有這兩項就很好用。
搬資料夾注意事項：先去Cpanel的PhyMyAdmin修改wp_options的siteurl，然後用Filezilla把整個WP資料夾內容搬到想要的位置，最後記得要修「設定／一般設定／網站位址（URL）」以及「設定／媒體設定／上傳的檔案將儲存於此目錄」。
favicon外掛：Shockingly Simple Favicon
相簿外掛： NextGEN Gallery（可以直接讀上傳到資料夾的圖片建立相簿，每個相簿建立要開新頁面。）
留言板外掛：DMSGuestbook
防止廣告外掛：Akismet
搜尋引擎登錄外掛：Google XML Sitemaps
網站流量外掛：Google Analytics dashboard
備份外掛：WordPress Database Backup
．Phpbb
自適應模板：採用Artodia與伊朗網友Meis@M製作的。phpbb 3.1.3版以後，包含預設模板都已自適應化了。
升級或搬移注意事項：千萬不要覆蓋到原先的config.php！
廣告機器人的反制：一般的驗證碼會被俄國駭客破解，留灌水留言狂玩。這有兩個解決方式，一是先到Google申請，再裝CAPTCHA，不過那對使用者實在太難答，比較簡便的方法是在問答集中設定必須用中文才能回答的答案。
favicon：據說在模板的header檔案加上一般的"shortcut icon"語法即可，但好像沒有用欸？
社群網站第三方登入：採用Oneall Social Login，中文說明詳見竹貓星球；另外，由於程式隨Phpbb 3.1.3釋出而大幅更動，社群網站圖樣的預設位置改到只有登錄頁才有，如果希望每頁都有社群網站登錄圖樣，請見官網Q&A。
．色碼表
日本の伝統色—用Chrome或Safari才能瀏覽。
Coolors—網站配色工具。
ColorHexa—色彩百科。
ColorSafe—選取文字顏色。
Contrast Ratio—含透明度的測試工具。
．縮圖、轉檔
．搜尋引擎最佳化
（小工具）
Sitemap產生器——製作網站地圖。
結構化資料測試工具——驗證網頁的schema微資料。
（網站管理員平臺）
Google網站管理員工具——注意google不會收錄index.htm，所以子資料夾有index.htm網址要寫成「/」才會收錄。手動增加新網頁是讓「檢索→Google模擬器」擷取後提交。
百度站長平台——可利用「站內搜索→進入管理後台→結果頁管理→提升收錄效果→提交網頁列表」途徑提交sitemap。
360搜索站長平台——可利用「Wap站長工具」提交sitemap。
．社群網站
Facebook Debugger（說明參考Fundesigner：解決Facebook轉貼連結的縮圖快取問題）
Facebook社交外掛程式—倘若用Firefox無法瀏覽請停用追蹤保護功能（工具→選項→個人隱私）。
．相關文章
．最新消息