互联网

当前位置 /首页/游戏数码/互联网/列表

怎样从零开始做一个网页?

自己动手做一个内容丰富的网页,并把它分享给别人,这个过程很艰辛但乐趣无穷。下面的教程完全适合新手从零开始学做网页,使用的是的GitHub网站上的免费域名。

工具/材料

webstorm

操作方法

01

在GitHub仓库中默认会有两个文件,选中其中任意一个点击后面的垃圾桶符号进行删除,然后再点击界面下面的commit changes,保存到服务器

怎样从零开始做一个网页?
怎样从零开始做一个网页? 第2张
怎样从零开始做一个网页? 第3张
02

同样在把另外一个文件删除,删除之后我们的网页就会出现一个404的访问限制,是因为网站没有任何内容,所以就是这个样子。

怎样从零开始做一个网页? 第4张
怎样从零开始做一个网页? 第5张
03

在这里我们自己新建一个网页,不使用他的主题模板,之前删除的两个文件就是模板。新建一个文件,在图中红色文件夹名称处,可以自定义网页名称,每次操作都要点击底部的【commit changes】,网页内容输入的是:欢迎来到我的本站!!

怎样从零开始做一个网页? 第6张
怎样从零开始做一个网页? 第7张
怎样从零开始做一个网页? 第8张
04

怎么访问自己的网页呢?
点击选项卡中的【settings】,找到【GitHub pages】,下面的网页地址就是自己的域名,点击就可以访问,但是访问的时候,可能由于服务器缓存还没有加载过来,所以要等待一会儿才会生效。

怎样从零开始做一个网页? 第9张
怎样从零开始做一个网页? 第10张
怎样从零开始做一个网页? 第11张
05

刚才我们的网页内容是非常的简单,需要使用规范的网页设计软件,比如webstorm、dw按照网页代码的规范书写,这里使用的是前面提及的软件,可以通过搜狗搜索下载,下载下来的版本选择试用版。

怎样从零开始做一个网页? 第12张
怎样从零开始做一个网页? 第13张
怎样从零开始做一个网页? 第14张
06

软件完成安装,点击【files】---新建【HTML files】,并命名,之后就出现HTML的格式啦,在body中间输入网页文本内容即可。

怎样从零开始做一个网页? 第15张
怎样从零开始做一个网页? 第16张
怎样从零开始做一个网页? 第17张
07

我们在这里输入的是李白的静夜思为例,使用<p>..........</p>换行,输入完成可以点击右边的浏览器符号在该浏览器中预览,这就是webstorm的优势。

怎样从零开始做一个网页? 第18张
怎样从零开始做一个网页? 第19张
怎样从零开始做一个网页? 第20张
08

预览没有错误后,可以将HTML中的所有代码,Ctrl+A全选,然后粘贴到GitHub的文件中去,如图。

怎样从零开始做一个网页? 第21张
怎样从零开始做一个网页? 第22张
09

使用步骤4的方法来访问自己的域名,可以看到效果,这里是真正上传到服务器啦。

怎样从零开始做一个网页? 第23张
10

如果不想将网页的标题设为默认的title,可以直接在GitHub的编辑器中修改,因为这个修改的幅度很小很简单,可以直接在GitHub编辑器中修改,只要在<title>......</title>输入标题,这样打开的网页标题就修改了。

怎样从零开始做一个网页? 第24张
怎样从零开始做一个网页? 第25张

特别提示

这里的WS是30天试用版本。

TAG标签:从零开始 网页 #