ดร.เฉลิมพล ดุลสัมพันธ์ · 2013. 7. 24. · ดร.เฉลิมพล ดุลสัมพันธ์ ประธานกรรมการ
อ.ดร. นัฐพงศ์ ส่งเนียมอ.ดร. นัฐพงศ์...
Transcript of อ.ดร. นัฐพงศ์ ส่งเนียมอ.ดร. นัฐพงศ์...
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ขั้นตอนที่ 1 กดท่ีเมนู Site เลือก New Site
ภาพที่ 1. เมนู Site
ขั้นตอนที่ 2 Site Name กำหนดเป็น Workshop
ภาพที่ 2. หน้าต่างการสร้าง Site
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ขั้นตอนที่ 3 ทำการเลือก Folder ที่ทำการสร้างเอาไว้ ในที่นี้คือ Workshop และทำการกดปุ่ม Select
ภาพที่ 3. กำหนด Folder สำหรับเก็บข้อมูลเว็บ
ขั้นตอนที่ 4 เมื่อทำการกดปุ่ม Select จากข้ันตอนที่ 3 แล้วจะได้ดังนี้
ภาพที่ 4. กำหนด Local Folder สำหรับเก็บข้อมูลเว็บ
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ขั้นตอนที่ 5 ไปในส่วนของ Servers เลือก Add new Server ปุ่มเครื่องหมาย +
ภาพที่ 5. กำหนด Add New Server
ขั้นตอนที่ 6 กำหนดข้อมูลดังภาพ และทำการกดปุ่ม Save
ภาพที่ 6. บันทึก Site
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ขั้นตอนที่ 7 นำเครื่องหมายถูกออกจาก Remote คลิกทีเ่ครื่องหมายถูกลงใน Testing และกดปุ่ม Save
ภาพที่ 7. กำหนด การทดสอบการทำงานของ Server-Side Scripting
ขั้นตอนที่ 8 ทำการสร้าง File ด้วยวิธีการคลิกขวาที่ Site ที่สร้างขึ้น แล้วเลือก New File
ภาพที่ 8. สร้างไฟล์ใหม่ด้วยหนา้ตา่ง Site
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
Responsive Web Design คือ เว็บที่มีการจัดรูปแบบของหน้าจอการแสดงผล ให้มีความเหมาะสมกับอุปกรณ์
ที่ใช้งาน ในที่ นี้จะใช้ Framework ที่ชื่อ Bootstrap 4 มาช่วยในการจัดการหน้าจอแสดงผลของเว็บ โดยสามารถ
ดูวิธีการใช้งานของ Bootstrap ได้ในหัวข้อที่ 5 การใช้งาน Bootstrap 4
2.1 Code การทำ Navbar
File: responsive01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Responsive Workshop01</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-success"> <a class="navbar-brand" href="#">Navbar</a>
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78.
</li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
2.2 ผลการทำงาน
ภาพที่ 9. แสดงผล Navbar หน้าจอขนาดใหญ ่
เมื่อหน้าจอมีขนาดที่เปลี่ยนไป จะมีการปรับรูปแบบให้เหมาะสมกับหน้าจอ
ภาพที่ 10. แสดงผล Navbar หน้าจอขนาดเล็ก
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ตวัอย่างท่ี 3.1 การกำหนดสีพ้ืนหลังด้วย CSS
3.1.1 สร้าง File ชื่อ css01.html
3.1.2 Code การใส่สีพื้นหลังด้วย CSS
รปูแบบการใช้งาน
<h1 style="background-color:#00FF00;">…………</h1>
Code การใส่สีพื้นหลัง
File: css01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS Workshop01</title> </head> <body> <h1 style="background-color:#00FF00;"> Dr.Nattapong Songneam </h1> <h1 style="background-color:#00FFFF;"> www.siam2dev.net </h1> </body> </html>
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
3.1.3 ผลการทำงาน
ภาพที่ 11. ผลการใสส่ีพื้นหลังด้วย CSS
ตัวอย่างที่ 3.2 การปรับขนาดของรูปภาพด้วย CSS
3.2.1 สร้าง File ชื่อ css02.html
3.2.2 Code style การปรับขนาดรูปภาพด้วย CSS
รูปแบบการใช้งาน โดยการสร้าง style และกำหนดขนาดของรูปภาพ และทำการใส่ id ของ style ลงใน Tag
<style> #image { width: 300px; height: 300px; } </style
Code การปรับขนาดรูปภาพ
File: css02.html
1. 2.
<!DOCTYPE html> <html>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21.
<head> <meta charset="UTF-8"> <title>CSS Workshop02</title> <style> #dog { width: 300px; height: 300px; } #cat { width: 200px; height: 200px; } </style> </head> <body> <img id="dog" src="images/dog02.jpg"> <img id="cat" src="images/cat02.jpg"> </body> </html>
3.2.3 ผลการทำงาน
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 12. ผลการปรับขนาดรปูภาพด้วย CSS
4.1 สร้าง File ชื่อ youtube01.html ภายใน Project
4.2 ทำการเปิดคลิปวีดีโอ บน Youtube ที่ต้องการนำมาใส่บนเว็บ โดยสังเกตุที ่Link Youtube
ภาพที่ 13. Link Youtube
4.3 ทำการ Copy ID ของ Youtube ที่ต้องการนำมาใส่ในเว็บ ตัวอย่าง ZwcmNkzm7m0
https://www.youtube.com/watch?v=ZwcmNkzm7m0
4.4 รูปแบบ Code ที่ใช้ในการใส่ Youtube ลงในเว็บ
นำ ID ที่ทำการ Copy ใส่ต่อท้าย https://www.youtube.com/embed/
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
<iframe width="300" height="300" src="https://www.youtube.com/embed/ZwcmNkzm7m0"> </iframe>
4.5 Code ที่ใช้ในการใส่ Youtube ลงบนเว็บ
File: youtube01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Yuotube Workshop01</title> </head> <body> <iframe width="300" height="300" src="https://www.youtube.com/embed/ZwcmNkzm7m0"> </iframe> </body> </html>
4.6 ผลการทำงาน
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 14 ผลการใส่ Youtube ในเว็บ
4.7 รูปแบบการใช้งานอ่ืน ๆ ของการใส่ Youtube ในเว็บ
รูปแบบ Code ที่ให้คลิปเล่นอัตโนมัติ โดยการใส่ autoplay=1
<iframe width="300" height="300" src="https://www.youtube.com/embed/ZwcmNkzm7m0?autoplay=1"> </iframe>
รูปแบบ Code ที่ให้คลิปเล่นวนซ้ำ โดยการใส่ playlist=ZwcmNkzm7m0&loop=1
<iframe width="300" height="300" src="https://www.youtube.com/embed/ZwcmNkzm7m0?playlist=ZwcmNkzm7m0&autoplay=1&loop=1"> </iframe>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ในการติดตั้ง Bootstrap มีการติดตั้งด้วยกัน 2 วิธี ได้แก่ Get Started และ Download
ภาพที่ 15. รูปแบบการติดตั้ง Bootstrap
ติดตั้งด้วยวิธี Get Started ทำการกด Copy นำ Code ไปวางไว้ใน File ที่สร้างไว้ได้เลย
ภาพที่ 16. การติดตั้ง Get Started
ติดตั้งด้วยวิธี Download ทำการ Download File และนำ
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 17. การติดตั้ง Download
เลือกรูปแบบการใช้งานได้จากเมนูด้านซ้าย
ภาพที่ 18. เมนูการใช้งาน Bootstrap
ตัวอย่างที่ 5.1 การใช้ Button ของ Bootstrap
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
5.1.1 สร้าง File ชื่อ bootstrap01.html
5.1.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started
5.1.3 เลือกหัวข้อ Components > Buttons และทำการกดปุ่ม Copy ในรูปแบบ Button ที่ต้องการ
ภาพที่ 19. การใช้ Button ของ Bootstrap
5.1.4 Code การใช้ Button ของ Bootstrap
นำ Code ที่ได้ทำการ Copy มาใส่ไว้ในส่วนของ body
File: bootstrap01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap Workshop01</title> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
41. 42. 43. 44. 45.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
5.1.5 ผลการทำงาน
ภาพที่ 20. ผลการทำงานการใช้ Button ของ Bootstrap
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ตัวอย่างที่ 5.2 การใช้ Card ของ Bootstrap
5.2.1 สร้าง File ชื่อ bootstrap02.html
5.2.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started
5.2.3 เลือกหัวข้อ Components > Card และทำการกดปุ่ม Copy ในรูปแบบที่ต้องการ
ภาพที่ 21. การใช้ Card ของ Bootstrap
5.2.4 Code การทำ Image Slide ด้วย Bootstrap
นำ Code ที่ได้ทำการ Copy มาใส่ไว้ในส่วนของ body และทำการกำหนดที่อยู่ของรูปภาพให้ถูกต้อง
File: bootstrap02.html 1. 2. 3. 4. 5. 6. 7. 8. 9.
10.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap Workshop02</title> </head> <body> <div class="card" style="width: 18rem;"> <img src="images/logo01.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">www.siam2dev.net</h5> <p class="card-text">By Dr.Nattapong Songneam</p> <a href="http://www.siam2dev.net/" class="btn btn-primary">Go</a> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
41. 42. 43. 44.
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
5.2.5 ผลการทำงาน
ภาพที่ 22. ผลการทำงานการใช้ Card ของ Bootstrap
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
Fluid Grid Layout มีหน้าที่สำหรับกำหนดขอบเขตในการแสดงผล ให้มีการรองรับการแสดงผลของแต่ละ
หน้าจอให้เหมาะสม
ขั้นตอนที่ 1 กดท่ีเมนู File เลือกเมนู File Fluid Grid Layout
ภาพที่ 23. เมนู File
ขั้นตอนที่ 2 กำหนดขนาดทีต่้องการ แล้วกดปุ่ม Create
▪ .
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 24. หน้าต่าง New Fluid Grid Layout
ขั้นตอนที่ 3 ตั้งชื่อ File CSS และทำการกด Save
ภาพที่ 25. หน้าต่างบันทึก File CSS
ขั้นตอนที่ 4 แสดงหน้าจอ Fluid Grid Layout ที่ออกแบบ
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 26. หน้าจอ Fluid Grid Layout
ตวัอย่างท่ี 7.1 การทำ Image Slide ด้วย Tag marquee
7.1.1 สร้าง File ชื่อ image01.html
รูปแบบของการทำ Image Slide ด้วย Tag marquee
<marquee> <img src="… " alt="..."> </marquee>
7.1.2 Code การทำ Image Slide ด้วย Tag marquee
File: image01.html 1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Workshop01</title> </head> <body> <marquee> <img src="images/dog01.jpg" width="300" height="300" alt="..."> </marquee> </body> </html>
▪ .
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
7.1.3 ผลการทำงาน
ภาพที่ 27. ผลการทำงาน Image Slide ด้วย Tag marquee
ตัวอย่างที่ 7.2 การทำ Image Slide ด้วย Bootstrap
7.2.1 สร้าง File ชื่อ image02.html
7.2.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4
7.2.3 เลือกหัวข้อ Components > Carousel และทำการกดปุ่ม Copy ในรูปแบบ Slide ที่ต้องการ
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 28. การใช้ Image Slide ของ Bootstrap
7.2.4 Code การทำ Image Slide ด้วย Bootstrap
นำ Code ที่ได้ทำการ Copy ในขั้นตอนที่ 7.2.3 มาใส่ไว้ในส่วนของ body และทำการกำหนดที่อยู่ของ
รูปภาพให้ถูกต้อง
File: image02.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43.
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Image Workshop02</title> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/bg01.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/bg02.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/bg03.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66.
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
7.2.5 ผลการทำงาน
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 29. ผลการทำงาน Image Slide ด้วย Bootstrap
ตวัอย่างท่ี 8.1 การทำ Popup Modal ด้วย Bootstrap
8.1.1 สร้าง File ชื่อ popup01.html
8.1.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4
8.1.3 เลือกหัวข้อ Components > Modal และทำการกดปุ่ม Copy ในรูปแบบทีต่้องการ
▪ .
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 30. การใช้ Popup Modal ของ Bootstrap
8.1.4 Code การทำ Popup Modal ด้วย Bootstrap
นำ Code ที่ได้ทำการ Copy ในขั้นตอนที่ 8.1.3 มาใส่ไว้ในส่วนของ body
File: popup01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43.
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Popup Workshop01</title> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show Popup </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Adobe Dreamweaver CS6</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-center"> <img src="images/logo01.jpg" alt="..."><br><br> <p>Dr.Nattapong Songneam</p> <p>www.siam2dev.net</p> </div>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68.
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit</button> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
8.1.5 ผลการทำงาน
ภาพที่ 31. ผลการทำงานหน้าต่าง Popup ด้วย Bootstrap
9.1 สร้าง File ชื่อ calender01.html
9.2 Code การสร้างปฏิทิน
ในการสร้างปฏิทินจะเป็นการเรียกใช้งาน jQuery เพื่อใช้ในการสร้างปฏิทิน และทำการเขียน function
script ในการแสดงผลของปฏิทิน
File: calender01.html 1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() {
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
$( "#datepicker" ).datepicker(); } ); </script> <title>Calender Workshop01</title> </head> <body> <div class="demo"> <div id ="datepicker"></div> </div> <div class="demo-description"></div> </body> </html>
9.3 ผลการทำงาน
ภาพที่ 32. ผลการแสดงปฏิทิน
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
10.1 สร้าง File ชื่อ alert01.html ภายใน Project
10.2 รูปแบบของการแสดงข้อความ Alert
alert(" ข้อความที่ต้องการแสดง ");
ใช้ร่วมกับ script function โดยเมื่อทำการกดปุ่ม Submit ให้แสดงหน้าต่าง Alert ขึ้นมา
<button onclick="MyAlert()">Sumbit</button> <script> function MyAlert() { alert(" ข้อความที่ต้องการแสดง "); } </script>
10.3 Code การแสดงหน้าต่าง Alert
File: alert01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Alert Workshop01</title> </head> <body> <button onclick="MyAlert()">Sumbit</button> <script> function MyAlert() { alert("Hello! Dr.Nattapong Songneam"); } </script>
▪ .
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
14. 15.
</body> </html>
10.4 ผลการทำงาน
เมื่อทำการกดปุ่ม Submit เว็บจะมีการแสดงกล่องข้อความ Alert ขึ้นมา ข้อความที่แสดงจะเป็นข้อความ
ที่ได้มีการกำหนดไว้ใน Code หน้า alert01.html
ภาพที่ 33. ผลการ Alert
11.1 สร้าง File ชื่อ shop01.html
11.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4
รูปแบบ Code CSS การย่อ ขยายรูปภาพเมื่อนำไปเม้าไปชี้
<style type="text/css"> img.newsize { width: 100px; height: 200px; border: 0; } img:hover.newsize { width: 200px; height: 300px;
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
border: 0; } </style>
รูปแบบ Code Navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"> <div class="container"> <a class="navbar-brand" href="#">Siam2dev Shop</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">ค้นหา</button> </form> </ul> </div> </div> </nav>
รูปแบบ Code Slide Image การทำรูปภาพสไลด์
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
</ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/slide01.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/slide02.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/slide03.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
รปูแบบ Code การแสดงรายการสินค้า
<div class="container"> <div class="card"> <div class="card-header bg-dark text-light text-center"> <font size="5">รายการสินค้า</font> </div>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
<div class="card-body text-center"> <div class="row"> <div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/iphone.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพท์มือถือ iPhone</h5> <p class="card-text">ราคา 18,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div> <div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/samsung.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพท์มือถือ Samsung</h5> <p class="card-text">ราคา 16,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div> <div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/oppo.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพท์มือถือ Oppo</h5> <p class="card-text">ราคา 12,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div> </div>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
</div> </div> </div>
11.3 Code หน้าจอการแสดงรายการสินค้า พร้อม slide รูปภาพ และย่อ ขยายรูปภาพสินค้า
File: shop01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Shop Workshop01</title> <style type="text/css"> img.newsize { width: 100px; height: 200px; border: 0; } img:hover.newsize {
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53.
width: 200px; height: 300px; border: 0; } </style> </head> <body> <!--Top NavBar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"> <div class="container"> <a class="navbar-brand" href="#">Siam2dev Shop</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">ค้นหา</button> </form> </ul> </div> </div> </nav>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83.
<!-- Slide --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/slide01.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/slide02.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="images/slide03.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99.
100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113.
<!--Mid NavBar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav> <!-- Card --> <div class="container"> <div class="card"> <div class="card-header bg-dark text-light text-center"> <font size="5">รายการสินค้า</font> </div> <div class="card-body text-center"> <div class="row"> <div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/iphone.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพท์มือถือ iPhone</h5> <p class="card-text">ราคา 18,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div> <div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/samsung.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพทม์ือถือ Samsung</h5> <p class="card-text">ราคา 16,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143.
<div class="card col-4" style="width: 18rem;"> <div class="card-body"> <img src="images/oppo.jpg" class="card-img-top newsize" alt="..."> <h5 class="card-title">โทรศัพท์มือถือ Oppo</h5> <p class="card-text">ราคา 12,000 บาท</p> <a href="#" class="btn btn-primary">สั่งซื้อ</a> </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
144. </html>
11.4 ผลการทำงาน
ภาพที่ 34. ผลการออกแบบหน้าจอร้าน siam2dev shop
เมื่อนำเม้ามาชี้ท่ีรูปสินค้า รูปสิ้นคา้จะมีการขยายใหญ่ขึ้น
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 35. ผลการขยายรูปสินค้าเมื่อนำเม้ามาช้ี
14.1 สร้าง File ชื่อ scrolling01.html
14.2 รูปแบบ Code ที่ใช้ในการทำ Scrolling
ดึงข้อมูล jQuery มาใช้งาน
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
รูปแบบ Code การทำ scrolling จากข้างบนลงข้างล่าง
<script> $(document).ready(function() { $("#goDown").click(function() { $("html, body").animate({ scrollTop: $('html, body').get(0).scrollHeight
▪ .
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
}, 2000); }); }); </script>
รูปแบบ Code การทำ scrolling จากข้างล่างขึ้นข้างบน
<script> $(document).ready(function() { $("#goTop").click(function() { $("html, body").animate({ scrollTop: $('html, body').offset().top }, 2000); }); }); </script>
12.3 Code การทำ Scrolling
File: scrolling01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10.
<!DOCTYPE html> <html> <head> <title>Scrolling Workshop01</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function() { $("#goDown").click(function() {
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.
$("html, body").animate({ scrollTop: $('html, body').get(0).scrollHeight }, 2000); }); }); </script> <script> $(document).ready(function() { $("#goTop").click(function() { $("html, body").animate({ scrollTop: $('html, body').offset().top }, 2000); }); }); </script> <style> h1 { color: green; } </style> </head> <body> <center> <div> <button id="goDown">Go Down</button> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61.
<h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <h1>www.siam2dev.net</h1> <button id="goTop">Go Top</button> </div> </center> </body> </html> </body>
12.4 ผลการทำงาน
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
ภาพที่ 36. ผลการทำงาน Scrolling
▪
13.1 สร้าง File ชื่อ sidebar01.html
13.2 Code การทำ sidebar
File: slide01.html
1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45.
<style> .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #006400; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #FFFFFF; display: block; transition: 0.3s; } .sidebar a:hover { color: #00FF00; } .sidebar .closebtn { position: absolute; top: 0;
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75.
right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; background-color: #006400; color: white; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #228B22; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} } </style> </head> <body>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99.
100. 101. 102. 103. 104.
<div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">Home</a> <a href="#">Profile</a> <a href="#">Learning</a> <a href="#">Knowlenge</a> </div> <div id="main">
<button class="openbtn" onclick="openNav()">☰</button> </div> <script> function openNav() { $('#mySidebar').css('width','250px'); $('#main').css('margin-left','250px'); $('.openbtn').fadeOut(700); } function closeNav() { $('#mySidebar').css('width','0'); $('#main').css('margin-left','0'); $('.openbtn ').fadeIn(700); } </script> </body> </html>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
13.3 ผลการทำงาน
ภาพที่ 37. ผลการออกแบบ sidebar
14.1 สร้าง File ชื่อ form01.html
14.2 ติดต้ัง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4
14.3 รูปแบบ type ที่ใช้งาน
รูปแบบ Type text
<div class="form-group row"> <label for="username" class="col-4">ชื่อผู้ใช้งาน</label> <input type="text" class="form-control col-8" id="username" placeholder="username"> </div>
รูปแบบ Type password
<div class="form-group row"> <label for="password" class="col-4">รหัสผ่าน</label> <input type="password" class="form-control col-8" id="password" placeholder="Password">
▪
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
</div>
รูปแบบ Type email
<div class="form-group row"> <label for="txtemail" class="col-4">Email</label> <input type="email" class="form-control col-8" id="txtemail"> </div>
รูปแบบ Type date
<div class="form-group row"> <label for="txtdate" class="col-4">วัน/เดือน/ปี เกิด</label> <input type="date" class="form-control col-8" id="txtdate"> </div>
รูปแบบ Type radio
<div class="form-group row"> <label for="gender" class="col-4">เพศ</label> <div class="col-8"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="gender" checked="checked" value="ชาย"> <label class="form-check-label" for="gender">ชาย</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="gender" value="หญิง"> <label class="form-check-label" for="gender">หญิง</label> </div> </div> </div>
รูปแบบ Type dropdown
<div class="form-group row"> <label for="status" class="col-4">ระดับการศึกษา</label>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
<select class="form-control col-8" id="status" name="status"> <option>ประถมศึกษา</option> <option>มัธยมศึกษา</option> <option>ปริญญาตรี</option> <option>ปริญญาโท</option> <option>ปริญญาเอก</option> </select> </div>
14.7 Code การสร้าง Form
File: form01.html 1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Form Workshop01</title> </head> <body> <div class="container"><br> <form>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50.
<div class="form-group row"> <label for="username" class="col-4">ชื่อผู้ใช้งาน</label> <input type="text" class="form-control col-8" id="username" placeholder="username"> </div> <div class="form-group row"> <label for="password" class="col-4">รหัสผ่าน</label> <input type="password" class="form-control col-8" id="password" placeholder="Password"> </div> <div class="form-group row"> <label for="txtemail" class="col-4">Email</label> <input type="email" class="form-control col-8" id="txtemail"> </div> <div class="form-group row"> <label for="txtdate" class="col-4">วัน/เดือน/ปี เกิด</label> <input type="date" class="form-control col-8" id="txtdate"> </div> <div class="form-group row"> <label for="gender" class="col-4">เพศ</label> <div class="col-8"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="gender" checked="checked" value="ชาย"> <label class="form-check-label" for="gender">ชาย</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="gender" value="หญิง"> <label class="form-check-label" for="gender">หญิง</label>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80.
</div> </div> </div> <div class="form-group row"> <label for="status" class="col-4">ระดับการศึกษา</label> <select class="form-control col-8" id="status" name="status"> <option>ประถมศึกษา</option> <option>มัธยมศึกษา</option> <option>ปริญญาตรี</option> <option>ปริญญาโท</option> <option>ปริญญาเอก</option> </select> </div> <div class="text-center"> <button type="submit" class="btn btn-primary">ยนืยัน</button> </div> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
อ.ดร. นฐัพงศ์ ส่งเนยีม
|
81. 82. 83. 84. 85.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
14.8 ผลการทำงาน
ภาพที่ 38. ผลการออกแบบ Form