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. 没有图片

    2010.05.07

    《月纹》

    以月纹为题作诗,这是小清同学和她老师的作品,…

  2. 没有图片

    2010.05.14

    用一个WordPress 建多个不同的博客

    用WordPress建博客的肱都知道,一个W…

  3. 没有图片

    2010.05.19

    Comsenz 核心产品 Discuz! X1正式版发布

    Discuz! X1 Beta出来不久,今天…

  4. 没有图片

    2010.06.21

    WordPress不用插件创建自定义内容类型

    小百度已经给大家介绍了通过Custom Po…

  5. 没有图片

    2010.05.14

    常用的WordPress 统计代码

    在使用Z-Blog的博主们都知道,Z-Blo…

  6. 没有图片

    2010.06.17

    WordPress日志访问统计插件:WP-PostViews

    小百度博客是用最新的Wordpress 3.…

评论

  1. air max 90 2010.11.16 4:48下午

    很详细,谢谢分享哦。。