แบบประเมิน

หน่วยที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

ก.ค.11

คำศัพท์พื้นฐานเกี่ยวกับอินเทอร์เน็ต

Web Page หมายถึง ข้อมูลที่เป็นอักษร เสียง และภาพต่างๆ ที่บรรจุในแฟ้มเอกสารแต่ละหน้าของเวิลด์ไวด์เว็บ (WWW) ที่เปิดอ่านจากโปรแกรม Browser

Web site หมายถึง สถานที่ที่ WebPage อาศัยอยู่ โดยเข้าถึงด้วยชื่อ Domain Name เช่น http://www.nu.ac.th (เว็บไซด์ของมหาวิทยาลัยนเรศวร)

HomePage หมายถึง WebPage ที่อยู่หน้าแรกของ Web site ที่ใช้แฟ้มว่า index.html หรือ index.htm เสมอ

Web Browser โปรแกรมใช้ในการเข้าไปยังเว็บไซด์ต่างๆ ในโลก World Wide Web ของอินเทอร์เน็ต เช่น Netscape Navigator, Internet Explorer

Domain Name หมายถึงชื่อที่ใช้ประกาศความเป็นตัวตนบนโลกอินเทอร์เน็ต ถ้าชื่อลงท้ายด้วย .com ต้องมีการจดทะเบียนที่ http://www.internic.com แต่ถ้าเป็นพวก .co.th การจดทะเบียนที่ http://www.ternic.co.th

URL (Uniform Resouire Locator) หมายถึง ที่อยู่ของข้อมูลบน WWW ซึ่งถ้าเราจะหาข้อมูลIP (Internet Protocol) เป็นโปรโตคอลที่ใช้สำหรับการสื่อสารแบบ TCP

TCP/IP (Transport Control Protocol/Internet Protocol) เป็น Protocol ตามมาตรฐานอตุสาหกรรมในการติดต่อสื่อสาร ทำให้ระบบเครือข่ายสามารถติดต่อสื่อสารถึงกันได้

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

ISP (Internet Service Provider) คือผู้ให้บริการเชื่อมต่อเข้าสู่เครือข่ายอินเทอร์เน็ต

ASP (Application Service Provider) คือผู้ให้บริการ Software หรือวิธีการใช้ผ่านอินเทอร์เน็ต โดยไม่จำเป็นต้องมี Software ของผู้ใช้เอง

IDC (Internet Data Center) คือผู้ให้บริการรับฝากเครื่อง Server และตระเตรียมสาธารณูปโภคในการทำธุรกรรมให้พร้อมสรรพ

E-Commerce (Elertronic Commerce) คือการทำธุรกรรม อะไรก็ได้โดยใช้สื่ออินเทอร์เน็ต

Hypertext คือเอกสารที่ทำการเชื่อมโยงต่อไปยังเอกสารอื่นๆ ทำให้สามารถอ่านได้หลายมิติ

Download คือการย้ายข้อมูลของคอมพิวเตอร์ที่ไกลออกไปมาไว้ที่เครื่องคอมพิวเตอร์ท้องถิ่น (Local) โดยทั่วไปหมายถึง การรับข้อมูลจากคอมพิวเตอร์เครื่องอื่นที่อยู่ห่างไกลออกไป มาเครื่องอีกเครื่องหนึ่ง หรือเครื่องที่เรากำลังใช้งานอยู่ ซึ่งตรงข้ามกับ Upload

Upload เป็นการส่งข้อมูลจากเครื่องคอมพิวเตอร์เครื่องหนึ่งไปยังคอมพิวเตอร์อีกเครื่องหนึ่งที่อยู่ห่างไกลออกไป

POP (Post Office Protocal) ระบบที่ทำให้สามารถรับและดาว์นโหลด จดหมายจากผู้ให้บริการอินเทอร์เน็ต ไปยังคอมพิวเตอร์ของเราเอง

Internet Address คือที่อยู่บนอินเทอร์เน็ต จะประกอบไปด้วยชื่อผู้ใช้คอมพิวเตอร์ (User Name) และชื่อของอินเทอร์เน็ต (Internet Name) โดยมีรูปแบบ ดังนี้
ชื่อผู้ใช้@ชื่ออินเทอร์เน็ต
ตัวอย่าง เช่น chaiklongick@hotmail.com หมายถึงผู้ใช้ชื่อ chaiklong เป็นสมาชิกของศูนย์บริการหรือศูนย์คอมพิวเตอร์ที่ใช้ชื่อว่า hotmail.com

