Templates by BIGtheme NET
สวัสดีค่ะ enjoyday.net เป็น Blog ที่ให้ข้อมูลความรู้เกี่ยวกับการทำเว็บไซต์ แนะนำการสร้างเว็บไซต์ สอนทำเว็บตั้งแต่พื้นฐาน สอน HTML, CSS, XHTML แนะนำการใช้งาน CMS ต่างๆ เช่น Wordpress, Joomla! และ PrestaShop

สำหรับผู้เริ่มต้นที่ยังงงๆ ไม่รู้จะเริ่มต้นตรงไหน ให้เริ่มที่นี่หัวข้อ สอนการสร้างเว็บไซต์

ถ้ากำลังมองหาบทเรียนออนไลน์สอนเขียนเว็บเพจ ก็ที่นี่เลย ...

ในปัจจุบันเว็บไซต์ส่วนใหญ่จะไม่ทำเว็บด้วยการเขียนเว็บเพจทีละหน้าเองแล้ว แต่จะอาศัย CMS (Content Management System) เช่น Wordpress, Joomla! ซึ่งเป็นระบบการจัดการเนื้อหาของเว็บไซต์อย่างอัตโนมัติ โดยที่ไม่ต้องมีความรู้ด้านการเขียนโปรแกรมมาก่อน

ถ้าผู้อ่านสนใจจะทำ Blog อย่าง enjoyday.net สามารถศึกษาได้จากหัวข้อ การสร้าง Blog ด้วย Wordpress หรือสนใจอยากทำเว็บไซต์ด้วย CMS ลองศึกษาจากหัวข้อ การสร้างเว็บไซต์ด้วย Joomla! ค่ะ

ส่วนการทำเว็บร้านค้าออนไลน์ก็เช่นกัน จะอาศัย CMS เช่น PrestaShop, OpenCart และ Magento เป็นต้น

นอกจากนี้ ภายใน Blog ยังมีเรื่องราวต่างๆ ที่น่าสนใจในแวดวงคอมพิวเตอร์และอินเตอร์เน็ต อ่านได้จาก Categories ที่วางอยู่ด้านขวามือ

หวังว่า Blog นี้จะเป็นประโยชน์ต่อผู้สนใจทำเว็บไซต์ทั้งหลายนะคะ ^^

DHTML คืออะไร

DHTML คืออะไร by enjoyday.net DHTML ( ย่อมาจาก Dynamic HTML) เป็นเทคนิค (ไม่ใช่ภาษา) ที่ช่วยให้การแสดงเว็บเพจน่าสนใจมากขึ้น สามารถโต้ตอบกับผู้ใช้งานได้มากกว่าเว็บเพจในรูปแบบ HTML ปกติ  โดยไม่ต้องติดต่อกับ Web Server ตลอดเวลา วิธีการสร้างเเว็บเพจแบบ DHTML จะอาศัยเทคโนโลยีในการสร้างเว็บเพจหลายๆ ตัว เช่น JavaScript, VB Script, ActiveX Control , Document Object Model , CSS และเทคโนโลยีอื่นๆ ตัวอย่าง DHTML ที่ทำให้เราสามารถเพิ่มลูกเล่นให้กับเว็บเพจได้ เช่น การทำ drop down menu, การเปลี่ยนรูปภาพแบบอัตโนมัติโดยที่ไม่ต้องคลิก, การทำหิมะตกในหน้าเว็บ, การทำภาพสไลด์, การทำข้อความวิ่งตาม mouse เป็นต้น ข้อควรระวังในการใช้ DHTML เนื่องจากการทำงานของ ...

อ่านต่อ »

XHML คืออะไร

XHTML คืออะไร by enjoyday.net XHTML  (ย่อมาจาก Extensible HyperText Markup Language) XHTML เป็นภาษาประเภท Markup Language ที่เกิดจากการนำ XML และ HTML มารวมกัน  กลายเป็นมาตรฐานใหม่ของ HTML     คำสั่งต่างๆ นั้นก็ยังเหมือนกับ HTML แต่มีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป จากข้อเสียของ HTML ที่เมื่อแสดงผลผ่านบราวเซอร์ของค่ายต่างๆ เช่น Internet Explorer, Firefox, Netscape, Opera และอื่นๆ  ได้ผลที่แตกต่างกัน  เว็บเพจที่ออกแบบมาอย่างดีของเรา อาจดูสวยงามถูกต้องใน IE แต่กลับผิดเพี้ยนไปเมื่อดูด้วย Firefox องค์กร W3C จึงได้นำ HTML 4.0 ...

