การเลือกซื้อ Flash Drive Kingston รุ่น DT 101 G2,C10,G3 ของแท้

1.ภาพ Flash Drive
Flash Drive สีแดงของแท้
Flash Drive สีเขียวปลอม

2.ขอสังเกตุชื่อรุน Flash Drive สีแดงจะหนาและเค้ม Flash Drive สีเขียวจะบางกว่า

3.Logo  Kingston จะคมชัดกว่า

4.แผงวงจรของแท้ความยาวต้องติดปลายของปลอมจะไม่ถึงปลาย

5.ของแท้ต้องมีรอยตอกขอมปลอมไม่มี

6.ของแท้ต้องมี Serial Number บนหัวของปลอมจะไม่มี Serial Number

7.ของแท้ไฟต้องติดตรงกลางในวงกลมและกระพิบ

8.ของปลอมไฟจะติดข้างนอกวงกลม

หมายเหตุ ยี่ห้อKingston ของแท้รับประกัน 5 ปี

รุ่น C10 วิธีดูเหมือนกันครับต่างก็รอยบากจะอยู่แนวตั้งและไฟติดตรง Logo Kingston

รุ่น G3 วิธีดูเหมือนกันและไฟติดตรง Logo Kingston

ถ้ามีรุ่นอื่นจะนำเสนอภายหลัง

ข้อมูลและรูปภาพทั้งหมดลิขสิทธิ์ของ http://www.changdeangdata.com/

งาน3

e-Government
มีความสะดวกสบายมากขึ้นการทำธุรการต่างๆสะดวกสบายมากขึ้นโดยใช้สาระสนเทศ
ระบบเครือข่ายคอมพิวเตอร์มาช่วยในการจัดการส่งเสริมการพัฒนาสังคมและเศรษฐกิจ
ทำให้ได้ผลประโยชน์ดังนี้
ภาคธุรกิจสู่ภาคธุรกิจ
ภาครัฐสู่ภาครัฐ
ภาครัฐสู่ปร ะชาชน
ภาครัฐสู่ภาคธุรกิจ
ภาครัฐสู่ภาคข้าราชการและพนักงานของรัฐ
มีประโยชน์คือ
1. รัฐ กับ ประชาชน  การชำระภาษี การจดทะเบียน การจ่ายค่าปรับ การรับฟังความคิดเห็น
    ของประชาชน  ผ่านทางสาระสนเทศ เครือข่าย
2. รัฐ กับ เอกชน  การจดทะเบียนทางการค้า การลงทุน การส่งเสริมการลงทุน
    การจัดซื้อ การส่งออกนำเข้า การชำระภาษีโดยใช้สาระสนเทศ
3. รัฐ กับ รัฐ  มีการแลกเปลียนข้อมูลระหว่างรัฐกับรัฐ การอนุมัติ การใช้ลายเซ็นอิเล็กทรอนิกส์
4. รัฐ กับ ข้าราชการสวัสดิการ ระบบที่ปรึกษาทางกฎหมาย ข้อบังคับ
    ในการปฏิบัติราชการ โดยผ่านเทคโนโลยีสาระสนเทศ
e-Procurement
เป็นบริการให้คำแนะนำในการจัดซื้อจัดจ้างให้กับเอกชนทำให้เกิดประสิทธิภาพแก่เอกชน
หรือองค์กรมีคำแนะนำในเรื่องของการเสนอราคาทำให้เกิดความใด้เปรียบทางด้านการประมูลราคา
โดยการนำเทคโนโลยีสาระสนเทศมาใช้งานทำให้เกอดประโยชน์สูงสุด
ประโยชน์คือ
1ลดเวลาในเรียนรู้การจัดซื่อจัดจ้าง
2ทำให้รัฐเกิดการประมูลที่มีหลายๆบริษัทเข้ามาร่วมประมูลทำให้รัฐมีตัวเลือกหลายๆตัวเลือก
3ทำให้เอกชนมีช่องทางในการติดต่อราชการเรื่องของการจัดซื้อจัดจ่าง
4ลดค่าใช้จ่ายในการเดินทาง
e-Business
คือการทำธุรกิจผ่านทางระบบเครือข่ายโดยใช้เทคโนโลยี่สาระสนเทศทำใด้ ทั้งในระดับ องค์กร
มีประโยชน์คือ
1ได้เปรียบคู้แข่งทางการค้า
2ผู้ซื้อมีตัวเลือกมากยิ่งขึ้น
3สดวกสบายยิ่งขึ้น
4เพิ่มประสิทธิภาพให้องค์กร
e-Learning
ใช้สื่ออิเล็กทรอนอกส์ในการทำการเรียนการสอน ไม่ว่าจะเป็น cd rom คอมพิวเตอร์ ดาวเทียม

