网页设计师需了解的HTML基础

Author: limo


设计行业的一个重要部分仍然在争论为网页设计人员编写代码的必要性。大多数设计人员认为开发人员和网页设计人员应该协作,但是每个人都应该坚持自己的专长。


许多编写代码的网页设计人员被认为是对开发人员的威胁,但他们应该被视为已经学会说他们的语言的合作者。懂得一点代码并不会使一个设计师成为一个专业的程序员,而只是一个理解开发人员观点的人。


通常,设计师关注的是“表现层”,但单独关注它就像考虑建筑物的立面一样。创意的网页设计师明白了解技术不仅能提升设计,还能提升他们的职业前景。知道如何编写代码的设计师是多学科团队的巨大财富。许多人认为专注于某项技能的人是更强的专业人士。另一方面,许多人认为,与非程序员的设计师相比,拥有多种技能的设计师具有很大的优势。在一天结束的时候,没有什么应该阻止设计师想要获得像编码这样的另一种技能。


什么是编程语言?



编码或编程就像解开一个谜题,编程语言是一种与软件交流的方式。使用这些编程语言的人被称为开发人员或程序员。编程语言告诉软件一个网页的结构和风格,或者当用户采取特定动作时如何移动一个对象。


在设计网页时,开发人员必须对网站的各个方面进行编码。为了达到预期的效果,他们必须按适当的顺序写指令。在此之后,您的web浏览器(如Safari、Chrome、Firefox等)将这些代码转换为交互式代码,以便于使用。没有浏览器,它只是一个只有程序员才能理解的文本文件。因此,当你打开一个网页时,你的浏览器会加载所有相关的编程语言,并提供一个交互式的可视化界面。要创建一个网站,图形设计师和web开发人员需要协作并决定他们要处理的部分。如果设计者了解这些编程语言,他们可以更好地可视化网站的思想。除此之外,它们还可以帮助开发人员完美地实现他们的视觉效果。


CSS和HTML在技术上不是编程语言,它们只是关于网页的样式和结构信息。HTML和CSS位于每个应用程序和web页面的前端。掌握一些由CSS和HTML驱动的前端基础知识将对设计者大有裨益。HTML代表超文本标记语言,CSS代表级联样式表(一种描述HTML文档中组件样式的语言)。设计师们会惊讶地发现,学习HTML和CSS的基础知识是多么容易。CSS和HTML不基于编程逻辑。HTML描述了一个网站的页面结构,是页面的构建块。HTML与JavaScript和CSS构成了万维网技术的基础。简单来说,HTML告诉网站显示什么,CSS告诉它如何显示。CSS是一个简单的代码结构,它决定颜色、位置、排版和尺寸。


HTML:



超文本标记语言(HTML)是设计网站的主要构件。HTML是一种基本的语言,只需要记住一些HTML命令来构建你的网页结构。它由一系列元素组成,您可以使用这些元素以某种方式显示内容。所附标签可以使单词加粗、斜体或使其更小或更大。所以,最好是把想法画出来,帮助你把你的网站视觉化。决定如何存储文件也是一个好主意,不管所有文件是否都在同一个目录中。另外,您应该考虑是否将该文件保存为.htm或.html文件。此外,还要考虑是否要为所有web页面使用相同的模板。


标记语言使用特定的代码标记内容类型,特别是HTML标记。这些标记包括段落标记、标题标记、图像标记等等。网页由这些标记组成,这些标记表示网页上的每一种内容。HTML标记包围着每种类型的内容。举个例子,如果你想用HTML写这篇文章,你可以从


开始,它表示段落的开头,而不是其他的一些内容。一旦打开标签,标签后面的内容就会被假定为标签的一部分,直到你写


来表示你想要关闭段落。开始标记和结束标记之间的区别是,只有在关闭标记时才出现正斜杠。


< p > < / p >段落内容


通过使用HTML,您可以插入图像、控制一些样式、格式化段落、创建列表、创建特殊字符、添加标题、创建链接、控制换行符、构建表、强调文本等等。


CSS:


层叠样式表(CSS)是一种编程语言,它控制网站的HTML元素并决定页面的外观。CSS允许设计师在他们的网页上做一些改变,比如添加一个全屏的英雄图像,把一个网页集中在显示窗口,在网站上使用的字体,以及使用一个伪选择器来设计交互式内容,比如表单和链接。它还有助于调整HTML元素之间的空白和边距。使用CSS,您可以可视化填充、边框和边距如何影响组件的高度和宽度。一旦你对你网站的CSS样式表做了更改,就有可能对每个页面自动进行更改。当你的网站很重要的时候,使用CSS进行改变会更容易。此外,CSS不仅节省时间,而且使你的网站风格看起来一致。


