个人网页制作（如何设计和编码制作个人网站）
许多开发人员认为，擅长设计是一种天生的能力，创造力是与生俱来的。但设计是一种可以像其他任何东西一样学习的技能。你不必生来就是一个艺术家，可以创建一个美丽的网站，这需要实践。从我身边的小伙伴的博客和自己的网站来看，很多人都使用开源背景的网站模板。我不知道限制是否太大。他们想要的内容模板也应该遵循该模板。他们看得越多，网站就越令人不快，也没有成就感。本文将介绍如何通过从头开始设计个人网站并将其转换为代码来实践设计，当您可以使用引导或预制模板等UI库时，为什么要设计自己的网站？以下是设计网站的一些好处● ① 从人群中脱颖而出。许多开发人员博客使用类似的模板，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低他人的认可度。您独特的设计风格将使您的网站在众多网站中脱颖而出● ② 练习技能。设计它将帮助你练习设计原则、工具、HTML和CSS。开发用户界面并将其引入网络将更容易。设计一个独特而现代的个人网站● ③ 更好的应用程序性能。您的网站将是轻量级的，使用自定义CSS将有更好的性能。如果要包含UI库或模板，它可能包含大量代码，以涵盖各种可能的自定义设置，而您不使用这些自定义设置。如果将未使用的代码发送给用户，将对网站的性能产生负面影响。加载速度慢，打开网页速度慢，这是许多人不接受的● ④ 发展职业技能。在web开发中，您可能不必从头开始实现完整的网站设计，但您应该能够创建与现代设计一致的漂亮界面。“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，并熟悉设计和产品知识。全栈开发人员应该具备一些基本的设计知识，并能够为用户提供一致的体验。当然，毫无疑问，我们可以从中学到很多技能和知识● ⑤ 可能很有趣。创造让你骄傲的东西是一种有趣的经历。如果你花一些时间练习、思考并创建自己的页面，那不是更好吗？在生活中发现美是一件美好的事情，但我认为创造美更值得骄傲，开始设计你的网站吧。不要直接写页面。从代码设计页面。很难从代码编辑器中将设计可视化。我建议先使用可视化设计工具，然后将结果转换为代码。现在有一些快速代码生成模板。我认为可以使用小项目。例如，我们的个人网站和大型项目追求性能，这是不合适的▲ 接口原型制作软件。我最喜欢的是balsamiq mockups，一款手绘风格的轻量级小软件。我喜欢它的原因是：● ① 创建线框第一步是创建站点的低保真度线框。创建线框有助于在添加视觉设计和内容之前构建页面。线框不一定要漂亮。它应该关注内容的布局。你可以手工绘制，或者使用设计工具的基本功能来创建线框，我喜欢把设计想象成一系列矩形。网页上的元素是从上到下流动的矩形块。从矩形开始不需要任何艺术天赋● ② 网站结构由您决定线框中的元素。您可以添加博客标题、帖子导航和页脚。您可能不需要所有这些内容。您可以将它们保留为基本内容，以后再添加。确定要包含的内容，并将这些零件合并到线框中。如果您在布局中遇到问题，可以查看类似的网站，模拟网站内容的结构，然后修改它以满足您的需要。线框不一定完美。在获得正确的网站结构后，您可以转向视觉设计● ③ 应用可视化设计要将低保真度线框转换为设计，您可以使用免费的设计工具，如figma（下一代设计工件）。如果你从未使用过设计程序，你也可以使用PS来实现它，但速度会有点慢，但我在中国还没有找到像figma这样容易使用的工具● ④ 实施布局首先，创建一个空白画布来表示空白浏览器页面。线框是通过为内容创建容器在设计工具中实现的。我建议从黑白开始，这样您就可以专注于布局，优化布局，使元素大小适当、对齐，并在它们之间留出空间● ⑤ 添加部分和占位符内容，使其看起来像网站后更漂亮。通过弄清楚是什么让布局看起来有吸引力，你可以模仿其他网站的强制风格添加到你自己的网站上。在这个阶段，请考虑形状、大小、边界和阴影。使用您喜欢的样式逐步升级基本矩形● ⑥ 更新布局字体和间距的设计非常有助于美观。如果布局得当，即使是简单的设计也可以达到高质量。同样，您可以模仿另一个网站或搜索字体和字体资源，将它们合并到您的设计中。但我们必须注意版权● ⑦ 为其着色接下来，为站点添加颜色。通过品牌的建立赋予网站特色。想想你希望你的网站如何吸引读者。如果你想让它看起来干净而简洁，可以选择一种不太明亮的颜色，保持渐变的细微，并选择一种易于阅读的字体。如果你想让它看起来有趣，可以选择明亮的颜色，使用明亮的渐变，应用背景纹理，使用圆形元素，然后选择粗体字体。添加颜色似乎令人望而生畏，但你不需要了解颜色的原理。如果你的设计从黑白开始，你可以选择单色来强调元素，赋予设计生命。如果要超出此范围，建议您选择一种或两种喜欢的颜色，然后使用颜色的不同亮度变化。这有助于创建一个有凝聚力的主题，而无需成为色彩专家。选择背景色和前景色时，请通过检查颜色对比度来保持可读性。例如，将深蓝色设置为背景，然后将浅蓝色设置为文本。对于白色背景色，您可以使用蓝色的中等亮度作为标题，在将颜色合并到设计中后，请继续检查整体设计感并进行调整● ⑧ 设计时要注意细节，你应该后退一步检查整个设计并加以改进。通过用简单的语言描述你所看到的东西来批评你的设计，然后把这句话变成需要解决的技术问题● ① 创建HTML结构GitHub上的一个项目是pix2code，它可以直接将页面生成HTML结构并附加CSS代码。它是开源的。有兴趣的人可以去看看。这真的很有趣，目前中国还没有这样的项目。有许多老板想从事拖放式开发，但他们还没有看到任何人真正做到这一点。如果他们做不到这一点，当然不是技术无法实现。拖放的本质是在构件库的基础上增加一层交互界面，因此构件化是拖放开发的第一步。其余部分实际上是“布局”，但真正实现它有很多限制，可以拖动的组件应该封装控制层和视图层。原则上，耦合度越低越好，内聚度越高越好。最好是自我整合。只有配置项对外公开。也就是说，将组件拖到接口后，必须有一种机制来动态生成配置面板。“Layoutint”也有一个简单的配置机制，但它离生产级别还很远。这里，可以约定规则，可以根据组件读取或枚举组件的配置项。接口可能很难，有优缺点，相互依赖的组件之间的数据交互会有问题，因为每个组件的输入和输出不能完全一致，所以相互依赖的组件之间不可能有无缝的访问。在传统开发中，开发人员会手动进行一些“调整”工作，例如将组件A的输出剪切或修改为组件B，但现在是这样对于拖动，无法进行此数据修改。您可以修改组件以相互适应，也可以一步完成拖动系统上的一组中间数据修改功能，以便操作员可以自行适应。所有这些都有很大的缺点，因此我们必须一步一步地剪切页面，尽可能地响应，并根据设计草案中填写的内容在HTML结构中填充元素● ② 提示当把布局变成一个完整的设计时，我喜欢考虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第一个片段。中间可能有一片，底部可能有一片。我会用明显的线条来区分它们，并使用不同的颜色，这样既美观又清晰。一般来说，在企业工作时，设计师会给出设计草图并指导效果。我们根据设计师的草稿直接剪切页面，并从上到下进行交互效果，
● ③ 完成后续步骤的页面设计，并使用代码创建个人网站。接下来，我们将在服务器上配置网站的后台和部署。在这里，我们使用SiteServer CMS内容管理系统作为我们网站的背景。如何使用，请单击阅读更多信息。由于我们自己设计网站，我们忽略了其中的免费模板。至于后期的网站速度优化，我在代码优化之前也提到过。我写了一篇文章详细解释它。你也可以看看，我已经总结了所有你不知道的“前端性能优化”知识，网站打开速度慢是关键。不要认为这不重要，你会通过自己的设计、编码和以后的发布来学习这一点，有没有朋友在设计和构建自己的网站？或者你是否觉得你公司的设计师只是模仿或模仿，无论什么样的设计都是一样的？让我们一起谈谈
