web技术

怎么创建网站?超详细新手教程(四):上传简单网页

2023-06-17 06:49 作者:不是企鹅原创

上一节《怎么创建网站?超详细新手教程(三):解析和绑定域名》

那么接下来我来教大家如何把这个页面换成我们自己的页面。

首先我们需要下载一个FTP软件,这个软件是用来上传文件的。FTP软件有很多种,但目前全世界范围内最著名的FTP软件就是FileZilla,它是一个开源免费的软件。我们可以直接去搜索,或者在“电脑管家”的“下载工具”里面找到它。

我们先来试一下连接服务器。重新进入阿里云的主机管理控制台,这个地方我们已经来过好几次,上一次我们是复制IP地址,现在我们不只要复制IP地址,还要复制主机名。首先是复制IP地址,打开FileZilla软件,把IP地址填写到FileZilla软件顶部的“主机”文本框。

然后回到阿里云的主机管理控制台,复制主机名(见图12),例如我的主机名是wh-nxfgxf3x86w7lfabw5e,每个主机的主机名都不一样,请复制你自己的主机名。然后把主机名填写到FileZilla软件顶部的“用户名”文本框。然后输入你的FTP密码。FTP密码是在主机初始化的时候设置的。

然后点击FileZilla上面的快速链接。这时候FileZilla会弹出对话框,问你是否需要保存密码,这个无所谓,由你自己决定。然后它可能又会提示“不安全的FTP连接”,这个我们暂时不管它,点确定。

这时候我们可以看到FileZilla右侧多了一些东西。

这些是服务器上的文件。

FileZilla这个软件分成左右两边,左边是管理本地的文件,“本地”指的是你自己的电脑,右边是管理服务器上的文件。

我们现在来试一下把服务器上的文件下载到本地备份。首先我们把左边的目录定位到“桌面”,直接点目录树上的“桌面”可以快速修改定位。

然后我们在右侧找到“htdocs”文件夹,这个名字要记住,它在主机设置、服务器设置里面一般代表网站根目录。

双击进入htdocs文件夹,可以看到里面只有一个文件zhuye.html,这就是我们打开域名时看到的阿里云提供的默认页面。我们右击这个文件,在右键菜单中选择“下载”,把它下载到自己电脑桌面。

如果我们在桌面双击打开这个zhuye.html文件,会发现它和我们刚才打开域名时看到的页面是一样的。

然后我们回到FileZilla里面,在右侧右击zhuye.html,在右键菜单中选“删除”,把它删掉。没错,把它删掉。删除之后,如果再打开域名,会发现它显示一个403空白页面。

我们现在要上传一个简单的网页到服务器上,接下来我们就来做一个简单的网页。

在桌面新建一个.txt文件。

我们打开这个文件,在里面随便写入一些字符,我们举例就写入“haha 123”。你可能会问,我写中文可不可以,可以,但是,写中文的话还需要写一些辅助代码来处理,不然待会网页上显示出来的是乱码。我们第一个网站,还是简单一点,就写拼音和数字。

然后把这个文件重命名为“index.html”。

这里有个问题,有的同学看到的文件名是没有.txt和.html这样的扩展名的,文件重命名为index.html之后,它还是一个txt文件,并没有变成浏览器的图标,这是因为文件扩展名被系统隐藏了,没有修改到扩展名。显示扩展名的方法一般是在“我的电脑-查看-显示-文件扩展名”,不同版本的操作系统不一样,具体你们自己百度一下。

这里还有个问题,文件名为什么修改为“index.html”,那我修改为“123.html”行不行?其实网站默认首页文件名是有点讲究的,index是一个约定俗成的默认首页名字,当然也有其它名字可以用,这个问题不是这个教程的重点,我们以后再通过其它教程详细解答。

修改好文件名之后,我们回到FileZilla软件,在左侧右击刷新,可以看到我们刚才创建的index.html文件,双击index.html文件上传,或者点右键上传。注意上传前要确保右侧已经定位到htdocs目录,别上传错地方。

上传之后,我们再在浏览器打开域名,可以看到网站写的“haha 123”,这就是一个最简单的网页。

下一节《怎么创建网站?超详细新手教程(五):使用现成的网站源码建站》

标签: #建站教程
推荐文章
网站源码只是搭好一个框架,网站里面的内容还需要站长自己去录入、去上传。...
如果我们要做一个界面好看、功能强大、内容丰富的网站,其实是一个很庞大的...
那么现在我们有了域名和主机,理论上我们就可以做出一个简单的网站。接下来...
虚拟主机其实是一个服务器上面隔出来的很多小独立空间,专门用来存放网站程...
做网站最大的好处就是,可以获得被动的搜索流量,当你的网站做到有一定排名...
推荐专题
如何自己建网站?建网站难不难?其实建网站说难不难,说容易也并不容易,难...
本专题精心收集整理了多种HTML+CSS+JS轮播图实现方案,带详细代码和讲解,正...