IP Address คือหมายเลขรหัสประจำเครื่องคอมพิวเตอร์ที่เชื่อมต่อเข้ากับอินเทอร์เน็ต โดยเลขนี้จะมีรหัสซ้ำกันไม่ได้ IP Address ประกอบไปด้วยตัวเลข 4 หลักที่คั่นด้วย เครื่องจุด (.) ตัวอย่างเช่น 203.155.35.2 เป็น IP Address ของเครื่อง internet.th.com

Mailing List คือ กลุ่มสนทนาที่มีการแลกเปลี่ยนความคิดเห็นโดยใช้โปรแกรม E-mail ติดต่อสื่อสารระหว่างกัน การเข้าร่วม Mailing List โดยสมัครสมาชิกแล้วจดหมายทุกฉบับที่ถูกส่งไปยัง List ก็จะถูกส่งไปให้ทุกคน ที่อยู่ใน List ได้อ่านกัน

อ้างอิง http://www.chaiwbi.com/anet01/p04/t04l.html

ความหมายของอินเทอร์เน็ต

อินเทอร์เน็ต (อังกฤษ: Internet) หมายถึง เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ที่มีการเชื่อมต่อระหว่างเครือข่ายหลาย ๆ เครือข่ายทั่วโลก โดยใช้ภาษาที่ใช้สื่อสารกันระหว่างคอมพิวเตอร์ที่เรียกว่า โพรโทคอล (protocol) ผู้ใช้เครือข่ายนี้สามารถสื่อสารถึงกันได้ในหลาย ๆ ทาง อาทิ อีเมล เว็บบอร์ด และสามารถสืบค้นข้อมูลและข่าวสารต่าง ๆ รวมทั้งคัดลอกแฟ้มข้อมูลและโปรแกรมมาใช้ได้

อ้างอิง https://th.wikipedia.org/wiki/อินเทอร์เน็ต

ความหมายของเวิลด์ไวด์เว็บ

เวิลด์ไวด์เว็บ (อังกฤษ: World Wide Web, WWW, W3 ; หรือที่เรียกกันสั้น ๆ ว่า “เว็บ“) คือพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URL คำว่าเวิลด์ไวด์เว็บมักจะใช้สับสนกับคำว่า อินเทอร์เน็ต จริง ๆ แล้วเวิลด์ไวด์เว็บเป็นเพียงแค่บริการหนึ่งบนอินเทอร์เน็ต

อ้างอิง https://th.wikipedia.org/wiki/เวิลด์ไวด์เว็บ

ความหมายของเว็บไซต์

เว็บไซต์ (อังกฤษ: Website, Web site หรือ Site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์

อ้างอิง https://th.wikipedia.org/wiki/เว็บไซต์

ประเภทของเว็บไซค์

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

1. เว็บท่า (Portal Site)

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

2. เว็บข่าว (News Site)

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

3. เว็บข้อมูล (Information Site)

เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆ ที่น่าสนใจ องค์กรต่างๆ มักสร้างเว็บข้อมูลของตนขึ้นมาเพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตน

4. เว็บธุรกิจหรือการตลาด (Business/Marketing Site)

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

5. เว็บการศึกษา (Educational Site)

ส่วนใหญ่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือองค์กรทั้งของภาครัฐและเอกชนที่มีนโยบายในการเผยแพร่ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อการศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการเรียนรู้ที่เป็นทางการและไม่เป็นทางการ บริการการเรียนรู้แบบออนไลน์ หรือที่เรียกว่า อีเลิร์นนิ่ง (E-Learning) ต่าง ๆ

6. เว็บบันเทิง (Entertainment Site)

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

7. เว็บองค์กรที่ไม่แสวงหาผลกำไร (Non-profit Organization Site)

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

8. เว็บส่วนตัว (Personal Site)

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

อ้างอิง http://th.easyhostdomain.com/type-of-website.html

หน่วยที่ 2 กระบวนการสร้างเว็บไซต์

ก.ค.11

กระบวนการเตรียมข้อมูล

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

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

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

อ้างอิง http://www.webblog.rmutt.ac.th/phasure/2011/08/21/prepare_data/

กระบวนการออกแบบและสร้างเว็บไซต์

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

หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

องค์ประกอบที่ดีของการออกแบบเว็บไซต์

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

2. การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ผู้ใช้รู้สึกสบายใจต่อการอ่านและสามารถทำความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ต้องมาเสียเวลาอยู่กับการทำความเข้าใจ การใช้งานที่สับสนด้วยเหตุนี้ผู้ออกแบบจึงควรกำหนดปุ่มการใช้งานที่ชัดเจน เหมาะสม โดยเฉพาะปุ่มควบคุมเส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอยหลัง หากเป็นเว็บไซต์ที่มีเว็บเพจจำนวนมาก ควรจะจัดทำแผนผังของเว็บไซต์ (Site Map) ที่ช่วยให้ผู้ใช้ทราบว่า ตอนนี้อยู่ ณ จุดใด หรือเครื่องมือสืบค้น (Search Engine) ที่ช่วยในการค้นหาหน้าที่ที่ต้องการ

3. การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชื่อมโยง ควรอยู่ในรูปแบบที่เป็นมาตรฐาน ทั่วไปและต้องระวังเรื่องของตำแหน่งในการเชื่อมโยง การที่จำนวนการเชื่อมโยงมากและกระจัดกระจายอยู่ทั่วไปในหน้าอาจก่อให้เกิดความสับสน นอกจากนี้คำที่ใช้สำหรับการเชื่อมโยงจะต้องเข้าใจง่ายมีความชัดเจนและไม่สั้นจนเกินไป นอกจากนี้ในแต่ละเว็บเพจที่สร้างขึ้นมาควรมี จุดเชื่อมโยงกลับมายังหน้าแรกของเว็บไซต์ที่กำลังใช้งานอยู่ด้วย ทั้งนี้เผื่อว่าผู้ใช้เกิดหลงทาง และไม่ทราบว่าจะทำอย่างต่อไปดีจะได้มีหนทางกลับมาสู่จุดเริ่มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) เพราะจะทำให้ผู้ใช้ไม่รู้จะทำอย่างไรต่อไป

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

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

