怎么修改别人网站内容(知乎Live“从零自学搭建个人作品集网站”的体会心得)

　　怎么修改别人网站内容(知乎Live“从零自学搭建个人作品集网站”的体会心得)

　　本文为知乎Live的《从零自学打造个人作品集网站》的缩略版，省略细节，细化降级，减少文字篇幅。

　　很高兴有机会分享我在搭建网站的过程中的心得体会，以及采集整理的干货。

　　本文文章定位为扫盲帖，希望能帮助大家理清思路，合理规划项目流程，打造更好的自学个体网站。

　　1. 为什么选择独立搭建网站

　　1.1 网站比较PDF在留学申请中的优势：

　　几乎所有的大学都有自己的格式要求。PDF和图片的大小和数量没有一、要求，网站几乎没有更详细的要求。这是因为图片和PDF会占用相当大的内存，在不同的显示器上会产生不同的效果。但现实情况往往是，大多数学生会同时申请大约 5 所学校。根据各个学校的要求调整排版非常费时费力；如果选择使用网站作为载体，可以说省去了这个耗时的工作。

　　

　　参考RCA组合的要求，可以看到只接受图片、视频和网站三种格式。相比之下，网站的排版比6张图要简单一点，更何况还有其他格式应机构要求重新排版。

　　1.2 第三方建站平台适合你吗？

　　现在有很多第三方建站平台，提供模块化布局，图形化操作避免操作代码，方便用户自行布局和添加内容。一般具有以下特点：

　　缺点：

　　1.为增值服务付费：如去除广告、获得更多托管容量等。

　　2.现有模板样式难以改变，没有自主性。它们通常适用于基于照片的作品集。

　　3.一般不能自定义动态特效和特价

　　优势：

　　1.许多预先设计的模板可供选择

　　2.不用学代码，像QQ空间一样搭建自己的网站

　　2. 准备建站要注意什么？

　　2.1 明确网站的目的和受众

　　如果把个人网站看成一个项目，在正式开始之前，你需要明确你的需求、受众、项目时间预算、技术能力限制。这里有一些提示，因人而异。

　　学校申请：

　　更注重项目的过程展示和思维能力，所以文字部分很重要

　　对于求职：

　　1.清晰的导航，让观众快速定位兴趣。

　　2.在html页面中，添加公司的标签，便于seo搜索

　　2.2 购买域名

　　准确地说，购买域名就是租用域名。域名是一串门牌号码，可以找到您网站。前缀可以自己定义，只要没有先注册，建议使用中文拼音，英文顺序。

　　我使用的域名服务商是国外最大的服务商Godaddy。通常，有很多促销活动。打折时，整套服务（包括域名、主机托管等维护增值服务）不会花很多钱。

　　如果您使用国内域名提供商，如腾讯云、阿里云等，您需要按照中国法律进行域名注册唤醒。这个过程很麻烦，会花费很多时间。期间服务商会发背景板，需持*敏*感*词*拍照等。

　　关于域名，我们可以自定义很*敏*感*词*，包括子域、重定向域、附加域、别名和 DNS 管理器。

　　2.3 购买服务器主机

　　除了定位你的网站的门牌号之外，你还需要为你所有的网页搭建一个储藏室，也就是主机（也叫服务器）。托管服务提供商通常使用存储容量来区分价格。下图是一个例子，对于个人网站，经济包就足够了。

　　*如果作品集展示的视频内容很多，不方便链接第三方视频网站，如YouTube、Vimeo，需要上传到服务器。在这种情况下，可能是容量不足，需要升级计划。

　　

　　Godaddy的托管服务价格表

　　其他有趣的功能服务：

　　2.4 在你的作品集中存档图片和文字的技巧

　　购买域名和托管后，您可以开始编写代码布局网站 并填充内容。在此之前，不妨把所有作品集会用到的图文整理一下，以便后续布局布局后直接填入内容。

　　建议所有项目素材（包括jpg、视频等文件）按照素材名称命名，并放在以项目名称命名的文件夹中。请将 Photoshop 中的图像保存为 Web 格式。该操作可以在不损害图片保真度的情况下尽可能压缩图片大小，提高网页加载速度。

　　

　　图片的具体清晰度可以根据需要调整，原则是越小越好 3. Html构建结构

　　按照上面的类比，网站网址是网站的门牌号；host主机是网站的单位大小；那么Html就是网站的骨架，也就是毛坯房；CSS 都是装饰；您需要展示的作品的图片和文字都是家具；JavaScript 的其余部分是房子里的鸟和花（交互效果等）。

　　3.1 编辑软件

　　有很多常用的 Html 编辑工具。我自己试过了，推荐Code2（我ACCD的WEB课老师也推荐这个软件），非常轻量级，适合初学者，可以直接链接FTP服务器上传文件，实时发布。

　　Coda 2 售价 99 美元，绿色版本在 Live 中分发，用于教育用途。

　　3.2 推荐教程

　　由于文章篇幅有限，这里不再详细讲解HTML，提供教程参考。如果您有任何问题，可以在文章末尾联系支持。

　　w3schools：一个非常具体的 HTML 构建站点。这是一本类似于字典的参考书，收录 HTML 中的所有标签用法和小案例。

　　下面介绍一些html的基本结构，里面是标签：start with和end with。其中就是内容，不同的标签为内容定义了不同的属性。网页的骨架由这些不同的属性组成。就像房子一样，它有地基、横梁、承重墙和屋顶。

　　HTML基本骨架：

...

...

　　4. 添加样式，美化界面

　　4.1 用于优化 CSS 的编译语言和编辑器

　　详细讲解略

　　4.2 借用现成的 CSS 样式库

　　模板也是应用的，但是和第三方平台服务商不同的是，你只下载html和css文件，需要自己打开编辑器修改代码。对于基础薄弱的同学来说，这是一种快速独立搭建网站的方式，几乎只需要看懂代码，然后替换文字和图片内容即可。

　　详细讲解略

　　4.3 如何阅读别人的CSS效果

　　使用chrome查看页面元素的css样式 - Wayne-Zhu - 博客园

　　5. 高级学习

　　5.1 JavaScript：让网页栩栩如生

　　JavaScript 教程基础

　　有很多公共库可供大家使用，three.js是一个3D效果的jQuery

　　three.js - Javascript 3D 库

　　

　　5.2 搜索业务：如何找到优秀的投资组合网站

　　除了学习如何搭建网站，如何搭建流畅交互的网站，我们还需要参考很多优秀的作品集网站，学习他们如何布局项目，突出重点.

　　这里有几种搜索方法供参考：

　　

　　有的设计师会在LinkedIn上列出自己的作品网站，通过这种方式也可以看到自己的职业成长路径

　　

　　以RCA Service Design为例，学校官网有优秀毕业作品介绍，会有设计师作品集链接网站

　　

　　上海视觉艺术学院副教授徐一兵在个人微博资讯栏目发表作品网站

　　还有许多其他的联网方式。总而言之，通过学习SEO中的关键词检索指令，可以帮助你提高获取信息的方式和效率。

　　这是我采集的优秀设计合集网站，从交互设计开始，未来会更新其他设计方向：工业设计、平面设计、建筑设计。欢迎您直接询问。

　　5.3 出国留学作品集网站Tips

　　详细讲解略

　　6.资源采集

　　详细讲解略

　　欢迎大家多多支持当下的5星直播《从零自学打造个人作品集网站》~