响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

制作html网站(实用)3篇

2024年制作html网站 篇1

听你的意思是想做个静态页面做一个网站吧。

单纯想用HTML做一个网站是可以的,但是纯粹用HTML写网页真的丑...

想做出一个漂亮的现代网页CSS少不了。

先大白话说说HTML、CSS、JS的作用,再说HTML做网页吧。HTML:

1.告诉计算机页面里有什么。

2.各种元素的前后关系、父子关系。

3.根据所用的元素判断元素占一行还是行内元素。

4.告诉浏览器需要加载什么脚本(script)、样式(css)等等。

6.head元素内,可以告诉浏览器或者爬虫,网站使用的语言(英语还是中文等),做一些移动端兼容设置,title就是本页面的标题。CSS:

css是在HTML给出一个抽象的脸的前提下让每个五官精确定位,它也像是在整容或者化妆,让界面更符合现代人审美。

1.定位属性,position,left,top,block等。

2.装饰属性,color,background,border,shadow-box等。

3.动画属性,transition等。JS:

JS代表着进一步自由,你能做更多的操作,它能做的事情说不完。

1.你可以利用JS与服务器后台沟通,当然HTML的form元素也能做到,但是form提交会刷新整个页面。

2.你可以设置大量的事件监听,如鼠标点击、鼠标移动、页面滚动等,当这些事件发生时你可以做一些事情。

3.利用一些浏览器接口额外做些事情,例如保存数据至本地,更强的图形化,例如利用webgl做动画片或者游戏。如何用HTML制作一个简单网页?

1.如果你的网站只是展示简单的信息又想外观还过得去,我建议你使用Bootstrap可视化布局系统来生成页面,简单的拖拽元素后,你只需要将生成的代码复制到html文件里的body内就好。

2.如果你很懒的话,也可以用纯粹的HTML写页面,学习的话推荐菜鸟教程。

题外话:如果你很有野心的话,建议学习下前端框架VUE,上手也挺简单,官网上和网络上案例多,学习曲线不怎么陡峭,使用element组件库或者ant的组件库,页面体验将会得到炸裂级的提升。

2024年制作html网站 篇2

谢谢邀请。

你这个想法可能是不太成熟的。

关于模板与布局

其实不管是做一套静态网站,还是做动态网站,模板文件 与 布局的概念你要有,且大量应用;

整体布局与局部视图的概念也要有;

资源文件的控制及 CSS主题的控制策略要有;

关于优秀的框架与设计

优秀的JS框架如 JQuery,要学会运用。不然搞各个浏览器的兼容性处理会让你累成狗;

关于响应式设计,既兼容 PC端的访问,也兼容Mobile端的访问是主流。可以考虑使用 bootstrap框架;

学习图片处理的技巧

尽可能使用压缩过的小图片,以节省流量,提升访问速度;

如果是在APP上,尽量使用svg来代替图片,以进一步节省流量,提高访问效率;

希望能对你有所帮助和启发,谢谢。

(结束)

2024年制作html网站 篇3

最近因为要做一个小型的网站,需求很简单有点像公司内部的管理网站,和室友一起倒腾,发现了一些坑。我自己之前没有接触过python 但是发现真的非常好上手。

我们没人会前端,所以最怕修改网页,一开始选择了Flask框架,我搞了半天遇到各种坑(还要修改css 麻烦),中间件也不好用,劝大家用django,资料多,非常好用。

那么开始说重点,需要做的哪些东西。

http://python.usyiyi.cn/ 是主要的资料,里面是中文的资料建议一点点看下去。

1-项目环境搭建。

  1.1第三方库准备

  开发环境是mac os 和ubantu 推荐大家下载一个第三方的软件叫 "Anaconda" ,安装非常简单,直接运行脚本就好。

安装完了,可以到命令行运行 pip list。可以看到已经安装的python第三方库 。

  此时我们是没有django的库的。

  

1.2IDE的安装

IDE 使用eclipse,讲一个工具Pydev,安装自行百度,点点就行。

然后 到Eclipse了 New->Project->Pydev->Pydev Django Project,一路next 。发现eclipse 找不到Django 环境,回来点击 click here to configure an interpreter 然后把python interpreter 中的名为python的删掉,那是系统默认的,改成anaconda目录 下 bin/里面的python。默认是2.7.11吧。忘记安装目录?一个命令 sudo find / -name anacon* 搞定~。找到以后加进去,到了图一这一步就结束。

                      (图1)

2-数据库配置和使用

  2.1数据库连接文件配置

