Thaigraph

 

   

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

เทคนิคการสร้างเส้นประในหน้าเว็บเพจ

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:14 |แสดงโพสต์ทั้งหมด
สวัสดีครับ กลับมาพบกันอีกครั้งนะครับ หลังจากที่ผมหายหน้าหายตาไปนาน ตอนนี้ก็กลับมารายงานตัวเรียบร้อยแล้ว พร้อมกับนำบทความดี ๆ มาฝากเช่นเดิมครับ ในคราวนี้ ผมได้นำ Photoshop 7 มาประยุกต์ กับ DreamWeaver MX ซึ่งเป็นโปรแกรมในการสร้างเว็บเพจ ที่เป็นที่นิยมมาก ๆ โปรแกรมหนึ่ง โดยผมจะสร้างเส้นประใน DreamWeaver MX ครับ (ความจริงไม่ว่าจะเป็น Photoshop หรือ DreamWeaver เวอร์ชั่นใดก็สามารถใช้เทคนิคนี้ได้ทั้งนั้นนะครับ ไม่ต้องวอรี่) มาติดตามกันดูว่าจะง่าย ขนาดไหน

ขั้นแรก ให้เปิดโปรแกรม Photoshop ขึ้นมาก่อน แล้วคลิ๊ก File>New... แล้วตั้งค่าตามนี้นะครับ

เมื่อได้ไฟล์ใหม่มาแล้ว ให้ใช้เครื่องมือ Rectangular Marquee Tool (จำกันได้ไหมเอ่ย ถ้าจำไม่ได้ก็กลับไปอ่านของเก่าได้ครับ) เลือกพื้นที่เป็นบริเวณ 1 pixel ดังรูปครับ

แล้วคุณก็เติมสีที่ต้องการลงไปในพื้นที่ที่เลือกไว้ดังรูป

ความจริงแล้วคุณแค่ใช้พู่กันระบายสี ให้ได้พื้นที่ 1 pixel ก็ได้นะครับ ไม่ต้องทำสองสามขั้นตอนแบบผมก็ได้ แต่ผมมันถนัดแนวนี้น่ะครับ เสร็จแล้วเราก็เซฟไฟล์ภาพนี้ให้เป็น gif ครับ โดยจะใช้วิธีใดก็ได้ อันนี้ขอข้ามไปนะครับ ถือว่าทำได้แล้ว

ทีนี้เราก็มีไฟล์ภาพพร้อมสำหรับการทำเส้นประแล้วล่ะครับ ต่อไปผมจะขออธิบายภาพรวมของการทำเส้นประใน โปรแกรม DreamWeaver ก่อนนะครับ เพื่อที่คุณจะได้มองภาพของการทำออก อ่านต่อไปจะเข้าใจได้ง่าย หลักการก็คือ เราสร้างภาพที่มีความกว้าง 1 Pixel ไว้ และมีสีอยู่ 1x1 ตารางpixels จากนั้นก็ไปสร้างตารางใน DreamWeaver พื้นที่ไหนที่เราต้องการเส้นประ ให้กำหนดความกว้างของตารางนั้นให้เป็น 1 Pixel แล้วกำหนดให้ตารางช่องนั้นมีพื้น background เป็นรูปที่เราสร้างขึ้นไว้นั่นเองครับ แค่นี้เราก็จะสร้างเส้นประได้แล้วครับ แต่... ในทางปฏิบัตินั้น มันมีขั้นตอนที่ลึกลับซับซ้อนกว่านั้นครับ ไปลองดูกันดีกว่าครับ

ทีนี้เราก็มาเปิดโปรแกรม DreamWeaver ขึ้นมา สร้างไฟล์ html ขึ้นมาใหม่ แล้วดูที่ Tool bar ดังรูป

คลิ๊กที่รูปตาราง (ปุ่มที่นูนขึ้นมานั่นแหละครับ) ก็จะมีไดอะล็อก บ็อกซ์ ให้เราเลือกสมมติ ตามรูปด้านล่าง

อธิบายนิดหน่อยแล้วกัน Rows ก็คือ แถวตามแนวนอนครับ ในที่นี้เรากำหนด 2 แถว Columns ก็คือ แถวตามแนวตั้งครับ ในที่นี้เรากำหนด 5แถว Width คือ ความกว้างของตารางทั้งหมด เลือกได้ว่าจะเป็น Pixels หรือ Percent% Border คือ ความหนาของเส้นขอบตาราง เมื่อกำหนดเป็น 0 ก็คือ มองไม่เห็นขอบนั่นเอง Cell Padding คือ ระยะห่างระหว่าง ขอบด้านในของตาราง กับตัวอักษรที่อยู่ในตาราง Cell Spacing คือ ระยะห่างระหว่างขอบนอก(ขอบของตารางใหญ่) กับ ขอบใน (ขอบของแต่ละ cell) หมายเหตุ Cell ก็คือ ตารางเล็ก ๆ ย่อย ๆ ที่อยู่ในตารางใหญ่อีกที ลองสังเกตุดูจากตารางด้านล่างนะครับ

เมื่อใส่ค่าแล้วคลิ๊ก OK ก็จะได้ตาราง ประมาณนี้

ต่อไปให้เอาเมาส์มาคลิ๊กหนึ่งทีที่ด้านซ้ายของตารางแถวบน จะมีกรอบดำ ๆ หนา ๆ ดังภาพนี้ครับ

เสร็จแล้วให้คลิ๊กขวา เลือก Table>Merge Cells ตารางแถวบนทั้งหมดก็จะถูกรวมเป็นตารางเดียว

