红色的区域 header
蓝色的区域 left_body
紫色的区域 right_body
常见的网页设计标准尺寸 网页设计标准尺寸: 网页设计标准尺寸 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 以上几种说法可能有点小的出入，大家可以探讨一下。 IAB 和 EIAA 发布新的网络广告尺寸标准 在这 6 种格式中， 除了去年 iab 发布的 4 种“通用广告包”中的格式： 160x600, 300x250, 180x150 及 728x90， 还包括新公布的 468x60 和 120x600（擎天柱）2 种。 7、内页左上，尺寸 150*60 或 300*300 8、下载地址页面，尺寸 560*60 或 468*60 9、内页底部通栏，尺寸 760*60 10、左漂浮，尺寸 80*80 或 100*100 11、右漂浮，尺寸 80*80 或 100*100
什么是网站前台？ 什么是网站前台？ 网站前台就是用户访问网站的时候可以看到的页面。 什么是网站后台？ 什么是网站后台？ 网站后台用于维护，更新网站前台的内容，对网站前台产生的信息经行及时处理或者反馈(如：购物网站的 订单，常规网站的客户留言等)。 网站前台和网站后台有什么关系？ 网站前台和网站后台有什么关系？ 网站前台把网站后台添加的信息呈现在网友面前，网站后台控制前台的内容并处理前台的信息，二者相辅 相成。 网站制作好以后怎么上传到服务器呢？下面我一步一步的教给大家。 首先下载一个网页上传工具，这里我教大家使用 flashFXP(点此下载 FlashFXP)，下载完成以后，把软件压 缩包解压(没有解压软件点此下载)，打开解压开的文件夹，运行 flashfxp.exe,如下图：
打开软件以后会叫你输入注册码，不用理会，直接点击“输入验证码”即可注册使用，软件会重启一次，之 后就看到软件的正常使用界面了。然后按 F4，在弹出的窗口点击“新建站点”，如下图：
继续，在弹出的窗口里顺便输入一个名字当做你的站点名称，如下图：
接下来输入一些必要的数据，htmwhy 提供一个 ftp 空间给大家练习使用，按下图的方式填写：
相关信息： 测试 ftp 相关信息： ip：218.6.13.71 账号：htmwhytest 密码：htmwhytest 输入这些信息以后，就可以直接链接到服务器了，网页的文件要上传到 web 目录下面，两外两个目录是一 些记录的目录，是无法上传文件的。
在左侧的窗口找到你要上传的文件，右键点击这个文件，在弹出来的菜单中选择“传送”，如下图：
这样，网页就传送到 ftp 空间里了。 --------------------------------------------------------------------------------------注： 1.各位可以把自己的文件传送进去，并通过 https://www.doczj.com/doc/d117490319.html,/你的文件名访问 。 2.空间是给大家测试的，大家可以删除里面的文件，空间只有 5MB 大，所以大家不要上传超过这个大小的 文件。 3.测试完，请把自己上传的文件删除，放别他人使用。
如何让自己的网站在百度，Google，Yahoo!等网站里可以搜索到 如何让自己的网站在百度，Google，Yahoo!等网站里可以搜索到
这个其实非常简单，只需要把自己的网站域名提交给他们就可以，下面我告诉大家这几个搜索网站的收录 提交地址去提交自己的网站吧。 百度：https://www.doczj.com/doc/d117490319.html,/search/url_submit.html Google：https://www.doczj.com/doc/d117490319.html,/addurl/?hl=zh-CN&continue=/addurl 雅虎：https://www.doczj.com/doc/d117490319.html,/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 样式定义，便组成了我们看到的网页。 下面我们先来看一张网站的效果图： 下面我们先来看一张网站的效果图：
接下来，我用颜色把网页进行划分，如下图： 接下来，我用颜色把网页进行划分，如下图：
大家可以看到我把网页用四种颜色分成了 4 个区域， 这样我们就可以写出 4 个“盒子”来把网页大致的分类。 接下来，我们把分类出来的盒子一一命名，如下图：
每个“盒子”的名字都可以用你自己喜欢的名字随便定义，但是名字不能用数字，汉子，标签符号开头，一 定要用英文字母，如果要表达一个词语的意思又怕连接在一起自己分不清楚，可以用"_"(下划线)连接两个 词，不能用空格，当然名字不一定是英文，也可以用汉语拼音，只要你自己分得清楚就可以。 给每个“盒子”命名以后，我们就可以写出 div+css 的代码了，这个很简单，如下： Html 代码 1. 2. 3. 4.
上个教程 Div+css 初级教程一：盒子理论--怎样把划分要制作的网页效果图里提到一张分类的图(下图)，图 中把网页分成不同的颜色，让各位明白 div+css 如何把网页分成不同的“盒子”，接下来我讲教大家，如何把 这张图做成一个网页。
接下来我们用 Dreamweaver(下载 Dreamweaver CS4)新建一个 html 文件，在 body 部分输入以下代码： Html 代码 1. 2. 3. 4. 5. 6. 7.
3.每一个层用图片上分好的名称命名 接下来，我们来定义这些 div 层的样式，每个样式后面我都会用注释的方式告诉大家是什么意思。 首页在
导读：本文的作者为一名资深的网页设计师，作者论述了改进网页设计的 7 个要点，并配以成功的案例， 图文并茂。 1. 学好 HTML 和 CSS 编程 这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止 你做出不合理的设计，比如那些无法用网页实现的设计。要保持与时俱进，弄清楚现什么效果可以用现在 的 CSS 技术实现，什么效果不可以。 使用 CSS3 最新技术设计的经典案例
Atebits（https://www.doczj.com/doc/d117490319.html,/）在网页文本中使用了文本阴影，这样就不需要使用图片了。它还使用了 -webkit-transform 和-webkit-transition 来向这三个图标加入了一些动画，不过这些效果只有在支持 webkit 的浏览器中才能看到，比如 Chorme 和 Safari。
Elliot Jay Stocks（https://www.doczj.com/doc/d117490319.html,/）使用了一种叫做@font-face 的 CSS3 方法来让浏览器下载 特定的字体，这就免去了使用图片的麻烦。 2. 注重细节 好的设计和伟大设计之间的距离在于是否做好细节。 优秀设计细节的例子
Metalab（https://www.doczj.com/doc/d117490319.html,/）很好的混合了着色（Shading）、渐变和阴影，为网页增加了额外 的细节。
We Follow（https://www.doczj.com/doc/d117490319.html,/）巧妙的使用了渐变和阴影，为其用户界面添加了很好的细节。 3. 善于使用留白 世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字，页面设计者这 么做的目的仅仅是想要在页面狭小的控件里放下更多的信息，但这只能给别人带来一种痛苦的体验。合理 的使用留白可以给页面中的元素以呼吸的空间，减少阅读者眼镜的压力，从而让用户有一种愉快的浏览体 验。 合理使用留白的例子
Soccernet（https://www.doczj.com/doc/d117490319.html,/news/story？id=657760sec=transferscc=5739）在他们的文章 页面中很好的使用了留白，你可以看出文字都离其它元素有一定的距离，从而提高了可读性。
Usability Post（https://www.doczj.com/doc/d117490319.html,/）使用留白的方法和 Soccernet 差不多。 4. 图片很重要 如果你有一个天才的设计，但却没有高质量的图片，那将是非常悲哀的。图片应当辅助你的设计来推销产 品或传达一定的信息，或者仅仅来吸引眼球。 精彩图片的例子
Palm（https://www.doczj.com/doc/d117490319.html,/us/products/phones/pre/）在其 Palm Pre 产品页面上使用了一幅精美的图片 来作为抬头。通过一种清新而动人的方式展示了其产品。
Tom Pojeta（http://www.pojeta.cz/）在其页面上使用了绘画图片，为其站点带来了生气。 5. 充分发挥色彩的威力
色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意，因为它可以按 照你的意愿来对用户进行一定的引导。例如，页面中的链接应当与页面正文文字的颜色有所区别，以便用 户能够认出它们是链接。 如果链接的颜色和正文的颜色差不多， 那么用户如何能注意到它们并点击它们呢？ 充分发挥色彩威力的例子
Sam Brown（http://sam.brown.tc/）在暗色背景上使用了许多种的颜色，当鼠标移动到链接上时其背景会 变成彩色，以便链接能清晰的显示。
MIX Online（https://www.doczj.com/doc/d117490319.html,/）采用了彩色的导航条，当点击一个彩色导航条以后，页面的背景色便会 变成相应的颜色。 6. 不要忘了页脚 页脚设计经常被忽视，因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多，因为它 们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。 页脚设计的例子
Jason Santa Maria（https://www.doczj.com/doc/d117490319.html,/）在其超大的页脚中放置了许多额外信息。
Web Designer Wall（https://www.doczj.com/doc/d117490319.html,/）在页脚放置了最新的发帖和最新的评论，在用户 滚动到页面底部时，这些内容也会吸引住读者。这是一种在博客网站上使用的典型设计。 7. 清晰的导航 导航栏是页面中最重要的部分，因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏，可以 提升网站的易用性，还可以减少用户在寻找自己需要的内容时遇到的麻烦。 清晰的导航的例子
Disambiguity（https://www.doczj.com/doc/d117490319.html,/）使用了标签页的方式来给用户以清晰的指示。
Dabs（https://www.doczj.com/doc/d117490319.html,/）同样使用了标签页，但同时还在页面左侧使用了侧边栏，将网站内容的子 分类予以显示，而且对不同的大类还用不同的颜色加以区分。
作者：Tom Kenny Inspect Element 的作者，现在供职于 TUI Travel 公司，进行网页设计。其 Twitter 地址 为；https://www.doczj.com/doc/d117490319.html,/tkenny（译/曹巳甲）