上一篇讨论了如何编写静态页面,静态页面通过html语言书写,这一篇介绍一下基本的html标签,以及开始利用css与js制作导航BASE页。


1、html标签

标题

段落

图片标签

超链接标签

表格标签

表格标题

表格行

区域标签

页面标签的标题

页面具体正文内容


2、前端框架

以前,学习前端还要专门去学html、css、java script这3门语言,而这3门语言语法又不尽相同,因此基本上就是新人劝退。

而现代的编程,其实已经有很多框架将一些常用功能高度封装,其实只要引用一下框架,修修改改,就能出来效果。

而前端框架,就是用来快速实现css与js的一些功能的。例如bootstrap、easyui、layui等UI框架,最近流行的JS框架VUE、React、angular等。

其中腾讯也给出了magicbox这一款工具(里面集成了很多其他优秀的框架),并且示例写得比较好,基本上所见即所得,因此我们使用magicbox来进行页面UI开发。

腾讯magicbox:https://magicbox.bk.tencent.com/,使用QQ号即可登录。

组件库可以对单独的组件进行应用,可视化布局可以整个布局开始拖拉拽的方式来写。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第1张图片

3、BASE页开发

3.1BASE页引用

刚进入会要求进行布局选择,然后从左边将需要的组件拖拉到右边对应区域即可。我们先设计登录页面,用上下布局,然后将横向导航与单个网络布局拖到对应位置。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第2张图片

点击下载就可以看到代码了。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第3张图片

打开pycharm,在templates下面创建BASE01.html文件,清空里面的内容,然后将代码全部贴过去。

为了让其他页面引用BASE01页面的内容,需要在里面加block。在67行左右,最内层的

标签,打block标记。

class="col-md-12">
   {% block content %}
   {% endblock %}

修改index.html,清空内容,应用BASE01.html的block标记,并且在block之间填写本页独有的内容,例如HelloWorld

{% extends 'BASE01.html' %}

{% block content %}
   Hello World!!!
{% endblock %}

重新访问127.0.0.1:8000/index,发现页面已经不一样了,成功引用了BASE01的内容。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第4张图片

3.2BASE修改

如果顶部导航的内容不想要,或者想要修改,直接到BASE01.html里面做少量修改就可以了。

修改为需要的内容,或者整个ul列表删除即可。

然后尝试修改左上角logo,原logo引用如下:

只需要上传文件到static/img目录内(img目录需要手动建),然后修改src引用了路径,引用图片即可。

006.png


【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第5张图片

3.3修改index内容

接下来可以修改index的内容了,我们可以增加用户名与密码输入框。

国际惯例,直接从左边往右边拖动就可以了。直接双击还能编辑里面内容。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第6张图片

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第7张图片

点击下载,然后将新增的代码,拷贝到index.html的block里面就行了。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第8张图片

刷新页面,发现已经成功修改。通过良好的前端UI框架,大大地减少了代码的工作量。

【实战演练】Python+Django网站开发系列04-Django导航BASE页开发_第9张图片