Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [CSS/HTML] 十三行博物館網站跨瀏覽器不相容情形之改善建議

Changed By: HP
Change Date: August 10, 2011 11:57PM

[CSS/HTML] 十三行博物館網站跨瀏覽器不相容情形之改善建議
一、跨瀏覽器不相容情形描述:

1. 「網站導覽功能列」文字原應以水平書寫,但因瀏覽器不相容,造成擠壓而成垂直書寫,版本因而過大。
2. 「站內搜尋功能列」因相同原因,原以水平書寫部份轉為垂直書寫,造成版面擠壓,佔據版面過大區域,影響呈現效果。

二、不相容情形涵蓋瀏覽器:Firefox系列、Google Chrome。
二、不相容情形涵蓋瀏覽器:Firefox系列、Google Chrome、IE7 標準模式、IE8 標準模式。

三、不相容情形影響範圍:全網站

四、改善建議與分析

分析:

網站版面出現瀏覽器不相容之頂部之導覽功能區因使用「多層表格」進行版面排版,同時又不必要地在「第一層表格」(見所附原始碼)將表格分為「左中右」三塊,而將主要的「導覽功能區」壓縮在「右區塊」。再加以將無任何內容之左、中區塊設定佔據過大版面,因此造成原為水平書寫之文字,擠壓為垂直書寫。

改善建議:
在可以改動原有排版模式的前提下,建議取消「第一層表格」,直接以「第二層表格A」及「第二層表格B」呈現,同時將二份表格設定為「水平置右」(align=right),寬度設為250px~300px (表格A應較表格B寬),二表格之間加以「換行」。如此即可以達到原設計之呈現效果。(經 Firefox 實測)

若在不改動原有原始碼架構的前提下,建議將「第一層表格」的左與中區塊(儲存格1與儲存格2)之寬度設壓低,讓右區塊(儲存格3)寬度至少佔有 350px。如此設定版面將能大致以原有設計呈現。

最後,在整體設計上,「導覽功能區」在原始設計上 (以IE8之呈現為準) 距視窗/瀏覽器之上頂部仍有一段距離,在使用者瀏覽時會造成瀏覽效率降低,資訊呈現的不集中。建議可縮小網站整體距頂部之距離,提高資訊對使用者之可及性。
最後,在整體設計上,「導覽功能區」在原始設計上 (以 IE8 Quirks 模式之呈現為準) 距視窗/瀏覽器之上頂部仍有一段距離,在使用者瀏覽時會造成瀏覽效率降低,資訊呈現的不集中。建議可縮小網站整體距頂部之距離,提高資訊對使用者之可及性。

<xmp> <table border="0" cellspacing="0" cellpadding="0" align=center> (第一層表格)
<tr>
<td align="right" rowspan=2 width=80%></td> (儲存格1)
<td ><p class="c_top"></p></td> (儲存格2)
<td align="right" valign="center" class="topnav"> (儲存格3)
<table border="0" cellpadding="10" cellspacing="0" class="cfont" width=100%> (第二層表格A)
<tr class="topnav">
<td align="center" class="topnav"><a href="main.jsp" class="top" title="回首頁">回首頁</a></td><td>│</td>
<td align="center" class="topnav"><a href="sitemap.jsp" class="top" title="網站導覽">網站導覽</a></td><td>│</td>
<td align="center" class="topnav"><a href="../sshm/main.jsp" class="top" title="中文版">中文版</a></td><td>│</td>
<td align="center" class="topnav"><a href="http://en.sshm.tpc.gov.tw/" class="top" title="English">English</a></td><td>│</td>
<td align="center" class="topnav"><a href="http://jp.sshm.tpc.gov.tw/" class="top" title="日文版">日文版 </a></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="2" width=70%> (第二層表格B )
<tr align="center" valign="middle">
<!--td align="center" class="topnav"><a href="ordermail.jsp" class="top" title="訂閱電子報" style="font-size:80%">訂閱電子報</a</td><td class="topnav">│</td-->
<td><a href="mailto:sshm@ms.tpc.gov.tw" title="開新視窗,出現寄信工具"><img src="./images/email.gif" alt="聯絡我們" align="absmiddle"></a>&nbsp;</td><td class="topnav">│</td>
<td class="cfont">站內搜尋</td>
<form name="search" method="post" action="search.jsp">
<td><input name="keyword" type="text" size="12" class="cfont" value="請輸入關鍵字" onFocus="javascript: if (this.value=='請輸入關鍵字') this.value='';" onBlur="javascript: if (this.value=='') this.value='請輸入關鍵字';" /></td>
<td>
<INPUT TYPE="IMAGE" NAME="button" SRC="images/search.gif" style="cursor: hand">
<a href="sitemap.jsp" accesskey="M" title="主要導覽區"><font color="#dddddd" style="font-size:7pt">:::</font></a>
</td>
</form>
</tr>
</table>
</td>
</tr>
</table>
</xmp>

Original Message

作者: HP
Date: August 10, 2011 11:49PM

