准备工作
[plain]
django-admin.py startproject web05
django-admin.py startapp blog
blog注册到settings.py中
python manage.py runserver
blog下建立templates,并建立模板文件
配置url
[python]
from django.conf.urls.defaults import patterns, include, url
urlpatterns = patterns('',
url(r'^show/shouye/$','blog.views.index',{'template_name':'index.html'}),
url(r'^show/zhengzhi/$','blog.views.index',{'template_name':'zhengzhi.html'}),
url(r'^show/jingji/$','blog.views.index',{'template_name':'jingji.html'}),
)
配置views
[python]
#coding:utf8
from django.shortcuts import render_to_response
def index(req,template_name):
return render_to_response(template_name,{})
配置模板中的base文件
[html]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#main{
border:1px solid black;
margin: 20px auto;
background-color: red;
width: 80%;
}
#footer{
clear: both;
border:1px solid black;
text-align: center;
}
#left{
width:20%;
float: left;
padding: 20px;
}
#right{
width:50%;
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">
{% block nav %}
<a href='/show/shouye/'>首页</a>
<a href='/show/zhengzhi/'>易做图</a>
<a href='/show/jingji/'>经济</a>
{% endblock %}
</div>
<div id="left">{% block left %}{% endblock %}</div> #记住这种语法结构,有始有终
<div id="right">{% block right %}{% endblock %}</div>
<div id="footer">{%block footer%}footer{%endblock%}</div>
</div>
</body>
</html>
继承父模板,开发子页面
[html]
<!-- index.html -->
{% extends 'base.html' %}
<!-- jingji.html -->
{% extends 'base.html' %}
{% block left %}
<li><a href=''>经济1</a></li>
<li><a href=''>经济1</a></li>
<li><a href=''>经济1</a></li>
<li><a href=''>经济1</a></li>
{% endblock %}
{% block right %}
<h1>经济</h1><h1>经济</h1><h1>经济</h1><h1>经济</h1><h1>经济</h1><h1>经济</h1>
{% endblock %}
{% block footer %}
{{block.super}}
<div>经济 footer 经济 footer</div>
{% endblock %}
<!-- zhengzhi.html -->
{% extends 'base.html' %}
{% block left %}
<li><a href=''>易做图1</a></li>
<li><a href=''>易做图1</a></li>
<li><a href=''>易做图1</a></li>
<li><a href=''>易做图1</a></li>
{% endblock %}
{% block right %}
<h1>易做图</h1><h1>易做图</h1><h1>易做图</h1><h1>易做图</h1><h1>易做图</h1><h1>易做图</h1>
{% endblock %}