|
|
|
|
|
|
 |
 |
 |
 |
 |
 |
||||
 |
 |
 |
 |
 |
 |
||||
|
目前網頁開發的語言和工具有相當多種，例如ASP.NET、PHP、Ruby On Rails、Flash、Dreamware等等。不過任何本相關的入門書籍，都會先介紹HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)，因為它們是開發網頁的基本語言。如下圖HTML是一種構造化語言，記述「段落」、「表單」、「表格」等構造文外，並可以放入畫像、動畫、聲音、其他網頁等的超連結(HyperLink)等。CSS則是定義的HTML文書樣式(Style)。如果要讓網頁更為生動，另外可以學習文稿程式JavaSrcipt。
網頁樣式CSS和文稿語言Javascrip可以定義在網頁<head>~</head>以及<body>~</body>內，也可以分別保存於外部的檔案。通常CSS外部檔放在「stylesheets」的目錄下，附加檔案名存為*.css，Javascrip外部檔放在「scripts」的目錄下，附加檔案名存為*.js。放在外部的好處就是會讓HTML的構造文顯得簡潔易懂，不僅開發和維護容易，處理速度也會較快。
製作網頁之前，為了開發和維護的容易性，以及瀏覽者的操作便利性，思考整體的網頁目錄結構是很重要的。通常網頁目錄結構如下圖，會根據用途或者功能別等，將網頁分類放在不同的目錄底下(網頁的「橫向寬度」)，還有網頁和網頁之間的從屬關係，又分在不同層級的目錄(網頁的「縱向的深度」)。網頁的「橫向寬度」和「縱向的深度」事前沒有做好設計規劃的話，之後要想變更網頁目錄結構時，會相當的麻煩。
在複雜的網頁目錄結構下，為了避免網頁瀏覽者陷入迷宮，到不了或回不了想要到的地方，「網頁路徑」的規劃設計也相當的重要。通常對於網頁橫向的超連結，我們會在每個網頁放入「菜單(menu)」(例:Menu1 Menu2 ...)，網頁縱向的超連結，我們會在每個網頁放入「索引(index)」(例:Menu1 > SubMenu1 > ...)。相同主題做分頁時，加入「頁數索引(Page Index)」(例:1 2 ...)。網頁目錄結構更複雜的網站，會加入「分類索引」的網頁。
網頁路徑的指定分為「絕對路徑(absolute path)」、「相對路徑(relative path)」。
連結外部檔案時，一定要指定絕對路徑或URL(Uniform Resource Locator)，例如"http://www.chou-it.com"。內部檔案的路徑則兩者都可以設定，但是盡量避免使用絕對路徑。理由是路徑會相當冗長，輸入不容易之外，當要將開發環境下整體的網頁目錄移植到正式環境時，若網頁根目錄所在位置不同時，必須重新設定。網頁目錄結構被改變時，無論是絕對路徑或者是相對路徑，都必須做修改。
因此再次重申，事前規劃設計好網頁目錄結構和路徑，是網頁開發一項很重要的工作之一。
|
|
|
 | 如何提出RFP找到適合的系統廠商(一) |
 | 解決Flash CS4動態檔案超連結的問題 |
 | 超簡單SEO對策-SiteMap的製作(一) |
 | 網頁製作入門(三) |
 | 製作業務流程的重要性(一) |
 | 性能測試(一) |
 | 網頁製作入門(一) |
 | 網頁製作入門(二) |
 | 如何發揮專案戰情室的功能 |
 | 超簡單SEO對策-SiteMap的製作(二) |
