网站前端网页设计的结构关系发布者：本站     时间：2020-04-25 11:04:12

最早的网页制作，需要负责网页设计和网页制作两种工作，随着行业的不断向前发展，网页制作岗位和网页设计岗位开始分离开，网页制作岗位发展成了“WEB前端开发工程师（或HTML5开发工程师）”，只负责网页的开发、代码编写方面的工作。

网站前端网页设计

而网页设计，主要负责设计网页（成品是psd版本的高保真原型图-设计图）。
对于当前的前端开发工程师（HTML5开发工程师），并不需要掌握网页设计方面的知识，但是需要掌握PS的基本知识，并能够实现网页的切图。把网页设计师提供的设计图转换为最终的网页。

在网页设计行业工作的人将web前端网站开发比作三角形金字塔，其中包括结构，风格和行为。

为什么要分层？

当您创建网页时，其结构应该降级为HTML，CSS视觉样式和脚本行为，分离层的一些好处是：

共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。

下载速度更快： 首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页面速度和性能。

多人团队： 如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。

搜索引擎优化： 一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。

辅助功能： 外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地处理结构层中的内容，而无需处理无论如何都无法使用的样式。

向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐步增强您的网站。

HTML：结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的CSS访问权限的客户。

CSS：样式层

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需要HTTP请求才能获取它，从而影响站点性能。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最常用的语言，但CGI和PHP也经常被使用。

当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。