Welcome to武汉万伦网络科技有限公司!

16608661800

联系我们

PRPULAR PUSH

ATTEN:
王经理
phone:
16608661800
QQ:
935095314
ADD:
湖北省武汉市武昌区武汉中央文化区K6-3栋1004室

泰州网站界面优化

author:武汉万伦网络科技有限公司

【Font size: big medium smail

time:2020-02-09 12:26:01

本文由武汉万伦网络科技有限公司提供,重点介绍了网站界面优化相关内容。武汉万伦网络科技有限公司专业提供中国网站优化,包头网站优化,成都网站排名优化等多项产品服务。从成立至今,服务过多项优质客户,提供一站式服务,选择我们享受一次完美的消费体验。

网站界面优化前期准备1. 请看我的Django基础文章,用Django写出最简单的网页。可以带着大家从无到有,写出一个含有"Hello, world!"的基本网页。最基础的下载等基本操作都在这篇文章了,本系列文章属于更“高级”一点,所以不会再花时间在这方面了。

2. 本系列文章 - (1) Django-从0到1写出一个全面的网页(1)模板和静态图片

(2) Django-从0到1写出一个全面的网页(2)模型和数据库

(3) Django-从0到1写出一个全面的网页(3)模型,模板和视图

(4) Django-从0到1写出一个全面的网页(4)网页表单

(5) Django-从0到1写出一个全面的网页(5)用户身份验证

(6) Django-从0到1写出一个全面的网页(6)模板进阶

(7) Django-从0到1写出一个全面的网页(7)"饼干茶话会"

(8) Django-从0到1写出一个全面的网页(8)Redux注册

3. How to tango with Django 1.7。这是一本英文写的手把手教你使用Django的好书,旧版本是online免费的,新版本都需要付费。本系列文章就是根据这本书提供的步骤所写,因为1.7版本很老旧,我也费了很大的功夫更新了一番。大家要是有时间,也推荐好好翻阅一下这本书。

4. django 官网。大家要是还有更多空闲时间想继续深入了解,官网必不可少。

本文目标本文的目标是我们可以学会使用Twitter Bootstrap 3.2 工具包对Eva进行样式化。

写在文前文中我们不会详细介绍Bootstrap是如何工作的,并且假设你对CSS有一定的了解(不了解的可以参考我这篇文章),或则查看W3W school 的CSS介绍。但是,这不妨碍你理解本文流程和内容。

首先让我们看看Bookstrap 3.2.0网站——它为我们提供了示例代码和风格不同的组件,以及如何通过适当的样式添加标签等。Bookstrap 网站提供了大量的布局,我们可以让我们的设计基于它们。

为了给Eva 添加风格,我们已经使用了基本默认的仪表盘板样式或多或少满足了一些我们对Eva 布局的需求,即它的顶部有一个菜单栏、一个侧栏(用于显示类别) 和一个主内容窗格。在使用引导网站的html 之前,我们还需要做一些工作。下面就是我们所要做的,生成一个新的html,思路如下:

替换../../ 的所有参考为用准确的引用/examples/dashboard/dashboarboard.css 来取代dashboard.css 从顶部导航条删除搜索表单从html 中删除所有非必需的内容,并将其替换为{% block body_block %}{% endblock %}将title元素设置为,Eva-{%blocktitle%}Eva&Zhou!{%endblock%}将项目名称更改为Eva顶部导航条将链接添加到索引页、登录、注册等页面添加如 {% block side_block %}{% endblock %}到侧块中

1. 新的基础模板需要大幅度修改我们的templates/base.html,修改如下:

Eva - {% block title %}Eva&Zhou{% endblock %}

网站界面优化

{% block body_block %}{% endblock %}

如果你仔细查看仪表板html 的源代码,你会注意到它是一系列

标记创建的结构。从本质上讲,页面分为两部分——顶部导航条和主窗格,由两个标记表示。在导航条部分,我们已经注入了所有到我们网站不同位置的链接。在主窗格中,我们还创建了两列,一个用于side_block,另一个用于body_block。

住:关于最新的bootstrap下载指南,查看此网站。

