跳到主要內容
:::|

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

說明:由於身心障礙者會因個別的使用需求,而調整瀏覽網頁內容視窗的大小。為求視窗大小改變後,維持網頁內容的可讀性,應此需使用相對尺寸,以利視窗內的網頁內容可以隨視窗大小自動作彈性的變化。

範例:對於文字標籤FONT、表格TABLE、頁框 FRAME以及樣式表Style Sheet等設計都應該採用相對尺寸的設計。 以下舉的是一個表格的例子,表格的寬度設定為 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>

  <TD 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" >

</FRAMESETt>

 

<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>

上一頁| 回首頁