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

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

เปลี่ยน Cursor หรือตัวชี้เมาท์ง่าย ๆ สไตล์เรา

เรื่อง : เปลี่ยน Cursor หรือตัวชี้ของเมาท์บนหน้าเว็บเพจ มีแฟนเว็บไถ่ถามกันเข้ามาว่า...จะเปลี่ยนรูปร่างของเมาท์ให้เป็นรู...

ทำความเข้าใจเกี่ยวกับความแตกต่างระหว่าง Elements และ Tags (Elements vs. Tags)

เรื่อง : ความแตกต่างระหว่าง Elements กับ Tags การเขียนโค้ดในลักษณะของภาษาแบบ Markup อ...

ทำความเข้าใจพื้นฐานการสร้าง Website

เรื่อง :: ทำความเข้าใจพื้นฐานการสร้าง Website (คำถามคาใจสำหรับผู้เริ่มต้น)หลายครั้งที่ผมมักจะได้รับคำถาม ไม่ว่าจะทาง...

Insert Garuda (ใส่ตราครุฑ) for Google Docs

Insert Garuda (ใส่ตราครุฑ) for Google Docs ใช้เพื่อจัดทำเอกสารราชการ ที่ต้องมีการใช้งานตราสัญลักษณ์รูปครุฑ ...