Web開發中html布局指南

Web 表單全球化的 HTML 布局指南

HTML 布局的最佳實施是確保本地化人員只需翻譯字串，因為使用者介面自動將所有控制調整為合適的大小。本地化進程將無需執行調整大小的步驟，因而也就排除了通常 由該步驟導致的錯誤。下面是為全球化設計 Web Form的一些建議。

• 永遠不要將層疊樣式表 (CSS) 屬性用於絕對位置。指定絕對位置將使元素不能被自動 定位和確定大小。

  <!-- Do not do this -->
  <DIV id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">
  

• 表單應採用可用寬度和高度。有兩種方法可做到這一點。第 一種方法是確定主要元素大小，例如將表設定為 width=100%。第二種方法是根據表單的整個大小使用 CSS 運算式設定各元素大小。

  <!-- Table sized to take up entire width of the form-->
    <table width=100%>
  
  <!-- div sized to take up half the width and height of the form -->
  <div style='position:absolute; left: 0; top: 0; 
    height: expression(document.body.clientHeight / 2);
    width: expression(document.body.clientWidth / 2); '>
  

• 每一控制項都應位於單獨的表儲存格中。這使得文本可以獨立 換行，並確保對於其文本布局是從右向左顯示的地區性的對齊正確。
• 允許文本換行。避免對於包含文本的表儲存格應用“不 換行”屬性。只在您希望文本保留在一行中並且有足夠的空間來對該文本進行擴充以適合任何語言的情況下，才使用此屬性。
• 將複選框和 選項按鈕與其標籤文本分隔開。將複選框和選項按鈕的標籤放置在控制項的單獨的儲存格中。這使得文本在變得更長時可以正確換行。但是，您還應對表單進 行設計，以便在對文本進行翻譯後在適當的情況下文本還可以保留在一行中。
• 為增長保留空間，並避免採用固定的寬度。文本在 被翻譯為其他語言後可能會擴充。一個很好的經驗就是為短字串（少於 10 個字元）保留 300% 的增長空間，為中等長度的字串（10-20 個字元）保留 200% 的增長空間，為大型字串（超過 20 個字元）保留 100% 的增長空間。

  一個可接受的解決方案就是將表儲存格寬度設定為表單寬度的百分比，這樣儲存格就可以基於整個表進行擴充。但是，應儘可能少得指定相對大小（100% 除外），因為您希望 HTML 布局引擎為您執行大多數此類工作。

  <!-- Table cell sized to take up one quarter width of the table -->
   <td width=25%>
  

• 在儘可能少的地方設定按鈕大小。經常有一組按鈕應具有相 同的大小。如果可能，應在一個地方為全組按鈕設定此大小。為在列表框和群組方塊中擴充文本而保留空間。
• 儘可能少地設定高度。不 要為包含文本的任何錶儲存格或控制項設定儲存格高度。（您可以為 CSS 元素設定行高度。）否則，如果使用者在瀏覽器中設定了文字大小，頁面的外觀將發生更改。
• 不要在 HTML 標籤中使用左或靠右對齊。通 常，避免為任何錶儲存格設定“align=left”或“align=right”。這些屬性可能會影響文本布局從右向左顯示的地區性的表單布局。
• 避 免採用可能需要更改的內聯 CSS 值。將本地化人員可能需要更改的所有 CSS 值保留在樣式表中，而非內聯。這包括設定頁面字型。