如何設定 VS2008 讓 HTML 在格式化排版時不要破壞版面

分享到噗浪!

有許多網頁設計師還是習慣用 Table 進行網頁版面配置,但各位應該知道在 IE 下, 只要 HTML 的 <img> 標籤與表格儲存格 </td> 之間只要有一個空白字元出現,就會導致網頁版面跑掉「一點點」,有時後就是這「一點點」讓套版人員抓狂。

我們在 Visual Studio 中若使用「格式化文件(Format Document)」功能進行 HTML 排版,預設的情況下,就會導致網站破版,以致於我們很少在 HTML 格式下進行排版作業。

如下圖例是尚未格式化的表格 HTML 原始碼:

 尚未格式化的表格 HTML 原始碼

經過 Visual Studio 排版(Ctrl + E + D)後變成如下圖這樣,雖然比較漂亮,但在 IE 下看卻會破版:

經過 Visual Studio 排版後的HTML

我今天就教各位修改 Visual Studio 中的設定,讓你以後再自動格式化文件時不會再破壞版面了。

以下是設定的步驟:

1. 工具 –> 選項 –> Text Editor –> HTML –> Format –> Tag Specific Options

工具 –> 選項 –> Text Editor –> HTML –> Format –> Tag Specific Options

2. Client HTML Tags –> New Tag... 並新增 img 標籤(Tag)

Client HTML Tags –> New Tag...

New Tag -> img

3. 把 Line breaks 切換到 None 即可,你也可以看到 Preview 欄位的預覽效果。

Client HTML Tags –> img  –> Line breaks –> None

4. 接著修改 td 標籤的設定,並切換到 Before, after opening, and after closing 即可。

Client HTML Tags –> td  –> Line breaks –> Before, after opening, and after closing

---

設定完成後,就可以直接試著格式化文件看看。如下圖就是修改選項後進行格式化的結果:

修改選項後進行格式化的結果

以後就可以放心格式化文件了。

特別提醒

  • 對於已經進入 Production 階段的專案,切勿再使用「格式化文件」功能,以免造成 Code Reviewer 的困擾!
  

此文章由 will 發表於 2009/1/30 上午 12:46:20

永久連結 | 評論 (4) | 此文章的RSSRSS comment feed |

分類: Visual Studio | Tips

標籤: , , , ,

評論

一月 30. 2009 17:14

demo

好棒的東西 我超習慣叫vs自動排版的

demo 台灣

六月 18. 2010 10:30

麥穗

保哥,
我照您的修改後, <img> 後面的確是有 </td>
但是這二者之間,還會多出個空白耶。
這樣一來,版面還是會有問題。



<tr>
     <td>
        <img src="Images/t_Down.gif" /> </td>
     <td>
        &nbsp;</td>
</tr>

麥穗 台灣

六月 18. 2010 11:03

Will 保哥

麥穗: 你用哪一版的 Visual Studio ?

Will 保哥 台灣

六月 19. 2010 09:37

麥穗

VS 2008 team

麥穗 台灣

新增評論


( 您輸入的Email不會顯示於網站上 )

  Country flag

biuquote
  • 評論
  • 線上預覽
Loading