设计编程学校前台的步骤如下：
初步布局
在纸上或电脑上画出大概的布局。考虑前台的整体结构，包括顶部导航栏、中部内容区域和底部信息栏。
细化设计
使用Photoshop（PS）等设计软件细化设计，制作成标准的图片，这将成为网页的图片素材。
切图
使用Dreamweaver（DW）等工具将设计图片中的各个装饰元素裁剪下来，然后使用DW的表格（table）或DIV标签进行拼接，以便于后续的网页开发。
编写代码
将设计转化为实际的网页代码，使用ASP.NET等服务器端技术实现控件显示，例如使用label显示文字，grid显示表格数据等。
所有样式应放在CSS文件中，每个层都要命名，通常分为上、中、下三部分，每部分使用层来实现。
实现手段多种多样，主要看具体需求，可以参考其他网站的设计，例如东方网的层结构（ABCDEFGH）。
注意事项
尽量少用table，以实现更好的网页结构和可维护性。
数据操作和网页显示应尽量分离，以便于后期的更新和维护。
可以学习jQuery等前端框架，以简化前端开发工作。
通过以上步骤，你可以完成一个编程学校前台的设计图，并将其转化为实际的网页。