mn 1 •©• ED ® (ile:///Us ers/s eree/Desktop/MyW eb/%C2%A0index.html * ค่มู อื การพัฒนาเวบ็ ไซตด์ ้วย HTML+CSS หลกั การออกแบบเว็บไซต์ ออกเว็บไซต์ด้วยโปรแกรมPhotoshop พื้นฐานภาษาHTML พ้ืนฐานภาษาCSS การพัฒนาเวบ็ ด้วยโปรแกรม Sublime Tetx 3
2 คำนำ คู่มือการสร้างเว็บไซต์ด้วยภาษา HTML + CSS จัดทาขึ้นเพ่ือเป็นคู่มือประกอบการอบรมใน โครงการประกวดการทาเว็บไซต์ของนักเรียนจ่าอากาศ โรงเรียนจ่าอากาศ กรมยุทธศึกษาทหารอากาศ กองทัพอากาศ มีจุดประสงค์เพื่อให้ผู้อ่านนั้นได้เรียนรู้ถึงหลักการในการพัฒนาเว็บไซต์ท่ีมีประสิทธิภาพ โดยการ เรยี นรจู้ ากพนื้ ฐานจรงิ ๆ ต้ังแตก่ ระบวนการออกแบบเว็บไซตไ์ ปจนถึงพ้นื ฐานของภาษาและการประยกุ ต์ใชง้ านจริง ทัง้ นี้ผู้เขยี นหวังเป็นอยา่ งย่งิ ว่า ผู้อา่ นจะเขา้ ใจในกระบวนการสรา้ งเว็บไซต์ได้ดียิ่งขึ้น และสามารถ นามาประยุกต์และต่อยอดในการพัฒนาเว็บไซต์จริง หากมีข้อความที่ขาดตกบกพร่องในส่วนใดส่วนหน่ึงของคู่มือ เลม่ น้ีรวมถงึ การใชร้ ูปภาพท่ีไมเ่ หมาะสมก็ขออภัยมา ณ ท่นี ้ี ร.อ.หญงิ รนิ ดา ปอสี อจ.ผวสม.กกศ.รร.จอ.ยศ.ทอ. ผ้จู ดั ทา ร.อ.หญิง รินดา ปอสี ผู้จดั ทา
3 สำรบัญ เรอ่ื ง หน้ำ หลกั กำรออกแบบเว็บไซต์ 1 เทคนคิ การออกแบบเวบ็ ไซตใ์ หส้ วย 1 ขน้ั ตอนการออกแบบเว็บไซต์ 9 กำรออกแบบเว็บไซต์ด้วยโปรแกรม Adobe Photoshop cc 2017 12 รจู้ ักสว่ นประกอบต่างๆของโปรแกรม 12 การ Export ภาพ เพอ่ื ใชง้ านสาหรบั เว็บ 32 ภำษำ HTML และ CSS เบือ้ งตน้ ด้วยโปรแกรม Sublime Text 3 35 การติดต้ังโปรแกรม Sublime Text 3 35 การใช้งานโปรแกรม Sublime Text 3 36 ภาษา HTML เบอ้ื งตน้ 40 ภาษา CSS เบือ้ งต้น 47 กรณศี กึ ษำ 51 การสร้างเว็บไซตด์ ว้ ยภาษา HTML + CSS ดว้ ยโปรแกรม Sublime Text 3 64 บรรณานกุ รม ร.อ.หญิง รนิ ดา ปอสี ผจู้ ดั ทา
4 กำรออกแบบเวบ็ ไซต์ (Web Design) การที่จะทาเว็บไซต์ให้สวยงามได้ ก็จะต้องออกแบบเว็บไซต์ให้สวยก่อน การออกแบบเว็บไซต์ถือว่าเป็น การใช้ทั้งศาสตร์และศลิ ป์ผสมผสานกัน เช่น การเลือกใช้สีที่ส่ือถึงเอกลักษณ์ขององค์กรและอิทธิพลของสีที่มีผลต่อ อารมณ์และความรู้สึกของมนุษย์ ส่ิงต่างๆเหล่านี้ หากอยากให้ผลงานการออกแบบน้ันออกมาดี นักออกแบบ หรือ ดไี ซนเ์ นอร์ จะต้องทาความเขา้ ใจอยา่ งลึกซ้ึง โดยผู้เขยี นได้ทาการสรปุ หลักการต่างๆ ดงั น้ี เทคนคิ กำรออกแบบเวบ็ ไซตใ์ หส้ วย ศกึ ษำแนวโน้ม (trends) ของเว็บไซต์ trends ของเว็บไซต์ ก็คือ ลักษณะของผลงานออกแบบที่นักออกแบบมีความเห็นตรงกันว่า “แบบน้ีล่ะ สวย” หรือ ผลงานการออกแบบที่กาลังได้รับความนิยมในยุคในสมัยน้ันๆ โดยส่วนใหญ่แล้วเทรนของเว็บไซต์ ก็จะ ได้รับอิทธิพลจาก บริษัทด้านไอทีใหญ่ ๆ เช่น Apple ผู้เร่ิมต้นการออกแบบในแนวคิดแบบ Flat Design คือมี ลักษณะเป็นแบบบางๆ เรียบ หรู ไร้แสงและเงา และGoogle ก็มีแนวคิดการออกแบบเป็นของตัวเองเช่นเดียวกัน นั่นก็คือ Material Design ซึ่งก็จะมีลักษณะของการเล่นแสง และเงาแต่ก็ยังคงเอกลักษณะของความหรูหรา ทันสมัยเอาไว้ ดงั ภาพ ตัวอย่างเว็บไซต์ที่ใช้แนวคดิ แบบ Flat Design (ภาพจาก http://blog.usabilla.com) ร.อ.หญิง รนิ ดา ปอสี ผูจ้ ดั ทา
5 ตัวอย่างเวบ็ ไซต์ท่ใี ชแ้ นวคิดแบบ Material Design ( ภาพจาก https://www.sitepoint.com ) นักออกแบบทด่ี ตี ้องตดิ ตามกระแสหรอื เทรนของการออกแบบอยู่ตลอดเวลา ตัวอย่างเว็บไซต์ที่ได้ รวบรวมรปู แบบเวบ็ ไซตส์ วยๆ เอาไว้ เชน่ www.cssline.com, www.pinterest.com ออกแบบเวบ็ ไซตใ์ หถ้ ูกกำลเทศะ ในการที่จะออกแบบเว็บไซต์แต่ละเว็บน้ัน นักออกแบบต้องคิดเสมอว่า เป็นเว็บไซต์ของใคร หน่วยงานไหนทางานเก่ียวกับอะไร ลักษณะของผู้เข้าชมเป็นอย่างไร วัยรุ่น หรือ ผู้ใหญ่ เน่ืองจากเว็บไซต์ที่ดีนั้น จะต้องสื่อถึงความเป็นเอกลักษณ์ขององค์กรได้ เช่น การออกแบบเว็บไซต์สาหรับกองทัพอากาศ ควรจะเลือกใช้สี ฟา้ หรือนา้ เงินเป็นหลัก และถา้ ทาเวบ็ ไซตเ์ กย่ี วกับพระพุทธศาสนาก็ควรเลือกใชส้ เี หลอื ง เป็นต้น อีกทั้ง ต้องดูด้วยว่า เว็บไซต์น้ันๆ เป็นเว็บไซต์เพ่ือจุดประสงค์อะไร หากเป็นเว็บไซต์เก่ียวกับ หนว่ ยงานทางราชการ ก็ควรทีจ่ ะออกแบบใหด้ ูมคี วามนา่ เช่ือถอื เป็นทางการ เรียบๆ ไม่ฟรุ้งฟริ้ง แต่ถ้าเป็นเว็บไซต์ เกยี่ วกับรา้ นค้าออนไลน์ กค็ วรออกแบบใหด้ ูมคี วามสดใส มคี วามน่าสนใจ ดงึ ดดู ใหผ้ ู้เขา้ ชมให้ซ้อื สนิ ค้าจากทางเว็บ ร.อ.หญิง รนิ ดา ปอสี ผจู้ ัดทา
6 ตัวอยา่ งเว็บไซต์หนว่ ยงานของรัฐ (http://www.thaigov.go.th) ตัวอยา่ งเว็บไซตร์ ้านค้าออนไลน์ (www.lazada.co.th) ร.อ.หญิง รินดา ปอสี ผูจ้ ัดทา
7 เลือกภำพกรำฟกิ ที่สวยงำม และส่ือสำรไดด้ ี เว็บไซต์จะสวยหรือไม่สวย รูปภาพมีส่วนเกือบ 70% ถ้าเอาภาพสวยๆมาใส่เว็บ เว็บก็จะดูสวยข้ึนทันที เช่นเดยี วกนั ถ้านกั ออกแบบเลือกภาพไมด่ ีเว็บไซต์กจ็ ะดูหมดความนา่ สนใจขนึ้ ทนั ที การนารูปภาพมาใส่เว็บไซต์ ควรคานึกถึงลิขสิทธิ์ของภาพด้วย ไม่ควรนาภาพที่ไม่ได้รับอนุญาตจากเจ้าของ ภาพมาใส่ในเว็บไซต์ ซึ่งอาจจะถูกฟ้องร้องตามกฎหมายได้ แล้วจะหาภาพได้จากที่ไหนถึงจะม่ันใจได้ว่าจะไม่ถูก ฟ้องรอ้ ง 1. ถ่ายเอง หากผู้อ่านมีเทคนิคด้านการถ่ายภาพที่ดี การถ่ายภาพเองเป็นวิธีที่มั่นใจได้ 100% แต่ต้องไป ถ่ายในทๆ่ี เขาอนญุ าตใหถ้ ่ายนะ 2. หาจากเว็บไซต์ มีหลายเว็บไซต์ท่ีอนุญาตให้ดาวน์โหลดมาภาพใช้ได้ฟรีๆ ไม่ติดลิขสิทธ์ิ เช่น pexels.com, imcreator.com, stocksnap.io และไม่แนะนาให้ไปค้นหาภาพจากเว็บไซต์ google มาใช้ในเว็บ เดด็ ขาด เน่ืองจากบางภาพน้ันอาจจะมีลิขสิทธ์ิ ตวั อยา่ งของเวบ็ ไซตท์ เี่ ลอื กใช้ภาพประกอบไดไ้ ม่ดี (ภาพจาก http://www.topdesignmag.com) ร.อ.หญิง รินดา ปอสี ผจู้ ดั ทา
8 ตัวอย่างของเว็บไซต์ทดี่ ีการเลือกใช้ภาพท่ดี ี ( ภ า พ จ า ก www.d-chokchai.co.th) ออกแบบเวบ็ ไซต์ให้เป็นรปู แบบเดยี วกันทกุ หนำ้ การออกแบบเว็บไซต์ 1 เว็บ ควรจะมองภาพรวมท้ังเว็บให้ออก ซ่ึงจะต้องควบคุมรูปแบบให้ เป็นไปในลักษณะเดยี วกันทกุ หน้า เช่น เว็บไซต์มีหน้าหลักทีมีโทนสีฟ้า ในหน้าอ่ืนๆก็ควรท่ีจะใช้สีฟ้า หรือสีที่อยู่ใน โทนเดยี วกนั ไมแ่ ตกต่างกนั มาก รวมทง้ั ลักษณะของการจัดวางองค์ประกอบต่างๆในเว็บไซต์ ก็ควรที่จะมีลักษณะท่ี เหมอื นๆกันในทกุ หนา้ ภาพตัวอยา่ งเวบ็ ไซต์ท่ีควบคุมรปู แบบใหเ้ ป็นลักษณะเดยี วกัน ทุกๆหน้า www.วดั สจั จะธรรม.com ร.อ.หญิง รนิ ดา ปอสี ผ้จู ดั ทา
9 ขนั้ ตอนกำรออกแบบเว็บไซต์ 1. ออกแบบแผนผงั เวบ็ ไซต์ หรือ Sitemap แผนผงั เว็บไซต์ หรือ Sitemap แผนผงั เว็บไซตข์ องเรา ว่าเว็บไซต์เราน้ันมีหน้าเว็บต่างๆ อยู่ท่ีไหน บ้าง แต่ละหน้าช่อื ว่าอะไร หน้าไหนลิงค์ไปสู่หน้าไหน การออกแบบแผนผังเว็บไซต์อาจจะใช้ดินสอ ปากกา วาดลง กระดาษก็ได้ หรือจะเลือกใช้ซอฟต์แวร์สาหรับออกแบบ เช่น Microsoft Visio , Photoshop หรืออ่ืนๆ ตามที่นัก ออกแบบมีความถนัด โดยส่วนใหญแ่ ลว้ การวาดแผนผังเว็บไซต์จะวาดแผนผังแบบต้นไม้ (Tree Diagram) ซ่ึงมีการ แบ่งกง่ิ กา้ นของแต่ละหน้าออกไป ดงั ตัวอยา่ ง ภาพตวั อยา่ งแผนผังเวบ็ ไซต์ (ภาพจาก http://allsuadd.com) 2. ออกแบบโครงร่ำงเว็บไซต์ การออกแบบโครงร่างเว็บไซต์ เป็นการร่างแบบคร่าวๆ เพื่อให้รู้ว่าหน้าเว็บไซต์มีองค์ประกอบ อะไรบ้าง องค์ประกอบในแต่ละส่วนนั้นจะต้องจัดวางเอาไว้ในตาแหน่งไหน เช่น มีโลโก้อยู่ท่ีมุมบนซ้าย มีเมนูอยู่ ด้านบน มภี าพแบนเนอร์ มีส่วนแสดงรายการขา่ วสารต่างๆ ภาพกิจกรรม เป็นต้นการออกแบบในส่วนน้ีสิ่งที่ผู้เขียน ถนดั ที่สุดกค็ อื การวาดด้วยมือลงบนกระดาษ เพราะเปน็ วิธีการท่ีสามารถถ่ายทอดสง่ิ ที่ อยู่ในจินตนาการให้ออกมาได้อย่างรวมเร็ว ซ่ึงขั้นตอนน้ีไม่เน้นว่าภาพท่ีออกมาจะต้องสวย แต่ส่ิง ที่ต้องการก็เพื่อให้มองภาพรวมของโครงร่างเว็บไซต์ในภาพรวมออก แต่ท้ังน้ีก็มีซอฟต์แวร์ท่ีช่วยในการออกแบบ โครงร่างเว็บไซต์มากมาย เช่น adobe illustrator, adobe Photoshop , adobe xd และซอฟต์แวร์รูปแบบ ออนไลนเ์ ชน่ draw.io ร.อ.หญิง รนิ ดา ปอสี ผ้จู ดั ทา
10 ภาพการออกแบบโครงร่างเวบ็ ไซต์ดว้ ย draw.io ภาพตัวอยา่ งการออกแบบโครงรา่ งเว็บไซตด์ ว้ ยมือ ( ภาพจาก https://s-media-cache-ak0.pinimg.com) ร.อ.หญิง รนิ ดา ปอสี ผูจ้ ัดทา
11 3. ออกแบบเวบ็ ไซตเ์ สมือนจรงิ ด้วยโปรแกรมด้ำนกรำฟิก หลังจากทเี่ ราไดอ้ อกแบบโครงรา่ งเวบ็ ไซตเ์ สร็จเรียบร้อยแล้ว ต่อมาก็จะเป็นการออกแบบเว็บไซต์ ทเี่ สมอื นจรงิ ด้วยโปรแกรมด้านกราฟิก การออกแบบเว็บไซต์ในข้ันตอนนี้จะเป็นการเร่ิมนารูปภาพที่ใช้งานจริงเข้า มา โลโก้จริงเข้ามา ข้อความที่จะต้องลงในเว็บไซต์ การเลือกใช้สี ซึ่งข้ันตอนน้ีจะมีความพิถีพิถันในการออกแบบ เพือ่ ให้ไดแ้ บบเวบ็ ไซตท์ ่ีสวยงาม ซึ่งการออกแบบน้ันก็มีโปรแกรมด้านกราฟิกหลากหลายโปรแกรมให้เลือกใช้ แต่ที่ เปน็ ที่นยิ มในนกั ออกแบบเวบ็ ไซต์ ก็คือ โปรแกรม Adobe Photoshop ภาพตัวอย่างการออกแบบเวบ็ ไซตเ์ สมือนจริง ด้วยโปรแกรม Adobe Photoshop (ภาพจาก https://cdn.lynda.com ) ร.อ.หญงิ รินดา ปอสี ผู้จัดทา
12 กำรออกแบบเว็บไซต์ดว้ ยโปรแกรม Adobe Photoshop CC 2017 โปรแกรม Adobe Photoshop เป็นโปรแกรมสาหรับงานด้านกราฟิกท่ีอัจริยะ สามารถใช้ สรา้ งสรรค์งานด้านกราฟิกได้ทกุ งาน ไม่วา่ จะเปน็ งานดา้ นโปสเตอร์ ใบปริว แผ่นพับ บรรจุภัณฑ์ ภาพกราฟิก User Interface Mobile App รวมไปถึง เว็บไซต์ Adobe Photoshop มีการพัฒนาเวอร์ชั่นอย่างต่อเน่ือง ปัจจุบันรุ่นที่ ผูเ้ ขยี นกาลงั ทาตาราเลม่ นค้ี อื เวอรช์ นั่ Photoshop cc 2017 แต่ทง้ั น้ีทั้งนั้นในแตล่ ะเวอรช์ ั่น ตาแหน่งและเคร่ืองมือ ในการใช้งานต่างๆ กม็ คี วามคล้ายกนั ดงั น้นั ผู้อ่านไม่จาเป็นตอ้ งใช้เวอร์ชน่ั เดียวกับของผู้เขียนก้ได้ รู้จักสว่ นตำ่ งๆ ของโปรแกรม ส่วนท่ี 1 Menu Bar แถบบควบคุมโปรแกรม File หมายถึง รวมคาส่ังที่ใช้จัดการกับไฟล์รูปภาพ เช่น สร้างไฟล์ใหม่, เปิด, ปิด, บันทึกไฟล์, นาเข้าไฟล์, ส่งออกไฟล์และอน่ื ๆ ท่ีเกี่ยวกบั ไฟล์ Edit หมายถงึ รวมคาส่งั ท่ีใชส้ าหรับแกไ้ ขภาพ และปรบั แต่งการทางานของโปรแกรมเบื้องต้น เช่น ก๊อปปี้, วาง, ยกเลกิ คาสั่ง, แกไ้ ขเครื่องมอื และอนื่ ๆ Image หมายถึง รวมคาสั่งที่ใช้ปรับแต่งภาพ เช่น สี, แสง, ขนาดของภาพ (image size), ขนาดของ เอกสาร (canvas),โหมดสีของภาพ, หมนุ ภาพ และอื่น ๆ Layer หมายถึง รวมคาสั่งท่ีใช้จัดการกับเลเยอร์ ท้ังการสร้างเลเยอร์, แปลงเลเยอร์ และการจัดการกับเล เยอรใ์ นด้านต่าง ๆ select ร ว ม คาสง่ั เกย่ี วกับการเลือกวัตถุหรือพื้นที่บนรูปภาพ (Selection) เพื่อนาไปใช้งานร่วมกับคาส่ัง อ่ืน ๆ เชน่ เลอื กเพื่อเปลย่ี นสี, ลบ หรอื ใชเ้ อฟเฟก็ ตต์ ่าง ๆ กบั รปู ภาพ ร.อ.หญงิ รินดา ปอสี ผจู้ ดั ทา
13 Filter เป็นคาสงั่ การเลน่ Effects ต่างๆสาหรบั รูปภาพและวัตถุ 3D เปน็ คาสง่ั ในการทางานกราฟกิ แบบ 3 มติ ิ View เป็นคาส่ังเก่ยี วกับมุมมองของภาพและวัตถใุ นลกั ษณะต่างๆ เชน่ การขยายภาพและยอ่ ภาพใหด้ เู ลก็ Window เป็นสว่ นคาสั่งในการเลอื กใชอ้ ปุ กรณเ์ สรมิ ต่างๆท่ีจาเปน็ ในการใชส้ รา้ ง Effects ตา่ งๆ Help เปน็ คาสง่ั เพอื่ แนะนาเกี่ยวกบั การใชโ้ ปรแกรมฯและจะมลี ายละเอยี ดของโปรแกรมอยู่ในนั้น ส่วนที่ 2 Tool Bar แถบเคร่ืองมือ Tool Panel (ทูลพาเนล) หรือ กล่องเคร่ืองมือ จะประกอบไปด้วยเคร่ืองมือต่าง ๆ ที่ใช้ในการ วาด ตกแต่ง และแก้ไขภาพเครื่องมือเหล่าน้ีมีจานวนมาก ดังนั้นจึงมีการรวมเครื่องมือท่ีทาหน้าท่ีคล้าย ๆ กันไว้ใน ปุ่มเดยี วกัน โดยจะมีลักษณะรปู สามเหลยี่ มอยู่บรเิ วณมมุ ดา้ นลา่ งดังภาพ 2 เพื่อบอกให้รู้ว่าในปุ่มน้ียังมีเคร่ืองมืออ่ืน อยดู่ ว้ ย ส่วนท่ี 3 Option Bar สิ่งทค่ี วบคุมเคร่ืองมอื ที่ใช้งำน Tools control menu สิ่งท่ีควบคุมเคร่ืองมือที่ใช้งาน Tools control menu หรือ Option Bar (ออปชั่นบาร์) เป็นส่วน ทีใ่ ช้ปรับแต่งคา่ การทางานของเครอื่ งมือตา่ ง ๆ โดยรายละเอยี ดในออปช่ันบาร์จะเปลี่ยนไปตามเครื่องมือที่เราเลือก จากทูลบ็อกซ์ในขณะนั้น เช่น เม่ือเราเลือกเครื่องมือ Brush (พู่กัน) บนออปชั่นบาร์จะปรากฏออปชั่นท่ีใช้ในการ กาหนดขนาด และลกั ษณะหัวแปรง, โหมดในการระบายความโปรง่ ใสของสี และอัตราการไหลของสี เปน็ ต้น สว่ นที่ 4 Window Design พ้ืนทอี่ อกแบบ เปน็ พ้ืนท่ีวา่ งสาหรบั แสดงงานทก่ี าลังทาอยู่ ส่วนท่ี 5 Panel menu เมนูของพนื้ ทก่ี ำรทำงำน Panel (พาเนล) เป็นวินโดว์ย่อย ๆ ท่ีใช้เลือกรายละเอียด หรือคาส่ังควบคุมการทางานต่าง ๆ ของโปรแกรม ในPhotoshop มีพาเนลอยู่เป็นจานวนมาก เช่น พาเนล Color ใช้สาหรับเลือกสี, พาเนล Layers ใช้สาหรับจัดการกับเลเยอร์ และพาเนล Info ใช้แสดงค่าสีตรงตาแหน่งที่ชี้เมาส์ รวมถึงขนาด/ตาแหน่งของพ้ืนท่ีท่ี เลอื กไว้ เริ่มต้นออกแบบเวบ็ ไซต์ 1. เปิดโปรแกรม Adobe Photoshop ขัน้ มา จากนนั้ คลกิ ที่ File > New เพ่อื สรา้ งแผ่นงานใหม่ 2. ท่ีหนา้ ต่างสรา้ งแผ่นงานใหม่ กาหนดค่าดังน้ี จากน้ันคลกิ ทปี่ มุ่ “Create” Width = 960 pixels Height = 1000 pixels Resolution = 72 (ขนาดความกว้าง 960 pxเป็นขนาดที่เว็บสามารถแสดงได้เต็มจอพอดี เม่ือเปิดดูในเครื่องคอมพิวเตอร์ที่มี ขนาดความละเอียดหนา้ จอที่ 1024 px ) ร.อ.หญงิ รินดา ปอสี ผู้จัดทา
14 3. ไปที่เมนู View > Rulers เพ่ือเปิดการใช้งานไม้บรรทัด จากนั้นทาการลากที่ขอบไม้บรรทัด เข้ามาวางใน แผน่ งานเพ่ือเปน็ การวางแนว ในการจดั วางตาแหน่งองค์ประกอบสว่ นต่างๆของเว็บไซต์ไดต้ รงกัน ร.อ.หญงิ รินดา ปอสี ผจู้ ัดทา
15 4. เน่ืองจากขนาดหนา้ จอคอมพิวเตอร์ในปัจจุบันน้ัน มีขนาดความละเอียดสูงข้ึน เพื่อให้การออกแบบเว็บไซต์ ของเราน้ันสามารถรองรับได้ทุกๆ หน้าจอ จึงต้องทาการขยายขนาดของแผ่นงานออก จะได้มองเห็น ภาพรวมได้ดียิ่งขึ้น โดยไปท่ีเมนู images > Canvas Size.. จากนั้นกาหนดค่าความกว้างใหม่เป็น 1900 pixel (1900 pixel คอื ขนาดความละเอียด แนวนอน ที่มากที่สุดของจอคอมพิวเตอร์ปัจจุบัน ถ้าไม่นับรวม หนา้ จอแบบ Retina Display ของ MacBook pro ) เม่ือตัง้ คา่ ถูกตอ้ ง แผน่ งานมลี ักษณะดงั ภาพ ร.อ.หญิง รินดา ปอสี ผู้จัดทา
16 5. สร้างเส้นไกดเ์ พ่มิ เติม เพ่ือกาหนดสว่ นตา่ งๆ ของหนา้ เวบ็ หากตอ้ งการลบเส้นไกด์ออก ให้คลิกซ้ายค้างท่เี ส้น แลว้ ลากข้นึ กลบั ไปท่ีไมบ้ รรทดั 6. ใส่ภาพโลโก้ลงเว็บไซต์ เปิดหน้าต่างที่เก็บไฟล์ภาพโลโก้ข้ึนมา จากน้ันคลิกลากลงมาวางในแผ่นงานปรับ ตาแหน่งของโลโกใ้ นจุดท่ีต้องการ ให้สวยงาม ร.อ.หญงิ รนิ ดา ปอสี ผู้จดั ทา
17 7. ออกแบบเมนู 8. ใส่ภาพแบนเนอร์ 8.1 เปิดหน้าต่างที่เก็บภาพขึ้นมา 8.2 จากน้ัน คลกิ ซ้ายค้างไว้ แล้วลากภาพมายงั ตาแหน่งท่ีตอ้ งการ ร.อ.หญิง รนิ ดา ปอสี ผ้จู ดั ทา
18 8.3 นาเม้าทม์ าวางที่มมุ บน จากน้นั กดShift ค้างไว้ แลว้ ลากขยายภาพใหไ้ ด้ตามขนาดท่ตี อ้ งการ 8.4 ได้ขนาดภาพตามตอ้ งการแล้ว ร.อ.หญิง รนิ ดา ปอสี ผ้จู ดั ทา
19 9. ตดั รูปภาพแบนเนอรส์ ่วนทเ่ี กินออก บางครงั้ ภาพแบนเนอร์ ทเ่ี รานาเข้ามาใส่ อาจจะมีขนาดใหญ่เกินไปจนไปทับส่วนอื่นๆของเว็บไซต์ เราสามารถตัดภาพโดยใช้เทคนิคการ Clipping Mask ซ่ึงเทคนิคน้ี มีข้อดีคือภาพต้นฉบับของเราจะไม่ถูก ลับออก เพียงแต่ทาให้ส่วนท่เี กินนนั้ ไม่แสดงออกมา ซึ่งมวี ธิ ีการทาดังน้ี 9.1 คลกิ เลือกเครื่องมือ Rectangle Tool 9.2 คลิกเลอื กสขี อง Shape 9.3 เลือกใช้สขี าว เพื่อให้ยงั คงรกั ษาสีของภาพ ต้นฉบับเดมิ เอาไว้ แต่ถา้ ต้องการใสฟ่ ลิ เตอร์ ให้กบั ภาพก็สามารถเลือกสีอ่ืนๆตามความ ตอ้ งการได้ 9.4 คลิกท่ีขอบมุมเพื่อเร่ิมตน้ จุดที่ 4 จากน้ันคลิกซา้ ยค้างไว้ แลว้ ลากมายงั จดุ ที่ 5 ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ดั ทา
20 9.5 เลอื กเลเยอร์ Rectangle ท่สี ร้างในข้นั ตอนทผ่ี า่ นมาให้ มาอย่ใู นตาแหนง่ ท่ตี ่ากว่า เลเยอรร์ ปู ภาพ 9.6 คลิกขวาท่เี ลเยอรร์ ปู ภาพ 9.7 คลิกเลอื ก Create Clipping Mask ภาพก็จะถูกบังหายไป เหลือเพียงส่วนท่ี อยู่ในกรอบของ Rectangle ท่ีเราสร้าง ขึน้ ร.อ.หญงิ รินดา ปอสี ผู้จัดทา
21 ในกรณที อี่ ยากใส่ฟลิ เตอร์ใหก้ ับภาพเพื่อความสวยงาม สามารถทาไดโ้ ดยไปเปลย่ี นสใี หก้ ับ Rectangle 9.8 ดับเบิลคลิกท่ีเล เยอร์ Rectangle 10.เลือกสีที่หน้าต่าง ถาดสี จากนั้นคลิก OK ภ าพ ก็ จะ ถูก ใ ส่ ฟิลเตอร์เป็นสีต่างๆ ก็ จ ะ ท า ใ ห้ ภ า พ ดู สวยงามยิ่งขนึ้ 10. ใสข่ อ้ ควำมใหก้ บั แบนเนอร์ ใส่ข้อความให้กับแบนเนอร์ภาพแบนเนอร์จะทาหน้าที่เป็นแบนเนอร์ได้ดียิ่งข้ึน หากมีข้อความ เด่นๆ โดนๆ เปรียบเสมือนข้อความพาดหัวข่าวตามหนังสือพิมพ์ วิธีการก็ใช้เครื่องมือเขียนข้อความ จากนั้นก็ ตกแตง่ สสี นั ขนาด ตามตอ้ งการ 10.1 คลกิ เลือกเคร่ืองมือสร้างข้อความ 10.2. รบั แตง่ รปู แบบตวั หนังสือ และสี 10.3 คลิกตรงตาแหน่งทตี่ ้องการแลว้ เขียนข้อความ ร.อ.หญงิ รนิ ดา ปอสี ผู้จัดทา
22 เมอื่ ใส่ข้อความแล้ว แบนเนอร์ ก็จะดมี ีชวี ติ ชีวาข้ึนมาอกี ทนั ที 11. กำรออกแบบปมุ่ ใหก้ ับเว็บไซต์ ปุ่ม ถอื ว่าเปน็ สง่ิ ทพ่ี บเหน็ บอ่ ยมากในเวบ็ ไซต์ และมีหลากหลายรูปแบบ ข้ึนอยู่กับช่วงยุคช่วงสมัย ในท่นี ี้ผ้เู ขียนจะแนะนาวธิ ีการสรา้ งปมุ่ ในรูปแบบ Flat design เพื่อใหเ้ ขา้ กับยคุ สมยั ในปัจจบุ ัน สร้ำงปมุ่ แบบโปรง่ แสง 11.1 คลิกเลือกเครื่องมือ Rounded Rectangle Tool หรือ เครือ่ งมอื วาด รปู วงรี 11.2 หลงั จากนนั้ คลิกเลือก สีพืน้ ของ รูปทรง ใหเ้ ปน็ ไม่มสี ี 1 1 . 3 เ ลื อ ก สี เ ส้ น ข อ ง รปู ทรงใหเ้ ปน็ สีขาว (สามารถเลือกเป็นสอี นื่ ๆได้) ร.อ.หญิง รนิ ดา ปอสี ผู้จดั ทา
23 11.4 คลกิ ซา้ ยคา้ งไว้ แลว้ ลากออกมาตามแนวดังภาพตวั อยา่ ง เพ่อื วาดปมุ่ ใช้เทคนิคการเขยี นขอ้ ความดงั ตัวอย่างในข้นั ตอนที่ผา่ นมา เขียนขอ้ ความใหก้ ับป่มุ ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ัดทา
24 ถงึ ข้นั ตอนน้ีเราก็จะได้ส่วนหัวเว็บไซต์ซงึ่ ประกอบไปด้วย โลโก้ เมนู และภาพแบนเนอร์เสรจ็ เรยี บรอ้ ยแลว้ 12. ออกแบบส่วนเน้ือหำเว็บไซต์ ส่วนท่ีเป็นเน้ือหาเว็บไซต์อาจมีองค์ประกอบที่หลากหลาย ขึ้นอยู่กับข้อมูลเว็บไซต์ในแต่ละเว็บ ดังนั้นเพื่อ เป็นการแบ่ง สัดส่วนในการใส่องค์ประกอบในแต่ละส่วน เราจะใช้เส้นไกดล์เป็นตัวแบ่ง โดยลากเส้นไกลด์ออกมา จากไมบ้ รรทัด ดงั ภาพ 1 คลิกลากเสน้ ไกลด์ เพ่อื จัดแบ่งสัดส่วน ในการออกแบบ องคป์ ระกอบใหง้ ่าย ขนึ้ ร.อ.หญงิ รินดา ปอสี ผ้จู ัดทา
25 13. ใสร่ ำยละเอยี ดเข้ำไป ใชเ้ ทคนิคในขน้ั ตอนทผี่ า่ นๆมา ออกแบบส่วนเนื้อหา 13.1 ใสภ่ าพประกอบ รปู ภาพหากเราไม่สามารถวาดเองไดก้ ็สามารถไปดาวน์โหลดไดต้ ามเว็บไซต์ที่แจก ฟรี เชน่ freepik.com 13.2 ใช้คลิกมือสรา้ งข้อความจากนั้นเขยี นข้อความ ปรบั ขนาดตัวหนังสอื และสีทาซ้าตามข้นั ตอนท่ี1 และ ใหค้ รบทัง้ 4 ส่วน ตามตัวอย่าง 14. ใสป่ ุ่มลงในเนื้อหำ ข้นั ตอนน้ีก็ใชเ้ ทคนิคเดียวกับขนั้ ตอนการสรา้ งปุ่มในแบนเนอร์ แตค่ ราวน้เี ราลองมาสร้างปุ่มแบบมีสสี ัน 14.1 เลอื กเครือ่ งมอื เพ่ือสรา้ งรปู วงรี 14.2 เลือกสีพ้นื ของปุ่มทต่ี ้องการ 14.3 จากนั้นคลกิ วาดปุ่มในตาแหน่งดังภาพ แลว้ เขยี นข้อความลงบนป่มุ ควรเลือกสีข้อความให้ตัดกันกับสี ปุ่ม เพ่ือให้อ่านข้อความบนปุ่มได้อย่างชดั เจน 15. นำป่มุ ทส่ี รำ้ งข้นึ ไปใชใ้ นส่วนอืน่ ๆ ปุ่มที่สร้างข้ึนแล้ว ในกรณีที่เราต้องการใช้งานปุ่มแบบเดียวกัน ในส่วนอื่นๆ สามารถ Copy ไปใช้ในส่วน อื่นๆได้เลย โดยไมต่ ้องสร้างใหม่ ซง่ึ มวี ธิ ีการดังนี้ 15.1 คลกิ เลือกเคร่ืองมือ Move Tool 15.2 ลากเมาสค์ รอบปุ่มที่ตอ้ งการ ร.อ.หญิง รนิ ดา ปอสี ผู้จดั ทา
26 15.3 จากนั้นกด Alt ค้างไว้ พรอ้ มกับคลกิ ซ้ายท่เี มาทแ์ ลว้ ดึง ออปเจ็คออกมาในตาแหน่ง ดังภาพ ทาซ้าขนั้ ตอนจนได้จานวนปมุ่ ท่ีตอ้ งการ ร.อ.หญิง รนิ ดา ปอสี ผ้จู ดั ทา
27 16. ออกแบบเน้ือหำในสว่ นอ่ืนๆ ก่อนท่ีจะออกแบบเน้ือหาเพ่ิมอีก ต้องทาการขยายขนาดของแผ่นงานก่อน เน่ืองจากขนาดที่เรากาหนดไว้ ตอนแรกนนั้ เริม่ จะไมพ่ อซะแลว้ โดยเราจะขยายแคใ่ นสว่ นของความสูงเท่านน้ั วิธีการดังน้ี คลิกท่เี มนู images > Canvas size… หลังจากนั้นหน้าตา่ งกาหนดค่าจะปรากฏข้ึน 16.1 คลิกในตาแหน่งดังภาพเพ่ือกาหนดตาแหน่งหลักในการขยาย ตาแหน่งดังภาพจะทาให้ส่วนท่ีขยาย น้ัน ถกู ขยายออกจากตาแหน่งก่ึงกลางบนเมื่อเราเพ่ิมขนานความสูง จะทาให้ส่วนท่ีขยายมีการกระจายออกไปตาม แนวลูกศร 16.2 ทาการเปลีย่ นคา่ ความสงู เปน็ 2000 pixels (ไม่พอคอ่ ยมาเพิม่ ตรงนีใ้ หม่) เสร็จแล้วคลกิ OK หลังจากนน้ั เรากจ็ ะได้พ้ืนทใี่ นการออกแบบเพิ่มข้นึ มา ดังส่วนที่เป็นสีเขยี วตามตัวอยา่ ง ร.อ.หญงิ รนิ ดา ปอสี ผู้จัดทา
28 17. สร้ำงส่วนเน้ือหำใหม่ พร้อมกบั เปล่ยี นสีพื้นหลงั ในข้นั ตอนนีผ้ ้เู ขียนมีจุดประสงคท์ ่ีอยากจะถา่ ยทอดเทคนิคในการออกแบบใหห้ ลากหลาย โดยจะเปน็ การ สร้างพืน้ หลงั ให้กับสว่ นท่เี ปน็ เนอื้ หาอ่นื ๆ ให้ดมู ีความสวยงามมากยง่ิ ขน้ึ โดยมีขั้นตอนดงั น้ี 17.1 คลิกเลอื กเครอื่ งมือRectangle Tool (เคร่อื งมอื วาดรปู ส่ีเหลยี่ ม) 17.2 เลอื กสีพื้น ในตัวอยา่ งเลือกสีเทาอ่อนๆ 17.3 คลิกซา้ ยคา้ งไว้ แล้วลากออกมา ในตาแหน่งดังภาพ จากน้นั กจ็ ะได้ส่วนของเนื้อหา พร้อมมสี ีพนื้ หลังเปน็ ทเี ทา ดังภาพ ร.อ.หญิง รนิ ดา ปอสี ผู้จดั ทา
29 18. ใส่รูปภาพและช่อื ทีมงานลงไปในส่วนเนอื้ หาที่เพ่ิมข้นึ ใหม่ แล้วปรับขนาดภาพ และจัดตาแหนง่ ใหไ้ ดต้ าม ตัวอยา่ ง 19. ออกแบบสว่ นทา้ ย (Footer) ใหก้ บั เวบ็ ไซต์ สว่ นทา้ ยของเวบ็ ไซต์ เปน็ สว่ นทสี่ าคัญอีกส่วนหน่ึง โดยส่วนใหญแ่ ลว้ ส่วนน้จี ะเอาไว้แสดง Sitemap หรอื ลิงคเ์ ชือ่ มโยงไปใหอ้ ื่นๆ ของเวบ็ ไซต์ รวมถึงข้อมลู การติดต่อและรายละเอียดเกีย่ วกบั ลิขสิทธิข์ องเวบ็ ไซต์ ออกแบบส่วนทา้ ย 19.1 ใชเ้ ครอื่ งมอื เขียนข้อความเขียนข้อความดังตวั อยา่ ง 19.2 เขียนรายละเอียดอ่นื ๆ 19.3 ใส่ไอคอนสาหรบั Social Media อนื่ ๆ ร.อ.หญิง รนิ ดา ปอสี ผูจ้ ัดทา
30 ออกแบบสว่ นท้าย 1. เลือกเครื่องมือสร้างรปู วงรี 2. เลอื กสพี ืน้ เปน็ สีขาว 3. คลกิ ซา้ ยค้างไวต้ ามแนวลกู ศร เพ่อื สรา้ งฟอร์มดังภาพ 4. เขยี นข้อความกากบั ไว้ในชอ่ ง ซงึ่ ถ้าเราเขยี นเป็น html ข้อความนจี้ ะเรยี กวา่ Placeholder เว็บไซตท์ ่ีออกแบบเสรจ็ สน้ิ จะมีลกั ษณะ ดังนี้ ร.อ.หญงิ รนิ ดา ปอสี ผูจ้ ัดทา
31 เม่อื เราไดอ้ อกแบบเวบ็ ไซต์เสรจ็ ส้ินแลว้ ขั้นตอนตอ่ ไปกจ็ ะเปน็ การตดั เอาสว่ นต่างๆ โดยส่วนใหญแ่ ลว้ เรา จะตัดเอาเฉพาะสว่ นท่ีเป็นรปู ภาพ เพ่อื เตรยี มไปใชใ้ นการเขยี นโคด๊ HTML ออกมาเปน็ เวบ็ ซง่ึ มวี ิธีการดงั นี้ 1.คลิกเลอื กเครอ่ื งมือ Slice Tool 2. คลกิ ลากเพ่ือตีกรอบ ครอบส่วนทเ่ี ปน็ รปู ภาพท่ี ต้องการ ทาตามขน้ั ตอนน้ีในทกุ ๆ ส่วน ท่ีต้องการ Export ภาพออกมา เพ่ือนาไปใช้ในการเขยี นโค๊ด ร.อ.หญิง รนิ ดา ปอสี ผจู้ ัดทา
32 ทาการ Export ภาพที่เราตัดเอาไว้ออกมาเป็นไฟล์ภาพ เพ่ือนาไปใช้งาน ในกรณีท่ีเราต้องการภาพท่ีมีพ้ืน หลงั โปร่งแสง ให้ทาการคลกิ ปิดการแสดงของเลเยอร์ท่ีทาหน้าท่ีเป็นพื้นหลังออกก่อน ดังตัวอย่าง แต่ถ้าไม่ต้องการ ให้โปรง่ แสงก็ให้ขา้ มข้ันตอนนีไ้ ป 1 คลกิ ท่ชี อ่ งใหส้ ัญลกั ษณ์ลกั ษณะรูปตาหายไป 2.จากนัน้ พนื้ หลังกจ็ ะเปลยี่ นเปน็ รปู ลายตารางหมากฮอต ดังภาพ แสดงว่าภาพทเ่ี รากาลังจะ Export ไป น้นั จะมพี น้ื หลังโปรง่ แสง ทำกำร Export ภำพเพอื่ ไปใช้งำนสำหรับเว็บ 1. คลิกที่เมนูFile จากนน้ั มาท่ีexport แล้วเลือก Export for web.. ดงั ภาพ ร.อ.หญงิ รินดา ปอสี ผจู้ ดั ทา
33 จากนน้ั หนา้ ตา่ งการ Export ก็จะแสดงขน้ึ ใหท้ าตามคาแนะนาดังนี้ 1. คลกิ ท่เี คร่ืองมือ Slice tool 2. กด Shift คา้ งไวแ้ ลว้ คลิกเลอื กสว่ นทีต่ อ้ งการ Save (ในส่วนนี้จาเปน็ ตอ้ งเลอื ก เพราะไม่เชน่ นั้นแล้ว เม่อื เรา Save โปรแกรมจะ Save ให้ทกุ สว่ น รวมถงึ ส่วนที่เราไม่ได้ทาการ Slice หรือ ตดั เอาไว้ 3. เลอื กไฟลภ์ าพเป็น PNG-24 4. คลิกทปี่ ุ่ม Save.. 5. หลังจากน้ันให้เลือกตาแหน่งทต่ี ้องการบนั ทึกภาพ 6. เลือกคา่ ตา่ งๆ ดงั น้ี Format เลอื กเป็น Images Only Settings: เลอื กเปน็ Default Set.. Slices เลอื กเป็น Selected Slices จากนั้นคลิกท่ปี ุ่ม Save ร.อ.หญงิ รินดา ปอสี ผู้จัดทา
34 เมื่อเปดิ ดูที่ Folder ทเ่ี ราเกบ็ ภาพไวก้ จ็ ะปรากฏภาพทเ่ี ราได้ตัดเอาไว้อยใู่ น Folder Images ดังภาพ จริงๆ แล้วในข้นั ตอนนีเ้ ราอาจจะค่อยๆทยอย Export ออกมาเปน็ ชุดๆกไ็ ด้ในระหวา่ งการเขยี นโค๊ดเว็บไซต์เขยี นไป ด้วย อยากได้ภาพส่วนไหนเพ่ิมเตมิ ก็ค่อยไป Slice ใน Photoshop แล้ว Export ออกมาเพิ่ม ร.อ.หญิง รนิ ดา ปอสี ผู้จัดทา
35 ภำษำ HTML และ CSS เบื้องต้นด้วยโปรแกรม Sublime Text 3 HTML คือ ภาษาหลักท่ีใช้ในการเขียนเว็บเพจ โดยใช้Tag ในการกาหนดการแสดงผลต่างๆ ไม่ว่าจะเป็น ข้อความรูปภาพ หรือวิดีโอ ซ่ึง HTML ย่อมาจากคาว่า Hypertext Markup Language โดย Hypertext หมายถึง ขอ้ ความทเ่ี ช่ือมตอ่ กันผ่านล้ิง (Hyperlink) Markup language หมายถึงภาษาที่ใช้Tag ในการกาหนดการแสดงผล ส่ิงตา่ งๆท่ีแสดงอยบู่ นเว็บเพจ CSS คือ Cascading Style Sheet หรือ Style sheet ทีใ่ ชก้ าหนดรูปแแบบหนา้ ตาของไฟล์HTML น่ันเอง CSS สามารถใชก้ าหนดรปู แบบ Font สีฉากหลงั และอื่นๆ ท่แี สดงบนหนา้ เว็บไชต์ท้ังหมด การใช้CSS มีทั้งแบบการ เขียนไว้ใน Tag ของ HTML โดยตรง การเขียนไวใ้ นสว่ น <HEAD> ในไฟล์Webpage นั้นๆ และการเขียนแบบแยก ไว้อกี ไฟล์แล้วคอ่ ยนาเข้ามาใช้ในหน้า Webpage ในตาราเล่มน้ีผู้เขียนจะสอนวิธีการแบบเขียนโค๊ดโปรแกรม ด้วยโปรแกรมในการเขียนโค๊ดโดยเฉพาะ เพื่อให้ผู้อ่านน้ัน ได้จะได้มีพื้นฐานทางด้านการใช้ภาษา HTML และ CSS หากผู้อ่านมีพื้นฐานที่แน่นแล้ว จะม ประโยชน์มากในการนาไปตอ่ ยอดในการสร้างเว็บไซต์แบบมืออาชีพอีกตอ่ ไป โปรแกรม Sublime Text 3 Sublime Text 3 เปน็ โปรแกรมทใ่ี ชใ้ นการเขีย โค้ดซ่ึงสนับสนนุ ภาษาท่ีหลากหลาย C, C++, C#, CSS, D, Erlang,HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python,R, Ruby, SQL, TCL, Textile และ XML และเป็นโปรแกรมทท่ี างานได้เรว็ ไม่ตอ้ ง ใช้เครือ่ งคอมพิวเตอรท์ ่ีประสิทธภิ าพสูงมากก็ได้ กำรตดิ ต้ังโปรแกรม Sublime Text 3 ดาวนโ์ หลดโปรแกรมท่ีhttps://www.sublimetext.com/3 จากนน้ั เลอื กเวอรช์ ่นั ตามระบบปฏบิ ตั กิ าร ของเคร่อื งผู้อ่านที่ใช้งานอยู่ เชน่ หากใช้windows แบบ 64bit ก็ให้โหลด Windows 64 bit ท้งั นเี้ คร่ืองผู้เขยี นใช้ mac os ก็จะโหลดตวั สาหรับ mac os มา ท้งั นแี้ ม้โปรแกรมจะทางานในระบบทีต่ า่ งกัน แต่หน้าตาโปรแกรมกจ็ ะ คลา้ ยกนั มาก จึงไมเ่ ป็นอปุ สรรค์ในการเรยี นร้แู ตอ่ ย่างใด ร.อ.หญงิ รินดา ปอสี ผจู้ ดั ทา
36 หลังจากที่ได้ดาวน์โหลดไฟล์ติดต้ังมาแล้ว ให้ดับเบิลคลิก แล้วทาตามขั้นตอนการติดต้ัง เม่ือติดต้ัง โปรแกรมสาเร็จก็จะได้หน้าโปรแกรมดงั ภาพ กำรใช้งำนโปรแกรม Sublime Text 3 กำรสร้ำงโปรเจ็คเพอ่ื เขยี นโคด๊ เวบ็ ไซต์ 1. สร้างโปรเจ็ค การสร้างโปรเจ็คสาหรับเขียนโค๊ดเว็บไซต์หรือ HTML นั้น เราจะต้องสร้าง Folder เพอ่ื สาหรบั เก็บเว็บไซต์ของเรากอ่ น เช่น ผู้เขียนสร้าง Folder ใช้ช่ือวา่ MyWeb เอาไว้ที่หนา้ Desktop ดงั ภาพ ร.อ.หญงิ รินดา ปอสี ผู้จดั ทา
37 การตงั้ ช่อื Folder Project นัน้ ควรจะต้ังช่อื เป็นภาษาอังกฤษ และควรตัง้ ช่ือใหต้ ิดกนั (ไม่เวน้ วรรค) แต่ใน กรณีที่ต้องการตั้งช่อื ใหด้ มู ีความห่างของช่อื เชน่ my web กแ็ นะนาใหใ้ ชเ้ คร่ืองหมาย _ (Under scroll) แทน เชน่ my_web เปน็ ต้น ทงั้ นีเ้ พ่ือไมใ่ หเ้ กดิ ปัญหาทีอ่ าจจะเกดิ จากในกรณกี ารอ้างอิงช่อื ในภาษาคอมพวิ เตอร์ เปิด Folder Project ของเราด้วยโปรแกรม Sublime Text โดยคลิกท่เี มนูFile > Open แลว้ เลือก ตาแหน่งทเี่ กบ็ Folder Project 2. เมอื่ เปิดขน้ึ มาแล้ว หน้าโปรแกรมกจ็ ะมลี กั ษณะดงั ภาพ ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ัดทา
38 3. ทดลองสร้างไฟล์โปรแกรมแรกของเรา โดยคลิกที่ File > New file หน้าเอกสารกจ็ ะปรากฏข้ึนที่ Panel ทดลองเขยี นโค๊ด HTML ลงไปดงั ภาพ จากนั้นทาการบนั ทกึ โดยคลิกท่ี File > Save as ตั้งชอ่ื ไฟล์วา่ webpage1.html และเลือกที่ จดั เกบ็ ไฟล์ คือโฟลเดอร์ MyWeb ของเรา จากน้ันกดปุ่ม Save ร.อ.หญงิ รินดา ปอสี ผจู้ ดั ทา
39 4. กลบั มาเปดิ ดูในโฟลเดอร์โปรเจค็ ของเรา จะเห็นว่ามีไฟล์ webpage1.html ที่เราสร้างข้ึน 5. ให้ลองดบั เบิลคลกิ ท่ีไฟล์ จะปรากฏหน้าเวบ็ ดงั ภาพ ร.อ.หญงิ รนิ ดา ปอสี ผ้จู ัดทา
40 ภำษำ HTML เบอ้ื งต้น โครงสร้ำงภำษำ โครงสรา้ งของ HTML จะประกอบไปดว้ ยส่วนของคาสั่ง 2 สว่ น คือ ส่วนทเ่ี ป็น สว่ นหัว (Head) และสว่ นท่ี เปน็ เนื้อหา (Body) โดยมรี ูปแบบคาสง่ั ดังน้ี คำสงั่ เริ่มตน้ สำหรบั HTML คาสัง่ หรือ Tag ท่ีใชใ้ นภาษา HTML แบง่ ออกเปน็ 2 ประเภทคือ 1. แท็กเด่ยี ว คอื คาส่ังทม่ี ีคาสัง่ เพียงอย่างเดียว ซ่ึงสามารถใช้และสน้ิ สุดคาสงั่ ไดด้ ว้ ยตัวเอง เช่น ข้อความ... <br> <hr> <! – ขอ้ ความ -> 2. แท็กคู่ คือ คาสั่งท่ีต้องมีส่วนเริ่มต้นและส่วนจุดจบของคาส่ังนั้นๆ โดยแท็กท่ีเป็นส่วนจบน้ันจะมี เคร่อื งหมาย (/) ตดิ เอาไว้ เชน่ <html> สว่ นของเนอื้ หา ... </html> <center> ข้อความ... </center> <p> ข้อความ... </p> ร.อ.หญิง รนิ ดา ปอสี ผจู้ ัดทา
41 คำสง่ั ทำหมำยเหตุ รูปแบบ <!-- ..... --> ตัวอยา่ ง <!-- END WEBSTAT CODE --> ข้อความที่อยใู่ นคาสัง่ จะปรากฏอยใู่ นโปรแกรม แต่ไม่ถกู แสดง บนจอภาพ กำหนดชุดตัวอกั ษรเพื่อให้รองรบั ภำษำไทย กาหนดค่าน้ลี งไปในส่วน HEAD <meta charset=\"UTF-8\"> กำรเขยี น Title การเขียน Title จะเขยี นเอาไว้ในส่วน HEAD ของเว็บไซต์ มรี ูปแบบการเขยี นดังน้ี <title>ยินดตี อ้ นรบั เข้าสูเ่ ว็บไซต์ รินดา</title> เมื่อลองบนั ทกึ แลว้ เปิดไฟล์น้ีบนบราวเซอร์ จะมีไทเทลิ แสดงอยบู่ นแทปดังภาพ ร.อ.หญงิ รนิ ดา ปอสี ผจู้ ัดทา
42 กำรเขียนข้อควำมด้วยแท็ก <p> การเขียนข้อความจะเขยี นเอาไว้ในส่วน body มีรปู แบบการเขียนดงั นี้ <p> ข้อความของเรา </p> เม่อื เปิดดูในบราวเซอรจ์ ะมีข้อความแสดงดงั ภาพ กำรเขียนหัวเรื่อง รปู แบบ <hx>ข้อความ</hx> ตัวอยา่ ง <h1>หัวขอ้ ใหญส่ ุด</h1> ในการกาหนดขนาดให้หัวเรื่องนั้นมกี ารกาหนด ไว้ 6 ระดับตงั้ แต่ 1 - 6 โดย x แทนตัวเลขแต่ละลาดับโดย H1 มีขนาดใหญ่ ทีส่ ดุ H6 เล็กทีส่ ดุ เมื่อตอ้ งการใช้หวั เรอ่ื งทม่ี ีขนาดตัวอักษรเทา่ ใดเขียนอยรู่ ะหวา่ ง <Hx>....</Hx> ตัวอย่ำงกำรเขียน ร.อ.หญงิ รินดา ปอสี ผจู้ ัดทา
43 กำรใส่รปู ภำพลงในเวบ็ เพจ รปู แบบ<IMG SRC=address ALT=text> SRC = ใสร่ ปู ภาพทตี่ ้องการลงไป ALT = text ใสข่ อ้ ความ เพือ่ เปน็ คาอธิบายรูปภาพที่นามาวางสาหรบั ผ้ใู ช้อนิ เตอร์เน็ตแบบเทก็ ซ์ เช่น เมื่อเปิดดูในบราวเซอร์ ร.อ.หญิง รนิ ดา ปอสี ผูจ้ ัดทา
44 จดั การโครงสร้างเวบ็ ไซต์ดว้ ย DIV แทก็ <div> เปรยี บเสมือนกลอ่ งบรรจุเน้ือหาตา่ งๆ ของเวบ็ ไม่ว่าจะเปน็ ข้อความ รูปภาพ หรือ อื่นๆ เรา จะใช้ <div> ในการแบ่งเน้ือหาต่างๆ ออกเป็นส่วนๆ หรือเป็นบล็อกๆ โดยปกติแล้วในการที่จะควบคุม <div> ให้ ไปอยู่ในตาแหนง่ ทีเ่ ราตอ้ งการน้นั จะใชร้ ว่ มกบั ภาษา css ซึ่งจะอธบิ ายในบทต่อๆ ไป <div> มีรปู แบบการเขยี นดังนี้ สว่ นทีข่ ีดเส้นใตส้ ีแดง เปน็ ภาษา css ทผี่ ้เู ขยี นแทรกเพิม่ เข้ามา เพ่ือใหแ้ ตล่ ะบล็อกน้นั มสี ีพ้นื หลัง จะไดม้ องภาพได้ ชดั เจน ดงั ภาพ ร.อ.หญิง รนิ ดา ปอสี ผจู้ ดั ทา
45 กำรเชอ่ื มโยงข้อมูล (Link) เวบ็ ไซตจ์ ะต้องประกอบไปดว้ ยหลายๆหน้าเวบ็ เพจ ในการท่จี ะเชอ่ื มโยงในแตล่ ะหน้าเวบ็ เข้าดว้ ยกนั หรอื แมก้ ระท้งั เช่ือมโยงไปยังหน้าเว็บภายนอก สง่ิ เหลา่ นี้เรียกวา่ ลงิ ค์ (Link) ซง่ึ มีรายละเอยี ดดงั น้ี ประเภทกำรเชือ่ มโยง - การเช่ือมโยงภายในเว็บไซต์ - การเชื่อมโยงข้อมูลนอกเว็บไซต์ - การเชื่อมโยงข้อมลู FTP - การเช่ือมโยงข้อมลู E-Mail กำรเช่อื มโยงภำยในเว็บไซต์ รูปแบบ <a href=\"ที่อยู่ไฟล์\">ข้อความ</a> ตวั อย่าง <a href=\"webpage2.html\">หน้าเว็บเพจท่ี 2 </a> การเชอ่ื มโยงข้อมลู นอกเวบ็ ไซต์ รปู แบบ <a href=\"http://www..........\">ขอ้ ความ</a> ตวั อย่าง <a href=\"้http://www.rtaf.mi.th\">เว็บไซต์กองทัพอากาศ </a> ตวั อย่าง <a href=\"http://www.driverzone.com\" target=\"_blank\"> Driver Zone </a> ตวั อยำ่ งกำรเขียน ร.อ.หญงิ รนิ ดา ปอสี ผ้จู ัดทา
46 โครงสรำ้ งตำรำง <table> <tr> <th> รายลละเอยี ดสว่ นหวั ตาราง</th> </tr> <tr> <td> รายละเอียดสว่ นเนือ้ หาในตาราง</td> </tr> </table> คำสงั่ คุณสมบตั ิ <TABLE>...</TABLE> <TR>...</TR> เปน็ คาส่งั เปิดปดิ ตาราง <TH>...</TH> ตารางตามแนวนอน เป็นการกาหนดแถวในตาราง <TD>...</TD> หวั ขอ้ ของ ตาราง ข้อความ ท่อี ยูใ่ น คาส่ัง จะถูก จดั ใหเ้ ป็น ตัวหนาและ กง่ึ กลาง โดย อัตโนมตั ิ เปน็ ราย ละเอยี ด ของตาราง เป็นการ กาหนดจานวน คอร์ลมั ของ ตาราง ตวั อยา่ ง ร.อ.หญิง รนิ ดา ปอสี ผู้จัดทา
47 ภำษำ css เบอ้ื งตน้ อย่างที่เคยเกร่านไว้ในหัวข้อก่อนหน้า สาหรับภาษา css นั้น เป็นภาษาท่ีใช้ในการจัดการเร่ืองรูปร่าง หน้าตา สีสันของเว็บไซต์ โดย css จะทาหน้าที่เข้าไปควบคุมการแสดงผลของโค๊ดคาส่ัง html อีกที เพื่อเป็นการ เรมิ่ ต้น ใหผ้ ู้อา่ นลองเขียนโคด๊ คาส่ัง css ดงั น้ี ลงไปในเอกสาร จากนนั้ เปดิ ทบี่ ราวเซอร์ จะเห็นวา่ สพี น้ื หลังนน้ั เปล่ียนไป ร.อ.หญงิ รนิ ดา ปอสี ผู้จดั ทา
48 รูปแบบกำรเขียนภำษำ CSS Selector เปน็ จุดท่ีตอ้ งการให้คาสง่ั CSS เขา้ ไปควบคุมการแสดงผล Selector อาจจะเปน็ tag เช่น p h1 Property h2 ก็ได้ หรืออาจจะกาหนดเป็น id , class กไ็ ด้ Value เป็นชือ่ คุณสมบัติทีต่ ้องการใชง้ าน เช่น color เปน็ ช่อื Property สาหรบั จัดการเรื่องสีของ ตวั หนังสอื เปน็ คา่ ของคุณสมบัตนิ นั้ ซง่ึ มีรปู แบบการใส่ค่าท่ีแตกต่างกันในแตล่ ะคุณสมบตั ิ เชน่ color: blue; ก็จะเปน็ การกาหนดค่าให้ตัวหนงั สือน้ันมีสีฟ้า CSS Selector เปน็ การกาหนดจดุ ท่ีต้องการใหค้ าส่งั css เขา้ ไปควบคุมการแสดงผล โดยหลกั ๆ แล้วการใช้ css selector จะมีอยู่ดว้ ยกัน 3 วธิ ีคือ Element Selector เป็นการสง่ั ให้คาสง่ั css เข้าไปควบคุมท่ีแท็กของ HTML โดยตรง เชน่ p{ text-align: center; color: red; } ผลลัพธท์ ่ีได้ จะทาใหข้ ้อความทอ่ี ยใู่ นแทก็ <p> อย่กู ึ่งกลาง และตัวหนังสอื มีสีแดง ID Selector เป็นการส่งั ให้คาส่งั css เขา้ ไปควบคมุ ที่แท็ก HTML ทม่ี ีการหนดแอท็ ทริบิว ID เอาไว้ เชน่ <p id=\"para1\">Hello World!</p> จากน้ันในการอ้างถึงคา่ ID จะใช้เครื่องหมาย # ทหี่ นา้ ชือ่ ID น้ันๆ เช่น #para1 { text-align: center; color: red; } ร.อ.หญงิ รินดา ปอสี ผ้จู ัดทา
49 Class Selector เปน็ การสง่ั ใหค้ าสง่ั CSS เข้าไปควบคมุ ที่แทก็ HTML ทีม่ ีการกาหนด แอ็ททริบวิ Class เอาไว้ เช่น <h1 class=\"center\">This heading will not be affected</h1> <p class=\"center\">This paragraph will be red and center-aligned.</p> จากนัน้ ในการอ้างถึงค่า Class จะใช้ . นาหน้าชอ่ื Class น้นั ๆ เช่น .center { text-align: center; color: red; } จะเห็นได้ว่า ID Selector และ Class Selector หลักการคล้ายกันแต่มีข้อแตกต่างกันตรงท่ี ข้อกาหนดในการ ใช้แอททริบวิ ID , Class ซ่งึ คา่ แอททรบิ วิ ID ในแต่ละแท็กนั้น จะต้องไม่เหมือนกัน ส่วนค่าของ Class ในแต่ละ แทก็ นั้นสามารถกาหนดคา่ ท่ซี า้ กนั ได้ วิธีกำรเขียน CSS เขียนแบบฝงั โค๊ดคำสง่ั เข้ำไปใน tag HTML โดยตรง เชน่ <p style=”color:red;”> ข้อความของฉนั </p> เขยี นไวใ้ นสว่ น Head ข อ ง HTML เชน่ โดยจะเขียนไวใ้ นแทก็ <style> <style>…………………….</style> ร.อ.หญงิ รนิ ดา ปอสี ผู้จัดทา
50 เขียนแยกเอำไว้ในไฟล์ .CSS ต่ำงหำก แล้วทำกำรเช่ือมโยงเข้ำมำในหน้ำเว็บไซต์ การเขียนแบบน้ีมี ข้อดีตรงท่ีเมือ่ เวลาต้องการปรบั เปล่ียนการแสดงผล ก็ปรับเพียงโค๊ดในไฟล์ .css ไฟล์เดียว ไม่ต้องมานั่งไล่ ปรับทีละไฟล์ในท่ีน้ีสมมุติว่าได้เขียนคาส่ัง css เอาไว้ในไฟล์ style.css รูปแบบการเชื่อมโยงไฟล์เข้ามาใน ไฟลเ์ ว็บเพจของเรา จะเปน็ ดงั นี้ <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"> การใชง้ านภาษา HTML และ CSS ที่กล่าวมาในข้างต้นน้ัน เป็นเพียงพื้นฐานในการใช้งาน เพื่อให้ผู้อ่านได้ พอมองเห็นภาพรวมในการใช้ HTML + CSS ในการประยุกต์ใชง้ านจรงิ ผู้อ่านจะต้องศึกษาเพ่ิมเติมในเรื่องของการ ใชก้ าหนด HTML TAGตา่ งๆ และการกาหนด CSS Property และ Value ร.อ.หญงิ รนิ ดา ปอสี ผู้จดั ทา
Search
