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



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

เรื่องของ !DOCTYPE ในเว็บเพจ

เรื่อง : DOCTYPE ในโค้ดเว็บเพจคืออะไร ? มีใครใช้โปรแกรม Dreamweaver หรือโปรแกรมสร้างเว็บเพจใด ๆ แล้วสังเกตกันบ้างไหมว่า โ...  

Insert รูปภาพกับ Dreamweaver แล้วรูปไม่แสดงที่ Browser

เรื่อง : ใช้ Dreamweaver แทรกรูปภาพแล้วรูปไม่แสดงที่ Web Browser คำถามที่ผมมักจะพบอยู่บ่อย ๆ กับการใช้งาน Dreamwe...  

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

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

เริ่มต้นมี Website กะเขาบ้าง

เรื่อง :: เริ่มต้นมี Websiteเห็นผู้เข้ามาเยี่ยมชมเว็บบอกกันมามากว่า...ไม่รู้จะเริ่มต้นมี web บน Internet นี้อย่างไร ...  


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

*
*
*