web个人网页制作代码 制作一个网页的代码教学(4)

web个人网页制作代码

将颜色合并到设计中后，请继续检查总体设计感并进行调整。

●⑧注意细节

在设计时，你应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判你的设计，然后将该陈述转换为需要解决的技术问题。

看起来紧凑吗？增加填充和边距。文字难读？选择更清晰的字体或增加字体大小。增加背景和前景之间的颜色对比度。内容难识别？添加具有较高字体粗细的标题。在标题和段落之间添加更多间距。看起来草率或不一致？在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。调整填充和边距，以保持垂直方向上一致的间距。通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。确保所有颜色都符合你的调色板。

完成设计后，就可以开始将其转换为代码

●①创建HTML结构

Github上有个项目是 pix2code ，它可以直接将页面生成HTML结构并附加CSS代码，已经开源了，感兴趣的可以去看看，确实很吊。

国内暂时还没有这样的项目，想搞拖拽开发的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术不能实现，拖拽的本质是在组件库基础上加了一层交互界面，所以组件化是拖拽开发的第一步，剩下的其实就是”layoutit”了，但要真正落地，就有很多限制。

可拖拽的组件应该是封装了控制层和视图层的，原则上耦合越低越好，内聚越高越好，自己浑然一体最好，只对外暴露配置项，也就是说将一个组件拖拽到界面上之后，得有一个动态生成配置面板的机制，”layoutit”也有一个简单的配置机制，但远远不是生产级别的，这里可以统一约定一个规则，让组件的配置项可以被读取，也可以按组件枚举，硬做到界面上，都可以，都有优缺点；

互相依赖的组件之间的数据交互会有问题，因为各组件的输入输出不可能完全一致，也就做不到依赖组件之间无缝接入，常规开发中开发者会手动做一些”适配”工作，比如将A组件的输出剪裁或修饰一下传给B组件，但现在是搞拖拽，这个数据修饰没法做了，可以修改组件做到可以互相适配，或者一步到位在拖拽系统上做一套数据修饰的中间功能，让操作者自己适配，都可以，都有很大的缺点。

所以在这里我们也只好一步步的自己切页面了，尽可能是响应式的，同时按设计稿填充的内容在HTML结构填充元素。