用PS来做网站的页面设计

我想熟悉互联网的朋友一般都了解过网站的制作的流程,我先大体说明一下吧,网站制作的流程主要分为三个部分:

1、设计网站效果图,一般设计效果图大多是用ps来实现,当然并不是绝对,但是目前最为主流的一种网站设计工具,这也是我们本章要讲的重点。

2、div+css样式排版,这个顾名思义,哪怕是不了解互联网的同学们,听到这个名字应该也能联想到究竟是怎样的一个流程,就是将做好的网站效果图,通过切片工具,讲图片切割成很多小的图片,然后同过div+css将这些图片拼接起来,让浏览器去接收,就生成了一个可以浏览的静态页面。

3、服务器程序编写,一个静态的网页内容是固定,我们要访问一个信息量非常庞大的网站,总不能每天都要重复去制作静态网页吧,这样的工作量不仅庞大而且鸡窝繁琐,所以我们通过编程语言,将储存在服务器数据库中的数据读取出来,然后封装成一个标签或者变量,嵌套在静态网页中,每次打开网页,都可以通过这些标签或者变量获取服务器传来对应的信息内容,而其他的框架却不需要改变,这让web开发变得更加容易。

好了,我没言归正传,既然网站建设的流程我们都明白了,我们就先回到最前面,说一下如何做网站页面的效果图,其实对于会ps的同学并不算太难,他们需要了解的仅仅是网站的一个架构,我大体说一下吧。

首先最上方是网站的头部,头部包括logo,就是公司的标志和名称,一般在网站的左上方,右侧可以根据情况自由添加,一般是用来写一些宣传性的广告用语或电话,上方可以加上设为首页、添加等等。

下面一般就是网站的导航栏,如网站首页,公司简介,新闻中心....等等,我就不详细说了,紧接着就是网站的banner广告图,就是用于宣传公司形象的图片,一般可用js来实现一些动态切换的效果。

网站的三分之一已经完成了,然后就是中部的内容区,我们可以放上新闻信息列表,以及公司简单介绍等等,下方可以加上公司的产品展示,案例等等,大家参考其他的网站自由安排。

最后就是网站的底部,底部一般包括友情链接,网站的版权信息和备案号等等,也可以加一些简单的内容信息,如联系电话,地址等等。

今天就说这么多吧,其实也不难,大家自己回去了解一下很快就会设计出一个简单漂亮的网站了!

(0)

相关推荐

  • 【新人必知】页面设计的九个要点!

    小编:刚入行的UI设计大多数时间做的都是根据主设计师的设计和规范来制作下层页面,在这个过程中有很多需要注意的地方,今天@M菌和你一起细数下层页面设计过程中必须要注意的要点. 在平时的工作中,我会接触到 ...

  • ”关于我们”页面设计(下)

    "关于我们" 页面是每个团队和公司的真正自留地,那些真正优秀的"关于我们"页面并不会比他们的首页和产品页差,甚至更加脑洞大开.上一篇<"关于我们 ...

  • 移动H5页面设计的那些事

    小编:今天我们继续来学习H5页面的设计.移动H5页面与APP又有什么区别呢?大家一起来看看由star_night分享的移动H5页面设计的那些事.作者详细介绍了微信端H5新加入的返回功能的多种设计方式. ...

  • ”关于我们”页面设计(上)

    毫无疑问,你是没有第二次机会来给人以"第一印象".每个网站从首页到子页面都是介绍产品.提供服务.探讨功能,唯有"关于我们"这个页面是关乎产品和服务的创建者--我 ...

  • 强解H5移动端页面设计

    小编:什么是H5?H5是一种高级网页技术,也就是我们说的HTML5 .简单的模拟一个场景:如果A要传递一个图文信息给B,那么其中会产生什么问题呢?B是否会觉得疑惑?传递给我这么多信息,哪些是标题,哪些 ...

  • 20个人性化的搜索页面设计

    搜索页面是一个网站上最常用的网页之一,它被认为是第二个最重要的导航方式的一个网站,主要菜单是第一个.因此,至关重要的是给予它需要的,并尽可能方便用户. 搜索页面可能是一个可以决定你网站转化率的重要因素 ...

  • 各种报价表单页面设计:Pricing Pages

    网页设计中报价页通常是选择购买产品的价格套餐页面,之前达人报道过<网站布局之价格表单设计灵感>,该页面虽然功能简单,但却大有学问,我们通常把热门的最希望客户购买的套餐设计突出一点,利用这样 ...

  • 现代404页面设计趋势分析与案例

    每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了.一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏览,安抚情绪,找到他们真正想要 ...

  • 微信公众号图文信息页面设计,你也可以牛起来!

    微信公众号图文信息页面设计,你也可以牛起来! 操作方法 01 首先,打开微信公众平台,登录我们的帐号 02 初次进入管理的朋友先单击添加功能,在插件库找到模版管理,添加 03 之后,我们单击模版管理, ...