จากนั้นเราก็ใส่แบนเนอร์สักหน่อย โดยคลิ๊กที่รูป รูปภาพ (ปุ่มที่นูนขึ้นมาอีกเช่นกัน)

รูปที่ใส่เข้ามาจะขอข้ามไปนะครับ มาดูที่สำคัญเลยดีกว่า คือการสร้างเส้นประ ให้ทำความเข้าใจรูปข้างล่างนี้ก่อนนะครับ

ให้เราคลิ๊กที่ Row 2 , Column 1ให้มีเคอร์เซอร์กระพริบอยู่ภายในช่องนั้น จากนั้นให้ดูที่ Properties Box ครับ ดังรูปด้านล่างนี้

ให้ใส่ค่า ตรงตัว W ใส่ความกว้างตามที่ชอบ ของผมใส่ 150 จากนั้นก็ทำขั้นตอนนี้ซ้ำในช่องต่อ ๆ ไปดังนี้ครับ

จากรูปด้านบนเป็น Code View นะครับ โดยเราสามารถดูได้โดยการคลิ๊กที่ปุ่มแรกหรือปุ่มที่สอง ของรูปด้านล่างนี้ครับ

ซึ่งเมื่อคลิ๊กที่ใดก็ตามใน Design View ที่ Code View ก็จะปรากฏเคอร์เซอร์ที่ code นั้นครับ เมื่อรู้แบบนี้แล้ว คุณก็สามารถเข้าไปแก้ที่ Code ได้เลย ครับ ตามรูปด้านบนนั่นแหละครับ

ในบางครั้งถ้าคุณทำงานแต่ใน Design View และใส่ค่าจาก Properties Box อย่างเดียว อาจเกิดปัญหาอย่างในรูปข้างล่างได้คือ ตารางต่าง ๆ ที่เหลือ จะหดไปอัดกันอยู่ด้านหลังหมด

วิธีแก้ให้คุณ คลิ๊กเมาส์ลงใน แถวแรกเลยครับ แล้วกดปุ่ม Tab บนคีย์บอร์ด เคอร์เซอร์ของคุณจะถูกเลื่อนไปในตารางถัดไป คราวนี้คุณไม่ต้องสนใจแล้วว่าเคอร์เซอร์ที่คุณเห็นนั้นมันจะไปอยู่ที่ใด เพราะว่ามองไปก็แยกไม่ออกหรอกครับ ให้คุณใส่ค่าความกว้างของตารางช่องนั้นได้เลยครับ โดยจำไว้ว่า ตารางช่องที่จะทำเป็นเส้นประให้ใส่ค่าเท่ากับ 0 หรือ 1 ครับ (เห็นไหมครับ ตามหลักการมันต้องเป็น 1 Pixel เท่านั้น แต่นี่เป็น 0 ก็ได้) ส่วนตารางที่เหลือก็กำหนดเอาตามใจชอบ

พอคุณแบ่งขนาดตารางได้เรียบร้อย ก็ให้คลิ๊กที่ ช่องตารางที่กำหนดให้เป็นเส้นประครับ ซึ่งอาจจะคลิ๊กยากหน่อย วิธีที่ง่ายกว่าคือให้คุณดูที่ Code View จากนั้นหาบรรทัดที่เป็นตารางที่ต้องการ ดูง่าย ๆ ครับ ที่เขียนว่า "" นั่นแหละครับ เอาเมาส์ไปคลิ๊กหลัง > ครับ แล้วให้เราดูที่ Properties Box ส่วนที่สอง โดยคลิ๊กที่ปุ่มสามเหลี่ยมเล็ก ๆ ทางมุมขวา ก็จะได้ดังรูปข้างล่าง

ทีนี้ก็ให้คุณคลิ๊กที่ เสร็จแล้วก็เลือกรูปที่เราสร้างไว้ ก็จะได้เส้นประหนึ่งเส้นแล้วครับ ทีนี้ก็ทำแบบเดียวนี้กับเส้นอื่น ๆ ครับ โดยเมื่อดูที่ Code View แล้วก็จะได้ดังภาพด้านล่างครับ

ทีนี้ให้สังเกตุที่ บรรทัดที่ 15 และ 17 ในรูปบนนะครับ จะเห็นว่าที่ทางด้านท้ายจะมีตัวนี้อยู่ครับ ซึ่งก็คือ code ของช่องว่างนั่นเองครับ ซึ่งตัวนี้แหละครับที่มักจะก่อให้เกิดปัญหาในการสร้างเส้นประ และการกำหนดให้ตารางมีขนาด 0 หรือ 1 pixel ไม่ได้ ซึ่งจะเกิดขึ้นกับ เว็บบราวเซอร์รุ่นเก่าครับ รวมถึง IE5.5 ด้วย ดังนั้นให้ลบทิ้งไปครับ โดยสามารถไปลบได้ที่ Code View เท่านั้นครับ และถ้าหากใครที่ต้องการให้เส้นประถี่ หรือ ห่างกว่านี้ก็ทำได้โดยการสร้างรูปขึ้นมาตามต้องการ โดยเพิ่มหรือลดขนาดตามยาวครับ

เป็นอย่างไรบ้างครับ การสร้างเส้นประ ใครที่เคยพยายามทำอยู่หลายครั้งแล้วไม่สำเร็จเสียที คราวนี้คงจะกระจ่างล่ะนะครับ สำหรับตัวอย่างของบทความนี้ คลิ๊กที่นี่ ได้เลยครับ


Thaigraph

GMT+7, 16-9-2019 23:21 , Processed in 0.065028 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