网页布局是指以最适合浏览的方式规划网页各组成元素在页面中的位置,包括Logo、导航栏、Banner.图片和文字等。在设计网页前应根据网站的类型、内容和风格规划好网页布局。一个没有合理布局的网页即使局部细节处理得再好,页面整体也会是一盘散沙,不便于用户浏览。
小张的某个朋友由于缺乏设计网页的经验,在设计网页时没有合理规划网页布局,导致设计的网页版式凌乱,前后风格不一,虽然某些版块设计出彩,但客户都不买账。小张决定吸取朋友的教训,好好学习一下网页布局设计。
设置网页尺寸是进行网页设计的第一步。网页尺寸是指网页的高度和宽度。网页的高度一般没有限制,可根据网页内容来灵活设置。网页宽度主要分为定宽和自适应宽度两种类型。其中,定宽是指网页内容区域(版心)的宽度固定;自适应宽度是指网页内容区域的宽度自动适应浏览器(显示器)的宽度,随浏览器的宽度而变化。
网页美工在设计网页前,应考虑页面是定宽还是自适应宽度。如果是定宽,应根据主流显示器的分辨率来设置效果图中的网页宽度。目前,主流显示器的分辨率如图3-1所示,因此,可将网页宽度设置为1920、1600、1440、1280、1140、990等像素。其中,如果要让网页显得大气并具有现代感,可将其宽度设置为1440像素以上;如果要让网页兼顾尺寸较小的显示器,则需要将其宽度设置得小一些,如990或1024等像素。
如果网页使用自适应宽度模式,可直接使用1920像素或更大的宽度设计。
上述网页宽度尺寸是含页边距细节扩展区域)的尺寸;设计网页版心时,其宽度应比上述网页宽度稍一些,以预留出页边距。例如,若网页对应的是1366X768分辨率的显示器,可将网页版心宽度设为1190像素,网页布局的类型很多,下面简要介绍一些常见布局类型。