8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png
小白搭建个人网站 图章 图章
aiyun 2020-4-6

自我接触网络时就有过想法做一个自己的网站,但那会什么都不懂,就连服务器是什么都不知道。全靠百度搜索,翻过各种误导信息广告信息,总算是得到了一些了解,但最终还是因为技术层面了解得太少,兴趣被耗空了,最终放弃了最初的那种热情。 

最初的想法已经过去好多年了。

但就在几个月前,忽然又萌生回了这个想法,做个自己的个人主页吧,放一些个人作品什么的。但是我还是不会html,虽然学习html并不难,但问题是,html对于我或者在看本文的很多人来说,平时可能几乎都用不上,一个不常用的技能却要花比较多的时间和精力去学习,而且还建立在毫无兴趣的基础上,这可能会很难,因此这个想法搁置了半年了也一直没有动静。 

不过近期闲着也是闲着,要不就就试试找找看吧,在这个年代,专业工作软件越来越往简易化智能化的方向发展,说不定还会有更加简单,更低成本的网站建立办法呢。 

于是,现在我算是找到了(一个可能比较可行的办法)。 

不需要写代码,即可制作网页(静态页面),发布到互联网。非常合适小白入手。 

平台和工具:阿里云OSS ,WYSIWYG Web

Builder(网页生成工具) 

前排提示:本图文教程面向新手小白,手把手式指点教程,因此节奏比较慢。 

教程内容分为两部分,制作网页和发布网站。图文为了让小白稍微理解一下网站知识,所以这里先说阿里云OSS如何发布网页,再说如何制作网页,不用担心,内容都很简单。 

--------------------------------------------- 

阿里云是国内知名的云计算平台,如果小白没有听说过这名字,那你总听说过和它同一家的阿里巴巴和淘宝吧。 

而OSS是什么呢?它是对象存储,更加直白一点说就是个云盘,但实际用途并不只是云盘。

对象存储主要用于服务器的数据文件存放,比如你使用某app时注册了账号,上传了一张头像,那这个文件就会被app服务器存放到对象存储里。

OSS只是阿里云对象存储的名称,其他云计算平台的有所不同,比如腾讯云的对象存储叫COS等,名字略有不同但使用大概都差不多。 

开始工作,首先得注册阿里云,百度搜索进入阿里云官网,在阿里云网页右上角点击免费注册,注册很简单使用支付宝直接登录即可。 

(也好像不用注册,直接登录支付宝账号就行了,毕竟是一家的) 

563fe7468d20f4fbc483957561dcdbd1.jpg

现在我们需要配置好OSS这个东西,再进行网页制作。 

注册/登录完成后,在阿里云首页左侧栏就能找到【对象存储OSS】,(上图里也能看到),点进去,就能看到OSS的产品介绍和购买按钮,这里不需要进入购买,直接选择【管理控制台】 

f79342e1a2bfec78240c14e543ab79a6.jpg

接下来即对象存储OSS的控制台界面,在左侧栏选择【Bucket 列表】,Bucket即一个对象存储容器,再说直白点就是一个储存空间,你一个账户可以创建很多个不同的OSS。

2491952f8a9b7385cccd6b4c10988e94.jpg

因为还没有使用Bucket,所以列表肯定是空的,因此下一步点击蓝色按钮【创建Bucket】 

将会弹出一个窗口,主要设置Bucket的名称,地域,读写权限等。

3aa7124a0a157f8509d51d96091ced4a.jpg

Bucket名称随意;

地域建议选择上海;

读写权限得改为公共读,这样你的网站才能被别人访问。 

上图中,Endpoint即你的OSS访问网址,创建好OSS后,通过这个链接就能访问你这里存放的文件。 

信息都填好后,点确定即可创建。 

创建完成再回到Bucket列表就能看到它了。

4548a5f1ab3e9b845a63cb5cacd93235.jpg

接下里, 

点击刚刚新建的Bucket名称,即进入配置页面,如下

