zoukankan      html  css  js  c++  java
  • 网页设计初学者短期心得CSS页面设计

         一早睡不着,想写点什么,那就写点最近1个月上手做网页设计的体会吧。

         首先注明一下:我属于页面设计菜鸟,所有文章中有什么不正确的地方希望大家能给我及时的提出,谢谢。

         记得在几年前的大学里用DW做过网页,那个时候只是一个静态页面,没有框架,没有样式,没有脚本,没有交互,那个时候的网页是流行用TABLE来定位的,那个时候的尺寸是流行用百分比的。而如今,当N年后的我再次遇上页面设计,真心很头大,因为从未系统的去学过该如何做页面,不谈实现,就连如何去设计一个能符合大众口味和审美观的页面都是如此的困难。下面就来说说过程中遇到的一些问题和一些个人总结吧。

          首先要说的应该是网页的层-div。这个真的是一个让初学者很头痛的东西

    ,一个很简单的上-中-下,或者上-下-左-右都会让我们研究个老半天,从定位、尺寸,一直到浏览器的兼容性问题。先说下定位吧,如今的浏览器都已经有了缩放功能,如果纯粹的去控制一个层得左边和右边的坐标,那么会导致在缩放的时候是的布局非常的混乱,我也在这上面折腾了好久,一开始下载的一个CSS样式,那位作者用了这样的方式,使得显现的页面在窗口的缩放和页面的缩放上都会让网页变得无法正常使用。后来想了N久,决定使用横向绝对定位,纵向自由的办法。在外层DIV剧中,并且给予一个精确的宽度值,以控制整个布局的大小和位置。然后在其内部也用绝对横向距离,和外部、内部边框距离来控制上下、左右、父子层之间的关系,这样就能比较好的解决层定位的问题了。

         然后就是一个样式的问题,我们到底应该用ID还是用CLASS。

         或许这对一些高手来说不是问题,因为你们积累了很多经验,已经对与该在什么时候使用什么样的解决方案熟记于心了,但是对与初学者来说或许又是一个要纠结很久的问题。网上有人说大的块比如上下左右布局,就用ID,而小的需要复用的就可以用CLASS。本人是比较同意的,不过需要补充的一点是,如今javascript横行的年代,如果你只是做一个常规类的网站的话根据上面说的来规划的确是绰绰有余了,但是如果碰到了例如博客这种,用户自定义要求比较高的页面的时候你就不能这么玩了。我们用jquery对DOM的操作来举个例子吧,我们有个页面是用来做用户注册的,那么我们肯定有个大的布局,给了ID,然后用户提交的那些INPUT TEXT我们用CLASS来控制样式,那么我们如果用异步提交,不使用FROM表单的话我们会发现我们需要将TEXT里面的内容逐个取出,我们怎么做?做法很多,FOREACH挨个取TEXT的内容,但是这个要耦合性太高,页面有变动就需要同样变动,要么通过ID,然后CHILDREN类似的操作来做,碰到的问题和第一个是一样的。其实这里就应该对每个TEXT给出不同的ID,但是这里的ID不是控制其样式,而只是为了方便的取得某些我们需要元素的内容。或许有人会问了,登录、注册这种谁会用AJAX异步提交呢,其实我只是举一个例子。如果想让用户得到更好的使用体验,那么无刷新提交必定是趋势,而更好的合理分配你的ID也是非常非常重要的一件事情了。

         然后来说一个大家都很关心的问题,页面如何才能设计的美观。

         曾经同事给我看过一篇文章,是有关页面设计的,因为我业余玩摄影的,套用评论拍照是否好坏的一句话的话,一个好看的网页必定要满足:“焦内清晰,焦外柔和,主题明确,观点鲜明,成像锐利”。一个好的网页必定要有一个明确的主题,然后就是我们需要让打开网页的人第一眼就被你突出的观点所吸引,这个除了需要主题本身有一定的吸引力以为,还需要运用一定的手法,根据人看事物的特点,人为的在设计上突出你需要让观看者第一眼就看到的东西,可以用一些色彩的对比,或者清晰模糊的对比。总而言之就是要让看网页的人跟着你设计的思路走,这样就能达到设计的目的了。

         这是最近一段做页面的一些个人小结,希望可以让自己在回顾的时候能有一定的体会,有一些新的想法,下一次我会总结一下JQUERY的个人使用心得。尽请期待~~

                                                                                                         --Mr.S

  • 相关阅读:
    四叉树空间索引原理及其实现
    深入理解空间搜索算法 ——数百万数据中的瞬时搜索
    空间索引
    Microsoft.Office.Core 引用以及 Microsoft.Office.Core.MsoTriState 的问题
    Visual studio 2017 中的Javascript智能提示与调试
    EasyUI Tooltip 提示框
    java编程中的断言工具类(org.springframework.util.Assert)
    Guava学习笔记:Google Guava 类库简介
    Jquery autocomplete插件
    easyui-textbox
  • 原文地址:https://www.cnblogs.com/gary2948/p/2052595.html
Copyright © 2011-2022 走看看