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。
14、所有模板在浏览器IE、Mozilla、Opera效果相同。
15、模板文件内的所有图片路径必须为相对路径。相对于“颜色”路径,例如:blue下的images下的文件,应该写为< img src=images/xxxx.gif > 而不是 < img src=blue/images/xxxx.gif >。
16、在特殊psd里有的无法容纳40 个大小W字母的时候公司名和口号字体可以缩小,但不能小于8pt。
17、模板在高度上必须要填满整屏,对于没有内容的也一样(使内容部分能够垂直的延伸)。
18、所有区域必需添加背景颜色(按照psd图进行)。
19、不能出现空格符。
20、所有属性值必须加在“ ”里面。
21、凡不成对出现的标签都要加“/”。例如:<img src=******>应该写成<img src=******/>
分享到:
相关推荐
Photoshop把PSD网站模板切图为XHTML
本文将围绕"shop-055_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一主题,深入探讨PSD模板的使用方法、设计特点以及如何将其转化为实际的前端页面。 首先,PSD格式是Adobe Photoshop软件的默认...
汽车配件psd网页模板汽车配件
本文将围绕"BL-222_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一资源,探讨PSD网页模板在网站设计过程中的重要性,以及如何通过PSD模板实现高效的前端页面制作。 首先,PSD网页模板是一种预先...
"BL-296_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这个压缩包中包含了一系列用于创建欧美日韩风格网页的设计资源,本文将深入探讨PSD模板在网页设计中的作用及其使用方法。 PSD模板是一种由...
本文将深入探讨"GR-045_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一资源包中所体现的PSD网页模板设计原理、切片技术和欧美日韩风格的前端页面特点。 1. PSD网页模板设计基础 PSD网页模板是...
本篇将围绕"GR-098_psd网页模板_网站psd效果图切片_PSD欧美日韩风格_前端页面.zip"这一资源包,探讨PSD网页模板的设计理念,以及如何将其转化为实际的前端页面。 首先,"GR-098_psd网页模板"代表了一套精心设计的...
本文将围绕"BL-245_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一主题,深入探讨PSD模板的使用方法、其在不同设计风格中的体现,以及如何将这些模板转化为实际的网页页面。 首先,PSD全称Photo...
"BL-017_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"是一个包含多个PSD文件的压缩包,这些文件代表了不同部分的网页设计,旨在为前端开发者提供一种可视化的设计参考。在本篇文章中,我们将深入...
"GR-163_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一资源集合,便是这种角色的体现,它提供了丰富的素材,便于设计师们快速创建出高质量的网页设计作品。本文将深入探讨PSD网页模板的使用、...
在IT行业中,将PSD(Photoshop Document)模型转化为XHTML和CSS文件是网页设计流程中的关键步骤。这个过程涉及到图像处理、前端开发技术以及良好的网页布局理解。下面我们将详细探讨这一过程及其相关知识点。 首先...
本篇将深入探讨"BL-148_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一资源包中所包含的PSD网页模板的应用及其相关知识点。 首先,PSD网页模板是预先设计好的网页布局,包括各种元素如导航栏、...
"GR-013_psd网页模板_网站psd效果图切片_PSD欧美日韩风格_前端页面.zip"这个压缩包,就为我们提供了一系列高质量的PSD模板资源,涵盖了欧美、日韩等多种设计风格,适用于多种类型的前端页面设计。 PSD文件是Adobe ...
《PSD网页模板与网站效果切片:理解与应用》 在互联网设计领域,PSD网页模板和网站效果切片是设计师与前端开发者之间的重要桥梁。本文将详细探讨这一主题,帮助读者理解如何利用PSD文件进行网页设计,并通过切片...
本文将深入探讨"GR-253_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这一资源包中所体现的PSD网页模板设计及其相关知识点。 一、PSD网页模板的重要性 1. 可编辑性:PSD模板提供了丰富的图层结构,...
"BL-223_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"这个压缩包,正是包含了一系列用于构建网页的PSD模板和切片文件,特别强调了欧美和日韩的设计风格。 首先,让我们来了解一下PSD网页模板。PSD...
本篇文章将围绕“GR-229_psd网页模板_网站psd效果图切片_PSD欧美日韩风格_前端页面.zip”这一主题,深入探讨PSD网页模板的设计原理、切片技术以及在前端页面制作中的应用。 首先,PSD网页模板是设计师预先创建的,...
"BL-307_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip"正是这样一个资源包,它包含了多个预设计的网页元素,旨在帮助设计师快速构建具有欧美日韩风格的前端页面。 首先,我们需要理解PSD的含义。PSD...
本篇文章将深入探讨“BL-061_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip”这一资源包所涉及的核心知识点,包括PSD模板、网站模板以及前端模板的设计与应用。 首先,PSD模板是网页设计初期的重要...
本文将深入探讨“BL-121_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip”这一资源,分析其在网页设计中的应用,并分享如何利用这些模板进行有效的前端页面制作。 首先,PSD模板是一种由Adobe Photo...