飞龙博客

feilong.org 前端开发教程

入门小白菜鸟学习htmlcss企业网页制作飞龙文字教程

飞龙更新于 2021-01-22 03:33 加入书签 CTRL+D 有 781 个朋友来过

每当你打开笔记本电脑上网,看到的都是网页。每当你打开手机浏览器之类app,你看到的也是网页。

如果你是大学生想学会制作网页,那你肯定想知道如何做。如果你是企业,想做一个漂亮的企业网站,你也会请专业人才或专业公司做网站,甚至自己尝试做网页。

也许你想你对网页制作一无所知,那该如何做网页呢?别急,知道的不难,难是因为不知道。只要勤于学习,天底下就没有你学不会的东西。

网上的教程太零碎,初学的人抓不到重点。所以飞龙抽空写了这个简单的教程。更新地址在: http://feilong.org/web-site-abc-course
下面跟飞龙来学如何制作网页吧。为了方便讲解,下面飞龙以制作企业网站为例子。

静下心来,花1到8个小时,把飞龙说的步骤慢慢操作完,你就入门了。
不要着急知识性的东西,那个可以慢慢以后再自学。
先把技术的整体搞清楚。

Ok!Follow feilong!

一、我们要准备的工作:
安装好网页制作软件 notepad++
安装好谷歌浏览器或火狐浏览器
学习使用的虚拟主机

二、写html网页和文件夹结构。

1、新建工作文件夹。
文件夹名称,用字母开头,可以后面加数字。
比如 gongsi0。接下来飞龙就都在这里开展网页制作的工作。
制作网页的内容结构和基本文件夹。

2、新建企业网站首页网页文件。
打开notepad++ 把下面的代码写进一个文件,另存为 index.html。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width, minimum-scale=1.0, user-scalable=no"/>
<title>某企业网站首页</title></head>
<body id="index">
<div class="head">
	<h3>某股份有限公司</h3>
	<ul>
		<li><a href="index.html">首页</a></li>
		<li><a href="jianjie.html">公司简介</a></li>
		<li><a href="chanpin.html">产品目录</a></li>
		<li><a href="dongtai.html">公司动态</a></li>
		<li><a href="zhichi.html">技术支持</a></li>
		<li><a href="anli.html">工程案例</a></li>
		<li><a href="zizhi.html">相关资质</a></li>
		<li><a href="lianxi.html">联系我们</a></li>
	</ul>
	<p><img src="https://pic.rmb.bdstatic.com/14282c8595f7b2d50f2704ba2299de06.jpeg"/></p>
	<p>今天是: 2021年1月21日星期四</p>
</div>
<div class="foot">
	<p><a>联系方式</a> <a>公司简介</a> <a>相关资质</a> <a>隐私政策</a></p>
	<p>欢迎访问股份有限公司 ? 1999-2021 版权所有</p>
	<p><a>企业网站制作教程</a></p>
</div>
</body>
</html>

也许你说:这个网页文件里面写的是什么?
不要急。你就看两个body之间的内容就行了,我们打开网页看到的东西绝大部分都放在这中间。

至于头部那些莫名其妙的东西,除了汉字,你看不懂,也没有关系!你先不学这些。

我们先看body。这是一个英文单词,叫主体部分。网页里有很多这种英文单词或英文单词的缩写。
我把它们叫做标签,或者说网页元素。

每个标签有开始也有结束。标签中间可以放其它内容,比如文字、图片或链接。

这个很简单的企业网站首页文件的body标签中间,飞龙使用了以下的标签:

div:区块划分。英文单词是 division。
h3:三号标题。英文单词是 headline three
ul:无序列表。英文单词是 unordered list。你看到的大部分列表都用这个标签。
li:列表内的每一个项目。英文单词是 list item。经常与 ul一起使用。
p:段落。英文单词是 paragraph。
a:链接。英文单词是 a
img:图片。英文单词是 image

以上是6个核心标签,你只需记住标签的写法。至于英文单词是为了方便你理解标签的来源。

