00:01
大家好,我是于皮,今天来教大家如何做一个表白网站,并且把它发布到网上,让所有人都可以输入网址来访问。那么首先我们先看一下做出来的成品的效果。这就是我们的主页,那你可以让你的表白的对象在你的这个网站输入自己的名字,比如说我就输入小名吧。然后让他去点百度一下进行搜索,那如果他不点这个百度一下,而是点别的链接的话,会弹出来一个让他乖乖搜索的提示。好,点击。点进来之后,进到我们的表白界面。然后这里其实是走一个过场。页面里的内容可以自己修改。
01:05
最后呢,就会跳转到搜索的结果页。你可以在这里面把姓名替换成你心爱的人的姓名。然后可以在每个位置写下你们的故事。当你点击页面上的任何一个链接,然后都会随机弹出来一句情话,而且点之后发一个背景,看这个页面里的内容。下面教大家一。那首先第一步就是下载我的源代码,代码我已经发布到github上。
02:01
在我的data中找到interesting code,这里包含了我写的一些有意思的小代码。然后在这个页面可以去下载我们整个项目。如果我们安装了date的话,可以用date克隆命令去下载。否则的话,我们需要下载压缩包,点击download zip。开始下载。下载就可以了,下载之后解压会得到一个目录。然后呢,第二步我们就是对已经下载好的代码进行个人定制化的修改。呃,这里首先推荐大家去下载一些编辑器,如果说你直接用电脑自带的记事本去编辑我的代码的话,会非常的麻烦,因为代码量非常大,那这里其实推荐大家去用subla text这样一个编辑器,可以直接下载中文的版本。
03:04
下载就可以了,这是一个免费的编辑器。然后非常的清亮,就打开文件啊什么的,速度都很快。它可以编辑各种类型的文本,不止我们的网站文件。好,下面我就打开了这个sublime text。然后我们打开一个文件目录。这里interesting code就是我刚刚下载下来解压出来的源代码。这顶interesting to就是我刚下载解压下来的源代码。然后我们打开这个买520目录,所有可以修改的代码全在这里面。那首先我们的代码文件包含三部分,像刚刚看到的,首先是这样一个防百度的主页。然后打开之后。第一个页面我们是无需做任何替换的,那我们直接看第二个页面,就是点击百度一下之后进入到的love界面,这里面有一些可以定制的内容,那我们点到这个售点HTML,然后大家看这个文件的行数非常多啊,我们直接搜索。
04:17
搜索按CTRLF搜索。表白,然后就定位到了这一行,我们把这个被表白人和表白者可以改成需要的姓名。然后呢,我们注意到这个页面,它其实底下还是有时间的。还有一个文案,这个也是我们可以自己修改的,那怎么去改呢?直接搜,我们直接继续CTRLF搜一下,然后就定位到了文案这一行,可以去对它进行修改,时间的话就在下面。我们可以直接CTRLF搜索日期,就定位到了这一行,可以把这里的日期按照格式去修改成你想要的日期。
05:02
那最后呢,我们在这个搜索结果页可以定制的内容是比较多的。然后,但是呢,为了方便大家替换去进行搜索,我把所有可定制的内容都用这个替换两个字来代替。那我们先进到第三个页面,点HTML,然后大家别忘了改这里的标题啊,对,这个标题也可以自己改。然后我们按CTRLF搜索两个监控号,再加替换。然后搜索到所有内容都可以改成自己需要的内容,大家可以依次修改,然后再刷新这个页面,就可以本地打开这个页面去查看效果。那这一部分讲的是文字的替换,那如果说我们想替换这些图片,怎么换呢?要教大阿姨的方法,首先你按F12。
06:00
按这个小鼠标。点到它这里可以看到这个图片的名字是picture 1.jpg,那你如果说想要替换这一块的图片。就可以把我们一张新的图片。替换这个images下的对应的名称的文件,比如把这个PR1.jpg给他替换了,这样就可以成功的覆盖。然后包括这个lover.jpg,还有这个。背景音乐。包括这个lover.jpg,它其实对应的是我们上一个页面里。这个被表白人的头像。它其实对应上一个页面里指着被表白人的头像,替换它即可。那这里还有一个b g music,它是用于替换最后结果页的背景音乐,这里大家直接拿同名的文件去替换即可。那如果说呃,你有一个其他格式的音频或者图像,那怎么改呢?这个一样很简单,比如说我要把这个picture four.jpg改成picture four.pg格式的,那也直接按CTRLF,在对应的页面里面搜PR4.jpg,把这里的JPG改成PNG即可。
07:22
那如果大家学过一段时间的网站开发的话,所有的页面你都可以自己去给它添加效果,然后进行二次开发和定制。那到目前为止,修改这部分我们也讲完了,最关键的一步就是我们如何把这个网站发布到网上,像我一样得到这样一个网址,让其他人可以访问呢?那其实这里有很多种方法,最麻烦的一种就是你有一个自己的服务器,你可以把网站上传到你自己的服务器上去。然后同时你也需要有自己的域名,然后在你的云厂商。
08:02
的官网上。在他的后台中。去用域名绑定你的服务器,这样才能让其他人访问到。那如果我们既没有服务器又没有域名怎么办呢?其实我们可以使用一些免费的静态网站托管的服务。就是人家给你买好了服务器,人家有域名,你可以用别人的域名和服务器来发布你的网站,那这里推荐给大家的一个神器就是wars。他的网址就是versel.com。那首先我们进到网址之后,它会让我们去登录,大家直接去用get topb进行登录来演示一下。然后这里如果大家没有账号的话,需要先注册一下,也是用github注册会比较方便,那我们这里直接用github登录。登录进来就可以看到你自己已发布的网站,可以在这里对它进行管理。
09:01
Sel呢,它给我们提供了一个命令行工具,可以让我们输入一行命令,就能把我们本地的网站发布到服务器上,并得到一个可访问的域名,非常的方便。对,然后我们进到这个whatel download这样一个下载官网,可以查看到这个命令,那用起来非常简单。首先我们需要安装NPMNPM是node JS的一个软件包管理器,可以用它来帮我们快速的安装一些工具。然后,首先我们要检验一下自己有没有安装NPM,输入NPM-V就是version,查看到版本号,表示你的NPM就安装成功了。就表示你的NPM是已经安装了的。那如果大家。没有成功返回这个版本号的话,我们需要先下载nod JS。进入node JS官网,直接点击下载。选择对应的操作系统进行下载即可,下载安装note JS之后NPM命令也会帮我们自动安装,这个时候我们再去输入NPM-V,可以查看是否有返回值,如果没有的话,请尝试其他方式安装NPM。
10:16
一般都会成功的。好,然后我们把这样命令进行复制UNPM来安装我们的ver。好,我这里已经安装成功了,非常的快,下一步呢,就是把我们本地已经修改好的网站给它进行发布。那首先要进到我们的这个项目目录里。首先我们进到买520目录里。这个warce它发布网站的时候会给你生成一个网址,那这个网址用户访问时默认访问的是你项目中的indexps.HTML,就是我们主页的意思,所以说你要发布的网站目录中必须要包含这个文件。
11:01
好,那我们下面进入这个目录。大家可以直接复制这个代码目录所在的路径,然后通过CD的方式进入它。CD就是change director就切换目录的意思进到这里来,下面我们使用verel命令直接输入verl。然后两个短横prod是production生产环境,就是正式发布的意思。好,那下面我们来敲这行命令。等待片刻。他现在就在帮我们发布网站。第一次发布时可能会要求我们验证邮箱,大家直接输入自己的邮箱进行验证就好了,如果网络不好的话,可以换一下4G,这个是不需要翻墙的。好,现在已经成功的发布了我们的网站,并且给我们生成了一个很精简的网址。
12:06
然后我们可以,然后我们就可以利用这个网址进行我们的网站访问了。那最后呢?最后呢,会教大家如何自己开发一个这样的网站,那首先我们就要利用好现有的资源,比如说我的第一个页面,它是仿百度的,对吧,所有的样式都和百度一样,那我们完全没必要自己去从零开始写,就照猫画虎的写,我们可以直接用百度的代码,那怎么用呢?首先我们去进入到百度。然后我们可以按F12。在这里,其实我们已经可以看到百度搜索的源代码了,可以按ctrl u或者按右键点击查看网页源代码。在这里我们直接把所有的代码进行复制粘贴即可,Ctrl a ctrl c,然后粘贴到我们的一个新的文件中,下面的话,其实我需要对这些代码进行一些删减。
13:11
其实它是有非常多的代码的,我们在删减时主要删减哪些东西呢?首先要删减页面中没必要的内容,怎么删呢?比如说这个抗击肺炎这几个字,我并不想要它,就点击这里,然后把对应的元素块进行删除。当你鼠标点击时,它会自动定位到那块代码,然后直接在右边删除就好了。删除之后我们别忘了进行保存。首先定位到这个HTML真元素,右键点击编辑HTML,把所有的代码CTRLCTRLC,然后再粘贴到你的网页文件中即可。那第二部分呢,就是我们要删除一些额外的脚本,比如说百度会默认为我们输出一些什么,你在电脑前看这段文字,期待你脚踏祥云,与百度一起改变世界,简历提交这些都是没用的,都是会浪费我们的这个。
14:06
网站的资源就是会导致它加载的会变慢一些,这些都没必要,所以我们怎么办呢?我们可以在源代码中按CTRLF搜索。当然,这一步其实是你要在自己的编辑器中去做的,对,我们就搜索script的标签。Script是脚本的意思,然后我们就搜script标签。然后我们把每个script标签都给它尝试删掉,然后再刷新看一下页面的效果,如果说不影响页面的内容还有样式的话,这些这个script就是可以删掉的,OK,就这样,那我们的第二个页面就这样一个展示也是怎么做的呢?其实也是用了一些别人开源的项目,像这里只是给我们的网站增加一些效果,大家可以直接上data top去搜搜表白,或者搜love solo之类的,大家会搜到很多的项目。
15:07
然后我们可以直接找到心仪的表白特效或者网站,把它粘到我们的网站代码中就可以了。那第三个页面也是同理,直接按F12整体复制,或者按ctrl u查看网页的源代码,复制之后进行修改,然后把内容进行替换即可。你学会了吗?
我来说两句