製作3D書本網頁

1 / 13, 2012 HTML , 架站技巧 , 網路奇事

最近3D非常紅,很多東西都追求要有3D感,網路書本也不例外,雖人很多百貨公司的DM都有3D感了,不過大多數都是Flash,之前才說Flash已死,所以一定要有替代方案,這時HTML 5就發揮用處了

下載:http://s3131212.com/download.php?s=book.zip
英文說明:http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html


主要的程式碼都在pageflip.js,而書本內容則是在index.html,所以依照你要編輯的部分來選擇檔案
1.新增頁面
請在:
</div>
</div>
<script type=”text/javascript” src=”pageflip.js”></script>
</body>
<html>

之前插入以下語法(中文部分可以改,英文部分不行)

<div>
<h2>主題</h2>
<p>內容</p>
</div>
</section>
2.我的書本是亂碼
裡面預設是用utf-8,你可以選擇以下2種方法
(1)改預設編碼:
將index.html檔裡面</head>前的以下程式碼:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

改成:

<meta http-equiv=”Content-Type” content=”text/html; charset=big5″ />

(2)如果以上方法沒有用,請將打好的文字透過軟體或網站轉成utf-8,應該就能正常了
3.能不能改樣式
可以,編輯css檔即可