About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

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


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

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

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

วิธีการทำให้เว็บเพจที่ออกแบบแสดงกึ่งกลางจอของ 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

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



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

Cookies เรื่องของคุกกี้

เรื่อง :: Cookie Fileเรื่องนี้จริง ๆ แล้วไม่เกี่ยวกับโปรแกรม Dreamweaver หรอกครับ แต่อยากเขียนเพื่อเป็นเกร็ดเล็ก ๆ น...  

Event Handler ที่นักพัฒนาเว็บไซต์ควรรู้ (JavaScript)

เรื่อง : Event Handler ที่นักพัฒนาเว็บไซต์ควรรู้ Event Handler (อีเวนท์ แฮน’เดลอะ) คือ การจัดการ/ตรวจสอบเห...  

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

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

กฏการใช้งานตาราง (Rule used for Table)

เรื่อง :: กฏการใช้ตารางในการออกแบบ Webpageมีผู้คนที่เริ่มออกแบบเว็บเพจหลาย ๆ คน มักมีปัญหาในการใช้งานตารางในการออกแบ...  


Copyright ©2003-2016 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*