常见的网页设计标准尺寸.docx

常见的网页设计标准尺寸
网页设计标准尺寸:
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.各位可以把自己的文件传送进去，并通过 。
2.空间是给大家测试的，大家可以删除里面的文件，空间只有5MB大，所以大家不要上传超过这个大小的文件。
3.测试完，请把自己上传的文件删除，放别他人使用。
如何让自己的网站在百度，Google，Yahoo!等网站里可以搜索到
这个其实非常简单，只需要把自己的网站域名提交给他们就可以，下面我告诉大家这几个搜索网站的收录提交地址去提交自己的网站吧。
百度：
Google：
雅虎：
提交了以后，经过一段时间，您的网站就可以在这些搜索网站里找到了，不要小看他们，他们能给你带来不少客户和流量。
我一点都不会程序也不懂程序，也从来没有接触过程序语言，能学会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样式定义，便组成了我们看到的网页。
下面我们先来看一张网站的效果图：

接下来，我用颜色把网页进行划分，如下图：

大家可以看到我把网页用四种颜色分成了4个区域，这样我们就可以写出4个“盒子”来把网页大致的分类。
接下来，我们把分类出来的盒子一一命名，如下图：

 每个“盒子”的名字都可以用你自己喜欢的名字随便定义，但是名字不能用数字，汉子，标签符号开头，一定要用英文字母，如果要表达一个词语的意思又怕连接在一起自己分不清楚，可以用"_"(下划线)连接两个词，不能用空格，当然名字不一定是英文，也可以用汉语拼音，只要你自己分得清楚就可以。
给每个“盒子”命名以后，我们就可以写出div+css的代码了，这个很简单，如下：
Html代码
1. <div class="header">红色的区域</div>  
2. <div class="banner">绿色的区域</div>  
3. <div class="left_body">蓝色的区域</div>  
4. <div class="right_body">紫色的区域</div>  
<div class="header">红色的区域</div>
<div class="banner">绿色的区域</div>
<div class="left_body">蓝色的区域</div>
<div class="right_body">紫色的区域</div>
好啦，讲到这里“盒子”理论就基本说完了，但是把网页分成盒子以后怎么做下一步的东西，请看
Div+css初级教程二：最简单的“盒子”排版

Div+css初级教程二：最简单的“盒子”排版
上个教程Div+css初级教程一：盒子理论--怎样把划分要制作的网页效果图里提到一张分类的图(下图)，图中把网页分成不同的颜色，让各位明白div+css如何把网页分成不同的“盒子”，接下来我讲教大家，如何把这张图做成一个网页。