อ้างอิง https://krupiyadanai.wordpress.com/การออกแบบเว็บไซต์

กระบวนการพัฒนาและเผยแพร่เว็บไซต์

แนวทางหลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์

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

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

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

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

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

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

· โครงสร้างและสารบัญของเว็บไซต์

· การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

· องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ

· การกำหนดรูปแบบและลักษณะของเว็บเพจ

· การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์

· การบริการเสริมต่าง ๆ

· การออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจโดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครงของหน้าเว็บและองค์ประกอบต่าง ๆ เช่น ชื่อเว็บไซต์ โลโก้ รูปไอคอน ปุ่มไอคอน ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น<![endif]>

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

เทคนิคการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ให้น่าสนใจต้องพิจารณา 3 ประการ คือ

1. ออกแบบเว็บไซต์ที่เน้นเนื้อหา

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

2. ออกแบบเว็บไซต์ที่เน้นภาพกราฟิก

3. ออกแบบเว็บไซต์ที่เน้นทั้งภาพและเนื้อหา

อ้างอิง https://sites.google.com/site/webkrusoy/krabwnkar-phathna-websit

หน่วยที่ 3 ภาษาและเครื่องมือในการสร้างเว็บไซต์

ก.ค.11

ภาษาและเครื่องมือในการสร้างเว็บไซต์

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming สามารถที่จะเรียนรู้ได้ง่าย

2. CSS (ย่อมาจาก Cascading Style Sheets)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น

3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
– เรียนรู้ HTML
– เรียนรู้ CSS
– เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress, Joomla ก็ตาม HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้ค่ะ

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจค่ะ

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์ ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล เราจะต้องใช้ Server-Side Script เขียนคำสั่งติดต่อกับฐานข้อมูล โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS ของหน้าเว็บเพจนั้นได้ ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

ถ้าอ่านคำอธิบาย แล้วไม่เข้าใจ ??? ก็ยังไม่ต้องไปสนใจมันค่ะ

แล้วมันต้องใช้มั้ยล่ะ ?
ตอบตามตรง… เว็บไซต์ส่วนใหญ่ เค้าใช้กันทั้งนั้นแหละค่ะ
แต่….เราไม่จำเป็นต้องเขียนภาษา Script เหล่านี้เองก็ได้ ฟังแล้วน่าจะเบาใจขึ้นมาแล้วนะคะ

แล้วภาษา Script เหล่านี้ใช้ตอนไหนบ้าง ?
ใช้ในกรณีที่เว็บเรามีการทำงานที่เกี่ยวข้องกับฐานข้อมูล เช่น สมุดเยี่ยม, กระดานข่าว (Webboard), ระบบสมาชิก, ระบบตระกร้าสินค้า และอื่นๆ

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

อ้างอิง http://www.enjoyday.net/web-programming-languages.html

หน่วยที่ 4 การติดตั้งและใช้โปรแกรม Adobe Dreamweaver CS6 เบื้องต้น

ก.ค.11

การติดตั้งและใช้โปรแกรม Adobe Dreamweaver CS6 เบื้องต้น

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

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

1. แนะนำ Dreamweaver

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

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

ในกรณีที่เราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น

เป็นโปรแกรมจัดการเว็บไซต์ที่ดี Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น

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

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

