µ¦¡´ µÁªÈ Å rµ µª· µ µ¦ ´ µ¦°» µ® ¦¦¤ website of...

การพฒนาเวบไซตสาขาวชาการจดการอตสาหกรรม

WEBSITE OF INDUSTRIAL MANAGEMENT

นายพชตพล ขนธเดช

นางสาวพรรณราย ศรลาภม

ปญหาพเศษนเปนสวนหนงของการศกษาตามหลกสตรปรญญาวทยาศาสตรบณฑต สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย

มหาวทยาลยราชภฏอดรธาน พ.ศ. 2554

ลขสทธ เปนของมหาวทยาลยราชภฏอดรธาน

WEBSITE OF INDUSTRIAL MANAGEMENT

PICHITPOL KANDACH

PHANNARAI SRILAPOOM

A SPECIAL PROJECT SUMMITED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE DEGREE OF BACHELOR OF SCIENCE

MAJOR IN INDUSTRIAL MANAGEMENT FACULTY OF TECHNOLOGY UDONTHANI RAJABHAT UNIVERSITY

YEAR 2011 COPY RIGHT OF UDONTHANI RAJABHAT UNIVERSITY

ใบรบรองปญหาพเศษ

มหาวทยาลยราชภฏอดรธาน ปรญญาวทยาศาสตรบณฑต

สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย

เรอง การพฒนาเวบไซตสาขาวชาการจดการอตสาหกรรม ผวจย นายพชตพล ขนธเดช นางสาวพรรณราย ศรลาภม ไดพจารณาเหนชอบโดยคณะกรรมการสอบปญหาพเศษ

……………………………………… ประธานกรรมการ (อาจารยอนนทยา ค ากนยา )

……………………………………… กรรมการ (ดร.อทธพล สงหค า)

……………………………………… กรรมการ (อาจารยวสนต พลวพนธ)

……………………………………… หวหนาสาขาวชา (อาจารยทวารตน ศรราตร)

……………………………………… คณบด (ดร.วบล เปนสข)

มหาวทยาลยราชภฏอดรธาน รบรองแลว

ปการศกษา 2554

ก

กตตกรรมประกาศ

การ ศกษา ปญหาพ เ ศษค ร ง น สามารถส า เ ร จ ลล วง ไดตามว ตถประสง ค ใ คร

ขอขอบพระคณ อาจารยทปรกษาทใหค าช แนะและค าปรกษาการท าวจยเ ปนอยางดตลอดมา ขอขอบคณ อาจารยวสนต พลวพนธ อาจารยรชนกร ดานศรช ยสวสด อาจารยทวารตน ศรราตร อาจารยอนนทยา ค ากนยา และ คณะอาจารยทกทาน ทสงสอนและใหการช แนะตลอดระยะเวลาการศกษาในมหาวทยาลยราชภฏอดรธาน

นอกจากนใครขอขอบคณเพอน ๆ นกศกษาในช นเรยนทใหค าปรกษา เ ปนก าลงใจและอ านวยความสะดวกในดานตางๆ มา ณ ทนดวย

นายพชตพล ขนธเดช นางสาวพรรณราย ศรลาภม ผ วจย

ข

บทคดยอ

ชอเรอง : เวบไซตสาขาวชาการจดการอตสาหกรรม โดย : นายพชตพล ขนธเดช นางสาวพรรณราย ศรลาภม ชอปรญญา : ปรญญาวทยาศาสตรบณฑต สาขาวชา : การจดการอตสาหกรรม อาจารยทปรกษา : อาจารยวสนต พลวพนธ ศพทส าคญ : ผ ดแลระบบ(administrator, admin) , ผใช (User system) , เวบไซต (Website)

โครงงานนจดท าขนเพอพฒนาระบบเวบไซตของสาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย มหาวทยาลยราชภฏอดรธาน เนองจากระบบงานเดมไมไดรบการพฒนาอยางตอเ นอง ท าใหไมมการเพมเตม แกไข หรอปรบปรง เนอหาขอมลตางๆในเวบไซต สวนของรปแบบเวบไซตไมมความสมบรณ ท าใหเกดความไมสะดวกตอคณาจารย นกศกษา บคคลทวไป ในการเขาไปดขอมลตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรม จากเหตผลดงกลาวผจดท าจงมแนวคดทจะน าระบบงานเดมมาพฒนาใหมทงหมด โดยน าโปรแกรม Macromedia Dreamweaver 8 , Adobe Photoshop Cs2 , ภาษา HTML วตถประสงค เพอปรบปรงและเพมเ ตมขอมล และขาวสาร ใหม ๆ ของสาขาวชาการจดการอตสาหกรรม เพออ านวยความสะดวกแกผใช ในการตดตอ หรอ ดขอมลทเกยวของกบสาขาวชาการจดการอตสาหกรรม และเพอใหไดระบบงานใหมมประสทธภาพและความสมบรณของขอมลมากขน

จากการด าเนนการพฒนาเวบไซตสาขาวชาการจดการอตสาหกรรม ไดออกแบบรปแบบเวบไซตใหมและไดแบงหนาเวบไชตออกเปน 6 สวน 1. หนาหลก 2. หนาปรชญา 3.ฐานปรญญานพนธ 4. หลกสตร 5. คณาจารย 6. กจกรรมสาขา สวนของหนาเวบไซตทไดพ ฒนาขนมาใหม ไดเพมเนอหา ขอมลตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรมลงไปเพอใหผ ใช งานเขาถงขอมลของสาขาวชาการจดการอตสาหกรรมไดสะดวกและงายขน

ค

สารบญ

หนา

กตตกรรมประกาศ ก บทคดยอ ข

สารบญ ค สารบญภาพ ง

บทท 1. บทน า 1.1 ความเปนมาและความส าคญของปญหา 1

1.2 วตถประสงคของงาน 1 1.3 ขอบเขตของงาน 2 1.4 เทคโนโลยทใช/ภาษา 2 1.5 ประโยชนทคาดวาจะไดรบ 2

2. เอกสารและงานวจยทเกยวของ 2.1 เทคโนโลยทใช 3 2.2 งานวจยทเกยวของ 37

3. วธด าเนนงานวจย 3.1 เวบไซตระบบงานเดม 40 3.2 การออกแบบระบบงานใหม 44 4. ผลการด าเนนงาน 4.1 เวบไซตระบบงานใหม 45 5. สรปผล และขอเสนอแนะ 5.1 สรปผล 70 5.2 ขอเสนอแนะ 95 บรรณานกรม 96 ประวตผวจย 97

ง

สารบญภาพ หนา

ภาพ 3.1 หนาหลก ของเวบไซตระบบงานเดม 40 3.2 หนาปรชญา ของเวบไซตระบบงานเดม 41 3.3 หนาวสยทศนและพนธกจ ของเวบไซตระบบงานเดม 41 3.4 หนาหลกสตร ของเวบไซตระบบงานเดม 42 3.5 หนาคณาจารย ของเวบไซตระบบงานเดม 42 3.6 หนาผลงานนกศกษา ของเวบไซตระบบงานเดม 43 3.7 หนากระดานสนทนา ของเวบไซตระบบงานเดม 43 4.1 หนาหลก ของเวบไซตระบบงานใหม 45 4.2 หนาปรชญา ของเวบไซตระบบงานใหม 46 4.3 หนาฐานขอมลปรญญานพนธ หนา 1 ของเวบไซตระบบงานใหม 47 4.4 หนาฐานขอมลปรญญานพนธ หนา 2 ของเวบไซตระบบงานใหม 48 4.5 หนาฐานขอมลปรญญานพนธ หนา 3 ของเวบไซตระบบงานใหม 49 4.6 หนาหลกสตร ของเวบไซตระบบงานใหม 50 4.7 หนาแผนการศกษาช นปท 1 ของเวบไซตระบบงานใหม 51 4.8 หนาแผนการศกษาช นปท 2 ของเวบไซตระบบงานใหม 52 4.9 หนาแผนการศกษาช นปท 3 ของเวบไซตระบบงานใหม 53 4.10 หนาแผนการศกษาช นปท 4 ของเวบไซตระบบงานใหม 54 4.11 หนาค าอธบายหลกสตร ของเวบไซตระบบงานใหม 55 4.12 หนาค าอธบายรายวชา หนา 1 ของเวบไซตระบบงานใหม 56 4.13 หนาค าอธบายรายวชา หนา 2 ของเวบไซตระบบงานใหม 57 4.14 หนาค าอธบายรายวชา หนา 3 ของเวบไซตระบบงานใหม 58 4.15 หนาค าอธบายราชวชาหนา 4 ของเวบไซตระบบงานใหม 59 4.16 ค าอธบายรายวชา หนา 5 ของเวบไซตระบบงานใหม 60 4.17 ค าอธบายรายวชา หนา 6 ของเวบไซตระบบงานใหม 61 4.18 ค าอธบายรายวชา หนา 7 ของเวบไซตระบบงานใหม 62 4.19 ค าอธบายรายวชา หนา 8 ของเวบไซตระบบงานใหม 63 4.20 ค าอธบายรายวชา หนา 9 ของเวบไซตระบบงานใหม 64 4.21 ค าอธบายรายวชา หนา 10 ของเวบไซตระบบงานใหม 65

