ผู้เขียน หัวข้อ: สอนวิธีการเขียนเว็บอย่างละเอียด..สร้างงานแบบมืออาชีพ  (อ่าน 18189 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ เก่งจอมทอง

  • VIP
  • *****
  • ออฟไลน์
  • 142
    307
  • เพศ: ชาย


มีทั้งหมด 9 บทครับ..จัดเต็มกันไปเลย...ความรู้ทั้งนั้นครับ..

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239


เมา-ลึกบ่อกลัว กลัวอู้บ่อรู้เรื่อง ^^

ออฟไลน์ หมู

  • Global Moderator
  • *
  • ออฟไลน์
  • 977
    487

อ่านกันสักอาทิตย์ น่าจะพอเริ่มได้น่า ขอบคุณครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ หมู

  • Global Moderator
  • *
  • ออฟไลน์
  • 977
    487

อ้าว กระทู้แรกก็โหลดไม่ได้ซะแล้ว แก้ไขหน่อยครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239


ขอแลกัน พี่สมภพว่า โหลดไม่ได้ แต่อยากรู้ อิอิอิ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ ชา พัทยา

  • VIP
  • *****
  • ออฟไลน์
  • 363
    77
  • เพศ: ชาย

เคยไปเรียน แต่ไม่ได้ใช้เลยลืม  sp209

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ ชัย

  • ปรมาจารย์
  • ***
  • ออฟไลน์
  • 230
    78

ขอนำไปทดลองเขียนด้วยครับ ขอบคุณครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ ฉัตรเจริญ

  • MOD
  • *
  • ออฟไลน์
  • 2921
    13462
  • เพศ: ชาย
    • อีเมล์

        รู้ไว้ก็มีแต่ประโยชน์    ขอบคุณในน้ำใจครับ 

:'e:92


+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ เก่งจอมทอง

  • VIP
  • *****
  • ออฟไลน์
  • 142
    307
  • เพศ: ชาย

1.เตรียมเครื่องมือสำหรับทำเว็บไซต์
ต้องขอบอกก่อนว่าบทความนี้ความยากอยู่ในระดับหนึ่ง หากไม่เข้าใจในข้อใดก็ไม่ต้องกังวล เพราะเครื่องมือที่กล่าวถึงในหัวข้อนี้นั้นส่วนใหญ่จะถูกใช้งานโดยมืออาชีพ เครื่องมือแต่ละตัวมีความสามารถหลากหลายและทำงานได้หลายอย่าง สำหรับมือใหม่อาจมีบางเรื่องที่ไม่เข้าใจ หากสงสัยสามารถโพสถามได้ในเว็บบอร์ด เครื่องมือที่แนะนำต่อไปนี้จะเน้นการใช้งานร่วมกับ HTML , CSS , PHP , MySQL , Javascrip เป็นหลัก

ก่อนอื่นก็จะแบ่งประเภทของเครื่องมือที่ใช้ในการทำเว็บไซต์ได้ดังนี้
1.เครื่องมือในการย้ายไฟล์จากเครื่องของเราไปยังเครื่อง server วิธีการที่ใช้คือ FTP นั่นเอง
2.เครื่องมือสำหรับแก้ไข code
3.เครื่องมือสำหรับแก้ไขภาพ แต่งภาพ
4.Web Browser โปรแกรมสำหรับเปิดเว็บไซต์เช่น IE , Firefox , Chrome
5.เครื่องมือจัดการฐานข้อมูล
6.โปรแกรมจัดการไฟล์ และการปรับปรุงแก้ไขไฟล์
7.โปรแกรมจำลองเครื่องของเราให้เหมือนกับ web server

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

- FileZilla สามารถอ่านรายละเอียดการใช้งานและวิธีการดาวน์โหลดจาก หัวบทความนี้้ มีหัวข้อที่สำคัญที่ควรรู้ในการใช้งานโปรแกรม FTP ทั้งหลายคือ โปรแกรมส่วนใหญ่จะมีวิธีให้เลือกในการส่งข้อมูลอยู่ด้วยกัน 2 วิธีคือ
1.ASCII ใช้สำหรับส่งข้อความที่เป็นตัวอักษร
2.Binary ใช้สำหรับส่งข้อความไม่ใช่ัตัวอักษร เช่นไฟล์ภาพ
ถ้าเลือกใช้ผิดวิธีจะส่งผลต่อไฟล์ที่เราส่งไปได้ แต่สำหรับโปรแกรม FileZilla จะทำการเลือกให้เราโดยอัตโนมัติโดยที่เราไม่ต้องเข้าไปยุ่งในส่วนนี้

2. เครื่องมือสำหรับแก้ไข Code (Code Editing)
พูดได้ว่าเป็นเครื่องมือที่สำคัญมากในการทำเว็บไซต์ เพราะเว็บไซต์นั้นประกอบด้วย code ต่างๆมากมาย ไม่ว่าจะเป็น HTML , PHP , Javascript CSS ถ้าจะพูดเปรียบเปรยก็พูดได้ว่า การทำเว็บไซต์นั้นก็เป็นการเขียน code อย่างหนึ่งนั่นเอง ดังนั้นเราจึงควรเครื่องมือดีๆมาอำนวยความสำดวกให้เราเพื่อประหยัดเวลาในการทำงาน สำหรับเครื่องมือที่เราแนะนำมีดังนี้

- Eclipse เป็นเครื่องมือฟรีที่มีผู้ใช้งานและผู้ร่วมพัฒนามาก มีความสามารถมากมาย ฟังก์ชันหลากหลาย เหมาะสำหรับมืออาชีพที่ต้องการเครื่องมือที่มีสามารถหลากหลาย สามารถเพิ่มความสามารถให้กับโปรแกรมได้โดยโหลด plugin เข้ามาเพิ่มเติม สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่เว็บไซต์ http://eclipse.org/ จากความสามารถที่หลากหลายทำให้มีข้อเสียคือใช้ทรัพยากรณ์เครื่องมาก

- Aptana Studio เครื่องมือตัวนี้ก็เป็นตัวฟรีอีกเช่นเดียวกัน โดยมีให้เลือกทั้งแบบที่เป็น plugin ของ Eclipse และแบบที่เป็นโปรแกรมแยกออกมา ข้อดีของโปรแกรมนี้คือ ไม่หนักเครื่องมาก มีรูปแบบสวยงาม ไม่ซับซ้อน รองรับภาษาไทยได้ดี สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่ http://www.aptana.com/ สำหรับผู้ใช้งาน php แนะนำให้โหลดเวอร์ชัน 3 เป็นต้นไปมาใช้งาน

- Komodo Edit ตัวนี้เป็นตัวที่นักพัฒนาของเรา คุณ saxford ใช้อยู่และติดใจมากครับ สำหรับผมไม่เคยมีประสบการณ์กับโปรแกรมนี้มากนัก หากต้องการทราบรายละเอียดต้องติดต่อกับคุณ saxford ผ่านทางเว็บบอร์ดนะครับ อ่านรายละเอียดและดาวน์โหลดโปรแกรมจากทีนี่ครับ http://www.openkomodo.com/ โปรแกรมนี้มีทั้งแบบฟรีและไม่ฟรีนะครับ

- Dreamweaver เครื่องมือตัวนี้ถ้ากล่าวถึงส่วนใหญ่น่าจะรู้จักกันทุกคนทีเดียว เป็นเครื่องมือชื่อดังใช้สำหรับพัฒนาเว็บไซต์ ด้วยความสามารถที่หลากหลาย สามารถทำให้ผู้ใช้ที่ไม่รู้วิธีการเขียน HTML ก็สามารถทำเว็บไซต์ขึ้นมาเองได้ แน่นอนว่าไม่ฟรีและมีราคาสูงมากด้วย ดูรายละเอียด และโหลดโปรแกรมทดลองใช้งานได้ที่ http://www.adobe.com/products/dreamweaver/

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

- Gimp เป็นโปรแกรมฟรีที่มีประสิทธิภาพมาก มีผู้พัฒนาคอยแต่งเติมความสามารถให้กับโปรแกรมโดยตลอด สามารถใช้งานในการแต่งภาพได้ไม่ดี ต้องบอกว่าตอนนี้โปรแกรมนี้เป็นโปรแกรมฟรีที่มาแรงมาก แต่ทาง hellomyweb ยังไม่มีบทความเกี่ยวกับโปรแกรมตัวนี้มากนัก ในโอกาสต่อไปเราจะพยายามนำเสนอบทความเกี่ยวกับโปรแกรมนี้ให้มากขึ้น

- Photoshop โปรแกรมชื่อดังของ Adobe โปรแกรมนี้เป็นที่นิยมมีหนังสือสอนใช้งานมากมายในท้องตลาด แทบจะเรียกได้ว่าเป็นโปรแกรมแต่งภาพอันดับหนึ่งตอนนี้ก็ได้ อ่านรายละเอียดเพิ่มเติม และดาวน์โหลดโปรแกรมตัวทดลองได้ที่ http://www.adobe.com/products/photoshop/family/

4. Web Browser
ปัจจุบันมีหลากหลายให้เลือกใช้มากมาย ทำให้เป็นปัญหากับผู้พัฒนาเป็นอย่างมาก เพราะต้องพัฒนาเว็บไซต์ของตัวเองให้เหมาะสม และเปิดได้กับ Web browser ที่มีอยู่ในท้องตลาด แน่นอนว่าตอนนี้ IE6 มีผู้ใช้งานอยู่มาก แต่ผู้ใช้ที่ลง IE7 , IE8 ไปแล้วก็ไม่สามารถกลับไปใช้งาน IE6 ได้ เป็นปัญหากับผู้พัฒนาเว็บไซต์มาก

ดังนั้น Hellomyweb แนะนำให้เข้าไปที่เว็บไซต์ http://spoon.net/browsers/ จะมี Web browser ให้เราใช้แทบทุกรุ่น แต่จำเป็นต้องลง plugin ของ spoon ก่อน จากนั้นเมื่อคลิกที่รายชื่อของ spoon จะโหลด browser ที่เราเลือกขึ้นมาให้ใช้ และไม่จำเป็นต้องลง browser ตัวนั้นจริงๆในเครื่องของเรา Hellomyweb ขอแนะนำให้ลองใช้ดู

5. เครื่องมือจัดการฐานข้อมูล
สำหรับผู้ที่เขียนโปรแกรมบนเว็บไซต์ ที่จำเป็นจะต้องมีฐานข้อมูลด้วยนั้น จำเป็นต้องใช้เครื่องมือสำหรับจัดการฐานข้อมูลอย่างแน่นอน สำหรับโปรแกรมที่ไดัรับความนิยมมากนั่นคือ phpMyAdmin นั่นเอง ด้วยความที่เป็นโปรแกรมฟรี ทำงานคู่กับภาษา PHP , MySQL ได้เป็นอย่างดีจึงเป็นที่นิยมมากนั่นเอง สำหรับ phpMyAdmin จะมาคู่กับ XAMPP อยู่แล้วจึงไม่ขอแสดงลิงก์ไว้ในที่นี้

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

7. โปรแกรมจำลองเครื่องของเราให้เหมือนกับ Web Server
สำหรับการพัฒนาเว็บไซต์ เราจำเป็นต้องพัฒนาบนเครื่องของเราก่อนที่จะส่งไฟล์ไปยังเว็บไซต์ เพื่อความรวดเร็วในการทำงานและ ความสะดวกของเราเอง ดังนั้นเราจำเป็นต้องจำลองเครื่องของเราให้เหมือนกับ Web server โดยการจำลองนั้นก็จะทำให้เครื่องของเราสามารถใช้งานภาษา PHP และฐานข้อมูล MySQL เพื่อการเขียนโปรแกรมบนเว็บไซต์ได้ นอกจากนั้นยังมีโปรแกรม phpMyAdmin เพื่อจัดการฐานข้อมูลอีกด้วย สำหรับโปรแกรมที่แนะนำคือ

- XAMPP มีวิธีการลงและ วิธีการใช้งานทั้งหมดอยู่ในบทความนี้ http://www.hellomyweb.com/index.php/main/content/136
โปรแกรมสำหรับจำลองเครื่องของเราให้เหมือนกับ Web server มีประโยชน์สำหรับผู้ที่ต้องการจะเขียนโปรแกรมบนเว็บไซต์ สำหรับผู้ที่เขียนเว็บทั่วไปอาจไม่จำเป็นต้องดาวน์โหลดไปใช้ก็ได้

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239


เมา-ลึกบ่อกลัว กลัวอู้บ่อรู้เรื่อง ^^

ออฟไลน์ เก่งจอมทอง

  • VIP
  • *****
  • ออฟไลน์
  • 142
    307
  • เพศ: ชาย

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

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

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

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

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

หลักที่พูดไปทั้ง 3 ข้อนั้นสามารถปฏิบัติเป็นขั้นตอนง่ายๆ ดังนี้

1. เว็บไซต์ของเราต้องสามารถโหลดหน้าเว็บได้อย่างรวดเร็ว และง่ายต่อการอ่านผ่านๆ แต่ละหัวข้อต้องแบ่งให้ชัดเจน เพื่อให้ผู้ใช้สามารถแบ่งเนื้อหาส่วนต่าๆออกกันได้

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

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

4. ชนิดของตัวหนังสือ font และสี ทั้งสีของพื้นหลัง และสีของตัวหนังสือเอง จะต้องทำให้ง่ายต่อการอ่านมากที่สุด วิธีการพิจารณาคือให้พื้นหลังเป็นสีสว่าง ส่วนสีตัวอักษรจะต้องเป็นสีทึบ หรือสีเข้ม

5. ตัวหนังสือหรือภาพที่มีการขยับ ปิดๆดับ Blink ไม่ควรนำมาใช้งานเพราะจะทำให้ผู้ใช้เกิดความรำคาญ และทำให้ผู้ใช้งานสนใจภาพที่ขยับมากว่าตัวเนื้อหา

6. ลิงก์ที่ใช้งานไม่ได้ หรือลิงก์ที่อยู่ระหว่างการปรับปรุง ไม่ควรนำมาแสดงผล

7. สร้างความแตกต่างกันในแต่ละส่วนของเว็บไซต์ เช่นส่วนของเนื้อหาและเมนู ควรมีความแตกต่างกันอย่างเห็นได้ชัด

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

9. อย่าให้ความสนใจกับกราฟิกในเว็บไซต์มากเกินไป ควรให้ความสำคัญกับการจัดว่างตำแหน่งของส่วนต่างๆในเว็บไซต์มากกว่า

10. อย่าให้ title <title> ของแต่ละหน้ามีความเหมือนกัน รวมทั้งหัวข้อหลัก <h1> ของแต่ละหน้าอย่าให้ซ้ำกัน เพราะส่วนนี้จะเป็นส่วนที่สะดุดตากับผู้ใช้งานมากที่สุด ถ้าหากเปิดหน้าใหม่มาแล้วมีหัวข้อแสดงเหมือนกัน ผู้ใช้งานอาจเข้าใจว่าเป็นหน้าเดิม หรือมีเนื้อหาซ้ำกัน ทำให้ไม่สนใจอ่านต่อไปได้

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

12. เนื้อหาที่มีความเกี่ยวข้องกันควรมีการแสดงผลเป็นลิงก์อยู่ใกล้เคียงกัน เพื่อให้ผู้ใช้เข้าถึงได้ง่าย

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

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

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239


เมา-ลึกบ่อกลัว กลัวอู้บ่อรู้เรื่อง ^^

ออฟไลน์ เก่งจอมทอง

  • VIP
  • *****
  • ออฟไลน์
  • 142
    307
  • เพศ: ชาย

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

เริ่มขั้นตอนแรกของการลดขนาดไฟล์ภาพนัั้น เราก็จะต้องโหลดโปรแกรมสำหรับลดขนาดไฟล์ภาพก่อน ซึ่งโปรแกรมนั้นมีมากมายหลายตัวที่มีให้โหลดกัน แต่ในบทความนี้ hellomyweb จะขอเสนอโปรแกรมที่มีชื่อว่า FastStone Photo Resizer ซึ่งเป็นโปรแกรมฟรี สามารถดาวน์โหลดได้ผ่านทางลิงก์นี้ http://www.faststone.org/FSResizerDetail.htm

ตัวโปรแกรมจะมีหน้าตาดังนี้

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

เมื่อเราเลือกไฟล์ทั้งหมดที่ต้องการจะปรับขนาดแล้ว ให้เราดูที่ output format ตามรูปจะเห็นว่ากำหนดเป็น jpeg format (*.jpg) นั้นคือหลังจากที่แปลงขนาดภาพแล้วให้แปลงภาพนั้นเป็นนามสกุล jpg ด้วย ถ้าเราต้องการให้เป็นนามสกุลอื่นๆก็สามารถเลือกได้ และหากต้องการปรับคุณภาพของภาพก็ให้คลิกที่ setting ในส่วนนี้แนะนำให้ปรับเป็น jpg ตามปรกติจะดีกว่า

จากนั้นหัวข้อถัดมา output folder เป็น folder ที่ต้องการให้เก็บไฟล์ที่ทำการแปลงเสร็จแล้ว ในบทความนี้จะให้เก็บไว้ที่ โฟล์เดอร์ที่ชื่อว่า hellomyweb

ถัดมาให้มาดูที่ปุ่ม advanced option เป็นปุ่มที่สำคัญที่สุด เพราะเป็นการกำหนดขนาดการแปลงของภาพ หลังจากคลิกที่ปุ่ม advance option จะเห็นดังภาพด้านล่าง


ถ้าเลือกตามภาพจะเป็นการปรับขนาดของภาพให้ทุกภาพที่ผ่านการแปลงแล้วมีความยาว 300 pixels ส่วนความสูงแล้วแต่ขนาดภาพเดิม เราสามารถใส่ลูกเล่นอื่นๆได้เช่นหากต้องการใส่ลายน้ำก็ให้เลือกที่ watermark หรือต้องการใส่กรอบให้ภาพก็เลือกที่ border รายละเอียดในส่วนนี้ก็ให้ลองไปศึกษากันดู มีคำสั่งและลูกเล่นที่จำเป็นมากมายสำหรับโปรแกรมนี้ หลังจากที่เราปรับตั้งค่าเรียบร้อยให้คลิกที่ปุ่ม ok จะกลับมาเป็นดังภาพด้านล่าง


จากนั้นให้เราคลิกที่ปุ่ม convert โปรแกรมจะทำการแปลงภาพตามค่าที่เราได้ตั้งไว้ ก็เป็นอันเรียบร้อย

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

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

ดังนั้นในบทความนี้จะเสนอ 2 วิธีสำหรับการติดตั้ง Joomla คือ

1. ติดตั้งสำหรับใช้บน web server (เน้นการใช้งานบน hellohosting เพราะ hosting แต่ละที่ทำงานไม่เหมือนกันดังนั้นจะเน้น hellohosting เป็นมาตราฐาน สำหรับผู้ที่ใช้งาน hosting เจ้าอื่นสามารถสอบถามได้จากผู้ให้บริการ)

2. ติดตั้งสำหรับใช้งานบนเครื่องทั่วไป สำหรับผู้ที่้ต้องการลองใช้งาน Joomla

ก่อนจะติดตั้งโปรแกรมเราต้องไปดาวน์โหลดโปรแกรมมาก่อน โดยเราสามารถดาวน์โหลดโปรแกรม Joomla ได้ที่ http://www.joomla.org/download.html เลือกไฟล์ที่เขียนว่า Full Package ลืมบอกไปว่า Joomla นั้นเป็นของฟรีที่ทุกคนสามารถเข้าใช้งานได้ นี่อาจเป็นส่วนหนี่งที่ทำให้มีคนใช้งาน Joomla กันมาก หลังจากที่ดาวน์โหลดเรียบร้อยแล้วก็ให้แตกไฟล์ Zip ออกมาจะพบว่ามีไฟล์ข้างในมากมายดังภาพด้านล่าง (อ่านวิธีแต่ไฟล์ zip ได้ คลิกที่นี่)

การติดตั้ง Joomla บน Hellohosting

เมื่อดาวน์โหลดไฟล์มาเรียบร้อยแล้ว ให้ท่านใช้โปรแกรม FTP เพื่อติดต่อกับ hellohosting (อ่านวิธีการใช้งานโปรแกรม FTP คลิกที่นี่ ) โดยรายละเอียดการใช้งาน รหัสผ่าน จะอยู่ในอีเมล์ที่เราได้ส่งไปให้แล้ว เมื่อโปรแกรมทำการ FTP สำเร็จแล้วจะเห็น Folder ดังภาพด้านล่าง

คลิกเข้าไปที่โฟล์เดอร์ public_html ท่านจะเห็นไฟล์ภายในดังภาพ

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

เมื่ออัพโหลดไฟล์เรียบร้อยแล้วให้เปิดไปที่เว็บไซต์ของเรา เช่นในตัวอย่างจะเปิดไปที่ http://www.hellomyweb.com จะเห็นดังรูปด้านล่าง

จากนั้นคลิกถัดไปรูปจะเป็นดังด้านล่าง

ถึงขั้นตอนนี้จะเห็นว่ามี error เกิดขึ้นให้เราไปที่โปรแกรม FTP อีกครั้งจากนั้นหาไฟล์ที่ชื่อว่า configuration.php-dist และเปลี่ยนชื่อให้เป็น configuration.php หลังจากเปลี่ยนชื่อแล้วให้คลิกขวาที่ไฟล์นั้นและเลือกที่ file permissions ดังภาพด้านล่าง

เมื่อเลือกแล้วจะมีหน้าจอขึ้นมาดังภาพด้านล่าง

ให้เราเปลี่ยนตัวเลขเป็น 777 กลับไปดูที่ http://www.hellomyweb.com อีกครั้งโดยคลิกที่ปุ่ม "ตรวจสอบอีกครั้ง" ในส่วนของ configuaration.php จะเปลี่ยนเป็น "สนับสนุน" อย่าลืมคลิกที่ "ตรวจสอบอีกครั้ง" เพราะถ้าอาจทำให้การลงโปรแกรมผิดพลาดได้

หลังจากนั้นให้คลิกที่ปุ่ม "ถัดไป" หน้าต่อไปที่ขึ้นมาคือหน้า ลิขสิทธิ์ ให้ท่านคลิกที่ปุ่มถัดไปอีกครั้ง หน้าจอจะเปลี่ยนไปเป็นดังด้านล่าง

รายละเอียดมีดังนี้

ชื่อโฮสต์ ใส่เป็น localhost

ชื่อผู้ใช้ฐานข้อมูล กรอก Database Username ที่สร้างไว้ ในที่นี้คือ hellomyweb_db

รหัสผ่าน กรอก Username Password ที่สร้างไว้

ชื่อฐานข้อมูล กรอก Database Name ที่สร้างไว้ hellomyweb_db

สำหรับวิธีการสร้างฐานข้อมูลนั้นอ่านได้จากที่นี้ คลิกที่นี่

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

ระบบบอกให้เราลบโฟล์เดอร์ installation เราสามารถทำได้โดยไปที่โปรแกรม FTP อีกครั้ง จากนั้นหาโฟล์เดอร์ installation และลบทิ้ง หลังจากนั้นไปที่ไฟล์ configulation.php อีกครั้งคลิกขวาเลือก file permissions และเปลี่ยนจากตัวเลข 777 ให้เป็น 755 ก็เสร็จสิ้นการติดตั้ง

จากรูปด้านบน ทางขวาบนจะมี 2 ปุ่มให้เลือก คือ ดูหน้าเว็บไซต์ ปุ่มนี้จะลิงก์ไปที่ชื่อเว็บของเราคือ hellomyweb.com และอีกปุ่มคือ ผู้ดูแล โดยเมื่อคลิกที่ปุ่มนี้จะลิงก์ไปที่หน้าจัดการ joomla โดย username คือ admin และ password คือรหัสผ่านที่ได้ตั้งไว้ตอนติดตั้ง joomla จากขั้นตอนด้านบนที่ผ่านมา

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

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

สำหรับลูกค้าที่เช่า host กับเราและต้องการให้เราติดตั้ง joomla ให้สามารถกรอกความต้องการไว้ในช่อง รายละเอียดอื่นๆ ตอนสมัคร หรือส่งอีเมล์ติดต่อเราก็ได้ครับ ทางเราจะติดตั้งให้พร้อมใช้งานทันที
5.การติดตั้ง Joomla (ตอนที่ 2)
สำหรับผู้ที่ยังไม่เช่า hosting แต่อยากหัดใช้งาน Joomla ดู เราสามารถ เปลี่ยนเครื่องคอมของเราให้กลายเป็น Web server เพื่อทดลองใช้งาน joomla กันได้โดยอ่านบทความนี้

บทความนี้เป็นบทความต่อเนื่องกับ การติดตั้ง Joomla จะสามารถเข้าใจบทความนี้ได้ดีขึ้นถ้าเราอ่านบทความที่่ผ่านมาก่อน

อย่างที่กล่าวไปว่าจะใช้งาน Joomla ได้นั้นเครื่องคอมพิวเตอร์ของเรานั้นต้องทำงานเหมือนกับ Web Server ก่อน ซึ่งขั้นตอนทั้งหมดนั้นสามารถอ่านได้ผ่านบทความนี้ คลิกที่นี่ เป็นบทความต่อเนื่องต้องอ่านให้จบทั้ง 2 ตอนนะครับ

หลังจากที่เราเปลี่ยนเครื่องของตัวเองให้กลายเป็น web server เรียบร้อยแล้วจากนั้นก็สร้างโฟล์เดอร์ชื่อ joomla ไว้ที่ C:\xampplite\htdocs\joomla

จากนั้นให้แตกไฟล์ joomla ที่ดาวน์โหลดไว้ไปเก็บไว้ที่โฟล์เดอร์ C:\xampplite\htdocs\joomla ที่สร้างไว้

เปิด web browser และพิมพ์ http://127.0.0.1/joomla หรือ http://localhost/joomla จะเห็นหน้าจอ web browser เป็นดังภาพ


ให้เราคลิกที่ถัดไปเรื่อยๆ จนถึงหน้าฐานข้อมูลดังภาพด้านล่าง

รายละเอียดให้กรอกดังนี้

ชื่อโฮสต์ localhost

ชื้อผู้ใช้ฐานข้อมูล root

รหัสผ่าน เว้นว่างไว้

ชื่อฐานข้อมูล hellomyweb

อย่าพึ่งคลิกที่ปุ่มถัดไป ถึงขั้นตอนนี้ให้เราเปิด web browser อีกหน้าจอนึงขึ้นมาและพิมพ์ http://127.0.0.1/phpmyadmin/ หรือ http://localhost/phpmyadmin/ ลงไปหน้าจอจะเปลี่ยนไปดังภาพด้านล่าง


ตรงช่อง สร้างฐานข้อมูลใหม่ ให้กรอก hellomyweb ลงไปจากนั้นคลิกที่ สร้าง เพื่อเป็นการสร้างฐานข้อมูล

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

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

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

ซึ่งในบทนี้เรามาลองทำเว็บเพจดู ขั้นตอนตามนี้

1.ให้คุณเปิดโปรแกรม Notepad ขึ้นมา โดยไปที่ All programs > Accessories > Notepad



ซึ่งโปรแกรม notepad จะมีหน้าตาแบบนี้

 

2. ให้คุณพิมพ์ข้อความต่อไปนี้ ใน notepad

<html>
    <head>
        <title>ทดลองทำเว็บไซต์แบบง่ายๆ</title>
    </head>
    <body>
             Hellomyweb นี่คือเว็บไซต์แรกของฉัน
    </body>
</html>


ข้อความที่คุณพิมพ์ไปนั้นเราเรียกว่า SOURCE CODE เป็นภาษาคอมพิวเตอร์ เรียกว่าภาษา HTML ซึ่งใช้ในการจัดหน้าของเว็บเพจ คุณสามารถศึกษารายละเอียดของภาษา html ได้ที่หัวข้อของ html

เมื่อพิมพ์เสร็จแล้วให้เราเลือก save as จะมีหน้าต่างออกมา ให้เราใส่ชื่อไฟล์เป็น index.html และเลือกชนิดไฟล์ (save as type) เป็นแบบ All files จากนั้นก็ save ไฟล์



เราจะได้ไฟล์มาดังรูปข้างล่าง ให้เราคลิกเพื่อเปิดไฟล์ index.html เราก็จะเห็นเว็บไซต์แรกของเรา ซึ่งจะถูกเปิดโดยโปรแกรม internet explorer (ต่อไปนี้เราจะเรียกว่า Web Browser)



จากรูปจะบรรยายการทำงานของ html ที่เขียนเอาไว้ ซึ่งจะเห็นว่าตัวหนังสือที่อยู่ใน <title>....</title> จะแสดงที่ส่วนหัวของโปรแกรม internet explorer และในส่วนของ <body>....</body> จะแสดงในส่วนแสดงผลของโปรแกรม

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

1.เปิดไฟล์ไม่ได้    ให้เราลองเปิดโดยวิธีนี้แทน

เปิดโปรแกรม internet explorer ไปที่ file > open > browse เลือกไฟล์ที่ เรา save และกดที่ open



2.เปิดแล้วเป็นภาษาต่างดาว อ่านไม่ออก     จากรูปให้เราไปที่ file > view > encoding > thai



หลังจากที่เราลองเขียน sorce code ไปแล้ว เราจะลองไปดูเว็บไซต์อื่นกันบ้างว่าเค้าเขียน source code กันอย่างไร ซึ่งการดู sorce code ของเว็บไซต์อื่นก็ทำได้โดย คลิกขวาที่เว็บที่เรากำลังดูอยู่ เลือก view soure

 

เราอาจจะเห็นว่าทำไมเว็บอื่น soure code เยอะมาก ซึ่งเราก็ไม่ต้องตกใจครับจริงแล้ว source code พวกนี้เราไม่ได้ใช้ notepad เขียน เพราะจะลำบากในการเขียนมากแต่ที่ในบทความนี้ให้ใช้ notepad เพราะเป็นโปรแกรมที่มีอยู่ในทุกเครื่อง จริงแล้วเราจะใช้โปรแกรมช่วยเขียน เช่น DREAMWEAVER , HTML - KIT , EDIT PLUS เป็นต้น ซึ่งในบทความต่อไปจะเป็นการลองใส่รูปในเว็บไซต์เพื่อเพิ่มสีสันในเว็บของเรา

ถ้าสับสนระหว่างเว็บไซต์ เว็บเพจ โฮมเพจ ให้อ่านเนื้อหาในส่วนของ พื้นฐานการทำเว็บดู
7.การใส่รูปในเว็บเพจ
    ในบทความนี้จะเป็นการลองใส่รูปในเว็บเพจดู โดยให้เราหารูปอะไรก็ได้ในเครื่อง และ copy ให้ไปอยู่ใน folder เดียวกับไฟล์ index.html ที่เราได้ลองสร้างมาจากบทความแรก โดยรูปที่บทความนี้ใช้เป็นรูปในงานราชพฤกษ์ ที่จัดขึ้นที่เชียงใหม่ และมีชื่อรูปว่า 1.jpg

 

ให้เราเปิด notepad โดยไปที่ file > open และเลือกไฟล์ index.html ที่เราทำไว้จากบทความที่ผ่านมา

 

พิมพ์ข้อความตามด้านล่างนี้ โดยในส่วนของ <img src = "1.jpg"> ชื่อรูปที่นำมาใช้เป็น 1.jpg แต่ในส่วนของคุณก็เปลี่ยนเป็นชื่อรูปของคุณเอง

<html>
    <head>
        <title>ทดลองใส่รูปในเว็บไซต์</title>
    </head>
    <body>
             เที่ยวงาน ราชพฤกษ์
             <br>
             บรรยากาศภายในงาน
             <br>
             <img src = "1.jpg">
    </body>
</html>


ซึ่งจะได้ผลตามรูปด้านล่าง



เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

    <img src = "1.jpg">    เป็น code ที่ใช้ในการแสดงภาพ

    <br>    เป็น code ที่ใช้ในสั่งให้ขึ้นบรรทัดใหม่

    ซึ่งเราอาจทดลองเอา <br> ที่อยู่ระหว่างประโยค เที่ยวงาน ราชพฤกษ์ และประโยค บรรยากาศภายในงาน ออกและกด save ที่ notepad

    จากนั้นเราก็ไปดูผลที่ internet explorer (Web browser) ของเรา และทำการกด F5 หรือ กด Refresh เพราะ Web browser ยังแสดงผลที่เกิดจากการเปิดไฟล์ index.html ครั้งแรกอยู่ จากรูปจะเห็นว่าผลที่แสดงต่างจากเดิม โดยจะไม่มีการเว้นบรรทัดระหว่าง เที่ยวงาน ราชพฤกษ์ และ บรรยากาศภายในงาน



    web browser ไม่ได้แสดงผลในครั้งแรกที่เราเปลี่ยนแปลงไฟล์ index.html ก็เพราะว่า web browser เปิดไฟล์ index.html และแสดงผลค้างไว้ จะไม่มีการเรียกไฟล์ index.html มาอ่านซ้ำระหว่างที่มีการแสดงผล ดังนั้นเราต้องทำการกด Refresh หรือ F5 เพื่อให้ web browser ทำการเรียกไฟล์ index.html มาแสดงผลใหม่

     เราอาจลองเพิ่มรูปโดย การเพิ่มบรรทัดของ <img src = "ชือรูปของคุณ"> เข้าไปอีกก็ได้ บทความนี้ก็จบเพียงแค่นี้ บทความต่อไปจะเป็นเรื่องของการเชื่อมโยงไฟล์เข้าด้วยกัน ( การสร้าง LINK )
8.การเชื่อมโยงเว็บเพจด้วย link
    เว็บไซต์หนึ่งเว็บไซต์จะประกอบไปด้วยไฟล์(เว็บเพจ)มากมาย ประกอบกันเหมือนเป็นหนังสือหนึ่งเล่มที่ประกอบด้วยหน้ากระดาษมากมายหลายแผ่น เว็บไซต์ก็ใช่เดียวกันถ้าเรามีข้อมูลมากขึ้นเราก็จำเป็นจะต้องแบ่งหน้าเพื่อความสะดวกในการอ่าน เช่นเดียวกับหนังสือ

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

    ให้เราสร้างไฟล์มา 3 ไฟล์มีชื่อและ source code ดังนี้

1.index.html เป็นไฟล์ที่เทียบได้กับสารบัญของเว็บไซต์ของเรา ซึ่ง source code มีดังนี้

<html>
    <head>
        <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>
    </head>
    <body>
             เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้
             <br>
             <a href = "page1.html">หน้า 1</a>
             <a href = "page2.html">หน้า 2</a>
             <br>
             <h1>คุณอยู่ที่ หน้าสารบัญ</h1>
    </body>
</html>


2.page1.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 1 ของหนังสือ

<html>
    <head>
        <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>
    </head>
    <body>
             เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้
             <br>
             <a href = "index.html">หน้าสารบัญ</a>
             <a href = "page2.html">หน้า 2</a>
             <br>
             <h1>คุณอยู่ที่ หน้า 1</h1>
    </body>
</html>


3.page2.html เป็นไฟล์ที่เทียบได้กับ หน้าที่ 2 ของหนังสือ

<html>
    <head>
        <title>ทดลองสร้าง link ให้กับเว็บไซต์</title>
    </head>
    <body>
             เว็บไซต์นี้ประกอบด้วย 3 เว็บเพจซึ่งคุณสามารถคลิกที่ link ข้างล่างเพื่ออ่านหน้าอื่นได้
             <br>
             <a href = "index.html">หน้าสารบัญ</a>
             <a href = "page1.html">หน้า 1</a>
             <br>
             <h1>คุณอยู่ที่ หน้า 2</h1>
    </body>
</html>


ให้เราลอง เปิดไฟล์ดูจะเห็นดังรูปด้านล่าง



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

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

เราจะเห็นได้ว่ามี source code ใหม่เพิ่มขึ้นมาคือ

    <a href = "index.html">หน้าสารบัญ</a>    เป็นส่วนที่ใช้แสดง link ของเราซึ่งมีรายละเอียดดังนี้

<a href="ชื่อไฟล์ที่เราต้องการเปิดเมื่อคลิกที่ลิ้งค์นี้">ชื่อลิ้งค์ของเราที่แสดงใน web browser</a>

    <h1>หน้า 1</h1>    เป็นส่วนที่เปลี่ยนขนาดของข้อความของเราที่แสดงใน web browser ซึ่งเราสามารถลองเปลี่ยนขนาดโดยเปลี่ยนตัวเลขเป็น h2 , h3 ขนาดของตัวอักษรที่แสดงก็จะเปลี่ยนแปลง

สำหรับบทความนี้ก็จบลงแค่นี้ บทความต่อไปจะเป็นเรื่องของการแสดงเว็บไซต์ของคุณให้ชาวโลกได้เห็น
เกี่ยวกับบทความนี้
ระดับความยาก : พื้นฐาน
คะแนนของบทความนี้ : 10
สร้างเมื่อ : 16-05-2010
จำนวนครั้งที่เปิด : 53,042
เนื้อหาที่เกี่ยวข้อง :
-9.แสดงเว็บเพจที่คุณทำให้โลกได้เห็น
    การที่เราจะทำให้คนทั่วไปได้เห็นเว็บของเรานั้น เราจำเป็นต้องนำเว็บเพจที่เราสร้างขี้นมาไปเก็บไว้ที่ web server ซึ่ง web server จะทำหน้าที่คอยส่งไฟล์ที่เราทำขึ้นมาไปให้คนทั่วไปได้เห็น เหมือนกับที่เราเรียกไฟล์จากเครื่องของเรามาดูนั่นเอง

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

    ในบทนี้จะเกี่ยวกับการใช้บริการ web server ฟรี ซึ่งในบทความนี้จะใช้บริการ free web server ของ http://www.freewebhostingarea.com/

เราจะมาดูรายละเอียดการสมัครเข้าใช้ web server ฟรีของที่นี้กัน

        1. ให้พื้นที่ในการจัดเก็บไฟล์ของคุณถึง 200 MB แต่ไฟล์ที่คุณจะนำไปเก็บไว้ที่ server ตัวนี้นั้น จะต้องมีขนาดเล็กว่า 10 MB (การดูขนาดไฟล์ของคุณทำได้โดยคลิกขวาที่ไฟล์นั้น เลือก Properties ดูที่ size จะบอกขนาดของไฟล์เอาไว้)

        2. ให้คุณสามารถส่งไฟล์ไปที่ web server ด้วยระบบ FTP ได้

        3. และอื่นๆอีกมากมายซึ่งถ้าเขียนใส่ในบทความนี้อาจทำให้บทความนี้ยาวเกินไป

เริ่มต้นของใช้บริการฟรี

1. หลังจากที่คุณเปิด http://www.freewebhostingarea.com/ แล้วเลื่อนลงมาดูด้านล่างของเว็บจะเห็นช่องให้เราใช่ชื่อเว็บของเราซึ่งมีด้วยกัน 3 ช่องด้วยกัน คือ

             1. www.ชื่อเว็บของคุณ.6te.net

             2. www.ชื่อเว็บของคุณ.ueuo.com

             3. www.ชื่อเว็บของคุณ.orgfree.com

ซึ่งในบทความนี้เราจะใช้ http://hellomyweb.6te.netตามรูปด้านล่าง



2. กรอกรายละเอียด



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



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



4. เมื่อคลิกที่ลิงค์แล้วจะมีหน้าจอดังรูปข้างล่าง ซึ่งเป็นข้อมูลที่เราจะต้องจดเอาไว้ให้ดี อาจ save หน้านี้เก็บไว้ดูภายหลังกันลืม และเป็นความลับ



5. เมื่อสมัครขอใช้บริการเรียบร้อยแล้ว เราก็จะเริ่มนำไฟล์ไปเก็บไว้ที่ web server กัน ซึ่งการนำไฟล์ไปเก็บไว้ใน web server ก็ให้เราเปิด My Computer ขึ้นมาแล้วพิมพ์ ftp://ชื่อเว็บของคุณ ซึ่งในบทความนี้ก็เป็น ftp://hellomyweb.6te.net จะมีหน้าจอถาม username และ password ขึ้นมาให้คุณใส่ username และ password ที่ได้จากภาพด้านบน เมื่อกรอกเสร็จก็เป็นดังรูปด้านล่าง



6. ให้คุณลบไฟล์ที่มีอยู่ ทั้งหมดแล้วนำไฟล์ของคุณไปใส่แทน โดยลากไฟล์จากในเครื่องลงใน My computer ได้เลย

โดยที่ เมื่อคุณเปิดเว็บของคุณ เช่น www.hellomyweb.6te.net ตัว web server จะหาไฟล์ที่ชื่อ index.html มาแสดงเป็นหน้าแรก (home page) ของคุณถ้าคุณไม่มี file ที่ชื่อ index.html ก็ไม่สามารถเปิดเว็บไซต์ของคุณได้ และ web browser จะแสดง error ออกมา



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

**หากไม่เข้าใจวิธีอัพไฟล์ขึ้น web sever สามารถอ่านต่อได้ในบทความนี้ครับ การใช้งาน FTP ผ่าน My computer ของ window
10.สรุปการทำเว็บไซต์
    หลังจากที่เราได้ลองทำเว็บจากบทความข้างต้นไปแล้ว ซึ่งก็คงพอทำให้นึกภาพรวมของเว็บไซต์ได้ ในบทความนี้จะเป็นการสรุปการทำเว็บไว้อีกครั้ง

    1. ภาษา HTML
    เว็บเพจนั้นสร้างมาจากภาษา HTML ซึ่งจะใช้ในการจัดรูปแบบของเว็บเพจว่าต้องการให้ ตัวอักษรมีขนาเท่าไหร่ จัดวางอยู่นะตำแหน่งไหน ให้รูปภาพอยู่ที่ตำแหน่งใด ซึ่งจำเป็นมากในการสร้างเว็บ ดังนั้นเราจึงควรรู้พื้นฐานของ HTML บ้าง ถึงแม้ว่าจะมีโปรแกรมอย่าง Dreamwerver ที่เข้ามาอำนวยความสำดวกในการเขียน HTML ให้เราแต่ตัวของ Dreamweaver เองก็ยังมีข้อจำกัดอยู่ ดังนั้นถ้าเรารู้ภาษา HTML ก็จะทำให้ข้อจำกัดนั้นหายไป

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

    3. การใช้โปรแกรมสร้างเว็บเพจ
    โปรแกรมที่ใช้ในการสร้างเว็บเพจอย่าง Dreamwerver เป็นโปรแกรมที่ใช้งานได้ง่าย และทำให้เราสร้างเว็บเพจได้เร็วขึ้น นอกจากนั้นยังมีตัวช่วยและเครื่องมือต่างคอยอำนวยความสำดวกเรา เช่น FTP ซึ่งเป็นการดีที่เราจะเรียนรู้โปรแกรมพวกนี้เอาไว้ สำหรับผู้เริ่มต้น เราอาจศึกษาจากตัวของ Dreamwerver เองก็จะทำให้เราเรียนรู้ได้เร็วขึ้น และรู้วิธีการเขียน HTML ที่ดี เพราะ Dreamwerver นั้นจะแสดง HTML ที่โปรแกรมสร้างขึ้นมา ซึ่งเป็นการเขียนที่เรียบร้อยละดูง่าย

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

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



+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239
« แก้ไขครั้งสุดท้าย: 05/พ.ค./12 21:41น. โดย เก่งจอมทอง »


เมา-ลึกบ่อกลัว กลัวอู้บ่อรู้เรื่อง ^^

ออฟไลน์ หนุ่มกำแพงเพชร

  • มือสมัครเล่น
  • **
  • ออฟไลน์
  • 9
    3

ขออ่านหน่อยนะครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ จ้อง

  • ผู้ทรงเกียรติ
  • *
  • ออฟไลน์
  • 883
    1906
  • เพศ: ชาย

น่าสนใจ ขออ่านแล้วลองฝึกหัดสักระยะก่อน
ขอบคุณมากครับ

 :'e:108

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239
สวัสดีครับ ขอให้มีความสุขกับเสียงเพลงมาก ๆ นะครับ


ขอบคุณมากครับ น่าสนใจมากสำหรับทุกคนครับ แค่อ่านจากกระทู้ก็น่าติดตามแล้ว

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ ชัยยุทธ

  • เทพ
  • *****
  • ออฟไลน์
  • 1059
    111

ขอบคุณมากครับ ขอนำไปทดลองทำดูด้ยคนครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239

ออฟไลน์ นิค กาฬสินธุ์

  • สมาชิกใหม่
  • *
  • ออฟไลน์
  • 1
    4

 :'e:31 ขอบคุณครับ

+0 โดย

ลิ้งค์หัวข้อ: https://www.plengpakjai.net/index.php?topic=7239