ข้ามไปที่เนื้อหาหลัก

WEB PAGE LAYOUT



     คือการกำหนดส่วนต่างๆของหน้าเว็บ เช่น ส่วนหัว เมนู ส่วนเนื้อหา หรือส่วนท้าย เป็นต้น ซึ่งเราจะต้องออกแบบก่อนเป็นอันดับต้นๆ
ส่วนประกอบต่างให้ดูใน http://chumpen-web-programming.blogspot.com/2014/08/header-navigator-contents-footer.html ได้เลยครับ
แต่หน้านี้ผมจะพูดถึงการออกแบบ Layout เป็นหลักครับ

     สิ่งที่ผมนำมาใช้ในการออกแบบ layout ก็คือโปรแกรมแต่งภาพ เพราะเราจะต้องรู้และเข้าใจถึงความสัมพันธ์ของขนาดหน้าเว็บ หน้าจอ และส่วนต่างๆ ใน layout ส่วนตัวโปรแกรมที่ผมใช้และแนะนำให้ใช้ก็คือ inkscape เพราะเป็นโปรแกรมฟรี download มาใช้ได้เลย ไม่ต้องเสียค่าใช้จ่าย ส่วนขั้นตอนการติดตั้ง ตาม วิดีโอครับ (แต่บอกกันไว้ก่อน การใช้งาน Inkscape นั้นสุดง่ายครับ ถ้าใครคิดว่าเป็นมือโปรทาง Graphic ละก็อย่าใช้ครับ 5555)
Download Inkscape คลิกที่นี่

การติดตั้ง Inkscape


บน Windows7
บน Linux
บน Mac

การออกแบบ Layout ใน Inkscape


     เริ่มโดยการ เขียนบนกระดาษก่อน ร่างแบบจัดว่างส่วนต่างตามแต่ใจเราครับ ว่าจะเอาอะไรวางไว้ที่ไหน จากนั้นเปิด inkscape ขึ้นมาครับ
ทำตาม video เลยครับ

จาก video เราได้ แฟ้ม .png มา ทั้งหมด 5 แฟ้มครับ

header.png

Nav.png

Link.png

Body.png

Footer.png

ซึ่งเมื่อประกอบกันแล้วจะเป็นรูปนี้

บทความต่อไปเราจะมาเรียนเรื่อง การเขียนภาษา HTML พื้นฐานสำหรับการสร้าง Layout เก็บไว้ใช้งาน

link ที่หน้าสนใจสำหรับ การออกแบบ Layout


creativebloq

10 Rock Solid Website Layout จาก designshack

Introduction to Web Design

Original And Innovative Web Layouts
ป้ายกำกับ:

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

ส่วนประกอบของเว็บไซต์

ส่วนประกอบของเว็บไซต์ที่ดี ส่วนหัว (Header) สำหรับไว้แสดงโลโก้ หรือข้อความที่บ่งบอกว่า เว็บไซต์ของเรามีเนื้อหาอะไรบ้าง ในส่วนหัว อาจเป็นพื้นที่สำหรับใส่ป้ายโฆษณา สำหรับการหารายได้พิเศษ นอกจากนี้อาจมีคำนิยามของเว็บหรือสโลแกนต่อท้ายโลโก้ (อาจมีหรือไม่มีก็ได้) ถ้ามี อาจทำให้คุ้นเคยได้ง่ายขึ้น เมนู (Navigator) ไม่หลงผิดไปทิศทางอื่นๆ การมีเมนู ช่วยให้การค้นหาข้อมูลได้สะดวกมากขึ้น การวางเมนู ส่วนใหญ่จะอยู่ด้านบน ด้านซ้าย หรือด้านขวา เป็นหลัก ส่วนหลายๆ เว็บในปัจจุบัน มีการเพิ่มเมนูในส่วนท้าย อาจเป็นเพราะเนื้อหามีความยาวเกินหนึ่งหน้า หรือเพื่อเป็นการเพิ่มความสะดวกในการเข้าถึงเนื้อหาในส่วนอื่นๆ เนื้อหา (Contents) หมายถึง ข้อมูลที่เราต้องการให้ผู้เยี่ยมชมรับทราบ? เนื้อหาที่ดีควรมีการจัดแบ่งเป็นหมวดหมู่ให้ชัดเจน เพื่อให้สะดวกในการติดตามอ่านข้อมูลอื่นๆ เพ่ิมเติม ส่วนประเภทเนื้อหา ประกอบด้วย ข้อความที่เป็นตัวอักษร รูปภาพ / ภาพเคลื่อนไหว ไฟล์เสียง วีดีโอ ฯลฯ ส่วนท้าย (Footer) สำหรับแสดงรายละเอียดพื้นฐาน เช่น ใส่คำพูด ส่วนลิขสิทธิ์ (copyright) หรือใส่ที่อยู่ในการติดต่อ ช
1 ความคิดเห็น
อ่านเพิ่มเติม