430863946717e00fa8918139d3c8fced.jpg

这是我现在在用的Bucket,因此右侧存放了一些文件。到这里关于Bucket的配置就好了。 

那么小白看到这里可能心里还有点不太明白,到目前为止,教程所做的东西干什么。 

这里说一下对象存储的一些基础小知识吧 

开头说了,对象存储就像是一个云盘,但不同的是它存放的文件,默认都具备一个绝对路径链接,也叫直链(即直通文件的链接)。通过这个绝对路径,其他人就可以直接在线访问/下载这个文件。网页文件即html格式,那么把它存放在这里面,通过浏览器打开时,浏览器就能识别这个网页并将它呈现在屏幕上,就是这么简单就实现了网站的基础,接下来只需要制作好网页再上传到这里,网站就完成了。 

值得一提的是,我们所访问的网站如百度首页,www。 Baidu。com,它的后缀并没有.html的文件名,那么为什么浏览器访问它也能打开网页呢?那是因为,当浏览器访问这个地址时,如果链接里后缀没有文件名,那么浏览器会默认补上”index.html“,百度首页的页面其实是www。 Baidu。com/ index.html(14。215。177。39 /index. html)。 同样的这个规则也存在于阿里云OSS里,阿里云Bucket的默认首页也是你的OSS链接/index. Html。不止是index,还有404页面也是如此(OSS链接/404. html)。只要把做好的网页文件,命名为index.html,上传到OSS里,就可以直接访问首页了。 

------------------------------------------ 

那么接下来制作网页,你只需要把首页的页面后缀名改成index.html,再上传到OSS根目录中,那通过OSS的网址直接访问就能进入你的网站了。  ------------------------------------------ 

小知识到此完毕,那么接下来来说说如何制作网页吧。 

首先不得不提一下很废话东西,网页本质是什么。  如果在电脑上新建一个记事本的文本文档,如1.txt,

如下图 

dfc3f97915b9d7f26175e46f32bfd680.jpg

写完后记得保存,然后右键点击这个文件,选择浏览器程序打开,或者把这个文件拖到你电脑的任何一个浏览器上。 

通过浏览器打开文档后,我们能看到刚刚所编辑的文字显示到了浏览器上。 

b584e41f8c7ac7e7a48d472d23ea9831.jpg

做这个演示的目的就是告诉你,网页实际上就是一个文本文档,本身就不需要代码即可呈现。 

但TXT纯文本文档是不具备任何格式的,甚至连字体大小颜色都没有,这样所制作的网页会非常空乏,完全不能满足于普通使用,因此就有了html代码。  Html代码的本质是一种标记语言,并不属于编程代码。它的作用是把内容文本进行标记,如标记这个文本是标题,字号是多少,颜色是什么;或者标记了这个元素属性是按钮,而不是图形;那个是带链接的文字而不是普通文本。Html代码的写法几乎就是背单词,没有任何逻辑运算,学习起来其实也很简单。 

但即便如此,对于刚入手的人来说,或者对于代码不感兴趣的人来说,编写html仍然是一个难题。我的确想要一个网站,但我并不想花时间精力去学习对自己完全不必要的html技能。 

我所使用过的方法有以下: 

Adobe XD + html导出插件; 

Office Powerpoint 2007(可另存为html); 

使用建站平台(建站之星,凡科,等)做好网页后,使用浏览器另存为页面; 

下载网页模板(但还是要改代码内容)  Mockplus(可以导出html,软件主要用途类似XD) 

Adobe Muse 

WebPageMaker(功能有点缺乏)) 

但上述办法实际上都存在各自的缺陷 

以及接下来要讲的主角: 

WYSIWYG Web Builder  (末尾提供下载) 

打开软件主界面,能看到这玩意界面就像是office和VS的结合体。

63a8631c58bfb58d4e62a534a6910c19.jpg

