空谷校园网专题制作技术流程及注意事项.doc

空谷校园网专题制作技术流程及注意事项（程序部分）1、 专题文件解读当你收到一个专题的时候，会是一个压缩包文件。例如2011年11月专题当你一个人面对这世界（以下举例均用此专题，且不再声明）。1、 解压缩a) 压缩后的文件夹里的文件应该包括：i. “当你一个人面对这世界（效果图）.jpg”文件是网页完成后在网站上显示的最终 效果图，但是并不是网络中心程序员完成制作专题的最终效果。所以这个文件的 意义只在于给你看个大概的效果，不能用这张图切片。 ii.“当你一个人面对这时间.jpg”文件是网络中心程序员完成制作专题的最终效 果（除了部分动态代码）。 iii.“当你一个人面对这时间.psd”文件是网络中心程序员在切片时使用的文件。 注意：前面两个jpg文件都不能用来切片，一定要用这个psd文件进行切片！iv.“说明.doc”文件是设计中心设计员在设计专题页面效果后，给制作专题的程序员看的注意事项，里面内容包括：页面字体大小，颜色等等。网络中心程序员应按照相应说明制作网页。v.“专题申请表.doc”是新闻中心或文娱中心提交的专题策划，里面的信息包括：专 题 责任编辑联系方式，编辑对专题的要求，专题文章标签（后台传文章要用），完成 时间。 2、 切片a） 用PS打开psd文件b） 添加辅助线辅助线的添加应该根据“当你一个人面对这世界（效果图）.jpg”这个效果及专题申请表及说明文档，添加辅助线的目的是方便切片。1、当psd文件打开显示的与“当你一个人面对这世界（效果图）.jpg”不同时，打开或关闭部分图层，使psd文件里显示的图片和该效果图完全一样。（方法见下“c）”）。c） 当psd文件打开显示的与“当你一个人面对这世界.jpg”不同时，我们需要把这个psd文件里与“当你一个人面对这世界.jpg”不同的地方全部去掉，才能进行切片。注意：切片只是切下我们在网页上不能用纯代码实现的图片背景，和一些特殊字体效果，所以专题里的文章列表，和滚动图片，百叶窗等都不能切。特别注意：专题底部版权部分也该去掉文字后再切片。d）去掉psd文件里多余的部分方法： 在右下角的图层框中，打开每一个文件包，找到多余部分的图层。例如去掉“属于青春的呐喊”下的三个坑爹的文章标题：在图层里找到这三个标题的图层名，点击一下图层前面的眼睛，隐藏这个图层。隐藏多余图层后的最终效果：可以看到辅助线还在刚刚的辅助线是按照里面内容来切的 例如这里是放文章标题的，等下切片的时 候就直接切这一块就好了。e）添加切片（切片思路及布局思想不在这里说明）切片完成最终效果图：f）保存切片，文件-储存为web和设备所用格式改变上图红框里的图片格式，每种图片格式有哪些去吧请自行百度。点击储存 注意：1、文件名请用英文命名 2、格式宣传仅限图像 3、切片选择所有用户切片 4、格式和切片选项可以更 改（具体作用自行百度）， 但是文件名一定要用英 文。点击保存这样就生成了一个images的文件夹，里面是你的切片。这时请不要关闭PS，保存PSD切片痕迹，最小化ps。3、 网页布局a) 打开dreamweaver。建立站点。将生成的images文件夹放入站点文件夹里。b) 用div+css网页布局方法将切片变成网页。i. 注意：凡是要在图片上加链接的地方，放入div里的应该是图片，如果需要在这个div里加上文字，则图片必须是背景，html是不能直接在背景上加链接的，大家在切片时应该充分考虑。ii. css与js文件最好外链。iii. 页面请居中，设置页面属性中的上下边距为0px。iv. 设置页面中链接属性，例如这里的设置。v. 在网页上字体选择Arial比较好看。vi. 页面版权，可以去找之前的专题copy下那里的版权html代码，然后改下名字，也可以自己写。 附代码：（复制粘贴就可以了） 专题监制：周媚燕       专题责任编辑：空谷校园网编辑部   美术设计：莫夏雯  宋敏      技术支持：周海扬 空谷简介    业务合作    友情链接    网页报错    设为首页     收藏本站 桂ICP备B2-20040022 站长信箱：    新闻投稿：xinwenkonggu.ne    娱乐网投稿： 地址：南宁市大学东路100号广西大学西校园育林楼320室      联系电话Copyright © 2000 - 2010 KONGGU.NET , All Rights Reserved   vii.凡是装图片的div和装动态代码的div都设置css中溢出属性为隐藏（具体怎么设置百度）4、 动态代码a) 在要放动态代码地方放入相应的动态代码，动态代码说明“动态代码”文件夹。b) 动态代码里的动态标签采用编辑提交的专题申请表中的文章ID命名。文章数在专题申请表也有说明。5、 上传服务器（一下内容只作为了解，不要求掌握。服务器操作需要一定权限）a) 上传工具：cuteftp（群共享有）i. Cuteftp设置：文件-站点管理器这里填服务器地址这里填服务器用户名这里填用户名的密码这里填服务器的链接端口ii.把文件上传到服务器上iii.远程登录服务器，将文件放到服务器中相对应的文件夹中iv.更改index.html文件中的图片及外链路径例如：2011yundong文件夹下的index.html的文件，index.html里的图片链接地址是src=images/bg.jpg。在服务器上必须改为src=2011yundong/images/bg.jpg。便捷方法：用查找替换。查找images/替换为2011yundong/images/。外联CSS也需要更改这样的路径。6、 在浏览器中输入http:/www.kong