企业信息门户页面编码手册.doc

门户页面编码手册
沈阳易科网络有限公司
2004年3月
目录
第1章 概述 1
目的 1
对象 1
范围 1
第2章 工作及工具 2
第3章 图片剪裁 3
概述 3
裁剪流程 3
裁剪中的注意事项 6
第4章 制作静态网页 8
准备工作 8
制作流程 8
网页制作中注意事项 13
概述
目的
本手册对门户的设计开发风格进行了规范说明,门户设计者应参看本手册。
页面编码是将界面设计师开发制作的用户界面剪切为一系列图形或图标并按需求生成静态的HTML文件,供定制开发使用
对象
所有门户设计开发者。
范围
适用于门户的设计开发及门户定制组。
工作及工具
页面编码工作可分为两步:
图片的剪裁
静态网页的制作
要完成并实现页面编码工作需要有相应的软件,对于裁剪来说需要Photoshop 2004,而对于页面制作则需要Dreamwaver2004。
其工作流程如下图:
图片剪裁
概述
图片的剪裁目的是将整幅图形文档经过分割裁剪转换成网页能使用的图片文件。
推荐使用的软件是:Firework2004
裁剪流程
打开设计师制作好的平面图()。
用辅助线将整张平面图分为上中下三部分,整个图片的宽度为760像素,所以在剪切的时候最大图片的宽度不能超过该值。
注:根据门户的规范性要求,所有门户的设计都必须符合上中下三个整体部分的规范。
将上部分成成两行,导航条为一行,LOGO图片与部门文字标题为一行。将中部分成三列,左右两边的宽度分别为150像素。下部为共享版块,若以有门户则可共享已完成门户的Webpart。
为了确保可以正确的嵌套程序,中间部分在剪切的时候需要将每一个栏目都要剪切成独立的图片。每个栏目分为标题图,背景两部分。标题图和背景即为下图的a和b 。在中间部分的图片裁切过程中要做到散而不乱!
将图片上的文字内容隐藏或删除,以便于裁切到完整的背景。
用切片工具按照划分好的区域进行勾画。将在Firework软件勾画好切片的文件以*.png格式存储,方便制作过程中的局部图片的
修改。
勾画完毕后进行切片导出,一个完整的平面图即按我们划分的区域被分割成数个局部图片。在图片导出时的文件名设置时,请将图片的文件名命名为本门户的英文缩写或拼音的缩写,这样便于识别图片的来源。
图片导出的格式基本为两种:*.jpg 或*.gif 。在以单色为主的图片中采用*.gif 格式导出。在以虚化及渐变图案为主的图片中采用*.jpg 格式导出。
将图片存放到指定的目录中,整个图片裁切的过程结束。
裁剪中的注意事项
将“门户网站”的LOGO与背景分离。
在裁切各种背景的时候将文字图层隐藏或删除。
裁切过程中严格遵守规定的尺寸。
保证每个档目的独立性。
制作静态网页
静态网页的制作就是将已经裁切好的图片生成Web(html)文件的过程。在制作时推荐使用:Dreamwerver
准备工作
首先要创建一个目录,以门户的英文缩写或拼音缩写命名。在此目录下建立image子目录,将裁切好的*.jpg 或*.gif 图片存放到img目录下。
制作流程
建立一个新的html文