การแบ่งหน้าเว็บไซต์ ?
ในการ สร้างเว็บไซต์ หากรูปที่เราออกแบบมาทั้งหมดนั้น ไม่ถูกแบ่งออกเลย ถามว่าทำได้มั้ย .. ตอบได้เลยว่าทำได้เช่นกัน แต่เพราะไฟล์รูปเองที่มีขนาดใหญ่ เราจึงต้องแบ่งไฟล์ภาพนั้นออกเป็นไฟล์แต่ละส่วน เพื่อแตกขนาดของภาพก้อนๆหนึ่ง ให้เล็กลง และช่วยกันโหลดได้เร็วขึ้น
สร้างเว็บไซต์ โดย แบ่งรูปย่อยๆ เป็นผลดีแก่ลูกค้าที่เข้ามาชมเว็บเราแล้วไม่เสียเวลาโหลดนานเกินไป เครื่องมือที่ใช้ได้แก่เครื่องมือ Slice ที่จะใช้ตัดแบ่งภาพใน Photoshop ก่อนเข้าสู่การจัดตำแหน่งของ Dreamweaver
ภาพตัวอย่างเว็บไซต์ที่สร้างจำลองขึ้นเพื่อตัดแบ่ง ( ใช้ประกอบบทความสอนเท่านั้น ) หากเห็นไม่ชัด สามารถคลิกที่ภาพเพื่อขยายใหญ่ดูขนาดจริงได้
ดังตัวอย่างจะเห็นว่า เรามีโลโก้ ด้านซ้าย 1 ส่วน มีเมนู 4 เมนู แบนเนอร์ส่วนหัว 1 ป้าย ประกอบกับเนื้อหาที่เป็นรูปภาพอีก 3 ส่วน ทีนี้เราก็ได้ส่วนที่จะแบ่งทั้งหมด 9 ส่วนด้วยกัน
เริ่มการแบ่งด้วย Slice Tool
ผมเคยเขียนวิธีการใช้เครื่องมือเบื้องต้นไปแล้วในบทเก่าๆ ลองหาอ่านกันได้ครับ ว่าเมนูไหนเรียกว่าอะไร ส่วนพระเอกของเราในวันนี้คือ Slice tool หน้าตาแบบนี้ครับ
การปรับแต่งก่อนใช้งานคือ ต้องไปที่เครื่องมือ Slice Select Tool จากนั้นดูที่แท็บข้างบนกด คลิกที่ Hide Auto Slice เพื่อง่ายต่อการสร้างส่วนต่างๆ ตามภาพ
เมื่อกดแล้ว กลับมาใช้เครื่องมือ Slice Tool อีกครั้ง แล้วทำการลาก กรอบตามส่วนต่างๆที่จะแบ่งได้เลยครับ อย่างเช่นตัวอย่างผมจะลาก ส่วนของโลโก้
สามารถลากเกินเผื่อออกนอกเฟรมไปเลยก็ได้ เพราะโปรแกรมจะไม่สนส่วนที่อยู่ข้างนอก ( ที่เป็นสีเทา ) อยู่แล้ว ทีนี้ก็จะได้ส่วนของโลโก้มา 1 ส่วนเหลืออีก 8 ส่วนด้วยกัน
อย่าลากเกินในส่วนที่เป็น ส่วนของตำแหน่งอื่นนะครับ เดี๋ยวจะออกมาเบี้ยวๆ ทับกันสับสนเสียเปล่า
ในส่วนของเมนู ที่เป็นแถบยาวนั้น เรามีวิธีการแบ่งที่ค่อนข้างง่าย จากเครื่องมือของ Photoshop เอง ซึ่งสิ่งที่เป็นแนวนอนหรือแนวตั้งตรงสามารถใช้วิธีนี้ได้เช่นกัน
ขั้นแรกคือลากครอบไปทั้งหมดตามแนวยาวก่อนได้เลย
จากนั้นให้คลิกขวาที่เราทำการสร้างกรอบไว้แล้วเลือก Devide Slice เพื่อแบ่งมันออกเป็น 4 ส่วนย่อยๆ โดยอัตโนมัติ โดยเลือกติ๊กถูก Slice Vertically Into แล้วใส่เลข 4 ลงไป กด OK
จากนั้นเราต้องมาลากส่วนต่างๆ ขยับขยายเข้าออกให้เหมาะสมกับที่ออกแบบไว้ก็ถือว่าใช้งานได้แล้วครับ ง่ายๆเสร็จไปแล้วอีก 4 ส่วน เหลืออีก 4 เท่านั้นเอง
ต่อไปเป็นการแบ่งแบนเนอร์ซึ่งเป็น 4 เหลี่ยมผืนผ้าอยู่แล้วสามารถเลือกครอบ slice ได้เลยเหมือนส่วนของโลโก้ วัตถุไหนที่ไม่มีส่วนโค้งเว้า เป็นเหลี่ยมๆเนี่ย Slice ง่ายครับ อย่าให้เกินกรอบของตัวแบนเนอร์เป็นพอ
ส่วนเนื้อหาให้ทำแบบเดียวกับเมนูคือลากทั้งหมดแล้วแบ่งออกเป็น3ส่วนย่อยๆ(ใส่เลข 3 แทนเลข4ในขั้นตอนก่อนหน้า) จัดๆหน้า Slice นิดหน่อยก็ได้ส่วนทั้งหมดครบทั้ง 9 แล้วครับ ตามภาพนี้เลย
ส่วนตัวเลขนั้นไม่เหมือนกันไม่เป็นไร เพราะมันแค่บอกกำกับเฉยๆไว้ส่วนนี้อยู่ใน Slice ช่องที่เท่าไหร่ บางคนอาจจะไม่เหมือนกันได้ ไม่มีปัญหาใดๆ
จากนั้นไปที่เมนู File > Save for web & Devices.. หรือ shortcus Ctrl + Alt + shift + S ครับแนะนำให้จำ Shortcut นี้ไว้เพราะใช้งานบ่อยแล้วคนส่วนมากเข้าใจผิดเกี่ยวกับการ save งานของ photoshop เยอะอยู่มาก เดี๋ยวคราวหน้าจะเจาะจงการใช้งานเมนูนี้เป็นพิเศษ
ยังไม่ต้องสนใจอะไรมากครับเรื่องการปรับแต่งค่าต่างๆ เพราะจะสอนการใช้งานเมนูนี้ ในบทต่อไป สำหรับคราวนี้ทำการ Save แบบง่ายๆไปก่อน โดยกดที่ปุ่ม SAVE ข้างล่างขวา
ปรับค่า Format ต่างๆให้ตรงกับ รูปภาพข้างล่าง โดย เลือกเซฟเป็น Images & Html ในช่องที่ 2 ก่อน และทำการใส่ชื่อไฟล์ตามด้วย .html
ส่วนอื่นๆยังไม่ต้องสนใจ ปรับค่าตามภาพก่อนแล้วกด Save ลงที่ ที่เราต้องการเซฟบนเครื่อง กด OK
โปรแกรมจะทำการตัดรูปและเซฟเป็นไฟล์เว็บเพจออกมาให้เราทันทีที่กด OK ครับ
ที่นี้ตามไปดูกันในที่ที่เซฟไว้ จะเห็นว่ามีไฟล์ออกมา 2 ไฟล์ คือ ไฟล์เว็บเรา.html และ โฟรเดอร์ images ซึ่งเก็บรูปภาพที่เรา Slice ไว้ทั้งหมด สามารถกดคลิกเปิดเว็บขึ้นมาดูได้ครับ ซึ่งไฟล์ .html นี้เองที่เราจะต้องนำไปเข้าโปรแกรม Dreamweaver เพื่อจัดหน้าเว็บต่างๆ และลูกเล่นเพิ่มเติมให้สมบูรณ์ต่อไป
ในบทหน้าจะกล่าวถึงการใช้งานฟังก์ชั่น Save for Web & Devices .. ให้ละเอียดมากขึ้น
สำหรับวันนี้ สวัสดีครับ
Jir4yu.