飞龙博客

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

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

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

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

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

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

Ok!Follow feilong!

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

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

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

2、新建企业网站首页网页文件。
打开notepad++ 把下面的代码写进一个文件，另存为 index.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标签后的位置，添加下面的一行代码：

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

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

三、添加css代码

1、然后，我们修改下面这个地方：

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

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

心思细腻的你，也许就会发现，
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文件都按原有结构上传到飞龙主机或你自己的主机。
最后，浏览你的企业网站。

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

更新网址：https://feilong.org/website-abc-course
最初发布：20210122 09:11:32 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： html css 教程

旧文：justify两端对齐前端css兼容火狐谷歌Safari安卓IOS解决方案