基于Django框架的博客开发(三)-页面设计

一、知名博客网站简单分析 

在开始前,我们借鉴一下那些比较知名的博客网站,先来看看它们都有哪些功能。

  • 新浪博客首页:

仔细看一看就会发现,新浪博客从上到下分布,导航栏1、广告栏(-_-||)、导航栏2、导航栏3、图片滚动,关键新闻、登录/注册、广告栏(-_-||)、博客链接(分类)、广告栏(-_-||)、图片博客,好吧,广告不少。

基于Django框架的博客开发(三)-页面设计

  • 网易博客首页:

-还是从上到下分布,导航栏1(外部链接很多)、导航栏2、广告栏、搜索栏、导航栏3、标签页式的精选博客、广告栏、广告栏、广告栏,哎,不说了,大家细细看来就看到了。

基于Django框架的博客开发(三)-页面设计

  • 博客园:

嗯,这个果然很(yuan)精(zhi)彩(yuan)啊(wei),相信程序猿还算偏爱这种精简款的博客网站吧导航栏1条、广告栏2条,好吧,竟然是阿里云和腾讯云两家的广告。

基于Django框架的博客开发(三)-页面设计

二、我的博客简单设计 

那么我们即将开发的博客要包含哪些功能呢?虽然网易博客、新浪博客看起来很花哨,但是仔细分析就可以发现,导航栏偏多,涵盖的范围比较广(其实对于博客来说就是分类的细化),广告栏偏多。

所以我们开发的博客将包含以下内容:

  • 导航栏
  • 登陆/注册
  • 广告栏(1个)
  • 精彩博客排行
  • 最新博客展示

三、原型设计 

如果你是后端开发攻城狮,那么一般情况下,前端的设计是前端攻城狮的事情,但是我们这个博客项目的所有部分都要亲力亲为,所以下面我们用RP来绘制一下大致的博客网站页面:

1.主页面:

基于Django框架的博客开发(三)-页面设计

2.注册页面:

基于Django框架的博客开发(三)-页面设计

3.个人主页:

基于Django框架的博客开发(三)-页面设计

4.资料编辑页面:

基于Django框架的博客开发(三)-页面设计

5.编写博客页面:

基于Django框架的博客开发(三)-页面设计

页面部分比较简单,先设计这样,后续有需要再调整吧。

由于个人时间比较紧张,更新进度较慢,抱歉~