![]() ![]() |
5.3:H205102 在網頁內容呈現設計時,避免以表格做多欄文字的設計不良設計下面的不良設計是使用表格的方式作為網頁版面文字編排的工具。 不良設計: <TABLE width="800" height="75" border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="200" bgcolor="#eeeeee">資料一</TD> <TD width="400" bgcolor="#9999FF">主要網頁內容資料二</TD> <TD width="200" bgcolor="#999999">資料三</TD> </TR> <TR> <TD bgcolor="#eeeeee">【內容】</TD> <TD bgcolor="#9999FF">【內容】</TD> <TD bgcolor="#999999">【內容】</TD> </TR> <TR> <TD bgcolor="#eeeeee"></TD> <TD bgcolor="#9999FF"></TD> <TD bgcolor="#999999"></TD> </TR> </TABLE> 範例結束 正確示範網頁設中應要盡量避免使用表格來作為網頁版面的編排,下面的正確例子是使用style sheets的方式來進行網頁中文件的編排。 正確範例: <HEAD> <STYLE type="text/css"> <!-- #col1{ top:10%; left:0%; width:20%; background:#eeeeee; position:absolute; overflow: hidden; height: 90%; background-color: #eeeeee; } #col2{ top:10%; left:20%; width:40%; background:#eeeeee; position:absolute; overflow: hidden; height: 90%; background-color: #9999FF; } #col3{ top:10%; left:60%; width:20%; background:#D5CFB0; position:absolute; overflow: hidden; height: 90%; background-color: #999999; } --> </STYLE> </HEAD> <DIV id="col1"> <P align="center">資料一 </P> <P align="center">【內容】</P> </DIV> <DIV id="col2"> <P align="center">主要網頁內容資料二 </P> <P align="center">【內容】</P> </DIV> <DIV id="col3"> <P align="center">資料三</P> <P align="center">【內容】</P> </DIV> 範例結束 |
![]() |