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.16

    中国人对立的处世态度

    许多人头脑中都装有两套处世系统,既尊崇“威武…

  3. 2017.04.25

    苹果版 Office 办公软件 iWork / iMovie / Garageband 等应用全部免费

    iWork 办公套件是 Apple(苹果)公…

  4. 没有图片

    2011.03.29

    参与2011地球一小时环保活动 居然得到了证书 激动啊!

    前几天参加了全球最强大的环保组织地球一小时的…

  5. 没有图片

    2010.06.21

    Custom Post Type UI创建WordPress自定义内容类型

    自从Wordpress 2.9以后的版本,W…

  6. 没有图片

    2010.06.01

    与众不同的404页面

    大家在打开见面而页面又不存在的时候,就会出现…

评论

  1. air max 90 2010.11.16 4:48下午

    很详细,谢谢分享哦。。

About

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