Upload
samit-koyom
View
364
Download
6
Embed Size (px)
Citation preview
ตวัอยา่ง Workshop Basic HTML5 and CSS3
Workshop: Layout with HTML5
ฝึกฝนการใช ้Tag ใหม่ ๆ ใน HTML 5 ออกแบบ Webpage อย่างง่ายส าหรบัผูเ้ริม่ต้น ในตวัอย่างน้ีผูเ้รยีนจะไดเ้ขา้ใจแนวทางการวางโครงสรา้งโค๊ดดว้ยภาษา HTML5 ทัง้หมดเพื่อการเริม่ต้นอย่างถูกต้อง
Workshop: Design with HTML5
ต่อยอดจากการวางโครงสรา้งเวบ็ดว้ย HTML5 แลว้ ต่อดว้ย Workshop การจดัองคป์ระกอบหน้าเวบ็เพจ ประกอบไปดว้ย เมนู ส่วนของสไลดร์ปู การวางวดิโีอ การวางรปูภาพรว่มกบัขอ้ความ เป็นต้น
Workshop: Video Popup
ฝึกสรา้งวดิโีอแกลอรี ่พรอ้มตดิตัง้สว่นเสรมิแสดง Pop up วดิโีอทีล่งิกจ์าก Youtube.com โดยตรง
Workshop: google map
การแทรกแผนทีจ่าก Google map บนหน้าเวบ็เพจของคุณ
Workshop: CSS3 Target
ฝึกฝนการเขยีน CSS3 เพื่อท าการลงิกไ์ปยงัส่วนต่าง ๆ บนหน้าเวบ็ไดอ้ย่างลื่นไหล ดว้ยการใชฟั้งกช์นัใน CSS3 ร่วมกบั javascript
Workshop: CSS3 Border Radius
ฝึกฝนการจดัองคป์ระกอบของชิน้สว่นบนหน้าเวบ็เพจ เช่นการลบมุมของภาพ การจดัต าแหน่งกล่องบนหน้าเวบ็เพจดว้ยค าสัง่ใน CSS3
Workshop: CSS3 Border Round Image
เรยีนรูก้ารใชค้ าสัง่ใน CSS3 จดัรปูภาพใหเ้ป็นวงกลมดว้ยเทคนิคต่าง ๆ โดยไม่ต้องพึง่พาโปรแกรมปรบัแต่งภาพจากภายนอก
Workshop: CSS3 Box Shadow
เรยีนรูก้ารใส่เงาใหก้บักล่อง และขอ้ความบนหน้าเวบ็เพจ ดว้ยค าสัง่ใน CSS3 ไดอ้ย่างง่ายดาย
Workshop: CSS3 Font embed
ฝึกฝนเทคนิคการจดัการฟอนต์บนหน้าเวบ็เพจ ดว้ยค าสัง่ใน CSS3 ช่วยใหเ้ราสามารถท าการฝังฟอนต์ทีต่้องการไดอ้ย่างอสิระ และสะดวกรวดเรว็กว่าการใช ้javascript
Workshop: CSS3 Rotate
ฝึกฝนการจดัวางชิน้ส่วนบนหน้าเวบ็ ดว้ยเทคนิคการหมุนรปูภาพใหเ้ป็นมุมต่าง ๆ ใหน่้าสนใจยิง่ขึน้ พรอ้มเพิม่ลกูเล่นดว้ย JavaScript Popup
Workshop: Image Gallery
ฝึกฝนการวางรปูภาพเป็น Gallery ดว้ย CSS3 พรอ้มแสดง Popup ดว้ย JavaScript ทีน่่าสนใจ
Workshop: CSS3 Form
การสรา้งแบบฟอรม์ตดิต่อกบัผูใ้ชด้ว้ยชุดค าสัง่ใหม่ ๆ ใน HTML5 ร่วมกบั CSS3 ท าใหก้ารออกแบบท างานไดง้่ายขึน้
Workshop: Responsive Design Layout
เรยีนรูก้ารเขยีนเวบ็ใหร้องรบัหลากหลายหน้าจอ ดว้ยเทคนิค Responsive Design ดว้ยค าสัง่ใน CSS3
Workshop: Video Gallery Responsive
การท าวดิโีอแกลอรีใ่หร้องรบัหลากหลายหน้าจอแบบ Responsive Design พรอ้มแสดง Popup ทีน่่าสนใจด้วย JavaScript
Workshop: Layout Webpage with Bootstrap Framework
เรยีนรูก้ารใชง้าน Framework ยอดนิยมอย่าง Bootstrap ในการออกแบบหน้าเวบ็เพจไดอ้ย่างรวดเรว็ สวยงาม และรองรบัการแสดงผลหลายหน้าจอ แบบ Responsive Design
Workshop: Advance Technic
Layout
เทคนิคเสรมิอื่นๆ ในการจดัวางองคป์ระกอบของหน้าเวบ็เพจ เช่นการแสดงผลวดิโีอเป็นพืน้หลงั การท าหน้าเวบ็แบบ Pallarax การเลื่อนหน้าเวบ็แบบ Smooth เป็นต้น