About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%80%E0%B8%9E%E0%B8%88%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B9%81%E0%B8%AA%E0%B8%94%E0%B8%87%E0%B8%81%E0%B8%A5%E0%B8%B2%E0%B8%87%E0%B8%88%E0%B8%AD 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



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

ทำอย่างไรให้ Google หาเว็บไซต์เจอ?

เรื่อง: แนวคิดการทำอย่างไรให้ Google หาเว็บไซต์เราเจอ ? ทำอย่างไรให้ Google หาเว็บไซต์เราเจอ...ทำอย่างไรให้เว็บเราขึ้นหน้าห...  

สิ่งที่ควรคิดก่อนการจัดทำ Website

เรื่อง : สิ่งที่ควรคิดก่อนการจัดทำ Website สัก 1 เว็บ การที่ Website หรือ Internet เข้ามามีบทบาทในสังคมเราทุกวันนี้ ได้นำ...  

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

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

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

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


Copyright ©2003-2019 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

*
*
*