关于美工ps出图table格式的处理

　　最近做银行项目，需要页面演示的demo，因为不必实际交易，美工直接用ps给出了各个页面的html文件；纠结的是每个页面都是清一色table、tr、td，于是问题来了......

　　1.滚动条问题

　　有些超出手机浏览器height的页面，需要除去header、footer后实现滚动效果，我们的修改方法是将table一分为三，中间部分使用div、ul、li来实现；

　　2.添加滚动条后，table竖白条问题

　　拆开table后发现，header、footer部分的table多数都出现了竖白条问题，google浏览器中相对还好些，在ie6、ie7显示错位严重。

　　分析原因：美工的ps出图格式为table，使用属性colspan来定义td的宽度，当table拆开后相对于全局的colspan就相对的无法适用，需要新的colspan来定义td，比如：

初始table界面:

<table id="Table_01" width="404" height="607" border="0" cellpadding="0" cellspacing="0">
    <tr>
　　　　　　<td colspan="7"></td>
    </tr>
    <tr>
    　　<td></td>
       <td colspan="5"><td>
　　　　　　 <td></td>
　　　　</tr>
......
　　　　<tr>
        <td><img src="images/spacer.gif" width="67" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="14" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="80" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="68" height="1" alt=""></td>
    </tr>
</table>

 

添加滚动条后界面：　

<table id="Table_01" width="404" height="158" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td></td>
            <td ></td>          
            <td ></td>
        </tr>
    </table>
    <div class="container">
        <ul>
            <li><img src="images/20130321195721_07.jpg" width="39" height="47" alt=""></li>
......   
            <li><img src="images/20130321195721_20.jpg" width="39" height="47" alt=""></li>          
        </ul>
    </div>
//剩余tr的colspan不做修改
<table id="Table2" style="position: absolute; left: 0px; top: 544px;" width="404" height="63" border="0" cellpadding="0" cellspacing="0">
.....
       <tr>
            <td colspan="4"></td>
            <td colspan="2"></td>
            <td></td>
            <td colspan="2"></td>
            <td colspan="4"></td>
        </tr>
　　　　  <tr>
        <td><img src="images/spacer.gif" width="67" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="14" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="80" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="81" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="13" height="1" alt=""></td>
        <td><img src="images/spacer.gif" width="68" height="1" alt=""></td>
    </tr>
</table>

　　3.无滚动条，页面含有自定义input等控件时出现的白边

　　自定义input替换美工的图片后，可能因为width过大而错乱了tr td宽度，导致table出现白边，只需减少将input宽度，适当调节即可解决问题。

　　4.ios是否切换img控件的实现

　　两个方法，一是因为一个是否按钮切换这个页面，效率太低；另一种是只对这个<img/>的src重新赋值，明显后者更优，两张图片：yes.jpg和no.jpg，实现方法如下：

html中图片添加事件

<img src="images/yes.jpg" width="117" height="34" alt="" onclick="show(this)">

js中代码:

function show(img){
    var urls = img.src.split("/");
    var imgName = urls[urls.length-1];

    if(imgName == "yes.jpg"){
        img.src="images/no.jpg";
    }
    else{
        img.src="images/yes.jpg";
    
    }
}
ps: 为了不引入jquery，就不用什么show、hide事件了,直接这么简化写

　　5.input[type="text"]的mouse事件

<input type="text"  style="height: 43px; width: 326px;  value="请输入" onmouseover="this.focus()"  onmouseout="if(this.value=='')this.value='请输入';" onfocus="this.select()"  onclick="if(this.value=='请输入')this.value=''">

　　6.textarea的mouse事件

html页面：

 <textarea style="width:260px;height:77px"  onfocus="textareaKeyDown(this);"  onblur="textareaKeyUp(this);">
　　 请输入您的建议
 </textarea>

js脚本：

textareaKeyUp = function(el) {
    var value = el.value;
    if (value === "") {
        el.value = "请输入您的建议！";
    }
}
textareaKeyDown = function(el) {
    var value = el.value;
    if (value == "请输入您的建议") {
        el.value = "";
    }
}

　　7.vs和dreamweaver创建页面链接方式的差异

　　在dreamweaver中，为img创建链接a时，会自动添加border=0属性；
　　而在vs中添加链接a时，img会默认属性（即添加上1px的border），需要手动再设置border=0