dreamweaver学习笔记

   做开发,觉得web页面设计的好坏相当重要。

   一个系统的基本功能完成以后,如果页面设计的好,将给用户体验添加无限加分，此为其好处之一。最近在做一个项目的demo设计,更是感觉web页面之重要性:一个好的demo不仅仅能够让用户体验得到提升,还能够帮助程序员梳理系统的设计开发。

以下是自己做demo过程中的一些体验：（使用的是dreamweaver cs5）
1） 实现页面和代码的拆分:
 
点击代码可以直接编辑代买,点击设计可以从视图上直接编辑.点击实时视图可以随时查看设计效果.
2） 实现代码和页面的左右结构或者上下结构分离:
点击查看,选择垂直拆分,则为左右结构显示代码和设计图.否则为上下结构显示代码和设计图.
3） 插入表格:
选择插入表格.可以设置每个单元格的css样式.也可以选择右方较简洁的插入单元.
4） 插入图片:
选择插入图片.可以选择要插入的图片,具体代码如下:
<td colspan="2" rowspan="6"><img src="image.jpg" width="100" height="120" />
<br/>
<input type="file"class="search-box2" >
<input type="button" size="30" onchange="" value="上传" />
<input type="button" size="30" onchange="" value="删除" />
</td>
5） 使用easyUI
若使用easyUI，需要引入如下内容：
<link rel="stylesheet" type="text/css" href="../../js/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/jquery-easyui/themes/icon.css">
<script language="javascript" type="text/javascript" src="../../js/jquery-1.8.0.min.js">
</script>
<script type="text/javascript" src="../../js/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/jquery-easyui/locale/easyui-lang-zh_CN.js">
</script>
调用页面的function：
function add(){
 $("#dialogDiv").dialog('open');
}
调用的链接如下：
  <a href="javascript:add()" class="search-btn mlr5" title="添加" >添加信息</a>
调用的页面如下：
<div id="dialogDiv" class="easyui-dialog"
data-options="title:'添加信息',closed:true"
style="width:1000px;height:280px;">
<table class="table1 tc mt10">
   <tr class="evertop">
                <th width="5%">序号</th>
                <th width="10%">姓名</th>
                <th width="18%">年龄</th>
                <th width="10%">地址</th>
                <th width="10%">操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>test</td>
                <td>22</td>
                <td>北京市东城区</td>
                <td><input class="search-rid mlr5" type="checkbox" </td>
            </tr>
    </table>
</div>