Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - บทสรุป

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Color

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

และแล้วเราก็ทำได้! เราได้สร้างเว็บไซต์เว็บแรกจากที่ไม่มีอะไรเลยและเราก็ได้คุยเกี่ยวกับส่วนประกอบพื้นฐานของการออกแบบเช่นพื้นที่ว่าง รูปแบบตัวอักษร และ เรื่องเกี่ยวกับสี

ในบทเรียนสุดท้ายนี้เราจะรีวิวทุกสิ่งทุกอย่างอย่างรวดเร็ว เราได้เรียนรู้เกี่ยวกับการสร้างเว็บไซต์และการออกแบบ รีวิวมันและเอามันขึ้นบนอินเทอร์เน็ต ดังนั้นเราสามารถเอาให้เพื่อนๆหรือครอบครัวดูโดยใช้เว็บแอดเดรส (Web Address) และมาดูเกี่ยวกับแหล่งข้อมูลอ้างอิงที่จำเป็นนิดหน่อย เพื่อต่อยอดการเรียนของเรา

อย่าลืมที่จะถามคำถามสุดท้ายในกล่องคอมเม้นต์ด้านล่าง

ทบทวนบทเรียน

ลองมองดูแผนที่ซีรีย์ที่เราผ่านมานี้เพื่อดูว่าตอนนี้เราอยู่ที่ไหน

การเริ่มต้นและการเตรียมพร้อม

เราเริ่มต้นบทเรียนนี้โดยการเกริ่นนำว่าเว็บนั้นทำงานได้อย่างไร ในการที่คอมพิวเตอร์ที่ต่างกันสองเครื่องติดต่อสื่อสารกันโดยพวกมันติดต่อกันผ่านอินเทอร์เน็ตโดยใช้ ISP (Internet Service Provider)

เพื่อทำให้คนอื่นๆ สามารถเข้ามาดูเว็บไซต์ของเราบนอินเทอร์เน็ตได้ ไฟล์เหล่านี้ต้องส่งผ่านหรือย้ายไปไว้ที่เซิฟเวอร์ (เครื่องคอมพิวเตอร์หลักที่ต่อตรงกับอินเทอร์เน็ต) เราจะทำสิ่งเหล่านี้กันเพิ่มเติมในส่วนด้านล่างนี้

หน้าที่บนอินเทอร์เน็ตของนักออกแบบเว็บ มันเป็นงานของเราที่จะให้แน่ใจว่าเว็บไซต์นั้นน่าตื่นตาตื่นใจและง่ายในการใช้อย่างที่สุดสำหรับผู้ใช้งานของเราเข้ามาอ่านและท่องไปบนเว็บ

ด้วยเป้าหมายที่วางไว้ในใจ เราจะตั้งค่าสิ่งก่อสร้างในเมืองในฝันเราด้วย HTML และ CSS หลังจากลองวาดภาพพวกมันลงบนกระดาษแล้ว ในการเตรียมส่วนนี้ของการดำเนินงาน เราจะต้องเรียนรู้ทั้งหมดเกี่ยวกับการตั้งชื่อไฟล์และการจัดการไฟล์ทั้งหมด

เรารู้ขณะนี้ไฟล์ HTML หลักของเรามักจะชื่อ index.html และรูปภาพอื่นๆ ใดๆ ก็ตามจะอยู่ที่โฟลเดอร์ของเราจะขึ้นตรงกับแอตทริบิวต์ src ใน HTML

สุดท้าย เราได้เลือก text editor และเริ่มต้นอย่างเป็นทางการในการเขียน HTML และ CSS เสียที

การสร้างเว็บไซต์ด้วย HTML และ CSS

เพื่อสร้างเว็บไซต์เมืองในฝันของเรา เราจะเริ่มใช้โครงสร้าง HTML จากนั้นก็ใส่ไปด้วยเนื้อหา

โครงสร้างนั้นจะถูกสร้างขึ้นด้วยอิลิเมนต์หลากหลายใส่ไว้อยู่ภายในอิลิเมนต์หลัก html และจากจุดเริ่มต้นนี้ ทำให้การใส่เนื้อหาของเราเป็นไปได้ด้วยดี

