2014.4.25 Last updade:2017.5.29

網頁設計札記

新的學不會,舊的一直忘,趁烹鶴村v2.0剛改版還知道怎麼做的時候記一下網頁設計的瑣細。以下種種,對個人網站經營者而言應該夠用了。注意:Filezilla Client更新到3.9.0.3以後的版本,站台管理員的「加密」請選「僅使純粹的FTP」!

Menu CSS 自適應 Apache RSS 流量統計

Wordpress Phpbb 色碼表 縮圖轉檔 SEO

 

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.0JQuery外掛(如果要設得更全面也可以參考這篇)。另,這不是烹鶴村使用的,而是我做另一個網站用的。

隱藏橫向卷軸:參考梅問題教學網 "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]

設好之後,最重要的是屏除例外(因為你還要讓自己網站與FBG+縮圖連得上)——

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.orgW3C檢測。

至於怎麼訂閱,個人覺得FeedlyPulse等線上閱讀器接收RSS更新的速度非常遲緩,而且不太準確(其Refresh按鈕形同虛設),比較推薦My YahooInoreader或直接使用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

自適應模板:很簡單,只要找新一點的模板套就行。不過要注意是否支援自訂選單與自訂頁首圖,有這兩項就很好用。

搬資料夾注意事項:先去CpanelPhyMyAdmin修改wp_optionssiteurl,然後用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

 

 

.色碼表

原色大辞典

日本の伝統色—用ChromeSafari才能瀏覽。

Coolors—網站配色工具。

ColorHexa—色彩百科。

ColorSafe—選取文字顏色。

Contrast Ratio—含透明度的測試工具。

 

.縮圖、轉檔

TinyPNGKrakenCompressor

ConvertICO

 

.搜尋引擎最佳化

(小工具)

Sitemap產生器——製作網站地圖。

結構化資料測試工具——驗證網頁的schema微資料。

(網站管理員平臺)

Google網站管理員工具——注意google不會收錄index.htm,所以子資料夾有index.htm網址要寫成「/」才會收錄。手動增加新網頁是讓「檢索→Google模擬器」擷取後提交。

Bing網站管理員工具

百度站長平台——可利用「站內搜索→進入管理後台→結果頁管理→提升收錄效果→提交網頁列表」途徑提交sitemap

360搜索站長平台——可利用「Wap站長工具」提交sitemap

搜狗站長平台

 

.社群網站

Google+摘要說明

Facebook Debugger(說明參考Fundesigner:解決Facebook轉貼連結的縮圖快取問題

Facebook社交外掛程式—倘若用Firefox無法瀏覽請停用追蹤保護功能(工具→選項→個人隱私)。

Google+徽章

 

.相關文章

黑白研究院:藝術咖啡座

 

.最新消息

烹鶴村G+最愛:藝術與設計