โดย นายสมควร บุสุวะ อาจารย์สาขาคอมพิวเตอร์ธุรกิจ

LOGO

การสรางเวบไซตอยางงาย ดวย

โดย นายสมควร บสวะ อาจารยสาขาคอมพวเตอรธรกจ

E-mail : [email protected] http://webnkp.wordpress.com

การสรางเวบไซตอยางงายดวย

คณเคยอยากสรางตวตนของคณ

บนโลกอนเตอรเนต หรอ

ไม ?จะดแคไหน ถาเรามเวบไซตเปนของเรา

เอง !

การสรางเวบไซตอยางงายดวย

ถาหากเราไมมความรพนฐานทาง

คอมพวเตอรในการสรางเวบไซตเลย

แลวเราจะสรางเวบไซตสวนตวได

อยางไร ?

การสรางเวบไซตอยางงายดวย

Wordpress ชวยคณได

เรามาเรมตนกบการสรางเวบไซตอยางงาย

ดวย Wordpress กนเถอะ !ถาพรอมแลว…

เรามาเรมตนกบ Wordpress กนเลยดกวา ?

การสรางเวบไซตอยางงายดวย

Wordpress

คออะไร ? WordPress คอ ซอฟตแวร blog ทไดรบความนยมกนไปทวโลก ซง WordPress พฒนาโดยใชภาษา PHP แลวใหใชงานรวมกบระบบฐานขอมล เชน MySQL ซงซอฟตแวร WordPress น เปนซอฟตแวรทแจกใหใชกนไดฟร ทำาใหมผนยมแพรหลาย ในประเทศไทยดวยเชนกน

การสรางเวบไซตอยางงายดวย

Wordpress

มคณสมบตอยางไร ?

WordPress พฒนามาเพอใชในการ อพเดท blog โดยเฉพาะ ดงนน ตวโปรแกรมเอง พฒนามาใหใชงานงายดาย โดยมความงายตงแตการตดตง จนกระทงการเขยน blog หรอการเปลยนรปแบบดไซนหรอ ธมของ blog กสามารถทำาไดสะดวกงายดาย หากใครเรมสนใจจะทำา blog ลองเรมดวย การใช WordPress กคงจะดและนาสนใจ ไมนอย !!!

การสรางเวบไซตอยางงายดวย มาดกนดกวา วาถาอยากม Blog กบ

Wordpress.com ตองทำาอยางไรบาง1. เขาไปทเวบไซต www.wordpress.com คลกท Sign Up Now!

การสรางเวบไซตอยางงายดวย 2. กรอกขอมลตางๆ Username Password Email Address และคลกท Next คำาแนะนำา

ชอผใช : เปนภาษาองกฤษพมพเลกทงหมดหรอตวเลขกได 4 ตวอกษรขนไป (*จำา)รหสผาน: ขนอยกบกำาหนดเอง (*จำา)ยนยนรหสผาน: พมพรหสผานอกครงEmail Address: อเมลลของเรา จะตองมอยจรงและสามารถเขาไปใชงานได

การสรางเวบไซตอยางงายดวย 3. จากนนใส Blog Domain ทตองการ Domain จะเปน ชอทเราตง.wordpress.com Blog Title ชอของ Blog เปลยนไดในภายหลง จะขนมา เปนชอ Login's Blog Language เปลยนเปน th ไทยได wordpress จะเปนภาษาไทย จากนนคลกท Signup ระบบจะสง Email ไปตามทเรากรอกไว เพอยนยนการสมครจะเปนชอเวบของเรา ถาเลอกแลว จะไมสามารถเปลยนแปลงไดชอหวขอ blog ของเราสามารถแกไขไดภายหลง

การสรางเวบไซตอยางงายดวย

4. หลงจากนน จะมขอความขนวา Complete Registration สมครเสรจสมบรณแลว ใหไปยนยนการสมครในเมลลของเรา (Activate) (ระบบจะสงลงคเขาไปในอเมลลเรา ใหเรากดลงคเพอยนยนกลบมา) จะมาปรากฏหนานให Login กรอก Username และ Password เพอ Login

