网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。下面,我们就有关网页布局谈论一下。

网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。

网页设计的布局有哪几种?

1.“国”字型:

网页设计也可以称为“同”字型,是一些大型网站所喜欢的类型,即较上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,较下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多较多的一种结构类型。

2.拐角型:

这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是较上面是标题及广告,左侧是导航链接。

3.标题正文型:

这种类型即较上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。

4.左右框架型:

这是一种左右为分别两页的框架结构,一般左面是导航链接,有时较上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

5.上下框架型:

与上面类似,区别仅仅在于是一种上下分为两页的框架。

6.综合框架型:

上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

7.封面型:

这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

8.Flash型:网页设计

其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

9.变化型:网页设计

即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。

关于屏

所谓屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是较常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。

说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,屏当然要放较主要的内容,关键要知道的是,我们要对屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。

有关导航栏的位置

导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“屏”能显示出来,但是有时屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。

什么样的布局是较好的

这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是选;Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。还没有提到的就是变化型了,我只是想把这个留给读者了,因为,只有不断的变化才会提高,才会不断丰富我们的网页。

html中的布局方式,网页设计的布局方式有哪几种相关推荐

  1. 复习:前台页面设计——网页设计的布局、HTML常用的布局结构

    1.网页设计的布局 "国"字型布局: 国型布局也称为同型布局,布局结构与"国"字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或 ...

  2. 计算机网页设计布局与排版研究,论计算机网页设计的布局与排版

    王禹智 摘 要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...

  3. 【网页设计与布局】单元一

    单元测试一主要针对:[网页设计与布局]HTML知识点小结一 中小结的知识点进行测评,几乎包含了小结中的大部分知识点.具体效果如下: 提交要求:需提交PS源文件,作品压缩包,效果截图,源文件截图. 评分 ...

  4. 网页设计框架布局代码_网页设计中的分屏切割布局法

    今天和大家聊的是一种关于网页设计中的视觉呈现方法,一般我们称之为"分屏布局",是一种常见的网页设计排版方式,将页面分割为均等或者不均等的两部分,这种方式的好处就是可以将文字信息和图 ...

  5. html手机响应式布局,手机网页设计中的响应式布局

    随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...

  6. 圆形英文在html中,圆形元素在网页设计中的巧妙运用

    原标题:圆形元素在网页设计中的巧妙运用 圆形元素在网页设计中的巧妙运用 圆,是一个优雅的形状,但在优雅的同时似乎还带着一种神秘的格调.也正因为圆形元素拥有这种与生俱来的特性,所以在与其他元素合作时,一 ...

  7. css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局

    #网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...

  8. 响应式HTML网页开发,web开发中的响应式网页设计

    概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...

  9. 标记用来标识一个html文件中的表格,《网页设计与制作》期末考试试题.doc

    <网页设计与制作>期末考试试题.doc <网页设计与制作>期末考试试题 一.单项选择题(本大题共30小题,每小题2分,共60分) 1.目前在Internet上应用最为广泛的服务 ...

最新文章

  1. Python基础 模块
  2. python详细安装教程linux-Linux手动安装新版本Python教程(CentOS)
  3. 邮件实用技巧一:如何让你的邮件畅通全球
  4. TMS320C6678上电配置和FPGA复位DSP
  5. vue 自己写上传excel组件_vue结合elementui组件 el-upload 上传excel表格(二)
  6. Wintellect Collection Classes for .NET now on CodePlex
  7. 【Linux】一步一步学Linux——help命令(16)
  8. rust房屋建造蓝图_都说蓝图,而不是白图、红图,你知道为什么?
  9. 《Python编程从入门到实践》记录之列表切片
  10. CentOS7.0下NTP时间同步服务
  11. office每次打开都提示重新配置的三种解决方法
  12. Cisco思科交换机Vlan划分
  13. 数字逻辑课程设计--数字钟的设计(quartus ii)(内附源代码和实习报告以及6篇实习日志)
  14. 跨域及处理跨域的三种方式
  15. day91~93-Paas云平台_docker容器
  16. 二维码插件qrcode生成二维码信息
  17. 裸眼3D全息投影技术
  18. Android图片转换
  19. Web Service 测试
  20. K-means聚类分析-机器学习

热门文章

  1. 出租车和家用轿车的信息描述(java 作业)
  2. Acme Corporation UVA11613 网络流
  3. Java判断手机号格式
  4. 微信小程序自定义导航栏与自带下拉刷新冲突
  5. win10系统可以做服务器系统吗,win10系统可以做云盘服务器吗
  6. Androidstudio报错问题之R飘红
  7. MAC安装USB转串口驱动
  8. linux 为普通用户分配权限
  9. 这套系统,可能真的是数据分析师们未来5年的机遇!
  10. springboot+mybatis+redis整合