51 กรณีศึกษำ กำรสรำ้ งเวบ็ ไซต์ด้วย HTML + CSS โดยใช้โปรแกรม Sublime Text 3 สาหรับตาราเล่มน้า ผู้เขียนมีจุดประสงค์อยากให้ผู้อ่านนั้นได้เรียนรู้คาสั่งต่าง ๆ ไปพร้อมๆ กับการสร้าง เว็บจริง ผู้เขียนจึงขอแนะนาในรูปแบบกรณีศึกษา ผู้อ่านจะได้รู้ว่าในแต่ละคาส่ังน้ัน เมื่อนาไปใช้งานจริงแล้ว จะต้องเขยี นอยา่ งไร โดยจะนาเอาเว็บไซต์ที่เราได้ออกแบบเอาไวใ้ นบทแรก มาสรา้ งใหเ้ ปน็ เวบ็ ไซตท์ ใี่ ชง้ านจรงิ เพื่อให้ผู้อ่านสามารถทาตามได้อย่างถูกต้อง และเหมือนกับตารา สามารถเข้าไปดาวน์โหลดไฟล์ต่างๆท่ี เกี่ยวขอ้ งได้ที่ www.worldwidesof.com/book/file_web.zip 1. สร้างโฟลเดอร์โปรเจ็คช่ือ MyWeb โดยเก็บเอาไว้ที่ Desktop จากน้ันในโฟลเดอร์ MyWeb ให้ทาการ สร้างโฟลเดอรช์ ่ือ Images และ css เอาไวด้ ังภาพ โดยโฟลเดอร์ Images จะเอาไวส้ าหรบั เกบ็ รูปภาพ และ css จะเอาไว้เก็บไฟล์ .css ของเรา 2. สร้างไฟล์ใหม่ ตั้งชื่อวา่ index.html จากนั้นให้พมิ พค์ าส่ัง HTML ดงั นี้ ร.อ.หญงิ รนิ ดา ปอสี ผ้จู ดั ทา
52 3. สร้างไฟล์ css โดยคลิกสร้างไฟล์ใหม่เก็บไว้ที่โฟลเดอร์ css โดยต้ังช่ือไฟล์ว่า style.css จากนั้นท่ีไฟล์ index.html ใหท้ าการเชื่อมเอาไว้ style.css เข้ามาใชง้ าน โดยเขียนคาสง่ั ดังน้ี 4. ทดลองใส่คาส่ัง css ลงในไฟล์ style.css ดงั น้ี เพ่ือทดสอบว่าเราได้เช่ือมโยงไฟลไ์ ด้ถูกต้อง จากนน้ั บันทกึ แล้วเปดิ ดูไฟล์ index.html ท่ีบราวเซอร์ หากหน้าเว็บมีสีดา แสดงวา่ เราไดเ้ ช่ือมโยงไฟล์ได้ถกู ต้อง 5. สร้างสว่ นหัวของเวบ็ ไซต์ โดยส่วนหัวเวบ็ ไซตท์ เี่ ราได้ออกแบบเอาไว้ มีลักษณะดงั นี้ ร.อ.หญงิ รนิ ดา ปอสี ผ้จู ดั ทา
53 เ ขียน Code HTML ดังนเี้ อาไวใ้ นแท็ก Body บรรทัดท่ี 11 สร้างแทก็ div ข้นึ มาเอาไว้คลมุ ภาพโลโก้ และ เมนู โดยมีการใส่ class=head บรรทัดท่ี 12 สรา้ งแท็ก div ข้นึ มาเอาไว้คลุมภาพโลโกอ้ ย่างเดยี ว มกี ารใส่ ID=logo บรรทัดที่ 13 สร้างแท็ก img เพื่อนาภาพเข้ามาใส่ สงิ่ ท่ีอยู่ใน src น่นั กค็ ือที่อยขู่ องภาพ บรรทดั ท่ี 15 เป็นการสร้างคอมเม้น หรือ การเขยี นโนต้ ลงในโปรแกรม ขอ้ ความในส่วนน้ีจะไม่แสดงในหน้าเว็บ บรรทดั ที่ 16 สร้างแท็ก div เพื่อเอาไว้คลมุ สว่ นเมนู มกี ารใส่ ID = menu บรรทัดท่ี 17 – 22 เป็นการสร้างลิสรายการโดย ul เป็นส่วนบรรจุข้อมูลลิส li เป็นส่วนบรรจุรายการลิสแต่ละ รายการและ a เปน็ แทก็ ทใ่ี ช้เป็นลิงคเ์ ผอ่ื เชื่อมโยงในแต่ละหนา้ สว่ นบรรทัดอ่ืนๆที่ไมไ่ ดก้ ล่าวถึง กจ็ ะเป็นคาสงั่ ในการปิดแท็ก HTML เขยี นโค๊ดคำสั่ง css ดังน้ีลงในไฟล ์ style.css ร.อ.หญงิ รินดา ปอสี ผจู้ ัดทา
54 บรรทดั ท่ี 6 เปน็ การทาหนดใหแ้ ท็ก body มีสพี ืน้ หลังเปน็ สขี าว #FFFFFF คอื รหสั สขี าว บรรทัดท่ี 8 เป็นการสร้าง selector ให้กับ class ท่ีมีช่ือว่า head ซ่ึงก็คือส่วน div ท่ีเอาไว้คลุมโลโก้ และเมนู น่ันเองและมีการกาหนดให้มคี ุณสมบตั กิ ารแสดงผลดังน้ี width : 960 px กาหนดให้มขี นาดความกวา้ งที่ 960 พกิ เซล margin-left , margin-right เป็นการกาหนดระยะห่างระหว่างขอบด้านซ้าย และ ขวา โดยกาหนดเป็น auto ซึ่งการกาหนดแบบนีจ้ ะทาให้ .head นัน้ อยกู่ ง่ึ กลางหนา้ จอ บรรทัดท่ี 13 เป็นการสร้าง selector ให้กับ id ท่ีมีช่ือว่า logo เนื่องจาก logo มันอยู่ใน .head จึงต้องเขียนอ้าง ถงึ มนั ด้วย และมกี ารใส่คา่ float : left เพอ่ื จัดใหไ้ ปอย่ดู ้านซ้าย บรรทัดที่ 14 เป็นการสร้าง selector ให้กับ id ท่ีมีชื่อว่า menu และมีการใส่ค่า float: right เพื่อจัดให้ไปอยู่ ดา้ นขวา บรรทัดท่ี 19 เป็นการสร้าง selector ให้กับ ul ที่อยู่ใน head โดยมีการใส่ค่า list-style-type : none เพื่อไม่ให้ ul แสดงสญั ลักษณ์จุด บรรทัดที่ 22 เป็นการสร้าง selector ให้กับ li โดยมีคุณสมบัติ display : inline เพ่ือให้จัดเรียงรายการแบบ แนวนอนและ margin : 20 px เพื่อใหม้ รี ะยะห่างกนั เท่ากบั 20 พิกเซล บรรทัดท่ี 26 เป็นการสร้าง selector ให้กับลิงค์ โดย a:link หมายถึงลักษณะการแสดงผลของลิงค์ a:visited หมายถึงลักษณะการแสดงผลเมื่อลิงค์ได้ถูกคลิกแล้ว โดยมีการใส่คุณสมบัติ color หมายถึงสีของตัวหนังสือ text- decorationคอื รูปแบบของตวั หนงั สือ และ font-weight คือความหนาของตวั หนังสือ เมอี่ เขยี นทั้ง code ทั้ง 2 ไฟลแ์ ลว้ ลองเปิดไฟล์ index.html ดู จะไดผ้ ลลัพธ์ดังภาพ 6. สร้างภาพแบนเนอร์ สว่ นภาพแบนเนอรท์ ่เี ราไดอ้ อกแบบไว้มลี กั ษณะดังนี้ ร.อ.หญงิ รินดา ปอสี ผูจ้ ดั ทา
55 เขียน Code HTML เพ่ิมดงั น้ี บรรทดั ที่ 29 สรา้ งขึน้ เพ่ือทาส่วนก้ันเพอื่ ไมใ่ หส้ ว่ น head กบั สว่ น banner ซ้อนทับตดิ กัน บรรทดั ท่ี 30 – 36 เปน็ ส่วนแบนเนอร์ทั้งหมด ซึ่งประกอบไปดว้ ย h1 เปน็ ขอ้ ความสว่ นหัว p รายละเอยี ด และ a ลิงค์ทเ่ี ปน็ ปมุ่ learn more เขยี น Code CSS ดงั นี้ .space เป็นคลาสที่เปน็ ส่วนก้ัน เพอื่ ไมใ่ หส้ ่วนตา่ งๆ แสดงผลซ้อนทบั กัน .banner-box ทาหนา้ ท่ีเป็นกรอบควบคมุ รายละเอยี ดของส่วนทเ่ี ป็นแบนเนอร์ทั้งหมด มโี ดยการกาหนด คณุ สมบตั ิดังนี้ font-family: verdana; กาหนดรปู แบบฟ้อนต์ ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ัดทา
56 overflow: visible; ถา้ ภาพเกนิ ขนาดกรอบทก่ี าหนด ให้แสดงผล height: 370px; ความสูง width: 100%; ความกว้าง background-image: url(\"../images/banner.png\"); ภาพแบนเนอร์ ใส่เป็นภาพพน้ื หลัง text-align: center; ปรับใหอ้ งคป์ ระกอบอน่ื ๆที่อยู่ในบล็อก จดั อยู่ก่ึงกลาง padding-top: 100px; ระยะห่างของขอบด้านในบน .banner ทาหนา้ ทบี่ รรจุข้อความและป่มุ โดยทาการกาหนดขนาดความกว้างเอาไวท้ ่ี 500px ปรับใหอ้ ยู่ กง่ึ กลาง และสีของตัวหนังสอื เป็นสีขาว .banner p คือกาหนดคณุ สมบตั ิการแสดงผลของแท็ก p ที่อย่ใู นบล็อก .banner ปรบั ระยะห่างระหวา่ ง ขอบนอกดา้ นลา่ ง ใหม้ คี ่าเท่ากับ 20px .banner a:link , .banner a:visited คือปรับการแสดงผลของลิงค์ ทอี่ ยู่ในบลอ็ ก .banner ให้มีลักษณะ คล้ายป่มุ เมือ่ ดผู ลลัพธผ์ า่ นทางบราวเซอรจ์ ะมลี ักษณะดงั นี้ 7. สรา้ งส่วนเน้อื หา ซง่ึ เราได้ออกแบบส่วนของเน้ือหาเอาไวด้ ังนี้ ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ดั ทา
57 เขยี น Code HTML ดังน้ี บรรทัดท่ี 39 จะเหน็ ได้ว่าจะมีการใส่ div space ทุกคร้งั ทม่ี ีการเรม่ิ สรา้ งสว่ นใหม่ ทั้งน้ีก็เพอื่ ป้องกันการซ้อนทับกนั บรรทดั ที่ 40 กจ็ ะเป็นการสร้าง div เพื่อเป็นบล็อกของส่วนเนอ้ื หา และควบคมุ รายละเอยี ดในเน้ือหา บรรทดั ท่ี 42 เปน็ การสร้าง div class detail เพื่อเปน็ บล็อกใหเ้ น้ือหาในแต่ละตัว ร.อ.หญิง รนิ ดา ปอสี ผจู้ ัดทา
58 เขยี น Code CSS ดงั น้ี ในสว่ นนีร้ ายละเอียดของ Property ก็จะคล้ายๆ กบั สว่ นอ่ืนๆ แตม่ ีจดุ ที่นา่ สงั เกตตรงที่ เรามีบล็อกของ เนือ้ หาอยู่ดว้ ยกนั 4 บลอ็ ก แต่สังเกตว่าจะมีการแสดงผลที่เหมอื นกนั ทงั้ หมด ทั้งนเ้ี นื่องจากเราเขยี นโคด๊ css เพ่ือ ควบคุม class .detail เอาไว้ดไู ด้จากบรรทัดที่ 71 – 93 เมื่อ HTML มีการตง้ั คา่ class = detail css ก็จะเข้าไป จัดการ การแสดงผลในส่วนนั้นท้ังหมด เม่ือเปดิ ดูในบราวเซอร์ มีได้ผลลพั ธด์ ังน้ี ร.อ.หญิง รนิ ดา ปอสี ผู้จัดทา
59 8. สรา้ งสว่ นรายช่อื ทีม ซง่ึ เราไดม้ กี ารออกแบบเอาไว้ดังน้ี เขียน Code HTML ดังนี้ ในส่วนน้มี จี ุดทนี า่ สนใจท่บี รรทดั ที่ 78 79 คอื บรรทดั ท่ี 78 จะเปน็ การสรา้ งบล็อกเพ่ือมาทาหนา้ ท่เี ป็น กรอบ เพื่อใสส่ ีพ้นื หลงั และบรรทัดที่ 79 คือ เป็นส่วนบลอ็ กท่ีควบคุมรายการเนื้อหาในส่วนน้ี ร.อ.หญิง รนิ ดา ปอสี ผจู้ ดั ทา
60 เขยี น Code CSS ดงั นี้ จะได้ผลลัพธ์ดังนี้ ร.อ.หญิง รนิ ดา ปอสี ผู้จัดทา
61 9. สรา้ งส่วนท้ายเว็บไซต์ ซง่ึ เราไดท้ าการออกแบบไวด้ งั นี้ เขียน Code HTML หลกั การในส่วนน้ี จะสรา้ งบล็อก footer-bg ขึน้ มาเพ่ือเป็นตัวครอบสว่ นอน่ื ๆ และสร้างบลอ็ กสาหรบั ใส่ ข้อมลู ในส่วนซ้าย div class=foo-left และบล็อกสาหรบั ใส่ข้อมลู ในฝง่ั ขวา div class=foo-right ร.อ.หญิง รินดา ปอสี ผู้จดั ทา
62 เขยี น Code CSS ในส่วนน้ีมีจุดที่น่า สนใจ คือ บรรทัดท่ี 159 – 179 จะเห็นว่าเรามีการใช้ css เข้าไปจัดการรูปแบบของ Form เนื่องจากค่าเริ่มต้นของ Textbox และ Button นั้น มีการแสดงผลท่ีไม่ค่อยสวยงามนัก หากต้องการให้ Textbox มกี ารแสดงผลตามทไ่ี ด้ ออกแบบไวเ้ ราจึงใชภ้ าษา CSS ในการจดั การรปู แบบ ร.อ.หญงิ รินดา ปอสี ผจู้ ดั ทา
63 เม่อื เปดิ ดจู ะไดผ้ ลลัพธด์ งั นี้ สรุป จะเห็นไดว้ ่าภาษา CSS นั้นเป็นส่วนทสี่ าหรับในการจดั รูปร่างหน้าตาของเว็บไซต์ จริงๆแล้ว HTML เองก็มี แอ็ตทริบิวในการจัดรูปแบบการแสดงผลได้เหมือนกัน แต่ไม่เป็นที่นิยมในการพัฒนาเว็บไซต์ โดยส่วนใหญ่ HTML จะใช้เพียงแค่เป็นการจัดโครงสร้างหลักให้กับเว็บไซต์เท่าน้ัน เช่น ข้อความ รูปภาพ อื่นๆ จากน้ันรูปร่างหน้าตา อยากให้มีสีอย่างไร จัดวางที่ไหนเราจะใช้ภาษา CSS อีกทั้งในปัจจุบันมีบราวเซอร์หลากหลายย่ีห้อ ซึ่งแต่ละย่ีห้อ นั้นก็มีรูปแบบการแสดงผลของ HTML ท่ีแตกต่างกันทาให้เว็บไซต์ของเราเมื่อเปิดต่างบราวเซอร์ เว็บไซต์ก็จะ แสดงผลไมเ่ หมือนกัน หากใช้ CSS จะสามารถแก้ไขปญั หาเรอ่ื งนไ้ี ด้ ร.อ.หญงิ รินดา ปอสี ผูจ้ ดั ทา
64 บรรณำนุกรม - W3Schools , CSS Tutorial , 19 Feb ,2017 , https://www.w3schools.com/css/ - W3Schools , HTML Tutorial , 19 Feb 2017 , https://www.w3schools.com/html/ - พรชยั ทองอนิ ทร (2016), พื้นฐานการสร้างเว็บไซต์,ซเี อ็ดยูเคชน่ั , บมจ. ร.อ.หญงิ รนิ ดา ปอสี ผู้จดั ทา
mn 65 •©• ED ® (ile:///Us ers/s eree/Desktop/MyW eb/%C2%A0index.html * จดั ทำโดย ร.อ.หญงิ รินดำ ปอสี ตำแหน่ง อำจำรย์ แผนกวชิ ำสำมัญ กองกำรศึกษำ โรงเรยี นจ่ำอำกำศ กรมยุทธศึกษำทหำรอำกำศ กองทัพอำกำศ
Search
