สร้างขอบมนเพื่อใช้ในเว็บแบบเต็มๆ
Date : 25:06:03
| By : HardcoreGraphic
ไม่ได้เขียนวิธีการออกแบบเว็บไซท์มานาน...คราวนี้ผมจะสอนวิธีทำขอบแบบมน เพื่อใช้ในงานเว็บไซท์ วิธีการไม่ยาก อาศัย
เทคนิคเพียงเล็กน้อยเท่านั้นเอง...อ้อ แต่ต้องบอกก่อนว่า เทคนิคการทำขอบมนเพื่อใช้ในเว็บ ขึ้นอยู่กับแต่ละคนนะครับ บาง
ท่านอาจจะมีวิธีการแบบอื่นที่ต่างไปจากวิธีในบทความนี้ก็ได้...ของแบบนี้อยู่ที่กึ๋นครับ ลองดูตัวอย่างที่เราจะลองสร้างด้วย
โปรแกรม Dreamweaver หรือใครจะใช้โปรแกรมสร้างเว็บตัวอื่นก็ได้นะครับ ไม่ผิดกติกา
ขอบแบบภาพด้านซ้ายมือ จะเป็นแบบเจาะเพื่อให้เราสามารถพิมพ์ข้อความใดๆลงไป
เทคนิคจะใช้ Table แบ่ง Column และ Rows ให้พอดีๆ และอาศัยไฟล์ใสๆ หรือที่
เรียกกันว่า Spacer เพื่อใช้ในการทำให้ตารางมันอยู่ตัว ไม่บิดเบี้ยว หรือผิดรูป
ผมจะใช้พื้นแบ๊คกราวน์เป็นสีขาว หากเว็บใครใช้สีอื่นก็เปลี่ยนพื้นหลังเป็นสีอื่นซะ
วิธีทำให้ใช้ Photoshop สร้างกรอบรูปสี่เหลี่ยม
แบบมนขึ้นมา แล้ว Stroke ขอบสีอะไรก็ได้ 1
pixels (ใครต้องการขอบหนา ก็เพิ่มจำนวนไป)
จากนั้นให้เราลากเส้น Guides ใครไม่มีให้กด Ctrl + R
เพื่อให้โชว์แถบไม้บรรทัด แล้วคลิกค้างจากขอบดึงเส้นไกด์ออกมาตัดบริเวณมุมให้พอดีๆ เป๊ะๆ ทั้งแนว
ตั้งและนอน รวมทั้งหมด 4 เส้น ตามรูปด้านล่าง
ทีนี้ให้ใช้เครื่องมือ Slice คลิกรูปมีดที่ Tool Box
แล้วไปที่เมนู view > snap เพื่อเวลาเราตัดภาพ มันจะทำการ
ดูดติดกับเส้นไกด์โดยอัตโนมัติ ไม่งั้นอาจจะคลาดเคลื่อนได้
ทำการแบ่งตามมุม โดยคลิกเมาส์ลากสร้างกรอบสี่เหลี่ยมคลุม
บริเวณแต่ละมุม ให้ครบ 4 มุม โปรแกรมจะแสดงตัวเลขสไลด์
หมายถึง..คุณได้ทำการตัดภาพไปแล้วกี่ภาพ (ส่วนของสไลด์อัน
ไหนที่มีตัวเลข แล้วมีรูปสัญลักษณ์ สี่เหลี่ยมแล้วมีรูปโซ่ต่อท้าย
หมายถึงว่า คุณยังไม่ได้ทำการตัดภาพในช่องนี้จริงๆ)
จากนั้นให้คลิกรูปมีดค้างไว้ แล้วเลือก Slice Select tool
อุปกรณ์ตัวนี้จะต่างกับ Slice tool ธรรมดา ตรงที่ มันจะใช้สำหรับ
คลิกเลือกภาพที่เราทำการตัดไปแล้วเท่านั้น ให้คุณคลิกเลือก
ที่มุมบนซ้ายก่อน แล้วไปที่เมนู File > Save for web คลิกที่แถบ 2 up เพื่อเปรียบเทียบการบีบอัดขนาดไฟล์ แล้วปรับตรง
Setting ให้เป็น GIF ส่วนช่อง Color ในกรณีนี้มีเพียง 2 สีเท่านั้นในภาพ ก็กำหนดเป็น 4 color ก็ได้ เพราะไม่มีผลต่อขนาด
ไฟล์แล้ว เนื่องจากไฟล์เล็กมาก และใช้สีน้อย
กดปุ่ม Save ทำการตั้งชื่อเรียงลำดับให้ดีๆ จะได้จำได้ เนื่องจากมันมี 4 มุม ล่าง บน ตั้งเอาเองละกันนะครับ ให้ทำตามวิธีด้านบน
เซฟให้ครบทุกมุม คุณจะได้ 4 ไฟล์ เพื่อไปประกอบในโปรแกรม Dreamweaver แล้ว
ให้คุณเปิดโปรแกรม Dreamweaver แล้วสร้าง Table ขนาดกว้าง 400 Pixels และจำนวน Column 3 x Rows 3
ตรงตัวเลข จะแสดงให้เห็นถึงตำแหน่งที่คุณจะนำไฟล์มุมทั้ง 4 ไฟล์ไปใส่ในช่องดังกล่าวให้ครบ
Insert รูปมุมสี่เหลี่ยมลงไปให้ครบทั้ง 4 มุม
ให้กำหนดช่อง TD ในตารางให้มีขนาดเท่ากันกับขนาดของไฟล์ในแต่ละช่อง เช่น ในตัวอย่างผมกำหนดช่องมุมซ้ายบนสุด
เป็นกว้าง 10 ยาว 10 pixels ซึ่งจะมีขนาดเท่ากับรูปพอดีๆ ** TD คือช่องของคอลัมน์ในตาราง
หลังจากกำหนดขนาดในช่อง TD ครบทุกมุม ตารางจะถูกยึดให้เข้ากับมุม แต่ยังไม่เสร็จนะครับ นี่แค่จุดเริ่มของความมัน
ให้คุณแบ่ง Rows ในช่อง TD ตรงช่องกลาง ทั้งบนและล่าง ออกเป็นช่องละ 2 Rows
ผลที่ได้จะประมาณรูปล่าง หลังแบ่ง Rows
ให้คุณสร้างไฟล์ใส (Spacer) เพื่อใช้ยึดตารางให้อยู่กับที่ ขนาด 1 x 1 Pixel เป็นไฟล์ Gif ว่างเปล่าเลย
เราจะเริ่มทำขอบบนของตารางด้านบนกันก่อน เปลี่ยนสีแบ๊คกราวน์ให้เป็นสีดำ (สีเดียวกับขอบมน) แล้วใส่ไฟล์ใสลงไป
จากนั้นกำหนดความสูงของช่องนี้ให้เป็น 1 Pixel
เนื่องจากขนาดของรูปขอบมนด้านบนมีความสูงเท่ากับ 10 Pixels ทั้ง 2 ด้าน (ซ้าย ขวา) ฉะนั้นคุณจึงต้องกำหนดความสูงของ
ช่อง TD ด้านล่าง (ถัดลงมาจากช่องที่คุณใส่สีดำเมื่อสักครู่) ให้เท่ากับ 9 Pixels เพราะด้านบนคุณกำหนดไปแล้ว 1 จึงขาดอีก
9 จึงจะมีความสูงเท่ากับไฟล์รูปขอบมนครับ อย่าเพิ่งงง ค่อยๆทำความเข้าใจ แล้วนำไฟล์ Spacer ยัดลงไปในช่องที่สูง 9 Pixels
ด้วย แล้วกำหนด Properties ของ Spacer ช่องนี้เป็นสูง 9 Pixels เช่นกัน ตารางจะยึดติดกันทันทีตามรูปล่าง
คราวนี้ใช้วิธีการเดียวกันกับช่อง TD 2 Rows ด้านล่างตรงกลางอีกเช่นกัน ตารางจะยึดกันพอดีๆตามค่าที่คุณได้กำหนด
หลังจากได้ขอบบนและล่างแล้ว ต่อไปก็ทำขอบด้านซ้าย ขวา กันบ้าง วิธีการก็แบ่ง Column ในช่องเซลล์ด้านซ้ายและขวาออก
เป็นช่องละ 2 Column เช่นกัน วิธีการจะคล้ายกับการทำขอบบนล่าง
คุณจะได้คอลัมน์ในแถวกลางเป็น 5 คอลัมน์ตามรูป
ใส่ไฟล์ spacer ลงไปในช่องซ้ายมือสุด กำหนดความกว้างของไฟล์ spacer เป็น 1 และกำหนดความกว้างของช่องเซลล์เป็น
1 เช่นกัน แล้วอย่าลืมเปลี่ยนสีแบ๊คกราวน์ของช่องเป็นสีดำด้วย
แล้วให้ใส่ไฟล์ Spacer ลงในช่อง td เบอร์ 2 กำหนดความกว้างเป็น 9 pixels ทั้งไฟล์ spacer และช่อง TD ตารางจะเริ่มปรับ
สภาพให้ยึด เริ่มดูมีเค้าโครงขึ้นเรื่อยๆ...
ให้คุณทำแบบเดียวกันกับฝั่งขวามือเช่นกัน ตารางจะได้ขนาดพอดีกับตัวเลขที่คุณกำหนด
เหลืออีกนิดนึง ให้คุณกำหนดความกว้างของช่องเซลล์ตรงกลางลงไปด้วย เป็นขนาดที่เหลือทั้งหมด เช่น ถ้าไฟล์ขอบมนมี
ความกว้างฝั่งละ 10 Pixels แล้วตารางทั้งหมดของคุณกว้าง 400 Pixels ก็ลบออก 20 จะเหลือ 380 Pixels ให้คุณกำหนดค่า
นี้ลงไปในช่องกลางด้วยครับ ....ลองพิมพ์ข้อความลงไป เสร็จแล้วลอง Preview ดูในเว็บ Browser
**
นี่ก็เป็นวิธีหนึ่งในการสร้างขอบมนไปใช้ในการสร้างความสวยงามให้กับเว็บไซท์ของคุณ... หวังว่ายังไม่มึนตึบนะครับ
อ่านบทความอื่นเพิ่มเติม
+ HardcoreGraphic 7.0 Sponsored by
Elife.co.th
Copyright©2002-2008 www.hardcoregraphic.com All rights reserved
