อ่าน Naruto 700 แปลไทย, อ่าน One Piece 782 แปลไทย, อ่าน Bleach 622 แปลไทย, อัพเดทข่าวประจำวันและข่าวไอที โหลดเพลง โหลดโปรแกรม คำคมโดนๆ

SMF & Programmer => Programmer => ข้อความที่เริ่มโดย: Admin ที่ มิถุนายน 07, 2012, 03:25:39 pm

หัวข้อ: Fixed Layout CSS + HTML
เริ่มหัวข้อโดย: Admin ที่ มิถุนายน 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>