PSD to HTML工作标准

一.每个psd源图都有三种配色方案,要求按照同样规格分别切图,且三种配色切出的同一区域图片命名必需相同;
二.按照配色方案建立三个以颜色命名的文件夹,每个文件夹里面放置“配色方案”制作成网页所需的资料;
三.每种配色方案文件夹中包含的必需内容:images,css,headers,buttons文件夹和二个html文件以及两张大小网页效果图;所有命名按照样例进行,自定义内容可以自由命名。
四.网页布局,所有网页都由以下几部分组成:
页头(logo、headers)
1级导航条(buttons)
2级导航条(buttons)
页面内容区( 内容区用于显示英文网页)
页脚(底部菜单、copyright)
根据psd文件决定制作的区域,源图中绘制出的区域必需制作出来,没有的区域(有些没有2级导航条,有些没有页脚)不需要用制作。
五.第一个html文件制作要求:命名html.html
整个页面要制作在一个表格之内。
页头:
可以把header制作成背景,或者有些header图片属于不规则图形也可以切成几部分来处理,要尽量减少切割次数。
Logo区域单独制作在一个表格内(可以限定表格宽度);logo分为三部分logo图片、公司名称、公司标语;页面里公司名称需要输入40个大写W字符,公司标语也需要输入40个大写W字符;
一级导航
一级菜单(导航)中的内容必需制作在一个独立的表格内;不得设置单元格的宽度和高度;页面中必需制作六个一级菜单的项目,每个项目里面输入20个大写W字 符(可以采用6个W加一个空格的方式输入);按钮图片需要制作出超连接的三种状态变化(根据psd图,有些可能只有两种状态);每一项里的图片和文字必需 制作在一行里面可以使用br使他们产生分行显示效果。
二级导航(竖导航)
二级菜单(导航)中的内容必需制作在一个独立的表格内;不得设置表格的高度;按照样例制作;页面中必需制作10个二级菜单的项目,每个项目里面输入20个大写W字符(可以采用6个W加一个空格的方式输入);文字链接最少需要制作出超连接的二种状态变化。
页面内容区
输入足够多的英文字符使页面撑开达到(在1024×768的屏幕下使用的ie浏览器出现左右上下拉伸条)
页脚
版权信息区域输入40个大写W字符。为页面美观要于上下区域保留一定的距离。
底部菜单
二级菜单(导航)中的内容必需制作在一个独立的表格内;不得设置表格的高度;按照样例制作;页面中必需制作六个二级菜单的项目,每个项目里面输入20个大 写 W字符(可以采用6个W加一个空格的方式输入);文字链接最少需要制作出超连接的二种状态变化;为页面美观要于上下区域保留一定的距离。
六.第二个html文件制作要求:命名html2.htnl
复制第一个html文件,删除里面的部分内容,保留三个一级导航、二个二级导航(竖导航)、三个底部菜单,每项里面出现6个字符;页面内容区保留两行英文字符(不撑开页面)

七.在上述情况下两个页面要保持统一效果,背景可以实现循环;Header图片居中显示或者可以扩展(有些header区域可以制作背景)

八.公司名称,公司标语,内容区页标题,与第一级和第二级的菜单字体如应该用标准的系统字体,例如:Tahoma或者 Arial,

九.建立模板目录时,请在“工具”-〉“文件夹选项”-〉“察看” 里勾选“不缓存缩略图“的选项,这样模板zip 包内才不会包含多余的缓存文件.
十.style.css 文件不能包含任何图片连接(实例: background-image: url(‘../images/bg.gif’);),不能包含 html tags 的定义(例如css里面不应该对 进行定义如果要应用在上, 可以直接写在 html 的 标签里)
十一.html 的 charset 编码必须为 utf-8
十二.所有的(包括样式表和HTML)字体大小必须用Points(pt) 而不是像素(pixels), 最小大小为 8pt, 例如 font-size: 8pt.
十三.模板内的元素(div 等)不能使用绝对定位,也不能包含JavaScript。
十四.所有模板在浏览器IE, Mozilla, Opera效果相同
十五.模板文件内的所有图片路径必须为相对路径。相对于”颜色“路径, 例如: blue 下的 images 下的文件,应该写为 < img src=images/xxxx.gif > 而不是 < img src=blue/images/xxxx.gif >
十六.在特殊psd里有的无法容纳 40 个大小W字母的时候公司名和口号字体可以缩小, 但不能小于 8pt.
十七.模板在高度上必须要填满整屏,对于没有内容的也一样(使内容部分能够垂直的延伸)
十八.所有区域必需添加背景颜色(按照psd图进行)
十九.不能出现空格符
二十.所有属性值必须加在 “ ”里面。
二十一.凡不成对出现的标签都要加 / 例如:
应该写成< img src=****** >应该写成< img src=******/ >

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2011.01.14

    给WordPress添加Flash音乐播放器

    今天从自立博客那看到这个通过主题functi…

  2. 没有图片

    2010.09.14

    WordPress 3.0 启用多站功能教程

    WordPress 3.0的多站点模式既可以…

  3. 没有图片

    2010.09.04

    Windows 7 硬盘技术大全

    该Windows 7硬盘安装方法大全介绍了W…

  4. 没有图片

    2010.05.21

    Supesite还原出现Error: Table ‘***.[Table]settings’ doesn’t exist解决方法

    在今天蓦然对康盛创想的产品Supesite进…

  5. 没有图片

    2010.06.21

    10款漂亮免费的WordPress相册主题

    The Unstandard Demo | …

  6. 没有图片

    2010.06.10

    Dreamweaver CS5 序列号+激活办法

    小百度刚刚用HDD Installer硬盘安…

评论

  1. air max 90 2010.11.16 4:48下午

    很详细,谢谢分享哦。。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!