เมื่อเนื้อหาพร้อมแล้ว เราก็ได้เริ่มสไตล์ทุกอย่างด้วย CSS อย่างแรกที่เราต้องการเชื่อมสองเอกสารเข้าด้วยกันใน head ของ HTML

ในไฟล์ CSS เรายังสามารถประกาศสี ขนาด เลย์เอ้าท์ และ อิลิเมนต์อีกมากภายในเอกสาร HTML เพื่อให้ตรงกับการออกแบบที่เสร็จสมบูรณ์

รูปภาพ (Image)

ในส่วนนี้ยังมีซีรีย์ที่เสร็จแล้วในบทเรียนที่เราคุยเกี่ยวกับภาพที่แตกต่างกันที่ให้เราดู เราได้คุยเกี่ยวกับการใส่พวกมันใน HTML ของเราและเพิ่มเอฟเฟ็กต์บางอย่าง เราสามารถใส่มันไปที่รูปภาพด้วย CSS เช่นการเปลี่ยนค่า opacity ให้พวกมัน

และอย่างที่กล่าวถึง รูปภาพทั้งหมดที่ถูกใช้ในเมืองในฝันซีรีย์จะเป็นไฟล์ SVG หมายถึงพวกมันสามารถย่อขยายขนาดได้ไม่จำกัดและไม่สูญเสียคุณภาพเมื่อแก้ไขมัน

พื้นฐานการออกแบบ

หลังจากที่เราได้สร้างเว็บไซต์แล้ว เราจะมาทบทวนถึงแนวคิดพื้นฐานการออกแบบที่ช่วยเราถึงอารมณ์ ความรู้สึกและการการใช้งานเว็บไซต์

เนื้อหาคือส่วนที่สำคัญที่สุดของการออกแบบเว็บ ดังนั้นหลังจากจัดการเรียบร้อยแล้วว่าเนื้อหาของเรานั้นมีประโยชน์ เป็นที่ต้องการ และถูกคัดกรองมาอย่างดี เราก็มาดูเรื่องมุมมองของเว็บต่อได้เลย

ลำดับชั้นของมุมมองนั้นสำคัญสำหรับเว็บไซต์ ก็มีเรื่องที่ต้องดูเช่น ขนาดตัวอักษร สี และพื้นที่ว่าง อย่างเช่นบอลลูนด้านบนถูกออกแบบเพื่อดึงดูดสายตาจากวัตถุอื่นๆ

การออกแบบตัวอักษร (Typography)

การออกแบบตัวอักษรอยู่ทุกๆที่ที่เราเห็นตัวอักษรและคือหนึ่งสิ่งที่สำคัญของการออกแบบเว็บ ผู้ใช้งานของเราต้องการที่จะสามารถอ่านเนื้อหาของเราได้แต่เราก็ยังต้องการให้แน่ใจว่าฟ้อนท์ที่เราเลือกนั้นเข้ากับโทนและความรู้สึกของเนื้อหาในมุมมองการออกแบบของเรา

สี (Color)

ในส่วนของซีรีย์นี้ เราสรุปบทเรียนเกี่ยวกับทฤษฏีสี ความหมายของสีบางสี ระบบสีที่แตกต่างกันสำหรับเว็บไซต์ และทำอย่างไรที่จะเลือกชุดสีให้ประสบผลสำเร็จ

ไปที่วงล้อสีปฐมภูมิและสีทุติยภูมิ ช่วยให้เราเข้าใจมากขึ้นในวิธีการสร้างสีนั้นขึ้นมาและทำมีบางสีถึงเข้ากับสีอื่นได้แต่บางสีนั้นไม่

ถัดจากนี้ มาดูวิธีเอาเว็บไซต์นั้นขึ้นเว็บจริงๆ กันเสียที!

เอาไฟล์เว็บไซต์ขึ้นเว็บ

