经过网站设计效果图，我们已经获得了网站最终的外观样子，但它仅仅是一张张的图片，没有任何功能，还不是真正意义上的网页，因此需要进行前端编码，将图片变成网页。为了获得更好的视觉交互效果及细节的动态效果，还需要进行脚本开发，使网站“灵动”起来。
通过符合W3C标准进行网页编码，使之兼容于目前绝大多数电脑端和移动端浏览器。根据网站设计效果图，对效果图中的元素进行分离，并通过HTML5和CSS3编码成为真正的网页。所有编码全部手工编制，编码结构最简化，以最大限度地降低文件的大小，从而提升网页的渲染速度（即打开速度）。编码简洁且易读，为后续可能的功能扩展、二次开发提供可能。规范化编码能够使各类文件存放整洁，html、css、js等文件分离，尽可能地整理公用文件提供给网站各页面调用，从而提升资源利用率，降低代码重复率。
没有动感的网站缺少灵动，根据不同网站的不同要求，需要在网站中适量添加不同的动画效果，从而使网站从视觉感官上看起来更加生动。这种动画不是视频、不是GIF，而是通过javascript程序实现的动态效果。由于目前几乎所有web客户端均支持javascript，因此，动态效果能够在不同平台、不同终端、不同设备上得到很好的兼容性和展示效果。随着CSS3的普遍应用，大多数动效可以在不需要javascript的介入下单纯依靠css代码就能轻易实现，当然，有的动态效果需要两者的结合应用。
普通动效
普通动效是指网页中在没有用户参与的情况下的动态效果。例如有一束光在无限循环左右摇摆，用于突出场景效果。例如电话图标在不停的振动，用于提醒用户这里可以拔打电话。主要起到点缀或突显的作用。
交互动效
交互动效需要用户参与，当用户做了某个操作后才显示出来的动效。例如当用户将鼠标放到某个按钮上时，这个按键改变颜色或者大小发生变化。例如当屏幕滚动到某个版块时，这个版块中的元素有一个上浮的动效。例如当用户提交某个表单时，从小到大慢慢显示出一个提交成功的对话框。交互动效在网站中的应用更为广泛，比如轮播广告、视频播放等。交互动画的目的是提升用户的操作体验，使操作过程不再枯燥，从而更加丰富起来。
通过网页编码与交互动效开发，使它看起来像一个真正的网页，上传到服务器后，已经可以通过IP或域名打开正常浏览了。但它仍不完整，因为缺少服务端的程序和数据库支撑，我们无法向网站中动态添加内容，无法对网站中的内容进行高效的管理，还需要完全接下来的其他步骤。尽管如此，网站建设工程进展到这一步，是一个巨大的跨越，离网站上线已经不再遥远。
