1. 網⾴頁開發⼯工具介紹
國網中⼼心 網路與資安組 葉永信 2014/06/30

2. 網⾴頁開發的歷史
HTML + CGI + JAVASCRIT + Java Applet!
ASP/JSP/PHP + Database + Flash!
AJAX + XML + ASP.Net/PHP/JSP!
HTML5 + CSS3 + WebSocket +javascript

3. 網⾴頁開發編輯器演進

10. 網⾴頁排版技術
!
frame!
iframe!
table!
div + CSS!
RWD SinglePage

11. 歷史中的網⾴頁畫⾯面

20. 現今網⾴頁排版

25. 網⾴頁開發⾯面臨了什麼問題
⾏行動裝置尺⼨寸過多!
開發時期如何測試預覽!
如何寫⼀一次⽤用在多個尺⼨寸上

26. GRUNT!
the javascript task runner

27. ⽩白話的說，它就是make

28. 它可以為我們做什麼︖？
去掉開發時期你加入的註解!
編輯檔案時，讓瀏覽器⾃自動reload!
⾃自動編譯scss成css!
⾃自動將多張⼩小圖合成⼀一張⼤大圖!
⾃自動OOOO

29. GRUNT How to
yum install nodejs!
npm install -g grunt-cli!
在你的專案⽬目錄下npminstallgrunt--save-dev

30. 編寫 gruntfile.js
module.exports = function(grunt) {!
grunt.initConfig({!
watch: {!
options: { livereload: true },!
files: ['*/*.php', '*/*.html', '*/*.js', '*/*.css'],!
}!
});!
grunt.loadNpmTasks('grunt-contrib-watch');!
grunt.registerTask('default', ['watch']);!
};

31. 在你的專案⽬目錄下執⾏行grunt

32. live demo

33. –Yeh, Yung-Hsin
“The end”