หลังจากที่เราคุยเกี่ยวกับการเริ่มต้นในซีรีย์นี้ เว็บไซต์นั้นวางไว้ Locally หรือคอมพิวเตอร์ของเราที่อยู่เดี่ยวๆ ที่ไม่ได้อยู่บนอินเทอร์เน็ต ในจุดนี้ เราไม่สามารถส่งตรงถึงเพื่อนและครอบครัวเพื่อให้พวกเขาเข้าถึง ดังนั้นพวกเขาไม่สามารถดูงานที่น่าตื่นตาตื่นใจของเราได้

หลังจากที่เราได้คุยในบทเรียนแนะนำ ไฟล์ทั้งหมดต้องการอยู่บนเซิฟเวอร์เพื่อให้คนอื่นดูพวกมันบนอินเทอร์เน็ต

โน้ตสั้นๆ ก่อนที่จะเดินหน้าถัดไป

การทำให้เว็บไซต์ขึ้นไปอยู่บนอินเทอร์เน็ตนั้นบ่อยครั้งเกี่ยวกับการซื้อของออนไลน์และต้องมีการใช้อีเมล์ ถ้าคุณยังเด็กอยู่ที่จะดำเนินการสิ่งเหล่านี้ มันดีที่สุดที่จะเรียกผู้ใหญ่กว่ามาช่วยดำเนินการให้

โฮสติ้ง (Hosting)

มีบริการจำนวนมากมายที่ช่วยให้เราโฮสต์ (Host) หรือวางไฟล์ของเราไว้ ที่สามารถทำให้มันถูกเข้าถึงได้ผ่านอินเทอร์เน็ต สำหรับซีรีย์นี้เราจะไปโฟกัสที่ NeoCities และแนวคิดพื้นฐานเกี่ยวกับโดเมนเนม

NeoCities

NeoCities นั้นเป็นตัวเลือกที่ฟรีและยอดเยี่ยม สำหรับการวางไฟล์ไว้บนเว็บ แม้ว่าเราจะยังต้องการอีเมล์แอดเดรสเพื่อลงทะเบียนเข้าใช้มัน

