实例讲解网站前台界面开发流程_html/css_WEB-ITnose

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

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

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

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

    二、规划网页的整体布局

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

    

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

    三、连接网站里面的网页

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

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

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

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

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

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

 

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