3. ช่วยให้เราทำเว็บได้ง่ายขึ้น สาหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆ มากมายเช่น Photoshop ,Illustrator, Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้ คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวยความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆ ที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก

2. ความต้องการระบบของโปรแกรมสำหรับ Microsoft Windows

หน่วยประมวลผลกลาง (CPU) ความเร็ว 1 GHz ขึ้นไป
หน่วยความจำแรม (RAM) 512 MB ขึ้นไป
เนื้อที่ว่างของฮาร์ดดิสก์ อย่างน้อย 1 GB ขึ้นไป
จอภาพ ความละเอียด 1280 x 800 จุด
มีซีดีรอมไดรฟ์
ระบบปฏิบัติการ Window XP หรือสูงกว่า

3. ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้

1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6

2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นโปรแกรมอ้างมีการแจ้งเตือนให้เรา restart เราเลือก Ignore เพื่อดำเนินการต่อ ดังรูป

3. โปรแกรมจะทำการตรวจสอบก่อนทำการติดตั้งโปรแกรม

4. เมื่อโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสู่หน้าจอข้อกำหนดในการติดตั้งโปรแกรม ให้เราคลิก Accept

5. กรอก Serial Number แล้วคลิกที่ปุ่ม Next

6. จะเข้าสู่หน้า Option ของโปรแกรม ให้เลือก Installs

7. รอให้โปรแกรมติดตั้งจนเสร็จ

8. เมื่อติดตั้งเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close

4. ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6

สำหรับ Windows7 ทำการเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > All Programs > Adobe Dreamweaver CS6

สำหรับ Windows8 ทำการเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > Apps > Adobe Dreamweaver CS6

เมื่อเปิดโปรแกรมครั้งแรก จะพบหน้าจอดังภาพ ให้คลิก Select All >> OK

จากนั้นจะเข้าสู่หน้าจอ Welcome Screen ดังรูป

Welcome Screen เป็นเครื่องมือสำหรับช่วยเลือกขั้นตอนเริ่มต้นในการใช้งานโปรแกรมโดยตัวเลือกจะแบ่งออกเป็นกลุ่มๆ ดังภาพ
- หมายเลขที่ 1 Open a Recent Item เปิดไฟล์ที่เคยใช้ โดยคลิกเลือกจากรายชื่อที่แสดงอยู่ (เรียงลำดับจากที่เคยเปิดหลังสุดเป็นต้นไปหรือคลิก Open เพื่อเปิดไฟล์อื่นๆ)
- หมายเลขที่ 2 Create New สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพื้นฐานแต่ถ้าคลิกหัวข้ออื่นจะเป็นการสร้างเว็บเพจหรือไฟล์ตามชนิดนั้นๆ
- หมายเลขที่ 3 Top Features (videos) เป็นเส้นทางลัดสำหรับเข้าดูรายละเอียดและเทคนิคในการใช้งานต่าง ๆ ของโปรแกรมผ่านทางเว็บไซต์ของ Adobe
- หมายเลขที่ 4 เปิดดูคำแนะนำการใช้โปรแกรม
- หมายเลขที่ 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe
- หมายเลขที่ 6 คลิกออปชั่นนี้หากไม่ต้องการแสดง Welcome Screen อีกในครั้งต่อไป

5. ส่วนประกอบของหน้าจอโปรแกรม

โปรแกรม Dreamweaver ประกอบไปด้วยส่วนต่าง ๆ ดังนี้

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

Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น
Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element

(หรือเลเยอร์)

Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟอร์มรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น
Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ
Spry ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax
jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery
InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้
Text ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น
Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำสั่งที่ใช้บ่อยจากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความสะดวกในการใช้งาน

แถบ Document Toolbar

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

ปุ่ม	หน้าที่
	แสดงเว็บเพจในมุมมองโค้ด
	แสดงเว็บเพจในมุมมองโค้ดและออกแบบ
	แสดงเว็บเพจในมุมมองออกแบบ
	แสดงผลโค้ด (ทำงานร่วมกับมุมมอง Live View)
	ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ที่เลือก
	ตรวจสอบความถูกต้องของการใช้สไตล์ CSS ในส่วนต่าง ๆ บน เว็บเพจโดยใช้ร่วมกับพาเนล CSS Styles และการแสดงผลในรูปมุมมอง Live View
	แสดงเมนูสำหรับเลือกเปิดบราวเซอร์เพื่อทดสอบเว็บเพจ (คีย์ลัดF12)
	แสดงเมนูซึ่งประกอบด้วยคาสั่งจัดการไฟล์ เช่น อัพโหลด (Put) หรือดาวน์โหลด (Get)
	ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอร์ที่เลือก
	แสดงเมนูสำหรับเปิด/ปิดลักษณะพิเศษของแท็กหรือคำสั่งบางอย่าง เช่น ตาราง,เฟรม และ CSS เพื่อช่วยให้การแก้ไขเว็บเพจสะดวกขึ้น
	ปรับปรุงการแสดงผลของเว็บเพจในมุมมองออกแบบ หลังจากที่แก้ไขคาสั่งในมุมมองโค้ด (คีย์ลัด F5)
	ใช้กำหนดชื่อหรือคำอธิบายเว็บเพจ ซึ่งจะถูกนำไปแสดงที่ไตเติลบาร์ของบราวเซอร์

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