การสรางเวบไซตอยางงายดวย จะเขามาทหนา Dashboards หากตองการด Site

ทสรางขนคลกท Visit Site

การสรางเวบไซตอยางงายดวย Theme เรมตนจะเปน Theme พนฐานของ

Wordpress

การสรางเวบไซตอยางงายดวย หากตองการเปลยน Theme คลกท My

Dashboards ดานบน จากนนคลกท Appearance

การสรางเวบไซตอยางงายดวย จะม Theme ใหเลอกมากมาย หากชอบธมไหนคลกท Preview เพอดตวอยาง หรอคลกท Activate เพอ

เลอกใช Theme นนจากนนธมทเลอกจะเปน Current Theme หรอ ธมทใช อยในปจจบน คลกท Visit Site หากตอง การดธมทเลอกจะไดหนาตา Blog เปนธมทเลอก

การสรางเวบไซตอยางงายดวย การตงคาหรอกลบไปจดการขางหลงบาน (My

Dashboards) จะมแถบแบบนอยดานบนทางซายมอ

การสรางเวบไซตอยางงายดวย หากครงตอไปเขามาทหนา wordpress.com

login ทหนาแรก

การสรางเวบไซตอยางงายดวย การเขาสระบบจดการขอมล

คลกท เขาส“ระบบ ”

ของเมนผดแล

ปอนชอผใชงาน และรหสผาน

แลวคลกทปม เขาสระบบ“ ”

การสรางเวบไซตอยางงายดวย รปหนาหลกของระบบจดการขอมล

การสรางเวบไซตอยางงายดวย การจดการเรอง

คลกทเมนหลก -> เรอง

ระบบจะแสดงเมนยอยออกมาดงรป

การสรางเวบไซตอยางงายดวย

การเพมเรอง คลกทเมนยอย->เขยนเรองใหม

รปหนาเขยนเรองใหม

การสรางเวบไซตอยางงายดวย ขนตอนการเพม1. พมพหวเรอง2. พมพเนอหาทตองการนำาเสนอ(การใชเครองมอจะอธบายในหวขอตอไป)3. กำาหนดสถานะการแสดงขอมล

การสรางเวบไซตอยางงายดวย ในหนาตางเผยแพร

จะสามารถตงคาของบทความไดวา จะใหบทความแสดงทนทหลงบนทกหรอตงเวลาการแสดงหรอยงไมแสดงโดยทนทได คลกท แกไข “ ”แลวจะแสดงตวเลอกของคาตางๆ ออกมาปรากฎดงรปตอไป

การสรางเวบไซตอยางงายดวย

เลอกหมวดหม

บทความทสรางนนสามารถอยไดหลายหมวดหมโดยการตกเลอกทชองสเหลยมเลอกหมวดหมทตองการ

การสรางหมวดหมใหม คลกท +สรางหมวดหมใหม โปรแกรมจะแสดงชองปอนชอออกมาใหกำาหนดชอทตองการ

การสรางเวบไซตอยางงายดวย

เลอกหมวดหม

หากหมวดหมทสรางตองการใหเปนหมวดยอยของหมวดทมอยแลวใหเลอกทหมวดหมแมทตองการแลวคลกทปม เพม “ ”

การสรางเวบไซตอยางงายดวย กำาหนดใหผเขาชมสามารถแสดงความเหนกบ

บทความได

หากตองการใหผเขาชมสามารถแสดงความเหนกบบทความได ใหตกชองสเหลยม หากไม ตองการใหตกออก แตโดยปกตแลวระบบจะทำาการเลอกใหสามารถแสดงความเหนได• คลกทปม “เผยแพร” เพอบนทกขอมลผใชงานสามารถตวอยางของเรองกอนไดโดยการ

คลกทปม “ดกอน”

การสรางเวบไซตอยางงายดวย การใชเครองมอของตวเขยนบทความ

(Editor)

รปเครองตางๆ ของ Editor* Tip