อ่านต่อ »

XML คืออะไร

XML คืออะไร by enjoyday.net XML (ย่อมาจาก eXtensible Markup Language) เป็นภาษาที่ถูกออกแบบมาเพื่อใช้เป็นภาษากลางสำหรับแลกเปลี่ยนข้อมูลระหว่างกัน XML เหมาะกับการแลกเปลี่ยนข้อมูลผ่านเครือข่ายคอมพิวเตอร์ เนื่องจาก XML ไม่ได้ขึ้นอยู่กับโปรแกรมประยุกต์หรือระบบปฏิบัติการใด ภาษา XML ไม่ใช่เวอร์ชั่นใหม่ หรือส่วนขยายของ HTML และก็ไม่ใช่ภาษา XHTML ด้วย HTML ถูกออกแบบมาให้เน้นการแสดงผลข้อมูล เช่น ให้ข้อความเป็นตัวหนา ตัวเอียง โดยที่ไม่รู้ว่าข้อมูลนั้นคือข้อมูลอะไร ส่วน XML จะรู้ว่าข้อมูลนั้นคือข้อมูลอะไร แต่จะไม่ได้มีหน้าที่จัดตกแต่งเอกสารให้สวยงาม การแสดงผลจะให้ภาษาอื่นทำหน้าที่แทน ภาษา XML มีโครงสร้างประกอบไปด้วย tag ต่างๆ เช่นเดียวกับ HTML  แต่แตกต่างที่เราสามารถสร้าง tag ขึ้นมาใช้งานเองได้    tag ที่เราสร้างจะเป็นมาตรฐานในตัวมันเอง ซึ่งภาษาอื่นๆ จะสามารถเรียกใช้งาน tag ของเราได้ด้วย ไม่ว่าจะเป็น  ...

อ่านต่อ »

HTML คืออะไร

HTML คืออะไร by enjoyday.net HTML (ย่อมาจาก Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ มีแม่แบบมาจากภาษา SGML (Standard Generalized Markup Language ) ที่ตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) HTML มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ เช่น <b>ข้อความใน tag นี้จะเป็นตัวหนา</b>, <i>ข้อความใน tag นี้จะเป็นตัวเอียง</i> เป็นต้น เราอาศัย tag ต่างๆ สร้างเป็นเว็บเพจ ...

อ่านต่อ »

HTML, XML, XHTML, DHTML, CSS คืออะไร แตกต่าง และเกี่ยวข้องกันอย่างไร

by enjoyday.net HTML, XML,  XHTML, DHTML, CSS  เป็นคำศัพท์ที่ได้ยินกันบ่อยๆ ในการสร้างเว็บไซต์  แต่หลายคนอาจยังไม่แน่ใจนักว่ามันคืออะไรกันแน่ มีความแตกต่าง  และเกี่ยวข้องกันอย่างไร    หาคำตอบได้ในบทความต่อไปนี้ค่ะ ก่อนที่จะลงรายละเอียดของแต่ละคำ ขอให้ความหมายแบบสรุปก่อน ดังนี้ค่ะ Markup Language  เป็นภาษาที่ใช้ในการนิยามหรืออธิบายข้อมูล HTML (ย่อมาจาก Hyper Text Markup Language) เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ XML (ย่อมาจาก eXtensible Markup Language) เป็นภาษาที่ถูกออกแบบมาเพื่อใช้เป็นภาษากลางสำหรับแลกเปลี่ยนข้อมูลระหว่างกัน XML เหมาะกับการแลกเปลี่ยนข้อมูลผ่านเครือข่ายคอมพิวเตอร์ เนื่องจาก XML ไม่ได้ขึ้นอยู่กับโปรแกรมประยุกต์หรือระบบปฏิบัติการใด XHTML (ย่อมาจาก Extensible HyperText Markup ...

อ่านต่อ »

3.3.1 ส่วนประกอบของหน้าเว็บเพจ

design-website

ในหัวข้อก่อนหน้านี้เราได้ศึกษาเรื่องการออกแบบเว็บไซต์ (Site Design) ซึ่งเป็นภาพรวมไปแล้ว ได้แก่ 3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) 3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design) . ในหัวข้อนี้เราจะได้ศึกษาในรายละเอียดการออกแบบหน้าเว็บเพจ (Page Design) ซึ่งเป็นส่วนประกอบของเว็บไซต์กันค่ะ 3.3 การออกแบบเว็บเพจ (Page Design) ส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วนหลักๆ คือ 1. ส่วนหัวของหน้า (Page Header) เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์  มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ   ส่วนใหญ่ประกอบด้วย โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ ชื่อเว็บไซต์ เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์ . 2.ส่วนของเนื้อหา ...

