如何自学搭建个人作品集网站
时间：2022-08-20 22:00:01 | 来源：网站运营
时间：2022-08-20 22:00:01 来源：网站运营
本文是本站Live“从零自学搭建个人作品集网站“的缩略版，省略细节内容和详细降解，减少文本篇幅。
很高兴能够有机会分享我在搭建搭建网站过程中的体会心得，以及搜集整理的干货。
本篇文章定位是扫盲贴，希望帮助大家理清思路、合理规划项目进程、更好的自学搭建个人网站。
1. 为何选择自主搭建网站
1.1 网站对比PDF在留学申请中的优势：几乎所有院校都有着各自的格式要求，对于PDF、图片的大小数量要求不一、而对于网站几乎都没有更细的要求。这是由于图片和PDF会占用相当一部分内存，在不同的显示器下的效果也各异。但现实往往是，大部分同学都会同时申请5所左右的学校，根据每所学校的要求调整排版是一件非常费时费力的事情；如果选择使用网站作为载体，可以说是省去了这一耗时的工作。
参考RCA作品集要求，可以看到只接受图片、视频、网站这三种格式，相比来说网站的排版比6张图片要容易些许，更何况还有为其他院校的要求而重新排版。1.2 第三方建站平台适合你么？现在有很多第三方建站平台，它们提供了模块化的版式，图形化操作避免了操作代码，方便用户自己布局并添加内容。一般都具备以下特点：
缺点：1.需要付费才能获得增值服务：例如移除广告、获得更大主机容量等
2.现有的模版很难改变样式，没有自主性，通常适合以图片为主的作品集。
3.通常无法自定义动态效果和专场
优点：1.许多已设计好的模版可供选择
2.无需学习代码，就像搭建QQ空间一样搭建自己的网站
2. 准备建站，需要注意哪些？
2.1 明确建站的目的和受众如果把个人网站作为一个Project来看，在正式开始之前，需要明确你的需求、受众、项目时间预算和技术能力限制。以下给一些tips，具体情况因人而异。
申请学校用：更看重项目的过程展示和思辨能力，因此文字部分很重要
求职用：1.清晰的导航，便于观者快速定位兴趣。
2.在html页面中，添加公司的tag，便于在SEO中被搜索出
2.2 购买域名Domain 购买域名准确来说，是租赁域名。域名即为一串可以定位你网站的门牌号，前缀可以自己定义 ，只要没有被人抢先注册即可，推荐使用英文顺序的中文拼音，
我使用的域名服务商是Godaddy，国外最大的服务商，平时促销活动较多，赶上打折的时候，一整套服务（包括域名、主机、和其他维护增值服务）下来花费不会很多。
如果使用国内域名商，如腾讯云、阿里云，则需按照中国的法律惊醒域名的备案，此过程很麻烦，会花费不少时间。期间服务商会寄来背景板，需要手持身份证拍照等等。
关于域名，我们可以自定义的功能还有很多，有子域名、重定向域名、附加域、别名、DNS管理器。
2.3 购买服务器Host除了定位你网站的门牌号，还需要为你的所有网页搭建一个存储的房间，即为主机（又叫服务器）主机服务商们一般会用存储容量来区别售价。以下图为例，对于个人网站，Economy套餐已足够。
*如果作品集展示中有大量视频内容，而且不方便链接至第三方视频网站，例如YouTube、Vimeo，需要上传至服务器。则这种情况可能会出现容量不够用，需要升级套餐。
Godaddy 的 Hosting 服务价格一览其他部分有趣的功能服务：- 解析访问者的IP：这项功能可以在申请学校的时候帮助你检查，你的目标院校何时查看了你的网站，分别在什么页面停留了多久。
- 加密：可以给自己的网站设置访问密码，只有知道密码的用户才可以访问。
- IP阻止：可以阻止特定区间的用户访问
2.4 作品集中图片与文字存档技巧当你购买好域名和主机，就可以开始写代码布局网站并填充内容了。在此之前，不妨把所有作品集中将要用到的图片文字整理好，便于后续版式布局好之后，直接填充内容。
建议所有项目的素材（包括jpg、video、等文档）都按照素材名称命名、并放在以项目名称命名的文件夹当中。图片请在Photoshop当中保存为web格式，此操作可以在不损伤图片保真度的同时，尽可能的压缩图片大小，提高网页加载速度。
图片具体清晰程度可按需调节，原则是越小越好
3. Html构建结构
沿用上文的比喻，网址website是网站的门牌号；主机Host是网站的户型容量；那么Html就是网站的骨架，即毛坯房；CSS则是所有的装潢装修；你需要展示的作品图片文字是所有的家具；剩下的JavaScript则是房子内的鸟语花香（交互动效等）。
3.1 编辑软件常用的Html编辑工具有很多，我自己亲身试用下来，推荐 Code2（我在ACCD上WEB课的老师也推荐这款软件），非常的轻量，适合初学者，并且可以直接链接FTP服务器，上传文档，实时发布。
Coda 2 售价为$99, 在Live中发放了绿色版，供教学使用。
3.2 推荐教程因为文章篇幅有限，所以在此不具体讲解html，提供教程参考，如有问题可以在文末取得联系支持。
w3schools：A very nuts and bolts HTML construction site. 这是一个类似于词典一样的参考书，里面有html所有的tag用法和小案例。
以下介绍一些html的基本构架，<>内的是标签tag：以<>开始，并以 </>结束。当中的是内容，不同的标签给内容定义了不同的属性。网页的骨架就是由这些不同的属性组成的。就像一座房子一样，有地基，有房梁，有承重墙，有屋顶组成。
HTML基本骨架：<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <meta name="author" content="Author Name Here"> <title>...</title></head><body> ...</body></html>
4. 添加样式并美化界面
4.1 优化CSS的编译语言和编辑器详细讲解略4.2 借用现成的CSS样式库同样是套用模版，但和第三方平台服务商不同的是，你下载的只有html和css文件，需要自行打开编辑器修改代码。对于基础较弱的同学来说，这是一种快速自主建站的方式，几乎只需要看懂代码，然后替换文字图片内容即可。
详细讲解略4.3 如何读取别人的CSS效果使用chrome查看页面元素的css样式 - Wayne-Zhu - 博客园
5. 进阶学习
5.1 JavaScript：让网页活起来JavaScript 教程 基础知识
有许多公开的库可以供大家使用，three.js是实现3D效果 jQuery
three.js - Javascript 3D library
5.2 搜商：如何找到优秀作品集网站除了学习如何搭建网站、如何搭建一个交互顺畅的网站，我们还需要参考许许多多优秀的作品集网站，学习它们如何布局项目，突出重点。
这边提供几种搜索方法供参考：
- Linkedin > search >"example" in people>
在领英上搜索公司／职业，通过定位公司／人来查看相应作品集
有些设计师会在LinkedIn中列出自己的作品网站，通过则个方法还可以看到他们的职业成长路径- University Web > Program > Gallery > Student Intro
寻找你感兴趣的院校专业，通过优秀作品／优秀毕业生定位设计师，查看他们的作品集
以RCA Service Design为例，在学校官网上有优秀毕业作品介绍，会有设计师作品集网站的链接- INS 和 微博 这样的社交平台上也会有设计师公开他们的信息，插画师、漫画家使用这类平台较多，比较便于图片传播。
上海视觉艺术学院 副教授 许一兵 在个人微博信息栏中公开了作品网站其他的networking方式还有很多，总而言之，通过学会在SEO的关键词检索指令，可以帮助你提高获取信息的途径和效率。
这是我搜集的优秀设计的作品集网站，从交互设计开始，以后陆续会更新其他设计方向：工业设计、平面设计、建筑设计。欢迎大家可以直接伸手索取。
5.3 针对留学申请的作品集网站Tips详细讲解略6.资源集合
详细讲解略欢迎大家支持目前5星好评的Live“从零自学搭建个人作品集网站”～
添加个人微信：tangstrategist
在线咨询
