標籤

2017年9月15日 星期五

首頁--default.html解析

在下平常幫企業寫的首頁，長成這個模樣：
這是一般企業  web 系統應該有的三大元素：招牌(公司名稱、系統名稱)，登入畫面(使用者名稱、密碼)，選單(該使用者可以操作的項目)。首頁就回連結到資料庫，先核對使用者名稱是否存在，密碼是否正確，再根據使用者的權限動態展開選單，目前各位看到的是 TreeView 物件展開的結果。選單就是扮演著各個子系統互相溝通的橋樑。
回頭看看我們網站的首頁，有特別調整過： 
360° 3D 全方位互動式網站首頁 (點我)
會發覺我把招牌換成地球，然後取消登入畫面，將選單改成幾個按鍵。
讓我們來解析首頁 default.html：

第 1 行 <!DOCTYPE html>  表示這是HTML5網頁，瀏覽器必須支援HTML5才能正常操作。 IE10(含)以下者，就無法正常開啟網頁 ，例如以 IE8 來開啟首頁，會看到下面這個畫面：
銀河系和地球都不見了。
第 3 行 <html>  宣告以下開始網頁內容，html 標籤都是成對出現的，所以再網頁的最後一行會出現 </html>。
第 5 行 <head>  宣告 head 標籤，在 21 行會以</head>結束。
第 6 行 <title>  宣告網頁的標題，同樣以</title>結束。
第 7 ~13行 宣告本網頁所使用的javascript控制項，放在 lib 目錄，必須確定參考的檔案存在指定的位置。
第 14 行 <script src="js/ThreeEarth.js"></script>  將javascript程式分拆出來到另外一個檔案，取名 ThreeEarth.js，放在 js 目錄，同樣以</script>結束。
第 15 ~20行 <style>。。。</style>設定為全螢幕。
第 22 行 <body style="background-color:#000000; font-size: medium; font-weight: bold;">  宣告 body 標籤宣告網頁內容，背景設為黑色，字型為中等、粗體。在 39 行會以</body>結束。
第 23 行 <table width="100%">  宣告表格寬度為100%，在 33行會以</table>結束。
第 24 行 <tr>  在表格中產生一行(row)，在 32行會以</tr>結束。
第 25 ~31行 表格共有一行七列，，每一格的內容超連結到其他網頁。
第 34 ~35行 <div id="WebGL-output"></div>宣告ThreeEarth.js輸出區之名稱。
第 37 行 window.onload = init; 呼叫ThreeEarth.js的 init函數。
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)