单页网站背后的科学-宁波小程序开发

成为初学者设计师的5个理由-宁波网页设计

2018年7月11日

何时使用rel =“nofollow”-宁波小程序开发

2018年7月12日

Published by nbyuyuan on 2018年7月12日

一次对我来说足够了

可以理解的是，并非所有类型的网站都非常适合“一页来统治所有网站”，但是，特别是在投资组合网站中看到的一个共同趋势表明某些网站可以从一个简单但仍然多方面的网站中受益，单页。只用一个页面创建网站的想法似乎很疯狂，但随着我们的行业转向倡导简单易用性，单页网页设计宁波小程序开发已成为一种可行且有效的选择。一次对我来说足够了

CSS Zen Garden是一个带有多层有趣位的单页的经典示例。

趋势和磨难

虽然具有多个页面的传统设计总是占有一席之地，但是有一些优势可以使单页网站为您自己的项目提供一些潜在的用途。构建一个完全独立的网站的能力有点习惯，并且需要更多的宁波小程序开发思考和计划。您需要回答的一些问题是：

单个页面是否符合项目要求或多个页面会更好？
你如何组织内容？
导航如何工作？
我需要什么内容，哪些内容可以省略？

单页网站的好处

单页设计与多页网站相比具有以下优势：

导航网站时没有页面刷新（内容在页面中或使用Ajax加载）
用户体验可以得到改善，因为浏览内容比转到新网页更快，响应更快
维护更简单，因为您只需要维护一个网页
您可以设计质量而不是数量 – 而不必为不同类型的网站内容设计宁波小程序开发多个页面布局，您可以专注于一个坚实和高品质的设计
您的Google PageRank适用于整个网站
搜索引擎蜘蛛的核心内容密度更高
与大多数其他网站的区别 ; 单页网站不太常见，因此可能会给您的网站访宁波小程序开发问者留下印象（这就是他们在投资组合网站上流行的原因）
简单的解决方案，简单的“宣传册”网站，服务于一个产品（即iPhone应用程序）或一个目的（即设计师的工作）
针对移动Web设计的Web应用程序的首选解决方案

页面加载后，没有其他内容可供下载。

单页网站的缺点

单页设计对多页网站有以下缺点：

页面的文件大小可能很大
一种要求脚本或CSS3的支持，如果你想脱颖而出
通过元素切换可能变得更加棘手（对于可访问性），因为在宁波小程序开发一个页面上可能有大量内容（尽管对于使用标题和其他最佳实践的结构良好的标记来说这不是一个大问题）
制作设计的时间更加耗时，因为它需要更多的思考和创造力才能将所有内容整合到一个页面中并设计出色的交互设计
如果您有大量内容，则加载页面可能需要更长时间

文件大小是一个需要解决的重要问题，尤其是涉及Flash的地方。事实是，无论何时实施特定的设计模式，您都无法满足所有人的需求。虽然可以使单页网站100％可访问且高度可用，但是有些情况下单个网页网站对您来说不是一个好选择。例如，像Amazon.com这样的电子商务网站由于其内容庞大而无法成功实现单页网页设计 – 这很好，因为当这些类型的网站是多个页面时，它会更好。

生产理论

在我们看一些可爱的单页设计之前，花一些时间来解释用于生成这样一个站点的各种机制。您的重点应该是保持文件大小尽可能小，以及提供和构建网页的深思熟虑的方式。考虑用户流和交互设计 – 用户如何从一个部分移动到页面的一部分？以下是单页网站中使用的一些技术。重要的是要注意它们不是互斥的，所以你可能宁波小程序开发会发现自己组合使用它们。

手动滚动

传统单页设计实现的第一种机制是显示页面上的所有内容，逻辑结构和部分布局。人们浏览内容的方式只需在其Web浏览器中使用本机滚动条即可。虽然这种方法宁波小程序开发很容易实现，因为它只是一个没有特殊交互的常规网页，但它也可能是最无聊的选项。

不需要花哨效果的网站可以轻松生成简单而美观的单页面布局。

CSS3交互

在值得一提的单页网站上浏览内容的下一个机制是CSS3。使用最新宁波小程序开发版本的CSS规范，超越现有CSS2选择器的能力可以提供更独特的单页体验。最值得注意的是，您可以通过使用动画的CSS过渡属性:target和使用:checked伪类来处理内容来处理有趣的内容。例如，使用：target伪类（与锚链接组合）的功能使您可以选择使目标部分具有不同的颜色或为其提供不同的背景图像。

https://www.webpagefx.com/blog/images/assets/downloads.sixrevisions.com/css-light-box/source.html#content

使用CSS3伪选择器，我们可以形成一个功能强大的跨浏览器“镶板”系统。

JavaScript的

最后，我们拥有良好的旧JavaScript，自网络早期以来，它宁波小程序开发一直为我们提供广泛的功能。随着像jQuery这样的Web开发JS框架的普及，交换现有页面内容的能力从未如此简单，随着Ajax的增加，根据需要调用内容具有更大的潜力，可以消除对页面刷新的需求。。但请注意，远程加载的内容存在可访问性和SEO问题。您还可以使用JavaScript动画滚动到网页的各个部分 – 从手动滚动和使用锚链接开始。例如，查看jQuery ScrollTo插件。您可以通过Laco Janic的投资组合看到平滑滚动（点击主要导航链接，如“身份和打印”或“约”）。