网站建设者如何做好HTML页面布局?
来源:合肥星柚网络 | 作者:xingyouwangluo | 发布时间: 2020-04-25 | 1699 次浏览 | 分享到:
网页布局是网页设计和制作的基础。根据一定的规则,图像、文本、视频等页面元素排列在最佳位置。在设计网页之前,我们需要对网页的布局做一个整体规划,即确定网页中包含的网站标志、导航栏、菜单等元素的位置。一般来说,重要的因素应该放在突出的位置。网页布局大致可分为“国家”型、“工厂”型、“三”型、标题正文型、框架型、封面型和flash型。
网页布局是网页设计和制作的基础。根据一定的规则,图像、文本、视频等页面元素排列在最佳位置。
在设计网页之前,我们需要对网页的布局做一个整体规划,即确定网页中包含的网站标志、导航栏、菜单等元素的位置。一般来说,重要的因素应该放在突出的位置。网页布局大致可分为“国家”型、“工厂”型、“三”型、标题正文型、框架型、封面型和flash型。
根据HTML页面布局设计的概念,页面布局可以分为六个区域,分别是:
① 网站标识所在区域;
② 网站主菜单区;
③ 横幅所在区域;
④ 网站课程分类所在区域;
⑤ 网站的主体区域向客户传递信息;
⑥ 网站的版权区域。
通过以上环节的设计,网站的规划布局基本完成。
网页布局的基本思
网页设计最重要的目标是对网页进行分割和组织,传递重要信息,使网页易于阅读,具有更强的亲和力和可用性。我们可以把网页中的内存看作一个“长方体块”,用行和列的方式组织多个“长方体”组成一个网页。
Div+CSS布局
Div是web页面布局中最常用的框。目前,div+CSS是一种有效的定位和布局方法。该方法灵活,操作方便,功能强大。它在网页布局中的应用越来越多。
Div是HTML语言中的一个标记,它是一个常用的块容器元素;CSS是一种用于表示HTML元素样式的计算机语言。Div元素用于阻止页面内容,而CSS控制这些块。
当然,这并不是说布局只能使用div+CSS。广义上讲,应该是“box+CSS”。Div只是布局中最常用的框。HTML5中新的结构标签是<header>,<footer>,<NAV>,<aside>,<section>等等,它们是非常实用的布局框。
使用div阻止页面
首先,考虑如何使用div将其作为一个整体来屏蔽,也就是说,网页需要分成几个部分,每个部分显示的主要内容或功能。
网页布局通常可以采用上、中、下结构、左右结构或三列结构。例如,使用上、中、下三种结构,可以先将页面分成三个块,自上而下排列成页眉块、主块和页脚块,这些块放在父div中,便于整体调整和后期的排版维护,最后调整包含的子块的数量和布局根据具体内容分块。
网页布局规划完成后,页面布局设计通常从主页面结构和内容设计开始。网站前端开发人员可以使用Photoshop完成版面设计、网页图像处理和版面设计,并使用网页制作工具dremweaver完成网页的具体内容设计。