首頁 » 教學

標籤:教學

social icon of Creative Commons

網站內容著作權授權分享Creative Commons 4.0

為了知識的流通與增長,就像是我在今天的臉書上所寫的感想一樣,人類的進展絕大部分是「站在巨人的肩膀上」日新又新,更上一層樓.所以我就像目前網路世界裡一億多個網站負責人的理念一樣,也加入了這個分享知識的行列.唯一的要件就是請使用者將我的網站連結負載使用的相關資料處,以示謝意與負責.

這樣,對外可以平等互惠,畢竟我們分享的知識往往也需要借助他人的知識為基底加以消化昇華才有辦法成為有用的創新知識.唯有如此才能加速知識的流通與激盪,產生知識進化的原動力;對內而言,本網站的知識被網路連結勾串起來也加重了我對自己網站內容正確性的責任,會讓我們提高自我檢視省思的動機.另一方面,其他網站/網頁的內容引用,也一定程度代表我們網站內容的價值被肯定,再者,各大搜尋引擎越來越重視網站內容價值,這個原本就是最重要的考核要素,長久下來也會提升我們網站的搜尋排名,能見度與品牌價值.

所以,這是非常立意甚佳的良性循環機制,利人利己,互利共生的制度,誠摯歡迎您的網站也能一起響應!以下就是在Wordpress架站軟體詳實示範,仔細介紹如何將您的網站內容著作權透過Creative Commons 4.0分享的正式聲明之詳細步驟.

GMT

文本转语音功能仅限200个字符

选项 : 历史 : 反馈 : Donate 关闭

選擇以Creative Commons 4.0授權分享網站內容的全球夥伴們

開啟這個網頁,就開始了第一步囉!

開始製作專屬的Creative Common 4.0 Logo

請點擊上圖右下角的黃色箭頭,就可以看到下圖的網頁囉!

creative-commons英文網頁上半段
Creative Ccommons英文網頁上半段

請將該網頁往下拉,就可以選擇中文頁面,如下圖所示:

creative-commons英文網頁下半段
Creative Commons英文網頁下半段

在該網頁往下拉點擊【華語(台灣)】選項,就會出現凡正體中文版的新頁面,如下圖所示:

Creative Commons選擇授權方式
Creative Commons選擇授權方式

因為上方的說明很清楚,如何選擇的討論就不在此多所贅述,請您選擇最適合自己的選項,以築韻集團網站為例,我們選擇的是【可以,只要別人以相同授權方式分享】,那麼,就會出現如下圖所示的圖像:

Creative Commons選擇授權的方式
Creative Commons選擇授權的方式

如果您選擇的是【是】,那麼,就會出現如下圖所示的圖像:

Creative Commons選擇授權的方式只選擇【是】的圖像
Creative Commons選擇授權的方式

接下來往下滾動螢幕,就會出現如下圖所示的圖像,請輸入您的網站相關資訊,讓您的Creative Commons授權圖像帶有更具體的數位資訊內容.如果有不了解之處,點擊該欄位的【?】就會出現清楚解說.以築韻集團網站為例,輸入完畢就會如下圖所示:

Creative Commons選擇授權的方式-填寫您的網站相關資訊
Creative Commons選擇授權的方式-填寫您的網站相關資訊

再將螢幕往下拉,頁面就會出現如下視框,如下圖所示:

Common Creative選擇授權方式並輸入相關資訊之後就會出現為您網站訂製的html代碼
Common Creative選擇授權方式並輸入相關資訊之後就會出現為您網站訂製的html代碼

請按左鍵點擊視框,html代碼就會反白,代表以全選,如下圖所示:

接下來請將滑鼠游標一道訊框內,按右鍵選擇【複製】選項,html代碼便被儲存到您的電腦站存記憶體了.

Creative Commons網站為您的網站所訂製的html代碼已被全選
Common Creative選擇授權方式並輸入相關資訊之後就會出現為您網站訂製的html代碼

