ผู้เขียน หัวข้อ: Fixed Layout CSS + HTML  (อ่าน 1220 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ Admin

  • Administrator
  • *****
  • กระทู้: 1393
  • Level:
    0%
  • Thank : 61
  • เพศ: ชาย
    • ดูรายละเอียด
    • สะกิดข่าว
Fixed Layout CSS + HTML
« เมื่อ: มิถุนายน 07, 2012, 03:25:39 pm »
เป็นรูปแบบการกำหนดโครงสร้างการแสดงผลเว็บเพจแบบตายตัวคือ กำหนดค่าของหน่วยต่างๆลงไปใน CSS แบบพิกเซล เช่นความกว้างของหน้าเว็บเพจ เป็นต้น .... ซึ่งข้อเสียของการกำำหนดรูปแบบนี้คือ เมื่อนำเว็บเพจไปเปิดบนหน้าจอที่มีความละเอียดต่างกันจะทำให้เกิดพื้นที่ว่างที่ไม่ได้ถูกใช้งานมากเกินไป แต่ถ้าขนาดของหน้าจอมีความละเอียดน้อยเกินไปจะทำให้ลำบากต่อการอ่านข้อมูล เพราะไม่สามารถแสดงข้อมูลได้ทั้งหมดต้องอาศัย Scroll Bar ให้ช่วยเลื่อนชมข้อมูลในเว็บเพจ การกำหนดโครงสร้างแบบ Fixed จะมีประโยชน์ในกรณีที่ไม่ต้องการให้รูปแบบของข้อมูลในเว็บเพจเปลี่ยนแปลงไปจากเดิมถึงแม้จะเปิดบนหน้าจอที่มีความละเอียดต่างกันก็ตาม

FixedLayout.html
โค๊ด: [Select]
<head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0; }
#content {
width: 960px;
background-color: #cccccc; }
#main-content {
text-align: left; }
h2 {
text-align: center;
margin: 10px; }
p {
text-indent: 1cm;
margin: 10px; }
-->
</style>
</head>
<body>
<div id="content">
<div id = "main-content">
<h2>การกำหนดโครงสร้างการแสดงผลเว็บเพจแบบ Fixed </h2>
<p>เป็นรูปแบบการกำหนดโครงสร้างการแสดงผลเว็บเพจแบบตายตัวคือ กำหนดค่าของหน่วยต่างๆลงไปใน CSS แบบพิกเซล เช่นความกว้างของหน้าเว็บเพจ เป็นต้น .... ซึ่งข้อเสียของการกำำหนดรูปแบบนี้คือ เมื่อนำเว็บเพจไปเปิดบนหน้าจอที่มีความละเอียดต่างกันจะทำให้เกิดพื้นที่ว่างที่ไม่ได้ถูกใช้งานมากเกินไป แต่ถ้าขนาดของหน้าจอมีความละเอียดน้อยเกินไปจะทำให้ลำบากต่อการอ่านข้อมูล เพราะไม่สามารถแสดงข้อมูลได้ทั้งหมดต้องอาศัย Scroll Bar ให้ช่วยเลื่อนชมข้อมูลในเว็บเพจ การกำหนดโครงสร้างแบบ Fixed จะมีประโยชน์ในกรณีที่ไม่ต้องการให้รูปแบบของข้อมูลในเว็บเพจเปลี่ยนแปลงไปจากเดิมถึงแม้จะเปิดบนหน้าจอที่มีความละเอียดต่างกันก็ตาม</p>
</div>
</div>
</body>

 
แชร์บทความ...
โค้ดแบบ forum
(BBCode)
โค้ดแบบ site/blog
(HTML)