<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jaidee Hosting Blog&#187; Hybrid Layout</title>
	<atom:link href="http://blog.jaideehosting.com/tag/hybrid-layout/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.jaideehosting.com</link>
	<description>เป็นแค่แหล่งอัดเดทข้อมูลข่าวสาร</description>
	<lastBuildDate>Fri, 29 Jul 2011 05:15:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>การจัด Layout ด้วย CSS (Div)</title>
		<link>http://blog.jaideehosting.com/2009/10/02/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%88%e0%b8%b1%e0%b8%94-layout-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-div/</link>
		<comments>http://blog.jaideehosting.com/2009/10/02/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%88%e0%b8%b1%e0%b8%94-layout-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-div/#comments</comments>
		<pubDate>Fri, 02 Oct 2009 10:15:01 +0000</pubDate>
		<dc:creator>suthamas</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[div]]></category>
		<category><![CDATA[Elastic Layout]]></category>
		<category><![CDATA[Fixed Layout]]></category>
		<category><![CDATA[Hybrid Layout]]></category>
		<category><![CDATA[Liquid Layout]]></category>
		<category><![CDATA[การจัด Layout ด้วย CSS]]></category>

		<guid isPermaLink="false">http://blog.jaideehosting.com/?p=280</guid>
		<description><![CDATA[การจัด Layout ด้วย CSS (Div) แบ่งเป็น 4 แบบ คือ 1. Fixed Layout จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่ 2. Liquid Layout จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม ข้อดี คือ ทำให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ และทำให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดี ข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทำได้ค่อนข้างยาก เพราะขนาดไม่แน่นอน 3. Elastic Layout จะกำหนดขนาดของส่วนต่าง ๆ เป็น [...]]]></description>
			<content:encoded><![CDATA[<p>การจัด Layout ด้วย CSS (Div) แบ่งเป็น 4 แบบ คือ</p>
<p><strong>1. Fixed Layout </strong><br />
จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่</p>
<p><strong>2. Liquid Layout</strong><br />
จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์   เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์  ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>
<p><strong>ข้อดี</strong> คือ ทำให้ได้ใช้พื้นที่ในหน้าจอได้อย่างมีประสิทธิภาพ  และทำให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดี</p>
<p><strong>ข้อเสีย</strong> คือ  การจัดวางองค์ประกอบต่างๆ นั้นทำได้ค่อนข้างยาก  เพราะขนาดไม่แน่นอน</p>
<p><strong>3. Elastic Layout</strong><br />
จะกำหนดขนาดของส่วนต่าง ๆ เป็น em  ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์</p>
<p><strong>ข้อดี</strong> คือ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว  ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี</p>
<p><strong>ข้อเสีย</strong> คือ การจัดทำยุ่งยาก</p>
<p><strong>4. Hybrid Layout </strong><br />
เป็นการใช้แบบต่างๆ มาผสมกัน  เช่น Sidebar ด้านข้าง ทั้ง 2 ด้านเป็น Elastic Layout ส่วนเนื้อหาเป็น  Liquid Layout  เป็นต้น</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.jaideehosting.com/2009/10/02/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%88%e0%b8%b1%e0%b8%94-layout-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-div/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

