1. 家园技术中心培训
• 主要讲题：
– 1. 网页制作流程
– 2. 相关技术
– 3. 一些相关工具推荐
– 4. 注意事项

2. 家园技术中心培训
• 1. 网页制作流程
– （ 1 ）方案讨论，画框架图 (axure)
– （ 2 ）按框架图，用 ps 做设计稿
– （ 3 ）根据设计稿，制作静态页 (div+css)
– （ 4 ） a. 静态页各浏览器调试（主要保证
IE.firefox.chrome 通过调试）
b. 后端开发

3. 家园技术中心培训
• 计算机网页设计大赛：（～ 11.19 ）
• 最终目标：完整静态页
• 意义：非常好的实际操作机会，奖品，德育分
• 时间安排：
– 一、 11.2 ～ 11.10 号左右，完成设计稿（期间工作：
讨论，框架图， 2 ～ 3 天， ps 设计稿，初版： 3 ～ 4
天，然后张怡进行指导修改）
– 二、 11.10 ～ 11.15 日，页面实现。
– 三、 11.15 ～ 11.19 日，后期修整。

4. 家园技术中心培训
• 讨论环节：（ 11.2 ～ 11.4 左右）
– 人员：全组人员参与
– 内容：网站排版规划，具体分工

5. 家园技术中心培训
• 设计环节：
– 注意事项：
– 1. 记得拉参考线
– 2. 页面中所用字体，除开头部图片文字，其他
均为宋体，抗锯齿设置为无
– 3. 多用放大缩小，页面注意精细化设计（像素
级精确要求）
– 4. 页面排版，注意考虑文字内容空间控制

6. 家园技术中心培训
• 前端静态页制作环节：
– 1. 必须用 div+css 布局
– 2. 注意 class 和 id 的命名语义化，具体命名，
可参考各大型网站
– 3. 注意 html 的头标签声明
– 4. 注意 css 样式初始化
– 5. 注意跨浏览器的调试（首先保证
firefox ， chrome 下可行）
– 6. 二级菜单实现： jquery 插件

7. 家园技术中心培训
• 后期修整
– 主要为页面调试，保证跨浏览器访问

8. 家园技术中心培训
• 推荐工具：
– 设计和切图工具 : ps
– 截图工具： FSCapture
– 设计素材网站： www.zcool.com
www.nipic.com
– 代码编辑器： notepad++
– 调试工具： firefox 插件—— firebug
– 参考文档： css 参考手册， jquery 参考手册，
资料我放群共享里

9. 家园技术中心培训
注意事项：
1. 每次申请后，可自带电脑来工作室，申请表交
站长审批
2. 工作室电脑：一个组最多限用一台
3. 时刻注意，控制进度，及早完成，及时反馈，
及时修改
4. 保持学习的心态，基础有好坏，能力有大小，
态度是一样的
5. 你们是一个团队，最后结果，我只看团队成果
，不看个人

10. 家园技术中心培训
注意事项：
1. 每次申请后，可自带电脑来工作室，申请表交
站长审批
2. 工作室电脑：一个组最多限用一台
3. 时刻注意，控制进度，及早完成，及时反馈，
及时修改
4. 保持学习的心态，基础有好坏，能力有大小，
态度是一样的
5. 你们是一个团队，最后结果，我只看团队成果
，不看个人