จ

4.22 หนาระบบการจดการศกษา ของเวบไซตระบบงานใหม 66 4.23 หนาแผนการพฒนาปรบปรง ของเวบไซตระบบงานใหม 67 4.25 หนากจกรรมสาขา ของเวบไซตระบบงานใหม 68 4.24 หนาคณาจารย ของเวบไซตระบบงานใหม 69 4.25 หนากจกรรมสาขา ของเวบไซตระบบงานใหม 70 5.1 สรปผล สวนการพฒนาหนาหลก 71 5.2 สรปผล สวนของการพฒนาหนาปรชญา 72 5.3 สรปผล สวนของการพฒนาหนาฐานขอมลปรญญานพนธ หนา 1 73 5.4 สรปผล สวนของการพฒนาหนาฐานขอมลปรญญานพนธ หนา 2 74 5.5 สรปผล สวนของการพฒนาหนาฐานขอมลปรญญานพนธ หนา 3 75 5.6 สรปผล สวนของการพฒนาหนาหลกสตร 76 5.7 สรปผล สวนของการพฒนาหนาแผนการศกษาช นปท 1 77 5.8 สรปผล สวนของการพฒนาหนาแผนการศกษาช นปท 2 78 5.9 สรปผล สวนของการพฒนาหนาแผนการศกษาช นปท 3 79 5.10 สรปผล สวนของการพฒนาหนาแผนการศกษาช นปท 4 80 5.11 สรปผล สวนของการพฒนาหนาหลกสตร 81 5.12 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 1 82 5.13 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 2 83 5.14 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 3 84 5.15 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 4 85 5.16 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 5 86 5.17 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 6 87 5.18 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 7 88 5.19 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 8 89 5.20 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 9 90 5.21 สรปผล สวนของการพฒนาหนาค าอธบายรายวชา หนา 10 91 5.22 สรปผล สวนของการพฒนาหนาระบบการจดการศกษา 92 5.23 สรปผล สวนของการพฒนาหนาแผนการพฒนาปรบปรง 93 5.24 สรปผล สวนของการพฒนาหนาคณาจารย 94 5.25 สรปผล สวนของการพฒนาหนากจกรรมสาขา 95

1

บทท 1 บทน า

1.1 ความเปนมาและความส าคญของปญหา สาขาวชาการจดการอตสาหกรรม เปนสาขาวชาหนงในคณะเทคโนโลย ของมหาวทยาลยราชภ ฎ

อดรธาน มงผลตบณฑตใหมความรความสามารถดานการจดการอตสาหกรรมและสามารถพฒนางานในธรกจอตสาหกรรมไดดวยตนเองอยางมประสทธภาพ และสามารถน าความรไปประกออบอาชพและสามารถศกษาตอในระดบสงในสาขาวชาการจดการอตสาหกรรมหรอสาขาทเกยวของได พรอมทงใหบณฑตมคณธรรมและจรยธรรมในการประกอบอาชพ โดยโครงสรางหลกสตรประกอบดวย หมวดวชาเฉพาะ และวชาเลอกเสร มสดสวนจ านวนหนวยกตแตละหมวดวชา ดง น 1) หมวดวชาศกษาทวไป 33 หนวยกต 2) หมวดวชาเฉพาะ 95 หนวยกต 3) หมวดวชาเลอกเสร 6 หน วยกต และมหน วยกตรวมไมนอยกวา 134 หนวยกต

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

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

1.2 วตถประสงคของงาน 1.2.1 เพอปรบปรงและเพมเตมขอมล และขาวสาร ใหม ๆ ของสาขาวชาการจดการอตสาหกรรม 1.2.2 เพออ านวยความสะดวกแกผใชในการตดตอ หรอ ดขอมลทเกยวของกบสาขาวชาการจดการอตสาหกรรม 1.2.3 เพอใหไดระบบงานใหมมประสทธภาพและความสมบรณของขอมลมากขน

2

1.3 ขอบเขตของงาน 1.3.1 สวนจดการระบบ เปนสวนของผดแลระบบหรอผทมสทธในการจดการระบบ - สามารถท าการจดการกบเวบไซตได - สามารถเพม ลบ แกไข ขอมลตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรมได - ก าหนดขอบเขตของผใชงาน 1.3.2 สวนของผใช - สามารถดขอมล ขาวสารตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรมได - สามารถดฐานขอมลปรญญานพนธของสาขาวชาการจดการอตสาหกรรมได 1.4 เทคโนโลยทใช/ภาษา 1.4.1 โปรแกรมทใชในการพฒนาระบบ มดงน

1) Macromedia Dreamweaver 8 2) Adobe Photoshop Cs2 3) ภาษา HTML

1.4.2 ฮารดแวรทใช คอ 1) Computer Notebook 1 set CPU AMD Turion(tn)X2 Ultra Dual-Core 2.20 GHz 320GB

Memory 2GB windows 7 2) Personal Computer 1 set CPU Duo T9300 HD 250 GB Memory 2 GB Windows Xp

1.5 ประโยชนทคาดวาจะไดรบ 1.5.1 มการจดการขอมลทเปนระบบท าใหผใชเขาถงขอมลไดอยางสะดวก 1.5.2 เนอหา ขอมลในเวบไซตมการแกไข หรอปรบปรงอยางตอเนองโดยผดแลระบบ 1.6 นยามศพท 1.6.1 ผ ดแลระบบ(administrator, admin) คอ ผ ทมสทธในการจดการขอมลในเวบไซต สามารถท าการบนทก เพม แกไข ลบขอมลภายในเวบไซตได 1.6.2 ผใช (User system) คอ ผ ทเขาใชงานดขอมล ขาวสาร ผลงานนกศกษา ในเวบไซต 1.6.3 เวบไซต (Website) หมายถง แหลงความรหรอขอมลขาวสารทถกเกบไวบนระบบ เนตเวรก ออนไลน ทเรยกวา อนเตอรเนต (Internet)

3

บทท 2 เอกสารและงานวจยทเกยวของ

2.1 เทคโนโลยทใช เทคโนโลยและภาษาทใชในการพฒนาระบบ มดงน 2.1.1 Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 เ ปนอกโปรแกรมหนง ทมการออกแบบ มาเพอทจะใช ในการจดการกบเอกสารทใชส าหรบ การสรางเวบเพจ ซงในสมยกอนหากจะม การสรางเวบเพจ ขนแตละเวบเพจน น ตองใ หผ ทมความรในภาษา HTML มา เ ขยนรหสค า สง (Code) ให แต ใน ปจจบน โปรแกรม Macromedia Dreamweaver 8 สามารถทจะสรางรหสค าสงใหกบผใช โดยอตโนมต ซง ผ ใช ไมจ าเ ปนตองมความรดานของภาษา HTML เนองจากโปรแกรม Macromedia Dreamweaver 8 น นจะมลกษณะ การท างานทคลายๆ กบโปรแกรมพมพเอกสารทเราเคยใชและรจกกนด ซงจะมเครองมอและแถบค าสงใหเราเ ลอกใช ได เหมอนกบ Word Processor จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

จดเดนของโปรแกรม Macromedia Dreamweaver 8 1) โปรแกรมจะท าการแปลงรหสใหเปนภาษา HTML โดยอตโนมตดงนน ผใชทไมมความร

ดานนกสามารถท าได 2) มแถบเครองมอ หรอแถบค าสง ทใชในการควบคมการท างาน แบงออกเปนหมวดหมจงชวย

