你的位置:首页 > 网页设计

[网页设计]实例讲解网站前台界面开发流程


网站前台界面是网站的门面,所以怎样去设计这个界面非常重要!其实网站前台无非就是用到HTML、CSS、JS这些东西,相信这些代码大家都懂所以今天不讲代码,关键说说在我开发前台界面时的思路!

    一、选取合适的网站素材进行PSD设计

    我们开发网站不可能想到哪里就开发到哪里,首先得自己有心里有个数!所以我们首先应该确定自己网站的类型,然后用PS设计网站的PSD模板,等设计好了之后再用代码实现!不过我的PS技术还没有达到能够自己独立设计一个网站模板的程度(毕竟那些色彩什么的很是烦人呐),所以我找了一个PSD模板然后自己将其改造,让他适合自己的网站主题,这样就是一个“崭新”的网站模板啦!这里我改造的后的模板是这样的!

实例讲解网站前台界面开发流程

这里多说一句哈,关于网站的PSD模板我会在王业楼的个人博客中陆续发布一些PSD模板素材供大家参考,请大家多多关注!

    二、规划网页的整体布局

    这里我们拿首页来举例,当我们在制作网页之前应该将网页的框架在大脑中画出!当然一开始你可以在图片上面画!我将网站前台首页规划的框架是这样的!

    

实例讲解网站前台界面开发流程

将这些整体框架画出来之后,一般我有两种选择来开发!一是用DIV+CSS将所有的内容块画出来,然后再在内容块里面填补内容。二是将一个内容块完全做好之后再做下一个!我感觉两个都是大同小异,在乎个人习惯吧!

    三、连接网站里面的网页

    网站是由无数个网页组成的,既然这样我们就应该将所有的网页都连接起来!这样不仅利于SEO优化,也便于用户浏览!(用户总不可能每次浏览你网站的某一个页面都去输地址吧) 所以我们用到了导航条!这里导航条是将网站分为几个部分,然后每一个部分里面记录归属于这个部分的页面名称,并且附上超链接!字不如图,大家看看下面的图片应该便于理解!

一、选取合适的网站素材进行PSD设计

    四、前台首页应该放置的内容

    大家都知道网站首页很重要权重也是最高,所以首页放置的内容应该要吸引用户和搜索引擎!首页也该考虑两点:一是多,就是应该涉及网站的所有内容(注意不是讲网站所以的页面地址放置在首页);二是新,每次更新的内容都应该表现在首页,这样让搜索引擎知道你网站更新了,它才会来抓取你的更新页面!所以我的body主体放置了四个模块内容,分别是新闻中心、我们的客户、企业文化、我们的人才标准,模块里面找了几篇最新的文章来显示!

    五、网站前台界面开发流程注意的细节

实例讲解网站前台界面开发流程

    1,大家看红框里面的东西,这个的位置我们可以用两种方法来实现:一是用margin来做,二是用定位position!其实两种方法的效果是相同的,但我个人比较喜欢第二种,可能当时学的时候形成思维定式啦!我想告诉大家的是,代码实现的方法多种多样,不必局限于某一种!你能做出来你就最牛!

    2,做网站前台肯定要用到PS技术的,所以大家应该了解一些PS的知识,不需要像专业的那样会一些基础的就行!大家这里可以看看李涛PS高手之路视频教程

 

本文来源于王业楼的个人博客 本文地址:http://www.ly89.cn/detailB/51.html

欢迎分享本文,转载请注明本文出处和地址