Templates by BIGtheme NET
หน้าแรก / การสร้างเว็บไซต์

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

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

รู้จักกับ DMOZ : Open Directory Project ที่ใหญ่ที่สุดในโลก

dmoz-thumb

enjoyday พึ่งจะติด DOMZ วันนี้ก็เลยอยากจะมาแนะนำให้ได้รู้จักกันค่ะ ^^ ODP (Open Directory Project) เป็น Web Directory มาตรฐานสูง ที่รวบรวมเว็บไซต์ต่างๆ จัดไว้เป็นหมวดหมู่ มากกว่า 4 ล้านเว็บไซต์  โดยอาศัยอาสาสมัคร (Editor) หลายหมื่นคนจากทั่วโลกมาช่วยดูแลคัดกรองเว็บไซต์ต่างๆ ที่ส่งรายชื่อเข้ามา ODP ดำเนินการมาตั้งแต่ 1998 โดย Netscape Communications Corporation ข้อมูล ณ วันที่ 12 ส.ค. 2009  จำนวนเว็บไซต์ในฐานข้อมูลของ ODP มีจำนวน 4,596,136 เว็บ ใน 590,000 กว่าหมวดหมู่  และมีบรรณาธิการอาสาสมัคร 83,828 คน ชื่อ ODP หลายคนอาจจะไม่ค่อยคุ้นเคยนัก น่าจะรู้จักกันในชื่อ ...

อ่านต่อ »

ข้อแนะนำสำหรับมือใหม่ที่เริ่มทำเว็บไซต์

เนื่องจากช่วงนี้มีผู้ชมที่หลงเข้ามาใน blog นี้ด้วยคำค้นหาว่า “สร้างเว็บไซต์” หรือ “สอนทำเว็บ” เป็นจำนวนเพิ่มขึ้นกว่าแต่ก่อน ก็เลยอยากจะเขียนบทความนี้ขึ้นมาค่ะ ผู้เขียนเองก็ยังจัดว่าเป็นมือใหม่เช่นกัน เพราะยังทำ Blog นี้ได้ไม่นาน มีอะไรที่ยังต้องศึกษาอีกเยอะ แต่ถ้าจะให้แนะนำเบื้องต้นคิดว่าพอจะทำได้ และ Blog นี้ก็มี concept ว่า “แนะนำการสร้างเว็บไซต์” เน้นผู้ชมที่เป็นมือใหม่ด้วย หัวข้อนี้น่าจะเป็นประโยชน์ทีเดียวค่ะ . ข้อแรก “ไม่มีทักษะไม่ใช่เรื่องใหญ่เลย สำหรับคนที่อยากจะเริ่มต้นทำเว็บ” “อยากทำเว็บไซต์ แต่ไม่มีทักษะอะไรเลยสักนิด จะทำได้มั้ย?” สามารถทำได้แน่นอนค่ะ ขอแค่มีใจอยากจะทำ แต่ต้องอดทน ยอมเหนื่อยกว่าชาวบ้านเค้ามากหน่อย หาข้อมูลศึกษาเยอะๆ ว่าคนอื่นเค้าทำเว็บกันยังไง แล้วลองลงมือทำตามด้วย เอาตัวอย่างไปดูก่อนเลย เว็บใหม่เมื่อเดือนเมษา ปีนี้เองค่ะ http://www.fxmodify.com  (สอนการใช้งาน Photoshop) เจ้าของเว็บนี้ศึกษาและเขียน code HTML เอง (ดูๆ แล้วน่าจะใช้โปรแกรม Dreamweaver) ทั้งยังปรับปรุงอย่างต่อเนื่องมาเรื่อยๆ ...

อ่านต่อ »

แนวทางการดีไซน์บล็อกยุคใหม่ (ตอน2)

6. ส่วนแสดงความคิดเห็น(Comments) ส่วนความคิดเห็น เป็นบริเวณที่มีการถกกันเกี่ยวกับบทความจากผู้อ่าน/ผู้เยี่ยมชม หน้าที่ของผู้ออกแบบ จะต้องออกแบบให้บริเวณนี้ดูเป็นการสนทนากัน ด้วยการแยกแต่ละความคิดเห็นออกจากกัน อาจจะด้วยการกำหนดหมายเลขให้แต่ละความคิดเห็น วิธีนี้ยังช่วยให้ง่ายต่อการอ้างอิงความคิดเห็นต่าง ๆ อีกประการ คือแยกความคิดเห็นของเจ้าของบทความ ให้ต่างจากความคิดเห็นทั่วไป เพื่อเอาไว้คั่นว่าได้ตอบความเห็นของผู้อ่านถึงไหนแล้ว หรือ ดูว่ามีความเห็นเพิ่มมาอีกหรือป่าว ตัวอย่างส่วนแสดงความคิดเห็นที่ดี 1. Chris Shiflett Chris’ ออกแบบแบบเรียบง่าย อ่านง่าย แยกชื่อผู้ออกความคิดเห็น ออกจาก ความคิดเห็นอย่างชัดเจน เพื่อประโยชน์ที่ได้กล่าวไปแล้วข้างต้น 2. Darkmotion ผมชอบที่เขาแยกส่วนชื่อผู้ออกความเห็น กับ ความคิดเห็น และดูแล้วได้อารมณ์มาก เหมือนการคุยกัน 3. Blog Design Blog นี่ก็เป็นอีกตัวอย่างหนึ่ง มีตัวเลขบอกลำดับความคิดเห็น และเน้นชื่อผู้ออกความคิดเห็นด้วยกล่องสีฟ้า ทำให้แยกออกจากส่วนของความคิดเห็น วิธีทำให้การออกแบบส่วนแสดงความคิดเห็นออกมาดูดี แยกแต่ละความคิดเห็นออกจากกัน วิธีที่ง่ายที่สุด ทำได้ด้วยการใช้สี และอีกวิธีคือ วางไว้คนละที่กันอาจจะใช้กรอบครอบแต่ละส่วน หรือใช้เส้นคั่นก็ได้ ใช้สี ...

