怎么制作网页？仅使用html css制作你人生第一个专属网页 (免费网页设计教程) | How to create a website for free | 网页编程系列 第1集

你想学习怎么制作网页？想拥有属于自己的网站？不论你是学生，白领又或者是追梦者，欢迎你加入这个免费的网页编程课，这是专门为零基础的同学们打造的入门编程课。 我们会在课程里一起动手写代码，让你以最快的速度上手网页编程。在课程里我们会学到HTML, CSS和JavaScript。这是制作网页的必备工具。除此之外，我们也会学到怎么使用代码编辑器(Code Editor)去编写代码。 记得要关注频道，那样你就不会错过这个网页编程课了。 你的梦想从点击视频开始！

#怎么制作网页 #免费网页设计 #编程入门



https://youtu.be/-SsZRrFdVlc

☕ ☕ ☕ 给我买杯咖啡提提神吧！ ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4


文字内容：

大家好 我是文轩
欢迎收看 我们文轩解码
今天我会教同学们制造人生第一个网页
这是网页编程系列的第一集
陆陆续续我会推出这个系列的续集
不想错过的同学欢迎关注点赞
在我们开始之前
我想让同学们先看看这个
网页的最终效果图
这集教的的东西很基础
所以同学们不必太过担心
我们将在网页显示一个主标题
一个副标题和一些联系方式
我们只需要使用
html和css就能把这个网页做出来了
代码编辑器呢
我会选用VS Code
你也可以选用其他的编辑器
如果还没安装任何的编辑器
我还是建议同学们先暂停视频去安装
VS Code
你可以到下面的描述栏里点击下载链接
等你安装完了再继续
好的 已经安装过代码编辑器的同学们
我们开始吧
首先我们需要创建两个文档
一个文档呢
是用来保存html的代码
另外一个文档呢则是用来
保存css的代码
那现在我们先去创建一个html的文档
我会把它保存为index.html
css的代码
我则会把它保存为
style.css
好的
那我们现在开始写还html的源代码
让我先切换到index.html
这是HTML tag (标签)
一般HTML tag
它都是以成对的形式出现
所以它会有一个opening tag (开始标签)
和closing tag (结束标签)
这两者的区别就是在closing tag里
它多了一个forward slash (斜杠)
那现在我要在这个html tag里
再添加head tag (头部标签)
和body tag (主体内容标签)
在head tag里
我们可以连接一些外部资源
比如说像css还有javascript
这些我们都需要把它放到head tag里
在body里可以放一些网页的主要内容
就根据我们之前那个预览图
我们可以把那个主标题副标题
还有一些联系方式都放在这个body里
接下来
我们要为我们的网页添加一个外部资源
这个外部资源就是style.css
就是我们之前保存的那个文档
那样的话
我们需要在head里边添加这个外部资源
我们会透过link tag (链接标签) 把这个style.css
连接起来
这边我会输入stylesheet因为
这一次
我们要连接的是css
我会在href里输入style.css
因为这次我们要连接的外部资源
叫style.css 这个基本上就是
我们的外部资源的一个url
我把这个link tag关闭
大家有没有发现
之前我跟你们说
一般开html tag都会以成双成对的形式出现
但是这一个link tag
他没有closing tag
只有opening tag
确实是那样
因为不是所有的
html tag都会以成双成对
的形式出现
就像这有一个就是一个例外
他只有一个opening tag
没有closing tag
所以我们需要在它的结尾这边
添加一个slash
来关闭这个tag
我们除了在head里边可以添加外部资源
也可以在这里添加一个标题
这个标题呢
我们如果在这边添加了之后
它会在这边显示
那我们现在保存看看这个效果
我先保存这个文档
然后在
浏览器里边再打开
我刚才保存的index.html
看看这边 这个title已经换成了
my first web page
接下来我们要为网页加入主体内容
这些主体内容将会放在body tag里
根据我们之前看过的效果图
我们的网页将会有一个大标题
一个副标题
还有一些联系方式
那接下来
我们把主标题先放入到body里
我会用h1去显示这一个主标题
我们的副标题则会用h3去显示
先保存一下
然后我们预览一下
看看效果
这个h1和h3的区别
就是在于字体的大小
h1会比h3相对大一点
它的字体
接下来我们会把邮箱地址和手机号都
一起放入到body里
这一次我这会使用p tag是显示邮箱地址
还有手机号
p代表paragraph
意思就是一个段落
手机号我也是会用p tag显示
我先保存一下
然后刷新我的chrome
基本上我们网页的主体内容就已经完成了
那接下来呢
我们将会使用css代码去美化这个页面
因为这个页面看起来有点单调
和我们之前看的效果图有点不一样
但是当我们
编写了这个css代码之后
就会和之前预览的效果图
看起来是一模一样的
看起来稍微漂亮一点
好的
那现在我们开始编写css的源代码
那我现在切换到style.css
我把这个tab拉到下面人方便你们看
大家有没有发现这个字体不太好看
所以我想把他们统一换成另外一个字体
因为这是body的内容
所以我们在style.css里
可以针对body的
css selector (选择器) 去做一些调整
首先我们需要输入这个body的
css selector
然后要针对font-family
做一些设置
我要把这个默认的字体换成Arial
我也想把这个背景颜色换成灰蓝色
你看起来就不会太过刺眼
所以我就要针对这个background-color
去调这个颜色
我先把这个文档保存一下
然后刷新chrome
现在我们的字体还有网页的背景颜色
都已经换成我们想要的了
那接下来 我们就需要把这些文字
把这些内容挪到中间
为了更方便
我们移动所有的内容
我们将在body里面添加一个div
然后把所有之前写过的
那些内容都移到div里
我们现在把所有的内容都移到div里面
然后我们在div添加一个class
把它命名为content
那样的话
我们就可以更方便的
在css里把全部的内容
移到网页的正中间
我们刚刚为div
添加了一个content class
所以等一下我们在style.css里
就可以直接使用class css selector为
这个div做出一些stylesheet上的调整
如果要使用
class css selector的话
我们就是要输入dot (点)  然后class的名字
首先我想把
它的背景颜色调成深灰色
所以我就要针对background-color
去调颜色
保存
然后刷新一下
看看效果
这个有点宽
所以我们
把它的宽度稍微调低一点
把它调成300 pixels (像素) 看看
保存
我再刷新
这宽度差不多了
这里有点挤
看起来有点难受
稍微把它的padding调一下
把它调成40 pixels
刷新
这比之前好多了
稍微宽一点
那现在我们就需要把整体
的内容往中间移动
那接下来
我就要把那个position调成absolute
然后把top
调去50%
然后left
也把它调去50%
保存
然后看看效果
虽然整体内容是被移动过
但是他不是处于网页的正中间
只有这个左上角是
在网页的正中间
现在我们还要做一个微调整
把它稍微往左和往上挪一下下
那样的话
我们就需要调一下这个transform
往左移50%
然后往上移50%
保存
刷新
终于移到网页的正中间了
接下来我们需要调整字体的颜色
不然的话
这个黑色和灰色 颜色实在是太接近了
我们直接把它调成白色吧
color
white
保存
然后刷新
现在比之前好多了
一目了然
接下来我们需要把这个welcome
换成大写
有两种办法可以把它变成大写
第一种就是直接在这边修改
把welcome变成大写
第二种办法就是在css里透过text transform
去做一个调整
我给你演示一下
透过css的办法
因为我们是针对content class里的h1
所以在这边
我们需要输入的.content
h1
我针对它的text-transform
做一个设置
把它调成uppercase
保存
然后刷新
现在这个welcome从
小写变成了大写
所有的主题内容都成功显示在浏览器里了
而且也被css没花过
同学们人生第一个网页终于完成了
有没有感觉到一丝丝的成就感呢
如果同学们想下载或者复习这些源代码
可以去到我的github
我已经把github的连接放在描述栏里了
今天的教程就到这里
有什么疑问
可以在留言区里发问
我会逐一给你们回复
喜欢这个教程的同学可以点赞分享
我们下期见
拜拜

🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 服务器托管 Server Hosting/SSL/TLS cert : https://bit.ly/2zfucTc (只需每月RM16起，就能拥有属于自己的网站)