网站内容编辑器(非速成，未使用任何建站平台，也谈不上教程！)

　　网站内容编辑器(非速成，未使用任何建站平台，也谈不上教程！)

　　不是快车道，我没用过任何建站平台，也谈不上教程。这只是我在制作个人网站过程中的一些经验，也是制作个人网站的100种方法之一。

　　正如标题所说，如何拥有自己的个体网站，那么我就讲一个具体的可执行路径，按照这条路径执行，下限是拥有自己的个体网站 ，上限未知，有很大的想象空间。

　　为什么我需要一个人网站

　　当前的互联网基础设施已经完善，每个类别都有相应的应用。每个人都可以创建自己的页面并发布内容，尤其是在设计行业。这些应用的出发点是为更多的人提供服务，让大家可以专心创作，不用担心内容以外的事情，但也正是因为“服务更多的人”，这意味着需要各种限制。

　　运球发布页面

　　ZCool 发布页面

　　Behance 发布页面

　　例如，对发布内容的大小、大小、比例、格式（图片、视频、文字……）的限制，以及对版式、格式等的限制，要求用户按照特定的方式发布内容。规则。各种限制一方面是为了降低应用自身的运维成本，另一方面是方便用户操作。在很多情况下，没有限制，很容易混淆。

　　这里所说的限制并不是贬义，但毕竟是限制。有时他们仍然会受到影响。如果它们对您没有太大影响，那么看看下面的内容也没什么坏处。只是看和玩。如果受到影响，那我们就得想办法，怎么突破限制？

　　个人网站 是不错的选择。与其说是“突破限制”，不如说是“拓宽限制的边界”。在这里，大部分的控制权都掌握在你自己的手中，你拥有很高的自由度。自由控制页面布局和样式，甚至可以为每个作品制作不同的布局。不用担心格式、文字、图片、视频、gif……你可以随意混搭。

　　这看起来很诱人，你一定会问，如果它这么好，为什么没有多少人使用它？这是使用外部应用和个人网站的核心区别：

　　自由度与复杂程度成正比，自由度越大，背后需要的支持就越多。以下是我个人的网站流程。如果你已经在计划做个人网站，下面的内容可能对你有帮助。如果你还在犹豫，你可以看看整个过程，权衡一下需求。不要做。

　　需要做什么

　　整个过程收录三块内容：

　　上传服务器的设计与实现

　　在上传到服务器之前，这一切只能在自己的电脑上运行。只有上传到服务器后才能被所有人访问网站。

　　设计和实现，这两个会不断循环迭代。低成本迭代是线上产品的重要特征之一。与实体产品不同，它们必须完美无缺才能发布。否则，修改和调试的成本极高。大动作可用于下一次迭代。线上产品在这方面有着天然的优势。相反，它们可以小步运行，并在每次迭代中逐渐接近理想状态。

　　设计

　　设计部分我就不多说了。都是为了这个。我们随意玩吧。需要注意的是，第一个版本应该尽可能简单。主要目的是梳理页面层次结构。不要花太多时间。你以后回来的可能性很大。修订。

　　完成

　　实现，即通过代码将设计稿转化为真正的网站，HTML（超文本标记语言），CSS（层叠样式表），排列顺序就是学习的顺序。

　　代码编辑器

　　在开始编写代码之前，您需要一个编辑器。HTML、CSS、JavaScript都需要编辑器的支持，就像Figma、Sketch、Illustrator……在画图之前，不要担心现阶段选择哪个编辑器。只需使用 VS 代码。

　　HTML、CSS

　　mozilla 学习网页开发

　　HTML 和 CSS 可能需要 2-4 周。它们不是编程语言。从名字就可以看出来。它们是标记语言和样式表语言。暂时可以大致理解为它们比编程语言要好。更简单的，网站的内容、布局、风格都是他们做的。

　　学习HTML和CSS不是学习A和B的线性关系，而是在两者之间穿梭，学习Web开发-MDN可以帮助你掌握这两个工具。

　　Mozilla CSS 布局

　　HTML 按照教程熟悉标签的用法。注意页面结构。只需看看 HTML。页面结构的重要性不会体现出来。当你开始用 CSS 调整布局时，页面结构的重要性就会体现出来。