[CSS/HTML] 十三行博物館網站跨瀏覽器不相容情形之改善建議
一、跨瀏覽器不相容情形描述:

1. 「網站導覽功能列」文字原應以水平書寫,但因瀏覽器不相容,造成擠壓而成垂直書寫,版本因而過大。
2. 「站內搜尋功能列」因相同原因,原以水平書寫部份轉為垂直書寫,造成版面擠壓,佔據版面過大區域,影響呈現效果。

二、不相容情形涵蓋瀏覽器:Firefox系列、Google Chrome。
二、不相容情形涵蓋瀏覽器:Firefox系列、Google Chrome、IE7 標準模式、IE8 標準模式。

三、不相容情形影響範圍:全網站

四、改善建議與分析

分析:

網站版面出現瀏覽器不相容之頂部之導覽功能區因使用「多層表格」進行版面排版,同時又不必要地在「第一層表格」(見所附原始碼)將表格分為「左中右」三塊,而將主要的「導覽功能區」壓縮在「右區塊」。再加以將無任何內容之左、中區塊設定佔據過大版面,因此造成原為水平書寫之文字,擠壓為垂直書寫。

改善建議:
在可以改動原有排版模式的前提下,建議取消「第一層表格」,直接以「第二層表格A」及「第二層表格B」呈現,同時將二份表格設定為「水平置右」(align=right),寬度設為250px~300px (表格A應較表格B寬),二表格之間加以「換行」。如此即可以達到原設計之呈現效果。(經 Firefox 實測)

若在不改動原有原始碼架構的前提下,建議將「第一層表格」的左與中區塊(儲存格1與儲存格2)之寬度設壓低,讓右區塊(儲存格3)寬度至少佔有 350px。如此設定版面將能大致以原有設計呈現。

最後,在整體設計上,「導覽功能區」在原始設計上 (以IE8之呈現為準) 距視窗/瀏覽器之上頂部仍有一段距離,在使用者瀏覽時會造成瀏覽效率降低,資訊呈現的不集中。建議可縮小網站整體距頂部之距離,提高資訊對使用者之可及性。
最後,在整體設計上,「導覽功能區」在原始設計上 (以 IE8 Quirks 模式之呈現為準) 距視窗/瀏覽器之上頂部仍有一段距離,在使用者瀏覽時會造成瀏覽效率降低,資訊呈現的不集中。建議可縮小網站整體距頂部之距離,提高資訊對使用者之可及性。

<table border="0" cellspacing="0" cellpadding="0" align=center> (第一層表格)<br /> <tr><br /> <td align="right" rowspan=2 width=80%></td> (儲存格1)<br /> <td ><p class="c_top"></p></td> (儲存格2)<br /> <td align="right" valign="center" class="topnav"> (儲存格3)<br /> <table border="0" cellpadding="10" cellspacing="0" class="cfont" width=100%> (第二層表格A)<br /> <tr class="topnav"><br /> <td align="center" class="topnav"><a href="main.jsp" class="top" title="回首頁">回首頁</a></td><td>│</td><br /> <td align="center" class="topnav"><a href="sitemap.jsp" class="top" title="網站導覽">網站導覽</a></td><td>│</td><br /> <td align="center" class="topnav"><a href="../sshm/main.jsp" class="top" title="中文版">中文版</a></td><td>│</td><br /> <td align="center" class="topnav"><a href="http://en.sshm.tpc.gov.tw/" class="top" title="English">English</a></td><td>│</td><br /> <td align="center" class="topnav"><a href="http://jp.sshm.tpc.gov.tw/" class="top" title="日文版">日文版 </a></td><br /> </tr><br /> </table><br /> <br /> <table border="0" cellpadding="0" cellspacing="2" width=70%> (第二層表格B )<br /> <tr align="center" valign="middle"><br /> <!--td align="center" class="topnav"><a href="ordermail.jsp" class="top" title="訂閱電子報" style="font-size:80%">訂閱電子報</a</td><td class="topnav">│</td--><br /> <td><a href="mailto:sshm@ms.tpc.gov.tw" title="開新視窗,出現寄信工具"><img src="./images/email.gif" alt="聯絡我們" align="absmiddle"></a>&nbsp;</td><td class="topnav">│</td><br /> <td class="cfont">站內搜尋</td><br /> <form name="search" method="post" action="search.jsp"><br /> <td><input name="keyword" type="text" size="12" class="cfont" value="請輸入關鍵字" onFocus="javascript: if (this.value=='請輸入關鍵字') this.value='';" onBlur="javascript: if (this.value=='') this.value='請輸入關鍵字';" /></td><br /> <td><br /> <INPUT TYPE="IMAGE" NAME="button" SRC="images/search.gif" style="cursor: hand"><br /> <a href="sitemap.jsp" accesskey="M" title="主要導覽區"><font color="#dddddd" style="font-size:7pt">:::</font></a><br /> </td><br /> </form><br /> </tr><br /> </table><br /> </td><br /> </tr><br /> </table><br />