打开一个网站,首先呈现在眼前的就是网站的布局,同时好的网页布局也可以让访客更容易在网站上找到他们所需要的信息,所以网站制作初学者应该对网页布局的相关知识有所了解。

  一、网页布局类型

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

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

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

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

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

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

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

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

 

  二、关于第一屏

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

  第一屏当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是访客的机器和浏览器是未知的。

  三、关于导航栏的位置

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

  四、什么样的布局是最好的?

  这是网页制作初学者可能会问的问题。其实这要具体情况具体分析,如果内容非常多,就要考虑用“国”字型或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;而几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;如果是一个企业网站想展示一下企业形象,封面型是首选。在实际的网站制作中,只有不断的变化才会提高,才会不断丰富我们的网页设计!

转载于:https://www.cnblogs.com/R-jia-bao/p/6508817.html

网站制作中常用的一些网页布局相关推荐

  1. 网站制作中 电脑网站与手机网站有哪些区别?

    网站制作公司在电脑网站与手机网站的制作大不相同,网站在手机和电脑PC终端浏览时,不管是在浏览器上的显现还是操作的简便方面差距都不小,这也确定了手机网站制作和电脑网站的截然不同.手机屏幕小在浏览电脑pc ...

  2. 网站制作中色彩的搭配方法

    很多用户在网站制作初期不知道如何运用格调色彩,往往在选色上琢磨不定,今天介绍一下网站制作中色彩运用原则: 一.色彩搭配原则 在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出 ...

  3. php页面开发,PHP网站开发中常用的8个小技巧

    这篇文章主要介绍了PHP网站开发中常用的8个小技巧,本文讲解了命名.使用.PHP判断Form表单是否提交.PHP 获取字符串长度.PHP超全局对象等内容,需要的朋友可以参考下 PHP是一种用于创建动态 ...

  4. web网页制作中常用到的图片格式及jpg,png,gif各自格式的特点

    网页制作中图片格式 常用三种格式(jpg,png,gif) 1jpg图片 是我们最常见的. jpg:可压缩的,有损图片质量的格式.虽然可压缩,它的色彩还是比较丰富. 特点:文件小.色彩丰富. 在网页中 ...

  5. 五种网站前端开发必学的网页布局方式?

    作为前端开发工程师,布局方式有多种,针对不同的情况有不一样的处理,但是很多初学的同学都不知道这些情况,那么我们今天就来说说,那些网站前端开发工程师不可不知的5种布局方式! 一.静态布局(static ...

  6. 移动网站开发中常用的10段JavaScript代码

    在开发移动网站过程中,有一些Javascript代码会经常用到.以下是10段常用的JavaScript代码.需要注意的是某几段代码需要jQuery mobile framework支持. 1.如果网页 ...

  7. 企业网站制作中应注意的几个问题

    现在互联网中对企业网站的要求,不仅要有展示做用还要具有引流和营销能力.所以在网站制作过程中这些问题都要规划在内.那除了这个问题需要注意在做企业站是还应该注意哪些问题呢. 1.域名所有权,这个一定要注意 ...

  8. Java AWT中常用的三种布局管理器

    文章目录 布局管理器 一.流程布局管理器(FlowLayout) 二.边界布局管理器(BorderLayout) 三 .网格布局管理器 四. 综合实例运用 布局管理器 在java.awt 包中提供了5 ...

  9. 刀剑神域动漫网页设计作品 学生表格布局网页作业成品 table漫画网站制作 dreamweaver静态HTML学生网页制作模板

    刀剑神域动漫网页设计 知识点介绍 网页制作说明 网页代码演示 导航代码 正文代码 网页效果预览 成品地址 知识点介绍 使用dreamweaver制作采用table表格布局.网页背景颜色.底部版权区域 ...

最新文章

  1. 部署教程 | ResNet原理+PyTorch复现+ONNX+TensorRT int8量化部署
  2. gitlab windows安装_gitlab pages之gitlab-runner 安装(windows)
  3. python主要是干什么用的-Python到底可以干什么?主要应用领域
  4. Linux系统vi编辑器执行命令,linux下vi编辑器命令
  5. java 生成.sh文件,Java 生成Bat或SH文件,调用Sqlldr安插数据到Oracle
  6. shell命令tree
  7. CreateProcess error = 2,系统找不到指定的文件
  8. python画一条水平直线(matplotlib)
  9. HTTP认证模式:Basic and Digest Access Authentication
  10. UnityShader11:纹理属性
  11. win10 + VS2010 + OpenCV2.4.10重编译OpenCV开发环境搭建
  12. iOS开发网络篇—发送GET和POST请求(使用NSURLSession)
  13. 摄像头实时帧率_【每日新闻】思特威全新发布130W像素全局快门图像传感器SC133GS;三星Galaxy Z Flip或仅配备12MP后置摄像头...
  14. Turbo C 2.0
  15. windows98 java_在win98下安装JSP环境
  16. 易语言模拟按键 c打不出,易语言怎么编写模拟按键
  17. 数字逻辑电路——反演规则与对偶规则
  18. Mac下载软件Motrix 下载速度为零解决办法
  19. IDEA 官方网站 http://www.jetbrains.com/idea/
  20. 也许是国内最全“智能音箱”评测,教你如何选 AI 音箱?

热门文章

  1. Redis的发布订阅(消息队列,比如ActiveMQ,一方得到数据后,多方得到信息)
  2. 利用异步I/O复制文件及详解
  3. 解决xampp启动mysql失败
  4. 数据结构期末复习(に)--链式栈定义及使用
  5. OpenCV Using Python——基于SURF特征提取和金字塔LK光流法的单目视觉三维重建 (光流、场景流)...
  6. iOS字符串常用用法
  7. 怎样写出别人无法维护的代码
  8. 那些辞职考公的程序员,最后都怎么样了?
  9. 25岁之后,你更应该逼自己系统性成长
  10. 手把手带你手写SpringMVC,剑指优秀开源框架灵魂