网站前端网页设计的结构关系

最早的网页制作，必须要负责网页设计和网页制作两种工作，随着行业的赓续向前发展，网页制作岗位和网页设计岗位开始星散开，网页制作岗位发展成了“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一样使用外部脚本文件来优化速度和性能。