网页布局的几种结构

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。网页布局有以下几种常见结构:
1.“同”字型结构布局
所谓同字型就是指页面顶部为“网站标志+广告条+主菜单”或者只有主菜单,下方左侧为二级菜单栏条目,右侧为链接栏条目,中间着显示具体的内容的布局。
优点:充分利用版面,页面结构清晰,左右堆成,主次分明,信息量大;缺点:页面拥挤,太规矩呆板,细节上处理不好,很容易让人感到单调缺乏。
2.“国”字型布局
“国”字型布局是在“同”字型布局基础上演化而来的,在保留“同”字型的同时,在页面的下方增加一横条状的菜单或广告,是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明或者一些友情链接等。这种结构是在网上见到的最多的一种结构类型。
优点:充分利用版面,信息量大,与其他页面的链接切换方便;缺点:页面拥挤,四面封闭,令人感到憋气。
3.T型布局
这是一个形象的说法,是指页面的顶部是“网站标志+广告条”,左面是主菜单,右面是主要内容。优点:页面结构清晰、主次分明,是初学者最容易上手的布局方法;缺点:页面呆板,如果不注意细节上的色彩,很容易让人“看之无味”。
4.“三”字型布局
这种布局多用于国外站点,国内用得不多。特点是在页面上有横向两条色块,将页面整体分割为几部分,色块中大多放广告条、更新和版权提示。
5.对比布局
顾名思义,这种布局采用左右或者上下对比的方式:一半深色,一半浅色。一般用于设计型站点。优点:视觉冲击力强;缺点:将两部分有机地结合比较困难。
6.POP布局
POP引自广告术语,是指页面布局像一张宣传海报,一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接,甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页,如果处理得好的话,会给人
带来赏心悦目的感觉。
7.Flash布局
这种布局是指整个或大部分幅面的网页本身就是一个Flash动画,它本身就是动态的,画面一般比较绚丽、有趣,是一种比较新潮的布局方式。与封面型结构类似,只是这种类型才采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
时间: 2024-10-22 03:12:49

网页布局的几种结构的相关文章

CSS的三种网页布局模式

流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100% 流动模型(二) 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此.必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

网站制作中常用的一些网页布局

打开一个网站,首先呈现在眼前的就是网站的布局,同时好的网页布局也可以让访客更容易在网站上找到他们所需要的信息,所以网站制作初学者应该对网页布局的相关知识有所了解. 一.网页布局类型 网页布局大致可分为"国"字型.拐角型.标题正文型.左右框架型.上下框架型.综合框架型.封面型等,下面分别论述. 1. "国"字型: 也可以称为"同"字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,

(14)网页布局剖析与制作(下)

本篇学习资料主要讲解:       以变宽度的网页布局进行深入剖析,{以浏览器窗口为基准 或者 以父级div为基准}. 变宽度的布局要比固定宽度的布局复杂一些,原因是宽度不确定,导致很多参数无法确定,需要使用一些技巧来完成,下面将介绍一些通用的方法,预防未来在实际的工作中遇到具体的案列时,就可以灵活地选择解决方法. (1)1-2-1等比例变宽布局 这里先看效果图,然后再给出“ 1-2-1 等比例变宽布局布局”案例,以便大家都能现有一个感官上的认识,再往下看就会容易很多:如下图: 等比例布局图 (

比float更好的网页布局之inline-block

一:网页布局发展历程 表格布局 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说的,主要表现为以下几个方面: 1,更快的网页呈现速度: 2,更佳的后台编程支持度: 3,更好的搜索引擎友好性: 4,更优的网页修改重构性. 劣势: 1,一行盒子的高度有出入可能导致将下一行的盒子"卡住 ",像俄罗斯方块放错地方的时候被"卡住"后下面空出一块空间: 2,浮动

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

网页布局.....待更(三大阶段,预计二周内更完)

网页布局基础        简介 1.什么是网页布局       网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.       2.流式布局,浮动布局,绝对定位布局.相关知识点:标准文档流,盒子模型,float属性position属性等. W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流 特点:从上到下,从左到右输出文档内容 由块级元素和行级元素组成 块级元素:从左到右撑