Higher vocational education aims at training high-skilled talents, focusing on practical and application ability of students, and serving the economical society immediately with the rules and theorems having been discovered. Education mode of CDIO injects new energy to higher education especially higher vocational education in China by its complete training concept. Web design is a kind of creative project. The design and realization process by planning-design-making-testing-publish-management meet the education mode of CDIO well. The teaching mode of Studio System takes studio as carrier, which changes traditional class teaching into a kind of open teaching facing practical application. This paper discusses and analyzes on the reform and innovation of web design teaching based on CDIO and Studio System, according to problems existed in the teaching mode of web design courses.