网页设计标准及网页设计必备知识.doc

用心互联 用网服务网页设计标准及网页设计必备知识一、尺寸1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。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标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。二、120*60，这种广告规格主要用于做LOGO使用。三、120*90，主要应用于产品演示或大型LOGO。四、125*125，这种规格适于表现照片效果的图像广告。五、234*60，这种规格适用于框架或左右形式主页的广告链接。六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。八、88*31，主要用于网页链接，或网站小型LOGO。广告形式 像素大小 最大尺寸 备注BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K通栏 760*100 25K 静态图片或减少运动效果430*50 15K超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果巨幅广告 336*280 35K585*120竖边广告 130*300 25K全屏广告 800*600 40K 必须为静态图片，FLASH格式图文混排 各频道不同 15K弹出窗口 400*300(尽量用gif) 40KBANNER 468*60(尽量用gif) 18K悬停按钮 80*80(必须用gif) 7K流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间小于5秒60帧(1秒/12帧)网页中的广告尺寸1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*604.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*607.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*609.内页底部通栏，尺寸760*60 10.左漂浮，尺寸80*80或100*10011.右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下。IAB和EIAA发布新的网络广告尺寸标准在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160x600, 300x250, 180x150及728x90，还包括新公布的468x60 和120x600（擎天柱）2种。二、命名文件夹命名文件夹主要建立以下文件夹：1、Images 存放一些网站常用的图片；2、Css 存放一些CSS文件；3、Flash 存放一些Flash文件；4、PSD 存放一些PSD源文件；5、Temp 存放所有临时图片和其它文件；6、copyright 版权信息（可选）8、readme 说明文件Css统一命名注：本CSS命名规则只适合物table制作模式下1、 css文件统一放在css文件夹下；命名css.css2、 主样式定义：body、table、td、tr、a3、 链接样式定义：link_white（白色）；link_black (黑色)；link_blue (蓝色) 等等；说明:如有重复的后面加阿拉伯数字;如 link_red01 有下划线的如:link_red_4、 文字样式定义：font_red (红色)；font_red_14 (红色14号字)；font_red_14b (红色14号加粗)5、 边框样式定义：border_red_tblr (红色四个边)；border_red_blr(红色底左右三边)；border_red_lr(红色左右两个边)；border_red_b (红色底一个边)等等；6、 表单样式定义：text_100 (文本字段宽为100)； textarea_200_red (文本区域宽为200有红色边框)；select_100 (列表宽为100)；button_150 (按钮宽150)；说明：表单用宽度定义，在命名中最长写到：“text_100_red”7、 线的样式定义：line_X (横线)；line_Y (竖线)；line_X_red (红色横线)；line_X_red2 (两个像素的红色横线)；说明：在line中只定义虚线，实线在border中定义8、 其它样式定义：在这里主要定义一些个性化的样式；文件命名head.asp 头文件foot.asp 底文件index.asp 首页文件sort.html 分类嵌套文件article_channel.asp 文章_频道页article_list.asp 文章_列表页article_detail.asp 文章_显示页注明：如果有多个文章频道,则用article01,article02,article03等等exhibit_channel.asp 展会信息_频道页exhibit_list.asp 展会信息_列表页exhibit_detail.asp 展会信息_显示页product_channel.asp 产品中心_频道页product_list.asp 产品中心_列表页prodect_detail.asp 产品中心_显示页corporation_channel.asp 会员_频道页corporation_list.asp 会员_列表页corporation_detail.asp 会员_显示页information_channel.asp 商机信息_频道页information_list.asp 商机信息_列表页information_detail.asp 商机信息_显示页job_channel.asp 招聘_频道页job_list.asp 招聘_列表页job_detail.asp 招聘_显示页hr_channel.asp 求职_频道页hr_list.asp 求职_列表页hr_detail.asp 求职_显示页job_hr_channel.asp 人才中心_频道页job_hr_lisr.asp 人才中心_列表页job_hr_detail.asp 人才中心_显示页copyright.asp 版权页图片命名1、导航命名：menu_*.gif 如：menu_bg .gif(导航的背景图)2、会员登录：login_*.gif 如：login_bg.gif (会员登陆的背景图)3、搜索命名：search_*.gif 如：search_bg.gif (搜索的背景图)4、小 图 标：ico_数字.gif 如：ico_001.gif5、线的命名：line_X_颜色.gif 如：line_X_red.gif(红色横向虚线)说明：line只命名虚线line_Y_red.gif(红色纵向虚线)6、广告命名：ad_数字.gif 如：ad_001.gif7、其它栏目的图片：以栏目名的第一个字母_*.gif如：xwzx_bg.gif (新闻中心背景) cpzx_l.gif (产品中心的左边图)8、产品与栏目热点图片： pic_数字.gif 如：pic_001.gif说明：上、下、左、右 可以缩写为T、B、L、RCSS标准化设计命名1、类class的命名规范示例头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner2、注释的写法/* Footer */内容区/* End Footer */3、id的命名规范示例(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright4、类class的书写规范示例(1)颜色:使用颜色的名称或者16进制代码,如.red color: red; .f60 color: #f60; .ff8600 color: #ff8600; (2)字体大小,直接使用font+字体大小作为名称,如.font12px font-size: 12px; .font9pt font-size: 9pt; (3)对齐样式,使用对齐目标的英文名称,如.left float:left; .bottom float:bottom; (4)标题栏样式,使用类别+功能的方式命名,如.barnews .barproduct 5、CSS文件命名示例主要的 master.css模块 module.css