如果你掌握以上核心标签,你就可以制作网上看到的大部分网页,特别是企业网站!
如果你想精通html,还需要学习大概20到30个常用的标签就行了。

3、发布html网页。
怎样把网页上传到虚拟主机空间?
跟飞龙学,你就不要着急制作新的网页。因为无论你制作多少个网页,其基本学习思路都在前面说了。
这一步没啥好说的。上传文件到主机。没主机就联系我,我来给你上传。

如果你自己有虚拟主机,可以自己去上传。
比如百度智能云。也可以买一个。如果你是刚毕业学生,就直接找飞龙。

4、查看效果。
让飞龙看看你制作的网页怎么查看效果?
如果是本地笔记本电脑,你直接用谷歌浏览器或火狐浏览器打开你做的 网页文件就行了。
如果你自己或通过飞龙把网页文件上传到虚拟主机了,那用浏览器打开网址就行了。

5、修改index的html结构
前面飞龙把网页都发布到虚拟主机,你用浏览器或手机查看,会发现页面外观实在的朴素,或者说丑陋。是吧?
这种只有html的网页效果,是一种默认的外观。了解默认外观也有点作用,比如那些标签是独占一行,那些是挤在一行。哪些默认是加粗的。哪些默认是斜体。

如果需要安装公司设计人员设计的外观来美化的话,则需要继续学习css
用notepad++ 打开前面制作的 index.html

飞龙先在head标签中间 title标签后的位置,添加下面的一行代码:

1
2
<title>某企业网站首页</title><link href="skin/a_gongsi1.css" rel="stylesheet">

这段代码意思是,这个index.html文件会关联一个独立的css样式文件。这个文件就在当前 skin目录下放着,名字叫 a_gongsi1.css。

既然如此,那就新建一个 skin目录,再新建一个文件 叫 a_gongsi1.css
先准备着,不用着急管它们。

三、添加css代码

1、然后,我们修改下面这个地方:

1
<h3 class="a0eye">某股份有限公司</h3>

注意看,飞龙只是添加了 class="a0eye"。
意思是 h3标签带有一个名字叫 class的属性,这个属性的值是 a0eye

2、用notepad++ 打开前面准备好的样式文件 a_gongsi1.css 里面现在什么内容也没有。
我们在 a_gongsi1.css 里面写代码。飞龙把它叫做样式代码:

1
.a0eye{color:red;font-size:22px;}

心思细腻的你,也许就会发现,
a0eye正好是 index.html的h3标签的class属性的值!
color 是英文单词。意思是颜色。
red 也是一个英文单词。意思是红色。
font-size 是字号,也就是字符尺寸大小。
px是一个长度单位,做网页常用的。22px 是多大,等下用眼睛看看就知道了。

那么好了,你自己就知道,这一行代码意思是:
某个标签如果带有
class="a0eye"
那么,就让这个标签内的字符变为红色,字号。

3、ok,你现在可以在笔记本电脑上用谷歌或火狐浏览器,打开index.html
你发现了什么变化?是不是站点的眼睛变成了大字的红色?

4、接下来就是按效果图继续加css代码。
这个需要学大概20到28个英文单词就行了。
这个工作飞龙先略过,不用管它。

四、接下来就行做其它的html页面和css。
比如前面html代码里提到的那些文件。
并在a_gongsi1.css里写样式外观代码。

jianjie.html 公司简介
chanpin.html 产品目录
dongtai.html 公司动态
zhichi.html 技术支持
anli.html 工程案例
zizhi.html 相关资质
lianxi.html 联系飞龙

五、上传文件到虚拟主机。
按前面提到的方法,把做的网页和css文件都按原有结构上传到飞龙主机或你自己的主机。
最后,浏览你的企业网站。

六、有什么不明白,或我没说清楚的地方,联系飞龙。

飞龙初发:
2021-01-22 09:11
本文更新网址:
https://feilong.org/website-abc-course

所在目录: html css 教程

旧文:

  • html css js
  • angular react vue
  • flutter python