《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.4 常见的版面布局形式...

本文主要是介绍《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.4 常见的版面布局形式...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本节书摘来自异步社区《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》一书中的第1章,第1.4节,作者: 安道通 更多章节内容可以访问云栖社区“异步社区”公众号查看。a

1.4 常见的版面布局形式

常见的网页布局形式大致有“国”字型、拐角型、框架型、封面型和Flash型布局等。

(1)“国”字型布局

“国”字型布局如图1-8所示。从图中可以看出,最上面是网站的标志、广告以及导航栏,接下来是网站的主要内容,左右分别列出一些栏目,中间是主要部分,最下部是网站的一些基本信息。这种结构是国内一些大中型网站常用的布局方式,其优点是充分利用版面、信息量大,缺点是页面显得拥挤,不够灵活。

(2)拐角型布局

拐角型结构布局如图1-9所示,页面顶部为标志+广告条,下方左面为主菜单,右面显示正文信息。这是网页设计中广泛使用的一种布局方式,一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。


b79acd46c3750169035d9d7c82b87f4e0658a6b5


3e48f4b130e38d572aebf9ba1cbb63e7a6a9b8d4

(3)框架型布局

框架型布局一般分成上下或左右布局,一栏是导航栏目,一栏是正文信息。复杂的框架结构可以将页面分成许多部分,常见的是三栏布局,如图1-10示,上边一栏放置图像广告,左边一栏显示导航栏,右边显示正文信息。


771eeb3566cf85a16d80c871382507777d8eb5f0

(4)封面型布局

封面型布局一般应用在网站的主页或广告宣传页上。此布局中,通常会为精美的图像加上简单的文字链接,指向网页中的主要栏目。图1-11所示是封面型布局的网页。


4d37bfa5706c35e7705e84c1694594ec37845aed

(5)Flash型布局

这种布局跟封面型的布局结构类似,不同的是页面采用了Flash技术,动感十足,可以大大增强页面的视觉效果。图1-12所示为Flash型网页布局。


514a47191d9a526230d80d7cfe9365300c33f633

(6)标题正文型

这种类型最上面是标题或类似的元素,下面是正文,如一些文章页面或注册页面等就是这种类型。图1-13所示为标题正文型网页布局。


6d0a9f490e486fbfae7bad275b91a0805a5837d0

这篇关于《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.4 常见的版面布局形式...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/265461

相关文章

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

MySQL常见的存储引擎和区别说明

《MySQL常见的存储引擎和区别说明》MySQL支持多种存储引擎,如InnoDB、MyISAM、MEMORY、Archive、CSV和Blackhole,每种引擎有其特点和适用场景,选择存储引擎时需根... 目录mysql常见的存储引擎和区别说明1. InnoDB2. MyISAM3. MEMORY4. A

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

通俗易懂的Java常见限流算法具体实现

《通俗易懂的Java常见限流算法具体实现》:本文主要介绍Java常见限流算法具体实现的相关资料,包括漏桶算法、令牌桶算法、Nginx限流和Redis+Lua限流的实现原理和具体步骤,并比较了它们的... 目录一、漏桶算法1.漏桶算法的思想和原理2.具体实现二、令牌桶算法1.令牌桶算法流程:2.具体实现2.1

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接(INNERJOIN)、左连接(LEFTJOIN)、右连接(RIGHTJOIN)、全外连接(FULLOUTER... 目录一、连接类型图表(ASCII 形式)二、前置代码(创建示例表)三、连接方式代码示例1. 内连接(I

Python安装时常见报错以及解决方案

《Python安装时常见报错以及解决方案》:本文主要介绍在安装Python、配置环境变量、使用pip以及运行Python脚本时常见的错误及其解决方案,文中介绍的非常详细,需要的朋友可以参考下... 目录一、安装 python 时常见报错及解决方案(一)安装包下载失败(二)权限不足二、配置环境变量时常见报错及

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加