การออกแบบแบนเนอร์ ส่วนหัวเว็บ แบบ Responsive Design การทำเว็บไซต์โดยทั่วไปมักจะออกแบบแบนเนอร์ ให้มีความกว้างตามขนาดของหน้าเว็บ เช่น 1000 x 200 / 1000 x 300 / 1000 x 400 หรือขนาดอื่น ๆ ก็ว่ากันไป แต่แล้ววันหนึ่ง เมื่อได้เข้าสู่เทรนด์ของ Responsive web ทำให้เราไม่สามารถที่จะออกแบบหัวเว็บในลักษณะนี้ได้อีกต่อไปแล้ว เพราะถ้าออกแบบในลักษณะเดิม เมื่อเปิดดูในโมบายเว็บ แน่นอนว่าภาพมันถูกย่อส่วนลงมา ตัวหนังสือทั้งหมดก็จะเล็กลงทันที คงถึงเวลาที่จะต้องอินเทรนด์การทำแบนเนอร์ส่วนหัวเว็บแบบ responsive กันแล้วล่ะคะ
แบนเนอร์ส่วนหัวเว็บ นี้มันก็คือ รูปภาพที่แสดงผลอยู่ด้านบนสุดของ
ส่วนการทำเว็บไซต์แบบ Responsive หลายท่านก็คงรู้ว่าแล้วนะคะว่ามันก็คือ การทำให้เว็บไซต์ของเรานั้นสามารถที่จะ รองรับหน้าจอ Smartphone, Tablet, และ Desktop ในเว็บไซต์เดียว ซึ่งเป็นเทรนด์สำหรับงานเว็บดีไซน์ในช่วงนี้คะ เพราะเป้าหมายของ Responsive Design ก็คือการออกแบบเว็บให้มีความสะดวกง่ายต่อผู้ใช้มือถือเป็นหลักนั่นเองคะ
รูปภาพที่นำมาออกแบบมาเพื่อใช้งานเป็นแบนเนอร์ส่วนหัวเว็บนั้น จะมีขนาดความกว้างแตกต่างกันออกไป ขึ้นอยู่กับขนาดเทมเพลตที่เราเลือกใช้งาน ดังนี้คะ
กรณีใช้ Flash Template (ไฟล์ภาพส่วนหัวจะต้องเป็นไฟล์นามสกุล .swf เท่านั้น)
เทมเพลตขนาด 1024×768 pixels ควรจะมีขนาดรูปส่วนหัวคือ 900×200 pixels
เทมเพลตขนาด 800×600 pixels ควรมีขนาดรูปส่วนหัวคือ 770×200 pixels
ส่วนกรณีที่ใช้ เทมเพลตธรรมดา (ไฟล์ภาพส่วนหัวจะต้องเป็นไฟล์นามสกุล .jpg, .png, .gif)
เทมเพลตแบบเต็มหน้าจอ (Fullscreen) นั้นควรจะมีขนาดรูปส่วนหัว 1004×200 pixels
เทมเพลตขนาด 1024×768 pixels ควรมีขนาดรูปส่วนหัวคือ 900×200 pixels
เทมเพลตขนาด 800×600 pixels ควรมีขนาดรูปส่วนหัวคือ 770×200 pixels
โดยมีขั้นตอนการอัพโหลดภาพแบนเนอร์ส่วนหัวดังต่อไปนี้
Log in เข้าส่วนจัดการเว็บไซต์ ที่เมนู “จัดการเว็บไซต์” คลิก “ตั้งค่าพื้นฐานเว็บไซต์”
คลิกแท็บ “จัดการภาพส่วนหัวและโลโก้” แล้วคลิก เลือกประเภทของภาพส่วนหัวที่ต้องการอัพโหลด แล้วคลิก ยืนยัน ค่ะ
กรณีเลือกใช้ภาพส่วนหัวเป็นรูปภาพ
คลิกเพื่อเลือก “ใช้ภาพส่วนหัวเป็นรูปภาพ”
แล้วคลิก “เลือกรูปแบบ” ที่หัวข้อ “รูปภาพส่วนหัวระบบเดิม” คลิกที่ปุ่ม “Choose File” ก็จะปรากฎหน้าต่างให้เลือกไฟล์ภาพแบนเนอร์ส่วนหัว (ไฟล์นามสกุล .jpg, .gif, .png) จากเครื่องคอมพิวเตอร์ของคุณคะ
สำหรับหัวข้อ “รูปโลโก้” สามารถใส่รูปโลโก้ที่คุณออกแบบไว้ได้ โดยการแสดงผล ของโลโก้นั้นจะทับซ้อนบนภาพแบนเนอร์ส่วนหัว หรือ จะเลือกไม่แสดงโลโก้ก็ได้คะ
คลิกปุ่ม “ตกลง” เพื่อบันทึก
กรณีเลือกใช้ภาพส่วนหัวเป็นไฟล์แฟลช
คลิกเลือก “ใช้ภาพส่วนหัวเป็นไฟล์แฟลช”
แล้ว เลือกรูปแบบ ที่หัวข้อ รูปภาพส่วนสำรอง ในกรณีที่ Browser ไม่สามารถแสดง Flash ได้ ให้คลิกปุ่ม Choose File ก็จะมีหน้าต่างให้เลือกไฟล์ภาพแบนเนอร์ส่วนหัวที่เป็น ไฟล์นามสกุล .jpg, .gif, .png จากเครื่องคอมพิวเตอร์ของคุณคะ
ส่วน รูปภาพส่วนหัวระบบเดิม หัวข้อ Flash ให้คลิกปุ่ม Choose File จากนั้นให้เลือกไฟล์แบนเนอร์ส่วนหัวแบบแฟลช (ไฟล์นามสกุล .swf) จากเครื่องคอมพิวเตอร์ พร้อมช่องสำหรับใส่รายละเอียดความกว้าง ความสูง รวมถึงสีพื้นหลังของภาพส่วนหัวที่เลือกไว้
สำหรับหัวข้อ “รูปโลโก้” สามารถใส่รูปโลโก้ลงไปได้เลย ซึ่งการแสดงผลโลโก้จะทับซ้อนบนภาพแบนเนอร์ส่วนหัว หรือหากไม่ต้องการโลโก้ก็เลือกไม่แสดงโลโก้ ในกรณีที่ไม่ต้องการแสดงภาพโลโก้
คลิกปุ่ม “ตกลง” เพื่อบันทึก
แบนเนอร์ส่วนหัวเว็บแบบ Responsive เหมาะกับเว็บดีไซน์ เพราะเทมเพลตแบบนี้กำลังอินเทรนด์อยู่ในตอนนี้ เนื่องจากปัจจุบัน designer ก็พยายามทำให้มันคล้ายๆกับ app ในโทรศัพท์นั่นแหละ เพราะว่ามันคือมาตรฐานไปแล้วล่ะคะ
โดย..เจ้าน้อย..
