The purpose of this research was to design a course based on the design-based learning (DBL) model to improve undergraduates' web design skills, and to explore the differences in learning effectiveness of students with different levels of knowledge integration. The quasi-experimental design was adopted in this study. Ninety-two participants studying general education courses in a university in southern Taiwan were selected to participate in this study. The instruments included the Web Design Skills Test and the Knowledge Integration Scale. The study found that the use of the DBL strategy in teaching could improve the web design skills of the experimental group students, especially those students with insufficient web design skills in the initial stage. In addition, students with a high level of knowledge integration had better improvement in their web design skills. The implication of this research is that DBL is a suitable web design skills training strategy for students with insufficient web design skills. If students could be reminded to integrate knowledge while studying, their learning outcomes may be better.