2. 快速网页修改风格更新完我们的base.html 与上面的html代码(这里我们得使用的django-注册-redux包,这样我们就不需要更新那些url模板标签了)一致后,重新加载应用程序。显然,为了下载我们刚更新上去的css,js和其他相关文件,我们需要连接到internet。你应该也注意到,随着这个应用程序的更改,我们的应用程序看起来会更友好。

现在我们设置好了base.html,我们可以通过浏览引导组件并选择适合页面的组件来对Eva 进行快速的风格提升。

让我们先来更新about.html 模板,通过在页面上放置一个页面标题(/components/#page-header)。我们所需要做的就是提供一个

带着class="page-header" 的封装

{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}About{% endblock %}

{% block body_block %}

I am Zhou, developer and owner of Eva.

Picture of Eva

{% endblock %}修改后的About风格页面

接下来,对于每个模板,我们都来添加页面标题 page-header。记住要更新Eva 和registration 中的所有模板。

虽然整个界面看起来更好看了,但是有些东西看起来仍然不合适。例如,在注册页面上,字段没有对齐,按钮看起来很老式。此外,你可能已经注意到侧边栏是空的,点击是无效的。在下一文中,我们将通过一些导航链接来解决这个问题。

接下来是重头戏,我们的主页面。

由于我们只是用页面头 来封装标题,所以我们并没有真正利用Bootstrap 提供的类和样式。这里,我们从流动页面中取出列并使用它们来存放顶部类别和顶部页面。由于原来的页面有四列,而我们取了两列,所以得通过调整列大小使它们变大。下面更新index.html 模板如下所示:

{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}Index{% endblock %}

{% block body_block %}



{% if user.is_authenticated %}

Categories

{% if categories %}

{% else %}

There are no categories present.

{% endif %}

visits: {{ visits }}

{% endblock %}现在界面应该好看多了,但是关于类别的list 呈现还是太简陋了,我们再重新修改下:

Categories


{% if categories %}

{% else %}

There are no categories present.

{% endif %}

现在的界面就好看多了,登录前页面如下:

登录后页面:

3. 登录页面现在更新templates/registration 中的login.html 文件

{% extends "base.html" %}

{% block body_block %}



{% endblock %}运行后的页面如下:

4. 添加类别或则页面类似第三步地,我们可以给add_cagegory.html 还有add_page.html 模板做改动:

add_page.html 代码:

{% extends 'base.html' %}

{% block title %}Add a Page{% endblock %}

{% block body_block %}



{% if category %}

{% csrf_token %}

{% for hidden in form.hidden_fields %}

{{ hidden }}

{% endfor %}

{% for field in form.visible_fields %}

{{ field.errors }}

{{ field.help_text }}

{{ field }}

{% endfor %}


网站界面优化

{% else %}

This is category does not exist.

{% endif %}

{% endblock %}修改后页面:

add_category.html 代码:

{% extends 'base.html' %}

{% block title %}Add a Category{% endblock %}

{% block body_block %}



{% csrf_token %}

{% for hidden in form.hidden_fields %}

{{ hidden }}

{% endfor %}

{% for field in form.visible_fields %}

{{ field.errors }}

{{ field.help_text }}

{{ field }}

{% endfor %}


{% endblock %}修改后页面:

5. 注册模板修改registration_form.html 代码如下:

{% extends "base.html" %}

{% block body_block %}



{% csrf_token %}

{% endblock %}修改后页面如下:

6. 补充-使用Djangp-Bookstrap-工具包当然,我们也可以直接下载Django-Bootstrap-Toolkit 工具包。下载工具包,pipinstalldjango-bootstrap-toolkit,把工具包加到settings.py 的INSTALLED_APPS 元组里,并修改代码。举个栗子,如果要修改category.html 文件:

{% extends ‘base.html’ %}

{% load bootstrap_toolkit %}

{% block title %}Add Category{% endblock %}

{% block body_block %}

{% csrf_token %}

{{ form|as_bootstrap }}


{% endblock %}看看,了解下即可。

现在你只需要温习一下本系列的第一篇,第二篇,第三篇,第四篇,第五篇,第六篇,第七篇,第八篇和本篇文章;并期待我们的下一篇 Django-从0到1写出一个全面的网页(10)模板标签 。

如果你觉得我的文章有用,顺手点个赞,关注下我的专栏或则留下你的评论吧!