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: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

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

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

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

อย่างแรกที่ต้องคำนึง ลองดูให้ละเอียดกับสิ่งที่เราจะสร้างด้วยกัน

การร่างภาพคร่าวๆ หรือการสเก็ตช์ (Sketching)

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

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

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

เริ่มสเก็ตช์เมืองในฝันของเราได้เลย

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

นอกจากนี้ยังมีรูปบางรูปที่เราสามารถใส่เพื่อให้รู้สึกถึงการต้อนรับอย่างอบอุ่นอีกด้วย

นี่คือภาพที่เราสเก็ตช์เทียบกับภาพเว็บสีที่ออกแบบเสร็จเรียบร้อยแล้ว

นี่คือภาพเว็บจริงที่เราสร้างโดยเริ่มจากศูนย์เลย สวยไหมหล่ะ

โปรแกรมแก้ไขโค้ด (Text Editor)

เพื่อเขียนโค้ด HTML (นั่นคือรหัสลับที่เราเคยคุยกันในบทเรียนแรก) เราต้องการโปรแกรม text editor เพื่อพิมพ์มันลงไป

มันจะดีที่สุดที่ไม่ใช้โปรแกรมพวก Microsoft Word สำหรับการนี้ เราต้องใช้โปรแกรมแก้ไขโค้ดที่เรียกว่า text editor เท่านั้น โปรแกรมแก้ไขโค้ดนั้นจะเข้าใจคำสั่งที่เราพิมพ์ลงไปและช่วยใส่สีคำสั่งเหล่านั้นให้กับเรา ขณะที่ Microsoft Word นั้นจะเหมาะกว่าสำหรับทำรายงานจากโรงเรียน

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

โปรแกรม Bluefish นั้นใช้ได้สำหรับ Windows ส่วน Atom นั้นจะดีสำหรับเครื่องใช้ใช้ Mac (สำหรับผู้แปล ผมใช้ Notepad++ และคิดว่ามันใช้ได้เลย)

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

ทั้งหมดนั้นคือไฟล์

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

เว็บไซต์เมืองในฝันของเราจะมีไฟล์ HTML (ถูกบันทึกด้วยนามสกุล .html) ไฟล์ CSS (ถูกบันทึกด้วยนามสกุล .css) และรูปภาพสี่รูปที่จะถูกบันทึกไว้ในโฟลเดอร์ชื่อ "images" ที่โฟลเดอร์ images นี้ควรจะอยู่ตำแหน่งเดียวกับไฟล์ HTML และ CSS

"นามสกุลของไฟล์" คือกลุ่มของตัวอักษรที่มาต่อท้ายชื่อไฟล์ มันบ่งบอกว่าไฟล์นั้นเป็นไฟล์ชนิดอะไร

ดังที่กล่าวมา ภาพทั้งหมดของเราจะถูกบันทึกไว้ในโฟล์เดอร์ชื่อ "images" ภายในโฟลเดอร์หลักของเราแบบรูปนี้

ในภาพด้านบน เรานั้นมีไฟล์รูปภาพชื่อ town.svg (ซึ่งนามสกุล .svg นั้นคือไฟล์ภาพชนิดหนึ่ง) ซึ่งเราจะเก็บมันไว้ในโฟลเดอร์พิเศษของเรา ชื่อโฟลเดอร์ "images" การทำแบบนี้ช่วยให้งานดูสะอาดขึ้น

วิธีทั้งสองนั้นถูกต้อง แต่เราจะใช้วิธีด้านขวา โดยการสร้างโฟลเดอร์พิเศษขึ้นมา

เบราว์เซอร์ (Browser)

เราจะเห็นงานของเราจากเบราว์เซอร์ (browser) เช่นขณะนี้คุณกำลังดูหน้าๆ หนึ่งของเว็บ Tuts+ อยู่

มันยังมีเบราว์เซอร์จำนวนหนึ่งที่เราสามารถดาวโหลดได้ฟรี ถ้าคุณยังไม่มีลองติดตั้ง Google Chrome หรือ Firefox ดู ถ้าคุณกำลังใช้เครื่อง Mac แน่นอนคุณจะมี Safari ติดตั้งไว้ให้คุณเรียบร้อยแล้ว

ยังไม่อยู่บนเว็บจริงๆ หรอก

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

จากภาพด้านบนแสดงให้เห็นถึงเว็บไซต์ที่เสร็จเรียบร้อยแล้วที่สามารถดูได้เฉพาะเครื่องเรา (ไม่ใช่บนอินเทอร์เน็ต) โดยดูจากเบราว์เซอร์ แทนที่จะใช้เว็บแอดเดรสเช่น www.tutsplus.com เราจะเห็นเป็น local address แทน ซึ่งจะค่อนข้างแตกต่างกับที่เราใช้ท่องเว็บกันอยู่ทั่วไปแบบนี้

เยี่ยมมาก!

ในบทเรียนนี้เราได้เห็นถึงสิ่งสำคัญต่างๆ ที่ช่วยเราเตรียมความพร้อมในการเขียนโค้ดถัดไป เราได้เรียนรู้วิธีเตรียมเครื่องมือต่างๆ เช่น text editor และ browswer

ในบทถัดไป เราจะกระโดดไปยังส่วนของการเขียนโค้ดเว็บไซต์ เราจะจัดระเบียบ (ฉันรู้! เราต้องจัดระเบียบซะเยอะเลย) และเพิ่มโค้ดบางส่วนไปยังไฟล์ 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.