我选了mysql,当然在这之前mysql的帐号密码应该自己确定了吧。mysql配置应该简单。但是如果要支持远程访问,比如你把数据库放到云上,别人机器上,毕竟开发不是一个人的事,我自己遇到的坑是"关于 mysql 配置文件中的 bind-address",自行百度,解决方案是删除就好。(推荐几个mysql 连接的桌面软件,用Navicat ,或者mysql workbench 都是不错的)。(后来发现这里输入密码和帐号没什么用还是要去修改在与项目同名的app里面的setting)。现在在mysql自己创建一个database 取名随便。我叫test,其他字段应该不用解释了如图2。

                           (图2)

  2.2创建APP(模块)

  然后我们在工程里根目录右击->Django->Create App->输入名字就好。因为网页主要是MVC模式,创两个吧。一个叫db 专用于管理数据库(models 层) 第二个专用于后台逻辑。名字随便取因为可能要对应多个模块。django里面增加一个app 就需要在与项目同名的那个app的setting中Installed_app里面加入app名(如图4)。我们加入以后目录结构(如图3.)

                             (图3)

                             (图4)

  2.3用django模型层建表

  数据库正式开发,数据库创建,在db的models.py中 对应数据库中每个表写class,就是定义好字段,因为Django的目标是要程序员完全脱离数据库的操作。那么我们先不建表,cd 到你的工程目录去,用命令行 用打入 manage.py migrate 命令。效果如图5。

                          (图5)

  如果你的配置是没错的,此时django 已经在你的数据库中建了很多表,都是django自带的,我也没有用起来,唯一用的是django自带的数据库管理界面,类似于Navicat,还支持搜索功能,自己去文档里 http://python.usyiyi.cn/django_182/intro/tutorial02.html 学吧。

然后在db的models里写一个表的代码。然后效果如图6 还是用了Manage 脚本。from __future__ import unicode_literalsfrom django.db import models# Create your db here.class Message(models.Model): user_id = models.BigIntegerField(blank=True, null=True)

                            (图6)

  到这里表都结束了,实际开发中,我数据库都是先建好的,那我全部都要写每个类是不是很麻烦,有没有偷懒的办法呢?

  答案是用./manage.py inspectdb

  用了就知道,他会反向生成表的代码, 然后直接复制进models里面就好了。

3-url 解析

  3.1url匹配处理函数

  在Django中 一般url解析分为两层。

  第一层负责解析APP的名,像我在test 里urls.py里写的(如图7)。第一个参数表示响应的url,第二个参数表示处理的模块。

                           (图7)

  第二层是解析到具体的模块中的某个函数来响应对应的url。

  比如在view app 中的urls.py(需要自己创建) 写的(图8)url(函数中第一个参数为匹配路径,后一个是对应函数名)里面的home对应view app中的views.py 里的函数home

                          (图9)

  3.2静态网页配置

  其实到这个时候已经可以实现响应了。(到这里还要解决一个问题 'Index/home.html')在哪里呢?我们此时创一个文件夹叫templates html都应该放在这里,Index 是一个模块的名字。你可以在templates下面建很多个文件夹,对应很多的APP模块。(html就不属于本文范畴了)此时目录结构为

                           (图10)

搞定了后别忘记在test的setting 里加上一句代码

                        (图11)

  "就是DIRS"里面.想想也是,不然 Django怎么知道我们的html放在这里呢。

4-逻辑层(也就是最后一步了,怎么样把数据库的东西查出来,放到html中。)

  4.1数据库中的数据

  往表里插两条数据

                            (图12)

  4.2动态显示数据

   看下代码:html部分

                            (图13)

  里面的{%%}是django 自带标签的自己看文档学一下就会。

                         (图14)

  里面的Message.objects.all() 表示从Message表中取出所有数据。还有什么复杂查询自己看文档,一般都是filter exclude,django 还支持sql语句直接写,函数名叫raw().

context就是返回给页面的一个对象里面放了很多值。在python里叫字典(dict)

  4.3启动服务器

  最后我们用命令行来到我们的目录,敲./manage.py runserver (要支持所有端口 和外网访问加0.0.0.0)。然后出现

                           (图15)

  4.4查看网页

  再到浏览器敲127.0.0.1:8000 django默认端口                   (图16)

  4.5实际开发中问题

  结果出来了。遇到具体问题就是查一些文档和stackoverflow。发现一个时区问题,建议和我改成一样。把test里面setting中的时区部分改成这样。否则你会有八个小时的时差,

                            (图17)

  。还有啥问题可以和我讨论的可以留言。小弟也是刚做完这个项目从零开始。码字不易~小问题就不在这里说了。

界面日志界面

管理界面

评论界面

使用的技术python、JavaScript、CSS、htmlMySQL 数据库jinja2 模板引擎Vue.js 界面框架Nginx Web服务器gunicorn WSGI服务器Supervisor 监控服务进程工具Fabric 自动部署工具

学习过程

刚开始跟着作者的教程编写这样一个博客网站的时候感觉很困难,因为自己对web上的很多概念不了解,对web服务器是怎么运行也不清楚,所以不知道作者为什么要这么写代码。后来去学习了Django,知道了什么是ORM,什么是模板等一些概念后,并且能够使用Django搭建一个网站,再跟着作者学习就轻松了一些,希望我的学习过程对你有启发。当然,如果你只想快速的搭建一个网站,可以使用Django、Flask等免费开源的网站框架,而不用自己一步一步的去实现它。

猜你喜欢