หลกการออกแบบ

สาขาวชาคอมพวเตอรศกษา คณะครศาสตร มหาวทยาลยราชภฏมหาสารคาม

1

หลกการออกแบบ

หลกการออกแบบเวบไซต

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

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

1. ความเรยบงาย (Simplicity) หมายถง การเ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอเรง

ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปเะรบกวนสายตาและสรางความค าราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก

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

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

3. ความเปนเอกลกษณ (Identity) ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองเากเวบไซตเะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส

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

23

ผจดทา นางสาวทพวลย วนทะวธ 533410080309

นางสาวนเพร ทรพยสมบต 533410080312

นางสาวปรญดา วารศร 533410080316

นางสาวสายสมร ชมพทอง 533410080327

สาขาวชาคอมพวเตอรศกษา หม 3 ป 4 คณะครศาสตร

เสนอ

อาเารยปวรศ สารมะโน

สมดเลมเลกนเปนสวนหนงในรายวชา โปรแกรมสรางเวปเพอการศกษา

มหาวทยาลยราชภฏมหาสารคาม

เนอหาทมประโยชน

*วทยาลยเซนตหลยส มเนอหาทท าใหนกศกษาในมหาวทยาลยไดความรไดประโยชนทงงานวชาการ งานดานการศกษาทเปนผลกบตวนกศกษา

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

3

4. เนอหา (Useful Content) ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใช

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

5. ระบบเนวเกชน (User-Friendly Navigation) เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะเะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนเงเปรยบเสมอนปายบอกทาง

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

6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal) ลกษณะทนาสนใเของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใเนนสวนประกอบตาง ๆ ควร

มคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน 7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility) การใชงานของเวบไซตนนไมควรมขอบเ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใด

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

8. ความคงทในการออกแบบ (Design Stability) ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความส าคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและ

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

9. ความคงทของการทางาน (Function Stability) ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวเสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ใน

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

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

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

ความลมเหลวทพบเหนไดทวไป ไดแก เวบทแสดงขอความวาอยระหวางการกอสราง (Under Construction หรอ Coming soon) ซงแสดงใหเหนถงการขาดการวางแผนทดบางเวบถอไดวาตายไปแลว เนองเากขอมลไมทนสมย ขาดการพฒนาปรบปรงเทคโนโลยลาสมย ลงคผดพลาด สงเหลานแสดงใหเหนถงการขาดการดแล ตรวเสอบและพฒนาใหทนสมยอยเสมอ

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

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

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

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

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

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

21

เนอหาเปนหมวดหม

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

