13306647218
导航
宁波软件定制
解决方案
案例
新闻
服务
联系
宁波定制软件,宁波系统开发
联系 13306647218

一站式宁波app软件定制服务

小程序开发 > 动态 >

宁波网站制作：网络排版之规则、技术和响应式设计

2019-08-16 13:25:54

宁波网站制作：网络排版之规则、技术和响应式设计

响应式Web设计不仅仅是关于列，网格，图像和图标。如果没有内容文本，所有这一切都没有意义。比尔盖茨曾经说过“ 内容为王。”

谈到内容，我们需要谈论网络排版。看看现代网页设计趋势，拥有响应式排版是每个网页设计师和网站开发人员不应错过的重要因素。

在这里，我们将讨论创建响应式Web排版和您需要了解的因素。宁波网站制作

排版基础知识

良好的排版是关于为网络或印刷媒体选择正确的类型。从字体类型，文本颜色到不同视口的长度和字体大小，良好的排版可确保最终字母形式生成最高质量的最终结果。

在我们深入了解创建成功的响应式Web排版的过程之前，您需要了解一些术语。

字体

字体脸

也称为字体系列。这是一组字符设计，包括完整的字母，数字，符号，特殊字符和重量。

字形

字形

这是实际的计算机文件，其中包含有关所用字母的信息，如字体，重量，宽度，样式等。

底线

底线

这是字母所在的位置以及下降  延伸的位置。

帽高度

帽高

这是大写字母高于基线的高度。

X-高度

x高度

也称为语料库大小。这是基线和中线之间的距离（从基线到帽高的距离的一半）

伸

伸

这是延伸到基线以下的一封信的一部分。

跟踪

也称为字母间距。这是字母间均匀增加或减少的空间。

字距

调整不同宽度字形中各个字符之间空间的过程。

领导

也称为CSS中的行高。连续线或类型的基线之间的距离。

Web排版要考虑的要点

单词，短语和句子都有意义，但每个角色都有情感。除了响应之外，您还必须考虑为您的受众提供更好的网络排版。

如果您的观众不理解或不吸引您的内容，那么完整的设计将没有意义。在网页排版中有四个基本要素：

  • 类型

  • 颜色

  • 质地

  • 图片

所有这些都会对您的排版结果产生重大影响，但类型会放大您的信息的表现力。

有五个因素可以帮助您创建可呈现的Web排版。

1.选择与您的主题对应的最佳字体

现在大多数网站都使用相同的字体。是的，你猜对了; 我说的是Arial和Helvetica。但是，如果您可以将字体与消息对齐，那将会很有意义。

例如，如果你在标题文本中使用像DK Crayon Crumble或 Little Miss Priss这样的东西，你的网页会谈到一本儿童书吗？

我并不是说你需要一直这样做，但重点是确保排版与目标受众保持一致，文字清晰可读。

2.使用网络字体

如今，网页设计的最大改进之一是通过@import命令和标准链接标记在所有现代浏览器上支持Web字体。看看下面的演示。

使用@import标签：

1
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

使用标准链接标记：

1
2
<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

这意味着您可以使用托管的Web字体网站上提供的任何字体，例如Google Font和Typekit。以下是使用Web字体的优点：

  • 它节省了资金。您无需在线购买字体。

  • 它节省了时间。虽然您可以在文件夹文件中手动集成字体，但使用Web字体可以使用一行代码完成。

  • 它们兼容所有新版本的Web浏览器，并且对SEO很友好。

3.使用正确的颜色组合

网页设计师现在提出的一个主要问题是将不必要的颜色组合投射到他们的网站上。请记住，良好的网页设计可以通过网站的功能和设计的好坏来识别。

说到设计，您不仅要随意设计网页，还要投入大量不会与您的网站文字和背景混合的颜色。这将使您的文字难以理解，并会给您的访客带来痛苦。

但是你如何使用正确的颜色组合？虽然没有一般规则，但有一些指导原则。

  • 根据W3C的建议，在文本和背景之间使用适当的对比度或区别颜色。具有相同价值但不同色调的颜色可以容易地与具有良好视力但没有色盲的人一起阅读。在将对比度应用到您的设计之前检查对比度非常重要。您可以使用这个伟大的工具来模拟对比度。

  • 如果可能，请使用平面UI颜色。这些颜色很浅，并且有很好的组合，不会对眼睛造成痛苦。有关基于Flat UI的更多信息，请访问flatuicolors.com。

4.使用文本而不是图像

众所周知，图像使网页变慢。大多数情况下，图像是强制Web浏览器显示首选字体和所需布局的唯一方法。但是这可能不起作用。使用真实文本是最好的方式，尤其是响应式网页设计。请记住，搜索引擎无法读取图像，但可以阅读文本。

5.剪切文本时使用后备文本样式

可能有一段时间您需要在图像上剪切文本以创建纹理或图像文本。这里的问题是并非所有浏览器都支持这种技术。

最好的方法是使用Paul Irish的CSS Browser Selector插件。这是一个轻量级插件，可以检测浏览器并操纵您希望在特定浏览器上显示的样式。这是如何使用这个很酷的插件。

  • 在此处下载插件，然后将其链接到您的主管部分：

1
2
<script src="css_browser_selector.js" type="text/javascript">
</script>

  • 使用要在样式表上专门更改的每个浏览器的代码设置CSS属性（id或class）。