ในการท างานทดขน และรวดเรวยงขน 3) สนบสนนเวบเพจทเปนภาษาไทยไดด 4) มคณสมบตทสามารถจดการกบรปภาพเคลอนไหว โดยไมตองอาศย Plugin 5) สามารถเรยกใชตารางจากภายนอก โดยการอมพอรทจาก Text File 6) เปนโปรแกรมทสามารถสนบสนนการใชงาน CSS (Cadcading Style Sheet) 7) มความสามารถในการท า Drop Down Menu รวมไปถงการท าใหรปภาพเปลยนเมอน าเมาส

ไปช เปนตน

4

การตดตงโปรแกรม การตดตงโปรแกรม Dreamweaver 8 มขนตอนดงน

1) ใสแผนซดรอม โปรแกรม Dreamweaver 8 เขาไปในไดรฟซดรอม

2) โปรแกรมจะเรมท างานโดยอตโนมต หรอถาเปดเขาไปทไดรฟซดรอม ดบเบลคลกทไอคอน Setup โปรแกรม

3) จะไดหนาตางขอตกลงสทธการใชงาน (License Agreement) คลกเลอก I accept แลวคลกปม Next

5

4) เลอกไดเรกทอรทตองการ เชน C:\Program File … ถาตองการเปลยนใหคลกปม Change เลอกไดรฟและโฟลเดอรทตองการแลวคลกปม Next

5) เลอกชนดของโปรแกรมทจะใชรวมกบ Dreamweaver (Default Editor) ถาเลอกทงหมดแลวคลกปม Select All แลวคลกปม Next

6

6) คลกปม Install เพอตดตงโปรแกรม

7) เรมตดตงโปรแกรมลงในเครองจนเสรจสมบรณ

7

8) คลกปม Finish

วธการเขาสโปรแกรมมขนตอนดงน

1) คลก ท Taskbar ดานลาง

2) เลอกท Program > Macromedia > Macromedia Dreamweaver 8 โปรแกรมจะท างาน และเปดหนาตางโปรแกรมขนมา

8

3) โปรแกรมถกเปดขนมาแลว

สวนประกอบของโปรแกรม

1) เปดงานทเราก าลงท าคางอย โปรแกรมจะแสดงงานทเราเปดใชบอยๆ ไวดานบน 2) เลอกประเภทงานทตองการสรางใหม ไดแก HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ 3) เลอกงานตามฟอรมทโปรแกรมจดไวใหโดยมรปแบบใหเลอกหลายประเภท

9

4) เรยนรโปรแกรมทางเวบไซต 5) เรยนรโปรแกรมจากโปรแกรมชวยสอน

10

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

1) Title Bar คอ สวนทแสดงชอโปรแกรม และชอไฟลทก าลงท างานอย

2) Menu Bar คอ สวนทรวมค าสงการท างานทงหมด แลวแบงยอยตามประเภทและในค าสงหลกมกจะมเมนลดใหกดดวย

3) Object Palette คอ แถบแสดงปมตางๆของโปแกรม

11

เราสามารถเลอกประเภทค าสงไดดวยการคลกท Common จะปรากฏเมนขนมา

หากเราคลกปม Show as Tabs กจะเปนการแสดงเครองมอดงน

4) Toolbar คอ แถบเครองมอส าหรบการใชงานดาน HTML และอนเตอรเนท ประกอบดวย

Show Code View แสดงการท างานในรปแบบ HTML

Show Code and Design Views แสดงการท างานแบบ HTML ควบคกบแสดงพนทออกแบบ

Show Design View แสดงการท างานแบบแสดงพนทออกแบบ

Document Title ตงชอของเวบเพจ

Check Errors ตรวจสอบขอผดพลาดจาก Browser

File Management จดการกบไฟลๆ ทอยในเวบเพจ

Preview / Debug in Browser ทดลอง ดเวบเพจทาง Browser หรอกด F12

View Options มมมองในการท างานเพมเตม 5) หนาตางออกแบบเวบเพจ ใชพมพขอความและจดเรยงรปภาพ 6) Tag Selector ใชควบคมการท างานในรปแบบ HTML 7) Window Size ก าหนดพนทใชงานตามตองการ 8) Estimate Download Time แสดงเวลา ทใชในการดาวนโหลด

12

9) Properties ใชก าหนดรปแบบตางๆ ของตวอกษร และรปภาพ รวมถงการสรางลงค

หนาตาง Proties สามารถจะเปดปดไดตามตองการดวยการคลกท เพอขยายหนาตางการท างานใหมากขน หรอคลกท Window > properties กไดเชนกน

10) Dockable Window เปดหนาตางทรวบรวมเครองมออ านวยความสะดวกเอาไว โดยคลกท เพอเปด-ปดได เชนเดยวกบ Properties

13

วธการสราง Site

การสราง Site กเพอทเวลาสรางเวบไซต ขอมลจะไดถกจดอยางเปนระเบยบ ไมกระจดกระจาย งายตอการตรวจสอบ วธการสรางกงายๆ ตามรปเลย

1) ไปท Menu Bar เลอก Site > New

2) พมพชอ Site ลงไป คลก Next

14

3) เลอก No, I do not want use a server technology. คลก Next

4) คลกเลอกทจะเกบเวบเพจ

15

5) สราง Folder ขนมาใหม เปลยนชอ แลวดบเ บลคลกเขาไป

6) เลอกทเกบเวบเพจ คลก Next

16

7) เลอก None

8) คลก Next

17

9) คลก Done เปนอนวาเสรจการสราง Site

10) Site ทสรางเสรจ

18

การน าไฟล Flash มาใช

วธการน าไฟล Flash มาใช มขนตอนดงน 1) วางเคอเซอรบนพนทการท างาน 2) ไปท Menu Bar เลอก Insert > Media > Flash หรอกด Ctr l+Alt+F 3) เลอกไฟล Flash ทจะน ามาใชงาน ( เฉพาะนามสกล .swf)

4) คลกปม 5) ทหนาจอการท างานจะแสดงทตงของไฟล Flash 6) ทดสอบผลทาง Browser โดยการกด F12

19

การท าปม Flash

วธการน าปมกด Flash มาใชงาน มขนตอนดงน 1) วางเคอเซอรบนพนทท างาน 2) ไปท Menu Bar เลอก Insert > Media > Flash button 3) ในขนนถาเรายงไมไดบนทกเวบเพจ โปรแกรมจะเตอนใหเราบนทกกอน ถงจะสามารถใชปม Flash ได ใหเราท าการบนทก

20

4) จะปรากฏหนาตาง Insert Flash Button ขนมา ใหเราเลอกรปแบบของปม

5) จะไดปม Flash เรยบรอยแลว ใหทดสอบแสดงผลทาง Browser โดยการกดปม F12

21

2.1.2 Adobe Photoshop Cs2

โปรแกรม Photoshop เปนโปรแกรมส าหรบสรางภาพ และตกแตงภาพ ซงเ ปนลขสทธของบรษท Adobe ซงบรษท Adobe มผลตภณฑซอฟแวรเกยวกบดานกราฟก มากมายเชน Adobe illustrator ส าหรบท า ภาพเวกเตอร Adobe Pemiretor ส าหรบตดตอภาพยนต ฯลฯ โปรแกรม Photoshop เ ปนโปรแกรมตกแตงภาพทไดรบความนยมมาก เ นองจากเปนโปรแกรมทใช ง าย และรองรบ Application (Plug In) เสรมไดมากมาย

ลกษณะเดนของ Photoshop 1) Photoshop ท างานเปน Layer ลกษณะการท างานของ Photoshop จะเหมอนการวางแผนใสซอนๆ กน โดยแตละแผนจะมการท างาน ตางกน แตเมอรวมกนแลวจะเปนแคภาพภาพเดยว แตละแผนใส(Layer) สามารถสลบไปมาได

22

2) รปแบบค าสงเปนแบบ Interface Enhancement ไอคอนและปมค าสงตางๆ จะอยในรปแบบของ Toolbox , Toolbar และ Dialog Box ซงจดไวเปนหมวดหม โดยคลกเพอใชงาน และจะมการตอบโต การใชงานเปนแบบ 3 มต คอ เมอคลกปมจะยบลงไป

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

- ระบบปฏบตการ Windows XP , Windows Vista , Windows 7 - CPU เพนเทยม III ขนไป แรม1 28 mb เปนอยางนอย - การดจอทแสดงสไดระดบ 16 bit ขนไป - ควรใช จอภาพทแสดงผลดวยความละเอยด 800*600 ขนไป - CD Rom ส าหรบอานแผน CD

