夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Gulp/Grunt/webpack
PSD网页模版转化XHTML网页
夜鹰教程网 来源:www.yyjcw.com 日期:2016-11-30 19:13:24
一.每个psd源图都有三种配色方案,要求按照同样规格分别切图,且三种配色切出的同一区域图片命名必需相同;

一.每个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=******/ >

复制链接 网友评论 收藏本文 关闭此页
上一条: PhotoShop方便快捷的实用小技巧  下一条: 平面设计的7种表现手法
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
快速批量去除图片水印效果
PS插件大全介绍
PhotoShop“自由变形”工具用法
如何制作透明效果水印字
PhotoShop方便快捷的实用小技巧
如何制作建筑效果图
菜鸟谈如何学习PS
用PhotoShop将模糊人物变清晰
PSD网页模版转化XHTML网页
对png8图片格式的误解
非主流ps教程实用的几种技巧汇总
JS实现模拟FLASH幻灯片图片切换网…
平面设计的7种表现手法
AutoCAD模拟空间与图纸空间简介
图像处理技术(二)
  最近更新
gulp自动化构建详解
gulp静态站点构建项目文件结构
设计师与客户在设计开始前需要讨论…
PhotoShop方便快捷的实用小技巧
PSD网页模版转化XHTML网页
平面设计的7种表现手法
对png8图片格式的误解
用好Photoshop的手足兄弟 ImageRe…
Adobe Photoshop常见问题之专家会…
如何制作建筑效果图
PhotoImpact 图像缝合
PS插件大全介绍
Photoshop之层、通道、路径详解
图像处理技术(二)
图像处理技术(一)

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3