อ่านต่อ »

แนวทางการดีไซน์บล็อกยุคใหม่ (ตอน1)

ในการออกแบบบล็อก จะสังเกตได้ว่าการออกแบบส่วนประกอบต่าง ๆ จะมีความแตกต่างกัน ในบทความนี้ผมจะแยกส่วนประกอบพวกนี้ออกเป็น 9 ส่วน หากคุณให้ความสนใจในแต่ละส่วนมากเท่าไหร่ ภาพรวมของบล็อกที่ออกมาจะดูดีมากเท่านั้น ส่วนหัว(Header) ส่วนเนื้อหา(Content Area) เมนูหลัก(Primary Navigation) เมนูรอง(Secondary Navigation) หัวเรื่อง(Headlines) ส่วนแสดงความคิดเห็น(Comments) ส่วนท้ายของบทความ(Post’s Footer) ส่วนท้ายของบล็อก(Footer) โฆษณา(Advertisements) 1.ส่วนหัว(Header) ส่วนหัวเป็นส่วนที่ผู้เยี่ยมชมส่วนใหญ่จะเห็นเป็นส่วนแรก เมื่อเข้ามาในบล็อกของคุณ และเป็นส่วนที่สำคัญที่สุด มันเป็นสิ่งเดียวที่จะแยก ให้เห็นถึงความแตกต่างระหว่างบล็อกของคุณกับบล็อกอื่น ๆ นับล้านบล็อก เป็นสิ่งที่แสดงถึงเอกลักษณ์ของบล็อกคุณเพื่อให้เกิดการจดจำ จากที่กล่าวมาแสดงให้เห็นว่าทำไมส่วนหัวจึงสำคัญมากที่สุด ในบรรดากระบวนการออกแบบบล็อก แม้แต่คนที่ไม่ให้ความสนใจกับการออกแบบบล็อกสักเท่าไหร่ แต่เขาก็ให้ความสำคัญกับส่วนหัวมาก ตัวอย่างส่วนหัวที่ดี 1. Octwelve Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร 2. Cult foo ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ...

อ่านต่อ »

สร้างเว็บไซต์แบบมืออาชีพในพริบตาด้วย Web CMS

ในบทความก่อนๆ มีการกล่าวถึง Web CMS อยู่หลายครั้ง ในบทความนี้เราจะได้ทำความรู้จักกับ Web CMS  แบบจริงๆ จังสักที… ปัจจุบันมีเว็บไซต์เกิดขึ้นใหม่มากมาย เนื่องจากผู้สร้างเว็บสมัยนี้ไม่จำเป็นต้องเรียนรู้การเขียนโปรแกรมภาษา HTML หรือภาษา script ต่างๆ เช่น PHP, ASP, JavaScript เหมือนสมัยก่อน ก็สามารถใช้ Web CMS ในการสร้างเว็บไซต์ขึ้นได้อย่างง่ายดาย โดยใช้เวลาไม่กี่นาที แถมหน้าตาเว็บที่ได้ก็ยังเหมือนมืออาชีพทำอีกด้วย !! Web CMS คืออะไร ? Web CMS (Web Content Management System) คือ software ระบบจัดการเนื้อหาเว็บไซต์ หรือ เว็บไซต์สำเร็จรูป (ซึ่งเป็นคำเรียกให้มือใหม่เข้าใจง่าย) ถูกออกแบบมาให้ใช้งานได้ง่าย ตั้งแต่การติดตั้ง การสร้างและการจัดการดูแลเนื้อหา เหมาะสำหรับผู้ที่ไม่มีพื้นฐานด้านการเขียนโปรแกรม (หรือจะมี ก็ไม่ว่ากันค่ะ) ...

อ่านต่อ »

4.4 ลงมือสร้างเว็บไซต์

