正在阅读：PSD网页模版转化XHTML的21条法则PSD网页模版转化XHTML的21条法则

2009-05-12 10:47 出处：PConline 作者：网页教学网责任编辑：lizhiyan

　　1、每个psd源图都有三种配色方案，要求按照同样规格分别切图，且三种配色切出的同一区域图片命名必需相同。

　　2、按照配色方案建立三个以颜色命名的文件夹，每个文件夹里面放置“配色方案”制作成网页所需的资料。

　　3、每种配色方案文件夹中包含的必需内容：images，css，headers，buttons文件夹和二个html文件以及两张大小网页效果图；所有命名按照样例进行，自定义内容可以自由命名。

　　4、网页布局，所有网页都由以下几部分组成：

　　·页头（logo、headers）

　　·1级导航条（buttons）

　　·2级导航条（buttons）

　　·页面内容区（内容区用于显示英文网页）

　　·页脚（底部菜单、copyright）

　　根据psd文件决定制作的区域，源图中绘制出的区域必需制作出来，没有的区域（有些没有2级导航条，有些没有页脚）不需要用制作。

　　5、第一个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加一个空格的方式输入）；文字链接最少需要制作出超连接的二种状态变化；为页面美观要于上下区域保留一定的距离。

　　6、第二个html文件制作要求：命名html2.html。复制第一个html文件，删除里面的部分内容，保留三个一级导航、二个二级导航（竖导航）、三个底部菜单，每项里面出现6个字符；页面内容区保留两行英文字符（不撑开页面）。

　　7、在上述情况下两个页面要保持统一效果，背景可以实现循环；Header图片居中显示或者可以扩展（有些header区域可以制作背景）。

　　8、公司名称，公司标语，内容区页标题，与第一级和第二级的菜单字体如应该用标准的系统字体，例如：Tahoma或者Arial。

　　9、建立模板目录时，请在“工具”-〉“文件夹选项”-〉“察看” 里勾选“不缓存缩略图“的选项，这样模板zip包内才不会包含多余的缓存文件。

　　10、style.css文件不能包含任何图片连接（实例: background-image: url(’../images/bg.gif’);），不能包含html tags的定义（例如css里面不应该对进行定义如果要应用在上，可以直接写在html 的标签里）。

　　11、html的charset 编码必须为utf-8。

　　12、所有的（包括样式表和HTML）字体大小必须用Points(pt) 而不是像素（pixels), 最小大小为 8pt, 例如 font-size: 8pt。

　　13、模板内的元素（div 等）不能使用绝对定位，也不能包含JavaScript。