อ่านต่อ »

3.2 การออกแบบระบบนำทาง (Site Navigation Design)

design-website

ระบบ Navigation เป็นระบบนำทางที่จะนำผู้ชมไปยังหน้าต่างๆ ของเว็บไซต์ ให้สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และรู้ว่ากำลังอยู่ตรงไหนของเว็บไซต์ นอกจากนี้ยังใช้กำหนดบทบาทของผู้ใช้ซึ่งแบ่งเป็นกลุ่มๆ ได้ โดยผู้ใช้แต่ละกลุ่มจะสามารถเข้าถึงหน้าเว็บเพจได้อย่างมีขอบเขต ตามสิทธิที่วางไว้เท่านั้น . องค์ประกอบของระบบ Navigation 1. เครื่องนำทาง เมนูหลัก เป็นเมนูสำหรับลิงค์ไปยังหน้าหัวข้อหลักของเว็บไซต์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟฟิก และมักถูกจัดวางอยู่ด้านบนในเว็บเพจทุกหน้า เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มี เนื้อหาเกี่ยวเนื่องกัน มักอยู่ในรูปแบบของลิงค์ข้อความหรือกราฟฟิกเช่นกัน เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนู มีได้หลายรูปแบบ เช่น ช่องค้นหาข้อมูล (Search Box) , เมนูแบบดร็อปดาวน์ (Drop-Down menu) , แผนผังเว็บไซต์ (Site Map), อิมเมจแมพ (Image Map) 2. เครื่องมือบอกตำแหน่ง (Location Indicator) เป็นสิ่งที่ใช้แสดงว่า ขณะนี้ผู้ชมกำลังอยู่ในตำแหน่งใดในเว็บไซต์ เครื่องบอกตำแหน่งมีได้หลายรูปแบบ เช่น ข้อความภาพกราฟฟิกที่แสดงชื่อเว็บเพจ ...

อ่านต่อ »

3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)

design-website

การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) คือ การจัดหมวดหมู่ และลำดับของเนื้อหา แล้วจัดทำเป็นแผนผังโครงสร้างเว็บไซต์ ซึ่งจะทำให้เรารู้ว่ามีเนื้อหาอะไรบ้างภายในเว็บไซต์ และแต่ละหน้าเว็บเพจนั้นมีการเชื่อมโยงกันอย่างไร โครงสร้างเว็บไซต์ที่ดีจะช่วยให้ผู้ชมไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว ไม่ควรเป็นลำดับที่ลึกหลายชั้นเกินไป เพราะผู้ใช้จะเบื่อเสียก่อน กว่าจะค้นหาเจอหน้าที่ต้องการ อันนี้เจอกับตัว เช่น เว็บไซต์ดาวน์โหลดบางแห่ง คลิกแล้วคลิกอีก ยังหาไม่เจอลิงค์ดาวน์โหลด หาเว็บใหม่เลยค่ะ 1. จากเนื้อหาเว็บไซต์ที่เราเตรียมไว้ ให้นำมาจัดหมวดหมู่ และลำดับเนื้อหาก่อนหลัง Section 1       Section 1.1       Section 1.2       Section 1.3               Section 1.3.1               Section 1.3.2 Section 2 Section 3       ...