สำหรับตัวอย่างการสร้างเว็บไซต์ที่ enjoyday วางแผนไว้ว่าจะนำเสนอนั้น บางส่วนอยู่ระหว่างการจัดทำ แบ่งเป็น 1. การสร้าง Blog โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : WordPress ตัวอย่างเว็บ Blog : enjoyday.net นี่แหละค่ะ « บทความเรื่อง การสร้าง Blog ด้วย WordPress » 2. การสร้างเว็บไซต์ โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : Joomla ตัวอย่างเว็บไซต์ : enjoychinese.net เป็นเว็บสอนภาษาจีน (อีกเว็บไซต์หนึ่งของผู้เขียนเองค่ะ) « บทความเรื่อง การสร้างเว็บไซต์ด้วย Joomla! » 3. การสร้างเว็บไซต์แบบเขียนหน้าเว็บเพจเองโดยใช้ HTML, CSS, XHTML แบบนี้จะเหมาะกับเว็บไซต์ที่มีจำนวนหน้าเว็บเพจไม่มาก ที่ไม่มีการเปลี่ยนแปลงบ่อยๆ ตัวอย่างเว็บไซต์ #1 : ...

อ่านต่อ »

4.3 โปรแกรมสำหรับใช้งานในการสร้างเว็บไซต์

โปรแกรมสำหรับใช้งานในการสร้างเว็บไซต์ที่จำเป็น ได้แก่ 1. โปรแกรมสำหรับพัฒนาเขียนเว็บเพจ สำหรับตัวที่แนะนำคือ EditPlus กับ Adobe Dreamweaver กรณีที่เราออกแบบเว็บไซต์และเขียนเว็บเพจแต่ละหน้าเอง แนะนำให้ใช้ Adobe Dreamweaver ค่ะ ก่อนใช้งานโปรแกรม Adobe Dreamweaver เราจะต้องมีความรู้พื้นฐานภาษา HTML ก่อนนะคะ ไม่งั้นงงแย่ เว็บไซต์ที่สอนการใช้งานโปรแกรม Adobe Dreamweaver CS3 (ณ ตอนนี้ โปรแกรม Adobe มาถึงเวอร์ชั่น CS4 แล้วค่ะ) ลองเข้าไปศึกษาได้ค่ะ http://www.bloggang.com/viewdiary.php?id=tutorcat&month=12-2007&date=12&group=1&gblog=1 ส่วนกรณีที่เราใช้โปรแกรมเว็บไซต์สำเร็จรูปอื่นๆ เช่น WordPress, Joomla ที่จะต้องมีการแก้ไขไฟล์บางไฟล์ และเราไม่มีความรู้ทางการเขียนโปรแกรมเลย อาจจะแค่โปรแกรม Text Editor ง่ายๆ อย่าง EditPlus เปิดโปรแกรมเร็วดี ไม่หนักเครื่องด้วยค่ะ download โปรแกรม EditPlus ...

อ่านต่อ »

4.2 ภาษาโปรแกรมที่ใช้ในการสร้างเว็บไซต์

เรามาถึงขั้นตอนลงมือสร้างเว็บเพจแต่ละหน้าแล้ว แต่คาดว่าหลายๆ คนอาจจะยังขาดทักษะด้านการเขียนโปรแกรมอยู่  แต่ไม่ต้องตกใจไปค่ะ ค่อยๆ ศึกษากันไป . ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่ 1. HTML (ย่อมาจาก Hyper Text Markup Language) เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย 2. CSS (ย่อมาจาก Cascading Style Sheets) เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น 3. XHTML ...

อ่านต่อ »

4.1 รูปแบบของเว็บไซต์

รูปแบบของเว็บไซต์แบ่งได้เป็น 2 รูปแบบหลักๆ คือ 1. Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html    เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้ เมื่อมีผู้เรียกดูหน้าเว็บเพจนั้น  Web Server ก็จะส่งไฟล์นั้นไปให้ยังเครื่องที่ร้องขอ และแสดงผลออกทางโปรแกรมเว็บเบราเซอร์บนเครื่องของผู้ชมนั้น Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ  และไม่มีการติดต่อฐานข้อมูล ถ้าเราจะสร้างเว็บรูปแบบนี้ สามารถทำได้ไม่ยาก โดยต้องศึกษาเรื่องการเขียนเว็บเพจด้วย HTML ก่อน ข้อดีของเว็บรูปแบบนี้ คือ เราสามารถกำหนดรูปแบบการตกแต่ง และเนื้อหา ของแต่ละหน้าได้ตามต้องการ  แต่ก็ควรควบคุมสไตล์ของแต่ละหน้าให้เหมือนกันด้วย อย่าให้หน้าใดโดดจนคิดว่าเป็นคนละเว็บไซต์กัน ส่วนข้อเสีย ก็คือ การแก้ไขเปลี่ยนแปลงยุ่งยาก จะต้องแก้ไขกับไฟล์หน้าเว็บเพจนั้นๆ เมื่อแก้ไขแล้ว ก็ต้อง Upload ไฟล์นั้นขึ้นไป Web Server ใหม่ทุกครั้ง  และเว็บรูปแบบนี้จะไม่สามารถใช้งานฐานข้อมูลได้ ...

อ่านต่อ »

4 ลงมือสร้างเว็บไซต์และทดสอบ

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

อ่านต่อ »