เราต้องเตรียมอะไรบ้างก่อนเริ่มสร้าง

กำหนดจุดหมาย และจุดประสงค์       เช่น เราจะสร้างบ้าน เราจะต้องรู้ก่อนว่าเราจะสร้างเพื่ออะไร เช่น สร้างเพื่อเราเข้าอยู่เอง หรือสร้างให้คนอื่นอยู่ หรือสร้างไว้เพื่อเป็นบ้านรับรองแขก หรือให้คนงาน หรือให้เช่า หรือ ฯลฯ ถ้าเรารู้ว่าจะทำเพื่ออะไรเราก็สามารถที่จะจำกัดขนาดของข้อมูลลงได้ และมีเป่าหมายที่แน่นอนในการที่จะพัฒนาต่อไป วางแผน และแบบแปลน สำหรับการสร้าง       การที่เราวางแผนบนกระดาษก่อนถือว่าเป็นการเริ่มต้นที่ดีที่สุด ก่อนที่จะลงมือทำ การสร้างเว็ป ก็เช่นเดียวกัน ถ้าเราวางแผนหรือออกแบบไว้ก่อนย่อมทำใด้เราประสปความสำเร็จไปแล้วมากกว่า 40% เช่น ถ้าคิดจะสร้างเว็ปเพื่อแสดงผลงานของตนเอง เราก็จะต้องสร้างแบบหน้าแรก ว่าจะให้มีรูปแบบอย่างไร และจะต้องมีหน้าเว็ปกี่หน้า แต่ละหน้าจะใช้แสดงอะไรบ้าง และจะออกแบบอย่างไรให้หน้าเว็ปของเรามีคนเข้ามาดูแล้วอยากจะเก็บไว้ใน Bookmark ของตนเอง และมันจะเป็นเรื่องง่ายถ้าเราจะแก้ไขหรือปรับปรุงเว็ปของเราในภายหลัง ตั่งชื่อ       การตั้งชื่อก็มีส่วนสำคัญ เราจะต้องคิดตั่งชื่อก่อน เพราะการตั้งชื่อเพื่อให้คนจดจำกันได้นั้นไม่ใช่เรื่องง่าย เน้นที่ สั้น มีความหมา
1 ความคิดเห็น
อ่านเพิ่มเติม

การติดตั้งและการตั้งค่า Apache Virtual Hosts ใน Ubuntu

นอกจากนี้คุณจะต้องมีการติดตั้งโปรแกรม Apache เพื่อที่จะทำงานผ่านขั้นตอนต่างๆเหล่านี้ หากคุณยังไม่ได้ติดตั้ง ก็ให้คุณใช้คำสั่งนี้ในการติดตั้ง: sudo apt-get update sudo apt-get install apache2 หลังจากขั้นตอนเหล่านี้จะเสร็จสมบูรณ์เราสามารถเริ่มต้นได้ สำหรับวัตถุประสงค์ของคู่มือนี้, การตั้งค่าของฉันจะทำโฮสต์เสมือน example.com และ test.com จะถูกอ้างอิงคู่มือตลอด แต่คุณควรใช้โดเมนของคุณเองในขณะที่ตั้งค่าไปพร้อมกัน เราจะแสดงวิธีการแก้ไขโฮสต์ท้องถิ่นของคุณยื่นภายหลังการทดสอบการตั้งค่าหากคุณใช้ค่าหุ่น นี้จะช่วยให้คุณสามารถทดสอบการตั้งค่าของคุณจากคอมพิวเตอร์ที่บ้านของคุณแม้ว่าเนื้อหา ของคุณจะไม่สามารถใช้ได้ผ่านชื่อโดเมนที่จะเข้าชมอื่น ๆ ขั้นตอนที่ 1 — Create the Directory Structure ขั้นตอนแรกที่เราจะไปใช้เวลาที่จะทำให้โครงสร้างไดเรกทอรีที่จะเก็บข้อมูลเว็บไซต์ที่เราจะให้บริการกับผู้เข้าชม document root ของเรา (ไดเรกทอรีระดับบนสุดที่ Apache มีลักษณะที่จะหาเนื้อหาที่จะให้บริการ) จะถูกกำหนดให้แต่ละภายใต้ไดเรกทอรี / var / www ไดเรกทอรี เราจะสร้างไดเรกทอรีที่นี่สำหรับทั้งสองของโฮสต์
1 ความคิดเห็น
อ่านเพิ่มเติม