行動網頁設計課程融入PBL創新研究與實踐

近年來，行動網路及無線網路環境技術成熟，人們使用行動裝置上網比例超越了桌上型電腦，在行動裝置快速成長與多樣化的情況下，如何讓訪客在使用各種不同裝置瀏覽網站時，有更佳瀏覽效果與停留在網頁中的意願，更是一大挑戰。由此可知，行動上網對網頁設計的影響，不再以傳統電腦為主要設計考量。行動網頁設計課程是一門培養學生具備網頁設計概念與製作行動網頁之能力，屬實作課程，因此，必須要更注重學生在實作方面的能力培養。HTML5是新一代的HTML標準，也是目前最熱門的跨平台網頁設計技術，主要精髓在HTML5、CSS、與JavaScript三者結合，提供網頁更多樣的設計。專題導向學習（PBL）是一種以建構主義為理念，以學習者為中心的教學策略，是一種在實際環境中落實「做中學」理念的學習教學法。本研究為了給學生更好的實作機會，以47名大一學生為研究對象，運用PBL專題導向學習模式於行動網頁設計課程，以台北海洋科技大學為主題，讓學生進行校園行動生活導覽行動網頁實作，將所學網頁知識與製作技術靈活運用到專題中，進而完成，不僅達到培養學生行動網頁製作之綜合能力，亦有利於提升學生的網頁設計與團隊協作精神，增強學生的問題解決之能力與溝通能力，讓學生能應用於日常生活中與未來職場，落實做中學之學習成效。

關鍵字

HTML5 ； CSS ； PBL ；專題導向學習；行動網頁

並列摘要

In recent years, the environmental technologies of mobile networks and wireless networks have matured, and the proportion of people using mobile devices to access the Internet has surpassed that of desktop computers. In the case of rapid growth and diversification of mobile devices, how to make visitors browse through various devices. When you have a website, it is a big challenge to have better browsing results and your willingness to stay on the website. It can be seen that the impact of mobile Internet access on web design is no longer based on traditional computers. The Mobile-Web Design course is a practical course for students to develop web design concepts and create mobile-web pages. Therefore, it is necessary to pay more attention to students' ability to develop their work. HTML5 is a new generation of HTML standards, and is currently the most popular cross-platform web design technology. The main essence is to combine HTML5, CSS, and JavaScript to provide more webpage design. Project-Based Learning (PBL) is a learner-centered teaching strategy based on Constructivism. It is a kind of learning that implements the concept of ＂Learning by doing＂ in the actual environment. teaching method. In order to give students a better chance of implementation, this study this study used 47 students from the Project-Based Learning model in the Mobile-Web design course, with the theme of the Taipei University of Marine Technology, and let students conduct the campus action and life guide mobile-web implementation. The knowledge and production technology can be flexibly applied to the project, and then completed, not only to improve the comprehensive ability of students' Mobile-Web page production, but also to enhance students' web design and teamwork spirit, enhance students' problem solving ability and communication ability, and let students Can be applied to daily life and future workplaces, and implement the learning outcomes of doing secondary school.

並列關鍵字

HTML5 ； CSS ； PBL ； Project-Based Learning ； Mobile-Web

參考文獻

Blumenfeld, P. C., Soloway, E., Marx, R. W., Krajcik, J. S., Guzdial, M. & Palincsar, A.(1991). Motivating project-based learning:Sustaining the doing, supporting the learning. Educational Psychologist , 26(3&4),369-398.

Google Scholar

Chang, L.-C & Lee, G. C. (2010). A team-teaching model for practicing project-based learning in high school: Collaboration between computer and subject teachers.Computers & Education, 55, p961-969.

Google Scholar

Doyle, M. (2011). Responsive Web Design Demystified. From http://www.elated.com/articles/responsive-web-design-demystified/

Google Scholar

Ellis, T., & Hafner, W. (2007). Assessing collaborative, project-based learning experiences: Drawing from three data sources. The 37th ASEE/IEEE Frontiers in Education Conference - global engineering: knowledge without borders, opportunities without passports, Milwaukee.

Google Scholar

Moursund, D. (1999). Project-based learning using information technology. OR：International Society for Technology in Education Books and Courseware Department.

Google Scholar

國際替代計量

行動網頁設計課程融入PBL創新研究與實踐

全文下載

主題瀏覽