Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip หลักการข้างนอก Pixels ข้างใน % ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 2259|ตอบ: 0
go

หลักการข้างนอก Pixels ข้างใน %

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:32 |แสดงโพสต์ทั้งหมด
<IMG hspace=10 src="http://www.thaigraph.com/training/fixtable/minifixtable.gif" align=left border=1>มือใหม่หัดทำเวปหลายท่านต้องมีปัญหานี้แน่นอน เพราะธนาก็เคยเจอมาแล้วครั้งเมื่อสามสี่ปีที่แล้ว ก็ศึกษาหาหนทางจนกลายเป็นประสบการณ์มาเล่าสู่กันฟังหลักวิธีการนี้จะทำให้เวป ท่านไม่ผิดเพี้ยนเวลาแสดงเวปในความละเอียดหน้าจอต่างๆ
<P>หลักการ Table อีกอย่างหนึ่งที่ไม่สามารถมองข้ามกันได้คือ ข้างนอก Pixels ของใน % ค่าสองตัวนี้บางคนก็ใช้เป็น % บางคนก็ใช้เป็น Pixels เราลองมา ดูกันว่าแต่ละแบบมันมีประโยชน์และความสำคัญ ข้อดีข้อเสียอย่างไร .... <B>รู้จักค่า % และ Pixels</B> เริ่มมาดูกันที่ค่า % กันก่อนหละ ค่า % จะเป็นค่าที่มีความอิสระ ค่ามาตรฐาน ที่ใช้กันคือ 100% ค่านี้จะทำการขยายตัวเต็มที่ของ Table ภายในเนื้อที่เวปๆ หนึ่ง ถ้าเราทำการกำหนดค่าเป็น 100% ดูตัวอย่างการแสดงผลในพื้นที่เวป </P>
<P>&nbsp;</P>
<P><IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/100percen.jpg" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>จากภาพ เมื่อเราให้ค่าความกว้าง (Width) เป็นแบบ % จะครอบคุมพิ้นที่เวปของเรา เต็มที่จากจุดหนึ่งไปยังจุดหนึ่งได้สุด จะทำให้มีความอิสระและยืดหยุ่นสูงทีเดียว แต่ขาดความแน่นอนคงที่ มาเข้าใจค่า pixels กันเถอะ ค่านี้จะใช้ในกรณีค่าเกิน 100% ขึ้นไปและมีความละเอียด สูงและค่าจะมีความคงที่และตายตัว ทำให้เราสามารถควบคุมขนาดความกว้างของ Table ได้ตายตัวและดั่งใจ ตามที่เราต้องการได้ และได้ตำแหน่งของเวปที่แน่นอน แต่ค่านี้ มีข้อเสียอยู่คือขาดความอิสระไม่สามารถยืดหยุ่นได้ ดูตัวอย่างการใช้ค่า Pixels </P>
<P>กับ Table</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/780pixels.jpg" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>จากภาพ เมื่อเราให้ค่าความกว้าง (Width) เป็น Pixels แล้ว Table จะจัดตัวอยู่ตรงกลางของพื้นที่พอดี แต่จะทำให้ตำแหน่ง Table คงที่และยืดหยุ่นน้อย <B>กรณีใดที่จะใช้ค่า % และ Pixels</B> กรณีใดที่จะใช้ค่า % ในการซ้อน Table ถ้าเราต้องการให้พื้นที่หรือตำแหน่งเต็มพอดีตามขนาดความกว้างของ Table หนึ่ง Table นั้น ควรจะซ้อน Table นั้นๆ ลงไป</P>
<P>แล้วให้ค่าเป็น %</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/100percen.jpg" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>จากภาพเมื่อเราทำการสร้าง Table เพื่อแบ่งสัดส่วยของเวปเป็น 3 ส่วนแล้วได้แก่ <B>ส่วนที่1.</B>ข้อมูลเมนูของเวป (ตายตัว) <B>ส่วนที่2.</B> ช่องไฟแบ่งระยะห่างของพื้นที่ในเวป (ตายตัว) <B>ส่วนที่3.</B> ส่วนของข้อมูลที่จะเอาข้อมูลต่างลงในเวป (เปลี่ยนแปลงตามข้อมูล) แน่นอนถ้าเราจะใส่ข้อมูลให้พอดีกับพื้นที่โดยการซ้อน Table ลงไปที่ส่วนที่3. เราก็จะเลือกใส่ </P>
<P>Table และใช้ค่า ความกว้าง (Width) เท่ากับ % จะได้เต็มพื้นที่ ในตำแหน่งส่วนที่ 3 พอดี ดังตัวอย่าง.</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/table3width100p.jpg" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>กรณีใดที่จะใช้ค่า Pixels ในการซ้อน Table ถ้าเราต้องการต่ำแหน่งคงที่ตามที่เราต้องการ เช่น ตรงกลาง ด้านข้าง ซ้ายขวา หรือตำแหน่งตำแหน่งหนึ่งนั้น เรามักจะนิยมใช้ค่า </P>
<P>&nbsp;</P>
<P>Pixels เป็นตัวกำหนด ดังตัวอย่างการใช้ค่า Pixels</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/table150pixels.gif" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>จากภาพเมื่อเราต้องการใส่ข้อมูลลงไปโดยการซ้อน Table ลงไปใน Table 100% ที่เราแทรกลงไป แต่ต้องการให้ไม่ให้อึดอัดเบียดกันเกินไปในข้อมูลต้องการมีช่องไฟ ให้ดูเป็นสัดส่วนสบายตา แล้วหละก็ ค่าที่จะทำการใส่ลงไปต้องเป็น Pixels อย่างแน่นอน <B>หลักวิธีการนำมาใช้อย่างมีระบบทำให้เวปมีรูปแบบที่ตายตัว (นำมาประยุกต์ให้สัมพันธ์กัน)</B> อย่างที่ได้กล่าวมาข้างต้นนั้นที่ใช้หลักการ ข้างนอก Pixels ข้างใน % จะทำให้รูปแบบเวปคงที่และตายตัว ไม่บิดเบี้ยวนั้นมีหลักวิธีการยังไงและสะดวกและง่ายต่อการควบคุมเวปยังไงนั้นเราลองมาดูกระบวนการทำ กันเลย ... <B>หลักการนำมาใช้</B> 1.เมื่อเราทำการสร้างระบบเวปเป็นส่วนๆ แล้ว แนะนำให้ทำการกำหนดให้เป็น Pixels ก่อน เวปจะมีลักษณะ</P>
<P>&nbsp;</P>
<P>เป็นชั้น เป็นขั้นซ้อนกันดังตัวอย่าง. </P>
<P>&nbsp;</P>
<P><IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/sizeweb.gif" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>จากภาพจะเห็นว่าเราจะแบ่งส่วนเวปออกเป็นสามส่วนดังนี้ 1.ส่วน Head หรือ Top คือ ส่วนด้านบนสุดของเวปนั้นเอง 2.ส่วน Datainfo คือ ส่วนที่เป็นข้อมูลของเวปนั้นเอง 3.ส่วน Footer คือ ส่วนล่างสุดของเวป ทั้งสามส่วนของเวปนี้ค่าความกว้างจะเท่ากับ pixels คือ 760 pixels นั้นเอง ซึ่งถ้าเราต้องการ ปรับเปลี่ยนค่าของเวปเราเองต้องจำเป็นที่ต้องไปเปลี่ยนค่า Table ทั้งสามส่วนให้เท่ากันทุกครั้ง 2.ในการแก้ไขที่รวดเร็วคือการรวม Table ให้เป็นหนึ่งโดยไม่แยกจากกัน ให้เราทำการเลือก Table ทั้งหมดโดยกดปุ่ม Ctrl + A (เคอเซอร์ต้องอยู่ด้านนอกของ Table ทั้งหมด) แล้วทำการ กดปุ่ม Ctrl + X เพื่อคัด Table ออกไปก่อน (แต่ไม่ได้หมายความว่าลบออก) จากนั้นให้ทำการสร้าง Table ใหม่โดยกำหนด ค่าเป็น Pixels ตามค่า Table ที่เราตั้งคือ 760 pixels หลังจากนั้นให้ เอาเคอเซอร์อยู่ใน Table แล้วทำการ Ctrl + V Table ทั้ง 3 จะมาอยู่ใน Table ที่เราตั้งใหม่ดังตัวอย่าง. (ที่ใส่สีแดงเพราะต้องการให้เป็นตำแหน่ง แต่ปกติ Table ข้างนอกสุดจะไม่นิยมใส่สีลงไป)</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/sizeweb2.gif" vspace=3 border=0> </P>
<P>&nbsp;</P>
<P>3. กระบวนการสุดท้ายคือ ปรับ Table ตั้ง 3 ส่วนให้เป็น 100% จาก 760 Pixels ให้หมด ให้ Pixels มีแค่ Table ด้านนอกสุดที่เราสร้างขึ้นใหม่เท่านั้น คราวนี้ระบบเวปก็จะเป็นหนึ่ง เพราะทั้ง 3 Table กลายเป็นส่วนประกอบของ Table หลักหรือ Table ข้างนอกสุด ถ้าเราต้องการ ให้ความกว้างเวปเปลี่ยนแปลง เราก็ปรับแค่ Table ข้างนอกเท่านั้น ส่วน Table ข้างใน (ทั้ง 3) จะ ยึดพร้อมกันตามความกว้างของ Table ข้างนอกที่เรากำหนด คราวนี้สัดส่วนเวปก็จะไม่เพี้ยนอีกต่อไป ปล. ถ้าเราต้องการปรับเปลี่ยนไอย่างรวดเร็วดดยการใช้ html แล้วหละก็ให้ทำการคลิ๊กขวา ที่ตำแหน่ง พื้นที่ว่างของเวปแล้วมาที่คำสั่ง View Source ให้ปรับเปลี่ยนค่า Widht ของ Table แรกตามที่เราต้อง การแล้วทำการ Save </P>
<P>&nbsp;</P>
<P>และ Uplaod ทับไปเวปก็จะเปลี่ยนไปตามความกว้างที่เราต้องการ</P>
<P>&nbsp;</P>
<P>&nbsp;<IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/source.gif" vspace=3 border=1> </P>
<P>ตัวอย่างการทำ Table ให้ตายตัว แล้วแสดงผลในหน้าจอที่ต่างกันทำให้เวปรูปร่างเวปไม่ผิดเพี้ยนเป็นระบบ </P>
<P>&nbsp;</P>
<P><A href="http://www.thaigraph.com/designweb/egg/index.html" target=sample><IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/web800_600.jpg" vspace=3 border=1></A></P>
<P>&nbsp;</P>
<P>ดูในหน้าจอที่มีความละเอียดเท่ากับ 800*600 </P>
<P>&nbsp;</P>
<P><A href="http://www.thaigraph.com/designweb/egg/index.html" target=sample><IMG hspace=3 src="http://www.thaigraph.com/training/fixtable/web1024.jpg" vspace=3 border=1></A></P>
<P>&nbsp;</P>
<P>ดูในหน้าจอที่มีความละเอียดเท่ากับ 1024*768 จากหลักการข้างนอก Pixels ข้างใน % จะทำให้เวปเรามีความคงที่ไม่บิดเบี้ยวไม่เคลื่อนออกจากกันเพราะ มีการรัดโดย Table ข้างนอกที่เป็นโครงสร้าง Table ภายนอก และคอยควบคุม Table ที่เป็นโครงสร้างภายใน อยู่ ลักษณะนี้ทำให้เวปโหลดข้อมูลมาพร้อมกันหมดในเวลาอันใกล้เคียง ทำให้คุ้มค่ากับการรอคอย ... เป็นไงขอรับนี่ก็เป็น ศาสตร์ อย่างหนึ่งในการทำเวปหละและยังมีอีกหลายอย่างทีเดียวที่เราจะทำให้เวปสมบูรณ์ได้แต่จะทำให้เวปดูสวยงามต้องพึ่ง ศิลป แล้วหละ เพราะซะนั้นการทำเวปจำเป็นต้องมีทั้ง ศาสตร์และศิลป ในเวปจึง จะทำให้เวปสมบูรณ์แบบได้ ทั้งนี้ขึ้นอยู่กับการฝึกฝนและการเข้าใจและการสร้างสรรค์ของเราเอง .... ขอปัญญา</P>
<P>&nbsp;</P>
<P><STRONG>เกิดแด่ท่าน ธนา mastertana</STRONG> </P>

Thaigraph

GMT+7, 17-10-2019 13:35 , Processed in 0.054710 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books