มุมมองโค้ด (Code View)

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

มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split)

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

มุมมองออกแบบ (Design View)

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

มุมมองแสดงหน้าเว็บเหมือนดูบนบราวเซอร์ (Live View)

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

มุมมองแสดงผลโค้ดหน้าเว็บ (Live Code)

ในมุมมองนี้ Document Window จะแสดงผลโค้ดร่วมกับมุมมอง Live View (จะแสดงมุมมอง Live Code ได้ก็ต่อเมื่ออยู่ที่มุมมอง Live View เท่านั้น) เป็นมุมมองที่เสมือนการใช้คำสั่ง View > Source จากบราวเซอร์ ซึ่งใช้ตรวจดูโค้ดในตำแหน่งต่าง ๆ เท่านั้น ไม่สามารถแก้ไขโค้ดในมุมมองนี้ได้

มุมมองแสดงผลหน้าเว็บที่จัดรูปแบบด้วย CSS (Inspect)

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

Tag Selector อยู่ใน Status Bar ที่อยู่ทางด้านล่างของ Document Window เมื่อเราคลิกวัตถุในเอกสารจะปรากฏ Tag Select ใน Status Bar ขึ้นมา เมื่อเราคลิกเลือก Tag Selector แล้วแท็กต่างๆ ที่ถูกล้อมด้วยแท็กที่เราเลือกจะถูกเลือกด้วย
หน้าต่าง Properties Inspector เป็นหน้าต่างเล็ก ๆ ที่อยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้งานมากที่สุด เนื่องจากเป็นส่วนที่ใช้กำหนดคุณสมบัติสำคัญ ๆ ของออบเจ็กต์ที่วางในหน้าเว็บเพจ เช่น ตำแหน่ง ขนาด และสี

กลุ่มพาเนลต่างๆ (Panel Groups)

พาเนลเป็นกรอบเล็ก ๆ ที่รวบรวมเครื่องมือต่าง ๆ สำหรับใช้ทำงานเฉพาะเรื่องไว้ เช่น พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้จัดการกับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วยพาเนลจำนวนมาก ซึ่งสามารถเปิด/ปิดได้โดยเลือกคาสั่ง Window แล้วเลือกชื่อพาเนลนั้น หรือกดคีย์ลัดที่แสดงด้านหลังชื่อพาเนลดังรูป

6. ไม้บรรทัด (Ruler)

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

ซ่อน/แสดงไม้บรรทัด เลือกคาสั่ง View > Rulers > Show (คียลัด Ctrl +Alt +R)
ย้ายตำแหน่ง 0,0ให้คลิกลากรูป ไปวางตำแหน่งใหม่
ย้ายตำแหน่ง 0,0 กลับมาที่มุมซ้ายบนสุดให้ดับเบิลคลิกที่ หรือคลิกขวาบน ไม้บรรทัดแล้วคลิกเลือกคาสั่ง Reset Origin
เปลี่ยนหน่วยวัดบนไม้บรรทัดให้คลิกขวาบนไม้บรรทัด แล้วเลือกหน่วย ซึ่งมีดังนี้
- Pixels พิกเซล
- Inches นิ้ว
- Centimeters เซนติเมตร

7. เส้นกริด (Grid)

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

ซ่อน/แสดงเส้นกริดทำได้โดยเลือกคำสั่ง View > Grid> Show Grid (คีย์ลัด Ctrl Alt G)
กำหนดให้ออบเจ็คยึดจับเส้นกริดเลือกคำสั่งView > Grid > Snap To Grid
ปรับแต่งคุณสมบัติของเส้นกริดเลือกคำสั่ง View > Grid > Grid Setting

8. เส้นไกด์ (Guide)

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

ซ่อน/แสดงเส้นไกด์ทำได้โดยเลือกคำสั่ง View > Guides >Show Guides
ย้ายเส้นไกด์ คลิกลากเส้นไกด์นั้นไปยังตำแหน่งใหม่
ลบเส้นไกด์ คลิกลากเส้นไกด์ออกไปปล่อยนอกวินโดว์ Document
ลบเส้นไกด์ทั้งหมด เลือกคำสั่ง View > Guides > clear Guides
ล็อคเส้นไกด์ไม่ให้ถูกย้ายหรือลบ เลือกคำสั่ง View > Guides > Lock Guides