อ่านต่อ »

3. ออกแบบเว็บไซต์

design-website

3. ออกแบบเว็บไซต์ ปัจจุบันมีเว็บไซต์อยู่มากมาย และก็มีเว็บไซต์ใหม่เกิดขึ้นทุกวันในอินเตอร์เน็ต นั่นทำให้เรามีทางเลือกมากขึ้นที่จะเข้าไปใช้บริการเว็บไซต์ใดก็ได้ ถ้าเว็บไซต์ไหนใช้งานยาก ข้อมูลมากแต่ก็หาสิ่งที่ต้องการไม่เจอ ใช้เวลาโหลดหน้าเว็บนานเกินไป เราก็คงไม่อดทนต่อปัญหาที่เกิดขึ้น ปิดมันไปซะ แล้วก็เปลี่ยนไปดูเว็บไซต์อื่นๆ แทน ปัญหาเหล่านี้มักเกิดจาก การขาดการออกแบบเว็บไซต์ที่ดีนั่นเองค่ะ เว็บไซต์ที่ได้รับการออกแบบที่ดี ดูเรียบง่าย สวยงาม ข้อมูลจัดเป็นหมวดหมู่ ใช้งานง่าย ย่อมได้รับความสนใจจากผู้ใช้มากกว่า การออกแบบเว็บไซต์จึงเป็นกระบวนการหนึ่งที่สำคัญในการสร้างเว็บไซต์ เพื่อให้เกิดความประทับใจแก่ผู้ใช้ และทำให้อยากกลับเข้ามาใช้บริการเว็บไซต์ของเราอีกในครั้งต่อไป ถ้าเราคิดไม่ออกว่าจะออกแบบเว็บไซต์อย่างไรดี ให้ลองศึกษาจากเว็บไซต์อื่นๆ เป็นแนวทาง หรือว่าจะประยุกต์จากรูปแบบในสิ่งพิมพ์ต่างๆ เช่น นิตยสาร หนังสือ แผ่นพับ ที่มีรูปแบบน่าสนใจ   หัวข้อที่เราจะศึกษาเกี่ยวกับเรื่องการออกแบบเว็บไซต์ 3.1 การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design) 3.2 การออกแบบระบบเนวิเกชั่น (Site Navigation Design) 3.3 การออกแบบหน้าเว็บเพจ (Page Design) เรื่องที่เกี่ยวข้อง   3.2 ...

อ่านต่อ »

2.4 การตั้งชื่อ Domain name ที่ดี

host-domain

การตั้งชื่อ Domain name ที่ดี Domain Name เปรียบเสมือนชื่อของเรา เป็นชื่อที่ใช้อ้างอิงมายังเว็บไซต์ของเรา ดังนั้นจึงมีความสำคัญมาก การเลือก Domain name ที่ดีจะเป็นส่วนช่วยให้เว็บไซต์ของเรามีชื่อเสียงได้ง่ายขึ้น   . Domain Name ที่ดี สั้น, จำง่าย, พิมพ์ง่าย เช่น yahoo.com, sanook.com, hi5.com ชื่อเป็น keyword ของเนื้อหาในเว็บไซต์ แค่เห็นชื่อเว็บก็รู้ว่าเป็นเว็บเกี่ยวกับอะไร เช่น tourthai.com, chulabook.com, hotelsthailand.com แบบนี้จะมีผลดีทาง SEO ทำให้เว็บไซต์ติดอันดับการค้นหาในเว็บ Search Engine ได้ง่ายค่ะ ไม่ควรใช้ขีดคั่น เพราะทำให้พิมพ์ยุ่งยากขึ้น และ website ส่วนใหญ่ไม่ใช้กัน ทำให้นานๆ ทีเข้าอาจจำไม่ได้ว่าต้องมี ขีด ด้วย อ่านง่าย เพื่อให้ง่ายต่อการบอกต่อ เช่น ...

อ่านต่อ »