Web界面设计

表单元素的表现：
  1.用户与表单进行交互时的设置鼠标进行不同样式切换

<input id="txt_title" onfocus="this.style.background='#E6EDFD none repeat scroll 0 0'"
 onblur="this.style.background='1px solid #FFF;'"  type="text" maxlength="30" />

  2.文本框引导用户输入

<input id="g_label" type="text" style="width:100px;" onblur="if(this.value=='')
this.value = this.defaultValue" onfocus="if(this.value=='请输入楼盘名') this.value='';" value="请输入楼盘名" />

  3.嵌入页面

<iframe id="mapifrme" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" width="330"
height="216" src=""></iframe>

  4.各类备注、报错、提示信息
例如：

 1<div id="CloseDiv">
 2                    <span><a></a></span>
 3                    <font color="red">请详细填写基本资料，有利于别人更好地了解商铺！</font>
 4                    <a title="关闭提示" style="float:right;color: #FF8800;
 5    display: block;" onclick="hiddenDiv();" href="javascript:;">关闭提示</a> 
 6                    
 7                </div>
 8                <!--反馈信息-->
 9                <div id="lbl_show">
                    <div class="SaveLayer hidden"><span></span>恭喜，操作成功！</div>
                </div>
/*提示，是由一个操作所引导的提示页面，并独立成提示区域，通常在页面的顶部显示。*/
#CloseDiv span a
{
    color: #FF8800;
    display: block;
    height: 28px;
}
#CloseDiv,.msg
{
    background: #FFFFCC none repeat scroll 0 0;
    border: 1px dashed #FFCC33;
    height: 28px;
    line-height: 28px;
    margin: 0 0 8px;
    padding: 0 8px;
    text-align: left;
}
#CloseDiv a
{
    color: #0055CC;
    font-size: 13px;
}
#CloseDiv span
{
    width: 28px;
    background:transparent url(../images/fankui.gif) no-repeat -116px -39px;
    float: left;
}
/*反馈 操作成功，或者失败*/
.Wrong span
{
    color: #FF8800;
    display: block;
    height: 28px;
    float:left;
    padding:0 0 0 28px;
    background:transparent url(../images/fankui.gif) no-repeat scroll -116px -8px;
}
.SaveLayer,.Wrong{
    border:1px dashed #DDDDDD;
    font-weight:bold;
    height:28px;
    margin:6px 0;padding: 0 8px;
    line-height:28px;
    text-align:left;
}
.SaveLayer span
{
    color: #FF8800;
    display: block;
    height: 28px;
    float:left;
    padding:0 0 0 28px;
    background:transparent url(../images/fankui.gif) no-repeat scroll -116px -104px;
}

   5.地图标记：

 1<dl><dt class="dtlong">标记地图：</dt><dd>
 2                <input id="g_mapid" type="hidden"  value="21" />
 3
 4                <input id="g_label" type="text" style="width:100px;" onblur="if(this.value=='') this.value = this.defaultValue" onfocus="if(this.value=='请输入楼盘名') this.value='';" value="请输入楼盘名" />
 5                <input id="g_addr" type="text" style="width:100px;" value="零陵路天钥桥路" />
 6                <input id="btn_enter" class="button" type="button" onclick="setSPaddress();" value="标记地图"/>
 7                <p class="msg">规范的输入格式为：道路门牌号码、交叉路口</p>
 8                <iframe id="mapifrme" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" width="330" height="216" src=""></iframe>
 9                </dd></dl>

function setSPaddress()
    {
        var url ="";
        var _mapid = document.getElementById("g_mapid").value;
        var _label = document.getElementById("g_label").value;
        var _addr = document.getElementById("g_addr").value;
        url = "http://www.ddmap.com/mstmap50007/g4blog_map.jsp?g_mapid="+_mapid+"&g_label="+_label+"&g_addr="+_addr;
        document.getElementById("mapifrme").src = url;
    }

   6.界面流程图

流程演示：图形化的展示，更直观有效的告诉用户操作的简单快捷性；
  
是我做一个页面的时候想到的，第一次设计这样的页面。