欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-15 08:52:46
...
网站前台界面是网站的门面,所以怎样去设计这个界面非常重要!其实网站前台无非就是用到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