9. การกำหนด Font

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

ไปที่เมนู Edit >> Preferences จะได้หน้าต่างการกำหนดค่า ดังรูป

2. หลังจากนั้นให้เลือก Category >> Fonts และ Fonts >> ไทย หรือ Unicode (รูปแบบตัวอักษาที่รองรับหลายภาษา และภาษาไทยด้วย) ต่อไปการกำหนด Proportional font และ Code view ให้เลือก Font ที่เราต้องการ เช่น Tahoha, Angsana New เป็นต้น เพื่อเป็นการกำหนดค่า Font เริ่มต้น ดังรูป

3. การกำหนดค่า Default ให้กับเอกสาร สามารถทำได้โดย Category >> New Document และ Default encoding>> ไทย (Windows) หรือ Unicode (UTF-8)

อ้างอิง https://krupiyadanai.wordpress.com/

หน่วยที่ 5 เริ่มต้นสร้างเว็บด้วยโปรแกรม Adobe Dreamweaver CS6

ก.ค.11

เริ่มต้นสร้างเว็บด้วยโปรแกรม Adobe Dreamweaver CS6

อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมแก้ไข HTML พัฒนาโดยบริษัทแมโครมีเดีย (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) สำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรมที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่างจากโปรแกรมอื่นๆ ในประเภทเดียวกัน ในช่วงปลายปีทศวรรษ2533 จนถึงปีพ.ศ. 2544 ดรีมวีฟเวอร์มีสัดส่วนตลาดโปรแกรมแก้ไข HTML อยู่มากกว่า 70% ดรีมวีฟเวอร์มีทั้งในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวีฟเวอร์ยังสามารถทำงานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINEได้ รุ่นล่าสุดคือ ดรีมวีฟเวอร์ CS4

การทำงานกับภาษาต่างๆ

ดรีมวีฟเวอร์ สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดงผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย และในเวอร์ชันล่าสุด (เวอร์ชัน CS4) ยังสามารถทำงานร่วมกับ XML และ CSS ได้อย่างง่ายดาย

รุ่นต่างๆ

Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997)

Dreamweaver 1.2 (มีนาคม ค.ศ. 1998)

Dreamweaver 2.0 (ธันวาคม ค.ศ. 1998)

Dreamweaver 3.0 (ธันวาคม ค.ศ. 1999)

Dreamweaver UltraDev 1.0 (มิถุนายน ค.ศ. 2000)

Dreamweaver 4.0 (ธันวาคม ค.ศ. 2000)

Dreamweaver UltraDev 4.0 (ธันวาคม ค.ศ. 2000)

Dreamweaver MX (พฤษภาคม ค.ศ. 2002)

Dreamweaver MX 2004 (10 พฤศจิกายน ค.ศ. 2003)

Dreamweaver 8 (13 พฤศจิกายน ค.ศ. 2005)

Dreamweaver CS3

Dreamweaver CS4
Dreamweaver CS5
Dreamweaver CS6

ความสามารถของ Dreamweaver

สนับสนุนการทํางานแบบ WYSIWYG (What You See Is What You Get) หมายความวาอะไรก็ตามที่เราทํา บนหนาจอ Dreamweaver ก็จะปรากฎผลแบบเดียวกันบนเว็บเพจ ซึ่งชวยใหการสรางและแกไขเว็บเพจนั้นทําได งาย โดยไมตองมีความรูภาษา HTML เลย
มีเครื่องมือในการสรางรูปแบบหนาจอเว็บเพจ ซึ่งชวยอํานวยความสะดวกใหผูใชงานไดมาก
สนับสนุนภาษาสคริปตตางๆ เชน Java,ASP,PHP,CGI,VBScript
มีเครื่องมือที่ชวยในการ upload หนาเว็บที่สรางไปที่ server เพื่อทําการเผยแพรงานที่สรางบน internet
รองรับการใชมัลติมีเดียตางๆ เชน เสียง กราฟก และภาพเคลื่อนไหว ที่สรางโดยโปรแกรม Flash, Shockwave, Firework เปนตน
มีความสามารถทําการติดตอกับฐานขอมูล เพื่อเชื่อมตอกับเว็บไซต



การเปิดโปรแกรม

วิธีที่ 1 คลิก start -> All Programs -> Adobe Dreamweaver CS6 ดังตัวอย่างด้านล่าง

วิธีที่ 2 ดับเบิลคลิกไอคอน

ที่หน้าจอ Desktop

ส่วนประกอบของ welcome screen

