网页设计师的工作指导书.doc

设计师作业指导书1、 目的：为了更好的满足客户对网站页面的要求；2、 范围：适应于网页设计师的网站前台开发；3、 流程说明3.1客户提出网站设计的要求；3.2网页设计师根据客户的要求，设计页面效果图；3.4项目负责人对设计的页面进行审核，如果符合要求交给客户审核，如不符合要求，则返回给设计师重新设计；3.4 客户对设计的页面进行审核，如果符合要求，须填写版面确认书，如不符合要求，则返回给设计师重新设计；3.5 设计师把客户审核通过的效果图转换成HTML静态页面；3.6、网页设计师与后台程序员共同将完成的静态页面和后台程序进行整合。4、 PSD转HTML编码流程设计制作效果图规范4.1、 尺寸为能兼容1024*768分辨率的显示器，宽度不能超过1007像素，推荐使用950px，960px，980px。4.2、 颜色由于不同的显示器之间存在色差，设计是必须只使用218种WEB安全色。、4.3、 渐变渐变容易使图片文件体积迅速增大，避免过多过于复杂的渐变。4.4、 输出在不明显损坏图片质量时，要转换为索引颜色模式，最大限度的缩小图片体积。输出使用PNG或GIF格式。4.5、 图层相关的图层放到一个组中，每个图层和组都要有一个易于理解的名字。组可以嵌套。5、XHTML编码规范5.1、 使用过度的（Transitional）XHTML1.0DTD编写网页。每个HTML页面的基本结构必须是：无标2、 题文档 内容5.2、 CSS和JavaScript必须使用外部调用的方式。例如：5.3、 所有的标记都必须要有一个相应的结束标记。所有标签必须关闭。假如是单独不成对的标签，在标签最后加一个/来关闭它。例如：或者所有标签的元素和属性的名字都必须使用小写。所有的标签和属性都要用小写。例如：要写成onMouseOver=”要写成onmouseover=”所有的XHTML标记都必须合理嵌套。也就是说所有的标签必须对齐。例如不能出现而要是5.4、 所有的属性必须用引号括起来。必须修改为：不要在注释内容中使“”，一定要使用可用“=”代替。“”只能发生在XHTML注释的开头和结束，例如：要改为使用语义标签。每个区块的划分必须有注释。表现与结构分离，30、 代码中严格控制涉及任何的表现元素。如style、font、bgColor、border等。标签必须有alt属性。6、 CSS编码规范6.1、 总体规范6.1.1 CSS代码要按照固定格式编写，属性之间不换行。属性按照“显示属性”（display ?list-style? position? float? clear）“自身属性”（width? ?height? ?margin? padding? border? ?background ）“文本属性”（color font text-decoration text-align vertical-align white-space other text content）的顺序来编写。按照XHTML的层级来缩进CSS的定义。加强代码的结构性。如：#nav #nav #sub_nav不同的块之间要用空行或者注释隔开。编写的样式要在主流浏览器中解析正常。（正常并不要求在每种浏览器都有中都有一摸一样的样式，但要求在每种浏览器里都比较美观且相差不大。）6.2、 CSS样式表各区块用注释说明 注释的写法: /* Footer */ 内容区 /* End Footer */6.3、 CSS选择器的命名规范id和class命名采用该版块的英文单词或组合命名，要做到见名之意，单词之间采用下划线链接new_Release。注意不能采用“驼峰标识”的写法。6.4、颜色:使用颜色的名称或者16进制代码,如.red color: red; .ff8600 color: #ff8600; 字体大小,直接使用font_字体大小作为名称,如.font_12px font-size: 12px; .font_9pt font-size: 9pt; 对齐样式,使用对齐目标的英文名称,如.left float:left; .bottom float:bottom; 标题栏样式,使用类别_功能的方式命名,如.bar_news .bar_product 页面结构容器 布局 头部 尾部 侧栏 #container #layout #head、#header #foot、#footer #sidebar 左边栏 右边栏 页面主体 栏目 包装/外套 #sidebar_left #sidebar_right #main #column #wrapper、wrap 内容 #content导航导航 主导航 顶导航 左导航 右导航 #nav #main_nav #top_nav left_nav right_nav 其他左中右 上中下 按钮 面包屑 滚动 left、center、right top、middle、bottom btn bread_crumb scroll 当前： 图标 箭头 首页 二级页面 current icon arrow home_page sub_page 状态 常见问题 关键词 status faq keyword7、 CSS文件命名规范7.1 基本的样式表，每个文件都要引用的命名为： default.css。该文件用于定义整站的风格，如站点的默认字体大小，默认链接样式等。用于布局的样式表命名为：layout.css。一般分为首页布局，二级页面布局，详细页面布局等几个块，块与块之间要用注释隔开。头部，底部，导航等单独的页面模块要单独的定义一个CSS文件。名称和页面名称