自我接触网络时就有过想法做一个自己的网站,但那会什么都不懂,就连服务器是什么都不知道。全靠百度搜索,翻过各种误导信息广告信息,总算是得到了一些了解,但最终还是因为技术层面了解得太少,兴趣被耗空了,最终放弃了最初的那种热情。
最初的想法已经过去好多年了。
但就在几个月前,忽然又萌生回了这个想法,做个自己的个人主页吧,放一些个人作品什么的。但是我还是不会html,虽然学习html并不难,但问题是,html对于我或者在看本文的很多人来说,平时可能几乎都用不上,一个不常用的技能却要花比较多的时间和精力去学习,而且还建立在毫无兴趣的基础上,这可能会很难,因此这个想法搁置了半年了也一直没有动静。
不过近期闲着也是闲着,要不就就试试找找看吧,在这个年代,专业工作软件越来越往简易化智能化的方向发展,说不定还会有更加简单,更低成本的网站建立办法呢。
于是,现在我算是找到了(一个可能比较可行的办法)。
不需要写代码,即可制作网页(静态页面),发布到互联网。非常合适小白入手。
平台和工具:阿里云OSS ,WYSIWYG Web
Builder(网页生成工具)
前排提示:本图文教程面向新手小白,手把手式指点教程,因此节奏比较慢。
教程内容分为两部分,制作网页和发布网站。图文为了让小白稍微理解一下网站知识,所以这里先说阿里云OSS如何发布网页,再说如何制作网页,不用担心,内容都很简单。
---------------------------------------------
阿里云是国内知名的云计算平台,如果小白没有听说过这名字,那你总听说过和它同一家的阿里巴巴和淘宝吧。
而OSS是什么呢?它是对象存储,更加直白一点说就是个云盘,但实际用途并不只是云盘。
对象存储主要用于服务器的数据文件存放,比如你使用某app时注册了账号,上传了一张头像,那这个文件就会被app服务器存放到对象存储里。
OSS只是阿里云对象存储的名称,其他云计算平台的有所不同,比如腾讯云的对象存储叫COS等,名字略有不同但使用大概都差不多。
开始工作,首先得注册阿里云,百度搜索进入阿里云官网,在阿里云网页右上角点击免费注册,注册很简单使用支付宝直接登录即可。
(也好像不用注册,直接登录支付宝账号就行了,毕竟是一家的)
现在我们需要配置好OSS这个东西,再进行网页制作。
注册/登录完成后,在阿里云首页左侧栏就能找到【对象存储OSS】,(上图里也能看到),点进去,就能看到OSS的产品介绍和购买按钮,这里不需要进入购买,直接选择【管理控制台】
接下来即对象存储OSS的控制台界面,在左侧栏选择【Bucket 列表】,Bucket即一个对象存储容器,再说直白点就是一个储存空间,你一个账户可以创建很多个不同的OSS。
因为还没有使用Bucket,所以列表肯定是空的,因此下一步点击蓝色按钮【创建Bucket】
将会弹出一个窗口,主要设置Bucket的名称,地域,读写权限等。
Bucket名称随意;
地域建议选择上海;
读写权限得改为公共读,这样你的网站才能被别人访问。
上图中,Endpoint即你的OSS访问网址,创建好OSS后,通过这个链接就能访问你这里存放的文件。
信息都填好后,点确定即可创建。
创建完成再回到Bucket列表就能看到它了。
接下里,
点击刚刚新建的Bucket名称,即进入配置页面,如下
这是我现在在用的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,
如下图
写完后记得保存,然后右键点击这个文件,选择浏览器程序打开,或者把这个文件拖到你电脑的任何一个浏览器上。
通过浏览器打开文档后,我们能看到刚刚所编辑的文字显示到了浏览器上。
做这个演示的目的就是告诉你,网页实际上就是一个文本文档,本身就不需要代码即可呈现。
但TXT纯文本文档是不具备任何格式的,甚至连字体大小颜色都没有,这样所制作的网页会非常空乏,完全不能满足于普通使用,因此就有了html代码。 Html代码的本质是一种标记语言,并不属于编程代码。它的作用是把内容文本进行标记,如标记这个文本是标题,字号是多少,颜色是什么;或者标记了这个元素属性是按钮,而不是图形;那个是带链接的文字而不是普通文本。Html代码的写法几乎就是背单词,没有任何逻辑运算,学习起来其实也很简单。
但即便如此,对于刚入手的人来说,或者对于代码不感兴趣的人来说,编写html仍然是一个难题。我的确想要一个网站,但我并不想花时间精力去学习对自己完全不必要的html技能。
我所使用过的方法有以下:
Adobe XD + html导出插件;
Office Powerpoint 2007(可另存为html);
使用建站平台(建站之星,凡科,等)做好网页后,使用浏览器另存为页面;
下载网页模板(但还是要改代码内容) Mockplus(可以导出html,软件主要用途类似XD)
Adobe Muse
WebPageMaker(功能有点缺乏))
但上述办法实际上都存在各自的缺陷
以及接下来要讲的主角:
WYSIWYG Web Builder (末尾提供下载)
打开软件主界面,能看到这玩意界面就像是office和VS的结合体。
其实这软件使用起来还真是挺简单的,就像画图一样,左侧栏工具箱里把你想要的部件拖上去,拉个大小,就好了。这个软件使得网页设计轻松了很多,但有一点不得不提的是,这软件,bug特别多,但又真找不到能替代它的软件了,不得已这里还是用它来说吧。
下面来举个栗子,我随便用它做了一个网页,最终成品效果: http://sepilly.oss-cn-shenzhen.aliyuncs.com/
美观程度也就一般,因为我没有具体设计,只是为了接下来的教程演示而随便做的一个。以及这个网页没有适配手机版页面,动画元素都是配合电脑宽屏浏览器的。
当然如果你有网页设计更具体想法的话,可以尝试做的更好一些,这个软件也可以把网页做的很好看。 (注:网站背景图是5K分辨率的)
那么下面开始吧,接下来的教程,我就以上面发的网站最终效果图为案例进行制作。
首先,新建一个文件,在顶部菜单栏选择首页→属性。
在弹出的窗口中设置页面大小为1000*2000(主要设置宽度,高度会跟随内容自动增加。建议最低1000或1200,不要超过1400为好)
因为我现在的电脑屏幕比较小,所以选择了1000的宽度。
其他的参数可以不用改,设置好后点击确定。
然后在左侧工具栏,里找到【图像】,拖动到页面上。作为个人网站的背景图。
选择好你想要的图片,这样图片就加入好了。
现在图片是加入了,但排版还不正确。在界面右下角即属性面板,即可设置这张图片的属性信息,修正它的排版问题。 找到【位置】和【大小】,位置即图片左上角的坐标,设置0,0即可;大小只需要把宽度改成上一步设置的网页宽度即可,我设置的是1000。设置好宽度后,高度默认也会自动按比例缩放,现在这张图片的排版就已经正确了。 (PS:如果你的电脑屏幕跟我一样也比较小,记得主界面右下角可以缩放大小)
接下来,添加一个居中的头像。作为个人网站,直接放自己的照片也行,但如果你不想放照片,放一个自己的虚拟头像也是很合适的。
在顶部菜单栏,选择【插入】页面,找到图形这个图标,展开下拉找到圆形。
然后在工作区域把这个圆形画出来,画好后在右下角属性面板,把大小修改为200,*200,这个大小在电脑上浏览是一个比较合适的大小,当然你可以设置为其他值,这没限制。
设置好后 ,拖动圆形到图片中心,不用担心居中问题,软件自带对齐线辅助,只要拖动要差不多中间位置就会出现对齐线。
上面的步骤就做好后,就是这样子了。
然后是设置头像了,双击这个圆形,将会弹出具体设置。
如下图操作,记得导入头像图片前,务必把头像裁剪成正方形。
然后点击确定即可。
基本的操作就是像上面这样,接下来稍微加快教程速度。
添加头像标题,即你的昵称。左侧栏选择【文本】,拖放到合适位置,输入文字。 (PS不知是不是软件问题,这软件不能输入中文,但中文可以复制粘贴进去)
文字格式的设置,可以像这样
Arial字体是网页通用字体,要记得网页上字体不能随便设置,别人客户端浏览器上不一定能显示出来,除非把字体集成到网站上。但使用Web标准字体都行,就比如默认的Arial就可以了。
其他的,选择居中,字号差不多就行,可以加粗。 完成后再稍微拖动要居中位置即可。
文字颜色按实际情况设置,一般白色比较通用,但使用白色也存在一个很明显的问题,看不清。因为我这张图背景是偏亮的,用白色文字的确会产生视觉干扰。如何解决这个问题呢?比如可以把背景图压暗一些,在这里可以加入一个半透明黑色的遮罩层,降低背景图的亮度。
同样的,在顶部菜单选择插入,图形,绘制一个矩形。
属性,将矩形的位置设置为0,0,大小设置和背景图一样,使得矩形可以刚好重叠背景图即可。然后右键单击矩形,移动到最底层。
再右键点击背景图,同样点移动到最底层。这样这个遮罩层的位置就在背景图上面,在其他元素下面了。
双击矩形,在弹出来的窗口设置如下参数:
再点击确定,这样遮罩层就加入好了。白色的文字也就更加清晰了。
到这里,WYSIWYG Web Builder的基本使用方法也就这样了。
通过更加细致的修改,你可以加入更多文本或其他元素。
还有一点,如何制作网页动画?这个软件还有一个强项优势,就是可以很快速的制作出各种不错的动画。比如我上面的例案,刚开始就是一个背景图模糊渐入的动画。使用WYSIWYG Web Builder制作动画也很简单,如下:
首先,给背景图也做个模糊到清晰的动画。
双击背景图(记得先移开遮罩层),在弹出的窗口里点击CSS3动画页面。
在这里,上面部分是改元素自身的动画,下面部分是交互产生的动画,如鼠标到它上面等。
点击右上角的添加,参数如下图。
动画选择【filiter-blur-in】,持续时间自定,时间单位是毫秒(ms),1秒=1000ms,所以我这输入的5000也就是5秒。
循环计次默认是-1,也就是无限循环,但我们这里动画只需要播放一次即可,所以改为1。
参数修改好后点击确定即可。
忘记说了,在WYSIWYG Web Builder里,按F5即可转跳浏览器查看网页效果,现在可以试试,按F5,看看刚才设置的动画效果如何。
软件里还有很多预设动画都可以试试,如果这些动画都不能 满足你,还可以试试自制动画,操作起来也不难,有兴趣可以自己试试。
软件的基本使用到这里就差不多了,稍微花点时间就能轻松把自己的主页做好了。
个人网站其实并不需要很多内容,也并一不一定要做的很正式。希望能在评论区看到各位的个人网站成品模样。
当你的网页最终成品做好后,即要导出html文件了。点击左上角文件→发布,在弹出的窗口里,发布地址即文件保存的位置。其他设置默认即可,点击确定就好了。
这样网页的制作就完成了,那么就到了最后一步,发布网页。
回到最开始搞的阿里云OSS,进入Bucket,点击上传文件,可以直接把上图导出的这些文件拖动到上传文件的区域内。
不过要注意,images文件夹不能直接拖入,先上传零散文件。然后在OSS里新建名为images的文件夹,再把里面的文件进行上传。
然后OSS里新建文件夹
名字即刚刚网页导出目录的文件夹名字,images。
然后再上传文件夹里的文件,到这里。
文件上传完毕后,再试试打开你的OSS链接看看主页如何,什么,你不知道你的OSS地址是什么? 在界面左侧栏,点击概览,右边就能找到链接地址。
这里就可以看到你的OSS地址(网站地址)了。通过这个地址访问就能看到刚刚的网页效果了。
到这里差不多就结束教程了
这种网站叫静态网页,制作简单成本低廉,适合非计算机行业的业外人士使用。
可能会有“大佬”觉得这种不写代码的办法太“笨拙”了,但这也不应该这么想,并不是每一个人都需要学会代码,或者反过来说术业有专攻。
教程到这里就结束了,现在写完回头看感觉好像还是有点不够细致,不知道小白能不能看懂。------------------------------------------------------ ------------------------------------------------------
补充一些题外内容。
可能你会觉得,这个OSS网址是不是太长了,作为网站地址来说,来说会不会过于牵强(记都记不住)? 没错是这样的,太长了,不过这个问题可以解决,但可能就要花钱了,那就是买域名。
阿里云提供的OSS链接只是给你个能用的链接,如果你想要更加简单短小的一级域名网址,那就得去买域名。关于免费域名这些我不太了解,即便是有好像也是很偏僻的(我见过的免费域名大多是全数字的那种,那有什么网站的域名是全数字的呢?当然xx美铝澳门真人……那种网站就是)
买域名的话,com域名就不要想了,这个价格不合适个人网站,几百上千一年,以及比较火的cn,net这些常用域名都比较贵。
个人网址其实有没有域名都没啥问题,大不了把OSS链接做成二维码,或者网络生成短链接,也可以正常使用。
但如果真的需要域名,可以去看看xyz域名,腾讯云里xyz域名首年8元,或者也可以去阿里云域名拍卖页面里买一个。 (前者全新的域名是可以自定义的,后者拍卖的域名是已经固定的)
在阿里云域名交易处,你甚至可以花10块钱捡漏买一个10年有效期的域名
购买域名后,到阿里云OSS里绑定即可使用。具体使用方式可以在阿里云帮助中心搜索“域名绑定”即可。
还有一个挺有意思的信息,OSS访问热点信息,在这里你可以看到访问最多次数的文件,以及访问地区信息,网络运营商比例,IP访问次数排行等。
------------------
关于WYSIWYG Web Builder
下载地址:
备用地址:
这个软件bug很多的,那具体有多少呢?我随便用了半个小时,遇到的bug数量已经数不清了,在我看来,这软件开发的时候,大概是全公司就上下没有一个人Debug运行过,稍微点用一分钟体验一下,也能发现软件哪都是bug……
但在这个领域我的确没有找到替代品,可能真就只有这玩意稍微合适一些了。这软件也有个很不错的地方,就是动画制作很方便,效果都不错,甚至还能制作关键帧动画和缓入缓出等非线性动画,整体来说,也不是不能用。
腾讯云COS和阿里云OSS的资费区别,腾讯云COS可能会更低一些,本图文方案可能更合适用腾讯云。据网友帖子了解,COS的收费规则是空间存储和上下载流量>50G/月时是完全免费的,而阿里云OSS并不是,只要有存量就算计费,但也高不出多少资费,我自己的OSS,存量30MB不到,月流量200~600MB,这三年期间消费也不到1毛,因此用阿里云也没什么问题的。
如果你觉得本帖对你有用,可以点赞或关注一下哦。最近还会有一篇关于服务器/网络/游戏的中篇图文。(两千字短篇,五千字中篇,八千字长篇)。
410 主题数 |
6 帖子数 |
0 精华数 |