![]() ![]() |
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> 範例結束 |
![]() |