About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

การออกแบบเว็บเพจให้แสดงกลางจอ Web Browser [Article ID : 224]

เรื่อง : ออกแบบเว็บอย่างไรให้อยู่กลางหน้าจอ ? (Centering a Web Page)

คำถามที่ว่า "อาจารย์ครับ/ค่ะ จะเซ็ทเว็บอย่างไรให้อยู่กลางจอครับ/ค่ะ ?"

คำถามนี้ผมได้รับการสอบถามมาเสมอตลอดระยะเวลา 10 กว่าปีที่ผมอยู่กับเว็บมา ซึ่งในการเซ็ทให้เว็บเพจที่ออกแบบไว้แสดงอยู่กลางหน้าจอของ Web Browser นั้นจะเป็นอย่างไรลองอ่านบทความนี้กันดูครับ...

วิธีการทำให้เว็บเพจที่ออกแบบแสดงกึ่งกลางจอของ Web Browser

ก่อนอื่นต้องดูที่เว็บเพจก่อนว่า...เว็บเรานั้นออกแบบโครงสร้างโดยใช้อะไร ?
ซึ่งปัจจุบันก็มีอยู่ 2 รูปแบบ คือ

ใช้ตาราง หรือ Tables
ใช้ DIV ร่วมกับ CSS

ซึ่งทั้ง 2 รูปแบบของโครงสร้างเว็บเพจนั้น สามารถกำหนดให้เว็บเพจที่ออกแบบแสดงอยู่ที่ตรงกลางของ Web Browser ได้ ดังนี้

โครงสร้างเว็บใช้ตาราง (Tables) ในการออกแบบ

หากใช้ตารางในการกำหนดโครงสร้างเว็บเพจ ให้ทำการกำหนดค่าของ Properties ของตารางที่เป็นโครงสร้างหลักให้แสดงตรงกลาง (Center) โดยเลือกที่ Alignment ดังรูป Table Alignment

ในมุมมองของโค้ด HTML คือการกำหนด align="center" ให้แก่ Table

  <table align="center" width="900">
	......
  </table>

โครงสร้างเว็บใช้ DIV ร่วมกับ CSS

หากใช้แท๊ก DIV (<div> .... </div>) หรือ Tag อื่น ๆ ที่ไม่ใช่ Tables ในการกำหนดโครงสร้างเว็บเพจ โดยใช้ร่วมกับ CSS ให้ทำการกำหนดค่า Properties ของ Margin แก่ DIV ที่เป็นแท๊กครอบคลุมโครงสร้างอื่น ๆ ไว้ โดยกำหนดให้เป็น auto ดังโค้ดตัวอย่างด้านล่างนี้

 <style>
 #wrap{
	margin: 0 auto;
	width: 900px;
 }
 </style>
 
 <body>
  <div id="wrap">
    <!-- โครงสร้างอื่น ๆ ของเว็บเพจ -->
  </div>
</body>

เมื่ออ่านบทความแล้ว...ลองทำความเข้าใจ และนำไปใช้กันดู...สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

ทดสอบการทำงานของเว็บไซต์บนอุปกรณ์มือถือ (Mobile Devices) กับ Google

เรื่อง : มาทดสอบเว็บไซต์กับการแสดงผลบนอุปกรณ์มือถือ (Mobile Devices) ด้วยบริการจาก Google ปัจจุบันการออกแบบ และพัฒนาเว็บไซ...

DwThai.Com ใน นสพ.ไทยรัฐ

เรื่อง : เมื่อ DwThai.Com ได้ลงในหนังสือพิมพ์ไทยรัฐ นสพ.ไทยรัฐฉบับวันที่ ๙ ธันวาคม ๒๕๔๖ ...

องค์ประกอบเว็บไซต์ในแบบ CDP

เรื่อง :: องค์ประกอบเว็บไซต์ในแบบ CDP CDP คืออะไร CDP เป็นอักษรย่อของคำว่า Content - Design - Program ครับ ผมพบคำนี้ใน We...

การใช้ Developer Tools ใน Web Browser

เรื่อง : มารู้จักเครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่มีมากับ Web Browser บทความนี้มาพูดถึงเรื่อง Feature ที่มีมากับ Web Br...