设计师如何呈现作品集？不会代码也能开发个人网站
时间：2023-10-09 03:06:01 | 来源：网站运营
时间：2023-10-09 03:06:01 来源：网站运营
设计师如何呈现作品集？不会代码也能开发个人网站：设计师们除了可以在站酷、UI中国、behance、dribbble等平台上可以发布自己的作品之外，打理一个属于自己的个人网站，附在自己的简历上也不失为一个点睛之笔。这也是设计师们想要搭个站的原因，也是为了激励自己产出优秀的作品和练习。
如果纯手写网页，做个简单的前台显示页面，但是需要有比较强大的写代码能力，花费的时间成本也太大，做出来的效果也无法保证，等等原因之后开始考虑起了提供网站搭建服务的服务商和一些无代码平台，做了功课之后锁定了一家无代码开发平台——Zion，通过可视化和组件化模块就能实现制作小程序、网站。
先来看看搭建一个网站需要什么准备工作。
首先，搭建网站最关键的当然是要有
一台服务器，它的作用就是提供网站运行所需要的硬件环境。但这并不意味着我们真的要去买一台物理机来当服务器，因为现在国内有很多云平台都可以购买云服务器，而且价格还很便宜。第二
，服务器管理软件的作用就是能够让我们很方便地，在服务器上安装软件或者是管理文件。第三，
域名是我们访问网站时输入的地址，由于网站是搭建在服务器上的，按理说我们应该通过服务器的ip地址来访问网站才对。可全世界的网站那么多，如果通过记住这些冷冰冰的数字来访问网站，那岂不是太难了，所以域名就应运而生。当我们在地址栏输入域名时，会有DNS服务器帮我们找到，站服务器的IP地址并返回给浏览器，然后浏览器再通过ip地址访问网站。
搭建网站的最后一个是
一份网站程序源码，它的作用就是提供一个可供访问的界面，并实现网站的所有功能。按道理来说，开发网站程序本来是含代码量最高难度也最大的一个步骤，但是在这里介绍一个无代码开发平台——Zion。通过可视化和组件化模块就能实现制作小程序、网站。
比如我们需要呈现这样的效果，去把自己的作品一个一个链接起来（当然这只是一个初步的集成导航，暂时先把功能实现了出来，后期会把设计方面再加强一下）
1.1 制作方法
想要实现这种效果的方法有很多，如下：
- 选择视图+条件式容器内套列表，在列表过滤字段，然后条件式容器和选择视图匹配。
- 选择视图+列表，然后列表过滤字段与选择视图名称匹配（☆推荐）
谈谈这两种方法：这两种方法实现的效果是一样的，但在制作的过程中方法1绝对比方法2要慢很多而且容易出错。因为方法1需要对每个条件式容器设置条件及内套的列表也要一个个过滤会很麻烦，而且效率也低，制作容易出错卡顿；方法2直接用选择视图和列表，列表过滤字段直接和选择视图名称匹配。1.2 页面布局
- 在页面拖入【选择视图】和【列表】及【文字】组件，如图所示：
1.2.1 选择视图布局
- 选择视图样式中将多行打开，X【0】，Y【70】，W【135】，H【650】，如图所示：
- 双击进入【选择视图】中，在【正常视图】和【选中视图】拖入【按钮组件】（选择视图按钮样式自拟），X【0】，Y【0】，W【135】，H【50】，如图所示：
- 在【正常视图】中会有个【悬停效果】，选择【正常视图的按钮】点击进入悬停编辑模式，修过悬停后的文字颜色即可，如图所示：
1.2.2 文字布局
- 【文字】组件就不多说了，X【144】，Y【70】，W【234】，H【25】，文字颜色自拟，将悬浮勾上，如图所示：
1.2.3 列表布局
- 【列表】具体参数，X【144】，Y【102】，W【1122】，H【619】，将悬浮勾上，布局模式改为【充满父组件】，如图所示：
- 【列表】样式，纵列数量：4，横向空白和纵向空白都为：10，如图所示：
- 双击【列表】，点击【容器视图】，将高度改为80，如图所示：
- 在【容器视图】中拖入一个【视图】，X【0】，Y【0】，W【276】，H【80】并给【视图】添加边框效果，后面要做悬停效果的。如图所示：
- 在【视图】中拖入图片和两个文字组件，具体参数如下：
- 进入【悬停编辑模式】分别给【视图】与【文字】添加悬停效果分别修改下颜色即可，如图所示：
1.3 数据表
- 因为不用建立关系，直接参考以下图片就行了，如图所示：
1.4 数据绑定及过滤
1.4.1 选择视图数据绑定
- 给【选择视图】，默认值自要求默认值远程数据存在的，数据来自【远程数据中的导航侧边】，字段排序可加可不加，过滤类型【无过滤条件】，如图所示：
- 双击进入【选择视图】点击【按钮】，文字内容为【项数据中导航侧边的name】，如图所示：
1.4.2 文字数据绑定
- 文字内容为【-选择器/选择视图/name-】，如图所示：
1.4.3 列表数据绑定
- 点击【列表】，添加数据表【导航内容数据】，过滤条件为【type等于选择器/选择视图/name】，如图所示：
- 进入【列表】，绑定【视图数据】，图片【项数据/导航内容数据/image】，name【项数据/导航内容数据/name】，description【项数据/导航内容数据/description】，如图所示：
1.5 打开外部链接
- 在【视图】中添加点击行为【打开外部链接】，链接内容为【项数据/导航内容数据/URL】，如图所示：
一般来说，不会写代码想要自己搭建网站是比较困难的，但是这样的无代码平台却把两者之间的门槛拉低了，这样就方便了很多，也安全了很多。最关键的是服务器，域名这些都给你准备好了，不懂代码的小白真的是很适合用这个平台去落实自己的想法。
在线咨询
