Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - ยินดีต้อนรับสู่เมืองในฝันของพวกเรา

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

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

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

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

ลองเข้ามาสร้างความคุ้นเคยและเป็นส่วนหนึ่งของการสร้างเมืองในฝันของพวกเรา

เว็บไซต์นั้นทำงานอย่างไร

ลองคิดดูว่าเว็บไซต์นั้นน่าจะทำงานอย่างไร

เมื่อคอมพิวเตอร์สองเครื่องเชื่อมต่อกันผ่านระบบอินเตอร์เน็ต (ซึ่งแสดงด้วยเส้นสีเหลืองในภาพด้านล่าง) พวกมันก็สามารถคุยกันได้

เครื่องเซิร์ฟเวอร์ (Server) ที่แสดงด้วยกล่องสีน้ำเงินคือคอมพิวเตอร์พิเศษที่ภายในมีไฟล์เว็บเพจอยู่ (Web Page File) คอมพิวเตอร์ของน้องๆที่อยู่ที่บ้านหรือที่โรงเรียนนั้น ยังไม่ใช่เครื่องเซิร์ฟเวอร์ นั่นเพราะมันไม่ได้เชื่อมต่อเข้ากับเครือข่ายอินเทอร์เน็ต "โดยตรง" เราต้องเชื่อมต่ออินเทอร์เน็ตผ่านผู้ให้บริการอินเทอร์เน็ตหรือที่เราเรียกกันว่า Internet Service Provider (ISP)

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

ภาพด้านบน แสดงการเชื่อมต่อคอมพิวเตอร์เข้ากับเว็บ

ในภาพนี้เบราว์เซอร์ (browser) กำลังแสดง www.tutsplus.com ที่รับจากเซิฟเวอร์ที่ซึ่งมีไฟล์ของเว็บอยู่ เซิร์ฟเวอร์นั้นกำลังส่งไฟล์กลับไปที่เบราว์เซอร์ จากนั้นมันจะทำการแปลภาษาแล้วส่งผลลัพธ์ออกสู่จอ การดำเนินการเหล่านี้เกิดขึ้นรวดเร็วมาก

มันทั้งหมดนั้นเรียกว่าการสื่อสาร (communication) และการแบ่งปันข้อมูล (sharing information)

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

งานของนักออกแบบเว็บ

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

รูปนักออกแบบเว็บกำลังนั่งทำงาน

งานของพวกเรา

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

นี่คือตัวอย่างหน้าตาของเว็บไซต์ที่เราจะทำ

นี่แหล่ะสิ่งที่เราจะสร้างมันขึ้นมา

การทำเว็บตัวนี้จะบอกเราเกี่ยวกับสิ่งสำคัญๆ เกี่ยวกับการออกแบบที่เราจะต้องเรียนรู้ มันจะเป็นเว็บที่เรียบร้อยสวยงาม เป็นเว็บแรกของคุณเลย

การเริ่มสเก็ตช์และสร้างมัน

จากนั้นเรามาคุยเกี่ยวกับสิ่งที่เราจะต้องทำเพื่อให้ได้มันมา

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

การสเก็ตช์นี่สำคัญมาก

การกำหนดสไตล์

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

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

แผนผังของซีรีย์นี้

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

ภาพแผนผังของเรา

บทนำ (Intro)

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

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

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

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

HTML

HTML นั้นย่อมาจาก HyperText Markup Language นั้นคือโค้ดลับที่เราพูดถึง (แต่ไม่ลับมากเท่าไหร่หรอก คุณก็เรียนรู้ได้ง่ายๆ) มันเป็นภาษาที่ช่วยในการจัดการข้อความต่างๆ ให้มีโครงสร้างที่ชัดเจนเข้ารูปเข้ารอย ซึ่งเราจะกล่าวถึงถัดไป ภาษานี้จะช่วยให้เบราว์เซอร์นั้นเข้าใจและแสดงผลลัพธ์เว็บไซต์จากไฟล์ต่างๆที่เราเขียนนั้นได้อย่างถูกต้อง

ทุกสิ่งทุกอย่างบนเว็บไซต์ของเรา และทุกอย่างที่เว็บไซต์นั้นเกี่ยวข้อง จะอยู่ในสิ่งที่เรียกว่าอิลิเมนต์ (HTML element) อิลิเมนต์คือส่วนหนึ่งของภาษา HTML ที่มีความหมาย "ในตัวของมันเอง" มันจะช่วยอธิบายทุกสิ่งทุกอย่างที่ถูกจัดวางอยู่บนหน้าจอ

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

CSS

CSS ย่อมาจาก Cascading Stylesheet จะช่วยให้เราสไตล์ (ใส่สี, กำหนดฟอนต์, หรือสร้างความสวยงาม) ให้กับเว็บไซต์ของเรา หน้าที่ของมันคือสร้างความดึงดูดให้กับผู้เยี่ยมชมเว็บให้มากที่สุดเท่าที่จะมากได้

นี่แหละ CSS หน้าตาเป็นแบบนี้

การจัด Layout โดยใช้ CSS

CSS นั้นสามารถช่วยให้เราจัดวางสิ่งต่างๆ ไว้บนหน้าจอได้อย่างเหมาะสม

รูปภาพต่างๆ (Image)

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

Our images

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

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

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

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

ตัวอย่างแรกของการออกแบบตัวอักษรของเว็บไซต์ของเราสามารถเจอได้บนหัวข้อนี้

Heading

สี (Color)

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

ส่วนสุดท้ายของซีรีย์นี้

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

แต่อย่างเพิ่งกังวลสิ่งที่ยังไม่ได้เกิด เราเพิ่งอ่านจบบทแรกเองนี่

แล้วเจอกัน!

ในบทถัดไป เราจะตรงดิ่งไปเรียนรู้เกี่ยวกับการเตรียมตัวเพื่อสร้างเว็บไซต์ด้วยไฟล์ HTML อย่ารอเลย แล้วเจอกันในเมืองละกัน!

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