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

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) หรือใส่ที่อยู่ในการติดต่อ ช...

การติดตั้งและการตั้งค่า 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 ไดเรกทอรี เราจะสร้างไดเรกทอรีที่นี่สำหรับทั้งสองของโฮสต์...

json_encode การส่งค่าตัวแปรที่เป็นชนิด อาเรย์จาก PHP ส่งให้กับ Javascript

หลายคนคงเคยมีปัญหากับการส่งค่าตัวแปร อาเรย์จาก PHP ให้กับ Javascript  ซึ่งตอนนี้ PHP มีฟังก์ชั่นที่ช่วยในการทำงานแปลงข้อมูล คือการ encode ข้อมูล โดยใช้ฟังก์ชัน json_encode ของ PHP ซึ่งเป็นอีกฟังก์ชันหนึ่งที่น่าสนใจมาก เพราะว่า ฟังก์ชันนี้จะทำหน้าที่แปลงค่าที่เราส่งให้ argument ให้ออกมาเป็น json ซึ่งสามารถนำเอาไปใช้เพื่อคืนค่าให้กับ AJAX แทนที่จะเป็น XML หรือ Text  จะช่วยให้เราใช้ javascript จัดการกับ Response ได้ง่ายยิ่งขึ้น แค่นี้ก็จะช่วยแก้ปัญหา การส่งค่าตัวแปรอาเรย์ไปยัง Javascript ได้เรียบร้อย รูปแบบการใช้งานก็ตามนี้ รูปแบบ string json_encode ( mixed $value [,int $options = 0] ) ตัวอย่าง <?php $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); ?> ผลลัพท์ที่ได้ {"a":1,"b":2,"c":3,"d":4,"e":5} credit:http://www.imooh.com/