PSD网页模版转化XHTML的一些理论知识

爱丽ysys

爱丽ysys

2016-02-19 16:34

下面图老师小编跟大家分享PSD网页模版转化XHTML的一些理论知识,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

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

  二.按照配色方案建立三个以颜色命名的文件夹,每个文件夹里面放置配色方案制作成网页所需的资料;

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

  四.网页布局,所有网页都由以下几部分组成:

  页头(Logo、headers)

  1级导航条(buttons)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  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图进行)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  十九.不能出现空格符

  二十.所有属性值必须加在 里面。

  二十一.凡不成对出现的标签都要加 / 例如:

  应该写成 img src=****** 应该写成 img src=******/

展开更多 50%)
分享

猜你喜欢

PSD网页模版转化XHTML的一些理论知识

Web开发
PSD网页模版转化XHTML的一些理论知识

《极品飞车11》汽车理论知识

电脑网络
《极品飞车11》汽车理论知识

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

一些冷冷冷知识

生活常识
一些冷冷冷知识

一些关于PHP的知识

Web开发
一些关于PHP的知识

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Photoshop巧用理论知识教您如何后期

PS PS基础
Photoshop巧用理论知识教您如何后期

做网页的一些技巧

Web开发
做网页的一些技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows 8如何禁用关闭多个选项卡的警告?

Windows 8如何禁用关闭多个选项卡的警告?

如何取得Memo的行和列

如何取得Memo的行和列
下拉加载更多内容 ↓