請您將瀏覽器頁面轉換到您的Wordpress網站後台管理頁面,選擇左側邊欄的【外觀】=>【小工具】,如右圖所示:

點擊【小工具】之後,便會出現如下畫面:

wordpress後臺設定小工具
wordpress後臺設定小工具
wordpress後臺設定小工具
wordpress後臺設定小工具上半部頁面

請滾動螢幕,到【小工具】頁面中間段:如下圖所示:

下圖右側【Footer 1】,【Footer 2】,【Footer3】分別代表您的網頁最下方的區域,左,中,右的三個欄位,也是絕大多數網站放置Creative Commons圖像的位置,尤其是中間位置最多.

wordpress後臺設定小工具頁面下半部
wordpress後臺設定小工具頁面中間段

請再繼續滾動螢幕,到【小工具】頁面下半段:如下圖所示:

以拖曳方式將【自訂HTML】選項,拖曳到【Footer 1】,【Footer 2】,【Footer3】任一個您想安置的區域.

wordpress後臺設定小工具下半段
wordpress後臺設定小工具頁面下半部頁面

請再繼續滾動螢幕,到【小工具】頁面下半段:如下圖所示:

以拖曳方式將【自訂HTML】選項,拖曳到【Footer 1】,【Footer 2】,【Footer3】任一個您想安置的區域.

然後,請再瀏覽器開啟您的網站網頁面,蹦將螢幕滾到最下方,您應該就會看到Creative Common組織專為您訂製的CC  4.0圖像,如下圖以築韻集團網站微利的情形.

好啦!恭喜老爺!賀喜夫人!大功告成!

築韻集團每個網頁下方中央都有Creative Common 4.0 著作權分享標示
築韻集團每個網頁下方中央都有Creative Common 4.0 著作權分享標示
SEO搜尋引擎優化

如何備份,編輯,上傳.htaccess檔案(初學者步驟教學)

.htaccess檔案是架站軟體中很重要的設定檔案

  舉凡資訊安全,搜尋引擎優化SEO)的許多設定都需要借助這個檔案的許多參數設定才能完成.偏偏這個檔案即使多了,少了或是錯了一個字元,都極可能引來網站大當機.身為網路科技素人的我,對於網路上許多相關中英文文章語焉不詳,無法協助自架網站者順利成功完成設定,於是已詳細步驟,圖文並茂的方式,step by step的教學,讓你即使是初學者也能得心應手好好管理開發具有特色,備受歡迎,網路流量傲人的網站.

  筆者使用的是WordPress架站軟體,Bluehost虛擬主機架設網站.所以本文的文章以此為例,供您參考.

  首先,到虛擬主機廠商Bluehost網頁按藍色主選單最右側的【login】選項登入,如下圖:

Bluehost官網登入
Bluehost官網登入

  將帳號密碼依序正確輸入之後,點擊下方的【submit】按鈕完成登入(登錄)動作.登入之後的畫面如下:

Bluehost首頁上半部
Bluehost首頁上半部

  操作滑鼠滾輪向下滾動螢幕,或是在螢幕最右側灰色區域的垂直滾動桿,讓螢幕向下滾甕.集會如下圖出現file manager的選項,點選file manager

Bluehost首頁下半部
Bluehost首頁下半部

  就會出現右圖選項:

進入File Manager畫面之前的選項

  選擇Home Directory與最下方的Show hidden files然後點擊Submit選項,就進入file manager畫面.

  一進入file manager的畫面,如下圖所示:

File Manger畫面
File Manger畫面

  有時候你點選了public_html的資料夾還是看不到.htaccess(正確檔名最前方有顆小點喔!)之類的隱藏檔,如下圖:

File Manger畫面
File Manger畫面

  這樣的情況就有勞你到網頁上方的網址列將其中login=1的字改成showhidden=1,再按enter迴車鍵即可看到這些隱藏檔,如下圖.

File Manger畫面
File Manger畫面

  將游標移至畫面中藍色背景的.htaccess的左側icon按滑鼠右鍵,就會看到如下畫面:

