网络入门（网络入门及制作双绞线实验结论）

网络入门（网络入门及制作双绞线实验结论）

安装基本软件

在安装基本软件中，我们向您展示了进行简单的Web开发所需的工具以及如何正确安装它们。

我现在真正需要什么工具？

在本文中，我们将为您设置最低限度的内容 - 文本编辑器和一些现代Web浏览器。

安装文本编辑器

您的计算机上可能已经有了一个基本的文本编辑器。默认情况下，Windows包括​​记事本​​，macOS附带​​TextEdit​​。Linux发行版各不相同;默认情况下，Ubuntu 附带​​了 gedit​​。

对于Web开发，您可能比记事本或文本编辑做得更好。我们建议从​​Visual Studio Code​​开始，这是一个免费的编辑器，提供实时预览和代码提示。

安装现代 Web 浏览器

现在，我们将安装几个桌面 Web 浏览器来测试我们的代码。在下面选择您的操作系统，然后单击相关链接以下载您喜欢的浏览器的安装程序：

Linux：​​Firefox​​，​​Chrome​​，​​Opera​​，​​Brave​​。Windows：​​Firefox​​，​​Chrome​​，​​Opera​​，​​Internet Explorer​​，​​Microsoft Edge​​，​​Brave​​（默认情况下Windows 10附带Edge;如果你有Windows 7或更高版本，你可以安装Internet Explorer 11;否则，你应该安装一个替代浏览器）。macOS：​​Firefox​​，​​Chrome​​，​​Opera​​，​​Safari​​，​​Brave​​（macOS和iOS默认附带Safari）。

在继续之前，您应该至少安装其中两个浏览器，并准备好进行测试。

注意：Internet Explorer 与某些现代 Web 功能不兼容，可能无法运行您的项目。您通常不需要担心使您的Web项目与它兼容，因为很少有人仍然使用它 - 当然，在学习时不要太担心它。您有时可能会遇到需要支持的项目。

安装本地 Web 服务器

某些示例需要由 Web 服务器运行才能成功运行。您可以在如何设置本地测试服务器中了解如何执行此操作？

专业人员使用什么工具？

以下看起来是一个可怕的列表，但幸运的是，您可以在不了解其中大多数的情况下开始Web开发。

计算机。也许这对某些人来说听起来很明显，但你们中的一些人正在手机或图书馆的计算机上阅读本文。对于严肃的Web开发，最好投资运行Windows，macOS或Linux的台式机或笔记本电脑。文本编辑器，用于编写代码。这可以是文本编辑器（例如​​Visual Studio Code​​，​​Notepad ++​​，​​Sublime Text​​，​​Atom​​，​​GNU Emacs​​或​​VIM​​），也可以是混合编辑器（例如​​Dreamweaver​​或​​WebStorm​​）。Office 文档编辑器不适合此用途，因为它们依赖于干扰 Web 浏览器使用的呈现引擎的隐藏元素。Web 浏览器，用于测试代码。目前，最常用的浏览器是​​Firefox​​，​​Chrome​​，​​Opera​​，​​Safari​​，​​Internet Explorer​​和​​Microsoft Edge​​。您还应该测试您的网站在移动设备和目标受众可能仍在使用的任何旧浏览器（例如IE 8-10）上的表现。​​Lynx​​是一款基于文本的终端Web浏览器，非常适合查看视力受损用户对您的网站的体验。图形编辑器，如​​GIMP​​，​​Figma​​，​​Paint.NET​​，​​Photoshop​​，​​Sketch​​或​​XD​​，为您的网页制作图像或图形。版本控制系统，用于管理服务器上的文件，与团队协作处理项目，共享代码和资产并避免编辑冲突。目前，​​Git​​是最受欢迎的版本控制系统，与​​GitHub​​或​​GitLab​​托管服务一起。一个FTP程序，用于较旧的Web托管帐户以管理服务器上的文件（为此，​​Git​​越来越多地取代FTP）。有大量的（S）FTP程序可用，包括​​Cyberduck​​，​​Fetch​​和​​FileZilla​​。自动化系统，如​​Webpack​​，​​Grunt​​或​​Gulp​​，用于自动执行重复性任务，例如缩小代码和运行测试。库，框架等，以加快编写通用功能的速度。库往往是现有的 JavaScript 或 CSS 文件，它提供现成的功能供您在代码中使用。框架倾向于进一步推动这个想法，提供一个完整的系统，其中包含一些自定义语法，供您在上面编写Web应用程序。此外，还有更多工具！

您的网站会是什么样子？

您的网站会是什么样子？讨论在编写代码之前必须为网站做的规划和设计工作，包括“我的网站提供哪些信息？”，“我想要什么字体和颜色？”和“我的网站做什么？

首先要做的事情：规划

在做任何事情之前，你需要一些想法。您的网站实际上应该做什么？一个网站基本上可以做任何事情，但是，对于你的第一次尝试，你应该保持简单。我们将首先创建一个简单的网页，其中包含标题，图像和几个段落。

首先，您需要回答以下问题：

您的网站是关于什么的？你喜欢狗，纽约还是吃豆人？您就此问题提供了哪些信息？写一个标题和几个段落，想想你想在页面上显示的图像。用简单的高级术语来说，您的网站是什么样子的？背景颜色是什么？什么样的字体是合适的：正式的，卡通的，大胆而响亮的，微妙的？

注意：复杂的项目需要详细的指南，这些指南涉及颜色，字体，页面上项目之间的间距，适当的写作风格等所有细节。这有时被称为设计指南，设计系统或品牌书，您可以在​​Firefox Photon Design System​​上看到一个示例。

草绘您的设计

接下来，拿起笔和纸，大致勾勒出您希望网站的外观。对于你的第一个简单的网页，没有太多的草图，但你现在应该养成这样做的习惯。这真的很有帮助 - 你不必成为梵高！

注意：即使在真实、复杂的网站上，设计团队通常也从纸上的粗略草图开始，然后使用图形编辑器或Web技术构建数字模型。

Web 团队通常包括平面设计师和用户体验 （UX） 设计师。平面设计师将网站的视觉效果放在一起。UX设计师在解决用户将如何体验和与网站交互方面具有更抽象的作用。

选择您的资产

此时，最好开始将最终出现在网页上的内容放在一起。

发短信

您仍然应该有之前的段落和标题。把它们放在附近。

主题颜色

若要选择颜色，请转到​​“拾色器”​​并找到你喜欢的颜色。当您单击一种颜色时，您会看到一个奇怪的六个字符代码，例如 .这称为十六进制代码（十六进制的缩写），表示您的颜色。暂时将代码复制到安全的地方。​​#660066​​

图像

要选择图片，请转到 ​​Google 图片​​并搜索合适的图片。

找到所需的图像后，单击该图像以获取其放大视图。右键单击图像（按住 Ctrl 键并单击 Mac），选择“将图像另存为...”，然后选择一个安全的位置来保存图像。或者，从浏览器的地址栏中复制图像的网址以供以后使用。

请注意，网络上的大多数图片（包括 Google 图片中的图片）都受版权保护。为了降低侵犯版权的可能性，您可以使用 Google 的许可过滤器。单击“工具”按钮，然后单击下面显示的生成的“使用权限”选项。您应该选择知识共享许可选项。

字体

要选择字体：

转到​​Google字体并​​找到您喜欢的字体。将Google为您提供的代码行复制到文本编辑器中，以备后用。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。