อ.ดร. นัฐพงศ์ ส่งเนียมอ.ดร. นัฐพงศ์...

อ.ดร. นฐัพงศ์ ส่งเนยีม

ขั้นตอนที่ 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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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>   <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

รปูแบบการใช้งาน

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

Code การปรับขนาดรูปภาพ

File: css02.html

<!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>

ภาพที่ 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/

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>

ภาพที่ 14 ผลการใส่ Youtube ในเว็บ

4.7 รูปแบบการใช้งานอ่ืน ๆ ของการใส่ Youtube ในเว็บ

รูปแบบ Code ที่ให้คลิปเล่นอัตโนมัติ โดยการใส่ autoplay=1

รูปแบบ Code ที่ให้คลิปเล่นวนซ้ำ โดยการใส่ playlist=ZwcmNkzm7m0&loop=1

ในการติดตั้ง 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.

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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.

41. 42. 43. 44. 45.

ภาพที่ 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.

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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.

41. 42. 43. 44.

JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

ภาพที่ 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

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>

ภาพที่ 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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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.

ภาพที่ 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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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 type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show Popup </button>  <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>   <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>

ภาพที่ 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>

ภาพที่ 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>

เมื่อทำการกดปุ่ม Submit เว็บจะมีการแสดงกล่องข้อความ Alert ขึ้นมา ข้อความที่แสดงจะเป็นข้อความ

ที่ได้มีการกำหนดไว้ใน Code หน้า alert01.html

ภาพที่ 33. ผลการ Alert

11.1 สร้าง File ชื่อ shop01.html

11.2 ติดตั้ง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4

รูปแบบ Code CSS การย่อ ขยายรูปภาพเมื่อนำไปเม้าไปชี้

border: 0; } </style>

รูปแบบ Code Navbar

รูปแบบ Code Slide Image การทำรูปภาพสไลด์

</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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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>  <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.

<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.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>  <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>   <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>

ภาพที่ 34. ผลการออกแบบหน้าจอร้าน siam2dev shop

เมื่อนำเม้ามาชี้ท่ีรูปสินค้า รูปสิ้นคา้จะมีการขยายใหญ่ขึ้น

ภาพที่ 35. ผลการขยายรูปสินค้าเมื่อนำเม้ามาช้ี

14.1 สร้าง File ชื่อ scrolling01.html

14.2 รูปแบบ Code ที่ใช้ในการทำ Scrolling

ดึงข้อมูล jQuery มาใช้งาน

รูปแบบ Code การทำ scrolling จากข้างบนลงข้างล่าง

}, 2000); }); }); </script>

รูปแบบ Code การทำ scrolling จากข้างล่างขึ้นข้างบน

12.3 Code การทำ Scrolling

File: scrolling01.html

1. 2. 3. 4. 5. 6. 7. 8. 9.

<!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.

ภาพที่ 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">  <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>  <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.

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>

ภาพที่ 37. ผลการออกแบบ sidebar

14.1 สร้าง File ชื่อ form01.html

14.2 ติดต้ัง Bootstrap ด้วย วิธี Get Started ในหัวข้อที่ 5 การใช้งาน Bootstrap 4

14.3 รูปแบบ type ที่ใช้งาน

รูปแบบ Type text

รูปแบบ 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

รูปแบบ 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>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <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>   <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.

ภาพที่ 38. ผลการออกแบบ Form

อ.ดร. นัฐพงศ์ ส่งเนียมอ.ดร. นัฐพงศ์...

Documents

ความหลงใหลและสไตล์ของ ดร.คณิศ ... · 2019-12-25 · ความหลงใหลและสไตล์ของ ดร.คณิศ

ดร. นิศรา การุณอุทัยศิริ¸™ิศราประวัติ... · ประวัติโดยสังเขป ดร. นิศรำ

ดร.อมรวิชช์ นาครทรรพ ที่ปรึกษาวิชาการ ส านักงานส่งเสริม ... · ดร.อมรวิชช์

AEC คือ อะไร ?

แบ่งเป็น 3 ประเภท คือ

นัฐพงศ์ สง่เนียม …...4.2 โครงสร างกรรมว ธ - Lifecycle Phases เตร ยมงาน (Inception) –น ยามขอบเขตของโครงการ

การร่างหนังสือราชการ · คือ จะต้องการทราบว่าหนังสือที่จะร่างเป็นหนังสือประเภทใด

ดร. ชูเกียรติ ตั้งคุณสมบ ัติ คู่มือสอบ · แนวข้อสอบราชทัณฑ์ โดย ดร.ชูเกียรติ

กัญชา คือ ยารักษามะเร็ง · 2016-07-12 · กัญชา คือ ยารักษามะเร็ง Keywords: กัญชา คือ

Joomdle คือ

บางเขน M.B.A. Master of Business fileผศ.ดร.รวิภา ลาภศิริ ผศ.ดร.วิชิต อู่อ้น ผศ.ดร.พรวรรณ

รองศาสตราจารย์ ดร.อรจรีย์ ณ ตะกั่วทุ่ง ผู้ช่วยศาสตราจารย์ ดร.ประศักดิ์

ลิมิตและความต่อเนื่อง · การหาลิมิตของฟังก์ชัน คือ การหาว่าฟังก์ชันนั้นมีค่าเข้าใกล้จ

เป็น อยู่่ คือ

ศาสตราจารย์ ดร. ประเสริฐ ณ นคร กับความก้าวหน้าการศึกษา ...¸¨.ดร.ประเสริฐ-99... ·

นัฐพงศ์ ส่งเนียม siam2dev xnattapong@hotmail

การสิ้นสุดของสิ่งหนึ่ง คือ การเริ่มต้นของสิ่งใหม่เสมอ

ค่มือการใช้งานู · ส่วนสําคัญของระบบห้องชําระเงินผู้ป่วยนอก คือ

เอกสารประกอบการเรียน Microsoft Excel 2016 · 2018-02-04 · ส่วนประกอบใด คือ ... ใด คือ ไฟล์เอกสารที่เปรียบเสมือนสมุด