Web 开发的要点; 综合指南

已发表: 2016-09-27

进入网页设计是一系列需要时间和奉献精神的学习、实践和反复试验。

许多有抱负的开发人员不仅需要了解制作新网站页面的基础知识,还需要了解即将推出的网络技术。 这是因为快节奏的市场总是会带来越来越多的当代技术迭代,而追随它们至关重要。

在这个简短的介绍中,我们不会试图预测未来,但我们将介绍什么样的技术和工具用于为网络创建新页面的基础知识。 如果您对网页设计完全陌生,这将是一个很好的起点。 所有基本网站都需要组成一个简单页面的六个基本内容,在这里,我们将详细讨论它们是什么,它们在网站运行中的工作方式以及了解它们的重要性。

HTML5

HTML5

HTML代表超文本标记语言,它是编写所有网站的语言。 当你加载一个网页时,你的浏览器做的第一件事就是下载由特殊语法组成的网站的 HTML。 然后它会通过这种语言阅读以了解网页的内容。 来自链接、按钮、视频、动画、图片和图形的所有内容都嵌入在 HTML 中,并将告诉浏览器网页包含的内容。

一直在运行网络的 HTML 是在二十多年前引入的。 然而,当 HTML 的第四个版本(称为 HTML4)在新千年的风口浪尖被引入时,它的使用率爆炸式增长。 HTML4 改变了一切,随着 Web 开发变得更加容易,Web 浏览变得越来越流行。

但是,HTML4 仍然存在一些问题。 虽然它是一种强大的语言,但它仍然缺乏支持动画和视频流等复杂功能的能力。 为了支持这些东西,必须安装插件,这只会使用户的计算机和移动设备变慢且效率低下。 因此很快就发现需要更新版本的 HTML。

这导致了最近发布的 HTML5。 HTML5 的最大特点是它能够更有效地流式传输视频,从而节省带宽和电池寿命。 它成为大多数网站遵循的新标准,许多网站完全放弃了插件来正常运行他们的网站。 虽然仍然有一些功能只能通过插件实现,但 HTML5 几乎拥有用户希望的所有必要功能,而且它肯定会成为现在和将来用于 Web 开发的唯一语言。

CSS3

CSS3

当浏览器加载一个网页时,它通常会下载两个东西来渲染最终的网站; HTML 和 CSS。 我们已经讨论过 HTML,它是包含网页所有基本内容的语言。 但是,HTML 不包含应如何显示大多数此类信息。 例如,如果一个 HTML 告诉浏览器该页面由一个文本行组成,浏览器仍然不知道该文本应该放在哪里以及应该如何显示。 这些与网页外观相关的信息存储在一个名为 CSS 文件的单独文件中。

CSS 多年来基本相同,无论 HTML 的最新发展如何,都发布了一个名为 CSS3 的新版本来支持视频流和复杂动画。CSS 代表 Cascade Style Sheets,它只有一个目的,告诉浏览器如何呈现 HTML 和任何基本的视觉样式。 它通过在其代码中包含所有必要的信息来实现这一点,这些信息也具有独特的语法。 CSS 与 HTML 结合使用,并将所有标签和标题对齐到网站所需的样式中。 您可能已经看到缺少 CSS 会对网站造成什么影响。 有时,当您加载页面时,您只能看到文本和超链接,但它们排列不当,页面上没有颜色。 当浏览器能够成功加载页面的 HTML 而不是 CSS 时,就会发生这种情况。

jQuery

jQuery

与网站的交互性几乎总是需要成为当今网站的一项功能。 如果您的网站没有任何交互性,那么它只不过是一个公告板,几乎没有用处。 想象一下没有任何按钮的 YouTube 或 Facebook 可以轻松浏览其内容。 交互性提供了用户友好的体验,反过来又为您的网站提供了更多的吸引力和用户保留率。

为了提供交互性,大多数 Web 开发人员一直在使用 Java 和 JavaScript。 这些是与 HTML 结合使用的语言,可以使网站更加生动。 然而,这些语言,尤其是 JavaScript,既老旧又笨重。 许多开发人员认识到这一点,并要求创建一种更好的语言来让他们的生活更轻松。 这就是我们最近引入 jQuery 的原因。

简而言之,jQuery 为开发人员提供了所有必要的工具来实现具有丰富交互性的有效网站,但它的工作强度较低。 给你一些想法,一个用 JavaScript 执行的函数需要 10 行代码,但可以在 jQuery 中实现,但只需 2 行或更少。 jQuery 的明显优势在开发人员中如此受欢迎,以至于在它推出之前,超过 60% 的在线网站都使用 jQuery。