ข้อดี
1เกิดความเข้าใจ
2ประหยัดเวลา
e-Banking
คือบริการ ที่ทำให้ผู้ใช้บริการเกิดความสะดวกในการทำธุรกรรมทางการเงิน ไม่ว่าจะเป็นการเช็กจำนวนเงิน โอนเงิน ทำให้ผู้ใช้บริการเกิดความพึงพอใจ สะดวกรวจเร็ว ส่วนใหญ่จะมีทุกธนาคารโคยการใช้
สาระสนเทศเข้ามาจัดการ
ข้อดี
1สะดวกรวจเร็วในการทำธุรกรรมทางการเงิน
2ไม่ต้องเสียเวลาไปธนาคารให้เสียเวลา
e-Society
อันนี้เป็นโครงการที่ทำประโยชน์เพื่อสังคม โดยใช้เครือข่าย อุปกรณ์อิเล็กทรอนิกส์ เข้ามามีบทบาท
ทำให้สังคมเกิดการติดต่อสื่อสารเรียนรู้ทำให้เกิดความเท่าเทียมทางการเรียนรู้โดยทั่วๆกัน
สามารถที่จะส่งเสริมการพัฒนาประเทศให้เจริญยิ่งๆขึ้นไป อินเตอร์เน็ตตำบล
ประโยชน์คือ
1เป็นประโยชน์ต่อสังคมเยาวชนเิดการเรียนรู้ในสิ่งที่ถูกต้อง
2เกิดการเรียนรู้ที่มีประโยชน์
3มีข้อมูลของระดับชุมชนในการใช้ฐานข้อมูล
4ชุมชนเกิดการพัฒนาเพราะมีการเรียนรู้ที่ทันต่อเหตุการ

งาน4

1. คำว่า 'Stoppin too soon' มีความหมายการออกแบบระบบอย่างไร?
- stop too soon คือการหยุดระบบที่เร็วเกินไปการที่จะพัฒนาโปรแกรม software ต่างๆ
แต่การที่ถูกเลิกก่อนกำหนดทำให้ไม่เกิดประโยชน์เราเรียกการหยุดก่อน
โปรแกรมจะเสร็จว่า Stopping too soon
และเกียวกับการออกแบบระบบอย่างไรนั้นมันต้องเกียวอย่างแน่นอนเพราะการที่เราจะ
ทำระบบใดระบบหนึ่งเราก็จะต้องศึกษารายละเอียดของของระบบที่เราจะทำการที่ระบบของเราถูกยกเลิก
2. การเขียน DFD (Data Flow Diagram) มีข้อดีและข้อเสียของการวิเคราะห์และออกแบบระบบอย่างไร
ข้อดี
- ทำให้เข้าใจขั้นตอนการทำงานเวลาจะแก้ไขก็สามารถนำ Flow Diagramp เพื่อให้เกิดความเข้าใจ
ข้อเสีย
- บางทีมันชี้แจงไม่ละเอียดทำให้ไม่เข้าใจเปรียนแปลงได้ง่ายต้องเป็นแบบนู้นแบบนี้

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

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

การสร้าง Form Login hph และการเชื่อมต่อฐานข้อมูล

วิธีการทำงานของฟอร์ม

1)

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

2)

บนเว็บเซิร์ฟเวอร์

ข้อมูลจากฟอร์มจะถูกประมวลผลที่ไฟล์ PHP, ASP หรือไฟล์ CGI อื่นๆ

3)

เมื่อประมวลผลเสร็จแล้ว ผลลัพธ์จะถูกส่งกลับไปให้ผู้ใช้ในรูปแบบเอกสารHTML

1.ไปสร้างฐานข้อมูลก่อน
คลิกที่ Internet Explorer พิมพ์  http://localhost  คลิกที่ phpMyAdmin Database Manager Version 2.10.3

2.ใส่ชื่อและ Password  คลิก OK

 

3.สร้างฐานช้อมูลใส่ชื่อฐานข้อมูลและเลือก utf8_unicode_ci คลิกปุ่มสร้าง

  

4.สร้างฟิวตามนี้

วิธีการเชื่อมฐานข้อมูล

 1.เปิดโปรแกรม Adobe Dreamweaver CS4
