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

A Study On Mobile-Web Design Course Integrated into PBL Innovation Practical

蔡慧貞(Hui-Chen Tsai)；任曉晶(Hsiao-Chin Jen)

HTML5 ； CSS ； PBL ； 專題導向學習 ； 行動網頁 ； HTML5 ； CSS ； PBL ； Project-Based Learning ； Mobile-Web

台北海洋科技大學學報

10卷1期（2019 / 04 / 01）

33 - 47

繁體中文

近年來，行動網路及無線網路環境技術成熟，人們使用行動裝置上網比例超越了桌上型電腦，在行動裝置快速成長與多樣化的情況下，如何讓訪客在使用各種不同裝置瀏覽網站時，有更佳瀏覽效果與停留在網頁中的意願，更是一大挑戰。由此可知，行動上網對網頁設計的影響，不再以傳統電腦為主要設計考量。行動網頁設計課程是一門培養學生具備網頁設計概念與製作行動網頁之能力，屬實作課程，因此，必須要更注重學生在實作方面的能力培養。HTML5是新一代的HTML標準，也是目前最熱門的跨平台網頁設計技術，主要精髓在HTML5、CSS、與JavaScript三者結合，提供網頁更多樣的設計。專題導向學習（PBL）是一種以建構主義為理念，以學習者為中心的教學策略，是一種在實際環境中落實「做中學」理念的學習教學法。本研究為了給學生更好的實作機會，以47名大一學生為研究對象，運用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.

1. 李有仁,張芳凱(2016)。運用智慧型手機應用程式設計博物館行動導覽系統之因素探討。觀光休閒學報，22(1)，61-94。
   連結：
2. 林麗娟(2006)。透過網頁呈現專題成果之學習。教育資料與圖書館學，43(4)，471-486。
   連結：
3. 曾吉弘(2015)。結合智慧型手機與機器人之專題導向式教學。中等教育，66(3)，82-87。
   連結：
4. 劉家勇(2015)。日本銀髮族養生保健產業發展：需求面觀點的分析。長康人文社會學報，8(2)，301-345。
   連結：
5. 簡幸如,劉旨峰(2009)。專題導向數位遊戲製作教學模式之個案探討。人文暨社會科學期刊，5(2)，113-130。
   連結：
6. 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.
7. 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,961-969.
8. Doyle, M. (2011). Responsive Web Design Demystified. From http://www.elated.com/articles/responsive-web-design-demystified/
9. 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:
10. Moursund, D.(1999).Project-based learning using information technology.OR:International Society for Technology in Education Books and Courseware Department.
11. Ngai, E. W. T.(2007).Learning in introductory e-commerce: a project-based teamwork approach.Computers & Education,48,17-29.
12. Siraj,S.(2005).Project-Based Learning(PBL) for curriculum enrichment: Malaysia experiences.2005 global project based learning forum and eXhibition Symposium held at the Shu-Te Home Economics and Commercial High School,Taiwan:
13. Thomas, J. W.,Mergendoller, J. R.,Michaelson, A.(1999).Project-based learning: A handbook for middle and high school teachers.Novato, CA:The Buck Institute for Education.
14. 王淑真(2006)。國立台灣師範大學工業教育研究所。
15. 王錦堂(1992).大學學術研究與寫作.東華書局出版.
16. 田郅菁(2012)。大同大學工業設計學系所。
17. 江舒婷(2009)。大同大學工業設計研究所。
18. 吳靜怡、李姿儀、張軒瑜 （2006）。南華大學校園導覽系統。南華大學資訊管理學系畢業專題。民 100 年 01 月 06 日，取自：http://nhuir.nhu.edu.tw:8085/ir/handle/987654321/7889。
19. 李建億,邱秉誠,吳俊霖,黃艾釵(1997)。遊識，熱蘭遮─利用 HTML 5 建置跨平臺之學習導覽系統。數位學習科技期刊，7(1)，73-90。
20. 李薰楓（譯）,黃朝恩（譯）,Bednarz, S. W.,Bettis, N. C.,Richsrd G, B.,Souza, A. R. D.,Marran, J. F.(1997).生活化地理：美國國家地理科課程標準 1994 年.台北:教育部.
21. 周怡君(2017)。整合合作式學習法與專題導向學習法於第二外語學習。正修通識教育學報，14，43-58。
22. 周春美,沈健華(2010)。專題導向學習應用在技職教育專業化之行動研究。技職教育期刊，1(1)，1-15。
23. 周德嬚(2012)。天主教輔仁大學圖書資訊學系碩士班。
24. 林士甫(2005)。網路專題導向學習教學─以參加臺灣學校網界博覽會為例。個友月刊，458，77-79。
25. 林孟輝,鄭明桂(2005).中小學生如何撰寫田野調查報告.台北縣永和市:稻田出版社.
26. 林旻毅(2014)。大同大學工業設計研究所。
27. 邱女玲(2010)。國立中山大學教育研究所碩士在職專班。
28. 洪崇彬,陳珈祈,黃致盈,廖哲翊(2015)。遊程行動導覽系統建置─以日月潭休閒飯店為例。地理資訊系統季刊，9(4)，12-19。
29. 張如慧(2017)。大學專題導向學習課程實施經驗：以臺東大學數位媒體與文教產業學系為例。臺灣教育評論月刊，6(1)，93-95。
30. 曹嘉秀,陳少芬(2015)。自律學習及專題導向數位學習對大專技職生英文課程之參與度及學習成效之影響。輔英通識教育學刊，2，61-94。
31. 許姿屏,李傳(2014)。被動式與遊戲探索式生態行動導覽設計之研究。福祉科技與服務管理學刊，5(4)，313-329。
32. 游琪(2014)。回應式網頁設計在移動互聯網中的應用。電腦光碟軟體與應用，14，293-294。
33. 葉智銘（2014），響應式網頁設計簡介專題報導，臺中市政府資訊中心電子保，第三十五期，民 107 年 09 月 04 日，取自：https://www.taichung.gov.tw/media/207165/412251493071.pdf
34. 劉毓芬(2013)。PBL 應用於通識課程問題設計研究－以資訊素養與倫理課程為例。通識學刊：理念與實務，2(2)，225-240。
35. 鄭棋文,楊叔卿(2008)。手機融入行動數位導覽開發與應用─以動物園為例。全球華人計算機教育應用大會