เรมตนใชงาน Photoshop CS2 1) วธการเขาสโปรแกรม Photoshop Cs2 คลกทไอคอนโปรแกรมดงรป

(ดบเบลคลก ทไอคอนดงรปเพอเขาโปรแกรมPhotoshop Cs2)

23

2) หนาตาของโปรแกรม Photoshop CS2

panel เปนแถบทชวยอ านวยความสะดวกในการท างาน ซงมหลายแบบดวยกน เชน panel Layer ,History และ Navigator ซง panel ทจ าเปนในการใชงาน จะมดงน 1) Navigator ใชส าหรบขยายมมมองการท างานของพนทการท างาน 2) History ใชส าหรบ การยอนกลบการกระท าตางๆ เมอผดพลาด 3) Layer ใชส าหรบการสรางและลบ layer ตางๆ

24

วธการเปด/ปด Panel สามารถท าไดโดยไปทเมน Windows > แลวเลอก Panel ทตองการใช

ชนดไฟลในโปรแกรม Photoshop 1) .psd (Photoshop File) : เปนไฟลพนฐานของโปรแกรม Photoshop สามารถเกบบนทกขอมล คณลกษณะตางๆ ทใชใน Photoshop ไมวาจะเปน Layer , ส หรอ Effect ตางๆ .bmp (Bitmap file) : เปนไฟลพนฐานของ Windows 2) .gif (Graphic Interchange) : เปนไฟลทใชกนมากบนอนเตอรเนต เพราะงายตอการบบอดขอมล เพราะ ม ขนาดเลก .jpg (Joint Photographic experts Group) : เปนไฟลนยมใชบนอนเตอรเนตเชนกนจะแตกตางกนทไฟลน จะ มความละเอยดของภาพคอนขางชดเจน

25

การเปดไฟล การเรยกไฟลภาพหรอไฟล psd น าขนมาใชสามารถท าไดโดย ไปทเมน File > Open หรอคยลด Ctrl+O

การเปดไฟลกอนหนานดวยค าสง Open Recent ไปทเมน File>Open Recent แลวเลอกไฟลทเคยเปดไวอย แลวไดจากค าสงน

26

การสรางภาพใหม นอกจากการน าภาพมาใชงานแลวเราสามารถสรางภาพขน มาใหดวยพนทการท างานทเราสรางไดเองดวย โดยการไปทเมน File>New หรอคยลด Ctrl+N

รายละเอยดการก าหนดขนาดพนทใหม

27

การบนทกไฟล การบนทกไฟลของ Photoshop มสองแบบคอ บนทกเพอน ามาแกไขไดภายหลง และบนทกน าไปใชงานเวบไซต 1) การบนทกงานเพอน ามาแกไขภายหลง สามารถท าไดโดย ไปทเมน File>save as…

2) วธการเซฟน าไปใชบนเวบไซต สามารถท าไดโดย การไปทเมน File > Save for Web

(จะปรากฏแถบขอมลการ Save for Web)

(การเลอกประเภทไฟลในชอง preset นนขนอยกบงานทจะน าไปใช )

28

การใชเครองมอ Selection (Marquee Tool) ใชในการเลอกสวนของรปภาพเพอการคดลอกหรอใสeffect ตางๆ ใหกบสวนทเลอก และมกใชกบ ค าสง Copy , Cut ,Delและ ค าสง paste

การใชเครองมอ Selection (Lasso Tool)เปนการเลอกสวนของรปภาพเชนกน แตจะเปนการเลอกแบบอสระสามารถก าหนดสวนทเลอกไดเอง

29

การใชเครองมอ Magic wand tool

เปนการ Selection โดยอาศยคาสทใกลเคยงกน โดยโปรแกรมจะเลอกสทมความคลายกบสทเลอก การใชเครองมอในการระบายสหรอแกไขภาพ Healing Brush Toolใชเกลยรอยตางๆ โดยจะท าการรกษาโทนส ความสวางใหใกลเคยงกบของเดมอตโนมต เวลาใชตองกด ปมA lt รวมดวย

การใช Brush Tool

30

การใชเครองมอในการคดลอกClone Stamp Tool

เปนการใชเพอการคดลอกบางสวนของภาพใหเหมอนตนฉบบเดม ตองกดปมA lt รวมดวย

การใช Paint Bucket Tool ใชส าหรบการเตมสลงวตถทตองการ

การลบวตถดวย Eraser Tool ใชในการลบวตถทตองการ

31

เครองมอในการพมพตวอกษร สามารถพมพขอความหรอตวอกษรได จาก Type Tool

เครองมอในการวาดรปทรง Shape Tool

32

การเลอกสโดยใช Eyedropper Tool การเลอกสโดยใช Eyedropper นนเปนการเลอกส ทเราไมทราบเฉดสทแนนอนท าใหยากตอการเลอกเราจงใชเครองมอนในการดดเฉดสทเราตองการจากตนฉบบโดยใชเครองมอนได

การเลอกส Foreground และ Backgroud เปนเครองมอทใชส าหรบการเลอกสทตองการ

33

การท า Effect ใหกบ Layer การเ ตม Effect ตางๆใหกบ Layer และรปภาพ เชน การใสเสนขอบ การท าตวนน การใสเงา ฯลฯ สามารถท าไดโดย การไปทเมน Layer > Layer Style > แลวเลอก effect ทตองการ

2.1.3 ภาษา HTML HTML ยอมาจาก Hyper Text Markup Language คอภาษาคอมพวเตอรทใช ในการแสดงผลของ

เอกสารบน website หรอทเราเรยกกนวาเวบเพจ ถกพฒนาและก าหนดมาตรฐานโดยองคกร World Wide Web Consortium (W3C) และจากการพฒนาทางดาน Software ของ Microsoft ท าใหภาษา HTML เ ปนอกภาษาหนงทใชเขยนโปรแกรมได หรอทเรยกวา HTML Application

HTML เปนภาษาประเภท Markup ส าหรบการการสรางเวบเพจ โดยใช ภาษา HTML สามารถท าโดยใชโปรแกรม Text Editor ตางๆ เชน Notepad, Editplus หรอจะอาศยโปรแกรมทเ ปนเครองมอชวยสรางเวบเพจ เชน Microsoft FrontPage, Dream Weaver ซงอ านวยความสะดวกในการสรางหนา HTML สวนการเรยกใชงานหรอทดสอบการท างานของเอกสาร HTML จะใช โปรแกรม web browser เชน IE Microsoft Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปนตน องคประกอบของภาษา HTML สามารถแบงออกได 2 สวน คอ

1) สวนทเปนขอความทว ๆ ไป 2) สวนทเปนค าสงทใชในการก าหนดรปแบบของขอความทแสดง ซงเราเรยกค าสงเหลานวา

แทก (Tag) โดยแทก หรอค าสงของภาษา HTML จะอยในเครองหมาย < > ซงมหลกในการเขยนดงน

34

หลกในการเขยนค าสงหรอแทกในภาษา HTML 1) รปแบบแทกจะแยกออกเปน 2 สวน คอแทกเรมตน เ รยกวา "แทกเปด" และสวนจบของแทก

เรยกวา "แทกปด" แทกปดจะตองมเครองหมาย Slash (/) ดงน <แทกเปด>ขอความ......</แทกปด> เชน <title>ขอความทตองการใหปรากฎในแถบหวเรอง </title>

2) บางแทกอาจไมตองมแทกปดกสามารถใชงานได เชน ค าสงขนบรรทดใหม <br> 3) เ ร าสามารถพมพ ตวอกษร เ ปนตวเ ลก ห รอใ หญ กได ( เ วอ รช น 4 .0 ขน ไป) เ ช น

<HTML>,<Html>,<html> จะมความหมายเหมอนกน แตแนะน าใหใช ตวอกษรตวเ ลกทงหมด เพอรองรบกบมาตรฐานของ XHTML ตอไป

4) บางแทกจะมตวก าหนดคณสมบต ทเรยกวา แอตทรบวท (Attribute) และมคาทถกก าหนดใหใชในแทก (Value) โดยจะเขยนไวหลงแทก เชน <hr width=600 size=5>

