画出大概的网站布局

上节中，我们明白了接下来我们要做的事情。

磨刀不误砍柴工，我们在做一件事情之前一定要有一个大致的了解与规划，后面真正实践起来才能更加游刃有余。动手设计一个网站也是一样，我们想要把网站一步步搭建设计出来，那么就要对整个网站的整体规划布局做到心中有数，然后将自己的规划与设想一步步实现。

那么这节我们将先了解常见的网站布局和尺寸然后确定我们接下来所创建的网站的布局规划与相关尺寸。

常见的网站尺寸

网站页面的尺寸并没有一个统一的标准，一个网页的尺寸设置与浏览器以及显示器的分辨率大为相关。但是为了兼容大多数用户的浏览器和屏幕分辨率，我们会有一个大致的尺寸范围。

网页分为内容主区和背景区，内容主区的宽度一般设置为950px~1300px（像素）左右。

背景区最好是能够做到自动延伸，现在的显示器越来越大，分辨率也慢慢的变大了。背景区我们一般按照1920px的宽度来做，以适应不同的显示器。

内容主区和背景区的高度一般不做限制，可以根据我们的设计需求调整。

常见的网站布局

页面布局是网站设计最开始的工作，就像起房子先打地基，再造框架，一步步按照程序来做。

我们通过浏览不同的网站后发现，页面的布局有很多种，但其实都是大同小异，我们举出科技媒体中两种比较常见的两个：

第一种：居中型布局

这是比较简洁的一种，整个页面干净清爽，这也是目前主流电商网站大多使用的布局。

居中布局，中间的部分为有效的内容主区，用于网站内容的展示。两边均为留白，没有实际用途，只是为了适配而存在。

第二种：左右结构型布局

左右结构型布局是一些大型论坛和企业经常使用的一种布局结构，其布局由左右两侧的页面构成。左侧一般主要为导航栏链接，右侧则放置网站的主要内容。

我们所制作的网站布局与尺寸

参考一般科技媒体的网站布局和相关的尺寸以及结合我们的具体设计需求后，我们确定下接下来所要制作的网站布局与具体的尺寸:

网站布局类型：居中型

内容主区宽度：1300px

网站背景区宽度：1920px

高度：1080PX（暂定）

网站制作布局和主要尺寸草图如下所示：

网站的更清晰的布局如下：

这节课我们对网站的布局和尺寸有了一定的了解，并且确定了我们要设计的网站布局类型以及相关尺寸。接下来的课程我们会在PS里操作起来，学习如何制作一个科技类媒体网站。