其实这软件使用起来还真是挺简单的,就像画图一样,左侧栏工具箱里把你想要的部件拖上去,拉个大小,就好了。这个软件使得网页设计轻松了很多,但有一点不得不提的是,这软件,bug特别多,但又真找不到能替代它的软件了,不得已这里还是用它来说吧。 

下面来举个栗子,我随便用它做了一个网页,最终成品效果: http://sepilly.oss-cn-shenzhen.aliyuncs.com/ 

美观程度也就一般,因为我没有具体设计,只是为了接下来的教程演示而随便做的一个。以及这个网页没有适配手机版页面,动画元素都是配合电脑宽屏浏览器的。 

当然如果你有网页设计更具体想法的话,可以尝试做的更好一些,这个软件也可以把网页做的很好看。  (注:网站背景图是5K分辨率的) 

那么下面开始吧,接下来的教程,我就以上面发的网站最终效果图为案例进行制作。 

首先,新建一个文件,在顶部菜单栏选择首页→属性。 

aec4c195dfff00cc7520511a74ad31ce.jpg

在弹出的窗口中设置页面大小为1000*2000(主要设置宽度,高度会跟随内容自动增加。建议最低1000或1200,不要超过1400为好) 

因为我现在的电脑屏幕比较小,所以选择了1000的宽度。 

475d22991fcc4397f123092f06ff1246.jpg

其他的参数可以不用改,设置好后点击确定。 

然后在左侧工具栏,里找到【图像】,拖动到页面上。作为个人网站的背景图。 

选择好你想要的图片,这样图片就加入好了。 

536ddc511c63790e0660af0f0d2ac909.jpg

现在图片是加入了,但排版还不正确。在界面右下角即属性面板,即可设置这张图片的属性信息,修正它的排版问题。 找到【位置】和【大小】,位置即图片左上角的坐标,设置0,0即可;大小只需要把宽度改成上一步设置的网页宽度即可,我设置的是1000。设置好宽度后,高度默认也会自动按比例缩放,现在这张图片的排版就已经正确了。  (PS:如果你的电脑屏幕跟我一样也比较小,记得主界面右下角可以缩放大小) 

接下来,添加一个居中的头像。作为个人网站,直接放自己的照片也行,但如果你不想放照片,放一个自己的虚拟头像也是很合适的。 

在顶部菜单栏,选择【插入】页面,找到图形这个图标,展开下拉找到圆形。 

7c426fe29a712eaff0d2ca8e96cba789.jpg

然后在工作区域把这个圆形画出来,画好后在右下角属性面板,把大小修改为200,*200,这个大小在电脑上浏览是一个比较合适的大小,当然你可以设置为其他值,这没限制。 

设置好后 ,拖动圆形到图片中心,不用担心居中问题,软件自带对齐线辅助,只要拖动要差不多中间位置就会出现对齐线。

上面的步骤就做好后,就是这样子了。 

ed5b46d9a82d16c0e494c11ed1c115e6.jpg

然后是设置头像了,双击这个圆形,将会弹出具体设置。 

如下图操作,记得导入头像图片前,务必把头像裁剪成正方形。 

460b8a6c10994c06110f2b43a7ef3afd.jpg

然后点击确定即可。 

基本的操作就是像上面这样,接下来稍微加快教程速度。 

添加头像标题,即你的昵称。左侧栏选择【文本】,拖放到合适位置,输入文字。  (PS不知是不是软件问题,这软件不能输入中文,但中文可以复制粘贴进去) 

文字格式的设置,可以像这样 

20ea9a0a073f2f0f55f45a0c05ab7576.jpg

Arial字体是网页通用字体,要记得网页上字体不能随便设置,别人客户端浏览器上不一定能显示出来,除非把字体集成到网站上。但使用Web标准字体都行,就比如默认的Arial就可以了。

其他的,选择居中,字号差不多就行,可以加粗。 完成后再稍微拖动要居中位置即可。 

文字颜色按实际情况设置,一般白色比较通用,但使用白色也存在一个很明显的问题,看不清。因为我这张图背景是偏亮的,用白色文字的确会产生视觉干扰。如何解决这个问题呢?比如可以把背景图压暗一些,在这里可以加入一个半透明黑色的遮罩层,降低背景图的亮度。 