　　特别注意 CSS 部分中的 CSS 布局。后期使用频率很高。其他CSS样式可以随时使用和检查，但布局不好。它有多种布局方式，影响整个页面。有很多相关的项目。它想通了。

　　刚开始的时候会有点头疼。毕竟，第一步总是困难的。坚持住，你很快就能度过难关。你先对自己撒谎。如果你头痛超过两周，再试一次，但你做你自己网站，坚持。

　　通过基础知识，您就可以行动了。做一些实际案例，边做边学。尝试使用 HTML + CSS 来实现：

　　前面制作的简单视觉稿；复制一些你喜欢的页面样式（从易到难）；2-5页设计稿，尽量接近真实的网站环境，比如页眉页脚，可以互相跳转。

　　当你能完成这些时，你就差不多了，还有这个部分响应式设计的最后一步，这是在当前互联网环境下必须考虑的问题。响应式设计是指在电脑、ipad、手机等不同的屏幕尺寸下，页面的布局和样式会进行相应的调整。这不仅仅是 CSS 部分的工作。在设计之初，必须充分考虑不同屏幕尺寸下页面的布局和风格。响应式设计实现后，这部分的学习就结束了，开始下一步。

　　JavaScript

　　Mozilla JavaScript

　　它是一种完整的动态编程语言。应用于HTML文档时，可以为网站提供动态交互功能。

　　只有到了这个时候，你才能真正开始“编程”。JavaScript 非常强大，除了 Web 开发之外还有很多用途。相比之下，它对新手比较友好，相比之下，它非常适合作为入门编程语言。

　　非专业人士对编程本质上是陌生的。即使是适合入门的 JavaScript 也会感觉很复杂。这是既定的事实。我们什么也改变不了。我们只能想一些办法，让学习过程更顺畅。我的方式 不要试图“学习”JavaScript。很难，而且我学不会，很多东西我也不知道用什么，所以你可以反过来想，我们学JavaScript的时候为什么要用它？

　　相信在前面的HTML+CSS练习部分，大家一定遇到过一些HTML和CSS以外的问题，比如页眉页脚一样。将代码复制并粘贴到每个页面中。如果有变化，必须遵循所有页面。再改一下，确实每个页面都需要，但是有什么办法可以自动给每个页面添加页眉和页脚吗？即使有修改，也应该只修改一次。

　　正好JavaScript很擅长做这种事情，所以我们目前需要它来控制HTML中的一些内容。一个js文件就可以解决所有页面的页眉页脚，没必要一一笨拙。粘贴。您需要了解 DOM（文档对象模型）才能连接 JavaScript 和 HTML。既然可以控制HTML中的内容，那么是否也可以控制CSS呢？事实上，你可以顺便了解一下。

　　不管怎样，你必须首先完成它。掌握了基础知识后，可以根据具体问题寻找相应的解决方案。否则，即使你找到了解决方案，你也不会理解它，更不用说解决你自己的实际问题了。

　　整个过程基本上就是先掌握基础，发现问题后寻找解决方案，学习如何解决这些问题，大概率会由此衍生出一些相关的问题，然后找到问题，再搜索，再次学习，再次发现问题……

　　一开始你可能无法准确找到解决方案，因为你刚刚接触，问题描述不够准确。要有耐心。随着对JS的深入理解，不仅技术能力会提升，提问能力也会提升。提问是很重要的技能，这样才能形成良性循环，从容解决问题。

　　完成后的 JavaScript 部分：

　　你可以停下来，准备继续下一步。

　　完成阶段性任务

　　我们梳理一下目前做了哪些工作：

　　JavaScript (DOM)

　　初学者要完成这个并不容易。你可能花了很长时间。这是正常的。只要坚持下去。完成页面后，上传到服务器，就可以通过域名访问了。

　　到目前为止，已经完成了80%。虽然还有20%的工作要做，但无论是工作量还是难度，都比之前需要长时间学习和研究的80%要简单得多。

　　除了文中列出的教程链接，建议大家找一些其他的教程，无论是文字还是视频，网上这方面的资源都非常丰富，基础教程也不会偏离太多。充分利用搜索并找到适合您的研究。

　　今天就到这里，稍后再开始讲服务器和域相关的话题。我希望你为这一步做好了充分的准备。下一步就是让网站上线。祝你顺利：）