网页设计的步骤

由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。

步骤/方法

  • 01

    确定分辨率.和不同分辨下对应的效果. 与平面的载体的不同,决定了网页具有比平面更灵活的表达方式. 站点的满屏概念其实是分相对和绝对两种,相对的,是针对当前分辨率的满屏.而绝对满屏幕,则是不同的显示器不同的分辨率下都是满屏,一般我会给出一个最小分辨率,最大到无限.相对满屏,比如1024×768,800×600等.最好是用绝对宽度来定义,就是像素为单位.而绝对满屏,则用百分比. 在确定分辨率之后,你的PS图要比实际设计的图要大.要考虑用户使用高于你设计的分辨率下,网页以怎样的形式表达,是居左,还是居中,还是靠在右边.

  • 02

    大背景,3条辅助线及边界处理.结构(头部,中间,底部的大概位置.) 整体是否有背景. 左边界线,右边界线,和中间线. 如果是绝对宽度的设计,那么用户使用较高分辨率浏览时,内容与多出的屏幕是否有分割. 结构,究竟是上中下结构,还是左中右结构,还是其他的.每一块,大概放什么内容.

  • 03

    导航和标志. 网站的100-1%是导航.这是一句被传烂了的话. 你的导航是长的还是短的,是横的还是竖的.还是弧形的.是否有下拉菜单.比重各是多少.和标志处在什么位置.各语言版面入口在哪里.登陆(后台管理/用户/MAIL)在什么位置,标志附近是否有点睛一般的词. 好了,我们进行下一步.

  • 04

    banner同导航,和过度. 导航跟banner是分开的还是在一起的.在一起的话你是否采用flash制作,如不用flash制作,你设计的背景是否适合切割成平铺的背景,怎样让背景图片体积最小.记住不要用2×2的背景做平铺.banner是占据了整个宽度,还是只是一部分.如果是一部分,那么空出的地方你准备放什么东西.

  • 05

    主体内容部分. 我的中间是左右机构,还是一大块,还是左中右结构的.每一块的分割采用什么手法.颜色以怎么样的规则变化.然后将内容填充进去.

  • 06

    底部版权信息。

  • 07

    选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

  • 08

    制作网页 材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

  • 09

    上传测试 网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。

  • 10

    维护更新 网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者。

(0)

相关推荐

  • 2018年优秀动态网页设计大赏【附教程】

    随着设计行业的的不断进步和发展,动态网页设计已经成为设计师必须掌握的重要技能之一.对于许多设计师来说,缺乏设计灵感和网页设计是阻碍设计的主要问题.针对这些问题,小编在本文中为设计师精心准备了优秀网页设 ...

  • 充分利用网页设计中的面包屑

    小编:面包屑导航是网页设计中非常重要的一个组成部分,虽然看起来短小精悍,但它的作用却非同小可.那么你知道面包屑导航都有哪些分类,分别的作用是什么吗?面包屑应该在什么时候使用?什么?你还不知道什么是面包 ...

  • 《网页设计综合指南》(三):网页设计看这篇文章就够了

    设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计.为了简化这个过程,我们准备了这个指南.限于篇幅限制,将这一指南分为三部分,此为第三部分内容. 本篇包含内容 三.移动端适配 3.1 ...

  • 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)

    精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众群体.但是,当项目过大时,开发人员往往无法遵循最佳UI设计的原则进行开发.从而导致网站中某些重要 ...

  • 怎么使用Photoshop做活泼手绘风格网页设计稿?

    怎么使用Photoshop做活泼手绘风格网页设计稿? 这是一篇用Photoshop做网页视觉设计稿的教程,文章将一步步介绍如何在Photoshop中做一个活泼的手写风格网页设计稿.设计过程主要分为以下 ...

  • 网页设计中文本排版的技巧和细节

    网站的核心是内容,用户访问网站最重要的目的就是要看网站的正文,所以,网页的文本排版非常重要.网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的,想要有好的排版,对细节要下一番功夫才行. 步骤/ ...

  • 网页设计中要遵循哪些原则

    网页设计中要遵循哪些原则呢?怎样才能设计出一个合格的网页.我们知道,设计的个性化表现得非常明显,每个设计师都有着自己的设计理念,而企业也有着自己的需求,因而这两者经常会出现冲突.因此,网页设计中要遵循 ...

  • 个人网站设计制作步骤

    当今互联网日益发达,很多人都做起了个人网站,其实个人网站一开始的设计制作尤为重要,做得好与坏直接影响得了个人网站的成功与否,那么个人网站设计制作步骤有哪些呢,下面笔者就来具体说说,希望对大家有所帮助. ...

  • 关于网页设计的九项注意

    关于网页设计的九项注意 步骤/方法 01 一.当导览按钮连结到目前此页时 各Webpage若重复使用同一组的导览按钮,无可避免地会产生某一导览按钮连结到目前此页的情形.为达成界面设计的一致性,并没有绝 ...