美工與程式設計師的Web工作如何做到相對分離？

Mr_Chenph發表於2014-04-24
程式設計師Web

        公司某老系統使用的是asp，大量的asp指令碼夾在頁面中，改個小樣式美工就得拉著程式設計師，嚴重佔用資源。使用java比較好解決，freemarker之類的模板語言，整個巨集傳參就可以做到相對分離，asp的還真沒做過，於是便想到了使用css，遭到同事的反對，覺得不可行，我認為是可行的，只是需要美工和程式設計師按照約定俗成的一些命名方式即可搞定，程式碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>誰說這樣不行的？</title>
</head>
<style>
body{ font-size:12px}
#lb1{
	margin:0 auto;
	width:500px;
}
#lb1 .lb{
 	width:100%;
	border: 1px dashed #336633;
	border-bottom:none;
}
#lb1 .lb td{
	height:26px;
	border-bottom: 1px inset #999999;
}
#lb1 .lb .td1{
	width:30px;
	text-align:center;
	border-right: 1px solid #000000;
}
#lb1 .lb .td2{
	padding-left:10px;
}
#lb1 .ym{
	width:100%;
	border-bottom: 1px inset #999999;
}
#lb1 .ym .td1{
	text-align:right;
}
#lb1 .ym .td2{
	width:40px;
	text-align:center;
}
#lb1 .ym .td3{
	width:40px;
	text-align:center;
}
#lb1 .ym .td4{
	text-align:left;
}
</style>
<body>
<div id="lb1">
  <table class="lb">
        <tr>
          <td class="td1">1</td>
            <td class="td2">南京護士被打羅生門：“心因性癱瘓”受質疑</td>
        </tr>
        <tr>
          <td class="td1">2</td>
            <td class="td2">哈登被惹怒更衣室嗆聲記者:你在哪個媒體工作？</td>
        </tr>
        <tr>
          <td class="td1">3</td>
            <td class="td2">阿拉伯茶被指新型毒品毒效驚人</td>
        </tr>
        <tr>
          <td class="td1">4</td>
            <td class="td2">從建軍到強軍，從綠水到遠洋</td>
        </tr>
        <tr>
          <td class="td1">5</td>
            <td class="td2">讓孩子屬於社會的五個烏托邦寄想</td>
        </tr>
        <tr>
          <td class="td1">6</td>
            <td class="td2">重慶追訴首批打黑刑訊逼供案</td>
        </tr>
        <tr>
          <td class="td1">7</td>
            <td class="td2">南京護士被打羅生門：“心因性癱瘓”受質疑</td>
        </tr>
        <tr>
          <td class="td1">8</td>
            <td class="td2">媒體曝核電領域高層落馬原因：涉洩露國家機密</td>
        </tr>
        <tr>
          <td class="td1">9</td>
            <td class="td2">李連杰笑對貪三億指責 壹基金別步紅會後塵</td>
        </tr>
        <tr>
          <td class="td1">10</td>
            <td class="td2">袁伊文：農民“私立政府”案不是笑話是警報</td>
        </tr>
  </table>
    <table class="ym">
        <tr>
            <td class="td1">首頁</td>
            <td class="td2">上一頁</td>
            <td class="td3">下一頁</td>
            <td class="td4">尾頁</td>
        </tr>
  </table>
</div>
</body>
</html>

正如各位所看到的，資料顯示區域沒有任何樣式，這個區域由開發人員完成；美工完成CSS的編寫即可；美工和程式設計師只需要相互確定好class的命名規則即可。本人拙見，希望對各位實際工作有幫助。最後效果如下圖，還不錯吧？

相關文章