แทก hr เปนการก าหนดเสนขนทางแนวนอน แอททรบวต width ก าหนดคณสมบตความยาวของเสน แอททรบวต size คอการก าหนดความหนาของเสน คาทก าหนดใหใช 600 เปนคาความยาวของเสน คาทก าหนดใหใช 5 คอเสนมความหนา 5 จด (Pixel)

โครงสรางของภาษา HTML ประกอบดวย 3 สวน คอ 1) สวน ทก าหนดให เวบเ บราวเซอรทราบวา เ ปนแ ฟมขอมลชน ด HTML ซง จะ มแ ทก

<html>…</html> ก ากบอยทจดเรมตนและจดสนสดของแฟมขอมล 2) สวนหวเรอง (Head) เปนสวนทก าหนดใหแสดงขอความทแถบหวเรองของหนาเวบเพจน น ๆ

เชน แทก <title>....</title> และเกบแทกพเศษอน ๆ 3) สวนเนอหา (Body) เปนสวนทแสดงเนอหาของเวบเพจทงหมดซงประกอบดวย ขอความและ

แทกตาง ๆ เชน แทกส าหรบจดการกบรปแบบของขอความ ตาราง รปภาพ กราฟกตางๆ สของตวอกษร สพน เปนตน ความหมายของค าสง หรอแทกตางๆ ในโครงสรางของภาษา HTML (ซงตองมค าสงหรอแทก 4 สวนนเปนหลกในเวบเพจทก ๆ หนา)

<html>…..</html> หมายถง แสดงถงจดเรมตนและจดสนสดของภาษา HTML <head>…../head> หมายถง ก าหนดรายละเอยดสวนหวเอกสาร HTML เชน <title>......</title> <title>.....</title> หมายถง ก าหนดชอเวบเพจในแถบหวเรอง หรอทเรยกวาไตเตลบาร ของ

หนาตางเวบเพจ <body>…..</body> หมายถง สวนทมไวส าหรบใหผเขยนเวบเพจใสค าสงหรอแทกตาง ๆ

บางครงอาจเรยกวา "โคด" (Code) เชน ค าสงแสดงรปภาพ, การก าหนดสตวอกษร , การท าอกษรวง , การสรางตาราง, การท าชดเชอมโยง เ ปนตน

35

เรมตนกบภาษา HTML ดวย Notepad

Notepad นจดเ ปนโปรแกรมประเภท Text Editor สามารถสรางไฟลหรอเ ขยนภาษา HTML ได และ Notepad นเปนโปรแกรมทนยมใชในการเขยนโฮมเพจ สามารถใชงานไดง าย และเปนโปรแกรมทท างานบนระบบ Windows

การเรยกใชงานโปรแกรม Notepad สามารถท าไดดงน

1) คลกท Start --> เลอก Programs --> เลอก Accessor ies --> เลอก Notepad

2) ไดโปรแกรม Notepad ส าหรบเขยนโฮมเพจ ดงน

3) ทดสอบการใชโปรแกรม Notepad โดยพมพค าสงพนฐานของภาษา HTML

36

การบนทกไฟลโปรแกรม Notepad ใหเปนไฟล HTML

หลงจากใสค าสงพนฐานของภาษา HTML ลงใน Notepad ให Save เปน file นามสกล ดอท.html ดงน

1) คลก File --> เลอก save ในชอง File name ใหพมพชอ File ทตองการลงไป เชน test.html (test.html อานวา เทส ดอท เอช ท เอม แอล)

2) จะได File 1 File ทเขยนดวยภาษา HTML ชอ test.html จะเปดโปรแกรม Internet Explorer (IE)

3) เมอท าการ save file เปน file HTML แลว ถาตองการแกไขเอกสาร HTML ทเปดดดวยโปรแกรม Internet Explorer เลอก view ท menu bar >> เลอก source จะปรากฏขอมลทเขยนดวยภาษา HTML ในโปรแกรม notepad

37

2.2 งานวจยทเกยวของ 2.2.1 การพฒนาเวบไซตหองสมดโรงเรยนเตรยมอดมศกษาภาคใตจงหวดนครศรธรรมราชการศกษาครงนมจดมงหมายเพอพฒนาเวบไซตหองสมดโรงเ รยนเตรยมอดมศกษาภาคใต และเพอศกษาความพงพอใจของผใชบรการทมตอเวบไซตหองสมดโรงเ รยนเตรยมอดมศกษาภาคใตกลมตวอยาง ทใช ไดแก อาจารยและนกเรยนโรงเรยนเตรยมอดมศกษาภาคใต รวมทงหมด 142 คน เครองมอทใช ในการศกษา ไดแก เวบไซตหองสมดโรงเรยนเตรยมอดมศกษาภาคใต และแบบสอบถามความพงพอใจของผใช บรการทมตอเวบไซตหองสมดโรงเรยนเตรยมอดมศกษา ภาคใตสถตทใชในการศกษาครง น คอ คารอยละ คาเฉลย และคาเบยงเบนมาตรฐาน ผลการศกษา พบวา ผใชบรการมความพงพอใจโดยรวมอยในระดบมากทสด เมอพจารณาเปนรายดาน ผ ใช บรการมความพงพอใจในระดบมากทสด 2 ดาน คอ ดานการออกแบบสญลกษณทางในเวบเพจ และดานประโยชนในการน าไปใช 2.2.2 การพฒนาเวบไซตโรงเรยนเพอการเรยนรของผบรหาร ครผ สอน และนกเ รยน สงกดส านกงานเขตพนทการศกษาหนองบวล าภ เขต 1

การศกษาครงน เปนการศกษาเชงพฒนา เพอพฒนาเวบไซตโรงเรยนเพอการเ รยนรของผบรหาร ครผสอน และนกเรยน สงกดส านกงานเขตพนทการศกษาหนองบวล าภ เขต 1

กลมตวอยาง เปนผบรหารโรงเรยน จ านวน 20 คน ครผสอน จ านวน 179 คน และนกเ รยนจ านวน 364 คน จากโรงเรยน 20 โรงเรยน ในสงกดส านกงานเขตพนทการศกษาหนองบวล าภ เขต 1 ปการศกษา 2549

เครองมอทใช ในการศกษา เ ปน เอกสารประกอบการอบรมปฏบตการ แบบทดสอบ แบบประเมน และแบบสอบถาม ผลการศกษา ปรากฏผลดงน

ระยะท 1 การสรางเอกสารประกอบการอบรมปฏบตการการพฒนาเวบไซตโรงเรยน ประสทธภาพเอกสารประกอบการอบรมการพฒนาเวบไซตโรงเ รยนของครผ เขารบ การอบรม

ปฏบตการการพฒนาเวบไซตโรงเรยน มคาเทากบ 84.88/89.75 ผานเกณฑทก าหนดไว ระยะท 2 การอบรมปฏบตการการพฒนาเวบไซตโรงเรยน คะแนนกอนอบรมปฏบตการและหลงอบรมปฏบตการเกยวกบการพฒนาเวบไซตโรงเ รยน ของ

ครผรบผดชอบเวบไซต แตกตางกนอยางมนยส าคญทางสถตทระดบ .01 ระยะท 3 การนเทศ ตดตาม การพฒนาเวบไซตโรงเรยน ผลการพฒนาเวบไซตโรงเรยนเพอการเรยนร พบวา โรงเ รยนม URL ของเวบไซต มลงคส าหรบ

การสบคนขอมล (Search Engine) มลงคส าหรบใหบรการฟรอเมล มลงคไปยงองคกรตางๆ ทวประเทศ มการเลอกใชแบบอกษร การวางรปแบบ ความเหมาะสมของขอความ และการใช สมความเหมาะสมเปนไปตามเกณฑ จ านวน 20 โรงเรยน คดเปนรอยละ 100 โดยโรงเ รยนทมลงคส าหรบการสบคนขอมลจะมลงคของ Google เปนหลก สวนลงคส าหรบใหบรการฟรอเมล ประกอบดวย Thai mail,Yahoo, Hotmail, Chaiyo

38

