文章插图
完成设计后 ， 就可以开始将其转换为代码●①创建HTML结构
Github上有个项目是 pix2code ， 它可以直接将页面生成HTML结构并附加CSS代码 ， 已经开源了 ， 感兴趣的可以去看看 ， 确实很吊 。
国内暂时还没有这样的项目 ， 想搞拖拽开发的老板真是不少 ， 但没见过谁家真正做出来了 ， 做不出来肯定不是技术不能实现 ， 拖拽的本质是在组件库基础上加了一层交互界面 ， 所以组件化是拖拽开发的第一步 ， 剩下的其实就是"layoutit"了 ， 但要真正落地 ， 就有很多限制 。
可拖拽的组件应该是封装了控制层和视图层的 ， 原则上耦合越低越好 ， 内聚越高越好 ， 自己浑然一体最好 ， 只对外暴露配置项 ， 也就是说将一个组件拖拽到界面上之后 ， 得有一个动态生成配置面板的机制 ， "layoutit"也有一个简单的配置机制 ， 但远远不是生产级别的 ， 这里可以统一约定一个规则 ， 让组件的配置项可以被读取 ， 也可以按组件枚举 ， 硬做到界面上 ， 都可以 ， 都有优缺点；
互相依赖的组件之间的数据交互会有问题 ， 因为各组件的输入输出不可能完全一致 ， 也就做不到依赖组件之间无缝接入 ， 常规开发中开发者会手动做一些"适配"工作 ， 比如将A组件的输出剪裁或修饰一下传给B组件 ， 但现在是搞拖拽 ， 这个数据修饰没法做了 ， 可以修改组件做到可以互相适配 ， 或者一步到位在拖拽系统上做一套数据修饰的中间功能 ， 让操作者自己适配 ， 都可以 ， 都有很大的缺点 。
所以在这里我们也只好一步步的自己切页面了 ， 尽可能是响应式的 ， 同时按设计稿填充的内容在HTML结构填充元素 。
文章插图
●②小技巧
将布局变成完整的设计时 ， 我喜欢考虑将设计从上到下划分为多个部分的水平线 。顶部的导航栏可能是第一个切片 。中间的可能是一个切片 ， 底部的是一个切片 ， 我会将他们用明显的线条区分开来 ， 使用不用的颜色 ， 美观而又清晰 。
文章插图
文章插图
【如何设计和编码制作个人网站？】一般在企业的工作的时候 ， 都是设计师给设计稿 ， 叮嘱效果 ， 我们按照设计师的稿子从头到下附带交互效果直接切页面 ，
●③后续步骤
页面设计完成并用代码制作了个人网站 ， 接下来配置后台和网站在服务器的部署了 ， 这里我们使用SiteServer CMS 内容管理系统来作为我们网站的后台 。如何使用 ， 点击阅读更多 ， 既然是自己设计网站 ， 我们就不理会它里面的免费模板了 。
至于后期的网站速度优化 ， 代码优化之前我也提过了 ， 写过文章详细说明过 ， 大家也可以看一下 。
你不知道的「前端性能优化」知识 ， 我都给你总结好了
网站打开速度慢 ， 这些是关键 ， 不要以为不重要
文章插图
总结通过自己设计和代码编写 ， 以及后期的上线 ， 你将会学到这些 。
![[兰德里]在NBA里消失的口香糖](http://img88.010lm.com/img.php?https://image.uc.cn/s/wemedia/s/2020/325c4d5638cc51b34978c9670d0dc5ae.jpg)
