如何使用网页模版快速制作一个网页?

网站的搭建需要页面、域名和云服务器,这一篇教程是第一步,也就是关于页面的制作。

1. 基础知识


页面分为动态网页和静态网页,注意动态网页不是指网页有动画,而是指页面内容可以通过不改变代码实现。静态网页一般为展示类型,也可以有很多炫酷的动画。


静态页面是不能随时改动的,静态是一次性写好放在服务器上进行浏览的,如果想改动,必须在页面上修改,然后再上传服务器覆盖原来的页面,这样才能更新信息,使用者不能随时修改。
动态页面是可以随时改变内容的,有前后台之分,管理员可以在后台随时更新网站的内容,前台页面的内容也会随之更新。


这里我所说的主要是静态网页,仅仅涉及到最基础的HTML语言,动态网页一般涉及到JSP、PHP、ASP等技术,而静态网页一般会涉及到HTML、CSS、Java Script等技术。


2. 所需工具

所涉及的工具有模版文件和编译器,其中模版是从网上选择下载的,编译器常用的有Sublime Text,编译器的作用是将代码转换成机器语言,也就是0和1。


模版需要从网上下载模版再进行修改,当然也可以自己制作,不过难度相对较高,也较耗时间。这里我选择的是muban.io,里面可以选择喜欢的免费模版下载。


下载好后解压,文件夹里的index.html文件就是我们要编辑的主页,选择用Sublime或Dreamweaver打开即可编辑,用浏览器打开即可预览。Dreamweaver是Adobe的软件,界面可以选择初学者的上下样式,更加容易上手,但对电脑性能(应该是CPU)要求较高,我手上这台MBP13 2016款几乎无法流畅使用。

3. HTML基本结构:

<HTML>
  <head>
    <title>标题内容</title>
  </head>
  <body>
    内容
  </body>
</HTML>

如上所示,整体由一组对应的<…>和</…>构成,head为标题,body为内容。

4. HTML属性:

font属性:也就是和字体相关的属性,与Word这种可视化软件不同,所有的修改都由代码实现。

例如:

<font face=“黑体” color=“#000000” size=“5”>文字</font>

与字面意思相同,face是字体,color是颜色,可以输入16进制RGB颜色或者blue等颜色名,size是文字大小。 用Find工具定位到文字的位置,直接修改即可,Sublime保存后,刷新浏览器打开的页面即可,如果是Dreamweaver,则可直接点击页面上的内容编辑。

Sublime修改文字示例:

添加图片注释,不超过 140 字(可选)

Dreamweaver修改文字示例:

division属性:div内的内容为一个整体,一个区块,删除网页某一块内容以div为单位删除,点击左侧行数处三角箭头可以折叠快速删除。

例如:

<div>区块内容</div>

删除某一区块示例:

paragraph属性:即段落属性,会自动与上下内容分开,形成一个单独的段落。

例如:

<p align=“center”>段落内容</p>

Align为对齐,center就是将段落居中对齐

超链接:

例如:

<a href=“XXX.html”>超链接</a>

将某网页保存在文件夹下,这里我新建了一个名为article的文件夹方便管理,在引号内输入html文件的路径和名称,保存刷新后即可看到导航栏的导航内容已经发生了变化。其中<li>为表单list,一般在导航栏比较常见。

image属性:

例如:

<img src=“XXX.jpg” width=“50%”>

Img src就是image source,即图片来源,一般图片放在images文件夹里,width即宽度,可以用百分比或者数值调整。

HTML的换行和空格:

HTML中文字的回车不能直接读取,一般用<br>即breakline换行,断开两行内容

例如:

第一行内容<br>第二行内容

一般情况下,空格可以直接读取,若不能直接读取,也可以使用&nbsp,即空格。

例如:

前半句&nbsp后半句

效果展示:

我的个人主页:(最近可能无法访问,备案结束即可正常访问)

以上就是网页模板怎么用的详细内容,小编的个人网站就是在muban.io免费下载的,这是个很不错的模板网站,里边的模板都是响应式的,能够适配各种设备,且页面精美。

muban.io的模板是其中更改操作最简单的,小白不用担心下载模板不懂html知识,不知道怎么改啦操作简单归简单,但生成的网页又非常漂亮,想要自己当站长的朋友快去muban.io看看吧!