เมตตา เสียสละ รับผิดชอบ
Menu
Open menu
Open menu

การออกแบบและพัฒนาเว็บไซต์อย่างมืออาชีพ

ระหว่างวันที่ 10-12 มิถุนายน 2558  โดย  สถานการศึกษาต่อเนื่อง  มหาวิทยาลัยนเรศวร

ขั้นตอน และกระบวนการพัฒนาเว็บไซต์

          การพัฒนาเว็บไซต์ให้ประสบความสำเร็จ เป็นที่นิยม จำเป็นจะต้องมีการออกแบบข้อมูลเนื้อหาอย่างเป็นระบบ เพื่อให้ผู้ใช้งานสามารถเข้าถึงข้อมูลได้ง่าย และสามารถค้นหาข้อมูลได้อย่างรวดเร็ว อีกทั้งการออกแบบเว็บไซต์ที่สวยงามก็จะยิ่งทำให้เว็บไซต์มีความน่าสนใจมากยิ่งขึ้น โดยมีขั้นตอน และกระบวนการพัฒนาเว็บไซต์ ดังนี้

ขั้นตอนที่ 1 : เก็บรวบรวมข้อมูลสำหรับพัฒนาเว็บไซต์

  1. กำหนดเป้าหมายหลักของเว็บไซต์
  2. เนื้อหาสำหรับจัดทำเว็บไซต์

ขั้นตอนที่ 2 : พัฒนาเนื้อหา (Site Contact)

  1. สร้างกลยุทธ์การนำเสนอข้อมูล เพื่อให้เนื้อหาบนเว็บไซต์ เป็นที่น่าสนใจ
  2. กำหนดขอบเขตเนื้อหาที่จะนำเสนอ
  3. จัดรูปแบบเนื้อหาข้อมูลให้ถูกต้องอย่างมีระบบ

ขั้นตอนที่ 3 : พัฒนาโครงสร้างเวบไซต์ (Site Structure)

  1. จัดทำแผนผังโครงสร้างข้อมูล
  2. พัฒนาระบบเนวิเกชั่น

ขั้นตอนที่ 4: ออกแบบและพัฒนาเวบไซต์ (Visual Design)

  1. ออกแบบลักษณะหน้าจอโฮอเพจ และเว็บเพจ
  2. พัฒนาเว็บเพจต้นแบบที่จะใช้สำหรับการพัฒนาเว็บไซต์
  3. พัฒนาเครื่องมือสำหรับ Update หรือเพิ่มเติมข้อมูลต่างๆ ในเว็บไซต์

ขั้นตอนที่ 5 : พัฒนาและดำเนินการ (Production and Operation)

  1. ใส่ข้อมูล และเนื้อหาที่จะนำเสนอลงในหน้าจอโฮมเพจ และเว็บเพจ
  2. เปิดตัวเว็บไซต์ และทำให้เป็นที่รู้จัก
  3. ดูแล และพัฒนาต่อเนื่อง ปรับปรุงข้อมูลให้ทันสมัยอยู่เสมอ

การเลือกใช้สีสำหรับการออกแบบเว็บไซต์|
web1

สีโทนร้อน (WARM TONE)

สีโทนร้อน (WARM TONE) ประกอบด้วย สีเหลือง สีส้มเหลือง สีส้ม สีส้มแดง สีม่วงแดงและสีม่วง สีใน วรรณะร้อนนี้จะไม่ใช่สีสดๆ ดังที่เห็นในวงจรสีเสมอไป เพราะสีในธรรมชาติย่อมมีสีแตกต่างไปกว่าสีในวงจรสีธรรมชาติอีกมาก ถ้าหากว่าสีใด  ค่อนข้างไปทางสีแดงหรือสีส้ม เช่น สีน้ำตาลหรือสีเทาอมทอง ก็ถือว่าเป็นสีวรรณะร้อน

สีโทนเย็น (COOL TONE)

สีโทนเย็น (COOL TONE) ประกอบด้วย สีเหลือง สีเขียวเหลือง สีเขียว สีเขียวน้ำเงิน สีน้ำเงิน สีม่วงน้ำเงิน และสีม่วง ส่วนสีอื่นๆ ถ้าหนักไปทางสีน้ำเงินและสีเขียวก็เป็นสีวรรณะเย็นดังเช่น สีเทา สีดำ สีเขียวแก่ เป็นต้น จะสังเกตได้ว่าสีเหลืองและสีม่วงอยู่ทั้งวรรณะร้อนและวรรณะเย็น ถ้าอยู่ในกลุ่มสีวรรณะร้อนก็ให้ความรูสึกร้อนและถ้า อยู่ในกลุ่มสีวรรณะเย็นก็ให้ความรู้สึกเย็นไปด้วย สีเหลืองและสีม่วงจึงเป็นสีได้ทั้งวรรณะร้อนและวรรณะเย็น

สีตรงข้าม

สีตรงข้าม สีตัดกัน หรือสีคู่ปฏิปักษ์ เป็นสีที่มีค่าความเข้มของสี ตัดกันอย่างรุนแรง ในทางปฏิบัติไม่นิยมนำมาใช้ร่วมกัน เพราะจะทำให้แต่ละสีไม่สดใสเท่าที่ควร การนำสีตรงข้ามกันมาใช้ร่วมกัน อาจกระทำได้ดังนี้

