|
การออกแบบเทมเพลตนั้นควรจะเริ่มจากความต้องการของเราก่อนว่า ต้องการอย่างไร แบบไหน สีสันที่เหมาะสม ก็เลยขอแนะนำเบื้องต้นดังนี้
- ความกว้างของการแสดงผลหน้าเว็บ โดยปกติเราจะยึดเอาที่เหมาะสมและเป็นกลาง ระหว่างเทคโนโลยีที่เปลี่ยนไป กับผู้ใช้งานส่วนใหญ่ เช่น ในปัจจุบันนี้จอแสดงผลสามารถแสดงได้มากขึ้น อย่างโน้ตบุ๊คก็เริ่มตั้งแต่ 1280 พิกเซลขึ้นไป ถ้าเครื่องตั้งโต๊ะก็มีสูงในระดับ 1900 พิกเซลแล้ว แต่คนส่วนใหญ่ที่ใช้งานก็อาจจะยังมีจอ CRT รุ่นเก่าขนาด 15-17 นิ้วอยู่ซึ่งแสดงผลได้ในระดับ 1024 พิกเซลเท่านั้น หน้าเว็บของเราจึงมีข้อจำกัดที่ต้องใส่ใจในผู้ชมมากกว่าเทคโนโลยีที่เปลี่ยนไป ความกว้างจึงอยู่ที่ 1000 พิกเซลก็น่าจะพอแล้ว
- จำนวนคอลัมน์ เลือกให้ลงตัวว่าต้องการ 2 หรือ 3 คอลัมน์ ถ้าเลือก 2 คอลัมน์จะให้เมนูอยู่ฝั่งซ้ายหรือขวาดี การกำหนดจำนวนคอลัมน์การแสดงผล จะมีผลต่อการวางเลย์เอาท์ของหน้า โดยเฉพาะภาพประกอบในเนื้อหาที่ต้องกำหนดให้เหมาะสม
- สีสันโดยรวม การกำหนดสีสันของเว็บเป็นการสร้างความสนใจและเอกลักษณ์ให้กับเว็บของเรา และมีอิทธิพลพอสมควรสำหรับผู้ชม
- ปุ่ม ลวดลาย พื้นหลังและเส้นขอบ ชอบแบบไหนต้องเอาให้ชัด เพราะทุกส่วนล้วนมีความสำคัญต่อการดำเนินงานในขั้นตอนสร้างเทมเพลตของเรา และต้องเตรียมไว้ล่วงหน้า
เราจะเริ่มที่การกำหนดขนาดและออกแบบส่วนหัวเว็บกันก่อน ด้วยไปที่เมนู Layout เลื่อก Page Layout เพื่อเลือกการวางตำแหน่งภาพหัวเว็บ และเมนูส่วนหัว (Top Menu) ซึ่งโปรแกรม Artisteer นั้นทำงานแบบเสมือนจริง (Real time) ที่เพียงแค่เอาเมาส์ไปวางเหนือรูปแบบที่ต้องการ โปรแกรมก็จะแสดงผลทันที ดังภาพ
เมื่อได้รูปแบบที่ต้องการแล้วก็คลิกเลือก และจะไปกำหนดจำนวนคอลัมน์ที่ต้องการเป็นลำดับถัดไป ดังภาพล่างนี้เลือกแบบ 3 คอลัมน์
ต่อไปจะเป็นการกำหนดความกว้างของหน้าเว็บ โดยไปที่เมนู Sheet เลือก Width เพื่อกำหนดความกว้างที่ต้องการ ปกติโปรแกรมจะกำหนดมาให้ที่ 800 เราสามารถเลือกตามค่าที่กำหนดมาแล้ว หรือจะกำหนดแบบละเอียดที่ ท้ายเมนูจะมีคำว่า More sheet width... ตัวอย่างเราเลือกที่ 1000 พิกเซลสำหรับการแสดงผลของผู้ชมที่กำหนดความละเอียดจอเท่ากับ 1024 พิกเซล (24 พิกเซลที่เหลือสำหรับให้สครอลบาร์ด้านข้างของเว็บ)
ถัดลงมาจะเป็นการกำหนดค่า Top Offset คือระยะห่างจากขอบบราวเซอร์ด้านบนมาถึงขอบบนของหน้าเว็บ (เส้นขีดสีน้ำเงินที่ลูกศรชี้) จะเห็นผลชัดเจนสวยงามเมื่อเลือกมุม เป็นแบบโค้งมน ดังภาพตัวอย่าง และจะทำให้ผู้ชมมองเห็นภาพพื้นหลังของเว็บได้ชัดเจนมากขึ้น
ถัดลงมาอีกจะเป็นการกำหนดระยะห่างของหน้าเว็บกับเส้นขอบทั้งสี่ด้าน (Padding) จะให้มีระยะได้ตั้งแต่ 2 พิกเซลขึ้นไป หรือไม่มีเลยก็ได้ ดังภาพ
ต่อไปเป็นการกำหนดมุมโค้งมนของขอบหน้าเว็บ (Radius) สามารถกำหนดให้โค้งได้หลายขนาด ทดลองเองได้ตามชอบ
ที่เหลือก็จะทำงานคล้ายกันกับการปรับค่าอื่นๆ สามารถทดลองได้เอง โดยจะอธิบายหน้าที่คร่าวๆ ของแต่ละคำสั่งดังนี้
- Border คือเส้นขอบรอบหน้าเว็บสามารถกำหนดความหนาของเส้นขอบได้ และเลือกสีจาก Color
- Shadow ค่อเงาของหน้าเว็บที่ทอดลงไปบนสีพื้นหลัง กำหนดทิศทางของแสง ความฟุ้งและระยะของเงาได้
- Transparency คือความเข้มจางของสีพื้นของหน้าเว็บซึ่งถูกกำหนดมาให้แล้วตาม Theme สีที่เลือกโดยโปรแกรม ให้สามารถมองทะลุลงไปยังภาพหรือสีพื้นหลัง
- Fill Color คือสีพื้นของหน้าเว็บที่เราสามารถกำหนดเปลี่ยนได้เอง
- Color คือสีของเส้นขอบสามารถเลือกได้
จะเห็นว่า ตัวโปรแกรมจะกำหนดรายละเอียดมาให้แล้วในหลายๆ ส่วน และแสดงผลการทำงานให้เห็นจริงในการเลือกผ่านการวางเมาส์ ทำให้ใช้งานง่ายมากๆ แม้จะไม่เคยใช้งานหรืออกแบบหน้าเว็บมาก่อน สามารถลองถูกลองผิดได้ไม่จำกัด ตอนต่อไปเราจะพูดถึงการจัดทำภาพหัวเว็บและตกแต่งส่วนอื่นๆ
|
