ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส
-
Upload
samit-koyom -
Category
Education
-
view
364 -
download
6
Transcript of ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส
![Page 1: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/1.jpg)
ตวัอยา่ง Workshop Basic HTML5 and CSS3
Workshop: Layout with HTML5
ฝึกฝนการใช ้Tag ใหม่ ๆ ใน HTML 5 ออกแบบ Webpage อย่างง่ายส าหรบัผูเ้ริม่ต้น ในตวัอย่างน้ีผูเ้รยีนจะไดเ้ขา้ใจแนวทางการวางโครงสรา้งโค๊ดดว้ยภาษา HTML5 ทัง้หมดเพื่อการเริม่ต้นอย่างถูกต้อง
![Page 2: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/2.jpg)
Workshop: Design with HTML5
ต่อยอดจากการวางโครงสรา้งเวบ็ดว้ย HTML5 แลว้ ต่อดว้ย Workshop การจดัองคป์ระกอบหน้าเวบ็เพจ ประกอบไปดว้ย เมนู ส่วนของสไลดร์ปู การวางวดิโีอ การวางรปูภาพรว่มกบัขอ้ความ เป็นต้น
![Page 3: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/3.jpg)
Workshop: Video Popup
ฝึกสรา้งวดิโีอแกลอรี ่พรอ้มตดิตัง้สว่นเสรมิแสดง Pop up วดิโีอทีล่งิกจ์าก Youtube.com โดยตรง
Workshop: google map
การแทรกแผนทีจ่าก Google map บนหน้าเวบ็เพจของคุณ
![Page 4: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/4.jpg)
Workshop: CSS3 Target
ฝึกฝนการเขยีน CSS3 เพื่อท าการลงิกไ์ปยงัส่วนต่าง ๆ บนหน้าเวบ็ไดอ้ย่างลื่นไหล ดว้ยการใชฟั้งกช์นัใน CSS3 ร่วมกบั javascript
Workshop: CSS3 Border Radius
ฝึกฝนการจดัองคป์ระกอบของชิน้สว่นบนหน้าเวบ็เพจ เช่นการลบมุมของภาพ การจดัต าแหน่งกล่องบนหน้าเวบ็เพจดว้ยค าสัง่ใน CSS3
![Page 5: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/5.jpg)
Workshop: CSS3 Border Round Image
เรยีนรูก้ารใชค้ าสัง่ใน CSS3 จดัรปูภาพใหเ้ป็นวงกลมดว้ยเทคนิคต่าง ๆ โดยไม่ต้องพึง่พาโปรแกรมปรบัแต่งภาพจากภายนอก
![Page 6: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/6.jpg)
Workshop: CSS3 Box Shadow
เรยีนรูก้ารใส่เงาใหก้บักล่อง และขอ้ความบนหน้าเวบ็เพจ ดว้ยค าสัง่ใน CSS3 ไดอ้ย่างง่ายดาย
![Page 7: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/7.jpg)
Workshop: CSS3 Font embed
ฝึกฝนเทคนิคการจดัการฟอนต์บนหน้าเวบ็เพจ ดว้ยค าสัง่ใน CSS3 ช่วยใหเ้ราสามารถท าการฝังฟอนต์ทีต่้องการไดอ้ย่างอสิระ และสะดวกรวดเรว็กว่าการใช ้javascript
![Page 8: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/8.jpg)
Workshop: CSS3 Rotate
ฝึกฝนการจดัวางชิน้ส่วนบนหน้าเวบ็ ดว้ยเทคนิคการหมุนรปูภาพใหเ้ป็นมุมต่าง ๆ ใหน่้าสนใจยิง่ขึน้ พรอ้มเพิม่ลกูเล่นดว้ย JavaScript Popup
![Page 9: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/9.jpg)
Workshop: Image Gallery
ฝึกฝนการวางรปูภาพเป็น Gallery ดว้ย CSS3 พรอ้มแสดง Popup ดว้ย JavaScript ทีน่่าสนใจ
![Page 10: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/10.jpg)
Workshop: CSS3 Form
การสรา้งแบบฟอรม์ตดิต่อกบัผูใ้ชด้ว้ยชุดค าสัง่ใหม่ ๆ ใน HTML5 ร่วมกบั CSS3 ท าใหก้ารออกแบบท างานไดง้่ายขึน้
![Page 11: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/11.jpg)
Workshop: Responsive Design Layout
เรยีนรูก้ารเขยีนเวบ็ใหร้องรบัหลากหลายหน้าจอ ดว้ยเทคนิค Responsive Design ดว้ยค าสัง่ใน CSS3
![Page 12: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/12.jpg)
Workshop: Video Gallery Responsive
การท าวดิโีอแกลอรีใ่หร้องรบัหลากหลายหน้าจอแบบ Responsive Design พรอ้มแสดง Popup ทีน่่าสนใจด้วย JavaScript
![Page 13: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/13.jpg)
Workshop: Layout Webpage with Bootstrap Framework
เรยีนรูก้ารใชง้าน Framework ยอดนิยมอย่าง Bootstrap ในการออกแบบหน้าเวบ็เพจไดอ้ย่างรวดเรว็ สวยงาม และรองรบัการแสดงผลหลายหน้าจอ แบบ Responsive Design
![Page 14: ตัวอย่าง Workshop basic html5 and css3 จากไอทีจีเนียส](https://reader033.fdocument.pub/reader033/viewer/2022051123/5a661f7b7f8b9ad5138b49d1/html5/thumbnails/14.jpg)
Workshop: Advance Technic
Layout
เทคนิคเสรมิอื่นๆ ในการจดัวางองคป์ระกอบของหน้าเวบ็เพจ เช่นการแสดงผลวดิโีอเป็นพืน้หลงั การท าหน้าเวบ็แบบ Pallarax การเลื่อนหน้าเวบ็แบบ Smooth เป็นต้น