ตั่งค่าตามนี้คลิก OK

เพื่อให้เว็บเบราเซอร์แสดงผล

การสร้างหน้า สมัคสมาชิก html

1.เปิดโปรแกรม Adobe Dreamweaver CS4
ไปที่ File กด New

2.เลือก html กด Create

3.นำแบนเนอร์ใส่บนท่อนหัว

คลิก insert คลิก Images:Image

4.เลือกไฟล์และคลิก OK

5.คลิก OK

6.ใส่ชื่อและคลิก OK

7.ทำช่องรับค่า ชื่อนามสกุล E-mail เบอร์โทร คณะ  Password ปุ่มกด  ตามรูป

8.ทำการ Save ไปที่ File  Save ตั้งชื่อและกด  Save 

การหน้าสร้าง Login html

1.เปิดโปรแกรม Adobe Dreamweaver CS4
ไปที่ File กด New

2.เลือก html กด Create

3.นำแบนเนอร์ใส่บนท่อนหัว

คลิก insert คลิก Images:Image

4.เลือกไฟล์และคลิก OK

5.คลิก OK

6.ใส่ชื่อและคลิก OK

7.ทำช่องรับค่า Username และ Password ตามรูป

8.ทำการ Save ไปที่ File  Save ตั้งชื่อและกด  Save 

XHTML

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

ทำไมเราต้องเรียนภาษา XHTML 

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


XHTML CSS เพื่อประโยชน์ทาง SEO อย่างแท้จริง

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ .... หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ เช่น การจัดการหน้าเวปของคุณ  ๆ เองนั้นให้มีขนาดย่อมลง หรือ อะไรก็ตามที่แสดงในหน้าเวปนั้น ไม่หนักจนเกินไป, จัดการกับ content ของคุณให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ หรือ concept ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

เราจะโฟกัสกันที่ ประโยชน์ที่เราจะได้รับจากการใช้ XHTML และ CSS เพื่อเพิ่ม readability ของ code ของเราต่อเจ้า Search Engine Spider โดยไม่ต้องไปคำนึงถึงความหนักหน่วงในการโหลดไฟล์ หรือ จำนวนของเนื้อหา ความสับสนของเนื้อหา และ ใช้ CSS จัดการกับเหล่า รูปภาพในเวปของเราอย่างไร

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

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

ตัวอย่าง: สมมติใน browser เรามองเห็นเจ้าตัวหนังสือ Arial ตัวหนา สีเขียวขนาด 24px ถูกวางไว้ที่ตำแหน่งบนสุดของหน้าเวป เป็นหัวข้อหลักของเนื้อหาที่มีทั้งหมดในนั้น ถ้าเราไม่มีการจัดแจง code ให้ดี เจ้า Search Engine Spider ก็จะไม่เข้าใจความหมาย เหมือนกับที่เราเข้าใจ และ อาจจะเข้าใจเป็นอย่างอื่นไปเสียด้วย อาทิ

<strong><font color="green" size="24px">ThaiCSS | CSS design เพื่อคนไทย</font></strong>

ถ้าเป็น XHTML:
<h1>ThaiCSS | CSS design เพื่อคนไทย</h1>

และใน CSS:
h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

ใช้ tag XHTML เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นมีความหมายว่าอะไร ในที่นี้คือ H1 ซึ่งหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag XHTML นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของเจ้า H1 ของเราด้วย CSS ในที่นี้ไม่ได้หมายความว่า คุณจะต้องใช้ H1 กับหัวข้อของคุณเสมอไปใน XHTML นั้นคุณสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นคุณต้องเลือกใช้ให้เหมาะสม tag อื่น ๆ ก็เช่นกัน ศึกษาความหมายของ tag แต่ละตัวได้ที่นี่ http://www.xhtml.com

ใช้รูปภาพอย่างชาญฉลาด

ในความจริงเราคงไม่ใช้ ตัวหนังสือเปล่า ๆ มาใช้กับการ design เวปไซท์เสมอไป เช่น ชื่อของบริษัท หรือ ชื่อของเวปไซท์นั้นก็ต้องแทนด้วย โลโก้ ซึ่งเป็นรูปภาพสวย ๆ เราก็สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง อย่าลืมไปเสียว่า สิ่งที่ข้อมูลที่อยู่ใน code ของคุณจะต้องเหมือนกับ สิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง XHTML:
<h1><span>ThaiNUI | Natural User Interface in Thai</span></h1>