·       1.มีพื้นที่ของสีหนึ่งมาก อีกสีหนึ่งน้อย

·       2.ผสมสีอื่นๆ ลงไปสีสีใดสีหนึ่ง หรือทั้งสองสี

·       3.ผสมสีตรงข้ามลงไปในสีทั้งสองสี

สีกลาง

สีกลาง คือ สีที่เข้าได้กับสีทุกสี สีกลางในวงจรสี มี 2 สี คือ สีน้ำตาล กับ สีเทา เกิดจากสีตรงข้ามกันในวงจรสีผสมกัน ในอัตราส่วนที่เท่ากัน สีน้ำตาลมีคุณสมบัติสำคัญ คือ ใช้ผสมกับสีอื่นแล้วจะทำให้สีนั้น ๆ เข้มขึ้นโดยไม่เปลี่ยน แปลงค่าสี ถ้าผสมมาก ๆ เข้าก็จะกลายเป็นสีน้ำตาล   สีเทา เกิดจากสีทุกสี ๆ สีในวงจรสีผสมกัน ในอัตราส่วนเท่ากัน สีเทา มีคุณสมบัติที่สำคัญ คือ ใช้ผสมกับสีอื่น ๆ แล้วจะทำให้ มืด หม่น ใช้ในส่วนที่เป็นเงา ซึ่งมีน้ำหนักอ่อนแก่ในระดับต่าง ๆ 

การออกแบบกราฟฟิกด้วยโปรแกรมกราฟิก

          โปรแกรมสำหรับการสร้างงานด้านกราฟฟิก และเป็นที่นิยมใช้กันอย่างกว้างขวางในหมู่นักออกแบบ เนื่องมาจากคุณสมบัติเด่นซึ่งมีอยู่มากมาย ไม่ว่าจะเป็นความสามารถในการจัดการกับไฟล์สารพัดชนิดที่ใช้ในงานประเภทต่างๆ ทั้งยังสามารถตกแต่งหรือแก้ไขภาพได้ตามความต้องการ ด้วยฟังชั่นของเอฟเฟ็คพิเศษ ซึ่งเป็นโปรแกรมที่ถือว่ามีความยืดหยุ่นสูง และเป็นที่นิยมใช้กันอย่างแพร่หลาย

-          -  สร้างพื้นที่งาน โดยกำหนดค่าความกว้างความสูงของงาน คือ width = 1003 Pixels ,Height = 600 Pixels

-          -  กำหนดค่าความละเอียดในการประมวลผลของงาน Resolution = 32 Pixels/Inch

-          -  เลือกโหมดสีในการทำงานเป็น RGB Color

-          -  คลิ๊กเลือกการแสดงพื้นหลังของงานเป็นสีขาว White

-          -  และวางรูป และเพิ่มข้อความตามรูปแบบที่เราวางแผนไว้
web2
ใช้เส้นนำสาย แบ่งพื้นที่การใช้งานออกเป็นส่วนๆ เพื่อนำไปตัดภาพได้ง่าย โดยใช้เครื่องมือ Slice tool 
web3

โดยลากเมาส์เป็นกรอบสี่เหลี่ยมคลุ่มส่วนที่ต้องการ
web4
-   แล้วบันทึก โดยไปที่ File > save for web > เลือกฟอร์แมตเป็น HTML and Image เราจะได้ไฟล์ template และรูปภาพในการทำเวปครับ

web5
การเพิ่มพื้นหลังเวบเพจโดยการแก้ไข code ของเวบเพจ
web6

การเพิ่ม slide show โดยการเพิ่ม script ที่เวบเพจ

<!--Slide START-->        

                <!-- Skitter Styles -->

                <link href="/slide/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />

               

                <!-- Skitter JS -->

                <script type="text/javascript" language="javascript" src="/slide/js/jquery-1.6.3.min.js"></script>

                <script type="text/javascript" language="javascript" src="/slide/js/jquery.easing.1.3.js"></script>

                <script type="text/javascript" language="javascript" src="/slide/js/jquery.animate-colors-min.js"></script>

                <script type="text/javascript" language="javascript" src="/slide/js/jquery.skitter.min.js"></script>

               

                <!-- Init Skitter -->

                <script type="text/javascript" language="javascript">

                                $(document).ready(function() {

                                                $('.box_skitter_large').skitter({

                                                                theme: 'clean',

                                                                numbers_align: 'center',

                                                                progressbar: true,

                                                                dots: true,

                                                                preview: true

                                                });

                                });

                </script>

                                                                <div class="box_skitter box_skitter_large">

                <ul>

                <li><a href="http://www.meeponsawan.com/"><img src="/slide/images/001.png" class="cube" /></a></li>

                <li><a href="#cubeRandom"><img src="/slide/images/002.png" class="cubeRandom" /></a></li>

                <li><a href="#block"><img src="/slide/images/003.png" class="block" /></a></li>

                <li><a href="#cubeStop"><img src="/slide/images/004.png" class="cubeStop" /></a></li>  

                </ul>

                                                                </div>

                                                </div>

<!--Slide END-->

ตัวอย่างเวบเพจที่เปลี่ยนพื้นหลัง เพิ่ม slide show (กำลังเปลี่ยนรูปสไลด์) และแทรกรูปในหน้าเพบเพจ

web7

                                                                                   นายวิทยา ภูมิไพบูลย์วงศ์ เจ้าพนักงานสาธารณสุขชำนาญงาน