และ Gmail ลงคไปยงองคกรตางๆทวประเทศ ประกอบดวย กระทรวง ส านกงานเขตพนทการศกษาทวประเทศ สอมวลชน องคกรเอกชนและสวนบคคล การเ ลอกใช แบบอกษร ตวอกษรหวขอเ ปนแบบตวหวกลม เชน AngsanaUPC, CordiaUPC และตวอกษรเ นอหาเปนแบบ MS Sans Serif หรอ Tahoma การวางรปแบบ มความเรยบงาย ไมมความซบซอน วกวน หรอซ าไปซ ามาทจะท าใหเกดความสบสนกบผเ รยนได โดยทความเหมาะสมของขอความ พจารณาดานขนาดของขอความทเ ปนหวเ รองและขอความทเ ปนรายละเอยดของเนอหา มขนาดของขอความทเปนหวเรอง 18 พอยต และขนาดของขอความทเ ปนเ นอหาม ขนาด 14 พอยต และการใชส มสหลกประมาณ 2-3 ส สของตวอกษร และสของพนหลง เนนสทมความแตกตางกน ตวอกษรสด า -พนสฟา รองลงมาคอ ตวอกษรสด า -พนสขาว และตวอกษรสด า -พนสเทา ตามล าดบ

ระยะท 4 การประเมนการใชเวบไซตโรงเรยน 1) ระดบการใช เวบไซตโรงเ รยนเพอการเ รยนร ของผบรหารโรงเ รยน และครผ สอนใน

ภาพรวม อยในระดบมาก โดยมคาเฉลย เทากบ 4.19 เมอพจารณาเปนรายขอ พบวา ครไดรบการพฒนาการใชอนเทอรเนตและเรยนรการใชเวบไซตโรงเ รยน มคาเฉลยสงทสด โดยมคาเฉลยอยในระดบมากทสด เทากบ 4.84 รองลงมา คอ ครแสวงหาความรโดยใช เวบไซตโรงเ รยนเปนแหลงสบคน มคาเฉลยอยในระดบมากทสด เทากบ 4.51 นอกนนมการใชอยในระดบมาก

2) ระดบการใชเวบไซตโรงเรยนเพอการเรยนรของนกเ รยนในภาพรวม อยในระดบมาก โดยมคาเฉลย เทากบ 4.00 เมอพจารณาเปนรายขอ พบวา นกเรยนไดเรยนรการใชอนเทอรเนตและ ไดเ รยนรการใช เวบไซตโรงเรยน มคาเฉลยสงทสด โดยมคาเฉลยอยในระดบมากทสด เทากบ 4.80 รองลงมา คอ นกเ รยนใช เวบไซตโรงเรยนเปนแหลงสบคนเนอหาในบทเรยน มคาเฉลยอยในระดบมากทสด เทากบ 4.66 นอกน นมการใชอยในระดบมาก ยกเวนรายการนกเรยนเรยนรผาน E-learning จากลงคในเวบไซตโรงเ รยนมการใช เวบไซตโรงเรยน อยในระดบปานกลาง

3) ระดบความคดเหนของผบรหารโรงเรยน ครผสอนและนกเ รยนทมตอ เวบไซตโรงเ รยนในภาพรวม อยในระดบมาก โดยมคาเฉลย เทากบ 3.95 เมอพจารณาเปนรายขอ พบวา ทกขอมระดบความคดเหนอยในระดบมาก โดยทเวบไซตโรงเรยนมลงคส าหรบบรการฟรอเมล มคาเฉลยสงทสด โดยมคาเฉลยอยในระดบมาก เทากบ 4.35 รองลงมา คอ เวบไซตโรงเ รยนเขาง ายใช สะดวก มคาเฉลยอยในระดบมาก เทากบ 4.09 และเวบไซตโรงเรยนมบรการลงค ส าหรบ Search Engine ไวบรการ มคาเฉลยอยในระดบมาก เทากบ 4.07

39

2.2.3 การพฒนาเวบไซตของบณฑตวทยาลย มหาวทยาลยบรพา การวจยครง น จดมงหมายเพอพ ฒนาเวบไซตบณฑตวทยาลย มหาวทยาลยบรพา ใหมความเ หมาะสม ผวจยด าเ นนการวจยโดย ส ารวจสภาพปญหาและความตองการของผบรหารบณฑตวทยาลยโดยวธการสนทนากลมใช แบบสมภาษณเพอส ารวจสภาพปญหาและความตองการของผใช รวมถงการส ารวจเวบไซตของบณฑตวทยาลย มหาวทยาลยตาง ๆ น าขอมลทไดมาก าหนดคณสมบตของเวบไซตทจะพฒนา แลวด าเนนการพฒนาเวบไซตดวยโปรแกรมดรมเวบเวอรเอมเอกซ และการสรางภาพเคลอนไหวดวยโปรแกรมแฟลชเอมเอกซ แลวน าเวบไซตทพ ฒนาไปใหกลมตวอยางทดลองใชในขนตน 2 ครง พรอมท าการปรบปรง แลวใหผ เชยวชาญดานการจดท าเวบไซต จ านวน 5 ทาน ตรวจสอบความสมบรณของเวบไซต และท าการปรบปรงตามขอเสนอแนะจากนน นท าการประเมนเวบไซต โดยกลมตวอยางจ านวน 60 คน จ าแนกเปนอาจารย 15 คน และนสต 45 คนซงการไดมาดวยการสมอยางงาย เครองมอทใชในการประเมน คอ แบบประเมน ชนด มาตราฐานประ มาณคา 5 ระดบ โดยประเมนเวบไซตใน 4 ดาน คอ ดานรปแบบการน าเสนอและเลขคณต และคาความเ บยงเบนมาตรฐาน ผลทไดจากการวจย คอ 1. ไดเวบไซตของบญฑตวทยาลย มหาวทยาลยบรพา ทมคณสมบตทางการออกแบบ ตามหลกการออกแบบ สามารถเ รยกใช แบบฟอรม และฐานขอมลตาง ๆ ได 2. ผลการประเมน พบวา เ วบไซตของบญฑตวทยาลย มหาวทยาลย บรพา มความเหมาะสมโดยภาพรวมอยใ นระดบด ((+,c)=4.04) เวบไซตของบณฑตวทยาลย มหาวทยาลยบพา ทผ วจยไดพ ฒนาขน สามารถเปนสอกลางในการเผยแพรประชาสมพนธขอมลขาวสารตาง ๆ เ ปนแหลงสบคนขอมลทางวชาการ เ ปนชองทางในการตดตอสอสารระหวางอาจารย นสต และบคคลทวไป รวมถงเปนแหลงในการเ รยกใช ขอมล เชน แบบฟอรมตาง ๆ ทใชในการท าวทยานพนธ คมอการท าวทยานพนธฐานขอมลวทยานพนธ

40

บทท 3

วธด าเนนงานวจย

การท าโครงงานนเปนการท าโครงงานเพอพฒนาเวบไซตสาขาวชาการจดการอตสาหกรรมโดยพฒนาจากระบบเดม ดงน 3.1 เวบไซตระบบงานเดม

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

ดงนนผทศกษา จงมความเหนวาเวบไซตของสาขาวชาการจดการอตสาหกรรมควรไดรบการพฒนาและปรบปรง ขนใหม เพอเพมประสทธภาพในการใชงานใหมความสมบรณมากขน 3.1.1 หนาหลก ของเวบไซตระบบงานเดม

ภาพท 3.1 หนาหลก ของเวบไซตระบบงานเดม

41

3.1.2 หนาปรชญา ของเวบไซตระบบงานเดม

ภาพท 3.2 หนาปรชญา ของเวบไซตระบบงานเดม

3.1.3 หนาวสยทศนและพนธกจ ของเวบไซตระบบงานเดม

ภาพท 3.3 หนาวสยทศนและพนธกจ ของเวบไซตระบบงานเดม

42

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

ภาพท 3.4 หนาหลกสตร ของเวบไซตระบบงานเดม 3.1.5 หนาคณาจารย ของเวบไซตระบบงานเดม

ภาพท 3.5 หนาคณาจารย ของเวบไซตระบบงานเดม

43

3.1.6 ผลงานนกศกษา ของเวบไซตระบบงานเดม

ภาพท 3.6 หนาผลงานนกศกษา ของเวบไซตระบบงานเดม

3.1.7 หนากระดานสนทนา ของเวบไซตระบบงานเดม

ภาพท 3.7 หนากระดานสนทนา ของเวบไซตระบบงานเดม

44

3.2 การออกแบบระบบงานใหม 3.2.1 ความตองการของระบบงานใหม

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

3.2.2 การออกแบบระบบ ผ ดและระบบ - สามารถแกไข เพม ลบ ขอมลตางๆได - เผยแพร ขอมล ขาวสารตางๆได - ด าเนนการปรบปรงเวบไซตอยางตอเนองโดยผดแลระบบ ผใช - สามารถเขามาดกจกรรม ผลงานนกศกษา และขาวประชาสมพนธตางๆได - สามารถศกษาขอมลเกยวกบสาขาวชาการจดการอตสาหกรรม