และ ใน CSS:
h1 {
  width: 316px;
  height: 158px;
  background: url(../images/bg/h1_inner_logo.jpg) no-repeat;
}


h1 span {visibility: hidden;}

รูปภาพของคุณก็จะต้องมีคำว่า ThaiNUI | Natural User Interface in Thai ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที

โยนทิ้ง Rollover JavaScript ที่น่ารำคาญกันเสียที

หลาย ๆ คนชอบ RollOver Effect และ หลาย ๆ คนยังคงใช้ RollOver Javascript สำเร็จรูปที่เจ้า DreamWeaver นั้น Generate ให้ ลองมาทำ เมนูรูปภาที่ readable กันดูมั้ยเพื่อประสิทธิภาพ และ ประสิทธิผลทาง SEO ที่ดีกว่า เราสามารถวาง ul li เพื่อทำเป็น Navigation Bar โดยเราสามารถที่จะวาง text ที่เป็น keywords ลงไปใน ul li ได้ และ ใช้ CSS จัดการการแสดงผลให้สวยงาม

ผมไม่ขอยกตัวอย่างแห้ง ๆ ให้ดูนะครับ ให้ไปลองฝึกฝนกันที่นี่ CSS rollover buttons

วิเคราะห์ และ กลั่นกรองในส่วนอื่น ๆ

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

XHTML

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

ทำไมเราต้องเรียนภาษา XHTML 

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


XHTML CSS เพื่อประโยชน์ทาง SEO อย่างแท้จริง

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ .... หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ เช่น การจัดการหน้าเวปของคุณ  ๆ เองนั้นให้มีขนาดย่อมลง หรือ อะไรก็ตามที่แสดงในหน้าเวปนั้น ไม่หนักจนเกินไป, จัดการกับ content ของคุณให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ หรือ concept ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

เราจะโฟกัสกันที่ ประโยชน์ที่เราจะได้รับจากการใช้ XHTML และ CSS เพื่อเพิ่ม readability ของ code ของเราต่อเจ้า Search Engine Spider โดยไม่ต้องไปคำนึงถึงความหนักหน่วงในการโหลดไฟล์ หรือ จำนวนของเนื้อหา ความสับสนของเนื้อหา และ ใช้ CSS จัดการกับเหล่า รูปภาพในเวปของเราอย่างไร

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

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

ตัวอย่าง: สมมติใน browser เรามองเห็นเจ้าตัวหนังสือ Arial ตัวหนา สีเขียวขนาด 24px ถูกวางไว้ที่ตำแหน่งบนสุดของหน้าเวป เป็นหัวข้อหลักของเนื้อหาที่มีทั้งหมดในนั้น ถ้าเราไม่มีการจัดแจง code ให้ดี เจ้า Search Engine Spider ก็จะไม่เข้าใจความหมาย เหมือนกับที่เราเข้าใจ และ อาจจะเข้าใจเป็นอย่างอื่นไปเสียด้วย อาทิ

<strong><font color="green" size="24px">ThaiCSS | CSS design เพื่อคนไทย</font></strong>

ถ้าเป็น XHTML:
<h1>ThaiCSS | CSS design เพื่อคนไทย</h1>

และใน CSS:
h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

ใช้ tag XHTML เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นมีความหมายว่าอะไร ในที่นี้คือ H1 ซึ่งหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag XHTML นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของเจ้า H1 ของเราด้วย CSS ในที่นี้ไม่ได้หมายความว่า คุณจะต้องใช้ H1 กับหัวข้อของคุณเสมอไปใน XHTML นั้นคุณสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นคุณต้องเลือกใช้ให้เหมาะสม tag อื่น ๆ ก็เช่นกัน ศึกษาความหมายของ tag แต่ละตัวได้ที่นี่ http://www.xhtml.com

ใช้รูปภาพอย่างชาญฉลาด

ในความจริงเราคงไม่ใช้ ตัวหนังสือเปล่า ๆ มาใช้กับการ design เวปไซท์เสมอไป เช่น ชื่อของบริษัท หรือ ชื่อของเวปไซท์นั้นก็ต้องแทนด้วย โลโก้ ซึ่งเป็นรูปภาพสวย ๆ เราก็สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง อย่าลืมไปเสียว่า สิ่งที่ข้อมูลที่อยู่ใน code ของคุณจะต้องเหมือนกับ สิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง XHTML:
<h1><span>ThaiNUI | Natural User Interface in Thai</span></h1>

