Translate

วันเสาร์, กรกฎาคม 11, 2552

มาสร้างเว็บที่ทุกคนเข้าถึงได้ด้วย Dreamweaver CS3 กันเถอะ

หลังจากที่ผมพูดถึง Web Accessibility หรือเว็บที่ทุกคนเข้าถึงได้ไปแล้ววันนี้ผมจะมาสอนการใช้โปรแกรม Dreamweaver CS3 ในการช่วยสร้างเว็บที่ทุกคนเข้าถึงได้กันครับ
หลังจากเข้าโปรแกรม Dreamweaver CS3 มาแล้ว ก่อนอื่นเราต้องสร้าง new site เพื่อจัดการเว็บไซต์ที่เราจะสร้างครับ
วิธีสร้าง New Site
1.ให้เลือกไปที่ Site -> New Site…







2. เลือกที่แถบ Basic และใส่ชื่อเว็บไซต์ที่เราจะสร้าง เสร็จแล้วกดปุ่ม Next




















3. เลือก No, I do not want to use a server technology เสร็จแล้วกดปุ่ม Next










4. เลือก Edit local copies on my machine, then upload to server when ready (recommended) แล้วกดเลือกที่เก็บไฟล์เว็บที่เราจะทำการสร้าง เสร็จแล้วกดปุ่ม Next














5. เลือก None เสร็จแล้วกดปุ่ม Next














6. เสร็จแล้วจะมีหน้าแสดงรายละเอียดของ Site ที่เราจะสร้าง กดปุ่ม Done เป็นอันเสร็จ



7. เมื่อเสร็จแล้วดูตรงด้านขวามือจะเห็นว่าตรง Files จะมี Site ที่เราสร้างแสดงอยู่ ไฟล์ทั้งหมดจะแสดงอยู่ตรงนี้



เอาละครับหลังจากที่เราสร้าง Site กันเป็นที่เรียบร้อยแล้วเรามาเริ่มสร้างหน้าเว็บกันเลยครับ
วิธีสร้างหน้าเว็บ
1. ที่หน้าโปรแกรมของ Dreamweaver CS3 ให้เราเลือกไปที่ More…


2. เลือกที่ Blank Page ประเภทหน้าเลือกเป็น HTML ตรงการจัดวางรูปแบบเลือกแบบที่เราต้องการใช้ได้เลยครับ ตรงประเภทเอกสาร เลือกเป็น XHTML 1.0 Transitional และตรง CSS ให้เลือกเป็นแบบ Create New File คือสร้างขึ้นมาเป็นไฟล์ใหม่ครับ เลือกเสร็จแล้วกดที่ปุ่ม Create


3. หลังจากกดปุ่ม Create มันจะให้บันทึกไฟล์ CSS ให้เราตั้งชื่อและกดปุ่ม Save

4. จากนั้นจะเห็นหน้าเว็บที่เรากดสร้างขึ้นมาโดยมีการจัดรูปแบบไว้ให้แล้วบางส่วนให้เราทำการบันทึกไว้ก่อนครับไปที่ File -> Save หรือกดปุ่ม Ctrl+S ก็ได้ครับ

5. ให้เราทำการตั้งชื่อไฟล์เป็น index.html แล้วกดปุ่ม Save

6. จากนั้นให้เราปรับแต่งหน้าเว็บให้เป็นเนื้อหาของเว็บที่เราต้องการ อย่าลืมใส่ชื่อให้กับ Title ด้วยครับเพราะถ้าไม่ใส่ลงไปว่าหน้าเว็บนี้เป็นเรื่องเกี่ยวกับอะไรก็จะทำให้เว็บเราไม่เป็นไปตามมาตรฐานของเว็บที่ทุกคนเข้าถึงได้ครับ เสร็จแล้วให้เราทำการตรวจสอบ Syntax ของหน้าซักหน่อยครับ โดยกดไปที่ Validation Current Document เสร็จแล้วดูผลที่ด้านล่างเลยครับถ้าขึ้นมาว่า No error ก็ผ่านครับ

7. ถ้าต่อเน็ตอยู่ก็เข้าไปเช็คได้ที่ http://validator.w3.org/check เลือกไปที่ Validation by File Upload แล้วเลือกไฟล์ที่เราต้องการตรวจสอบครับ เสร็จแล้วกดปุ่ม Check รอสักแปบครับ


8. เราจะได้ผลการตรวจออกมาครับถ้าผลออกมาว่า Passed ก็แปลว่าผ่านครับ


เป็นไงครับแค่นี้เองง่ายๆ แต่แค่นี้ยังไม่ใช่ว่าจะเป็นเว็บที่ทุกคนเข้าถึงได้นะครับ แค่เป็นเว็บที่เขียนถูกต้องตามมาตรฐานเท่านั้นเองครับ
ไว้วันหลังจะมาบอกวิธีการตกแต่งด้วย CSS และหลักการเขียนเว็บที่ทุกคนเข้าถึงได้กันใหม่ครับ