หลังจากเปิดโปรแกรมขึ้นมาจะปรากฏหน้าต่าง welcome screen ซึ่งแบ่งออกเป็น 3 กลุ่มหลัก

ดังภาพด้านล่าง ดังนี้

1.เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน (open a recent ltem)

สร้างงานใหม่ (create new) ใช้สำหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์งานได้หลายชนิด ไม่ว่าจะเป็น ไฟล์ html, php, asp,หรือ JavaScript
สร้างงานสำเร็จรูป (create from samples) สร้างเว็บเพจใหม่โดยใช้ไฟล์ตัวอย่าง ที่โปรแกรมจัดเตรียมเอาไว้ให้
2.ส่วนประกอบหน้าจอโปรแกรม Adobe Dreamweaver CS6
1.สีส้ม คือ แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคำสั่งทั้งหมดของโปรแกรม โดยแบ่งคำสั่งทั้งหมดออกเป็นหมวดหมู่ตามลักษณะของการใช้งาน

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

ซึ่งจะประกอบด้วยกลุ่มคำสั่งดังนี้

– Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น

– Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP element

(หรือเลเยอร์)

– Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟร์อมรับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น

– Data ใช้วางคำสั่งที่ใช้การจัดการฐานข้อมูล และดึงข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ

– Sary ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของAjax

– jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery

– InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำนวยความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้

– Text ใช้สำหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น

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

3.สีแดง คือ พื้นที่สร้างงาน (Document area) เป็นส่วนที่ใช้สร้างหน้าเว็บเพจ ใส่เนื้อหา และองค์ประกอบต่าง ๆ

ของเว็บเพจ ซึ่งสามารถเลือกเปิดพื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง

– มุมมองออกแบบ (Design View) ใช้แก้ไขและจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจ

– มุมมองโค้ด (Code View) ใช้สำหรับเปิดดูคำสั่งต่าง ๆ เช่น HTML PHP ASP และ JSP และสามารถแก้ไขคำสั่งต่าง ๆ ได้ตามต้องการ

– มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) แสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ดพร้อมกัน สามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยคลิกลากที่เส้นแบ่งระหว่างทั้ง 2 ส่วนนี้

– มุมมองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดูบนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin

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

สีน้ำตาล คือ กลุ่มหน้าต่างพาเนล (Panels) เป็นหน้าต่างเล็ก ๆ ที่รวบรวมเครื่องมือไว้เป็นกลุ่มตามหน้าที่ที่เกี่ยวข้อง ทำให้ใช้งานได้สะดวกขึ้น
สีเขียว คือ แถบสถานะ (Status Bar) เป็นแถบที่อยู่ทางด้านล่างของหน้าต่าง ๆ Document ประกอบด้วย 2 ส่วน

คือ ด้านซ้ายเป็น Tag Selector ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ

หลักสำคัญก่อนการสร้างเว็บเพจ

เลือกรูปแบบพื้นที่ทำงาน(Workspace) ให้เหมาะสม
จัดการกับหน้าต่างไฟล์
เตรียมโฟลเดอร์สำหรับสร้างเว็บไซต์
สร้าง Define Site เพื่อจัดระบบให้ข้อมูล

การบันทึกเว็บเพจ

1.คลิกเลือกคำสั่ง File – > Save (หรือกดคีย์ลัด Ctrl+S)

– ถ้าต้องการบันทึกเว็บเพจเดิมให้เป็นชื่อใหม่ เลือกคำสั่ง Save As

– ถ้าต้องการบันทึกเว็บเพจทั้งหมดที่เปิดใช้งานอยู่ เลือกคำสั่ง Save All

เปิดเข้าไปยังโฟลเดอร์หลักที่จัดเก็บเว็บไซต์และโฟลเดอร์ย่อยที่จะใช้เก็บไฟล์
ตั้งชื่อไฟล์ที่ต้องการ (กรณีหน้าแรกของเว็บไซต์ ต้องตั้งเป็น Index.html เท่านั้น นอกจากนั้นตั้งชื่อตามชนิดของไฟล์งาน)
เลือกประเภทไฟล์ที่จะบันทึกเป็น html
คลิกปุ่ม Save

อ้างอิง http://webeditor03167.blogspot.com/p/adobe-dreamweaver-cs6-1-start-all.html

คำศัพท์พื้นฐานเกี่ยวกับอินเทอร์เน็ต

Web site หมายถึง สถานที่ที่ WebPage อาศัยอยู่ โดยเข้าถึงด้วยชื่อ Domain Name เช่น http://www.nu.ac.th (เว็บไซด์ของมหาวิทยาลัยนเรศวร)