同样的,在顶部菜单选择插入,图形,绘制一个矩形。 

cf6126d09f44b4a88dd8cdcd2b15e425.jpg

属性,将矩形的位置设置为0,0,大小设置和背景图一样,使得矩形可以刚好重叠背景图即可。然后右键单击矩形,移动到最底层。 

dc742614d854f73511610845648873a1.jpg

368680d3c3f4d3e95751bc41a0a8ff41.jpg

再右键点击背景图,同样点移动到最底层。这样这个遮罩层的位置就在背景图上面,在其他元素下面了。 

双击矩形,在弹出来的窗口设置如下参数:

c5b5f5880df6c121b69dc344f4b597ed.jpg

再点击确定,这样遮罩层就加入好了。白色的文字也就更加清晰了。 

到这里,WYSIWYG Web Builder的基本使用方法也就这样了。 

通过更加细致的修改,你可以加入更多文本或其他元素。

ed5b46d9a82d16c0e494c11ed1c115e6.jpg

还有一点,如何制作网页动画?这个软件还有一个强项优势,就是可以很快速的制作出各种不错的动画。比如我上面的例案,刚开始就是一个背景图模糊渐入的动画。使用WYSIWYG Web Builder制作动画也很简单,如下: 

首先,给背景图也做个模糊到清晰的动画。 

双击背景图(记得先移开遮罩层),在弹出的窗口里点击CSS3动画页面。 

8f2ca88809baaf35858b5e1c4af04abc.jpg

在这里,上面部分是改元素自身的动画,下面部分是交互产生的动画,如鼠标到它上面等。 

点击右上角的添加,参数如下图。 

c6f81b33368ffae96788ac49b5170fff.jpg

动画选择【filiter-blur-in】,持续时间自定,时间单位是毫秒(ms),1秒=1000ms,所以我这输入的5000也就是5秒。 

循环计次默认是-1,也就是无限循环,但我们这里动画只需要播放一次即可,所以改为1。 

参数修改好后点击确定即可。 

忘记说了,在WYSIWYG Web Builder里,按F5即可转跳浏览器查看网页效果,现在可以试试,按F5,看看刚才设置的动画效果如何。 

软件里还有很多预设动画都可以试试,如果这些动画都不能 满足你,还可以试试自制动画,操作起来也不难,有兴趣可以自己试试。 

759f9baf2b68fe0f156704066e1ea8e2.jpg

软件的基本使用到这里就差不多了,稍微花点时间就能轻松把自己的主页做好了。 

个人网站其实并不需要很多内容,也并一不一定要做的很正式。希望能在评论区看到各位的个人网站成品模样。 

当你的网页最终成品做好后,即要导出html文件了。点击左上角文件→发布,在弹出的窗口里,发布地址即文件保存的位置。其他设置默认即可,点击确定就好了。

1870732283c8ddea7338a52ac755cbf7.jpg

910b2c76c129ee60f90372f50f9681e5.jpg

这样网页的制作就完成了,那么就到了最后一步,发布网页。 

回到最开始搞的阿里云OSS,进入Bucket,点击上传文件,可以直接把上图导出的这些文件拖动到上传文件的区域内。

不过要注意,images文件夹不能直接拖入,先上传零散文件。然后在OSS里新建名为images的文件夹,再把里面的文件进行上传。

f7b8793edf19cb1ea8e28be9a2a315e2.jpg

然后OSS里新建文件夹

名字即刚刚网页导出目录的文件夹名字,images。

d947ce2986781a480bd36a082c6b25a9.jpg

然后再上传文件夹里的文件,到这里。 

文件上传完毕后,再试试打开你的OSS链接看看主页如何,什么,你不知道你的OSS地址是什么?  在界面左侧栏,点击概览,右边就能找到链接地址。

59b7b0652201a18988c1fe24fcfc7e40.jpg

