描述模板的制作至少需要使用两个软件:Photoshop(或者Fireworks)、Frontpage(或者Dreamweaver)。这些软件在网上都有相关下载。
步骤一、打开Photoshop,新建一个文件,宽度设为800像素、高度设为1200像素、分辨率为72、颜色设置为RGB模式。
打开自己挑选的图片素材,然后将其添加入文件中逐个进行修改,(此处需要自己琢磨学习图片的修改了),经过修改后得到模板需要的素材图片。根据自己喜好和设计前的构思摆放和修改图片素材。
上海网络公司提醒您注意:在用PS过程中,最好不相关的文件采取新建图层操作,这样在后期上海网站建设发现不合适或者错误的时候修改起来会很顺手不会耽搁别的层。顶部图片做好后就需要改变下方主要部分的颜色,这里不推荐用图片,因为在加入描述文字或图片时,背景的图片会出现重复、叠加等问题,影响美观。所以最好采用纯色,色彩的取得可以用吸管工具从上部图片采集,这样整幅模板的色彩会相对比较和谐,我用的是图片上沙滩靠近海的颜色使整个图呈现淡蓝色,对于炎炎夏日看起来就很凉爽。过渡的地方,因为采用不同图层,可以在背景上用橡皮擦选虚化边缘的画笔并且不透明度降低一点擦出来的会显得更融合。
步骤二、进行公告、收藏等小按钮以及各个子栏目的制作。
注意:为了防止图层过多会发生混乱,所以希望大家在做模板的时候不断的将相关图层做链接,并将确定不再移动的图层锁定。在制作过程中,尽量放大来操作,并经常将比例调整到100%来观察在网页中的整体形象,字体大小等。对于后期的切片等在制作时版面设计很重要。所以一定要先打好腹稿,哪部分怎么分,切片时应该怎么合理的切等等。
步骤三、对设计好的模板进行切片处理。
注意:切片的划分原则:能大不小,能整不分,合理分布,就近合并。大家可以在尝试的时候理解一下。很多朋友说不会使用切片,在这里简单的说一下,其实并不困难,在PS里,点击切片工具,在图片上先划一个方形,就可以看到自动分配的切片,然后再进行细致的划分,点击划分的切片块如果有土黄色的控制线就是用户切片,是可以按自己需求修改大小的,在无法改动的切片上右键选择“提升到用户切片”即可进行编辑,如果发现切片的序号不相连,就证明在里面有你所没看到的重复的切片,需要放大仔细检查,期间可以运用“视图>>对齐(对齐到)>>切片”软件会自动对齐切片线,多注意切片序号。
步骤四、最后存储“文件>>存储为WEB格式”。
新建一个文件夹单独存放,包含一个HTML文件和一个images文件夹。到这里,模板制作在在PS里的“系统工程告”一段落。接着进行Dreamweaver的处理,
在DW里,大体运用到的就是表格的嵌套,背景图的设置。表格的嵌套(目前使用div标签或者css也能够实现),先给大家做个基础的介绍,不断的表格嵌套,可以达到很好的效果,如果你在做模板过程中,发现有断层现象一定是表格嵌套少了,或者限定了某些单元格的具体尺寸,导致单元格相互干扰或无法延展了。在图片中介绍的大家不一定就做到三级嵌套,你可以做到四级,五级嵌套,但是尽量不要太多,以免影响浏览速度。
步骤五、打开DW,并且打开刚才保存HTML文件、插入表格。“插入>>表格”,根据在Photoshop中的模板设计和切片考虑插入表格的行列,因为在PS里做的图片像素为800×1200所以这里只设置宽的像素值,因为我们需要模板的高度是无限延展的。所以还需要插入表格来处理。
注意:模板分了几部分就分几行(或列)。然后在第一行的表格里进行2级表格的插入,我的模板的第一部分是由两块内容组成的,所以我要先插入一个大的二级表格,再在二级表格里进行拆分两部分,这样就不会干扰其他部分的操作了,在数值方面尽量使用百分数的设置而不进行具体像素值的设置。(如果在后面操作中出现表格虚线和插入图片不吻合的情况,并且拖动也无法解决的时候,可以用宽度数值先设置单元格的宽度。然后在左边把切片作为图片插入“插入>>图像”在操作框里找到存储模板的images文件夹,选择相对应的切片。接着公告是需要插入文字的所以要作为背景插入,水平设置为默认(默认为左对齐),垂直设置为顶端。以此类推,做为固定图片都用插入图片方式,需要输入文字或者放宝贝展示图片的就用背景方式插入。需要注意的是,我的模板里的切片都要作为背景插入,这样在跟随中间的延展的时候才不会出现断裂现象,但是不要设置数值控制。
步骤六、添加按钮的连接。
很多教程介绍的都是把逛逛小店,信用评价,收藏之类的按钮每个都切开然后用链接,那也是一种方法,下面我来详细介绍给大家的是用热点工具进行链接。
点击你要进行链接的图片,在下方的属性栏里可以看到激活的热点工具,我选择的是矩形的,你可以根据自己的按钮选择圆形或者多边形。这时候鼠标变成十字型,然后根据你按钮的大小,拖出你需要的热点区,松开鼠标后,发现按钮上覆盖了网状,被覆盖的区域就是点击后可以转入链接的区域。此时看属性栏有个“链接”在这里输入你需要链接的网址。
步骤七、我们要做的就是将images文件夹里的所有图片上传到网上的图片空间(关于如何上传模板切片,这里不再多介绍了)。
步骤八、将图片的相对路径都修改为已上传的网络图片地址。这样,在DW里的工作也基本结束了。
步骤九、进行公告栏的滚动字幕的设置。
把光标指定到网页的公告栏中,转到代码模式,在公告栏的文字前后输入<marqueedirection=upscrolldlay=”30″scrollamount=”1″>和</marquee>,这样一来文字就变为自下而上滚动了。
宝贝描述模板就做好了,剩下的就是加入上屏描述图片,描述文字等信息了。
企业网上亮照