CSS用它的设计语言来分离网站的内容,这将减少文件传输的大小。CSS文档存储在外部,当用户请求您的网站时可以访问它。相反,当您使用表格时,站点上的每个页面都将在每次访问中被访问。减少带宽意味着网站加载速度更快,同时也降低了你的主机成本。CSS是一种干净的编码技术,因此搜索引擎不必费力地阅读网站的内容。


此外,CSS将减少代码,而不是增加内容,这对搜索引擎识别您的网站是至关重要的。自从谷歌Chrome推出以来,用户的浏览器比以往任何时候都多,这使得浏览器兼容性成为网站的一个大问题。CSS样式表增加了一个网站的适应性,并确保更多的用户能够以您想要的方式查看您的网站。


CSS解决的另一个主要问题是网站与不同媒体的兼容性,CSS允许您创建可以以不同的查看样式显示的相同标记页面。例如,您可以为移动设备创建单独的样式表,或者使用CSS打印。CSS具有许多优点,是web和图形设计师的明智选择。


同时使用HTML和CSS的重要性:



HTML提供了构建网站内容所需的原始工具,另一方面,CSS有助于对内容进行样式化,使其以所需的方式显示。这两种语言是分开的,以便在重新格式化之前适当地构建网站。所以HTML可能是你的网站的基本结构,但CSS给你的整个网站的风格。所有这些新的字体,光滑的颜色和背景图片都是由CSS决定的。这种语言决定了网站的语气和基调,使其成为web开发人员的必备工具。CSS还允许网站适应不同的显示尺寸和设备类型。


简单地说,CSS为HTML标记分配属性,无论它是多个标记、单个标记、整个文档还是多个文档。它的存在是因为颜色和字体的发展。Web设计人员必须努力使HTML适应这些新特性。在1990年,HTML并不是用来显示物理格式信息的。它只用于定义文档的结构。HTML超越了所有的设计特性,CSS于1996年发布和发明。然后从HTML文档中删除所有格式并以.css的形式存储在单独的文件中。


每个web浏览器都有一个默认的样式表,因此当您进入一个web页面时,每个页面至少有一个影响它的样式表。默认的样式表取决于访问者使用的是什么。例如,如果一个网站没有样式表,访问者将看到为其浏览器设置的默认样式表。但是,如果web开发人员为其网站建立了样式表,则该网站将不会显示默认的样式表。这就是CSS级联这个词发挥作用的地方。最后定义的样式表将通知访问者的浏览器哪些指令具有优先级。


了解HTML和CSS的好处:



学习编写UI代码并预览它为设计师提供了一个机会,让他们看到在不同的设备上看到的东西是什么样子。如果设计者使用HTML和CSS,他们将看到所有东西是如何以像素度量的(其他度量,如百分比和“ems”将转换为像素)。理解代码结构和大小。,网页将如何显示将给予更好的理解前端开发过程。这将使设计师对他们的设计进行实际的思考,以及如何使这个过程更有效。他们将明白什么是可以实现的,什么是具有挑战性的。


理解开发人员语言的另一个好处是能够读懂他们的想法。如果设计师和开发人员能说彼此的语言,那么他们合作设计一个网站将是最基本的。了解开发人员的思维过程和他们成功完成工作的需求将使设计师成为公司的巨大财富。这种方法对创意推销和内部沟通都很有用。如果设计师开始理解HTML和CSS,他们就能更好地向客户提出令人信服的方案。


除了通常的优势,如果你知道如何编码,工作机会就会增加,因为它使日常工作和筛选过程变得容易。基于设计的公司的招聘人员总是被混合配置文件所吸引。尤其是初创公司迫切希望找到既能在前端工作又能在设计领域工作的候选人。然而,一些开发人员和设计人员可能会看到同时具备这两种技能的人。但事实是,每个人都应该分析自己的选择,同时关注是什么增加了他们事业成功的机会。设计师不需要知道所有关于编码的知识,但是HTML和CSS的基础知识可以在您的个人资料中添加重要的区别。学习基础知识对设计师来说应该很容易。设计师知道的越多,他们就越能找到不同的工作机会。


了解基本的HTML和CSS的知识是必要的是一个进步的平面设计师在这个竞争的世界。考虑到所有这些好处,图形设计师必须学会编码在他们的职业生涯中进步。除了理解设计的实际应用之外,了解如何编码还可以增强您的创造力。你将能够在草图或Photoshop中勾画出你的设计,然后按照你想象的方式执行你的计划。另外,你不必跑到开发者那里去解决WordPress的小问题,开发者也会很乐意与你合作。因此,无论你是自由职业者还是在设计公司工作,不懂编程语言最终都会限制你,让你陷入困境。


相关阅读