web前端ui设计教程
UI设计不一定需要精通前端，但是如果UI设计了解前端可以减少和开发人员沟通的技术成本，让团队协作更加高效那UI设计如何学习前端，需要学习到什么程度呢？
我们分享一个前端教程-网页链接，这里面详细讲解了UI设计中的Web前端设计规则及工具，可以帮助大家深入理解Web前端UI设计方法
1HTLM基础认知DIV框架及CSS样式
首先要了解HTLM基础CIV框架以及CSS样式， HTML称为超文本标记语言，是一种标识性的语言它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体DIV元素是用来为HTLM文档内大块的内容提供结构和背景的元素 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
2浮动原理Margin认知
Margin，是CSS的语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度
3框架应用搭建
框架很多，在这个教程中选择一个主流框架带大家看看前端框架如何搭建
4插入图片文字标签和版头导航栏
编写的网页中插入图片，可以使浏览网页的用户得到更好的体验效果在这一部分会讲解插入图片文字标签以及版头和导航栏如何实现
5Banner块插入内容文字排版内联元素A标签和Banner链接定位
Banner是网络广告最早采用的形式，也是目前最常见的形式它是横跨于网页上的矩形公告牌，当用户点击这些横幅的时候，通常可以链接到广告主的网页而网页中的文字内容排版也直接影响着网页的美观以及网页的用户体验
6锚点标签超链接标签固定定位和绝对定位相对定位
标签用于定义超链接，用于从一张页面链接到另一张页面用于设置锚点，用于页面定位
7导航二级菜单显示隐藏
很多网页中的二级菜单栏不直接显示，需要鼠标移动到一级菜单或者点击一级菜单才会展开显示二级菜单
8input表单
input表单可以获取用户的信息，做出对应的动作，教程中直观的展示input表单的应用方法
其实以上教程只是web前端很小的一部分，UI设计如果能够了解前端知识，在设计中可以更好的考虑实现问题，也能够更好的和开发人员交流，也能够提高团队协作的效率，加速项目的进度
如何制作WEB UI？1.用photoshop画出你想要的平面效果（需要厚实的平面设计功底）2.交由前端进行切片处理（根据页面构成和程序开发方法将做好的psd文件切片处理）
3.切片后对页面进行重构，一般在dreamweaver中处理，通过手动组织代码携程，一般就是div+css，完成.html页面
4.交由编程实现
教程比较复杂需要系统学习前端设计
一种比较简单的方法你也可以去看看ExtJS这样的UI框架 (随机推荐阅读本站500篇优秀文章点击前往：500篇优秀随机文章)