และ ใน CSS:
h1 {
  width: 316px;
  height: 158px;
  background: url(../images/bg/h1_inner_logo.jpg) no-repeat;
}


h1 span {visibility: hidden;}

รูปภาพของคุณก็จะต้องมีคำว่า ThaiNUI | Natural User Interface in Thai ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที

โยนทิ้ง Rollover JavaScript ที่น่ารำคาญกันเสียที

หลาย ๆ คนชอบ RollOver Effect และ หลาย ๆ คนยังคงใช้ RollOver Javascript สำเร็จรูปที่เจ้า DreamWeaver นั้น Generate ให้ ลองมาทำ เมนูรูปภาที่ readable กันดูมั้ยเพื่อประสิทธิภาพ และ ประสิทธิผลทาง SEO ที่ดีกว่า เราสามารถวาง ul li เพื่อทำเป็น Navigation Bar โดยเราสามารถที่จะวาง text ที่เป็น keywords ลงไปใน ul li ได้ และ ใช้ CSS จัดการการแสดงผลให้สวยงาม

ผมไม่ขอยกตัวอย่างแห้ง ๆ ให้ดูนะครับ ให้ไปลองฝึกฝนกันที่นี่ CSS rollover buttons

วิเคราะห์ และ กลั่นกรองในส่วนอื่น ๆ

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

ขั้นตอนการลงมือจัดทำเว็บไซต์

ขั้นตอนการสร้างเว็บไซต์
มีดังนี้

ขั้นตอนการสร้างเว็บไซต์

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

2. เลือก Web hosting และจด Domain name
* Web hosting คืออะไร
* หลักการเลือก Web hosing
* การจด Domain name
* การตั้งชื่อ Domain name ที่ดี

3 ออกแบบเว็บไซต์
* การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
* การออกแบบระบบเนวิเกชั่น (Site Navigation Design)
* การออกแบบเว็บเพจ (Page Design)

4 ลงมือสร้างและทดสอบ
* รูปแบบของเว็บไซต์
* ภาษาโปรแกรมที่ใช้ในการสร้างเว็บไซต์
* โปรแกรมที่ใช้ในการสร้างเว็บไซต์
* ลงมือสร้างเว็บไซต์

5. ประชาสัมพันธ์ให้เว็บไซต์เป็นที่รู้จัก

6. ดูแล และพัฒนาอย่างต่อเนื่อง

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

ประเภทของเว็บไซต์ที่แบ่งตามลักษณะการใช้งานและการโต้ตอบกับผู้ใช้แล้ว จะแบ่งออกเป็น 2 ประเภทหลัก ๆ ครับ

เว็บไซต์แบบเคลื่อนไหว ( Dynamic Website )
เว็บไซต์สามารถโต้ตอบกับผู้ใช้งานได้แบบ Real Time มีความสามารถในการประมวลผล จัดเก็บ วิเคราะห์ข้อมูลในรูปแบบฐานข้อมูลได้ทันที เว็บไซต์ไดนามิคเป็นที่นิยมอย่างมากในปัจจุบัน เพราะสามารถแสดงความเคลื่อนไหวของผู้ใช้ได้ทันที ทำให้เกิดประสบการณ์ที่ดีในการใช้เว็บไซต์  ตัวอย่างเว็บไซต์ไดนามิคที่คนไทยรู้จักดี เช่น Sanook.com , Hunsa.com , Mthai.com ฯลฯ

การออกแบบเว็บไซต์แบบไดนามิคมีความซับซ้อนในการออกแบบ ด้วยภาษาเฉพาะทาง เช่้น PHP , ASP , JAVA ฯลฯ โดยจะทำงานร่วมกับประเภทของฐานข้อมูลต่าง ๆ ที่นิยมใช้ ได้แก่ mySql , SQL , Access ฯลฯ การออกแบบจึงต้องใช้เวลาพอสมควร มากน้อยแตกต่างกันไปตามความซับซ้อนของโปรแกรม อัตราค่าบริการจึงคำณวนจากระบบและความซับซ้อนของโปรแกรม โดยมากราคาจะค่อนข้างสูง แต่มีประสิทธฺภาพในการแสดงผล

 

