無障礙網路空間服務網無障礙網路空間服務網

3.5:H203004 要使用相對尺寸(如%)而非絕對尺寸(如像素)

不良設計

以下使用絕對尺寸設定表格寬度為 300像素(pixels)、其第一列儲存格寬度使用絕對尺寸設定為225像素(pixels)及第二列儲存格高度使用絕對尺寸設定為20像素(pixels),使用者不能依照個人需求自行調整表格的尺寸大小。

不良設計:

            <TABLE width="300" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF6600">
            <TR>
            <TH bgcolor="#FFFFCC">絕對尺寸的設計</TH>
            </TR>
            <TR>
            <TD width="225px" bgcolor="#FFFFCC">資料123</TD>
            </TR>
            <TR>
            <T height="20px" bgcolor="#FFFFCC">資料456</TD>
            </TR>
            </TABLE>
            

以下框架使用絕對尺寸設定其欄寬(cols)屬性,使用者不能依照個人需求自行調整框架的尺寸大小。

不良設計:

  
          <FRAMESET cols="50,40" framespacing="1">
          <FRAME name="contents" title="內容" src="frame1.htm" scrolling="auto" target="main">
          <FRAME name="menu" title="選單" target="_blank" scrolling="auto" noresize src="menu.htm">
          </FRAMESET>
          <NOFRAMES>
          <P>[<A href="contents.htm">內容</A>]</P>
          <P>[<A href="menu.htm">選單</A>] </P>
          </NOFRAMES>          
          

以下框架使用絕對尺寸設定其列高(rows)屬性,使用者不能依照個人需求自行調整框架的尺寸大小。

不良設計:

  
          <FRAMESET rows="50,40" framespacing="1">
          <FRAME name="contents" title="內容" src="frame1.htm" scrolling="auto" target="main">
          <FRAME name="menu" title="選單" target="_blank" scrolling="auto" noresize src="menu.htm">
          </FRAMESET>
          <NOFRAMES>
          <P>[<A href="contents.htm">內容</A>]</P>
          <P>[<A href="menu.htm">選單</A>] </P>
          </NOFRAMES>          
          

正確示範

此一表格的寬度為 80%、第一列儲存格寬度使用20%及第二列儲存格高度使用80%,這是一種相對尺寸的設計,表格大小將隨著視窗大小作彈性變動,呈現合適的大小。

正確範例:

            <TABLE width="80%" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF6600">
            <TR>
            <TH bgcolor="#FFFFCC">相對尺寸的設計</TH>
            </TR>
            <TR>
            <TD width="20%" bgcolor="#FFFFCC">資料123</TD>
            </TR>
            <TR>
            <TD height="80%" bgcolor="#FFFFCC">資料456</TD>
            </TR>
            </TABLE>
            

以下框架的欄寬為 50%,這是一種相對尺寸的設計,框架大小將可以隨著視窗大小作彈性變動,呈現合適的大小。將各欄的欄寬以百分比的方式配置,可將其中一個頁寬設為"*"作為填滿的設定。

正確範例:

            <FRAMESET cols="50%,*" framespacing="1">
            <FRAME name="contents" title="內容" src="frame1.htm" scrolling="auto" target="main">
            <FRAME name="menu" title="選單" target="_blank" scrolling="auto" noresize src="menu.htm">
            </FRAMESET>
            <NOFRAMES>
            <P>[<A href="contents.htm">內容</A>]</P>
            <P>[<A href="menu.htm">選單</A>] </P>
            </NOFRAMES>
            

以下框架的列高為 50%,這是一種相對尺寸的設計,框架大小將可以隨著視窗大小作彈性變動,呈現合適的大小。將各欄的列高以百分比的方式配置,可將其中一個頁高設為"*"作為填滿的設定。

正確範例:

            <FRAMESET rows="50%,*" framespacing="1">
            <FRAME name="contents" title="內容" src="frame1.htm" scrolling="auto" target="main">
            <FRAME name="menu" title="選單" target="_blank" scrolling="auto" noresize src="menu.htm">
            </FRAMESET>
            <NOFRAMES>
            <P>[<A href="contents.htm">內容</A>]</P>
            <P>[<A href="menu.htm">選單</A>] </P>
            </NOFRAMES>
            
網頁內容結束分隔線