美工與程式設計師的Web工作如何做到相對分離?
阿新 • • 發佈:2018-12-29
公司某老系統使用的是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的命名規則即可。本人拙見,希望對各位實際工作有幫助。最後效果如下圖,還不錯吧?