45

บทท4 ผลการด าเนนงาน

หลงจากไดท าการวเคราะหและออกแบบระบบใหมของเวบไซตสาขาวชาการจดการ

อตสาหกรรมแลว จงไดด าเนนการพฒนาระบบงานใหม ซงผลการพฒนามดงน 4.1 เวบไซตระบบงานใหม

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

ภาพท 4.1 หนาหลกของเวบไซตระบบงานใหม

46

4.1.2 หนาปรชญา ของเวบไซตระบบงานใหม

ภาพท 4.2 หนาปรชญาของเวบไซตระบบงานใหม

47

4.1.3 หนาฐานขอมลปรญญานพนธ ของเวบไซตระบบงานใหม - หนาฐานขอมลปรญญานพนธ หนา 1

ภาพท 4.3 หนาฐานขอมลปรญญานพนธ หนา 1 ของเวบไซตระบบงานใหม

48

- หนาฐานขอมลปรญญานพนธ หนา 2


49



50

4.1.4 หนาหลกสตร ของเวบไซตระบบงานใหม

ภาพท 4.6 หนาหลกสตรของเวบไซตระบบงานใหม

51

4.1.5 หนาแผนการศกษาช นปท 1 ของเวบไซตระบบงานใหม

ภาพท 4.7 หนาแผนการศกษาช นปท 1 ของเวบไซตระบบงานใหม

52



53



54



55

4.1.9 หนาค าอธบายหลกสตร ของเวบไซตระบบงานใหม

ภาพท 4.11 หนาค าอธบายหลกสตร ของเวบไซตระบบงานใหม

56

4.1.10 หนาค าอธบายรายวชา ของเวบไซตระบบงานใหม - หนาค าอธบายรายวชา หนา 1

ภาพท 4.12 หนาค าอธบายรายวชา หนา 1 ของเวบไซตระบบงานใหม

57

- หนาค าอธบายรายวชา หนา 2


58



59


ภาพท 4.15 หนาค าอธบายราชวชาหนา 4 ของเวบไซตระบบงานใหม

60


ภาพท 4.16 ค าอธบายรายวชา หนา 5 ของเวบไซตระบบงานใหม

61



62



63



64



65



66

4.1.11 หนาระบบการจดการศกษา ของเวบไซตระบบงานใหม

ภาพท 4.22 หนาระบบการจดการศกษา ของเวบไซตระบบงานใหม

67

4.1.12 หนาแผนการพฒนาปรบปรง ของเวบไซตระบบงานใหม

ภาพท 4.23 หนาแผนการพฒนาปรบปรง ของเวบไซตระบบงานใหม

68

4.1.13 หนาคณาจารย ของเวบไซตระบบงานใหม

ภาพท 4.24 หนาคณาจารย ของเวบไซตระบบงานใหม

69

4.1.14 หนากจกรรมสาขา ของเวบไซตระบบงานใหม

ภาพท 4.25 หนากจกรรมสาขา ของเวบไซตระบบงานใหม

70

บทท 5 สรปผล และขอเสนอแนะ

5.1 สรปผล

โครงงานนจดท าขนเพอพ ฒนาระบบเวบไซตของสาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย มหาวทยาลยราชภฏอดรธาน เนองจากระบบงานเดมไมไดรบการพฒนาอยางตอเ นอง ท าใหไม มการเพมเตม แกไข หรอปรบปรง เนอหาขอมลตางๆในเวบไซต สวนของรปแบบเวบไซตไมมความสมบรณ ท าใหเกดความไมสะดวกตอคณาจารย นกศกษา บคคลทวไป ในการเขาไปดขอมลตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรม จากเหตผลดงกลาวผจดท าจงมแนวคดทจะน าระบบงานเดมมาพฒนาใหม ทงหมด โดยน าโปรแกรม Macromedia Dreamweaver 8 , Adobe Photoshop Cs2 , ภาษา HTML มาใชในการพฒนาระบบงานใหม 5.1.1 วตถประสงคม3 ประการดงน 5.1.1.1 เพอปรบปรงและเพมเตมขอมล และขาวสาร ใหม ๆ ของสาขาวชาการจดการอตสาหกรรม 5.1.1.2 เพออ านวยความสะดวกแกผใชในการตดตอ หรอ ดขอมลทเกยวของกบสาขาวชาการจดการอตสาหกรรม 5.1.1.3 เพอใหไดระบบงานใหมมประสทธภาพและความสมบรณของขอมลมากขน 5.1.2 ความสามารถของระบบงานใหมแบงออกเปน 2 สวน ดงน 5.1.2.1 สวนจดการระบบ เปนสวนของผดแลระบบหรอผทมสทธในการจดการระบบ - สามารถท าการจดการกบเวบไซตได - สามารถเพม ลบ แกไข ขอมลตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรมได - ก าหนดขอบเขตของผใชงาน 5.1.2.2 สวนของผใช - สามารถดขอมล ขาวสารตางๆทเกยวของกบสาขาวชาการจดการอตสาหกรรมได - สามารถดฐานขอมลปรญญานพนธของสาขาวชาการจดการอตสาหกรรมได 5.1.3 ประโยชนทคาดวาจะไดรบจากระบบงานใหมม 3 ประการ ดงน 5.1.3.1 มการจดการขอมลทเปนระบบท าใหผใชเขาถงขอมลไดงายยงขน 5.1.3.2 เนอหา ขอมลในเวบไซตมการแกไข หรอปรบปรงอยางตอเนองโดยผดแลระบบ

71

5.1.4 สรปผลการด าเนนงาน รปแบบหนาเวบไซต แบงออกเปน 6 สวนดงน 5.1.4.1 หนาหลก

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

ภาพท 5 .1 สรปผลการพฒนาหนาหลก

72

5.1.4.2 หนาปรชญา

การพฒนาหนาปรชญา จากเวบไซตระบบงานเดม ท าการออกแบบรปแบบเวบไซตใหม เพมเนอหา ขอมลลงไป เพมขอความปรชญาของสาขาวชาการจดการอตสาหกรรม ลงในเวบไซตระบบงานใหม

ภาพท 5.2 สรปผลการพฒนาหนาปรชญา

73

5.1.4.3 หนาฐานขอมลปรญญานพนธ

การพฒนาหนาฐานขอมลปรญญานพนธ จากเวบไซตระบบงานเดมไมมหนาเวบฐานปรญญานพนธ ผจดท าไดเพมหนาฐานปรญญานพนธลงไปเวบไซตระบบงานใหม และไดแบงเนอหาออกเปน 3 หนายอย 38 เรอง ดงน

1) หนาฐานขอมลปรญญานพนธ หนา 1 ม 15 เรอง 2) หนาฐานขอมลปรญญานพนธ หนา 2 ม 14 เรอง 3) หนาฐานขอมลปรญญานพนธ หนา 3 ม 9 เรอง - หนาฐานขอมลปรญญานพนธ หนา 1

ภาพท 5 .3 สรปผลการพฒนาหนาฐานขอมลปรญญานพนธ หนา 1

74



75



76

5.1.4.4 หนาหลกสตร

การพฒนาหนาหลกสตร จากเวบไซตระบบงานเดม ซงมแตเนอหาโครงสรางหลกสตร ผจดท าไดเพมเนอหา ขอมลลงไปในเวบไซตระบบงานใหมโดยไดแบงเนอหาออกเปน 8 หนายอย ดงน

1) แผนการศกษาช นปท 1 2) แผนการศกษาช นปท 2

3) แผนการศกษาช นปท 3 4) แผนการศกษาช นปท 4 5) หลกสตร 6) ค าอธบายรายวชา 7) ระบบการจดการศกษา 8) แผนการพฒนาปรบปรง

ภาพท 5 .6 สรปผลการพฒนาหนาหลกสตร

77

- หนาแผนการศกษาช นปท 1 แสดงหมวดวชา รหสวชา ชอวชา จ านวนหนวยกต ของ

แผนการศกษาช นปท 1 ภาคเรยนท 1 และ ภาคเรยนท 2

ภาพท 5.7 สรปผลการพฒนาหนาแผนการศกษาช นปท 1

78