將游標一道畫面中藍色背景的.htaccess的左側icon按滑鼠右鍵,就會看到如下畫面:

  在新顯示的下拉式選單之中,點選View的選項,就會在瀏覽器展開新的網頁在目前的網頁右側,瀏覽器的畫面也會立即顯示這個新的網頁畫面如下:

點擊【view】之後就會出現新視窗可以閱覽檔案內容
點擊【view】之後就會出現新視窗可以閱覽檔案內容

  於是你就可以在目前的畫面,看到public_html檔案夾(也就是一般網站架設教學所稱呼的【根目錄】)的.htaccess檔案中的設定為:

# Use PHP7 Single php.ini as default
AddHandler application/x-httpd-php70s .php
# BEGIN WordPress 
 
RewriteEngine On RewriteBase / 
RewriteRule ^index\.php$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.php [L] 
 
# END WordPress

  回到網路瀏覽器Bluehostfile manager的頁面,重複先前選取view選項的前置動作,只是現在是選取下載download的選項,從瀏覽器下載.htaccess檔案作為備份之用.

File Manger畫面
File Manger畫面

  將此檔案下載到你的電腦中備份,我是存到D:>網頁資料>htaccess>public_html>日期>的目錄之下成為D:>網頁資料>htaccess>public_html>日期>.htaccess的檔案備存,"日期"當然就是備份當時的真實日期.

  接下來點選上述畫面的最右側檔案夾側邊攔,現在輪到備份wp-admin資料夾的.htaccess檔案,如下圖所示:

File Manger畫面

  將此檔案下載到你的電腦中備份,我是存到:

D:>網頁資料>htaccess>wp-admin>日期>

的目錄之下,成為:

D:>網頁資料>htaccess>wp-admin>日期>.htaccess

的檔案備存,"日期"當然就是.htaccess檔案在File Manager畫面上該檔案的原上傳日期.

  接下來依樣畫葫蘆,再將wp-includes檔案夾中的.htaccess檔案備份下來,整個你在Bluehost虛擬主機使用WordPress架站軟體的所有.htaccess的檔案備份,就大功告成了.

  再接下來,請將以上備份在你槽硬碟中的.htaccess檔案的屬性全部改為【唯讀】.如此一來,萬一再接下來如果你需要改變其中.htaccess檔案的某些內容,藉以改善資訊安全,或是搜尋引擎優化的性能,就不至於因為一時的小錯誤,老是網站大當機,需要求助於Bluehost的客服人員了.只要將這些相對應的備份.htaccess檔案重新上傳在相對應的資料夾,就可以解決網站當機問題,迅速回復到先前網站正常運作的情況了.

  但是,如何上傳檔案呢?茲以我現在要改善搜尋引擎優化性能,針對在wp-includes檔案夾的.htaccess檔案所做的變更,當作案例,在此分享:

  首先,我從網頁測速網站GTMatrixPindom雙雙證實得知,我的所有網頁設定如果可以大幅延長瀏覽器快取記憶有效時限,對於搜尋引擎優化性能的提升是最當務之急.而這個件直接的設定就是位於wp-includes檔案夾的.htaccess檔案的相關設定. 為了優化這些性能,WordPress官網建議將相關原始設定必須從:


	ExpiresActive On
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 3 hours"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 week"

  改為:


ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresDefault "access plus 2 days"

  所以,我便免費開源軟體Notepad++開啟了原先備份在自己電腦槽中,相對應的.htaccess備份檔案.

  並用複製,貼上的動作將修改好的新檔案,以【*.*】的檔案型態,將修改好的.htaccess檔案存在新創的標明【修改當天】日期的新檔案夾中.

NotePad++另存檔案的操作細節

   然後回到【file manager】的畫面,將滑鼠移到左側檔案夾側邊欄以左鍵點選【wp-includes】資料夾,並由右側的檔案列表確認點選完成無誤.如下圖所示:

