網頁記錄[update 2015/09/02]

網頁設計師必備的工具:

• 40 個設計師必備免費資源，超推懶人包！
• [應用工具] 7 款超強大的線上UI 設計工具 - 設計師必備 !!!
• 美工設計師必備配色好用工具
• RGB配色表

把 PDF 嵌入網頁中

需注意的一點，PDF 需要可以讓 Google Doc 找的到


網頁 from : 如何在網頁中嵌入 PDF 檔案？
http://www.qna.tw/how-to-embed-pdf-file-into-web-page

以下截自文章：

1.
把你的 PDF 原始檔上傳到自己網站上，例如：Examle.pdf

2.
利用下列語法，將線上瀏覽介面嵌入：
<|| iframe src=”http://docs.google.com/gview?url=pdf檔案網址&embedded=true” style=”width:600px; height:500px;” frameborder=”0″ ||><||/iframe||>
其中：
。http://docs.google.com/gview
 使用Google的線上閱讀器的網址，它是由 Google Docs 所提供的工具。
。pdf檔案網址
 例如上述檔案的網址就是：http://www.qna.tw/upload_file/EMASREPORT.pdf
 但需注意，這個網址需要經過 Escape 處理，才不會出現語法衝突的問題。
。width:600px; height:500px;
 就是設定閱讀器尺寸的 CSS 語法，也可以再加一些其他效果。

3.
完成後就可以線上閱讀了。但是，如果每天開啟網頁都立即載入的話，會太浪費頻寬。
所以可以在檔案的下載鏈結旁加入「線上閱讀」的鏈結，而在點擊後才開啟閱讀器的介面，就可以讓操作流程快速又便利了。

4.
程式碼範例：(詳細範例請看原範例)

function sample() {    
if (jQuery('#pdf_viewer').size() > 0)
{
jQuery('#pdf_viewer').remove() ;
    } else {
jQuery('#sample').append('<|| iframe id="pdf_viewer"
src="http://docs.google.com/gview?url=http://www.qna.tw/upload_file/EMASREPORT.pdf&embedded=true"
mce_src="http://docs.google.com/gview?url=http://www.qna.tw/upload_file/EMASREPORT.pdf&embedded=true" style="width:540px;height:540px;border:#888 solid 1px"
frameborder="1"||><||/iframe||>') ;
    }
}