เว็บไซต์แบบคงที่ ( Statistic Website )
เว็บไซต์สามารถแสดงผลข้อมูลได้เร็ว เนื่องจากไม่มีการใช้ภาษาเชิงโปรแกรมและฐานข้อมูลมาร่วมใช้งานด้่วย ไม่มีความซับซ้อนในการออกแบบ ทำให้ใช้เวลาสั้นในการสร้างเว็บไซต์ประเภทนี้ และเป็นเว็บไซต์ที่มีความเข้ากันได้กับระบบ Search Engine เช่น Google.com ฯลฯ ได้เป็นอย่างดี ทำให้ติดอันดับการค้นหาได้อย่างรวดเร็ว แต่ข้อเสียก็คือ ไม่สามารถโต้ตอบกับผู้ใช้งานได้แบบ Real Time  ผู้ใช้งานต้องรอการโต้ตอบจากผู้ดูแลเว็บไซต์เพื่อทำตามคำร้องขอที่ส่งเข้ามา ตัวอย่างเว็บไซต์แบบคงที่ เช่น geocities.com ฯลฯ

XHTML

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

ทำไมเราต้องเรียนภาษา XHTML 

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


XHTML CSS เพื่อประโยชน์ทาง SEO อย่างแท้จริง

ผู้เชี่ยวชาญทางด้าน Internet Marketing คงทราบกันอยู่แล้วว่าสิ่งที่ทำให้ผลลัพธ์ทาง SEO สูง ๆ นั้น ไม่ใช่การมุ่งทำโฆษณากับ .... หรือ จ่าย pay per click มีอีกหลาย ๆ วิธีที่ไม่จำเป็นต้องไปเสียเงินเสียทองให้เปลืองไปเปล่า ๆ เช่น การจัดการหน้าเวปของคุณ  ๆ เองนั้นให้มีขนาดย่อมลง หรือ อะไรก็ตามที่แสดงในหน้าเวปนั้น ไม่หนักจนเกินไป, จัดการกับ content ของคุณให้เป็นระเบียบเรียบร้อย รวมไปถึงตัว code เองด้วย และ เนื้อหาที่ตรง ถูกต้องตามวัตถุประสงค์ หรือ concept ของเวปไซท์ พยายามแทนที่ภาพด้วย text ให้มากที่สุด โดย text เหล่านั้นไม่ใช่การ spaming กับ search engine spiders

เราจะโฟกัสกันที่ ประโยชน์ที่เราจะได้รับจากการใช้ XHTML และ CSS เพื่อเพิ่ม readability ของ code ของเราต่อเจ้า Search Engine Spider โดยไม่ต้องไปคำนึงถึงความหนักหน่วงในการโหลดไฟล์ หรือ จำนวนของเนื้อหา ความสับสนของเนื้อหา และ ใช้ CSS จัดการกับเหล่า รูปภาพในเวปของเราอย่างไร

ความสัมพันธ์ ระหว่าง code และ เนื้อหา

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

ตัวอย่าง: สมมติใน browser เรามองเห็นเจ้าตัวหนังสือ Arial ตัวหนา สีเขียวขนาด 24px ถูกวางไว้ที่ตำแหน่งบนสุดของหน้าเวป เป็นหัวข้อหลักของเนื้อหาที่มีทั้งหมดในนั้น ถ้าเราไม่มีการจัดแจง code ให้ดี เจ้า Search Engine Spider ก็จะไม่เข้าใจความหมาย เหมือนกับที่เราเข้าใจ และ อาจจะเข้าใจเป็นอย่างอื่นไปเสียด้วย อาทิ

<strong><font color="green" size="24px">ThaiCSS | CSS design เพื่อคนไทย</font></strong>

ถ้าเป็น XHTML:
<h1>ThaiCSS | CSS design เพื่อคนไทย</h1>

และใน CSS:
h1 {font-famaily: Arial; font-size: 24px; font-weight: bold; color: green;}

ใช้ tag XHTML เพื่อที่จะบอกให้รู้ว่าเจ้า text ที่ตัวมันครอบอยู่นั้นมีความหมายว่าอะไร ในที่นี้คือ H1 ซึ่งหมายถึงหัวข้อที่สำคัญที่สุด โดยเจ้า Search Engine Spider ก็จะเข้าใจตามความหมายของ tag XHTML นั้น แล้วไปกำหนดคุณลักษณะของการแสดงผลของเจ้า H1 ของเราด้วย CSS ในที่นี้ไม่ได้หมายความว่า คุณจะต้องใช้ H1 กับหัวข้อของคุณเสมอไปใน XHTML นั้นคุณสามารถเรียกมาใช้ได้ตั้งแต่ H1 ไปจนถึง H6 ลำดับความสำคัญก็จะลดน้อยลงไปตามตัวเลขที่มากขึ้น เพราะฉะนั้นคุณต้องเลือกใช้ให้เหมาะสม tag อื่น ๆ ก็เช่นกัน ศึกษาความหมายของ tag แต่ละตัวได้ที่นี่ http://www.xhtml.com