HomePage หมายถึง WebPage ที่อยู่หน้าแรกของ Web site ที่ใช้แฟ้มว่า index.html หรือ index.htm เสมอ

Web Browser โปรแกรมใช้ในการเข้าไปยังเว็บไซด์ต่างๆ ในโลก World Wide Web ของอินเทอร์เน็ต เช่น Netscape Navigator, Internet Explorer

ISP (Internet Service Provider) คือผู้ให้บริการเชื่อมต่อเข้าสู่เครือข่ายอินเทอร์เน็ต

ASP (Application Service Provider) คือผู้ให้บริการ Software หรือวิธีการใช้ผ่านอินเทอร์เน็ต โดยไม่จำเป็นต้องมี Software ของผู้ใช้เอง

IDC (Internet Data Center) คือผู้ให้บริการรับฝากเครื่อง Server และตระเตรียมสาธารณูปโภคในการทำธุรกรรมให้พร้อมสรรพ

E-Commerce (Elertronic Commerce) คือการทำธุรกรรม อะไรก็ได้โดยใช้สื่ออินเทอร์เน็ต

Hypertext คือเอกสารที่ทำการเชื่อมโยงต่อไปยังเอกสารอื่นๆ ทำให้สามารถอ่านได้หลายมิติ

อ้างอิง http://www.chaiwbi.com/anet01/p04/t04l.html

ความหมายของอินเทอร์เน็ต

อ้างอิง https://th.wikipedia.org/wiki/อินเทอร์เน็ต

ความหมายของเวิลด์ไวด์เว็บ

อ้างอิง https://th.wikipedia.org/wiki/เวิลด์ไวด์เว็บ

ความหมายของเว็บไซต์

อ้างอิง https://th.wikipedia.org/wiki/เว็บไซต์

ประเภทของเว็บไซค์

1. เว็บท่า (Portal Site)

2. เว็บข่าว (News Site)

3. เว็บข้อมูล (Information Site)

4. เว็บธุรกิจหรือการตลาด (Business/Marketing Site)

5. เว็บการศึกษา (Educational Site)

6. เว็บบันเทิง (Entertainment Site)

กระบวนการเตรียมข้อมูล

เราต้องศึกษาวัตถุประสงค์ที่ถูกตั้งไว้ก่อนที่จะไปแลกเปลี่ยน

เตรียมทำการบ้านเพื่อให้การแลกเปลี่ยนสัมฤทธิ์ผล

กระบวนการออกแบบและสร้างเว็บไซต์

หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

องค์ประกอบที่ดีของการออกแบบเว็บไซต์

อ้างอิง https://krupiyadanai.wordpress.com/การออกแบบเว็บไซต์

กระบวนการพัฒนาและเผยแพร่เว็บไซต์

· โครงสร้างและสารบัญของเว็บไซต์

· การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

· องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ

· การกำหนดรูปแบบและลักษณะของเว็บเพจ

· การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์

· การบริการเสริมต่าง ๆ

เทคนิคการออกแบบเว็บไซต์

การออกแบบเว็บไซต์ให้น่าสนใจต้องพิจารณา 3 ประการ คือ

1. ออกแบบเว็บไซต์ที่เน้นเนื้อหา

2. ออกแบบเว็บไซต์ที่เน้นภาพกราฟิก

3. ออกแบบเว็บไซต์ที่เน้นทั้งภาพและเนื้อหา

ภาษาและเครื่องมือในการสร้างเว็บไซต์

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

ถ้าอ่านคำอธิบาย แล้วไม่เข้าใจ ??? ก็ยังไม่ต้องไปสนใจมันค่ะ

การติดตั้งและใช้โปรแกรม Adobe Dreamweaver CS6 เบื้องต้น

1. แนะนำ Dreamweaver

2. ความต้องการระบบของโปรแกรมสำหรับ Microsoft Windows

หน่วยประมวลผลกลาง (CPU) ความเร็ว 1 GHz ขึ้นไป

หน่วยความจำแรม (RAM) 512 MB ขึ้นไป

เนื้อที่ว่างของฮาร์ดดิสก์ อย่างน้อย 1 GB ขึ้นไป

จอภาพ ความละเอียด 1280 x 800 จุด

มีซีดีรอมไดรฟ์

ระบบปฏิบัติการ Window XP หรือสูงกว่า

3. ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้

1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6

2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นโปรแกรมอ้างมีการแจ้งเตือนให้เรา restart เราเลือก Ignore เพื่อดำเนินการต่อ ดังรูป

3. โปรแกรมจะทำการตรวจสอบก่อนทำการติดตั้งโปรแกรม

4. เมื่อโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสู่หน้าจอข้อกำหนดในการติดตั้งโปรแกรม ให้เราคลิก Accept