Menu
帮助中心

帮助中心

专注网站建设12年,已为2600家公司提供网站建设
您当前所在位置:首页 > > 信息中心 > 帮助中心

网站制作技术中关于网页的宽度

网站实际上都有一个固定的宽度,比如图片是肯定有一个固定的宽度的,不可能是根据屏幕自动缩放,尽可能的兼容所有的分辨率,也只能取中间值。有些H5式的网站都是采用百分比。但图片本身是有固定宽度的,但在处理网站的宽度大小时一般都有固定的标准,专业的设计标准的,下面沛宣网络与你具体分析:

网站制作技术中关于网页的宽度



展示类型,也只有两点,即宽度适应屏幕,或者是定宽。
先说说第一种,可能有不少人已经听过响应式布局和自适应设计的大名,先不论它们有什么区别,它们代表了网页显示内容随浏览器窗口尺寸变化而变化的技术,比如使用 Bootstrap 架构的星巴克官网,更改浏览器窗口宽度后,可以得到以下不同的结果。

如果你现在还需要通过这篇内容学习网页宽度制定的情况下,我是不建议在真实项目中使用这种展示类型的。因为它们都需要对前端架构有一定的熟悉,以及对 CSS 的属性特性有基本认识,否则就无法在设计过程中直接考虑到其它分辨率下显示的效果,以及制定不同元素的自适应方式。

响应式设计的规则非常灵活,会受到更多因素的影响,完整的响应式界面设计会如上图所示,提供多种尺寸的设计图。常见的如 1920、1080、640 宽。

如果是定宽的设计,那么就回到前面所说,我们只需要以适配 1280 或 1024 的屏幕展开设计即可。但是,网页的实际内容区域,和我们要适配的范围是不同的。

在浏览器中,首先有右侧滚动条的因素影响,并且主体内容的两侧也要预留出内边距。

所以,我们真正创建的网页内容区域,是小于 1280 或者 1024 的。而得出具体的内容区域尺寸的方法,是通过网页的删格系统计算出来的。

网页删格系统是由平面网格系统衍生出来,针对网页使用的排版系统。如果稍微看过这类文章的同学都会看见一个公式:
(Axn)- i = W

这个做法就是通过将内容区域划分成若干内容块和间隔模块的方式,辅助我们排版。在本篇内容里不做具体介绍,只需要关注结果即可。
如果选择适配 1280,那么设计内容的区域宽通常为 1180、1190。而在适配 1024 下,那么内容区域宽常见的就有 950、970、990 等。当我们创建完完整分辨率的画布,再通过参考线的方式将内容区域规划出来即可。

对于网页设计来说,最重要的参数就是内容区域的宽度,但也有一些元素是例外,很多人可能发现网页有一些元素是超过正常的内容区域的(无论是对一般显示模式或是自适应模式),最常见的就是顶部的导航栏和底部的页脚区域。比如打开淘宝无论拉伸得多长,内容区域固定是 1190 宽,而导航栏却永远撑满整个浏览器。
所以,我们不会将这些内容的宽度计算在内,在设计稿中只要设计了这样的元素,和前端人员适当沟通和标注,就可以获得想要的效果。

相关阅读

汇总搜索引擎网站的免费提…

帮助中心 2009-11-15
1,Google免费网站提交入口http://www.google.com/addurl/2,百度免费网站提交入口http://www.baidu.com/se…阅读新闻

网站建设分为几个步骤?

帮助中心 2009-11-01
1.域名注册域名,是互联网上的一个企业或机构的名字,是在互联网上企业间相互联络的网络地址。一个企业如…阅读新闻

网站能干什么?

帮助中心 2009-11-01
例如一个企业在互联网上发布公司简介、新产品信息、产品说明、宣传公司服务、招聘人才等多方面信息。不仅可…阅读新闻

谷歌关闭三个工程办公室 全…

帮助中心 2009-11-01
谷歌周三表示,该公司将关闭三个工程办公室,并在全球范围内裁减约100名员工。据国外媒体报道,谷歌人力资源…阅读新闻

怎么做一个具有销售力的网…

帮助中心 2020-04-26
以房地产行业为例,如何使您的网站帮助您提高销量地产经纪是一个竞争十分激烈的行业。尤其是个体的房产经纪…阅读新闻

网站制作技术中关于网页的…

帮助中心 2020-04-24
网站实际上都有一个固定的宽度,比如图片是肯定有一个固定的宽度的,不可能是根据屏幕自动缩放,尽可能的兼…阅读新闻
返回全部新闻

最新发布

怎么做一个具有销售力的网…

帮助中心 2020-04-26
以房地产行业为例,如何使您的网站帮助您提高销量地产经纪是一个竞争十分激烈的行业。尤其是个体的房产经纪…阅读新闻

网站首页的设计制作需要注…