หากพนทการทำางานของ editor นอยเกนไปผใชงานสามารถขยายพนทไดโดยการคลกทมมดานลางขวา ดงรป เมอเมาสเปนรปลกศรแลวคลกซายคางไวแลวลากเมาสขนหรอลง พนทจะขยายตาม

การสรางเวบไซตอยางงายดวย รจกเครองมอของ Editor

กอนทำาหรอใชเครองมอไมควรลมทำาแถบสคลมกอน แตบางคำาสง อาจไมจำาเปนตองทำา

แถบสคลม

การสรางเวบไซตอยางงายดวย รจกเครองมอของ Editor

การสรางเวบไซตอยางงายดวย การสรางลงคเชอมโยง

พมพขอความทตองการสรางลงคหรอใชรปภาพ แลวทำาแถบคลม เชน ตองการลงคคำาวา www.ddd.or.th ใหลงคไปยงเวปไซตของมลนธเมา ไมขบแลวเครองคลกทรป โปรแกรมจะแสดงหนาตางตงคาขนมา

ลงค URL ตองใสชอทอยของเวปไซตทตองการเชอมโยงเตมเชนตวอยางดงรป สวนเปาหมายมใหเลอก 2 แบบคอ เปดลงคในหนาจอเดยวกน และเปดลงคในหนาจอใหม แลวคลกปม อปเดต“ ”การยกเลกการลงค นำาเมาสไปคลกทรป หรอขอความททำาลงค แลวคลกทปม ลงคจะถก ยกเลกไป

การสรางเวบไซตอยางงายดวย การใสรปภาพใน Editor

คลกทเครองมอ ทอยดานบนของ Editor แลวจะปรากฎหนาตางอพโหลดไฟลขนมา

การสรางเวบไซตอยางงายดวย รปทตองการตองทำาการอบโหลดจากเครองของผใชงานขนไปไวบนอนเตอรเนตกอนโดยคลกทปม เลอกไฟล“ ”

เลอกทอยของไฟลทตองการแลวคลกปม ”Open”

การสรางเวบไซตอยางงายดวย เมออพโหลดเรยบรอยแลวหากตองการ

อพโหลดรปตอใหคลกปม เลอกไฟล เชนเดม แต“ ”หากตองการนำารปทไดอพโหลดแลวใส Editor โดยทนทใหคลกทปม ใสเขาเรอง“การจดตำาแหนงรปภาพ

รปภาพมคาทสามารถจดตำาแหนงรปไดคอจดแถว ขนาดรป

การสรางเวบไซตอยางงายดวย การลบรป

คลกท ลบ แลวคลกท ตอไป ตามรปดานลาง

การเลอกรปจากคลงสอเมอผใชงานไดอบโหลดรปหรอไฟลตางขนไป

แลว สามารถเรยกไฟลกลบมาใชไดอกโดยดไดจากคลงภาพหรอคลงสอโดยจะแสดงเปนรายการไว

การเลอกไฟลโดยคลกท แสดง เพอแสดงรายละเอยดของไฟลแลวคลกทปม ใสเขาเรอง เชนเดม“ ”

การสรางเวบไซตอยางงายดวย การแกไขเรอง

เมอนำาเมาสไปชทรายการเรองจะมเมนออกมากใหเลอก แกไข “| แกไขอยางเรว | ลบ | มมมอง ”

แกไข เปนการแกไขเนอหาภายในไดทงหมดแกไขอยางเรว เปนการแกไขเฉพาะคาปรบแตงของ

เรองนนๆลบ ลบเรองออกจากระบบมมมอง ใชดหนาเนอหาของเรองทตองการ ผลลพธ

เหมอนกบทแสดงหนาเวป

การสรางเวบไซตอยางงายดวย จดการสอ