ใช้รูปภาพอย่างชาญฉลาด

ในความจริงเราคงไม่ใช้ ตัวหนังสือเปล่า ๆ มาใช้กับการ design เวปไซท์เสมอไป เช่น ชื่อของบริษัท หรือ ชื่อของเวปไซท์นั้นก็ต้องแทนด้วย โลโก้ ซึ่งเป็นรูปภาพสวย ๆ เราก็สามารถใช้รูปภาพนั้นให้เป็น background picture แทนได้ ด้วยการใช้ CSS ตกแต่ง อย่าลืมไปเสียว่า สิ่งที่ข้อมูลที่อยู่ใน code ของคุณจะต้องเหมือนกับ สิ่งที่ตาของ user เห็น และ Search Engine Spider เห็น ไม่เช่นนั้นจะเข้าข่าย Black Hat และได้รับโทษแบนเวปได้

ตัวอย่าง XHTML:
<h1><span>ThaiNUI | Natural User Interface in Thai</span></h1>

และ ใน CSS:
h1 {
  width: 316px;
  height: 158px;
  background: url(../images/bg/h1_inner_logo.jpg) no-repeat;
}

h1 span {visibility: hidden;}

รูปภาพของคุณก็จะต้องมีคำว่า ThaiNUI | Natural User Interface in Thai ไม่ใช่รูปภาพอีกคำ ใน code เป็นอีกคำ ส่วนอื่น ๆ เช่นกัน ไม่ใ่ช่จงใจซ่อนเนื้อหาบางอย่างไว้ เพื่อผลลัพธ์ทาง SEO ถ้าโดนจับได้ Search Engine ก็จะแบนเวปไซท์ที่กระทำการแบบนี้โดยทันที

โยนทิ้ง Rollover JavaScript ที่น่ารำคาญกันเสียที

หลาย ๆ คนชอบ RollOver Effect และ หลาย ๆ คนยังคงใช้ RollOver Javascript สำเร็จรูปที่เจ้า DreamWeaver นั้น Generate ให้ ลองมาทำ เมนูรูปภาที่ readable กันดูมั้ยเพื่อประสิทธิภาพ และ ประสิทธิผลทาง SEO ที่ดีกว่า เราสามารถวาง ul li เพื่อทำเป็น Navigation Bar โดยเราสามารถที่จะวาง text ที่เป็น keywords ลงไปใน ul li ได้ และ ใช้ CSS จัดการการแสดงผลให้สวยงาม

ผมไม่ขอยกตัวอย่างแห้ง ๆ ให้ดูนะครับ ให้ไปลองฝึกฝนกันที่นี่ CSS rollover buttons

วิเคราะห์ และ กลั่นกรองในส่วนอื่น ๆ

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

การสร้าง Template

Template ประกอบด้วย ข้อมูลในบริเวณพื้นที่ ที่สามารถแก้ไขได้ และ ข้อมูลบริเวณ
พื้นที่ ที่ไม่สามารถแก้ไขได้ สะดวกในการปรับปรุง หรือเปลี่ยนรูปแบบ ในเวลาอัน
รวดเร็ว

ขั้นตอนการสร้าง ( ก่อนอื่นควรสร้าง SiteMap ก่อน ดูหัวข้อ สร้าง Site Map )
1. ออกแบบเอกสาร HTML เป็นที่เรียบร้อย เลือก Save เป็น Save As Template
2. จะปรากฏหน้าต่าง Save As Template
Site คือชื่อไซค์ ที่ได้ SiteMap ไว้แล้ว
Existing Templates ชื่อ Template ใน SiteMap
Save As ชื่อที่ตั้งขึ้นใหม่
3. เมื่อ เลือก SiteMap และตั้งชื่อFile แล้ว จะเป็น ไฟล์นามสกุล .dwt ใน Folder ชื่อTemplates

4. สร้างพื้นที่สำหรับแก้ไขได้ โดยคลิกปุ่ม Editable Region ที่แท็บ Template
5. จะปรากฏหน้าต่าง New Editable Region ขึ้นมา
6. ตั้งชื่อ บริเวณที่ แก้ไขข้อมูลได้ ในช่อง Name แล้วคลิกปุ่ม OK