网站建设中心 2020-04-26
网站首页是网站设计制作中最重要的部分,一般网站就是分为首页和内页,网站首页就是网站最核心的部分,网站…阅读新闻

公司做网站怎么做需要哪些…

新闻动态 2020-04-26
公司怎么做网站?很多公司都想拥有一个只属于自己的网站,既可以方便管理还能作一个单独展示给客户观看,非…阅读新闻

网站制作设计的成本是多少…

新闻动态 2020-04-26
网站制作设计多少钱?最低的成本是多少?建设一个网站首是建设网站,就是制作网站,需要设计,策划,制作,…阅读新闻

租赁

行业建站方案 2020-04-24
租赁行业网站建设主要以业务和产品为准,或以行业为准,一般是门户网站的类型体现,比如做某一个行业的租赁…阅读新闻

签证

行业建站方案 2020-04-24
签证公司网站建设主要用于宣传,推广,提升形象,实现网络营销。一般签证公司网站制作设计都比较偏商务,一…阅读新闻

网站建设对网络营销的作用…

新闻动态 2020-04-24
网站建设是网络营销的第一步,做好一个网站是网络营销的第一步。在高端网站建设中,一旦关键词选择过于宽泛…阅读新闻

网络营销策划包含哪些内容…

新闻动态 2020-04-24
网络营销策划并不单指网站推广,也并不单是一个网上销售,所以,网络营销工作所带来的效果也是多种表现,比…阅读新闻

高端网站建设的难点在哪里…

新闻动态 2020-04-24
如今许多公司都对网站这东西刚开始放在心上了许多情况下,都会一些顾客想让自身的网站高端大气,因此高端网…阅读新闻

家电/建材行业网站建设制作…

解决方案 2020-04-24
家电网站建设制作与建材行业网站建设制作其主要目的有两个:提升品牌形象,对品牌和公司有一个辅助性的品牌…阅读新闻

高端网站建设的设计制作趋…

行业新闻 2020-04-24
高端网站建设中有一个重要的特性就是简约化设计,我们通常所说的优化就是做减法,将性能优化到机制,沛宣网…阅读新闻

网站制作技术中关于网页的…

帮助中心 2020-04-24
网站实际上都有一个固定的宽度,比如图片是肯定有一个固定的宽度的,不可能是根据屏幕自动缩放,尽可能的兼…阅读新闻
返回全部新闻
友情链接:
  • 企业网站建设
  • 营销型网站建设
  • 手机网站建设
  • 模板网站建设
  • H5网站建设
  • 网站改版升级
  • 重庆网站建设
  • 模板网站建设
  • 公司简介
  • 成功案例
  • 解决方案
  • 新闻中心
  • 联系我们
  • 网站地图
  • XML
  • 万州网站建设
  • 江津网站建设
  • 永川网站建设
  • 合川网站建设
  • 北碚网站建设
  • 黔江网站建设
  • 涪陵网站建设
  • 南川网站建设
  • 铜梁网站建设
  • 璧山网站建设
  • 大足网站建设
  • 綦江网站建设
  • 长寿网站建设
  • 开州网站建设
  • 潼南网站建设
  • 武隆网站建设
  • 奉节网站建设
  • 荣昌网站建设
  • 梁平网站建设
  • 城口网站建设
  • 云阳网站建设
  • 巫山网站建设
  • 丰都网站建设
  • 垫江网站建设
  • 秀山网站建设
  • 酉阳网站建设
  • 忠县网站建设
  • 石柱网站建设
  • 彭水网站建设
  • 巫溪网站建设
  • 万盛网站建设
  • 巴南网站建设
  • 江北网站建设
  • 南坪网站建设
  • 九龙坡网站建设
  • 沙坪坝网站建设
  • 大渡口网站建设
  • 毕节网站建设
  • 安顺网站建设
  • 六盘水网站建设
  • 铜仁网站建设
  • 黔东南网站建设
  • 黔南网站建设
  • 黔西南网站建设
  • 遵义网站建设
  • 昆明网站建设
  • 曲靖网站建设
  • 昭通网站建设
  • 绵阳网站建设
  • 自贡网站建设
  • 攀枝花网站建设
  • 玉溪网站建设
  • 保山网站建设
  • 丽江网站建设
  • 临沧网站建设
  • 大理网站建设
  • 普洱网站建设
  • 拉萨网站建设
  • 日喀则网站建设
  • 昌都网站建设
  • 林芝网站建设
  • 山南网站建设
  • 那曲网站建设
  • 阿里网站建设
  • 宝鸡网站建设
  • 汉中网站建设
  • 铜川网站建设
  • 咸阳网站建设
  • 渭南网站建设
  • 安康网站建设
  • 延安网站建设
  • 商洛网站建设
  • 榆林网站建设
  • Copyright © 2008-2018 沛宣网络 渝ICP备13000588号-5 工商备:500108000067794 渝公网安备 50010802002673号

    扫描二维码添加微信:沛宣网络
    确 认