- หนาแผนการศกษาช นปท 2 แสดงหมวดวชา รหสวชา ชอวชา จ านวนหนวยกต ของ

แผนการศกษาช นปท 2 ภาคเรยนท 1 และ ภาคเรยนท 2


79

- หนาแผนการศกษาช นปท 3 แสดงหมวดวชา รหสวชา ชอวชา จ านวนหนวยกต ของแผนการศกษาช นปท 3 ภาคเรยนท 1 ภาคเรยนท 2 และภาคเรยนท 3


80

- หนาแผนการศกษาช นปท 4 แสดงหมวดวชา รหสวชา ชอวชา จ านวนหนวยกต ของแผนการศกษาช นปท 4 ภาคเรยนท 1 และ ภาคเรยนท 2


81

- หนาหลกสตร อธบายเกยวกบหลกสตรวทยาศาสตรบณฑต สาขาวชาการจดการอตสาหกรรม หลกสตรปรบปรง พ.ศ. 2554 อธบายคณสมบตของผเขารบการศกษาตอ สาขาวชาการจดการอตสาหกรรม

ภาพท 5.11 สรปผลการพฒนาหนาหลกสตร

82

- หนาค าอธบายรายวชา แบงออกเปน 10 หนายอย อธบายเกยวกบรายวชาทอยในหลกสตรของ สาขาวชาการจดการอตสาหกรรม เพอใหผ ทจะศกษาตอมความเขาใจในรายวชาตางๆ มากขน และไดแบงเนอหาออกเปน 10 หนายอย ม 59 รายวชาดงน

- ค าอธบายรายวชา หนา 1

ภาพท 5.12 สรปผลการพฒนาหนาค าอธบายรายวชา หนา 1

83



84



85



86



87



88



89



90



91



92

- หนาระบบการจดการศกษา อธบายเกยวกบระบบการจดการศกษาและด าเนนการหลกสตร มหวขอ ดงน 1) ระบบการจดการศกษาภาคฤดรอน 2) การด าเนนการหลกสตร วน – เวลา ในการด าเนนการเรยนการสอน 3) จ านวนหนวยกตการลงทะเบยนเรยน 4) ระยะเวลาการส าเรจการศกษา

ภาพท 5.22 สรปผลการพฒนาหนาระบบการจดการศกษา

93

- หนาแผนการพฒนาปรบปรง อธบายแผนการพฒนาปรบปรงของสาขาวชาการจดการอตสาหกรรม ซงมหวขอ ดงน 1) แผนการพฒนา/เปลยนแปลง 2) กลยทธ 3) หลกฐานและตวบงช

ภาพท 5.23 สรปผลการพฒนาหนาแผนการพฒนาปรบปรง

94

5.1.4.5 หนาคณาจารย การพฒนาหนาคณาจารย จากเวบไซตระบบงานเดมทไมมรปคณาจารยและยงเปนขอมลเกาไมได

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

ภาพท 5.24 สรปผลการพฒนาหนาคณาจารย

95

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

ภาพท 5.25 สรปผลการพฒนาหนากจกรรมสาขา

5.2 ขอเสนอแนะ 5.2.1 ควรใหมความรและความสามารถในการดแล และพฒนาเวบไซต ท าหนาท ดแลระบบของเวบไซตสาขาวชาการจดการอตสาหกรรม 5.2.2 เวบไซตสาขาวชาการจดการอตสาหกรรม ควรไดรบการพฒนา และดแลระบบอยางตอเนอง เชน ควรมการอพเดททางดานเนอหา ขาวสารตางๆ ทเกยวของกบสาขาวชาการจดการอตสาหกรรมอยางสม าเสมอ 5.2.3 ส าหรบผทจะพฒนาระบบตอไป ควรศกษาความตองการดานหนา และรปแบบของเวบไซตสาขาวชาการจดการอตสาหกรรมของผใชบรการกอนการพฒนาเวบไซต และควรศกษาปญหาในการใช เวบไซตสาขาวชาการจดการอตสาหกรรมเพอจะน ามาแกไข และพฒนาตอไป

96

บรรณานกรม

โอภาส เอยมสรวงศ. 2545. การวเคราะหและออกแบบระบบ. กรงเทพฯ : ออฟเซท เพรส. จราภรณ สธมมสภา และ คณะ. 2539. ระบบสารสนเทศเพอการจดการฐานขอมล. นนทบร :

โรงพมพมหาวทยาลยสโขทยธรรมาธราช . บญสร สวรรณเพชร. 2542. รวมศพทคอมพวเตอรส าหรบนกศกษา . กรงเทพ : เอสแอนดเคบค. HTTP://WWW.THAICOOPERATIVE.ORG HTTP://WWW.MH.AC.TH HTTP://SCHOOL.OBEC.GO.TH HTTP://WWW.COM-LEARNING2U.COM HTTP://WWW.OKNATION.NET

97

ประวตผวจย

ชอ นายพชตพล ขนธเดช วน เดอน ปเกด 6 สงหาคม 2531 ทอย บานเลขท 21 หม2 ต าบลอบมง อ าเภอหนองววซอ จงหวดอดรธาน ประวตการศกษา ระดบปรญญาตร สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย มหาวทยาลย

ราชภฏ อดรธาน พ.ศ. 2552-2554 ระดบประกาศนยบตรวชาชพช นสง สาขาวชาเทคโนโลยสารสนเทศ วทยาลยเทคนคอดรธาน พ.ศ. 2550-2552 ระดบประกาศนยบตรวชาชพ สาขาวชาอเลกทรอนกส วทยาลยเทคนคอดรธาน พ.ศ. 2548-2550 ระดบมธยมตน โรงเรยนบานโคกผกหอม พ.ศ. 2545-2548

98

ชอ นางสาวพรรณราย ศรลาภม วน เดอน ปเกด 7 กนยายน 2531 ทอย บานเลขท 671 หม 1 ต าบลบานเลอม อ าเภอเมอง จงหวดอดรธาน ประวตการศกษา ระดบปรญญาตร สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย มหาวทยาลย

ราชภฏอดรธาน พ.ศ. 2552-2554 ระดบประกาศนยบตรวชาชพช นสง สาขาวชาเทคโนโลยสารสนเทศ วทยาลยเทคนคอดรธาน พ.ศ. 2550-2552 ระดบประกาศนยบตรวชาชพ สาขาคอมพวเตอรธรกจ โรงเรยนโปลเทคนคอดรธาน พ.ศ. 2548-2550 ระดบมธยมตน โรงเรยนสตรราชนทศ พ.ศ. 2545-2548

ประวตผวจย

ชอ นายพชตพล ขนธเดช วน เดอน ปเกด 6 สงหาคม 2531 ทอย บานเลขท 21 หม2 ต าบลอบมง อ าเภอหนองววซอ จงหวดอดรธาน ประวตการศกษา ระดบปรญญาตร สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย

มหาวทยาลยราชภฏ อดรธาน พ.ศ. 2552-2554 ระดบประกาศนยบตรวชาชพช นสง สาขาวชาเทคโนโลยสารสนเทศ วทยาลยเทคนคอดรธาน พ.ศ. 2550-2552 ระดบประกาศนยบตรวชาชพ สาขาวชาอเลกทรอนกส วทยาลยเทคนคอดรธาน พ.ศ. 2548-2550 ระดบมธยมตน โรงเรยนบานโคกผกหอม พ.ศ. 2545-2548

ชอ นางสาวพรรณราย ศรลาภม วน เดอน ปเกด 7 กนยายน 2531 ทอย บานเลขท 671 หม 1 ต าบลบานเลอม อ าเภอเมอง จงหวดอดรธาน ประวตการศกษา ระดบปรญญาตร สาขาวชาการจดการอตสาหกรรม คณะเทคโนโลย

มหาวทยาลยราชภฏอดรธาน พ.ศ. 2552-2554 ระดบประกาศนยบตรวชาชพช นสง สาขาวชาเทคโนโลยสารสนเทศ วทยาลยเทคนคอดรธาน พ.ศ. 2550-2552 ระดบประกาศนยบตรวชาชพ สาขาคอมพวเตอรธรกจ โรงเรยนโปลเทคนคอดรธาน พ.ศ. 2548-2550 ระดบมธยมตน โรงเรยนสตรราชนทศ พ.ศ. 2545-2548

µ¦¡´ µÁªÈ Å rµ µª· µ µ¦ ´ µ¦°» µ® ¦¦¤ website of...

Documents