同学们在制作作品集的时候，为了有更丰富的展现个人设计的方式，搭建个人作品集网站绝对是一个不二的选择，但是如何快速搭建个人网站成为了很多同学挠头的事情。
建站工具有很多，比如WordPress，Wix……但是经过UXD导师们的长期实测，可以很负责地告诉同学们：“Squarespace荣升为最好用的建站工具没有之一”。
注：UXD为所有内部学员提供免费的建站一对一辅导，有需要的同学可以直接联系教务老师获取课程排期和技术支持。
本文，UXD将从如何注册、如何编辑内容、如何改变字体和颜色、如何加分栏颜色和如何制作轮播图，这五个方面介绍Squarespace的使用方法。
01
注册账户
在Squarespace主界面的左上角有LOG IN的登入口，可以用邮箱创建一个新用户，注册你的Squarespace账号。
注册完之后，你就可以根据自己的意愿选择你想制作的网站类型了，例如下图选择Portfolios之后，就会有对应的模板供你制作。进入模板后，左侧为菜单栏。菜单栏中的选项主要用来调整网页的组织架构，设计网页的配色、字体等参数。点击Pages进入下图所示的两个板块。Main Navigation可以调整顶部的导航栏；Home选项可以调整首页。接着，选中Home页面，点击Edit对页面进行编辑。点击页面上有修改标记的地方即可对相应内容进行调整。可添加内容如图所示，包含文字、图片、视频、引用、链接等，形式非常丰富。下图所示就是可以添加材料的所有形式。当我们需要对整个面板进行调节的时候，可以选择右侧的浮标对面板进行编辑、复制、上下移动的操作。在Squarespace中更改字体风格、大小、颜色都是通过代码进行操作的。双击模板中的文字可以修改内容。右击会出现Inspect字样，如下图所示，打开代码面板。进入到代码模板后，需要点击下图中圈出来的按钮，才可以获取网页代码，选择元素并查看和复制代码。当我们的鼠标移动到想要查看的文字，就会有对应的信息显示在屏幕上。比如，这里的字体是h3，颜色是黑色。同样的，在右边的代码框中也会有相应的信息显示出来。记住这里显示的信息，然后回到Design面板，点击CSS面板，对你需要修改的字体进行代码的编辑。点击CSS面板后，下方就会有一个代码框，在这里，我们可以将相应的代码进行粘贴或者编写。比如，我们想把自己已经编辑好的文字代码信息转移到Squarespace中。以Figma为例，在Figma页面的右侧也有相应的代码。点选相应的文字，点击Inspect，就可以查看代码。然后，直接复制这一段代码到Squarespace的代码填写框中。font-family: PingFang SC;但是需要注意的是，我们复制到Squarespace中的时候，一定要记得之前文字的标号，比如：h3{这里插入刚才复制的内容}。下面有一个小动画展示代码改变字体的效果。将代码输入到左边的代码框中，右边的文字就发生了相应的改变。下面介绍一下如何加分栏底色。我们在Design栏中点开Colors选项，然后再对颜色进行修改。在修改分栏底色之前，我们需要对网站的配色方案进行修改，在Custom Colors中加入或改变你想要的颜色。在右侧浮窗的Edit Section中有Colors的选项，然后就可以在你编辑好的色彩模板中选择你想要的分栏设计版式。点击下图所示的标志，可以添加更多新的内容，轮播图的插入也是通过这样的方式。在轮播图模板中，需要先将资源上传blog才可以加载自己的图片。第一步在Home栏中的Not Linked创建新的Blog，然后就新增一个你自己的Blog可以添加内容。点击Blog 1中的Settings更改其中的图片。在Options选项中，先移除预设的图片，再上传自己的图片。之后，就可以在相应的Carousel轮播图中添加相应的Blog 1了。