7. จะปรากฏ Code เกิดขึ้น ในมุมมองทั้งส่วน Show Code และส่วน Show Design
8. ทำซํ้าอีก ถ้าต้องการสร้างพื้นที่ส่วนที่แก้ไขได้ ตั้งแต่ข้อ 4-7 แล้ว Save

9. เสร็จสิ้นขั้นตอนการสร้าง Templates
10. การสร้างเอกสาร HTML ใหม่ เพื่อเรียกTemplates มาใช้ เลือก File > New
11. จะปรากฏหน้าต่าง New Document ที่แท็บเลือก Templates และกดปุ่ม Create

12.เมื่อสร้างใหม่จะเห็นพื้นที่ในส่วน แก้ไขไม่ได้ เป็น สีเทา ( พอยน์เตอร์ จะเป็นรูปวงกลม )
13. พื้นที่แก้ไขได้ จะเป็นสีเขียว ในมุมมองของ Show Design View
14. ถ้าต้องการเปลี่ยน File ที่เรียกจาก Templates เป็น HTML
เลือกเมนู Modify > Templates > Detach from Templates

การทำ Menu POPUP ด้วย Spry Menu

1. ทำการเปิดไฟล์เว็บเพจที่เราต้องการสร้าง POPUP Menu ขึ้นมา หรือจะทำการ New File ขึ้นมาใหม่

2. จากนั้นไปที่ TAB Spry ของโปรแกรม แล้วเลือกที่ Spry Menu Bar ดังรูป

3. เมื่อเลือกแล้ว โปรแกรมจะแสดง Dialog ขึ้นมาให้เราเลือกว่าต้องการสร้าง POPUP Menu มีให้เลือกแบบแนวนอน (Horizontal) และแนวตั้ง (Vertical)

4. จากนั้นโปรแกรมจะสร้างตัวอย่าง Menu ให้เรากับหน้าเว็บเพจ เพื่อให้เราสามารถทำการแก้ไขเพิ่มเติมได้ตามต้องการ

ออแบบไว้

5. เมื่อโปรแกรมสร้างตัวอย่างเมนูให้เราแล้ว หากเราต้องการทำการแก้ไข ให้เลือกไปที่ Properties ดังรูป หากไม่ปรากฏลักษณะดังรูปให้เราทำการ Click เลือกไปที่แถบสีฟ้า ๆ ของเมนูก่อน 1 ครั้ง จะขึ้นช่องให้เราใส่ลายละเอียด

6. การแก้ไขทำได้โดย เลือกไปที่ List ในช่อง Item ที่เราต้องการ จากนั้น หากต้องการเปลี่ยนชื่อ หรือแก้ไขข้อความที่ปรากฏบนเมนู ให้ทำการพิมพ์ข้อความใหม่ที่ต้องการในช่อง Text 

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

7. หากต้องการสร้างจุดเชื่อมโยงหรือ Link สามารถทำได้ที่ช่อง Link

8. หากต้องการเพิ่มหรือลบเมนู เราสามารถทำได้โดยการคลิ๊กเลือกไปที่เครื่องหมายบวก-ลบ ของ List Item

9. เมื่อเพิ่มแล้วจะได้รายการใหม่ดังตัวอย่าง หากต้องการเปลี่ยนแปลงแก้ไขใด ๆ ให้ทำได้ตามต้องการเหมือนดังขั้นตอนที่ 5-7 ที่กล่าวมา

10. การเปลี่ยนแปลงแก้ไขสีสรรของเมนู ไม่ว่าจะเป็นสีของพื้นหลังของเมนู หรือสีของตัวอักษรข้อความ เราสามารถเปลี่ยนได้จาก CSS Panel 

ซึ่งรูปแบบของเมนู หรือ CSS ที่โปรแกรมสร้างขึ้นมาใช้กับ Spry POPUP Menu Bar นั้น จะถูกเก็บไว้ในไฟล์ที่ชื่อ SpryMenuBarHorizontal.css (หากสร้างแบบแนวนอน)

11. วิธีการแก้ไขก็ให้เราทำการเลือกไปที่ชื่อ Class ของสไตร์ที่เราต้องการแก้ไข ดังรูปเป็น CSS ที่ใช้ในการกำหนดสีพื้นหลังและสีของตัวอักษร เมื่อเมาท์มาวางเหนือเมนู

การแก้ไขค่าของ CSS ก็ดังเช่นกับที่เราแก้ไข CSS ที่เราเคยใช้งานกันแล้ว Save