00:00
Hello,小伙伴们大家好,我们今天来讲一讲这个情人节这个专门弄的这个就是教大家不会写代码也如何做出一个网站,做成一个什么网站呢?情人节爱心表白什么说呢,这是。呃,我们这次讲三种方式啊,一个是那个通过模板,就是使用别人的模板,这个比较快嘛,然后一个是使用百度AI配建站,一个是循环数RPC设计一个网网站,然后把它导出啊我们。在我我们先找个找,找个素材啊,这是我在网上找的素材,大家可以在百度上直接搜索情人节。情人节网站模板可以看到有很多对吧,这都是为大家的新准备的。什么心的爱,对象的心,对吧,好多的,这都是人家喜好的,我们在这里找到一个就是比较好看的,我们先下载资源。
01:03
好下载在它下载的时候,我们看一下是什么效果哈,点查看演示。哇,很好看是吧?流动的心,从我的心里的热情流,流到你的心里。然后我们就成为了对象是吧?啊,我们这里下载好了,我们。看一下这是我们下载好的,我们看一下这个压缩包法。它里面有一个呃分文件,还有一个CS文件夹,一个CS文件夹,然后我们把它给解压缩哈,这里你们解压缩就可以了,我直接把它复制过来,复制到一复制到我这个我的推件新建文件夹。叫。七夕。然后我们。吃过来。好好那个关掉了哦,我们这样吧,给大家讲一下这个解压解解解压解压缩吧,啊,我们在这个图片里面好找到我这这个信息,我们解压缩。
02:07
加收到大钱不行加。好,可以看到已经出来了,我把它删掉。我们。下载好下载好了,但是我们要在网上访问,就得把它部署到。服务器或者其他地方对吧,我们这里这里演示的是使用腾讯云的对象存储,或者使用UI提供的那个服务空间,其实那个服务空间也是阿里云或者腾讯云提供的,我们先讲一讲腾讯云对象存储如何做我们。百度搜索腾讯云。然后点开。在这里搜索这个地方啊。对象对呀,我搜索我对象嘛,把我把把对象存进来,就对象存储嘛。刚好对吧,七夕情人节对吧,对象存储。
03:00
使用。我们已经进到这个控制台了,其实就和这个一样,把这关掉就可以了,然后创建存竹筒,既然是情人节嘛,那就love嘛,对吧,然后选择公有读私有写,这里就确定了。我们看一下我们这个。好了,你关电话。它有一个I文件,一个GS文件夹,一个CS文件夹,我们先创建两个,所以我们先创建两个文件夹,一个叫JS。有个叫CSS。我们这里上传文件。把这个。前面文件上传到根目录,就这样上传,然后进入这个GS文件夹,然后也给他上传文件,把JS里面那些JS文件。给他上传下来。然后我们再进入到这个CSS。因为CSS不是CS,然后我们再把这个。
04:01
CSS文件改上传下来。这个时候我们看可以看到文件已经上传成功了,对吧,就这就这些,我们点击这个基础配置,看这里基础配置。有个静态网站,然后我们编辑开启保存,OK,这个时候我们来访问一下,看看是什么效果,访问哦,吼成了对吧,又是一个网站对吧,那这happy什么什么什么的,就是纯节快乐嘛,我们想我们要把这个东西改成我们自己专属的,对吧,那怎么改呢?我们找到这个,呃,解压操作互加目录,这里不需要编辑器的,不需要编辑器就可以了,我们直接使用这个记事本。可以看到这里面有一句话叫。Happy什么什么day对吧,那我们把这个改成改成比如说我爱某某某这里我改成我爱我老婆好了,我们给他保存一下CTRLS,或者就是这里选择保存就可以了,或者你关闭的时候,它会提醒你这里保存完之后呢,我们找到这个对象存储。
05:10
哦,在在在这里,刚才我没关,然后找找这个文件列表,我们把这个给删掉。因为我们刚才修改修改了嘛,所以我把它删掉,再重新上传一遍我们新的。啊,这个上传成功了,我们再来访问一下这个页面哈,我们点这个基础配置这里面找到这个节点。哦,可以看到我我老婆我已已经对吧,已经成功了,所以你以后你想怎么改就怎么改,或者你再加一些其他的都可以。啊,接下来我们讲一下这个。嗯,用那个用IUI来那个部署,我们先把我先把这个对话存储这个给删掉哈,你用完之后也记得删掉它,后边用多了超额了会收费。
06:01
虽然很便宜吧,因为你如果你自己使用的话,它有很多免费额度的,然后先把文件件给删除完。摩擦,再把这个存储桶给删掉。好,这个已经上传完毕了啊,我们就不管腾讯云那个了,我找到这个,我们在在网上搜索UIAPP。这这里我是直接进官网了,我不进官网。用APP啊,这很多很多很多对吧,我们找这个英文APP官网。这个UI,然后直接进入他这个B控制台地址,当然我博客里面这个写的有啊,就这里的这个。对吧,写的也有,要不可以从从这直接进就可以了啊,我们在这里创建一个,这是我之前的,然后。你你你如果没有创建的话,先创建一个,但是需要你注册一个账号,如果你没有账号,需要你注册登录,这就你就起个love什么的,对吧,那我就不不再创建新的了,我就直接用我这个老的给大家演示一下就可以了,我们创建完之后呢,点那个服务空间就名字。
07:09
我们进来这个前端网页托管。啊,看到可以看到在这个地方,我们点击这个上传到当前目录跳转文件夹,不含根目录哈,我们就直接点这个。然后选择我们那个七夕,你看七夕七文件夹有个图片嘛,然后这不是七夕,七夕的七夕在这里对吧,我没选,就这里是七夕上传。然后上传。啊,等待他上传完毕。看已经上传了对吧,这里已经上传成功了,我们点那个参数配置在这里,这里有一个默认域名对吧,我们点一下看看哦,是不是成功了,对吧?如如果你把这个粘粘到这个手机里面,是我用一个模拟器啊,我看一下效果看就是这个样子对吧?所以手机发的时候哇,你看哇,我老公好爱我呀,或者我老婆好爱我是吧,这就这就这就成功了。
08:05
呃。这这个部署使用别人的模板部署,我们已经就是呃,讲完了用了八分钟,呃,我们继续讲这个。使用百度AI配置如何做呢?我们一样在百度上搜索,叫百度百度AI,这里有一个。智能门户AI配及网站建设,小程序开发,这个你点开。然后点那个站点控制台。哼。哎,有点感冒了,我们点了一个编辑网站。如果你想做小程序,你就编辑小程序,我们先先看编辑网站啊。呃,再确定。林小镇。嗯,这我好我好,我好像之前打开了一个不管我取消就可以了。
09:00
这是我之前做的一个,大家可以先看那个。文章就是在这里也有写。出体验,这是我弄的一个小小官小官网造着玩的,这里我新建了一个love页面,如果你没有,没有的话,如果你第一次用的话,它是没有这么多页面的,你就直接用就可以了,或者如果你有其他页面了,你就想创建一个,把它当个当页面用,你就点新建同页,然后创建空白页面,嗯,根据它创建创建个love就可以了。都选择love。还是给大家演示一下吧,呃,这里推荐普通页,点击再选择我爱。Y某某某对吧,就可以了,然后这里你写成那再提交就可以了,因为我这个是基础版的,它页面上线肯定不让我创建了,看对吧,所以我们已经创建好了一个在这里放着了。这个地方这个是我先把这个删掉。
10:02
然后大家进来就是这样的对吧。点那个添加板块,这里有一个轮播图。轮播图这里选择轮播图支持是呃,这个。这个就是这样的,它是可以轮播视频的,这个时候我们选择这个更换轮播背景。然后这个视频,如果你有你女朋友和你和你女朋友一起生活的视频什么的,你就点击上传视频,然后上传就可,上传进来就可以了,这里我就随便在网上捞一个视频。再捞一个。就就就捞就捞这个就捞他。然后我确定。然后看一下它是来回动了对吧,这个地方这个时候。这时候你看这些名字啥的,你可你可以点击这个。还是刚才那个编辑。第一页第一项就是他嘛,然后通用的板块,这是什么什么什么,这你改成。
11:00
某某某。某某某。我爱你。做紫爱的非常非常爱你,然后小背题改成情人节快乐对吧,然后然后这个给改,改成爱最好的人。给他。给他什么的,给他,给他什么时候你就要自己写了,他最喜欢什么或者什么啊,你们印象深刻啊,给他,给他我的我的爱。是吧,然后这不这就这就完了,对吧。好。这不就这样子对吧,我们再看我可以可以编辑第二项嘛,下一项你也可以再放一个,再同样同样再给他再放个视频啊,然后就是一起。你们一起交易的视频什么什么的,这个你这个同样可以也可以编辑改,比如说。
12:02
呃哦,你第一次,你第一个页面不是我爱吗?第一个页面我更爱更爱对吧?我更爱某某人对吧?我我更爱某某某某某某某某某某某某,然后还有什么写这小标题,情人节。非常快乐简介这些写成我非常喜欢某某某某,然后以至于我做梦都什么什么,对吧吧吧吧吧啦一堆好,然后。后一下。也一样,也可以互相也头像更换了,我的背景视频就是这个步骤,但是光有视频还是不够的,对吧。那你视频完事了呢,这里再插,再插下一些别别的东西,比如说还是一样点那个这里有一个板块里吧,添加板块点开它是不是有很多呀,你可以写个图文板块。
13:05
哈。200,然后你找一个那种。简约图文,然后在这放上一张你们你们你们的合照。把那个改成你们的合照。然后改成。情人节快乐,我的宝贝儿,宝贝儿,然后然后再在这里写段情话,对吧,写段情话改改成改成都说。我。我什么什么什么什么对吧,你你随便练吧,这这这这就让你自己练的,我就练不好了,然后把那照片一换,换成你们的合照。是啊。拍张你们的合照,然后上传个图片。你紧急上传图片,拍你的合照就可以了。然后这里。啊,改改改改改就可以了,然后你看他他他把主页面给占占据了,把那个龙光,但是他们可能不能放龙班图上面不好看,我点下一个这个时候。
14:10
对吧,就可以了,然后如果你还要再加的话,你可以加很多,当然如果你觉得这个不合适的话,你也一样可以改嘛,你看这里有很多很多龙魔头啊,猎头啊,你都可以自己选,根据自己的喜好,对吧。呃,我们这里假设你弄好了,弄好之后你就点那个发布发布备注,就什么发发布一下就可以了。这个。我就不我我这个我就不不点点算了,我们还是点一下吧,虽然还有我之前官网官网的东西嘛。五点发布。网站发布中,你可以点后台进入组,这后台怎么进呢?这个管管理站点。是吧?你可以看看,看到你刚才这什么什么什么什么什么什么东西,对吧,这好多东西。
15:01
这里因为我已经绑定了一个域名,如果你没绑定的话,它会提示你们绑定,你根据他它那个提醒绑定一下域名就可以了,然后你看访问访问下这个站点,这应这应该还是没有更新的。应该还是没有更新的,这是没有更新的,因为我之前做过一个啊,就这样。对吧,如果女朋友一看,哇,我男朋友好棒呀,然后他们整天这这这都多么刺激啊。啊,这个百度建站,我们这边也讲完了,我们讲下一个。下一个我还我这个博客还没写啊,我们就在在家直接演示,如果是那个。XXRP9就是大家可以可以在网上直接下载,直接搜索下载搜索RP。九或者八,我觉得RP8好使,你们就下RP8都可以了,或者如果你觉得RP8哦,那8:9厉害吗?那就下RP9吧,随便下一个就可以了。
16:01
啊,然后这是我之前做的一个啊,我可以给大家,可以给大家看一下现在现在效果啊。点那个就是发布。预览。他他就是这样子,不好看。不过这这是你自己做的嘛,你对象肯定觉得我男朋友尽心尽力的是吧?啊呃,我如何做呢?哎,这里你既然是这个样子的。新建一个,你新建一个页面对吧,建一个页面。好,我们进这个页面了。这太大了对吧,我们缩缩小一下,你可以按照CTRL滑滚轮,你一样也可以在上面选百分之多少,你也可以输入50%什么的,可以选前更小,人家更小就滑滚轴滑动嘛,滚。他迪亚一般的网页,你宽度。呃,我我的是1920乘1.80,那你就。嗯,根据你自己屏幕看大小就可以了。
17:03
我们我们我们先讲这个这个页面怎么看,刚才这页面怎么实现的啊这些东西。把这个点击实时可见性。我我接个电话啊,刚才接了个电话,我们我们继续,我们刚才我我把事儿隐藏了,这是我把我把它显示一下,看一下效果。看它是这个样子对吧,我点一下这个哦。进来了,当然这个地方也也也要给他取消掉,我们一步一步的大家做。我们在这个新页面里面,新页面里边先准备一个什么呢?准备一个这边不是有好多那个元素库嘛,你选择一个图形标记。然后你把它按shift把它扩大一下,等比扩大嘛,然后。变换图形写的形状选择,这不这不有个有心形吗?看看是心形,你点一下它,点那个样式,把它变成红色的,谁谁用蓝心对吧?当然要用红,要用红色的心对吧?红红的代表我的爱。
18:06
呃,这里我们先插入一个动态模板。这个留的我们或者做轮播图用。我们给它设设设设置成1920乘以。108年这个百分百宽度哈。把那心托进来,可以看到心有点大,对吧,那我们再把它缩小。拖动干。这也是在镇中心了。中心我们按住CTRL,再脱离出来一个,再复制出来一个,把它再缩小一点。啊,变成白色。白色。然后一脚投进来。再复制出来一个。再变成红色,再缩小一点儿。哎,套娃套娃心,你该可以再再继续再继续给它变成白色。
19:02
然后再缩小。然后再拖来一个,再变成再再再缩小。变成红色,最后一个是红色好看吧,我觉得最后一个是红色好看,反正看自己的喜好了,然后从现在这一个重叠式的心就做好了,看是吧,非常快,呃,如果你只想只想要这个信息,那你就复制把它截个图,把它截图,把它截走就就可以了,颜色什么东西,然后。我们俩像是交互啊。我们点这个大纲,看那一块有心型,有好几个心型对吧,我们把这个几个几个新型的选中,然后把它组合一下,这是底下还有心型,来把它组合一下,右键组合,那它就说整体了,我们可以整体移动了,对吧。整体移动,我们点那个交互。点那个新建交互。鼠标或者手指单击时。让单据时让它什么呢?让它隐藏,让它隐藏之后显示后面的页面对吧,然后我们就在这里点那个组合。
20:05
给加个动画,比如淡书,战书。给选个1000秒,1000毫秒。素养嘛,然后我们点。发预览看一下效果。点一下。得。我看我看下啊,刚才那是假的。我是给他整体加的吗?是给这个整体加的显示组合弹弹出哦,是显示,要不在这里改成隐藏这里完成好刷新进行页面。等一下,怕警察了。嗯,只有它肯定是不行的嘛,那你要加什么呢?比如说在这边加个柱子。加个柱子。它其实是一个方框嘛,上来把这方框变小一点,变小一点好看吗?然后给它方框改成一边黑一边红。里边黑,然后按住CTRL,按住CTRL点这个点这个东西,按住CTRL再突出来一个。
21:07
然后把它改成红色。对吧,你可以看到这两个矩形条在这边也都有,你点一下这个是左边的,你给它改点,再点一下这个地方改成左边。改成左。这个。有。这个时候就已经布置好这个东西了,对吧,那你。还是继续看它,他不是他点击这个新的时候,它会隐藏这个东西,对吧,那我们再可以还可以再继续添加目标。点目标添加左锁的也压隐藏,让它就向左滑动。对吧,那我们的天杆目标右让它向右滑动。然后1000秒隐藏,这个时候再看一下效果,刷新一下。等一下。看。这个时候你可以就可以不用考虑它了,这一块你可以先给他这不组合,这是新型组合,你这命名为新。
22:06
然后这三个东西是需要一起隐藏对吧,你给它可以给它再组合一下变成。显示首次。显示好就不管它了,把它设置一藏,可以把它推一边。点那个点点那个推一边也可以啊,都可以反正。推边。我们来看那个动态面板,动态面板是可以做轮播图的,我双击可以进动态面板,就状态一啊,我新增一个状态状态。状态已改成。就改成你,那他就改成算了,我们不改名字了,管他呢。可以看到我们在这个动态面膜里边,它是这一块。呃,我们可以插个图片啊。或者查别的东西都可以。比如说你这里插的图片。放大放的很大很大很大很大,这是个图片。
23:01
状态一,然你选状态二,你再插一个别的,然后插一个大圆环。大圆环,或者你给它选择形状,因为心形。然后给它填充一下,变成红色。给它扩大。好状态二状态三,我只举例子啊,当然你可以在这里放图片,放图片的话怎么弄呢?放图片你就直接找一个图片,比如说我们。把这个图片拖进来就可以了啊是吧。放假之后。哦,好,停停停,在这里放一个就可以了,不管他删掉不好,看他们状态三再放。再再再放一个。那转三放看吧,是在这边好照片了。发大。然然后你按住CTRL,可以旋转的CTRL,你看,嗯嗯,斜着斜着看你。就学着开。
24:01
我想一下放在这里好,就不管它正31233已经完成了,对吧。这个时候呢,我们关闭,我们点那个选中这个动态面板,这里有交互,你下交互看有好多,你可以点那个加载时嘛,或者状态改变时,你加载时,然后这里有设置密码状态。就是动态面板,然后状态一状态状态三各个选项里边啊,小示表什么什么的,你都可以自己选择。状态音,然后你可以改成呃,改成那个下一个下一个,然后点这个从最后一个到第一个自动循环,它就会一直循环,变成一个循环到轮播图进入时的话,你也可以改成向左滑动。退出时啊,都向左滑动,然后你改成500秒就可以了,循环时间间隔1000秒。首次按1000元,这这都可以了,然后我们点一下确定。等下确定。我再再次回到那个网页里面,再刷新一下,看一下。它是这个样子的,看它是自动轮播的对吧,但是时间有点快,时间快的话,你就根据这个呃。
25:07
把它关掉,烦人。就根据这个时间,你自己调吧,调成1000。对吧,然后各个选项给他选项间隔,你也改成2000。这个这个是循环价格是每次循环完你改成1000就可以了,好,我们就。我们这个轮播图这样做就完完成了,你改成你女朋友的视频和女朋友照片放下就可以了,我们这我们这里讲一个那个图片墙怎么做,做一个非常好看的图片墙,我们这这这是这个东西保留,这个东西删掉。我们把台面板直接删掉,删掉之后呢,同样再再加一个同面板。这里你这里可以不用太大,你根据自己的需求调整大小就可以了。不要那么大。然后你加一个心形,把这个椭圆一样使用椭圆。给它变换的形状。
26:00
谁变成心形?变成心心在这里对吧。放大,把页面放大一下,稍微。心情有点小,占比就稍微大一点儿好看。太大阳光饭,那就这样。好,就就把它放在这里。样式呢,给它的边框厚度变成三嘛。颜色。就变成红色吧,还是红色好看,这个时候呢?这个习总出来了,我们把它一直放大,放大放大很大对吧。我们给他加加方框。疯狂。好好。就放在这里。可以再,你也可以再小一点。就放这里好,那我们拖出来一个拖出来。选中一个一个个拖。
27:02
然后一个拖拖拖拖。因为投了很多,投投了很多,然后再自己摆,咱自己摆这个样式。孙,他你在这里摆。沈阳市。这我就随便摆摆啊,你可以根据自己需求,当然你也可以不使用这个方框,你也可以使用呃椭圆什么的。我们把它移走,呃,随便摆着就可以了,这个时候呢。哦,这时候我们需要一张照片。哦,我用那个图像模拟啊,如果你用照片的话,你就直接图像头图像就可以了,你可以把这个照片,当然你也可以不用方框,直接用照片就行了。把把它放这就可以了。这里是举个例子啊。看到这有很多句型对吧。
28:02
我们刚才讲的用句型假假张图片,我们把剧情删掉就可以了,你可以给我找个照片啊,没有照片讲不通。想找个照片儿。最后还用它吧。太大了,对吧。这些方法真是白白费了。比如说这个这个照片,我把样式也给它,也给它加上边框嘛,加上边框。啊图按一按一定的样式摆放好看。好,我们有有这图片对吧。你们点一下那个动态面板,进入动态面板里边,给它增加两个状态作为演示。关闭动态密码。先不管,先为了区别动态面板,给它加那个方框。面板一状态一啊状态一给它加一个一。
29:03
他在二。我给他加一个方框。乘二放在三加个方框。教。好。电池把上面关掉。我们点击这个头像。点击这个,我们假设它是一点交互新建测试,点击时那个设置密码状态在面板状态为一,然后你也可以给他加一个弹入弹出。1000也可以,然后这个呢,这个你给他加一个新建,然后。点击石。让他设置那个密码状态还是他状态二。改成向左滑动吧,这样就可以了,这个时候呢,我们。我们还还回这个浏览器看一下,刷新一下。看下这里应用写了对吧,我点一下。啊切换了,但是面板在脚脚底下太小了,对吧。
30:04
我也把它给缩缩缩缩缩了,然后把这面板状态。面膜面膜尺寸一样改成1920。1080。同样在这个进入面板之后,发现这个方框太小了。放到放到放到正中间,给它扩大一下。状态一,然后我们回到状态二也一样,太小了,那我们把它也放大一下。这个字体太小怎么办呢?字体太小你也可以给它放大一下,改成100 100也无所谓,对吧,反正你也不大。穿的稍微轻松一点。这个时候再看效果就会好一点。这11.2划过来了一点。弹入弹出一。至于至于它能,它能成什么效果呢?什么效果,我给大家找一下这个这个视频啊。呃,那个我找到了,给大家看一下,这是我之前去年七夕给我女朋友做的一个就是照照照片墙嘛,这边放的是我的照片,这个放的是那个他的照片,还有我们中间放的是我们一起的照片。
31:17
啊,这个这个视频我们就讲到这里啊,如果你有兴趣的话,也可以加到加入我们群里,大家一起讨论一下。
我来说两句