สอเปนขอมลทผใชงานไดอบโหลดไว ไมวาจะเปนรปภาพ ไฟลเสยง หรอวดโอ การอบโหลดนนอาจนำาพาไวรสคอมพวเตอรเขาไปดวย ดงนนกอนการอบโหลดทกครงควรทำาการแสกนไฟลเสยกอนวามตดไวรสหรอไม การจดการไฟลนนไดแสดงวธการใชงานในหวขอการอบโหลดรปหรอไฟลเสยงแลวมวธการเชนเดยวกน เมนสอ จงเปนเมนทใชจดการไฟลไดเชนกน

ไฟลทการอบโหลดนนจำาเปนตองตงชอไฟลเปนภาษาองกฤษและไมใชตวอกษรพเศษไมควรใชภาษาไทย เพราะวา SERVER จะไมสามารถอานไฟลได

การสรางเวบไซตอยางงายดวย

การอบโหลดไฟลมาก หรอมขนาดใหญเกนไปอาจทำาใหการโหลดของหนาเวปมความเรวชา และยงทำาให SERVER ทใหบรการ ทำางานหนกมาก ดงนนไฟลรปภาพควรปรบแตงหรอลดขนาดใหมขนาดพอเหมาะตอการแสดงผล และลบไฟลทไมไดใชแลวออก

การสรางเวบไซตอยางงายดวย จดการลงคเชอมโยง

ลงคเชอมโยงใชเปนทเชอมโยงไมยงเวปไซตตางๆ ไดโดยสามารถจดการไดดงน

การสรางเวบไซตอยางงายดวย การเพมลงคเชอมโยง คลกทเมน เพม“

ลงคใหม ” ปอนชอเวปทจะปรากฎในหนาเวป และทอยของเวปทตองการเชอมโยง การใสทอยตองใสแบบเตมตามตวอยางและกำาหนด เปาหมาย แลวคลกปม “เพมลงค”

การสรางเวบไซตอยางงายดวย การจดการหนา

หนา คอหนาเวปอยางหนงคลายกบเรองทไดสรางแลว แตแตกตางกนตรงท หนา จะสรางครงเดยวแลวไมจำาเปนตองแกไขเนอหาบอยๆ อยางเชน หนาแนะนำาตวเอง หรอหนาตดตอเปนตน

การสรางเวบไซตอยางงายดวย การสรางหนานนมวธการคลายๆ กบการสราง

เรองแตจะมการตงคาตางๆ ไมมากนก สวนจดทสำาคญของการสรางหนาคอ “Permalink” วธตงคาดงตอไปน

การสรางเวบไซตอยางงายดวย หลงจากทปอนหวขอและเนอหาทตองการแลว

ตองทำาการแกไข “Permalink” โดยการคลกทปม แกไข “ ”

ในชองกรอกขอมลจะเปนชอเดยวกบหวขอทไดสรางไว หากเปนภาษาไทยจะไมสามารถคลกดไดจากหนาเวปทเผยแพรออกไป ดงนนจำาเปนตองเปลยนเปนภาษาองกฤษและไมใชตวอกษรพเศษอนๆ จากตวอยางไดเปลยนเปน “aboutus“ แลวกดปม บน“ทก เมอตงคาตางๆ เรยบรอยแลวคลกทปม เผย” “แพร”

การสรางเวบไซตอยางงายดวย การจดการความเหน

ความเหนทแสดงอยเกดจากการทผเขาเยยมชมไดมาแสดงความเหนเอาไว ดงนนเจาของบลอกสามารถจดการกบความคดเหน โดยจะมเมนจดการกบความเหนแตละความเหนได ซงจะมการแจงความเหนผานทางอเมลดวย

การสรางเวบไซตอยางงายดวย การจดการหนาตาเวบ (Theme) คลกทเมนรป

แบบบลอก แตละรปแบบจะมเมน ใชงาน“ ,ดกอน,ลบ ใหผใช”งานสามารถเลอกใชงาน การเลอกรปแบบแตละอนนนจะมการจดเรยงเมนทแตกตางกน ดงนนผใชงานตองออกแบบใหเหมาะสมตอขอมลทตองการนำาเสนอ

การสรางเวบไซตอยางงายดวย การเปด/ปดเมนตางๆ ของหนาเวบ

