常见的网页设计标准尺寸

发布时间：2020-05-26 11:33:58 来源：文档文库

小中大

字号：

手机查看

常见的网页设计标准尺寸

网页设计标准尺寸:

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了)

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右

4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象.

页面标准按800*600分辨率制作，实际尺寸为778*434px

页面长度原则上不超过3屏，宽度不超过1屏

每个标准页面为A4幅面大小，即8.5X11英寸

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px

另外120*90，120*60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

标准网页广告尺寸规格

1、120*120，这种广告规格适用于产品或新闻照片展示。

2、120*60，这种广告规格主要用于做LOGO使用。

3、120*90，主要应用于产品演示或大型LOGO。

4、125*125，这种规格适于表现照片效果的图像广告。

5、234*60，这种规格适用于框架或左右形式主页的广告链接。

6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。

7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。

8、88*31，主要用于网页链接，或网站小型LOGO。

网页中的广告尺寸

1、首页右上，尺寸120*60

2、首页顶部通栏，尺寸468*60

3、首页顶部通栏，尺寸760*60

4、首页中部通栏，尺寸580*60

5、内页顶部通栏，尺寸468*60

6、内页顶部通栏，尺寸760*60

7、内页左上，尺寸150*60或300*300

8、下载地址页面，尺寸560*60或468*60

9、内页底部通栏，尺寸760*60

10、左漂浮，尺寸80*80或100*100

11、右漂浮，尺寸80*80或100*100

以上几种说法可能有点小的出入，大家可以探讨一下。

IAB和EIAA发布新的网络广告尺寸标准

在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160x600, 300x250, 180x150及728x90，还包括新公布的468x60 和120x600（擎天柱）2种。

什么是网站前台？

网站前台就是用户访问网站的时候可以看到的页面。

什么是网站后台？

网站后台用于维护，更新网站前台的内容，对网站前台产生的信息经行及时处理或者反馈(如：购物网站的订单，常规网站的客户留言等)。

网站前台和网站后台有什么关系？

网站前台把网站后台添加的信息呈现在网友面前，网站后台控制前台的内容并处理前台的信息，二者相辅相成。

网站制作好以后怎么上传到服务器呢？下面我一步一步的教给大家。

首先下载一个网页上传工具，这里我教大家使用flashFXP(点此下载FlashFXP)，下载完成以后，把软件压缩包解压(没有解压软件点此下载)，打开解压开的文件夹，运行flashfxp.exe,如下图：

打开软件以后会叫你输入注册码，不用理会，直接点击“输入验证码”即可注册使用，软件会重启一次，之后就看到软件的正常使用界面了。然后按F4，在弹出的窗口点击“新建站点”，如下图：

继续，在弹出的窗口里顺便输入一个名字当做你的站点名称，如下图：

接下来输入一些必要的数据，htmwhy提供一个ftp空间给大家练习使用，按下图的方式填写：

测试ftp相关信息：

ip：218.6.13.71

账号：htmwhytest

密码：htmwhytest

输入这些信息以后，就可以直接链接到服务器了，网页的文件要上传到web目录下面，两外两个目录是一些记录的目录，是无法上传文件的。

在左侧的窗口找到你要上传的文件，右键点击这个文件，在弹出来的菜单中选择“传送”，如下图：

这样，网页就传送到ftp空间里了。

---------------------------------------------------------------------------------------

注：

1.各位可以把自己的文件传送进去，并通过http://ftp.ffpda.com/你的文件名访问。

2.空间是给大家测试的，大家可以删除里面的文件，空间只有5MB大，所以大家不要上传超过这个大小的文件。

3.测试完，请把自己上传的文件删除，放别他人使用。

如何让自己的网站在百度，Google，Yahoo!等网站里可以搜索到

这个其实非常简单，只需要把自己的网站域名提交给他们就可以，下面我告诉大家这几个搜索网站的收录提交地址去提交自己的网站吧。

百度：http://www.baidu.com/search/url_submit.html

Google：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

雅虎：http://search.help.cn.yahoo.com/h4_4.html

提交了以后，经过一段时间，您的网站就可以在这些搜索网站里找到了，不要小看他们，他们能给你带来不少客户和流量。

我一点都不会程序也不懂程序，也从来没有接触过程序语言，能学会DIV+CSS技术吗？

CSS层叠样式(css样式)是一块不同于程序且与程序相似的一种语言。

说他与程序相似因为它也像程序代码一样需要写且是英文一般的代码等特性。

说它不同于程序是因为CSS代码不像程序需要通过服务器解释与处理，而是直接由浏览器解释而直接呈现给浏览用户。

那如果我不懂程序能学会CSS吗？

答案非常肯定是能学会。CSS是比较有规律非常简单且容易掌握的一种语言。您只需要记住掌握这些规律那就恭喜您已经会CSS。

CSS有什么规律？

1、类的命名与调用：class与ID用法。

2、CSS属性：重点也是难点，难的是他们是英文不易于记住，但是我告诉你在CSS里用到的所有英文单词无需记住能拼写，只需要你看见能认识且记住他们的属性功能即可，了解常用的CSS英文单词。

3、会基本的html语言：解决方法就是多看别人的网页源代码总结经验，了解html基础。

DIV+CSS的学习有技巧秘诀吗？

答案没有，只有靠自己特别是不会的新手，一定一定要自己动手制作DIV+CSS（XHTML）页面（关键重要）。遇到问题要多问（问答）及多查看资料，多做笔记。

进步成为高手的关键是自己动手多制作页面、多总结、多查资料、多问。无论你买不买书不重要，重要的是自己一定一定要动手多写DIV+CSS的页面总结经验。

对于新手、学习网页如何制作及网页平面设计师来说这认识和了解DIV CSS后，可能会想我们学习DIV+CSS有什么用?那好CSS网站就给大家介绍下学习DIV+CSS好处及用处。

学习DIV+CSS好处及用处：

1、有利于SEO：学习css技术有利于SEO（搜索引擎优化）-可参见css对SEO影响。

2、可以提高找工作的机率：现在很多从事建站网络公司招聘技术人员都要求会DIV+CSS技术，可以看出DIV+CSS的页面越来越受大众重视与支持。如果一般的程序员掌握了CSS能助你提高就业竞争力。

3、网上接单：网上特别淘宝上开DIV+CSS制作店铺或威客类站接单赚钱。

4、建站自己当站长：现在网上有很多开源的网站系统源码，有网店源码、CMS内容管理系统、博客、论坛源码等如DEDECMS、PHPCMS、动易等优秀功能强大的免费的网站程序源码，只要你会DIV+CSS技术就可以制作出html页面然后插入他们出用于他们用的标签的网站CSS模板（他们都有自己的标签模板制作教程-前题您会DIV+CSS技术制作页面），就可以制作自己的网站从而自己当站长通过网站为自己增加收入。

以上只是总结了部分学习和掌握DIV+CSS技术的好处，当然不止这些好处。希望大家在评论补充我们将共同分享给没有学习目的目标的DIV+CSS好友们。

每一个网站都是由若干网页组成的，而要制作网页，首先要把网页画成一张图，当图确定下来以后，我们才进行接下来的网页代码编写工作，而怎么把一张图转换为div+css的网页，就需要用的div+css的盒子理论，所谓“盒子理论”就是无论什么样的网页，我们都把它看成是一个个的矩形组成的，不同的组合形式，再加上每个矩形自己的css样式定义，便组成了我们看到的网页。

下面我们先来看一张网站的效果图：