通过前面篇章已经明确了html、元素、布局、样式的概念，接下来将介绍如何使用wide制作出一个目标页面。

制作页面之前，首先需要明确想制作一个什么样式的页面。思考整体框架是什么，表达的内容是什么，在脑海里形成一个目标页面的草图。在思考过程中，可以通过表1来记录头脑风暴，最终选取与所在项目最吻合的方案进行页面制作。

表1

在制作页面的详细内容之前，需要先对页面的基本信息进行配置，如配置页面的宽度样式、显示设备、可缩放性、页面标题及主题名称等信息。以此来确定该页面是在手机、电脑还是Pad等设备上应用，并根据所选设备确定宽度样式和可缩放性。下图为其操作界面：

确定好目标页面和页面信息后，可以通过wide进行布局。即已经了解了页面应该做成什么样，在页面的哪个地方应该展示哪些内容，哪些内容应该放在哪个地方以什么形式展现出来这些信息，现在通过布局来真正搭建框架，摆放所选元素，使其能够展现在网页上。

一个页面是通过布局和元素组合在一起组成的。通过添加元素，来拼装出最终展示在页面的内容、文字、图片、视频等，这些组合在一起就是用户可以在网页上看到的内容。当然，进行到这一步只是制作了一个极其普通的页面，想要美化元素、美化页面还需要借助于样式微调。如果某些元素需要自定义CSS样式，可以在定义结束后作好记录，如表2所示：

表2

应用StyleBot和CSS3 Generator工具调整元素的颜色、背景色、大小、尺寸、位置等样式，使元素的表现形式尽可能美观，达到目标效果，即为样式微调。如果想制作出丰富多彩的高质量页面，则需要在元素添加元素间的关联关系。

最后给元素添加逻辑。当某个元素具备某个条件之后，某个指定的元素会做出什么响应动作，这个是页面元素之间的关联关系，称为逻辑。通过逻辑可以在页面上添加各种丰富多彩的功能，从而达到视觉效果以及交互体验。