คณะวชา หนวยงานวทยาลยฯเปนตน(เากhttp://www.ic-myhost.com)

ความเปนเอกลกษณ

*วทยาลยเซนตหลยสมการออกแบบเวบตไซตทเปนเอกลกษณเฉพราะทโดดเดน โดยมพระแมฟาตมาอยดานขวามอ ซงเปนสญลกษณของศาสนาครสต และมรปพระ

เยซครสต อยดานซายมอ มตราสญลกษณอยทางดานบนซาย และมดอกไมประเ ามหาวทยาลยอยดานบนขวา (เากทฤษฏการออกแบบเวบไซต อ.ชยมงคล เทพวงษ)

5

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

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

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

ออกแบบหนาเวบไซต (Page Design) หนาเวบเปนสงแรกทผใชเะไดเหนขณะทเปดเขาสเวบไซต และยงเปนสงแรกทแสดงถงประสทธภาพในการออกแบบเวบไซตอกดวย หนาเวบเงเปนสงส าคญ

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

หลกส าคญในการออกแบบหนาเวบกคอ การใชรปภาพและองคประกอบตาง ๆ รวมกนเพอสอความหมาย เกยวกบเนอหาหรอลกษณะส าคญของเวบไซต โดยมเปาหมายส าคญเพอการสอความหมายทชดเเนและนาสนใเ บนพนฐานของความเรยบงายและความสะดวกของผใช การออกแบบโครงสรางเวบไซต (Site Structure Design)

โครงสรางเวบไซท ( Site Structure ) เปนแผนผงของการล าดบเนอหาหรอการเดวางต าแหนงเวบเพเทงหมด ซงเะท าใหเรารวาทงเวบไซทประกอบไปดวยเนอหาอะไรบาง และมเวบเพเหนาไหนทเกยวของเชอมโยงถงกน ดงนนการออกแบบโครงสรางเวบไซทเงเปนเรองส าคญ เปรยบเสมอนกบการเขยนแบบอาคารกอนทเะลงมอสราง เพราะเะท าใหเรามองเหนหนาตาของเวบไซทเปนรปธรรมมากขน สามารถออกแบบระบบเนวเกชนไดเหมาะสม และเปนแนวทางการท างานทชดเเน ส าหรบขนตอนตอๆไป นอกเากนโครงสรางเวบไซททดยงชวยใหผชมไมสบสนและคนหาขอมลทตองการไดอยางรวดเรว วธการเดโครงสรางเวบไซทสามารถท าไดหลายแบบ แตแนวคดหลกๆทนยมใชกนมอย 2 แบบคอ

เดตามกลมเนอหา ( Content-based Structure ) เดตามกลมผชม ( User-based Structure )

รปแบบของโครงสรางเวบไซต เราสามารถวางรปแบบโครงสรางเวบไซทไดหลายแบบตามความเหมาะสม เชน แบบเรยงล าดบ ( Sequence ) เหมาะส าหรบเวบไซททมเ านวนเวบเพเไมมากนก หรอเวบไซททมการน าเสนอขอมลแบบทละขนตอน แบบระดบชน ( Hierarchy ) เหมาะส าหรบเวบไซททมเ านวนเวบเพเมากขน เปนรปแบบทเราเะพบไดทวไป แบบผสม ( Combination ) เหมาะส าหรบเวบไซททซบซอน เปนการน าขอดของรปแบบทง 2 ขางตนมาผสมกน

19

ความสมาเสมอ

*วทยาลยเซนตหลสมการออกแบบทสม าเสมอในทกหนา ของเวบไซต องคประกอบหลกๆทส าคญเะอยในต าแหนงเดมในทกหนา

เพอใหดงาย สม าเสมอมองเหนไดชดเเน

*(เากทฤษฏการออกแบบเวบไซต อ.ชยมงคล เทพวงษ)

วเคราะหทฤษฎการออกแบบเวบไซตวทยาลยเซนตหลยส

ทฤษฎความเรยบงาย

วทยาลยเซนตหลยสมการออกแบบเวบไซตทเรยบงาย ดแลวสบายตา การใชตวอกษรเหนไดชดเเน ไมมภาพเคลอนไหวตลอดเวลาเนท าใหเวยนหว มการแบง

หมวดหม ตางๆไวอยางชดเเน ท าใหสะดวกคนหาไดงาย (เากทฤษฏการออกแบบเวบไซต อ.ชยมงคล เทพวงษ)

7

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

แตยงสามารถท าใหเหนถงความแตกตางระหวางเวบไซตได สเปนองคประกอบหลกส าหรบการตกแตงเวบ เงเ าเปนอยางยงทเะตองท าความเขาใเเกยวกบการใชส ระบบสทแสดงบนเอคอมพวเตอร มระบบการแสดงผลผานหลอดล าแสงทเรยกวา CRT (Cathode ray tube) โดยมลกษณะระบบสแบบบวก อาศยการ

ผสมของของแสงสแดง สเขยว และสน าเงน หรอระบบส RGB สามารถก าหนดคาสเาก 0 ถง 255 ได เากการรวมสของแมสหลกเะท าใหเกดแสงสขาว มลกษณะเปนเดเลก ๆ บนหนาเอไมสามารถมองเหนดวยตาเปลาได เะมองเหนเปนสทถกผสมเปนเนอสเดยวกนแลว เดแตละเดหรอพกเซล (Pixel) เปนสวนประกอบของภาพบนหนาเอคอมพวเตอร โดยเ านวนบตทใชในการก าหนดความสามารถของการแสดงสตาง ๆ เพอสรางภาพบนเอนนเรยกวา บตเดป (Bit-depth) ในภาษา HTML มการก าหนดสดวยระบบเลขฐานสบหก ซงมเครองหมาย (#) อยดานหนาและตามดวยเลขฐานสบหกเ านวนอกษรอก 6 หลก โดยแตละไบต (byte) เะมตวอกษรสองตว แบงออกเปน 3 กลม เชน #FF12AC การใชตวอกษรแตละไบตนเพอก าหนดระดบความเขมของแมสแตละสของชดส RGB โดย 2 หลกแรก แสดงถงความเขมของสแดง 2 หลกตอมา แสดงถงความเขมของสเขยว 2 หลกสดทายแสดงถงความเขมของสน าเงน

สมอทธพลในเรองของอารมณการสอความหมายทเดนชด กระตนการรบรทางดานเตใเมนษย สแตละสใหความรสก อารมณทไมเหมอนกน สบางสใหความรสกสงบ บางสใหความรสกตนเตนรนแรง สเงเปนปเเยส าคญอยางยงตอการออกแบบเวบไซต ดงนนการเลอกใชโทนสภายในเวบไซตเปนการแสดงถงความแตกตางของสทแสดงออกทางอารมณ มชวตชวาหรอเศราโศก รปแบบของสทสายตาของมนษยมองเหน สามารถแบงออกเปน 3 กลม คอ 1. สโทนรอน (Warm Colors) เปนกลมสทแสดงถงความสข ความปลอบโยน ความอบอน และดงดดใเ สกลมนเปนกลมสทชวยใหหายเากความเฉอยชา มชวตชวามากยงขน 2. สโทนเยน (Cool Colors) แสดงถงความทดสภาพ ออนโยน เรยบรอย เปนกลมสทมคนชอบมากทสด สามารถโนมนาวในระยะไกลได 3. สโทนกลาง (Neutral Colors) สทเปนกลาง ประกอบดวย สด า สขาว สเทา และสน าตาล กลมสเหลานคอ สกลางทสามารถน าไปผสมกบสอน ๆ เพอใหเกดสกลางขนมา ** สนนมความส าคญอยางยงในการออกแบบเวบไซต การเลอกสใหเขากบเนอหาของเวบไซต เะท าใหเวบไซตมความนาเชอถอยงขน และยงสงผลอยางมากกบความสวยงามของเวบไซต

สบอกความรสก สฟา

ใหความรสกสงบ สขม สภาพ หนกแนน เครงขรม เอาการเอางาน ละเอยด รอบคอบ สงางาม มศกดศร สงศกด เปนระเบยบถอมตน

สามารถลดความตนเตน และชวยท าใหมสมาธ แตถามสน าเงนเขมเกนไป กเะท าใหรสกซมเศราได

สเขยว

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

ธรรมชาต ความปลอดภย ปกต ความสข ความสขม เยอกเยน

สเหลอง

เปนสแหงความเบกบาน เราอารมณ และเรยกรองความสนใเ ใหความรสกแเมใส ความสดใส ความราเรง ความเบกบานสดชน ชวตใหม ความสด ใหม ความ

สกสวาง การแผกระเาย อ านาเบารม

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

สแดง

เปนสทสรางความตนเตน และกระตนสมอง สแดงปานกลางแสดงถงความมสขภาพด ความมชวต ความรก ความส าคญ ความอดมสมบรณ ความมงคง

สแดงเดมความหมายแฝงดานกามารมณ นอกเากนสแดงยงสรางความรสกรนแรง ใหความรสกรอน กระตน ทาทาย เคลอนไหว ตนเตน เราใเ มพลง มนเะใชกน

กรณทเกยวกบความตนเตน หรออนตราย

สมวง

ใหความรสก มเสนห นาตดตาม เรนลบ ซอนเรน มอ านาเ มพลงแฝงอย ความรก ความเศรา ความผดหวง ความสงบ ความสงศกด

เปนสทปลอบโยน และชวยลดความเครยด แตเดมสมวงไดมาเากสตวมกระดอง,เปลอก ในทะเลเมดเตอรเรเนยน มชอวา Purpura เงไดชอภาษาองกฤษวา

Purple

17

6.มาถงตรงนเราไดท าการตดตงjoomla เสรเเรยบรอยแลว แตยงใชงานไมได

ตองลบโฟลเดอร installation กอน กดปม..ลบโฟลเดอร installation

8.เสรเเรยบรอยใหคลก ปม ดหนาเวบ เะปรากฏหนาเวบ ดงรปขางลางน

5.ตงคาหลกของเวบ

ชอเวบ : ทดลองตดตง joomla2.5 (พมพชออะไรกได สามารถแกไขไดภายหลงนะ)

อเมลของคณ : jaideiw_may@hotmail.com (เปนเมลของผดแลระบบ ระบบเะตดตอกบadminทเมลน)

รหสผานผดแล : admin (ก าหนดอะไรกได )

ยนยนรหสผานผดแล : admin

ขอมลตวอยาง ใหกดทปม ..ตดตงขอมลตวอยาง..

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

กรอบขอมลเสรเกคลก ตอไป ไดเลย

9

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

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

สเทา ใหความรสก เศรา อาลย ทอแท ความลกลบ ความหดห ความชรา ความสงบ ความเงยบ สภาพ สขม ถอมตน สนมขอดคอท าใหเยน แตสรางความสรางความรสกหมนหมองได ควรใชรวมกบสทมชวต โทนสวางอยางนอยหนงส

สขาว ใหความรสก บรสทธ สะอาด สดใส เบาบาง ออนโยน เปดเผย การเกด ความรก ความหวง ความเรง ความเมตตา ความศรทธา ความดงาม ใหความรสกรนเรง โดยเฉพาะเมอใชกบสแดง เหลอง และสม ** ในการสรางเวบกควรทเะเลอกสใหเหมาะกบสม

ทฤษฎส รปดานลางวงลอความสมพนธของส ซงบรรเสทนยมใชในเวบไซตไว 20 ส เหมาะส าหรบผทก าลงเลอกสทเะใชในเวบไซตอยเราสามารถใชความสมพนธของวงลอ

ขอสนใหเกดประโยชนไดอยางมากมาย เชน

ตองการออกแบบใหเวบไซตรสกตดกนโดยสนเชง เราอาเใชชดส 4 สทท ามมกน 90 องศา เชนดงตวอยางถาเราเลอกชดส 1 , 6 , 11 , 16 สทไดเะตดกนชดเเน

ถาตองการใหเวบไซตดกลมกลนกอาเเลอกชดสใกลเคยงกนกไดเชน เลอกชดสเขยวเบอร 8 , 9 , 10 , 11 กเะไดสในโทนสเขยวสวาง

ดานลางเปนเบอรสทใชแบงตามมาตราฐานการอางองของส

Hexadecimal - Browser Colour Codes

1 - #FF0000 6 - #FFFF00 11 - #009900 16 - #0000FF

2 - #FF3300 7 - #CCFF00 12 - #006633 17 - #3300CC

3 - #FF6600 8 - #99CC00 13 - #006666 18 - #660099

4 - #FF9900 9 - #66CC00 14 - #003399 19 - #990066

5 - #FFCC00 10 - #339900 15 - #0033CC 20 - #CC0033

15

3.หนานอธบายเกยวกบลขสทธ กคลก ตอไป ไดเลย

4. การตงคาฐานขอมล

ชนดของฐานขอมล : Mysql (ตองเลอก Mysql เทานนนะครบ)

ชอโฮส : localhost

ชอผใชฐานขอมล : root (คาปกต admin ของฐานขอมล Mysqlเะ ชอ root)

รหสผาน : *** (หรออาเไมตงกได)

ชอฐานขอมล : joomla25 (ตงชอฐานขอมลอะไรกได แตตองไมซ ากนนะ)

ค าน าหนาตาราง : (อนนไมตองสนใเกได ใหเปนตามคาปกตทเวบก าหนดมากได)

เากนนคลกปม ตอไป ไดเลย

เรมการตดตง 1. เปด web browser พมพ URL ชอไปท http://localhost/joomla25/ เะไดหนาเอดงรป ในขนตอนนใหเลอก ภาษาไทย แลวคลก ปม ตอไป

2.เะสงเกตวาบนหนาตาง เปนค าวา ใช ทงหมด แลวเงคลกปม ตอไป

11

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

โปรแกรมทใชในการทาเวบ "Joomla"

joomla เปน CMS ทไดรบความนยมเปนอนดบตน ๆ เพราะมระบบการเดการเนอหาทมรปแบบสากล การปรบแตงหนาตาของเวบไซตท าไดงาย เพราะถกออกแบบมาใหรองรบกบเทคโนโลยการ ออกแบบเวบไซต สมยใหม ไมวาเะเปนการรองรบ Flash หรอ GIF Animation นอกเากนคณยงสามารถ Download Template ไดอยางมากมายมทงแบบทสามารถน ามาใชงานไดฟร ** ส าหรบใครทยงไมรเกวา CMS คออะไร ขออธบายสน ๆ เพมเตมดงนนะคะ CMS นนเปนอกษรยอของ ค าวา "Content Management Sys-tem" ซงเมอเราแปลเปนภาษาไทย หมายถง ระบบบรหารเดการเนอหาของเวบไซต นนหมายความวา สงทเราเะตองดแลกคอเนอหาของเวบไซต เชน การเพมบทความ การเพมรปภาพ หรอการปรบแตงโยกยายโมดลตาง ๆ ไมเ าเปนเะตองมานงเขยน Code ดวยภาษา HTML, PHP, SQL เพยงแตเรยนรวธการตดตง การปรบแตง การใชงาน CMS เทานน ส าหรบ Code ตาง ๆ ทน ามาสราง และ ออกแบบเวบไซต เะท าโดยทมงานของผพฒนา CMS ของแตละทม ซงท าใหประหยดเวลาในการสราง และออกแบบเวบไซต ไดอยางมาก ขอดของ CMS 1. ผใชงานไมเ าเปนตองมความรเรองการท าเวบไซต เพยงแคเคยพมพ หรอเคยโพสขอความในอนเทอรเนต กสามารถมเวบไซตเปนของตวเองได 2. ไมเสยเวลาในการพฒนาเวบไซต ไมเสยเงนเ านวนมาก 3. งายตอการดแล เพราะมระบบเดการทกอยางใหเราหมด 4. มระบบเดการทเราสามารถหามาใสเพมไดมากมาย อยางเชน ระบบแกลลอร 5. สามารถเปลยนหนาตาเวบไซตไดงายๆ เพยงแคโหลดทม (Theme) ของ CMS นนๆ

วธตดตง ขนตอน การตดตง joomla 2.5 ขนกอนการตดตง Joomla คอโปรแกรม OpenSource เ าพวก CMS (Content Management System) ซงใชส าหรบสรางเวบไซต มความปลอดภยสง และเปนทนยมมาก กอนการตดตงโปรแกรมเราตองเ าลองเครองของเราใหเปนเครอง sever กอน ตามลงค ตดตง php Mysql Apache โปรแกรมเ าลอง Web Server ดวย XAMPP แลวเตรยมฐานขอมลตามวธดานลาง

เมอเสรเแลวเะไดดงรป

13

ขนการตดตงโปรแกรม โหลดโปรแกรม Joomla 2.5 กอน (โหลดไดท http://www.joomla.org/download.html ) หลงเากโหลดไฟลโปรแกรม joomla2.5 มาเรยบรอยแลว ใหท าการ Unzip ไฟลโปรแกรม ไปไวท D:\xampp\htdocs\joomla25 ตวอยางวธการ Unzip โปรแกรม