|
自我接触网络时就有过想法做一个自己的网站，但那会什么都不懂，就连服务器是什么都不知道。全靠百度搜索，翻过各种误导信息广告信息，总算是得到了一些了解，但最终还是因为技术层面了解得太少，兴趣被耗空了，最终放弃了最初的那种热情。 最初的想法已经过去好多年了。 但就在几个月前，忽然又萌生回了这个想法，做个自己的个人主页吧，放一些个人作品什么的。但是我还是不会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特别多，但又真找不到能替代它的软件了，不得已这里还是用它来说吧。 下面来举个栗子，我随便用它做了一个网页，最终成品效果：查看链接 美观程度也就一般，因为我没有具体设计，只是为了接下来的教程演示而随便做的一个。以及这个网页没有适配手机版页面，动画元素都是配合电脑宽屏浏览器的。 当然如果你有网页设计更具体想法的话，可以尝试做的更好一些，这个软件也可以把网页做的很好看。 （注：网站背景图是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地址（网站地址）了。通过这个地址访问就能看到刚刚的网页效果了。 到这里差不多就结束教程了 这种网站叫静态网页，制作简单成本低廉，适合非计算机行业的业外人士使用。 可能会有“大佬”觉得这种不写代码的办法太“笨拙”了，但这也不应该这么想，并不是每一个人都需要学会代码，或者反过来说术业有专攻。 教程到这里就结束了，现在写完回头看感觉好像还是有点不够细致，不知道小白能不能看懂 |
|
|
