- wordpress.com...dreamweaver ได้แก่ show code view, show code and design view และ...
TRANSCRIPT
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 1
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
หลกสตร การสรางเวบไซตอยางงายไดดวยตนเอง
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 2
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การสรางเวบไซตอยางงายไดดวยตนเอง
จ านวน 18 ชวโมง วตถประสงค
1. สรางและจดการเวบไซตและเวบเพจได 2. สามารถใชเครองมอตางๆ ของโปรแกรม Macromedia Dreamweaver ได
ความตองการของระบบ
1. ระบบปฏบตการ Windows XP/2000/ME/98 2. โปรแกรม Macromedia Dreamweaver
กลมเปาหมาย ขาราชการในหนวยงานภาครฐ นกศกษาและประชาชนทวไป ทมพนฐาน การใชงานระบบปฏบตการ Windows XP มากอน ประโยชนทไดรบ ผเขารบการอบรมสามารถน าความร ความสามารถทไดรบจากการอบรมไปประยกตใชในการท างานและการด าเนนชวตประจ าวนไดอยางมประสทธภาพ หวขอการอบรม
หลกสตรการใชงาน Dream weaver เบองตน เปนโปรแกรมในการสราง Web Site มออาชพทไดรบความนยมอยางสง ทดลองตงแตขนพนฐานในการสราง Web Site ผเขาอบรมจะไดเรยนร, การจดหนา Web ดวยวธการท า Layout, Frame, Table, Layer, ตลอดจนการสราง Web Site ของทานใหไดจรงอยางงาย จนถงขนการน า Web Site ของทานขนใชจรงในระบบ Internet
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 3
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
สารบญ บทท หนา บทท 1 Introduction to Internet ............................................................................................... 5
บทท 2 Introduction to Macromedia Dreamweaver .............................................................. 7
การเปดโปรแกรม ................................................................................................................... 7
หนาจอ Start Page ................................................................................................................ 7
สวนประกอบของ Dreamweaver 8 ........................................................................................ 8
บทท 3 เรมตนสราง Web Site ดวย Macromedia Dreamweaver ......................................... 10
วางแผนสราง Web Site ....................................................................................................... 10
การสราง Site ...................................................................................................................... 10
การตงคาการใชภาษาไทย .................................................................................................... 11
การก าหนดคณสมบตพนฐานใหกบ Web Page .................................................................... 12
บทท 4 การใสขอความลงใน Web Page ................................................................................ 15
การเวนวรรคระหวางขอความ ............................................................................................... 15
การขนบรรทดใหมในยอหนาเดยวกน ................................................................................... 15
การแทรกสญลกษณพเศษ .................................................................................................... 15
การจดรปแบบขอความ ........................................................................................................ 16
การน าเขาขอความจากโปรแกรมอน ..................................................................................... 16
บทท 5 การแทรกรปภาพลงใน Web Page ............................................................................. 18
ชนดของรปภาพ................................................................................................................... 18
การใสรปภาพใหเปนพนฉากหลง .......................................................................................... 19
บทท 6 การท า Hyperlink และการก าหนดคาตางๆ .............................................................. 20
การสราง Hyperlink ภายใน Web Site เดยวกน ................................................................... 20
การสราง Hyperlink ไปยง Web Site อน .............................................................................. 21
การสราง Hyperlink เพอสง E-mail ...................................................................................... 21
Image Map ......................................................................................................................... 22
บทท 7 การสรางตาราง ........................................................................................................... 23
เรมสรางตาราง ..................................................................................................................... 23
การพมพขอความลงในตาราง ............................................................................................... 23
การก าหนดคณสมบตของตาราง ........................................................................................... 24
การปรบแตงตาราง ............................................................................................................... 24
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 4
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 8 การก าหนดรปแบบ layout ใหกบเวบเพจ .................................................................. 26
องคประกอบของมมมอง Layout .......................................................................................... 26
การสราง Layout Table และ Layout Cell ............................................................................ 26
การก าหนดคณสมบตของ Layout Table และ Layout Cell ................................................... 27
การท าใหหนา Webpage มขนาดคงท .................................................................................. 29
การก าหนดหนา Webpage ใหขยายขนาดเทากบหนาตาง Web Browser ............................. 29
บทท 9 การท างานกบ Layer ................................................................................................... 31
การสราง Layer ................................................................................................................... 31
การก าหนด Properties ของ Layer ...................................................................................... 31
บทท 10 การตรวจสอบเวบไซตและการเผยแพรเวบไซต (Testing and Publishing Site) ... 32
การตรวจสอบ Link ใน Website ........................................................................................... 32
การเตรยม Website บน Internet ......................................................................................... 32
ขอพจารณาในการคดเลอก Web Hosting ............................................................................. 33
Free Web Hosting .............................................................................................................. 33
เผยแพรเวบไซต (Publishing Site) ....................................................................................... 33
เตรยมตวกอน Upload ......................................................................................................... 33
การ Upload Website .......................................................................................................... 34
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 5
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 1 Introduction to Internet Internet คออะไร อนเทอรเนต คอ ระบบเครอขายคอมพวเตอร ขนาดใหญทสดของโลก โดยจะเปนการเชอมตอเครองคอมพวเตอรหลายๆ เครองจากทวโลกมาเชอมตอเขาดวยกน ซงชวยใหสามารถตดตอสอสารและแลกเปลยนขอมลระหวางกนไดทวโลก ในการตดตอกนระหวางเครองคอมพวเตอร จ าเปนตองมการระบวา สงมาจากไหน สงไปใหใคร ซงตองมการระบ ชอเครอง (คลายกบเลขทบาน) ในอนเทอรเนตใชขอตกลงในการตดตอทเรยกวา TCP/IP (ขอตกลงทท าใหคอมพวเตอรตดตอกนได) ซงจะใชสงทเรยกคา “ไอพ-แอดเดรส” (IP-Address) ในการระบชอเครองจะไมมเบอรทซ ากนได ผใหบรการ Internet ผใหบรการ Internet หรอ ISP (Internet Service Provider) คอผทท าหนาทเชอมตอผใช Internet เขากบเครอขาย Internet เชน TRUE, KSC, CS LOXINFO, SAMART World Wide Web (www หรอ w3) เปนบรการหนงของ Internet ในรปแบบสอประสม (Multimedia) เวบเพจ (Web Page)
คอ เอกสารทแสดงขอมลขาวสารตางๆ ทงในรปแบบของตวอกษร ภาพนงและภาพเคลอนไหวบนอนเทอรเนต โดยแตละหนาของเวบเพจจะถกเขยนขนมาจากภาษา HTML (Hypertext Markup Language) เวบไซต (Web Site)
คอ การรวบรวมหนาเวบเพจและขอมลตางๆ ทเกยวของมาจดเกบไวรวมกนเปน 1 เวบไซต ดงนน ในแตละเวบไซตจงประกอบไปดวยหนาเวบเพจตางๆ หลายหนาทมลงกขอมลเชอมโยงถงกน
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 6
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
โฮมเพจ (Home Page)
คอ เวบเพจทเปนหนาแรกสดของเวบไซต ในหนาโฮมเพจนมกประกอบไปดวยลงกทเชอมโยงไปยงหนาเวบเพจอยจ านวนมาก เพอใหผเยยมชมเวบไซตสามารถคลกเขาไปดหนาเวบเพจตางๆ ไดอยางสะดวก รวดเรว เวบเซรฟเวอร (Web Server) คอคอมพวเตอรทท าหนาทเปนเครอง Server ทท าหนาทจดเกบ Web site ตางๆ เพอคอยสงขอมลของ Web site ไปยงเครอง Server ของ ISP เพอใหน าไปแสดงยงเครองคอมพวเตอรตางๆทรองขอมา เวบเบราวเซอร (Web Browser) คอโปรแกรมทใชแปลภาษา HTML แลวแสดงผลบนหนา Web Page ตามทผใช (Client) รองขอ Browser ทไดรบความนยม เชน Internet Explorer, Fire Fox, Opera เปนตน เวบโฮสตง Web Hosting คอผใหบรการเชาพนท Web Server มทงเสยคาใชจายและใหบรการฟร ตวอยาง Web Hosting ฟร www.thai.net พนท www.host.sk พนทและ email http://geocities.yahoo.com พนท www.tripod.com พนท http://member.se-ed.net พนทและ email
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 7
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 2 Introduction to Macromedia Dreamweaver
การเปดโปรแกรม 1. คลกทปม Start > Programs > Macromedia > Macromedia Dreamweaver 8
2. ในการใชงานครงแรก (หลงจากตดตงโปรแกรม) จะมหนาตาง Workspace Setup ขนมา ให
เลอก Designer แลวคลก OK
หนาจอ Start Page คอหนาจอแรกในการใชงาน Dreamweaver 8 แบงเปน 3 สวน
สวนท 1 Open a Recent Item ใชส าหรบเปดไฟลงานเดม สวนท 2 Create New ใชส าหรบสราง Webpage ใหม สวนท 3 Create from Samples ใชส าหรบสราง Webpage ใหมจากตวอยางทมมาให
1 2 3
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 8
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
สวนประกอบของ Dreamweaver 8
1. Menu Bar เปนแถบทรวบรวมเมนค าสงทใชงานในโปรแกรม Dreamweaver เอาใว 2. Insert Bar เปนแถบส าหรบค าสงแทรก Object ลงใน Webpage
- Common ใชแทรก Object ทใชบอยๆ เชน Hyperlink, Image, Table เปนตน - Layout ใชแทรก Object ทใชจดโครงสรางของ Webpage เชน Table, Frame,
Layer - Forms ใชแทรก Object ทใชสรางแบบฟอรมรบขอมลจากผชม - Text ใชจดรปแบบขอความ - HTML ใชแทรก Object ของ HTML - Application ใชแทรกค าสงทเกยวของกบการจดการฐานขอมล
1 2 3
4 6
5
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 9
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
- Flash elements ใชแทรกไฟล Flash - Favorites ใชสรางกลมค าสงขนเอง
3. Toolbar ใชจดเกบกลมค าสงทใชงานบอยและปมค าสงใชเปลยนมมมองการท างานของ Dreamweaver ไดแก Show Code View, Show Code and Design View และ Show Design View
4. Property Inspector คอหนาตาง Property ทใชก าหนดคณสมบตตางๆของ Webpage เชน Table, Link, Picture, Text เปนตน
5. Panel ใชส าหรบก าหนดคณสมบตเพมเตมในการออกแบบ Webpage
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 10
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 3 เรมตนสราง Web Site ดวย Macromedia Dreamweaver
วางแผนสราง Web Site อยากม Web Site ตองท าอยางไร
1. วางแผน ก าหนดวตถประสงค กลมเปาหมาย เนอหาของ Web Site 2. เตรยมขอมล เตรยมขอมลและทรพยากรทเกยวของ 3. ออกแบบและสราง ท าการออกแบบและท า Web Page 4. ทดสอบ ท าการทดสอบกบ Browser 5. เผยแพร ท าการ Upload
ขนตอนการสราง Web Site ใน Dreamweaver
การสราง Site ในการสราง Web Site ดวย Macromedia Dreamweaver นนเราตองเรมดวยการสรางหรอ
ก าหนด Site กอนเสมอ เพอก าหนดโฟลเดอรในการจดเกบไฟลตางๆ ขนตอนการก าหนด Site
1. สราง Folder ทจะใชจดเกบ File ตางๆ 2. คลกเมน Site > New Site แลวเลอก Tab: Advanced 3. ในสวนของ Category เลอก Local Info
ก าหนด Site สราง Web Page สราง Hyperlink เผยแพร Web Site
ทดสอบ Hyperlink ใสขอมล
ปรบแตง
ทดสอบ Web Page
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 11
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
4. คลก OK
การตงคาการใชภาษาไทย 1. คลกเมน Edit > Preferences 2. ในสวนของ Category เลอก Fonts, ในสวนของ Fonts, เลอก Thai
Proportional font: แสดงขอความทวไป Fixed font: แสดงในสวนของ Tag Code view: ใชในมมมอง Code view และ Code inspector
ใสชอ Site
ก าหนดโฟลเดอรหลก
ก าหนดโฟลเดอร ทใชเกบรปภาพ
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 12
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การก าหนดคณสมบตพนฐานใหกบ Web Page เราสามารถก าหนดคณสมบตพนฐานใหกบ Web Page ได โดยแบงออกเปน 5 กลมดงน
1. Appearance ก าหนดรปแบบทวไปของ Web Page 2. Links ก าหนดรปแบบของ Hyperlink 3. Headings ก าหนดรปแบบของหวเรองทใชบน Web 4. Title/Encoding ก าหนดหวเรองและภาษาทใชใน Web Page 5. Tracing Image ใชแสดงภาพตวอยางเพอเปนแนวทางในการวาง Layout ของ Web Page Appearance
1. รปแบบตวอกษรบน Web Page 2. สพนหลง 3. ภาพพนหลงและการท าซ า 4. ระยะหางระหวางขอบของ Web Page กบ Object
1 2 3
4
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 13
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
Links
Link font: Font ของ Hyperlink Size: ขนาดของ Hyperlink Link color: สของขอความทเปน Hyperlink Rollover links: สของขอความทเปน Hyperlink ขณะทเมาสเลอนไปบนขอความ Visited links: สของขอความ Hyperlink ทคลกไปแลว Active links: สของขอความ Hyperlink ขณะก าลงคลก Underline style: รปแบบการขดเสนใตขอความ Heading
Heading font: Font ของหวเรอง Heading: ขนาดและหนวยวด
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 14
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
Title/Encoding
Title: ระบขอความหวเรองของ Web Page ซงจะอยบน Title bar เมอแสดงบน Browser Document type: ประเภทของ HTML Encoding: ภาษาทใชใน Web Page Tracing Image
Tracing image: เลอกภาพทตองการ Transparency: ระดบความโปรงใสของภาพ
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 15
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 4 การใสขอความลงใน Web Page การเวนวรรคระหวางขอความ
เราจะเคาะเวนวรรคเพยงครงเดยว แตถาตองการมากกวา 1 ครง ใหใชวธใดวธหนงดงตอไปน
1. กดปม Ctrl+Shift+Space
2. จาก Insert bar เลอกเมน Text แลวคลกหวลกษรหลงปม จากนนเลอกค าสง
3. คลกเมน Edit > Preferences จากนนในสวน Category เลอก General แลวคลกเลอก
การขนบรรทดใหมในยอหนาเดยวกน ใชวธใดวธหนงดงตอไปน
1. กดปม Shift+Enter
2. จาก Insert bar เลอกเมน Text แลวคลกหวลกษรหลงปม จากนนเลอกค าสง
การแทรกสญลกษณพเศษ
จาก Insert bar เลอกเมน Text แลวคลกหวลกษรหลงปม จากนนเลอกสญลกษณทตองการ
หากตองการสญลกษณเพมเตม ใหคลกเลอก
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 16
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การจดรปแบบขอความ 1. เลอกขอความ 2. ก าหนดรปแบบจาก Property Inspector
การน าเขาขอความจากโปรแกรมอน Microsoft Word
1. เลอกขอความทตองการจาก Microsoft Word
2. ท Dreamweaver คลกเมน Edit > Paste
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 17
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
Microsoft Excel
1. เลอกขอความทตองการจาก Microsoft Excel
2. ท Dreamweaver คลกเมน Edit > Paste
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 18
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 5 การแทรกรปภาพลงใน Web Page
ชนดของรปภาพ GIF (Graphic Interchange Format) มนามสกลเปน .gif แสดงสได 256 ส (8 bit) JPG (Joint Photographic Expert Group)มนามสกลเปน .jpg แสดงสได 16.7 ลานส (24 bit) การแทรกรปภาพลงใน Web Page ขนตอน
1. คลกเมาสบน Web Page 2. คลกท Insert bar เลอก Common จากนน คลก Image
3. คลกเลอกรปแลว คลก OK
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 19
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การใสรปภาพใหเปนพนฉากหลง 1. คลกเมน Modify > Page Property 2. ในสวนของ Background image คลกปม Browse เพอเลอกรปภาพ จากนนท าตามขนตอน
3. กดปม F12 เพอดผล
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 20
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 6 การท า Hyperlink และการก าหนดคาตางๆ
การท า Hyperlink คอการสรางการเชอมโยงกนจากจดหนงไปยงจดหนงภายใน Web Page เดยวกน ตาง Web Page โดยใช ขอความ รปภาพหรอเมนดรอปดาวน
ตนทาง (Source anchor) ต าแหนงบน Web Page ทตองการสราง Hyperlink ปลายทาง (Destination anchor) ต าแหนงปลายทางทตองการเชอมโยงถง
การสราง Hyperlink ภายใน Web Site เดยวกน 1. ก าหนด Named Anchor (ปลายทาง)
a. คลกต าแหนงทตองการสราง Named Anchor b. คลกท ไอคอน Named Anchor
c. จะไดหนาตาง Named Anchor ใหท าการตงชอ จากนน คลก OK จะไดดงรป
1
2
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 21
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
2. สราง Hyperlink ไปยง Named Anchor a. เลอกขอความหรอรปภาพ b. ในสวนของ Property Inspector ตรงต าแหนง Link ใหพมพ #ชอปลายทาง (Named
anchor) แลวกดปม Enter
c. กดปม F12 เพอทดสอบ Hyperlink
การสราง Hyperlink ไปยง Web Site อน
1. เลอกขอความหรอรปภาพ 2. ในสวนของ Property Inspector ตรงต าแหนง Link ใหพมพ URL ของ Web Site ปลายทาง
เชน http://www.mict.go.th แลวกดปม Enter
3. กดปม F12 เพอทดสอบ Hyperlink การสราง Hyperlink เพอสง E-mail
1. เลอกขอความหรอรปภาพ 2. ในสวนของ Property Inspector ตรงต าแหนง Link ใหพมพ mailto:อเมลแอดเดรส เชน
mailto:[email protected] แลวกดปม Enter
3. กดปม F12 เพอทดสอบ Hyperlink
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 22
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
Image Map Image map คอการท า Hyperlink โดยใชสวนใดสวนหนงของภาพผานเครองมอทเรยกวา Hotspot ขนตอน
1. เลอกรปภาพ 2. คลกปม Hotspot เพอเลอกบรเวณ Image map
เลอกบรเวณ Link ใหเปนรปสเหลยม เลอกบรเวณ Link ใหเปนรปวงกลม เลอกบรเวณ Link ใหเปนรปหลายเหลยม
3. เลอกเฉพาะบรเวณทจะสราง Hyperlink
4. ก าหนดต าแหนงปลายทาง
Link: ก าหนดต าแหนงปลายทาง Target: เลอกเปาหมาย Alt: ค าอธบาย Link
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 23
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 7 การสรางตาราง
เรมสรางตาราง คลกท Web Page คลกเมน Insert > Table
Table size: ขนาดของตาราง Header: รปแบบของหวตาราง ผลทได
การพมพขอความลงในตาราง 1. คลก Cell ทตองการพมพ แลวพมพ 2. การเลอนไปยงแตละเซลล
Tab: เลอนไปทางขวาทละเซลล Shift+Tab: เลอนไปทางซายทละเซลล Arrow Key: กลมลกศร
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 24
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การก าหนดคณสมบตของตาราง คลกเลอกตารางจาก Web Page ท าการก าหนดคณสมบตของตารางในสวนของ Property Inspector
การปรบแตงตาราง การลบ Row/Column เลอก Column จากนนคลกขวา เลอก Table > Delete Column
เลอก Row จากนนคลกขวา เลอก Table > Delete Row
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 25
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การแทรก Row/Column เลอก Column จากนนคลกขวา เลอก Table > Insert Column
เลอก Row จากนนคลกขวา เลอก Table > Insert Row
การรวมเซลล(Merge Cell) เลอก Cell ทตองการจากนนคลกขวา เลอก Table > Merge Cell
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 26
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 8 การก าหนดรปแบบ layout ใหกบเวบเพจ
องคประกอบของมมมอง Layout มมมอง Layout เปนมมมองหนงใน Dreamweaver เหมาะส าหรบการจดหนา Web Page
ใหมรปแบบตามตองการ โดยใชตารางและเซลลเพอก าหนดต าแหนงขององคประกอบบน Web Page โดยมมมองใน Layout ประกอบดวย Layout Table (หมายเลข 1) เปนพนทสเทาทใชในการก าหนดขอบเขตการจดวาง Web
Page ซงมไวใส Layout Cell เมอท างานในมมมอง Layout องคประกอบอนๆจะไมสามารถวางในนได
Layout Cell (หมายเลข 2) เปนชองเซลลทมพนทสขาวใชส าหรบจดวางองคประกอบลงไป
การสราง Layout Table และ Layout Cell 1. คลกปม จากกลมค าสง Layout
2. คลกลากขอบเขตของ Layout ตามตองการ จะได Layout Table ดงรป
1 2
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 27
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
3. คลกปม จากกลมค าสง Layout เพอสราง Cell ใน Layout Table 4. ในบรเวณ Layout Table คลกลากเซลลตามตองการ
การก าหนดคณสมบตของ Layout Table และ Layout Cell 1. คลกเลอก Layout Table หรอ Layout Cell ทตองการ 2. การก าหนดคณสมบตของ Layout Table และ Layout Cell จากสวนของ Property
Inspector
Layout Table Property
Layout Cell Property
การจดวางโครงสราง Layout Table ใหอยกงกลางหนา Webpage
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 28
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
1. ก าหนดโหมดการแสดงผลเปนแบบ Standard 2. คลกทขอบ Layout Table หลกทสรางขน 3. ทหนาตาง Properties ชอง Align เลอกค าสง Center
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 29
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
การท าใหหนา Webpage มขนาดคงท 1. ก าหนดโหมดการแสดงผลเปนแบบ Layout 2. คลกทขอบ Layout Table หลกทสรางขน 3. ทหนาตาง Properties คลกเลอกค าสง Fixed แลวก าหนดความกวางของ Layout Table ทชอง Width ตามตองการ
4. ก าหนดขนาด Layout Cell ทอยในแถวเดยวกนใหมคาความกวางรวมไมเกนคาความกวางของ Layout Table โดยคลกทขอบ Lout Cell 5. ท าซ าขอ 3
การก าหนดหนา Webpage ใหขยายขนาดเทากบหนาตาง Web Browser 1. ก าหนดโหมดการแสดงผลเปนแบบ Layout 2. คลกทขอบ Layout Table หลกทสรางขน 3. ทหนาตาง Properties คลกเลอกค าสง Autostretch 4. คลกเมาสทต าแหนงทบอกขนาดความกวางของ Layout Table แลวคลกเลอกค าสง Make
Column Autosrach 5. ทหนาตาง Choose Spacer Image คลกเลอก Create a spacer image file แลวคลกปม
OK
6. จะไดหนาตาง Save Spacer Image File As ใหคลกเลอก Folder ส าหรบจดเกบภาพ 7. คลกปม Save
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 30
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
8. จากนนก าหนดความกวางของ Layout ทเหลอใหเปนแบบ Fixed พรอมบนทกคาทก าหนด
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 31
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 9 การท างานกบ Layer Layer เปรยบเสมอนการวางแผนใสซอนทบกนแลวใสองคประกอบบนแตละแผน
การสราง Layer ขนตอน คลกเมน Insert > Layout Objects > Layer
การก าหนด Properties ของ Layer 1. คลกเลอก Layer หรอ หลายๆ Layer 2. จากนนปรบแตงไดจาก Properties Inspector
1. Standard 2. Standard
Layer ทสราง
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 32
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
บทท 10 การตรวจสอบเวบไซตและการเผยแพรเวบไซต (Testing and Publishing Site)
การตรวจสอบ Link ใน Website ปญหา Link ขาด (Broken Link) คอการทเราไมสามารถเชอมตอไปยงปลายทางได อาจเกดจากการเปลยนชอ การยาย การลบ File, Folder โดยทไมได ปรบปรง (Update) ขอมล
รปแสดงปญหา Broken link ขนตอนการตรวจสอบ Broken link
1. คลกเมน Site > Check Links Sitewide
2. ดบเบลคลกชอไฟลเพอเปด Webpage ขนมาปรบปรง
การเตรยม Website บน Internet สงทตองเตรยมกอนการเผยแพร Website การจดทะเบยน Domain Name
คอชอ Website ของเราใชแทนต าแหนงทอยบน Internet (IP Address) กลมของ Domain Name .co.th : องคกรเอกชนทจดทะเบยนในประเทศไทย .in.th : บคคลและหนวยงานทวไป .ac.th : สถานนการศกษาในไทย .go.th : หนวยงานรฐบาลในไทย .or.th : องคกรทไมแสวงหาผลก าไร .mi.th : หนวยงานทางทหาร .net.th : ผใหบรการ Internet (ISP)
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 33
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
ขอพจารณาในการคดเลอก Web Hosting ราคา มทงของฟร จายเปนรายเดอน หรอเปนงวดๆ ระบบของ Server Windows และ Linux (โดยทวไป Linux จะถกกวา) เนอทส าหรบเกบขอมล เนอทมากราตากมกจะแพงตามไปดวย
Free Web Hosting www.thaicity.com www.tripod.com www.20mbweb.com www.freewebsites.com www.esmartstart.com
เผยแพรเวบไซต (Publishing Site) สามารถท าไดหลายวธ (ขนอยกบ Web Server) เชน Web Server ทมบรการ FTP (File Transfer Protocol) ใช Dreamweaver Web Server ทไมมบรการ FTP ใช File Manager
เตรยมตวกอน Upload 1. คลกเมน Site > Manage Sites…
เลอก Site
คลกเลอกEdit
กระทรวงเทคโนโลยสารสนเทศและการสอสาร 34
http://www.mict4u.net
โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน
2. จะไดหนาตางดงรป แลวก าหนดคาตางๆ
3. คลก OK แลว Done
การ Upload Website คลกทพาเนล Files
เลอก Tab: Advanced คลกเลอก Remote Info
วธการเชอมตอ : FTP
ชอ Web Server
ใส login, password แลวคลก Test
1. คลกทปม Connect to remote host
2. คลกท Root Site
3. คลกท Put Files
หลกสตร
การจดทาและปรบปรงเวบไซตหมบานไทย
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก
สารบญ
บทท หนา
บทท 1 องคประกอบของเวบไซตหมบาน…………………….……………………... 1 1. การเขาสหนาแรกของเวบไซตหมบาน………………..………………….. 1 2. องคประกอบหนาแรก………………………………………….…………… 2
บทท 2 การเขาสระบบบรหารจดการเวบไซต………………………………………. 3 บทท 3 ตงคาทวไปของหมบาน………………………………………………………… 5
การตงคาทวไป.............................................................................................................. 5
บทท 4 การแกไขขอมลเมนหลก....................................................................................... 7 การแกไข ขอมลทวไปของชมชน………………………………………………… 7 การแทรกรปภาพประกอบ ……………………………………………………….. 8 การแทรกแผนท Google…………………………………………………………. 13 การแทรกไฟลวดโอ………………………………………………………………. 21
บทท 5 การสรางเนอหา…………………………………………………………………. 26 การเพมเนอหา……………………………………………………………………. 27 การแกไขเนอหา ………………………………………………………………….. 28
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก
บทท 1 องคประกอบของเวบไซตหมบาน
1. การเขาสหนาแรกของเวบไซตหมบาน ใหเปดโปรแกรม Web Browser และพมพ URL ของหมบานตวเองลงในชอง Address เชน
• กรณทเปนหมบานเปาหมายของกรมการพฒนาชมชน (ป 2551-2552) พมพ http://ชอหมบาน.moobanthai.com เชน http://tha-poe.moobanthai.com
• กรณทเปนหมบานเปาหมายขยายผล ของจงหวดพษณโลก (ป 2553) พมพ http://ชอหมบาน.wordpress.com เชน http://nernmakuek2.wordpress.com
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 1 จาก 29
2. องคประกอบหนาแรก เมอเขาสหนาแรก จะพบวาไดมการทาโครงรางของเวบไซตเอาไวแลว โดยตาแหนงดานซายจะ
เปนสวนแสดงเนอหา และดานขวาจะเปนสวนแสดงรายการเมนขอมลของหมบาน ดงน เนอหาลาสด (“เรอง” หรอ “Posts”)
เปนรายละเอยดของเรองราว เนอหา หรอ บทความ ตาง ๆ ในเวบไซต ซงในระบบเรยกวา “เรอง” หรอ “Posts”
“เนอหา” หรอ “เรอง” ตางจาก “เมนหลก” หรอ “หนา” ตรงท “เมนหลก” จะไมมหมวดหม เมอมการสรางหนาใหม ระบบจะสรางเมน เพอแสดงทหนาเวบไซตใหโดยอตโนมต แต “เนอหา” จะเปนการเขยนบทความ คอจะตองมหมวดหม ทจะแสดงเนอหา และเนอหาจะแสดงในหมวดหมทไดเลอกไว (เนอหา หรอ บทความ 1 เรอง สามารถเลอกใหแสดงหลายหมวดหมได) เมนหลก (“หนา” หรอ “Page”)
เมนหลก ทอยดานขวา เปนเมนทเตรยมไวเพอแสดงขอมลหมบาน โดยผดแลระบบหมบานตองเขาไปแกไขขอมลทงหมดใหเปนขอมลจรงของหมบานตวเอง ซงประกอบไปดวยเมนดงน
ขอมลทวไปของหมบาน ทตงหมบาน แผนทหมบาน เอกลกษณโดดเดนของหมบาน
ซงแตละเมน เปนการแสดงผลเนอหาแบบ Static โดยในระบบจะเรยกวา “หนา” หรอ “Page” หมวดหม (“Categories”)
“หมวดหม” ในระบบเรยกวา “Categories” เปนการจดหมวดหมของเนอหา ซงเปนเนอหา ทมการเปลยนแปลงไปเรอย ๆ เชน บทความตาง ๆ โดยจะแบงหมวดหมของเนอหา หรอ บทความ ออกเปน 4 หมวดหม
การจดการความรของชมชน ขาวสารทวไปจากชมชน ศนยเรยนรชมชน ผลตภณฑชมชน
ในการเพมเนอหา หรอ บทความ เขาไปในแตละหมวดหม ทง 4 หมวดหม ผดแลระบบสามารถเลอกไดวาเนอหาทจะเพมแตละเรอง ไวในหมวดหมเดยว หรอหลายหมวดหมกได เชน เนอหา/บทความเกยวกบ การละเลนพนบาน สามารถเพมไวในหมวดหม การจดการความรของชมชน/ขาวสารทวไปจากชมชน และศนยเรยนรชมชน ทง 3 หมวดหมกได หมายเหต ผดแลระบบสามารถเพมเตมหมวดหมในภายหลงได
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 2 จาก 29
บทท 2 การเขาสระบบบรหารจดการเวบไซต การเขาสระบบบรหารจดการเวบไซตหมบาน เพอแกไข/เพมเตมขอมลตาง ๆ ใหพมพ URL
ของหมบาน (เหมอนการเขาสหนาแรกของเวบไซตหมบาน) และพมพคาวา /wp-admin ตอทาย เชน http://nernmakuek2.wordpress.com/wp-admin แลว Enter ระบบจะแสดงหนา Login สาหรบการเขาสระบบ
เมอระบบแสดงหนาจอ Login ใหใสชอผใช และรหสผาน ใหถกตอง จากนนคลกทปม เขาสระบบ (ชอผใช และรหสผาน กลมงานสารสนเทศฯ สพจ.พษณโลก เปนผกาหนดให)
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 3 จาก 29
เมอคลกเขาสระบบแลว ระบบจะแสดงหนาจอการบรหารจดการเวบไซตหมบาน ดงรปดานลาง
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 4 จาก 29
บทท 3 ตงคาทวไปของหมบาน
การตงคาทวไป เมอเขาสระบบเรยบรอยแลว ใหทาการตงคาทวไปของหมบาน โดยคลกทเมน “ตงคา” ระบบ
จะแสดงหนาจอการตงคาตงคาทวไป ดงรปดานลาง
1
2 3
4
5 6
9
8 7
หนาจอการตงคาทวไป จะมทงหมด 9 สวน ดงน
1. Site Title : ใสชอหมบาน 2. Tagline : ใสชอเวบไซตของหมบาน 3. อเมล : ใสอเมลของหมบาน 4. เขตเวลา : ใหตงเปน UTC+7
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 5 จาก 29
5. รปแบบวนท : เลอกรปแบบวนทของประเทศไทย 6. รปแบบเวลา 7. วนทเรมของสปดาห 8. ภาษา : เลอกภาษาไทย 9. เสรจแลวคลก บนทกการเปลยนแปลง
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 6 จาก 29
บทท 4 การแกไขขอมลเมนหลก
การแกไข ขอมลทวไปของชมชน การแกไขขอมล ใหเขาสระบบบรหารจดการเวบไซตหมบาน (ดงทกลาวมาแลวในบทท 2) เพอ
ทาการแกไขขอมลตามขนตอน ดงน
1
2
1. คลกท “หนา” ระบบจะแสดงรายชอหนาทมอยทงหมดในเวบไซต 2. เลอนเมาสไปท “ขอมลทวไปของชมชน” แลวคลกท “แกไข” 3. ระบบจะแสดงหนาจอสาหรบการแกไขหนา ใหทาการพมพเนอหาของขอมลทวไปของชมชน
ลงในชองวาง 4. คลกท “อปเดต” เพอบนทกขอมล
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 7 จาก 29
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 8 จาก 29
3 4
การแทรกรปภาพประกอบ การแทรกรปภาพประกอบ ใหทาตามขนตอนดงตอไปน
1. ในหนาแกไขหนา ใหคลกทรายละเอยดของ “ขอมลทวไปของชมชน” ตรงบรเวณทตองการแทรกรปภาพ
2. คลกทไอคอนสเหลยม เพอแทรกรปภาพ
2
1
3. คลกท “เลอกไฟล” เพอเลอกไฟลทตองการ อปโหลดจากเครองคอมพวเตอรของเรา
3
4. คลกเลอกรปทตองการ จากนนคลกทปม Open
4
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 9 จาก 29
5. ระบบจะทาการอปโหลดไฟลรปภาพ จากนนจะแสดงหนาตาง สาหรบการกรอกรายละเอยดรปภาพ ใหทาการใสคาบรรยายใตภาพ และรายละเอยดภาพ
6. เลอกตาแหนงในการจดวางรปภาพ เชน ชดซาย กงกลาง หรอ ชดขวา และเลอกขนาดรปภาพทตองการ เชน ขนาดเลก ขนาดกลาง ขนาดใหญ หรอ เตมขนาด (โปรแกรมจะทาการปรบขนาดรปภาพตามทเลอกใหอตโนมต โดยไมตองใชโปรแกรมอนชวย)
7. คลกท “ใสเขาในเรอง” 8. รปทเลอกไว จะแสดงในตาแหนงทเราคลกเลอกไวตงแตขนตอนท 1 9. คลกท “อปเดต” เพอบนทก
5
6
7
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 10 จาก 29
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 11 จาก 29
9
8
10. หากตองการดผลการแกไขในหนาระบบบรหารจดการเวบไซต สามารถคลกขวาทชอหมบาน
(มมบนดานซาย) จากนนคลกท “Open in New Window” ดงรปดานลาง
10
11. ระบบจะเปดหนาเวบไซตหมบานหนาตางใหมขนมา
หมายเหต การเพมขอมล หรอ แกไขขอมล (ขนตอนท 3) สามารถ Copy เนอหาจากไฟล MS Word หรอเนอหาจากเวบไซต มาใสได แตกอนทจะนามาใสในชองวาง ใหเปดโปรแกรม Notepad ขนมา จากนนนาเนอหาททาการ Copy ไปวางใน Notepad แลว Copy เนอหาทงหมดจาก Notepad มาใสในชองวาง ทงนเพอปองกนการตด Code หรอ Style ทมากบโปรแกรม MS Word ซงอาจทาใหระบบเสยหาย และเกดขอผดพลาดได
เมอแกไข “ขอมลทวไปของชมชน” เสรจเรยบรอยแลวใหทาการแกไขเนอหา “ทตงหมบาน” และ ”แผนทหมบาน” โดยใชวธเดยวกนกบการแกไข “ขอมลทวไปของชมชน”
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 12 จาก 29
การแทรกแผนท Google
การแทรกแผนทจาก Google มขนตอน ดงน 1. เปดหนาเวบไซต Google.co.th 2. คลกท “ลงชอเขาสระบบ”
1 2
4
3
3. หากยงไมเคยสมครสมาชก หรอยงไมมบญชผใช จะตองสรางบญชผใช Google กอน โดยคลกท
“สรางบญชผใชเดยวน” แลวขามไปขอ 5 แตถามบญชผใช Google แลว ใหทาขอ 4 4. กรอกอเมล และรหสผาน แลวคลก “ลงชอเขาใชงาน” แลวขามไปขอ 9
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 13 จาก 29
5. กรอกขอมลทจาเปนสาหรบสรางบญชผใช ดงตวอยางดานลาง
5
6
6. เสรจแลวคลกท “ฉนยอมรบ โปรดสรางบญชของฉน”
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 14 จาก 29
7. เขาอเมลทใชสรางบญชผใช เพอยนยน
7
8. คลกทลงค เพอยนยน เปนอนเสรจสนการสรางบญชผใช Google
8
เมอสรางบญชผใชเสรจแลว กจะสามารถลงชอเขาใชงานบญช Google ไดโดยทาตามขอ 1-2 และขามมาขอ 9
9. ทชอง Address Bar ใหพมพ www.google.co.th แลวกด Enter
9
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 15 จาก 29
10. คลกทเมน “แผนท” และคลกท “แผนทของฉน” และคลก “สรางแผนทใหม”
10
11. คลกทเครองหมาย เพอเพมเครองหมายตาแหนง แลวเลอนเมาสมาคลกทสถานท ทตองการในแผนท เมอไดจดในแผนทแลว ใหใสชอสถานทในชอง ชอ เชน “พฒนาชมชนจงหวดพษณโลก” คลก “ตกลง” แลวใสชอสถานทในชองชอ อกครง แลวคลก “บนทก”
11
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 16 จาก 29
12. คลกท “ลงก” แลวคลกท “กาหนดเองและแสดงตวอยางแผนททฝงไว”
12
13. จะปรากฏหนาตางตวอยางแผนท ใหกาหนดขนาดทตองการในหวขอ 1
13
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 17 จาก 29
14. ถารปแผนทในตวอยางหวขอท 2 ยงไมถกใจ กสามารถเลอนซาย-ขวา-บน-ลาง หรอ ซมเขา -
ซมออก ไดจนกวาจะพอใจ แลวนาเมาสไประบายแถบสคมขอความทงหมด ในหวขอท 3 แลวคลกเมาสขวาในบรเวณขอความ แลวเลอก “Copy”
14
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 18 จาก 29
15. กลบมาทการจดการระบบเวบไซตหมบาน คลกท “หนา” เลอนเมาสมาทหวขอ “แผนทหมบาน”
แลวคลกเลอก “แกไข”
15
16. จะปรากฏหนาแกไขแผนทหมบาน ใหคลกทแทบ HTML แลวคลกเมาสขวาในพนทวาง เลอก
“Paste”
16
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 19 จาก 29
17. คลกท “อปเดต”
17
18. กลบไปหนาแรก Refresh เพอดการแสดงผล
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 20 จาก 29
การแทรกไฟลวดโอ
1. เขาเวบไซต Youtube.com แลวคลกท “Create Account” เพอลงทะเบยนสมาชก
2. กรอกขอมล Username ตามแบบฟอรม แลวคลก “I Accept”
1
2
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 21 จาก 29
3. กรอก E-mail Address และกาหนด Password และพมพตวอกษรใหตรง ตามทปรากฏ แลวคลก
“Create New Account and Finish”
3
4. เมอลงทะเบยนสมาชกเสรจเรยบรอย ใหเชคอเมล ทใชลงทะเบยนวามการตอบรบจาก YouTube
แลว
4
5. กรอก Username และ Password และคลก Sign in เพอเขาสระบบสมาชกของ YouTube
5
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 22 จาก 29
6. คลกเลอก Upload และคลกท Upload video
6
7. จะปรากฏหนาตางใหเลอกไฟลวดโอจากเครองคอมพวเตอรของเรา แลวคลก Open
7
8. แลวระบบจะทาการ Upload ไฟลวดโอจนครบ 100%
8
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 23 จาก 29
9. สามารถแกไขชอเรองของไฟลวดโอได ในชอง Title เลอกหมวดหมในชอง Category เลอกการ
ใหสทธในชอง Privacy เสรจแลวคลกปม “Save changes”
9
10. คลกเมาสซายในชอง Embed เพอใหเกดแถบสคมขอความทงแถว แลวคลกเมาสขวา ในชองเดยวกน เลอก “Copy”
10
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 24 จาก 29
11. กลบมาทระบบการจดการเวบไซตหมบาน แลวเขาไปเพม หรอแกไขเรอง แลวคลกทแทบ
HTML แลวคลกเมาสขวาในพนทวาง เลอก “Paste” เสรจแลวคลก “อปเดต”
11
12. กลบไปหนาแรก Refresh เพอดการแสดงผล
12
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 25 จาก 29
บทท 5 การสรางเนอหา
ในบทนจะเปนการเพม และการแกไขเนอหา ซงในระบบจะเรยกเนอหา หรอ บทความ ตาง ๆ ในเวบไซต (ทไมใช “หนา” หรอ “Page”) วา “เรอง” หรอ “Posts”
เนอหาทยงไมไดแกไข หนาแรกของเวบไซต ไดแสดงหมวดหม ของเนอหา 4 หมวดหม คอ การจดการความรของ
ชมชน ขาวสารทวไปจากชมชน ศนยเรยนรชมชน และผลตภณฑชมชน โดยมเนอหาตวอยางแสดงอย ซงผดแลระบบจะตองแกไขใหเปนขอมลจรงของหมบาน
ตวอยางเนอหาทยงไมมการแกไข
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 26 จาก 29
การเพมเนอหา เนอหาในเวบไซต สามารถเพมไดไมจากด วธการเพมเนอหา ใหทาตามขนตอนดงน
1. คลกท “เรอง” จากนนคลกท “เขยนเรองใหม” 2. ใสชอเนอหา 3. ใสรายละเอยดเนอหา ตกแตงใหสวยงาม ใสรปภาพประกอบ (ถาม)
1
3
4
5
2
4. เลอกหมวดหมทจะแสดงเนอหา สามารถเลอกไดมากกวา 1 หมวดหม 5. คลกท “เผยแพร” เพอบนทกและแสดงเนอหาหนาเวบ (ในกรณทไมคลก “เผยแพร” หนาเวบจะ
ไมแสดงเนอหาน จนกวาจะมการคลกเพอเผยแพรเนอหา และหากยงไมตองการเผยแพรเนอหาในทนท สามารถคลกท “บนทกฉบบราง” เพอบนทกเนอหาไวกอนกได)
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 27 จาก 29
การแกไขเนอหา มขนตอนดงน 1. คลกท “เรอง” 2. เลอนเมาสไปท ชอเรองทตองการแกไข แลวคลกท “แกไข”
1
2
3. ใสเนอหาลงในชองวาง 4. คลกท “เผยแพร” เพอบนทก
3 4
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 28 จาก 29
5. กลบไปหนาแรก Refresh เพอดการแสดงผล
5
จดทาโดย กลมงานสารสนเทศการพฒนาชมชน สานกงานพฒนาชมชนจงหวดพษณโลก หนา 29 จาก 29