1
2
3
4
.opera #header { margin: 20px; }
.webkit #header { margin: 30px;  }
.ie #header{ margin: 10px; }
.ff3 #header {margin: 15px; }

有关此酷插件的更多信息，请查看此站点。

响应式排版基本规则

大多数基本印刷元素都可以用CSS操作。但是，它实际上不仅仅是调整或优化每个视口上文本的大小。现在我们已经讨论了如何实现可呈现的Web排版，现在是时候讨论我们可以应用的基本基本规则，以实现更好的响应式排版。

1.使用rem而不是像素和ems

像素和ems的使用很受欢迎。虽然像素是固定的，但ems是父元素的相对单位。这意味着当您调整浏览器大小时，很难确定您需要设置的大小以实现您想要达到的输出。

更好的选择是使用rems。Rems或者也称为“ root em ”总是等于根HTML元素的字体大小，更令人兴奋的是它得到了现代浏览器的支持。

1
2
3
4
五
6
7
8
9
html{
  font-size: 16px;   // 1rem = 16px
}
h1{
  font-size: 1.9rem // 19px
}
h2{
   font-size: 1.8rem // 18px
}

在这个例子中，我定义的是16px的基本字体大小，它是另一个元素的font-size的引用。h1和h2的大小将随着视口的变化而变化。

对于早期版本的Internet Explorer，我们可以首先以px为单位指定字体大小，并定义rem单位以及我们可以在所有浏览器上使用可调整大小的文本。

1
2
3
4
五
6
7
8
9
10
11
html{
  font-size: 16px;   // 1rem = 16px
}
 
h1{
  font-size: 19px; font-size: 1.9rem;
}
 
h2{
   font-size: 18px; font-size: 1.8rem;
}

2.在不同视口上实验rem单位

既然您已经知道如何使用rem，那么您需要通过@media 查询在不同大小的屏幕上进行实验。输出将取决于字体。您还需要使用实际的字体大小，看看您是否会得到您想要的结果。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
@media (max-width: 640px) {
h1 {
    font-size:1.7rem
}
h2{
    font-size: 1.6rem
}
}
 
@media (min-width: 480) {
h1 {
    font-size:1.9rem
}
h2{
    font-size: 1.8rem
}
}

请注意，在较小的屏幕上，与较宽的屏幕相比，字体大小略大。当用户通过手机或平板电脑阅读时，这将使文本更具可读性。

3.使用CSS3伪类指定特定样式

CSS3的一个重要特性是它可以针对特定的字母，行或段落，并赋予它不同的风格。这使设计人员可以自由调整大小或调整不同大小的文本。

1
<iframe width="100%" height="300" src="http://jsfiddle.net/9g298eo1/24/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

正如您在下面的示例中看到的，我们使用以下CSS3伪类：

  • first-of-type - 选择段落标记的第一个子节点

  • first-line - 选择段落标记的第一行

  • 第一个字母 - 选择段落标记的第一个字母

4.控制你的措施

正如Robert Bringhurst所建议的那样，最理想的测量或线长约为每行45到75个字符。对于响应式网页设计，该措施并不易于控制，尤其是在较小的视口上。如果无法控制度量，则无法控制文本的易读性。

Elliot Jay Stocks有一篇很好的文章讨论了如何使用媒体查询来实现理想的线高和度量的这个主题。

使用插件

虽然有很多jQuery插件可以用于在线响应式网页排版，但最流行的是FlowType.js。这个jQuery插件计算每行的字符数，并在任何视口处设置确定行长的字体大小。

让我们仔细看看它是如何工作的。

第1步：设置排版值

开始为FlowType.js添加CSS基本设置。

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p{
   font-size: 1em;
   line-height: 1em;
}

FlowType.js将使用这些值，并在视口调整大小时更改每个值。通过设置字体大小和行高，您可以在禁用JavaScript时访问和设置网页。

第2步：将FlowType.js链接到您的头部

下载FlowType.js并将其包含在html文档的head部分中。

1
<script src="flowtype.jQuery.js"></script>

第3步：调用FlowType.js

激活FlowType.js，我们只需要在结束</ body>  标记之前添加以下代码。

1
2
3
4
五
<script>
$(function () {
    $('body').flowtype();
});
</script>

第4步：自定义FlowType.js设置

默认情况下，FlowType.js有一些值，但是您可以将它们调整为您希望设置的设置。要做到这一点，您只需要在jQuery代码中包含一些其他选项。

1
2
3
4
五
6
7
8
$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

除了flowtype.js之外，还有一些其他jQuery插件可能有助于创建响应式Web排版。看看下面的jQuery插件：

  • FitText - 一个jQuery插件，使字体大小灵活，使文本和标题流畅或响应。

  • js - 激进网页排版的绝佳插件。它有助于在一行jQuery代码中控制文本的字距调整。

  • 响应措施 - 一种简单的脚本，使您能够为容器的文本创建理想的度量。

下一步是什么？

响应式设计正变得越来越先进。我们可能认为图像，布局和网格是重要的。但是，我们不能忘记内容或文本是人和搜索引擎所读取的内容。

就像在布局和图像上投入精力一样，您还必须在文本的显示方式上付出一些努力。毕竟最重要的是，您的文本是可读的，易于理解的，并且在所有视口中都很容易看到。

宁波网站制作

随机推荐