接下来我们用Dreamweaver(下载Dreamweaver CS4)新建一个html文件，在body部分输入以下代码：
Html代码
1. <div class="main_box">  
2.     main_box   
3.     <div class="header">红色的区域 header</div>  
4.     <div class="banner">绿色的区域 banner</div>  
5.     <div class="left_body">蓝色的区域 left_body</div>  
6.     <div class="right_body">紫色的区域 right_body</div>  
7. </div>  
<div class="main_box">
main_box
<div class="header">红色的区域 header</div>
<div class="banner">绿色的区域 banner</div>
<div class="left_body">蓝色的区域 left_body</div>
<div class="right_body">紫色的区域 right_body</div>
</div>
代码解释：
1.main_box这个div层是最外面的一个盒子,用于包住所有的其他div层
2.其他的层按图片顺序排列
3.每一个层用图片上分好的名称命名
接下来，我们来定义这些div层的样式，每个样式后面我都会用注释的方式告诉大家是什么意思。
首页在</body>这个标签(不知道什么是标签，可以参考：序言：Html语言和网站制作的关系_htmwhy教您如何制作网站)之上插入以下代码：
Css代码
1. <style>   
2. body {/*这个是定义整个body区域内的网页，前面没有小数点“.”*/   
3. background:#999;/*定义整个网页的背景颜色是#999，淡灰色*/   
4. }   
5. .main_box {/*这个是定义名为main_box的层的样式，注意前面有个小数点“.”*/   
6. background:#FFF;/*背景颜色为白色，#FFF*/   
7. padding:10px;/*上下左右的内间隙为10个像素*/   
8. width:800px;/*宽度800像素*/   
9. margin:0 auto;/*自动对齐居中*/   
10. font-size:40px;/*字体大小40个像素*/   
11. text-align:center;/*文字居中*/   
12. display:table;/*显示方式*/   
13. font-family:"黑体";/*字体：黑体*/   
14. }   
15. .header {/*这个是定义名为header的层的样式，注意前面有个小数点“.”*/   
16. background:red;/*背景颜色红色*/   
17. height:100px;/*高度100像素*/   
18. line-height:100px;/*行高100像素，当行高和高度一样的时候，单行文本会自动居中*/   
19. }   
20. .banner {/*这个是定义名为banner的层的样式，注意前面有个小数点“.”*/   
21. background:green;/*背景颜色绿色*/   
22. height:200px;/*高度200像素*/   
23. line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/   
24. }   
25. .left_body {/*这个是定义名为left_body的层的样式，注意前面有个小数点“.”*/   
26. width:500px;/*宽度500像素*/   
27. float:left;/*浮动方式，居左浮动*/   
28. line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/   
29. height:200px;/*高度200像素*/   
30. background:blue;/*背景颜色蓝色*/   
31. font-size:20px;/*文字大小20像素*/   
32. }   
33. .right_body {/*这个是定义名为right_body的层的样式，注意前面有个小数点“.”*/   
34. width:300px;/*宽度300像素*/   
35. float:right;/*浮动方式向右浮动*/   
36. background:#606;/*背景颜色#606，紫色*/   
37. line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/   
38. height:200px;/*高度200像素*/   
39. font-size:20px;/*字体大小20像素*/   
40. }   
41. </style>  
<style>
body {/*这个是定义整个body区域内的网页，前面没有小数点“.”*/
background:#999;/*定义整个网页的背景颜色是#999，淡灰色*/
}
.main_box {/*这个是定义名为main_box的层的样式，注意前面有个小数点“.”*/
background:#FFF;/*背景颜色为白色，#FFF*/
padding:10px;/*上下左右的内间隙为10个像素*/
width:800px;/*宽度800像素*/
margin:0 auto;/*自动对齐居中*/
font-size:40px;/*字体大小40个像素*/
text-align:center;/*文字居中*/
display:table;/*显示方式*/
font-family:"黑体";/*字体：黑体*/
}
.header {/*这个是定义名为header的层的样式，注意前面有个小数点“.”*/
background:red;/*背景颜色红色*/
height:100px;/*高度100像素*/
line-height:100px;/*行高100像素，当行高和高度一样的时候，单行文本会自动居中*/
}
.banner {/*这个是定义名为banner的层的样式，注意前面有个小数点“.”*/
background:green;/*背景颜色绿色*/
height:200px;/*高度200像素*/
line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/
}
.left_body {/*这个是定义名为left_body的层的样式，注意前面有个小数点“.”*/
width:500px;/*宽度500像素*/
float:left;/*浮动方式，居左浮动*/
line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/
height:200px;/*高度200像素*/
background:blue;/*背景颜色蓝色*/
font-size:20px;/*文字大小20像素*/
}
.right_body {/*这个是定义名为right_body的层的样式，注意前面有个小数点“.”*/
width:300px;/*宽度300像素*/
float:right;/*浮动方式向右浮动*/
background:#606;/*背景颜色#606，紫色*/
line-height:200px;/*行高200像素，当行高和高度一样的时候，单行文本会自动居中*/
height:200px;/*高度200像素*/
font-size:20px;/*字体大小20像素*/
}
</style>
标签<style></style>内的样式就是在定义每一对应的层的样式。
之后保存网页，按F12即可预览到网页了，点此预览制作好的网页(右键选择另存为即可下载)。
Css设置网页整体居中
先看一段代码：
Html代码
1. <style>    
2.     #layout { width:1002px; margin:0 auto; text-align:center;}   
3. </style>    
4. <div id="layout">Htmwhy</div>   
<style>
#layout { width:1002px; margin:0 auto; text-align:center;}
</style>
<div id="layout">Htmwhy</div>
代码解释：
1.宽度设置为1002像素是根据1024×768的分表率下算出来的，具体宽度可以根据自己的网页宽度设置，不用纠结于这个1002的宽度。
2.margin设置成0 auto的时候，意思就是上下间距是0，左右自动，这样一来就居中了。
3.text-align:center呢是写个IE6.0以下的浏览器看的，以上版本的不会受到影响。
注：
margin的属性按从12点位置开始，顺时针方向编写，比如上5px，右6px，下7px，左8px，可以写成：
margin:5px 6px 7px 8px; （注意中间要有空格）
如果上下的一样，左右的一样，比如上5px，右6px，下5px，左6px，可以写成：
margin:5px 6px; （注意中间要有空格）
如果全部一样，比如上5px，右5px，下5px，左5px，可以写成：
margin:5px;
七招帮你提高网页设计水平
导读：本文的作者为一名资深的网页设计师，作者论述了改进网页设计的7个要点，并配以成功的案例，图文并茂。
1. 学好HTML和CSS编程
这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计，比如那些无法用网页实现的设计。要保持与时俱进，弄清楚现什么效果可以用现在的CSS技术实现，什么效果不可以。
使用CSS3最新技术设计的经典案例

Atebits（

Elliot Jay Stocks（
2. 注重细节
好的设计和伟大设计之间的距离在于是否做好细节。
优秀设计细节的例子

Metalab（

We Follow（
3. 善于使用留白
世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字，页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息，但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间，减少阅读者眼镜的压力，从而让用户有一种愉快的浏览体验。
合理使用留白的例子

Soccernet（

Usability Post（
4. 图片很重要
如果你有一个天才的设计，但却没有高质量的图片，那将是非常悲哀的。图片应当辅助你的设计来推销产品或传达一定的信息，或者仅仅来吸引眼球。
精彩图片的例子

Palm（ Pre产品页面上使用了一幅精美的图片来作为抬头。通过一种清新而动人的方式展示了其产品。

Tom Pojeta（http://www.pojeta.cz/）在其页面上使用了绘画图片，为其站点带来了生气。
5. 充分发挥色彩的威力
色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意，因为它可以按照你的意愿来对用户进行一定的引导。例如，页面中的链接应当与页面正文文字的颜色有所区别，以便用户能够认出它们是链接。如果链接的颜色和正文的颜色差不多，那么用户如何能注意到它们并点击它们呢？
充分发挥色彩威力的例子

Sam Brown（http://sam.brown.tc/）在暗色背景上使用了许多种的颜色，当鼠标移动到链接上时其背景会变成彩色，以便链接能清晰的显示。

MIX Online（
6. 不要忘了页脚
页脚设计经常被忽视，因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多，因为它们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。
页脚设计的例子

Jason Santa Maria（

Web Designer Wall（
7. 清晰的导航
导航栏是页面中最重要的部分，因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏，可以提升网站的易用性，还可以减少用户在寻找自己需要的内容时遇到的麻烦。
清晰的导航的例子

Disambiguity（

Dabs（
作者：Tom Kenny Inspect Element的作者，现在供职于TUI Travel公司，进行网页设计。其Twitter地址为；