File Manger畫面
File Manger畫面

  接下來,在畫面上方的動作選線選取【上傳】便會出新的網頁.如下圖所示: 確認已經正確設定將這個檔案上傳到/home1/twdreams/public_html/wp-includes 】,便可點擊【選擇檔案】這個選項.接著畫面會出現如下對話框,可以讓你點選想要上傳的檔案,如下圖所示:

檔案上傳
檔案上傳

  點擊【開啟】選項,檔案即開始上傳.畫面變成如下圖所示:

  接下來file manager出現新的對話框與你再作確認,如果沒有錯誤,就點擊選項繼續進行檔案上傳.

檔案上傳
檔案上傳

  然後對話框消失,右下角出現狀態顯示框,如下圖顯示檔案傳輸完畢,就可以點擊畫面中間的【← 返回/home1/twdreams/public_html/wp-includes”選項:

檔案上傳
檔案上傳

  接著,系統就會自動返回原先file manager的畫面,請檢視.htaccess檔案的日期時間是否為上傳檔案當下的日期時間,如果相符就代表上傳成功了.一如下圖所示,上傳的.htaccess檔案正是熱騰騰新鮮出爐的今天!

檔案上傳
hao123.com的點擊連線方框製作完成

如何免費入列中文第一大上網導航入口網站

中國最早的上網導航站點hao123---百度(baidu.com旗下網站,創建於1999年5月,經過10餘年的發展,已成為億萬用戶上網的第一站、中文上網導航的第一品牌。

  所以入列此一中文第一大上網導航入口網站當然是必要的.尤其,如果你架設網站不只是要抒發己志,孤芳自賞的話.試想想,如果在台灣,你只能透過搜尋引擎,而非入口網站的頁面,例如雅虎谷哥微軟或是PCHome,那麼網站與網友的結緣接出機會就會微乎其微,即使你的網站被搜尋引擎所收錄,網頁文章在如何專業,深入淺出,文以載道,圖文並茂,都會形同束諸高閣一樣,乏人聞問的.

  本文[如何免費入列中文第一大上網導航入口網站]接下來會鉅細靡遺地,一步一腳印,執子之手,帶領你一起完成所有步驟,讓即使是網站素人如二個月前的我一樣,也能順利完成所有申請步驟.

hao123網路導航入口網站首頁
hao123網路導航入口網站首頁

在此首頁頁面最左下角,請點擊【關於本站】,就會進入下圖所示的畫面點擊下圖也可以.花點時間了解對此入口網站的基本概念.接下來在此頁面左側邊欄點擊【收錄申請】選項.

hao123網路導航【關於本站】

於是就出現以下新網頁的畫面了.

hao123導航網站友情鏈接
hao123導航網站友情鏈接

現在請接滑鼠移動讓游標位於頁面的logo圖案區域,點擊右鍵選取【複製圖片】的選項.

複製hao123.com的logo圖片至便利貼記憶體中

現在要用到圖形處理軟體,例如PhotoShop,我比較窮,都用免費開源軟體GIMP,所以接下來就只能用此軟體為你示範.不過程序方法大同小異,最終都能殊途同歸,別太緊張擔心了唷!

剛開啟GIMP所出現的畫面
剛開啟GIMP所出現的畫面

 開啟圖形軟體GIMP,出現簡潔畫面如下圖所示,將游標移到上方選單最左邊的【檔案】點擊之後出現下拉選單,再點擊【新增檔案】.會出現【製作新的圖片】對話框,如下圖所示.

GIMP-2
GIMP工作區的下拉式選單

因為hao123.com的logo圖片尺寸146pxX61px,而我們製作網頁所需的logo尺寸規格中最適合的是150pxX150px,所以,我們需先在GIMP軟體中先製作150pxX150px空白圖片,在將此146pxX61px的logo圖片貼在新製作的空白圖片上,就可以既不扭曲變形logo圖片,又可以符合網頁製作新的logo圖片所規範的尺寸規格.

  現在,於右圖的對話框中在【圖片尺寸】上分別輸入寬150(px),高150(px).然後點擊此對話框的【確定]選項.

  接下來按框中下方的【確定】選項即可.

