SMF & Programmer > Programmer

Fixed Layout CSS + HTML

(1/1)

Admin:
เป็นรูปแบบการกำหนดโครงสร้างการแสดงผลเว็บเพจแบบตายตัวคือ กำหนดค่าของหน่วยต่างๆลงไปใน CSS แบบพิกเซล เช่นความกว้างของหน้าเว็บเพจ เป็นต้น .... ซึ่งข้อเสียของการกำำหนดรูปแบบนี้คือ เมื่อนำเว็บเพจไปเปิดบนหน้าจอที่มีความละเอียดต่างกันจะทำให้เกิดพื้นที่ว่างที่ไม่ได้ถูกใช้งานมากเกินไป แต่ถ้าขนาดของหน้าจอมีความละเอียดน้อยเกินไปจะทำให้ลำบากต่อการอ่านข้อมูล เพราะไม่สามารถแสดงข้อมูลได้ทั้งหมดต้องอาศัย Scroll Bar ให้ช่วยเลื่อนชมข้อมูลในเว็บเพจ การกำหนดโครงสร้างแบบ Fixed จะมีประโยชน์ในกรณีที่ไม่ต้องการให้รูปแบบของข้อมูลในเว็บเพจเปลี่ยนแปลงไปจากเดิมถึงแม้จะเปิดบนหน้าจอที่มีความละเอียดต่างกันก็ตาม

FixedLayout.html

--- โค๊ด: ---<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>

--- End code ---

นำร่อง

[0] ดัชนีข้อความ

Go to full version