做开发,觉得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>
相关推荐
这份"Dreamweaver学习笔记等3个文件"的压缩包,包含了三个宝贵的资源,旨在帮助用户更好地理解和应用这款软件。 首先,"dreamweaver方法总结.doc"可能是一份详细的使用技巧文档,涵盖了Dreamweaver的基础操作到高级...
《Dreamweaver学习笔记》 Dreamweaver是一款广泛应用于网页设计和网站管理的专业工具,尤其在Web2.0时代,其重要性不言而喻。它由MacroMedia公司开发,目前已被Adobe收购并持续更新,最新的版本是8.0。这款软件集成...
Dreamweaver8学习笔记.pdf
JavaScript学习笔记是一本关于JavaScript编程语言的教材,该教材通过丰富的实例,系统地介绍了JavaScript的基础知识和实际应用技巧,帮助读者一步步掌握客户端编程技术。本书共分为九章,每一章都有其特定的主题,...
6. **Dw学习笔记**:Dreamweaver(Dw)是Adobe的网页设计工具,笔记将指导如何使用它来创建、编辑和发布网页,包括代码视图和设计视图的使用。 7. **Linux资料册**:Linux是一种开源操作系统,笔记将涵盖命令行基础...
### Dreamweaver 笔记详解 #### 一、Dreamweaver 概述 Dreamweaver 是一款由 Adobe 公司开发的专业网页设计软件,它集成了网页编辑、管理及发布功能,适合各种级别的用户,从初学者到专业设计师都能轻松上手。下面...
【Flash8学习笔记】 Flash8 是一款经典的动画创作软件,广泛应用于网页设计、游戏开发以及交互式内容制作。本笔记旨在记录学习过程中的一些关键知识点,同时也适用于初学者参考。 一、资源与工具 1. 动画成品分享...
标签之间嵌入的内容构成了元素的内容。 ...`<head>`元素包含了不显示在页面上的元信息,如文档标题,而`<title>`标签定义了浏览器顶部显示的标题。...通过实践和不断学习,你可以创造出功能丰富、视觉吸引力强的网页。
Axure学习笔记 Axure是一个专业的原型设计软件,对于产品经理和交互设计师来说非常重要。通过Axure,可以快速创建原型,进行产品设计和测试。本文档旨在总结Axure的使用方法和技巧,帮助读者快速上手Axure,提高...
网页设计是创建交互式、视觉吸引人的在线内容的过程,Dreamweaver是一款强大的工具,可以帮助初学者和专业人士轻松设计和编辑HTML页面。...在实践中不断探索和学习,你会发现网页设计的世界充满了无限可能。
【Dreamweaver CS6课程笔记】是Adobe公司开发的一款专业网页设计和网站管理软件,它集成了网页设计和管理功能。在安装时,为避免安装过程中可能出现的问题,建议断开网络进行安装。软件界面主要由菜单栏、工作区、...
### 经典JSP学习笔记知识点详解 #### 一、JSP基础概念 - **定义**:JSP(JavaServer Pages)是一种动态网页技术标准,主要用于实现Java平台上的Servlet技术的扩展特性,尤其是在Web应用程序中。它允许在HTML文档中...
技术是一场革命,努力学习你会收到意想不到的结果,加油加油
【Axure学习笔记】 Axure是一款强大的原型设计工具,尤其受到产品经理和交互设计师的青睐,因其易用性和高效性。本学习笔记旨在帮助初学者掌握Axure的基本操作和使用技巧,以便更好地进行产品原型设计。 1. **...
【Dreamweaver CS6课程笔记】是Adobe公司开发的一款专业网页设计和网站管理软件,它集成了网页设计、HTML代码编辑、网站管理等多种功能。在安装时,为避免授权问题,建议断开网络进行。 软件界面包括菜单栏、工作区...
Axure RP与其他工具相比,如Word、PPT、Visio、Photoshop/Fireworks和Dreamweaver,具有独特的优势。它可以快速绘制wireframe,表达交互设计,同时支持批注和文字说明,适用于产品开发的不同阶段。特别是在产品创意...
但根据主题,我们可以推测这可能是一个练习项目、笔记文档或者某个特定的学习资源。 学习这三个主题,你可以掌握Web开发的基础,从创建静态HTML页面到构建动态交互的Web应用。PHP用于后端逻辑处理,MySQL负责数据...
在jQuery的学习过程中,首先要理解的是如何使用`$(document).ready()`和`window.onload`来确保代码在页面加载完毕后执行。 1. `$(document).ready(function(){...})`与`window.onload`的区别: - `$(document)....
书中的内容以Word格式呈现,便于读者阅读和打印,方便在学习过程中进行笔记和练习。 总而言之,这本书是学习网页设计,尤其是Dreamweaver CS3的宝贵资源。无论是初学者还是有一定经验的设计师,都能从中获益,提升...