GIMP-製作新圖片對話框
GIMP製作新的圖片對話框

讓游標在工作區中按下右鍵選取【編輯】選項,再選取【貼上】選項即可.

在GIMP工作區貼上先前複製於便利貼記憶體中的logo圖片

接下來,你就會看到下圖工作區中出現尺寸為150pxX150px我們所想要的hao123.com的logo畫面了.

在GIMP軟體中輕鬆完成了logo圖片的編輯流程

現在將現場交給WordPress架站軟體後台頁面,在最左側邊欄選單中點選【外觀】再點選【小工具】選項之後,就會出現如下畫面.

  將游標移到【(Codelights)Interactive Banner】之後按左鍵將此小方框拖曳到右下角【Footer 1】.

WordPress後臺頁面

點擊【Footer 1】方框再點選【(Codelights)Interactive Banner】之後就會出現右圖中這個小工具的對話框,一一填寫之後按下最右下角【儲存】鍵,你的網站每個頁面的最左下角就會出現如下畫面了!

hao123.com的點擊連線方框製作完成
hao123.com的點擊連線方框製作完成
編輯關於hao123.com點擊聯網的方框各選項內容
編輯關於hao123.com點擊聯網的方框各選項內容

回到hao123.com的網頁往下滾動頁面.現在著手開始一一填寫吧!

   第一欄【推廣網址】當然就是閣下您的網站首頁囉!填寫完仔細確認無誤,否則就糗大了.

  第二攔【網站名稱】就照實填寫吧~

  第三欄是【QQ】第四欄是【e-mail】第五欄是【電話】,擇一填寫即可.我沒大陸手機,習慣用QQ和對岸聯繫,當然就只能填寫QQ的電郵網址囉!

  第六欄【推薦分類】,則請到hao123網站首頁下方分類欄尋找選擇自己的網站最適合的種類.這對於適合你的網友能否容易接觸的閣下的網站非常攸關,好好評估選擇,不要流於急躁.如果都找不到適合的,請注意該分類欄最右側有【其他】類別的【更多】選項,再多多研究研究!

  第七欄則是【建站時間】意指建站到現在總共幾個月啦!也請據實填寫.

  第八欄【日訪問量】請給個大約的平均日往客早訪數量.這是可以稽查的到的,也沒有不可據實以報的理由吧!

  第九欄是【網站描述】,應該很好發揮吧!全世界就屬你最明白自己的網站了呀!

  接下來是【給hao123的意見】,這個稍微花點時間觀察試用,冰雪聰明如你,當然是沒問題的啦!

  最後,當然是點擊申請表格最下方的【提交】了.

  恭喜老爺!賀喜夫人!屬於你的部分大功告成啦!接下來就讓hao123的工作人員們去忙吧!

hao123收錄申請提交信息
hao123收錄申請提交信息

好吧!好人就做到底囉!以下是我申請時所填寫的資料.擬就參考參考唄!

築韻集團下轄築韻出版社(主要為旅遊工具書電子書出版品)與築韻空間美學工坊(主要為台灣地區的室內設計裝潢業務).

  網站內容為相關專業內容期盼可以同時分享給兩岸同胞,增進雙方交流,共同提升我中華民族未來的生活品質.

  貴平台logo與相對應的網路連結已設於本網站每一網頁的最左下角,方便網友利用搜尋.

填寫申請提交信息的最後兩項
填寫申請提交信息的最後兩項

貴平台的手機版畫面很棒,內容如此充實,卻能兼顧圖文比例讓使用者極易以圖形辨識(人腦辨識速度圖形遠高於文字).

  桌機版面在此方面如果可以和手機頁面同樣注意使用者辨識速度,以及伴隨而來的滿意度.那就有如錦上添花,更上一層樓了!

最後一個動作,當然是再次檢查一切訊息無誤之後,在表格的最下方點擊【提交】選項囉!

  恭喜老爺!賀喜夫人!就等候審核結果通知吧!