网页设计心得 高效编写网页代码

所属分类: 网页制作 / 应用技巧 阅读数: 1025
收藏 0 赞 0 分享
本来这第七章应该是针对设计中的层次、空间的技法及深层次的探讨。但今天暖暖跟我哭诉她事情总是处理不完。加上今年3·4月份公司的一大堆生意的顺利完成。以及那时候总结出的一些经验。觉得效率这个问题还是很有必要跟大家分享分享的。时间仓促,分类不明确,还请见谅!

本文从三个方面着手,一个是企业网站的建设(教育政府类也归纳到企业站点里),二是小型门户站点的建设,三呢,我把平面广告设计也顺带提一点。主要还是网站。

其实企业站点的工作量并不大,相信很多有经验的同仁能够把普通企业站可能用到的栏目一口报出来。在这里我们换个角度来看待这些工作。从页面的内容构成上来针对他们进行分类:

一:首页。
这里的设计含量是最高的。工作也是最繁复的。暂且不谈设计。从ps版到html,到最后的整站。往往修改最多的就是首页了。在这里我要强调的是,从首页开始,注意使用包含文件

二:分页。
分页有几类呢?在我看来,无非是list和view,列表页和阅读页。list一般是新闻列表,或图片列表。而view,则完全只需要一个!

所以,在构建一个普通的企业站的时候,上述三个页面完成了,工作基本已经完成1/3了。还有程序,以及内容录入。

纯动态的站点。内容录入很简单。但如果是有着大量静态页的站点,比如教育类和政府类的站点。当然,也有相当一部分原因是从公司角度或程序员角度来考虑,将简介之类的很长时间才更新一次的页面做成静态的。另外一种情况则是内容内包含大量的图片、特殊符号、公式、表格等。哪怕是再强的编辑器编辑起来也很麻烦。使用dw效率可能会更高。到这里,我的经验才真正的表述出来。
    先说一下大量的文字录入,先定义好你的P,记得缩进2em,因为很多人很注意这一点。也必须注意到这一点。相信大家都开着qq,大量的文字,无论是从word还是记事本,直接copy,贴到qq对话框里再复制一次,去除多余的东西,然后到dw的代码状态。记住,是代码状态粘贴。这个时候,代码状态依然保留了原有的段落,而预览则是不分段的,这个时候,你的P,就开始大显神威了。开始的地方<p>,结尾的地方</p>,中间的段落则复制"<p></p>"直接粘贴.不需要你再去按回车,也不需要按着ALT+SHIFT+空格了!!!
  说表格,在编辑器里插表格,效率总没在DW里高吧.好,那就在DW里画表格,然后复制代码,到编辑器的代码状态去粘贴.效果那是一个好啊....
  说复杂的内容,有表格有特殊符号有公式有大量的文字有表格还有图片.而且相当的长.怎么办呢?我向你推荐一个小软件,叫FLASHPAPER,它可以直接在word内,将所有的内容转换成一个带滚动条的swf文件.相当多的情况下,体积比你在dw里一点一点编辑出来的html还要小.
    其实要说的是,代码状态操作,很多时候效率是最高的!
  如果客户提供给你的内容,不全,或不完整,这种情况则不在我的考虑范围内.这是前期工作.如果不知道怎样处理合适,请翻阅我的前六章内容.

**************************************讲述制作与设计的分割线**************************************

其实呢,有很多同仁花在设计上的时间是最多的。而企业站点一般也没多少内容。我想,你看一下我的网页设计进阶系列的前四章。会对你的设计有很大的帮助。其余的不再做赘述。只是再强调一下积累。只有不停的积累,才会不断的进步。第四章关于素材里,我这样说过:

当你看到某一张图片的某一个部分,脑袋就开始闪光,你发现你可以完全从这一部分出发设计出一套的东西。

当你接到一个任务,脑袋就像硬盘一样,把你机器里跟这个任务相似类似的甚至可以直接拿过来用的那些内容自动打包。

当你要做某样东西,你的硬盘里哪些可用的字体哪些可用的花纹哪些的可用的小图标自动浮现在你的脑海里。

当你要做某样东西,这个时候你在赶路,你在骑车,你立刻就能想到哪个哪个网站上什么什么素材可以拿过来用。

当你看到某个站,你可以立刻进行引申,张口就说出哪个哪个站跟这个结构类似,哪个哪个站跟这个风格接近。。。


这几条都能做到了,设计对你来说还是难事么?

设计,其实是一个不断积累的过程。

*********************************************特别强调的分割线************************************

再强调一句,包含文件,可以再包含一个甚至多个包含文件........理解这句话,会让你在做那些静不静动不动的网站的时候省很多力气!

****************************************网站设计的根本的分割线************************************

这个话题我以后会更深入的探讨。网页设计的那点事。无非是图文混排的那点事。
更多精彩内容其他人还在看

32个典型的以分栏/网格为基础的网站

如果你正在寻找网页分栏设计的灵感,这里收集了32个典型的以分栏/网格为基础的网站。它们显示了在网页设计中分栏/网格的重要性,无论对于信息量巨大的站点还是个人博客。 1.The New York Times 2.National Post 3.Guardian 4.Times
收藏 0 赞 0 分享

理论普及——用户体验

一、概念分析1:UE用户体验 英文叫做user experience,缩写为UE, 或者UX。 当指电子商务网站的时候也被称作顾客体验(CUSTOMER EXPERIENCE). 它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享
收藏 0 赞 0 分享

分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

建立用户体验

也许你刚刚来到一家公司,他们希望进行一些“可用性”工作。你可能是一名UI设计师,业务分析师,或前端开发人员,一名产品经理,或者负责用户体验部门的经理或副总。你知道,如果更好地了解使用产品/软件/网站的人,就可能开发出更好的产品/软件/网站。不管怎么样
收藏 0 赞 0 分享

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式。因为前者的尺寸比后者小。 2.Use 'Height
收藏 0 赞 0 分享

推荐60种分页案例和好的实践

结构和层次降低了复杂性并提高了可读性。你的文章或站点组织的越深入,用户就越容易理解你观点和得到你想传达的信息。在网页上,这点被通过多个方式做到。 在正文头条和列举被用做逻辑上独立的数据块来呈现信息。另一种解决方法是一种叫分页的机制,它在给定文章的单一部
收藏 0 赞 0 分享

全面的网站评估方案

有时会被问到“看看XXX网站如何?”之类的问题。 谈到评估,通常都是指产品级的网站,如果模式很新,了解需要花一定时间。于是,很多人又问“那么你仅从UI/UE的角度看看呢?”首先我们得达成共识,一切花里胡哨都在为功能服务,如果功
收藏 0 赞 0 分享

网页的栅格设计思考

原文地址:http://andymao.com/andy/post/82.html 网页设计中的脏、乱、差,是我们在设计过程中常会遇到的问题。通常"脏"是由对色彩使用不当所产生的,而色彩使用不当产生的不好效果也分为:"花、灰",花哨、
收藏 0 赞 0 分享

设计理论设计中的层次感

原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常
收藏 0 赞 0 分享

网页心得:网页色彩的搭配

网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接...,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?这里谈一些心得,希望对你有所启发。 首先我们先来了解一些色彩的基本知识:
收藏 0 赞 0 分享
查看更多