ลองมาดูวิธีการเป็นขั้นๆ ในการเอาไฟล์ไปวางบนโฮสต์ที่นี่

  • เพื่อลงทะเบียน เราต้องการเลือก username (ชื่อเว็บไซต์) และใส่อีเมล์ ที่จุดๆ นี้เราต้องการใส่ชื่อเว็บด้วยบางอย่างที่แตกต่างจากอะไรที่เราสร้างด้านล่าง และชื่อของเว็บไซต์นั้นต้องทำให้มันไม่ซ้ำกับคนอื่น (unique) ยกตัวอย่าง แทนที่จะใช้ tutsplustown เป็นชื่อ username คุณควรใช้บางอย่างที่ที่ยังไม่มีคนเลือกเช่นเพิ่มชื่อของคุณต่อเข้าไป janetutsplustown (อีกครั้ง เพียงแค่นี้จะมีให้ใช้และไม่เคยถูกใช้โดยผู้ใช้ NeoCities คนอื่นๆ เว็บไซต์จะอยู่ที่ตำแหน่ง (username).neocities.org
  • เพื่อเราลงทะเบียนเรียบร้อยแล้วทั้งหมด เราสามารถเลือกปุ่มสีแดงใหญ่ "Edit Site" ที่หัวด้านบนขวาของหน้าจอ
  • เราจากนั้นมันจะพาเราไปที่ Dashboard ที่ๆ เราสามารถเพิ่มไฟล์และโฟลเดอร์ เรายังต้อง upload ไฟล์สองไฟล์ ไฟล์ HTML และ ไฟล์ CSS สำหรับเว็บไซต์และสร้างโฟลเดอร์มาอีกหนึ่งคือ images ภายใต้ images นั้นเราจะเพิ่มรูปสี่รูปเข้าไป
  • เมื่อไฟล์นั้นได้ถูกส่งเข้าเว็บของเราแล้ว ก็จะถูกวางไว้ที่โฮสต์ NeoCities มันก็จะมีลิ้งค์ไปยังเว็บไซต์ที่อยู่ด้านบนของเพจ

และนี่คือสิ่งที่เราเห็นเมื่อคลิก tutsplustown.neocities.org

ประโยชน์อื่นๆของบริการนี้คือคุณไม่ต้องการไปยุ่งเกี่ยวกับโดเมน (ที่อยู่ของเว็บไซต์ในรูปแบบอื่นๆ) หรือการซื้อโฮสติ้งและการติดตั้ง แม้ว่าจะเราจะลองวิธีถัดไปนี้เช่นกัน

สำคัญมาก! มันเป็นไปได้ที่จะใช้โดเมนเนมแบบ custom กับ NeoCities โดยการไปที่การตั้งค่าเว็บไซต์ (site setting) หลังจากเริ่มติดตั้งและทำตามขั้นตอนที่ว่ามา แม้ว่าการทำแบบนี้ต้อง upgrade account ด้วยเงิน $5.00 USD (หรือประมาณ 150-200 บาท) แบบรายเดือนก็ตาม

โดเมน (Domain)

โดเมนนั้นคือที่อยู่เว็บแบบ custom หรือชื่อกำหนดเองที่เราชอบเพื่อให้ผู้ชมเยี่ยมเว็บนั้นพิมพ์เข้าไป ขั้นตอนนี้นั้นไม่จำเป็นเมื่อเราใช้โฮสต์ของ NeoCities เพราะว่ามันสร้าง address พิเศษจาก NeoCities ให้พวกเรา อย่างไรก็ตาม ถ้าเรากำลังมองหาโดเมนเนมแบบ custom จริงๆ (เช่น tutsplustown.com เป็นต้น) เราจะต้องซื้อโดเมนเนมอันนี้

ด้วย NeoCities username ขงเรา โดเมนเนมนั้นจะ unique มันจะใช้เวลาบางช่วงค้นหาชื่อที่มันยังไม่ได้ถูกใช้ไป

ที่นี่ยังมีบริการอีกจำนวนหนึ่งที่ช่วยให้เราซื้อโดเมนเนมเมื่อเราสร้าง account

และขั้นตอนสุดท้ายคือติดตั้งโดเมนเนมแบบ custom ที่สามารถทำให้เสร็จภายในบริการโฮสติ้ง (เช่น NeoCities หรือ BitBallon ที่จะกล่าวถึงถัดไป) เมื่อไฟล์ทั้งหมดของเราส่งขึ้นเว็บแล้ว

ตัวเลือกสำหรับโฮสติ้งอื่นๆ

ถ้าคุณไม่ต้องการเลือกใช้ NeoCities ยังมี บริษัทโฮสติ้งอื่นๆ ที่พร้อมจะช่วยเหลือและมันก็ใช้งานได้ง่าย และบางทีหนึ่งในนั้นที่โดดเด่นและดูสมเหตุสมผลคือ BitBalloon

BitBalloon นั้นฟรีที่จะลองใช้และต้องเสียเงินถ้าคุณใช้ custom domain เหมือนกับ NeoCities มันง่ายในการเลือกว่าไฟล์ไหนสามารถลากและวางเข้าไปในหน้าจอการใช้งาน มันจะให้ค่อนข้างตื่นเต้นสำหรับเว็บไซต์พื้นฐานเช่นเว็บไซต์เมืองในฝันของเรา

เมื่อไฟล์ทั้งหมดเอาขึ้นเรียบร้อย เราสามารถจัดการกับ custom domain setup ผ่านเครื่องมือที่ BitBalloon ให้ไว้ใน dashboard

โดเมนเว็บเมืองในฝันของเรา

เว็บไซต์เมืองในฝันของเรามี address ของมันเองเหมือนกับที่เราได้ติดตั้งเราทดลองดูคือ tutsplustown.com

แล้วถัดไปหล่ะ

ขณะที่ซีรีย์นี้ได้แนะนำตัวเกี่ยวกับการออกแบบเว็บ และ วิธีที่เร็วที่สุดสำหรับการพัฒนาทักษะฝีมือของเรา เราจำเป็นต้อง ฝึก ฝึก และ ฝึกด้วยหัวข้อด้านล่างนี้

แหล่งความรู้ HTML และ CSS เพิ่มเติม

หนังสือ “Build Your Own Website, A Comic Guide to HTML, CSS, and Wordpress” เขียนโดย Nate Cooper จะให้ข้อมูลเกี่ยวการสร้างเว็บไซต์ผ่านเรื่องสนุกๆ ในรูปแบบการ์ตูน

นอกจากนี้ Shay Howe ก็ได้เขียนซีรีย์ในระดับลึกสำหรับทั้งผู้เริ่มต้นและระดับสูงเกี่ยวกับ HTML และ CSS

การสร้างเว็บไซต์แบบ Responsive Design

Responsive web design นั้นเกี่ยวกับการออกแบบเว็บไซต์ที่ทำให้หน้าจอต่างชนิดกันสามารถดูได้ เราจะใช้เวลาอย่างมากบน Smartphone ของเรา ยกตัวอย่างที่นักออกแบบ เราต้องการทำให้เว็บไซต์เหล่านี้ทำงานได้ดีในจอขนาดเล็กเหมือนกับจอขนาดใหญ่ของคอมพิวเตอร์ Desktop

และที่นี่ก็เหมาะเลยสำหรับผู้เริ่มต้น tutorial by Shay Howe on the topic

หน่วยวัดต่างๆ (Units of Measurement)

เราได้ใช้หน่วย pixel ภายในซีรีย์นี้เป็นน่วยวัดบนเว็บ การใช้ pixel นั้นค่อนข้าง OK เมื่อเริ่มต้น อย่างไรก็ตาม ประสบการณ์ที่มากขึ้นจะทำให้คุณรู้ว่ามันมีข้อจำกัดอย่างไร มันเป็นหน่วยหนึ่งที่ไม่ยืดหยุ่นเลย และมันใช้ได้ไม่ค่อยดีใน Responsive Design

การฐานะการออกแบบข้ามจอหลายขนาด ยังมีตัวเลือกอื่นๆ ที่ช่วยให้ pixel นั้นยืดหยุ่น เช่น percentage และ rem

เลย์เอ้าท์

เมื่อเราจะคุยเรื่อง flexbox ใน CSS Layout ของบทเรียนนี้แล้ว มันยังมี Layout อีกหลายชนิดมากที่เราสามารถเรียนรู้เพื่อจะใช้มัน มันมีสถานที่จำนวนหนึ่งสำหรับเรียนรู้ อย่างเช่นที่นี่ Complete Guide to Flexbox และที่ Flexbox Cheatsheet diagram

เกี่ยวข้องกับ layout หลากหลายชนิดโดยรวมไม่ใช่แค่ Flexbox และยังมี เว็บไซต์เล็กๆ เรียบร้อยๆ ที่ช่วยให้เราเดินทางกลับสู่พื้นฐาน

มาฉลองกัน!

ขณะที่มีเรื่องมากมายที่เราสามารถเรียนเพื่อทำให้ทักษะการออกแบบเว็บของเราแข็งแกร่งขึ้น เราได้ประสบความสำเร็จมากมายผ่านซีรีย์นี้และจากนี้เราก็สามารถเข้าใจอะไรได้มากขึ้นทั้งพื้นฐานการออกแบบ และ การสร้างเว็บไซต์

เราได้นำเว็บไซต์จากภาพร่างบนกระดาษสู่เว็บไซต์จริงๆ ที่มี Address ของเราเอง นี่คือทุกๆ วันที่ผ่านไปของนักออกแบบเว็บ

เว็บไซต์เมืองในฝันของเรา จะสร้างความงดงามให้แก่ท่านที่เข้ามาเยี่ยมชม มันใช้ง่ายและช่วยแนะนำเส้นทางให้แก่นักท่องเที่ยวใหม่ๆ ที่เข้ามาในเมือง ขอบพระคุณทุกท่านเป็นอย่างสูงที่ติดตามซีรีย์นี้ตั้งแต่ต้นมาขอขอบคุณ

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.