这里就可以看到你的OSS地址(网站地址)了。通过这个地址访问就能看到刚刚的网页效果了。 

到这里差不多就结束教程了 

这种网站叫静态网页,制作简单成本低廉,适合非计算机行业的业外人士使用。 

可能会有“大佬”觉得这种不写代码的办法太“笨拙”了,但这也不应该这么想,并不是每一个人都需要学会代码,或者反过来说术业有专攻。

3f7a70293e261c41d2708da148e46e44.jpg

教程到这里就结束了,现在写完回头看感觉好像还是有点不够细致,不知道小白能不能看懂。------------------------------------------------------  ------------------------------------------------------ 

补充一些题外内容。 

可能你会觉得,这个OSS网址是不是太长了,作为网站地址来说,来说会不会过于牵强(记都记不住)?  没错是这样的,太长了,不过这个问题可以解决,但可能就要花钱了,那就是买域名。 

阿里云提供的OSS链接只是给你个能用的链接,如果你想要更加简单短小的一级域名网址,那就得去买域名。关于免费域名这些我不太了解,即便是有好像也是很偏僻的(我见过的免费域名大多是全数字的那种,那有什么网站的域名是全数字的呢?当然xx美铝澳门真人……那种网站就是) 

买域名的话,com域名就不要想了,这个价格不合适个人网站,几百上千一年,以及比较火的cn,net这些常用域名都比较贵。 

个人网址其实有没有域名都没啥问题,大不了把OSS链接做成二维码,或者网络生成短链接,也可以正常使用。 

但如果真的需要域名,可以去看看xyz域名,腾讯云里xyz域名首年8元,或者也可以去阿里云域名拍卖页面里买一个。  (前者全新的域名是可以自定义的,后者拍卖的域名是已经固定的) 

3686c1d99277c9b4399bb8ed627b3f72.jpg

在阿里云域名交易处,你甚至可以花10块钱捡漏买一个10年有效期的域名

购买域名后,到阿里云OSS里绑定即可使用。具体使用方式可以在阿里云帮助中心搜索“域名绑定”即可。 

还有一个挺有意思的信息,OSS访问热点信息,在这里你可以看到访问最多次数的文件,以及访问地区信息,网络运营商比例,IP访问次数排行等。 

8b20f8fe4183a8c4004c6f51aed008ff.jpg

------------------ 

关于WYSIWYG Web Builder

下载地址:

备用地址:

这个软件bug很多的,那具体有多少呢?我随便用了半个小时,遇到的bug数量已经数不清了,在我看来,这软件开发的时候,大概是全公司就上下没有一个人Debug运行过,稍微点用一分钟体验一下,也能发现软件哪都是bug……

但在这个领域我的确没有找到替代品,可能真就只有这玩意稍微合适一些了。这软件也有个很不错的地方,就是动画制作很方便,效果都不错,甚至还能制作关键帧动画和缓入缓出等非线性动画,整体来说,也不是不能用。 

腾讯云COS和阿里云OSS的资费区别,腾讯云COS可能会更低一些,本图文方案可能更合适用腾讯云。据网友帖子了解,COS的收费规则是空间存储和上下载流量>50G/月时是完全免费的,而阿里云OSS并不是,只要有存量就算计费,但也高不出多少资费,我自己的OSS,存量30MB不到,月流量200~600MB,这三年期间消费也不到1毛,因此用阿里云也没什么问题的。

163e7450eebc3b688957087830e4b40f.jpg

如果你觉得本帖对你有用,可以点赞或关注一下哦。最近还会有一篇关于服务器/网络/游戏的中篇图文。(两千字短篇,五千字中篇,八千字长篇)。

最后于 2020-4-6 被aiyun编辑 ,原因:
最新回复 (1)
  • qq493983811
    2020-4-15 1
    0 引用
    您好,行云博客域名已换,麻烦贵站修改:https://www.xy586.top
    • Ai云
      3
        立即登录 立即注册
返回