网站设计制作教程 第1篇
创建 app 的命令是:
最后的 blog 是 app 名称。
创建好之后,打开 first 目录中的 ,找到 INSTALLED_APPS ,将 app 名称,也就是 blog 放进去。到此,代码就全部准备好了,接下来是启动。
启动命令是:
如下效果图:
出现了 就说明启动成功了,此时可以访问了,且终端下方,无法输入内容,也就是网站运行中。
下面是访问网站页面的效果图:
说明:截图中,Django 版本是,与 Django ,虽然不同,但是没什么差别,都是基础内容的学习。
Django 大版本之后有语法差别,小版本之间没什么差别,都是一些细节上的优化和改动,所以你安装了django3,就可以正常的学习本课程。
1、如果指定版本安装 django 版本 库,命令是: 2、新建 demo 项目,命令是: 3、新建 app,app 名是 demos,命令是: 4、启动 demo 项目,命令是:
要掌握 Django,必须了解 Django 的 MTV 模型,这是非常重要的内容,不管是 Django1 还是 2 以及后面正在更新的 3 系列,MTV 模型是永远不会变的。
先来解释下 MTV 模型的意思,MTV 是三层关系,分别是:
这三者是 Django 的网页的运行机制,下面单独介绍下 MTV 每个模板的功能。
Model 模型,是负责管理数据的。
每个网站都需要有数据库用于存储网站数据,网站需要展示数据时,也需要从数据库查询并读取数据。
Django 内置了 ORM 实现框架,支持多种数据库,默认的数据库是 Sqlite,当然也支持 Mysql 等关系型数据库。
Template 模板,指的就是网页模板。
真实给用户看的内容,都是数据+网页模板的结合。数据从数据库中查询出来,并渲染到模板中,得到单个的网页,再把网页返回给用户查看,这就是网页的渲染流程。
那模板长什么样子? 上节课程最好的静态网页,放到 django 项目的特定文件夹中,就是我们的模板,再简单的稍作修改,就得到了可以渲染数据的模板。
前面介绍了各种操作,例如查询并读取数据、数据渲染到网页,虽然有介绍,但并未介绍如何写,怎么写,写在哪。
这些逻辑代码,都是要写在 view 视图中的。View 视图,就是对应的逻辑代码存放的位置。
网站是要接收用户的请求,并返回给对应的响应,而 django 接受到的请求,发给指定的视图函数,视图函数做设定好的操作,再返回响应给用户,这样就完成了一次请求和响应操作。
以上就是 MTV 模型的介绍,当然这里介绍的内容不难,只是对于模式的介绍,代码上具体的细节,还有很多,后面会逐一介绍。
下面看一个图,介绍 MTV 三者管理的模块,如下:
介绍到此结束,后面会具体上手写代码,完成一个功能简单的文章网站。
MTV,分别对应的三个单词是________ 、________ 、________ 。
django 项目准备好了,静态网页也准备好了,本文学习如何将网页接入到项目中。
第一步,在 blog 应用的目录下,创建一个名为 templates 的目录,注意不要写错。
这个 templates 目录,就是存放模板的目录,名称不能错,因为这是 django 默认读取的目录。然后将两个 html 文件放进来。
要完成网站首页,就必须定义首页的视图函数,这个函数放在 blog 目录下的 文件中。
打开了 文件,新建一个 index 函数,参数是 request,如下代码:
这个就是视图函数的定义,代码解释:
以上是函数的介绍部分,那这个函数也就是简单的返回了一个载入 的响应。如下图:
函数有了,那就给他分配一个 url,url 就是浏览器中访问的地址。
url 的配置,在 first 目录下的 文件中,这里有一个 admin ,是默认的 django 后台配置,后面我们会用到这个。
既然是绑定首页,所以 url 的地址,应该是主域名,那在绑定的时候,代码如下:
视图函数绑定 url ,首先是从 中导入 index 函数,然后在 urlpatterns 中进行设置就行。
代码已经准备完毕,现在来启动项目。 打开命令行,输入命令:
截图和效果图如下:
如果你要绑定到 index路径上,只需要修改一下 中的内容就可以。
通常首页,是空 url 的默认路径,或者有 index 的 url 地址,都是可以的。
制作网站首页,有哪些步骤?
网站设计制作教程 第2篇
级联样式表(Cascading Style Sheets, CSS)作为网页设计的核心之一,负责网页的布局、颜色、字体等视觉表现。样式声明由选择器、属性和属性值组成,以大括号包围,并通常以分号结束。CSS是一种基于规则的语言,这些规则由选择器指定,然后使用一对大括号 {}
来定义属性和值。
继承是CSS中的一个重要概念,它允许某些CSS属性从父元素传递到其子元素。不是所有的CSS属性都可以继承,但像字体大小、颜色和字体系列等属性则可以。例如:
在这个例子中, h1
元素会继承 body
中的 font-family
和 color
属性,因此 h1
的文本将以Arial字体显示,颜色为深灰色。
CSS选择器用于选择HTML文档中的元素并应用样式。有多种类型的选择器,包括元素选择器、类选择器、ID选择器和属性选择器等。对于元素选择器,它直接使用元素的标签名,例如 p
选择器会选择所有的 元素。类选择器和ID选择器分别使用点号 .
和井号 #
标识,例如 .container
和 #header
。属性选择器可以基于属性的特定值来选择元素,例如 input[type=_text_]
。
组合选择器允许我们更精确地选择元素。比如,使用后代选择器(空格)可以选择特定元素内部的所有指定类型元素。下面的代码示例展示了如何使用后代选择器:
上述代码会移除 元素内所有 元素的下划线,并将其颜色设置为黑色。
为了构建复杂的网页布局,CSS提供了多种布局技术。最常用的技术之一是浮动( float
),它可以让元素脱离正常的文档流并靠边浮动,常用于实现多栏布局。
定位( position
)则控制元素在页面上的具体位置,有 static
(默认)、 relative
、 absolute
、 fixed
和 sticky
几种值。不同定位值的元素表现各不相同,比如 absolute
允许你相对于最近的已定位的祖先元素定位,而 fixed
则是相对于浏览器窗口定位。
弹性盒子布局(Flexbox)是另一种强大的布局技术,它提供了一种更有效的方式来对齐和分布容器内部项目的空间,即使它们的大小未知或是动态改变的。使用 display: flex;
可以将元素设置为弹性容器,其直接子元素将自动成为弹性项目:
响应式设计是网页设计中一个重要的趋势,它允许网页在不同的设备上呈现最佳的视觉效果,无论是桌面显示器、平板还是手机。响应式设计的关键是使用媒体查询( @media
)来根据不同的屏幕尺寸应用不同的样式规则。
媒体查询允许你定义多个断点(breakpoints),每个断点指定了一组CSS规则,这些规则仅在特定的条件(如屏幕宽度)下应用。例如:
此外,为了保持布局的灵活性和可扩展性,常常使用相对单位(如百分比和视口单位)而非固定单位(如像素)。
CSS3引入了过渡(Transitions)、动画(Animations)和变换(Transforms)等视觉效果增强的高级特性。过渡允许属性在改变时平滑过渡,常用于悬停效果;动画则提供了一个完整的框架来自定义元素的动态效果;变换可以对元素应用2D或3D转换。
使用 transition
属性可以轻松实现过渡效果:
上述代码会使按钮在鼠标悬停时放大10%。
随着网站内容的增长,CSS文件的大小也可能随之增加,从而影响页面加载时间。为了优化性能,可以压缩CSS文件,移除不必要的空格、缩进和注释,使用工具如CSSNano或YUI Compressor。压缩后的CSS文件体积更小,加载速度更快。
浏览器缓存是一种缓存机制,可以存储用户的网页资源,以便下次访问相同页面时能够快速加载。通过设置合适的缓存头(如 Cache-Control
)可以提示浏览器缓存特定资源,比如:
这行HTTP头指示浏览器缓存响应至少一年,减少HTTP请求的数量,从而提高用户体验。
在本章中,我们深入了解了CSS的基础语法、选择器的用法和CSS在网页布局设计中的关键角色。此外,我们还探讨了响应式布局的设计原则和性能优化技巧,以及CSS3带来的视觉效果增强技术。通过本章节的学习,你将能够更好地控制网页的样式和布局,进而实现更加丰富和动态的网页设计。
网站设计制作教程 第3篇
Pixso 提供了 Cloud 功能,这是一个在线平台,允许设计师将项目上传到云端,并与团队或客户共享。他们可以直接在网页上评论、测试原型并下载资源。这项功能大大促进了团队间的协作效率。
易用性和灵活性
对于新手来说,Pixso 的简洁直观的用户界面非常友好。所有工具和菜单都经过精心设计和安排,使用户可以快速理解和使用。更重要的是,Pixso 的强大灵活性也表现在其对插件的支持上。有数千种插件可供选择,以扩展Pixso的功能,并让设计流程变得更为顺畅。
✅ Pixso的使用场景
从简单的图标设计,到复杂的应用程序和网页制作,Pixso都能完美应对。
✅ Pixso 个人用户完全免费
以上就是一个全面的免费制作网页教程,希望能对你有所帮助。记住,制作网页不仅需要技术知识,更需要耐心和坚持。