คลกทเมนยอย->Widgetsผใชงานสามารถยายเมนตางๆ ทแสดงอยใน

หนาเวปไดตามใจชอบโดยการคลกลากยายเมนทตองการไดทนท

การสรางเวบไซตอยางงายดวย ดานซายคอเมนทมใหใชงาน สวนดานขวาคอ

สวนทแสดงในหนาเวป ซงแตละรปแบบจะมไดมากวาแตกตางกนออกไป วธการใชงานคอผใชงานคลกซายคางไวทตวเลอกดานซาย แลวลากไปปลอยทแถบดานขวา ในตำาแหนงทมเสนประเกดขนมา แลวดผลลพธไดจากหนาแรกของเวป ในสวนของเมนตางๆ

การสรางเวบไซตอยางงายดวย การเปลยนชอของบลอก

คลกทเมน->ตงคา->ทวไป 

การปรบแตงหรอการตงคานนบางสวนตองใชความร ความเขาใจเกยวกบ Wordpress พอสมควรมเชนนนแลวอาจทำาใหบลอกเกดการแสดงผลหรอทำางานผดพลาดได

การสรางเวบไซตอยางงายดวย

เราสามารถใช Wordpress

ในการจดการเรยนการสอน

ไดอยางไร?

การสรางเวบไซตอยางงายดวย ในการดำาเนนงานการใช Wordpress ในการ

จดการเรยนรนน สามารถทำาไดโดย เชน การสรางบลอกบน wordpress แลวใหนกเรยนเขามาแนะนำาตนเอง ตอบคำาถาม แสดงความคดเหนผานการ Comment ตลอดจนมเอกสารประกอบการเรยน Powerpoint ประกอบการสอน คลปวดโอ บทความ และลงคแหลงเรยนรทนาสนใจ ใหนกเรยนไดเขามาศกษาตามอธยาศย นอกจากจากนยงไดใช Facebook และ Twitter ในการตดตอสอสาร แจงขอมลขาวสารและใหคำาปรกษานกเรยน อกดวย

โดยขอเสนอแนะแนวทางการใช Wordpress ในการจดการเรยนการสอน ดงน 1. จดทำาเคาโครงการสอน (Crouse Syllabus) โดยบรณาการการใช Social Media ในการจดการเรยนร

การสรางเวบไซตอยางงายดวย 2. ออกแบบหนวยการเรยนรและจดทำา

แผนการจดการเรยนรทบรณาการการใช Social Media ในการจดการเรยนรซงแตละแผนการจดการเรยนรทมการบรณาการ Social Media นน จะเนนการทครกำาหนดประเดนทนาสนใจ ซงอาจเปนภาพขาว ขอความ หรอคลปวดโอ โดยใชการตงคำาถามกระตนความคด ทมการนำาเสนอในบลอกของคร และใหนกเรยนสบคนขอมลในประเดนทเกยวของแลวมาตอบคำาถามในเชงการแสดงความคดเหน เพอแลกเปลยนเรยนรแนวคดซงกนและกน ทมครเปนผคอยสงเสรม สนบสนนและตรวจสอบความรของนกเรยนใหมความถกตองตามหลกวชาการ ทงนในการเขาสอนครงแรกไดใหนกเรยนทำาแบบสำารวจผเรยน ดานการใชเทคโนโลย เพอสรางเครอขายการเรยนร Social Media เพอนำาผลจากการแบบสำารวจผเรยน ดานการใชเทคโนโลย เพอสรางเครอขายการเรยนร Social Media ของผเรยนมาวเคราะหและประเมนผล เพอปรบปรงการออกแบบ การจดการเรยนรและการมอบหมายภาระงานใหเหมาะสมกบศกยภาพผเรยนตอไป

การสรางเวบไซตอยางงายดวย 3. จดการเรยนการสอนตามแผนการจดการ

เรยนรทวางแผนและออกแบบไว โดยบรณาการใช Social Media ในการจดการเรยนร 3 ลกษณะ คอ