jQuery 甚至允许网络工程师处理大量后端工作,例如在数据库中检索和存储信息。 这使得许多其他数据库管理系统无用,因为 jQuery 可以处理大部分工作负载。 简而言之,jQuery 是任何 Web 开发人员的必备工具,因为它使他们的工作更轻松、更高效。

插画家

Illustrator

在您开始在网站上工作之前,通常最好先将其绘制出来,以便了解它的外观。 这可以通过多种方式完成; 您可以在纸上画出网站的草图,在电子表格上绘制网站的功能,也可以使用简单的插图工具制作整个网站界面。 其中一种既易于访问又功能强大的是 Adob​​e 制作的称为 Illustrator。

Illustrator 是一种图形设计工具,通常用于数字艺术。 但是,它的多功能性使其也可以用于其他目的,例如起草网页。 我们强烈建议任何有抱负的 Web 开发人员利用 Illustrator 的强大功能。 它不仅可以让您和您的客户更好地了解网站的外观,还可以让您使用 Dreamweaver 轻松组合网页,我们将在稍后讨论。

使用 Illustrator 与使用画板非常相似。 您可以使用多种工具来快速组合您的网站的外观。 您可以从标准模板开始,然后逐步向上。 您可以一层一层地制作,然后将它们缝合在一起以制作最终的构图。 完成后,您可以将最终图像渲染为高分辨率预览,以亲自查看网站的外观以及向他人展示。

Photoshop

Photoshop

如果您对起草网站的想法感兴趣,那么 Illustrator 并不是唯一的工具。 您可以使用的最流行的图像编辑软件莫过于 Photoshop。

我对 Photoshop 的误解是它通常只用于对照片和图形标志进行图像编辑。 但是,将 Photoshop 用于其他目的是没有限制的。 Photoshop 支持许多插件以及图像格式。 它还利用了插画家使用的图层系统,这意味着您可以在该程序上建立一个网站。

使用 Photoshop 类似于使用描图纸并将它们堆叠在一起以形成最终构图。 您应该首先为您的网站制作背景。 简单的配色方案和色调托盘应该足以为您的网站奠定基础。 接下来,您可以通过制作文本框以及应该在页面上的一些其他链接和下拉菜单来添加它。 此外,Photoshop 还允许您轻松组合自定义字体,这对于网站开发非常有用,因为您通常希望避免使用传统字体。 通过制作这些自定义字体,您可以赋予您的网站原创性以及一些急需的身份,这在几乎每个网站在某种程度上看起来都相同的世界中是必不可少的。 即使您不打算向客户显示预览,我们也强烈建议您使用 Photoshop。 在制作网站时,这是一种自我意识的好方法,并记住一张可以用作目标的图片。

织梦者

Dreamweaver

许多图形设计师现在受雇于网络开发公司,艺术专业知识对于创建一个漂亮的网站至关重要。 然而,在所有的起草和预览之后,将有时间将您漂亮的图像转移到实际的 Web 开发平台上。 如果您最终没有办法实现它们,那么制作所有这些图像和网站插图是没有用的。 这就是为什么有易于使用的网页设计套件,即 Adob​​e Dreamweaver 的原因。

Dreamweaver 是一个简单的平台,您可以使用它来构建一个漂亮的网站,同时为其提供在线运行所需的编程骨干。 它通过允许您在每次将图像粘贴到程序时轻松生成 CSS 和 HTML 片段来实现这一点。 您可以将软件视为视觉翻译器; 您告诉 Dreamweaver 您的网站应该是什么样子,作为回报,Dreamweaver 会告诉您运行它所需的代码。

然而,事情并不是那么简单。 有时,自动代码生成并不是制作网站的理想方式。 最好先贴图片草稿,然后自己写代码。 这避免了任何不必要的运行时错误,并使您更容易随时间重写和修改代码。

结论

总之,设计一个网站对于任何对它充满热情的人来说都应该是轻而易举的事,但它需要关注和渴望了解更多。 互联网提供了几种工具,让您能够制作出令人惊叹的网站,您只需要有时间和精力去那里并尽可能多地吸收。

据我们估计,一个人应该需要不超过一个月的时间来理解基本要素并获得足够的实践来组合一个基本的功能网页。 从那里开始,您需要推动自己,以使美观的网页脱颖而出。