Thaigraph

 

   

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

กำหนดสัดส่วนของเวปด้วย Pixels images

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:21 |แสดงโพสต์ทั้งหมด

เป็น images ที่มีลักษณะโปร่งใส่ ไม่มีสีสรร แต่มีขนาด ที่สามารถกำหนด สัดส่วน และ ระยะช่องไฟภายในเวปได้ทำให้เวป มีสัดส่วนที่แน่นอน และสามารถดัดแปลงได้ดั่งใจ อันนี้ก็คือ ความสามารถของ pixels images เราลองมาดูวิธีการทำและนำมาใช้ประโยชน์ในเวปกันดีกว่า pixels images เป็น images ที่ทำจากโปรแกรม Photoshop ซึ่งเป็นพื้นที่งานแบบโปร่ง โดยวิธีการสร้าง เริ่มจาก มาที่ File ---> New แล้วให้เลือก Contents แบบ Transparent

 

 

 

 

จากนั้นเราก็จะได้ไฟล์ ที่มีพื้นหลังแบบโปร่งดังตัวอย่าง. หลังจากนั้นเราก็ทำการ save for web แบบ gif ดังตัวอย่าง.

 

 

 และแล้วเราก็ได้ไฟล์ pixels_img.gif ที่มีลักษณะพื้นโปร่งไม่มีสีสรร แต่มีขนาด เพื่อไปใช้กำหนดเวปให้ตายตัว เอาหละเราลองมาดูวีธีการนำไปใช้กัน...

 

1.ใช้สำหรับกำหนดระยะห่างระหว่างบรรทัดในเวป โดยการสร้างตารางแล้วทำการ insert images พื้นโปร่งหรือไฟล์รูปภาพที่ชื่อ pixels_img.gif ลงในตารางที่เราสร้างดังตัวอย่าง.

 

 

การใช้ pixels_img.gif กำหนดความสูงของ table จะทำให้ลักษณะความสูงของ table ตายตัวไม่ว่าจะเปิดใน Browserไหนก็ตาม ในการกำหนดความสูงนั้น ถ้าใช้Dreamweaver หรือโปรแกรมอื่นๆ ทำได้โดยการคลิ๊กที่รูปภาพ จากนั้นจะมี Properties สำหรับแก้ไขปรับเปลี่ยนขนาดรูปภาพขึ้นมา ดังตัวอย่าง.

 

 

W = ความกว้างของ images H = ความสูงของ images เราสามารถปรับความกว้างต่างๆ โดยใส่ค่าตัวเลขลงไป ถ้าใครทำเวปมามีคนมักจะบอกว่าอย่าทำการยืดหรือหดรูปภาพจะทำให้ดูไม่สวย แล้วหละก็ สำหรับ pixels_img.gif นี้แล้วหละก็ ยืดและหดเท่าไหร่ไม่น่าเกลียดหละ เพราะมันไม่มีลวดลายและรูปร่าง เพียงแต่มีแต่ขนาดท่านั้น... 2. สามารถใช้กับ background images ได้ทุกชนิด เนื่องจากเป็นรูปภาพแบบโปร่งเมื่อเราทำการใส่พื้นหลังเป็นรูปภาพ ก็สามารถทะลุ ไฟล์ pixels_img.gif ได้เลยโดยไม่มีการแสดง รูป

 

ภาพออกมาเพราะ มันโปร่งใส่ ดังตัวอย่างการใช้. แล้วเมื่อทำการดูจาก Browser ผลออกมาจะได้ดั่งภาพ.

 

 

จะสังเกตได้ว่าดูเหมือนรูปภาพมากไม่ดูเหมือนพื้นหลัง และความสูงก็คงที่ เพราะ pixels_img.gif กำหนดความสูงที่ตายตัวเอาใว้

3. สามารถกำหนดช่องไฟ หรือ ระยะห่างสัดส่วนของเวปได้ ช่องไฟ หรือ ระยะห่างของสัดส่วนของเวปทำให้เวปดูดีมีระเบียบยิ่งขึ้น เราสามารถใช้ pixels_img.gif กำหนดระยะห่างของเวปให้ตายตัวโดยการกำหนดความกว้างของของ images ดังตัวอย่าง.

 

 

 เช่นกันสามารถใส่พื้นหลังรูปภาพไปได้อีกเช่นกัน ทั้งนี้ต้องปรับขนาดความกว้างของ pixels_img.gif ให้เท่ากับความกว้างของพื้นหลังรูปภาพ ยกตัวอย่างไฟล์ พื้นหลัง มีควากว้าง 3 เราตั้งปรับขนาดความกว้างของ pixels_img.gif เท่ากับ 3 เช่นกัน เมื่อทำการดูจาก Browser จะเห็นแต่พื้นหลังแต่ไม่เห็นไฟล์ pixels_img.gif ดังตัวอย่าง.

 

 

เป็นไงบ้างขอรับ พอจะรู้ถึงประโยชน์ของไฟล์รูปภาพแบบโปร่งหรือยังขอรับ ว่าเอาไปใช้กับเวปได้ยังไง ทีนี้คงสามารถปรับสัดส่วน เวปได้ดั่งใจและตายตัวด้วย pixels_img.gif ได้นะขอรับ...

 

ขอปัญญาเกิดแด่ท่าน ธนา mastertana


Thaigraph

GMT+7, 18-6-2019 15:46 , Processed in 0.042768 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