1) ใชเปนสอการเรยนการสอน เชน - การนำาคลปวดโอจาก Youtube มาสรางความสนใจ

ในการนำาเขาสบทเรยนและประกอบการอธบาย ซงอาจใชผานเวบไซตโดยตรงแบบ ออนไลน หรอ ดาวนโหลดเปนไฟลไว นอกจากนยงสามารถนำามารวบรวมไวใน Wordpress สำาหรบใหนกเรยนเขามาศกษาเพมเตมดวยตนเอง หรอมอบหมายงานใหนกเรยนอภปรายความรจากคลปวดโอ เปนตน นอกจากนยงไดอพโหลดไฟลวดโอขนไวใน Youtube แลวนำามาแสดงไวใน Wordpress อกดวย

การสรางเวบไซตอยางงายดวย - การนำาภาพตางๆ เชน ภาพภเขาไฟ ภาพโลก ภาพ

หน มาจาก Flickr และ Google- การอพโหลดเอกสารประกอบการสอน

Presentation ใบงาน ขนไวใน Slideshare และ Scribd ตลอดจนการนำาเอกสารตางๆทเกยวของ ใน Slideshare และ Scribd มาใชประกอบการสอน

- การนำาเสนอขอมล เนอหา แหลงเรยนรออนไลน รายละเอยดทนาสนใจ ผานทาง Wordpress ใหนกเรยนเขามาศกษาเรยนรดวยตนเองตามอธยาศย และมปฏสมพนธในการแสดงความคดเหน และแลกเปลยนเรยนรซงกนและกน

การสรางเวบไซตอยางงายดวย 2) ใชตดตอสอสารระหวางผสอนกบผเรยน ผ

เรยนกบผเรยน ตลอดจนผทสนใจ เชน การใช Facebook Twitter Wordpress ในการแจงขาวสาร แจงภาระงาน ตลอดจนการเชญชวนและประชาสมพนธเขาไปศกษาเยยมชมในบลอกของคร 3) ใชในการมอบหมายงาน แสดงความคดเหน แบงปนและแลกเปลยนเรยนร ระหวางผสอนกบผเรยน ผเรยนกบผเรยน ตลอดจนผทสนใจ ผานการ Comment ในบทความ

การสรางเวบไซตอยางงายดวย

ทงนในการมอบหมายงาน ครจะดำาเนนการสรางบทความทมการนำาเนอหาขาว รปภาพ หรอคลปวดโอ มานำาเสนอ พรอมกบการตงคำาถามทเนนการกระตนใหนกเรยนนำาความรจากทเรยนมาในหองเรยน มาคดเพอตอบคำาถาม ในเชงวเคราะหและแสดงความคดเหน เพราะฉะนนนกเรยนจะมคำาตอบทไมซำากนและไมสามารถลอกกนได ซงบางครงอาจกำาหนดใหมการทำาโพลล เพอสำารวจความคดเหนของนกเรยนดวย พรอมกนนไดจดหาแหลงเรยนร แหลงขอมล และแสวงหาสอการเรยนการสอนเพอใชในการสงเสรมการจดการเรยนการสอนอยเสมอ นอกจากการเรยนการสอนแลว ยงไดใช Wordpress ในการเผยแพรและประชาสมพนธผลงาน กจกรรม ตลอดจนสาระนารทจะเปนประโยชนตอนกเรยน ครและผทสนใจไดอกดวย

การสรางเวบไซตอยางงายดวย 4. ขนประเมนผลหลงจากทไดจดกจกรรมการเรยนการสอนแลว

จะตองมการวดและประเมนผล ตรวจงานและประเมนผลจากการตอบคำาถาม แสดงความคดเหนของนกเรยนตอสถานการณทครกำาหนดเปนบทความผานทาง Wordpress ซงในการประเมนอาจกำาหนดใหมการประเมนตางๆตามความเหมาะสม

LOGO

หวงเปนอยางยงวาทกทานจะไดนำาไปใชประโยชนตอไป

สวสด