- WordPress.com...Dreamweaver ได้แก่ Show Code View, Show Code and Design View และ...

กระทรวงเทคโนโลยสารสนเทศและการสอสาร 1

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




สารบญ บทท หนา บทท 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




บทท 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




บทท 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 เวบไซต ดงนน ในแตละเวบไซตจงประกอบไปดวยหนาเวบเพจตางๆ หลายหนาทมลงกขอมลเชอมโยงถงกน




โฮมเพจ (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

http://www.thai.net/

http://www.host.sk/

http://geocities.yahoo.com/

http://www.tripod.com/

http://member.se-ed.net/




บทท 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




สวนประกอบของ 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




- 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




บทท 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




4. คลก OK

การตงคาการใชภาษาไทย 1. คลกเมน Edit > Preferences 2. ในสวนของ Category เลอก Fonts, ในสวนของ Fonts, เลอก Thai

Proportional font: แสดงขอความทวไป Fixed font: แสดงในสวนของ Tag Code view: ใชในมมมอง Code view และ Code inspector

ใสชอ Site

ก าหนดโฟลเดอรหลก

ก าหนดโฟลเดอร ทใชเกบรปภาพ




การก าหนดคณสมบตพนฐานใหกบ 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




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: ขนาดและหนวยวด




Title/Encoding

Title: ระบขอความหวเรองของ Web Page ซงจะอยบน Title bar เมอแสดงบน Browser Document type: ประเภทของ HTML Encoding: ภาษาทใชใน Web Page Tracing Image

Tracing image: เลอกภาพทตองการ Transparency: ระดบความโปรงใสของภาพ




บทท 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 แลวคลกหวลกษรหลงปม จากนนเลอกสญลกษณทตองการ

หากตองการสญลกษณเพมเตม ใหคลกเลอก




การจดรปแบบขอความ 1. เลอกขอความ 2. ก าหนดรปแบบจาก Property Inspector

การน าเขาขอความจากโปรแกรมอน Microsoft Word

1. เลอกขอความทตองการจาก Microsoft Word

2. ท Dreamweaver คลกเมน Edit > Paste




Microsoft Excel

1. เลอกขอความทตองการจาก Microsoft Excel

2. ท Dreamweaver คลกเมน Edit > Paste




บทท 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




การใสรปภาพใหเปนพนฉากหลง 1. คลกเมน Modify > Page Property 2. ในสวนของ Background image คลกปม Browse เพอเลอกรปภาพ จากนนท าตามขนตอน

3. กดปม F12 เพอดผล




บทท 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




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

http://www.mict.go.th/

mailto:[email protected]




Image Map Image map คอการท า Hyperlink โดยใชสวนใดสวนหนงของภาพผานเครองมอทเรยกวา Hotspot ขนตอน

1. เลอกรปภาพ 2. คลกปม Hotspot เพอเลอกบรเวณ Image map

เลอกบรเวณ Link ใหเปนรปสเหลยม เลอกบรเวณ Link ใหเปนรปวงกลม เลอกบรเวณ Link ใหเปนรปหลายเหลยม

3. เลอกเฉพาะบรเวณทจะสราง Hyperlink

4. ก าหนดต าแหนงปลายทาง

Link: ก าหนดต าแหนงปลายทาง Target: เลอกเปาหมาย Alt: ค าอธบาย Link




บทท 7 การสรางตาราง

เรมสรางตาราง คลกท Web Page คลกเมน Insert > Table

Table size: ขนาดของตาราง Header: รปแบบของหวตาราง ผลทได

การพมพขอความลงในตาราง 1. คลก Cell ทตองการพมพ แลวพมพ 2. การเลอนไปยงแตละเซลล

Tab: เลอนไปทางขวาทละเซลล Shift+Tab: เลอนไปทางซายทละเซลล Arrow Key: กลมลกศร




การก าหนดคณสมบตของตาราง คลกเลอกตารางจาก Web Page ท าการก าหนดคณสมบตของตารางในสวนของ Property Inspector

การปรบแตงตาราง การลบ Row/Column เลอก Column จากนนคลกขวา เลอก Table > Delete Column

เลอก Row จากนนคลกขวา เลอก Table > Delete Row




การแทรก Row/Column เลอก Column จากนนคลกขวา เลอก Table > Insert Column

เลอก Row จากนนคลกขวา เลอก Table > Insert Row

การรวมเซลล(Merge Cell) เลอก Cell ทตองการจากนนคลกขวา เลอก Table > Merge Cell




บทท 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




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




1. ก าหนดโหมดการแสดงผลเปนแบบ Standard 2. คลกทขอบ Layout Table หลกทสรางขน 3. ทหนาตาง Properties ชอง Align เลอกค าสง Center




การท าใหหนา 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




8. จากนนก าหนดความกวางของ Layout ทเหลอใหเปนแบบ Fixed พรอมบนทกคาทก าหนด




บทท 9 การท างานกบ Layer Layer เปรยบเสมอนการวางแผนใสซอนทบกนแลวใสองคประกอบบนแตละแผน

การสราง Layer ขนตอน คลกเมน Insert > Layout Objects > Layer

การก าหนด Properties ของ Layer 1. คลกเลอก Layer หรอ หลายๆ Layer 2. จากนนปรบแตงไดจาก Properties Inspector

1. Standard 2. Standard

Layer ทสราง




บทท 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)




ขอพจารณาในการคดเลอก 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

http://www.thaicity.com/

http://www.tripod.com/

http://www.20mbweb.com/

http://www.freewebsites.com/

http://www.esmartstart.com/




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

http://%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AB%E0%B8%A1%E0%B8%B9%E0%B9%88%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99.moobanthai.com/

http://%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AB%E0%B8%A1%E0%B8%B9%E0%B9%88%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99.moobanthai.com/

http://%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AB%E0%B8%A1%E0%B8%B9%E0%B9%88%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99.wordpress.com/

http://%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%AB%E0%B8%A1%E0%B8%B9%E0%B9%88%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99.wordpress.com/

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

เปนสวนแสดงเนอหา และดานขวาจะเปนสวนแสดงรายการเมนขอมลของหมบาน ดงน เนอหาลาสด (“เรอง” หรอ “Posts”)

เปนรายละเอยดของเรองราว เนอหา หรอ บทความ ตาง ๆ ในเวบไซต ซงในระบบเรยกวา “เรอง” หรอ “Posts”

“เนอหา” หรอ “เรอง” ตางจาก “เมนหลก” หรอ “หนา” ตรงท “เมนหลก” จะไมมหมวดหม เมอมการสรางหนาใหม ระบบจะสรางเมน เพอแสดงทหนาเวบไซตใหโดยอตโนมต แต “เนอหา” จะเปนการเขยนบทความ คอจะตองมหมวดหม ทจะแสดงเนอหา และเนอหาจะแสดงในหมวดหมทไดเลอกไว (เนอหา หรอ บทความ 1 เรอง สามารถเลอกใหแสดงหลายหมวดหมได) เมนหลก (“หนา” หรอ “Page”)

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

ขอมลทวไปของหมบาน ทตงหมบาน แผนทหมบาน เอกลกษณโดดเดนของหมบาน

ซงแตละเมน เปนการแสดงผลเนอหาแบบ Static โดยในระบบจะเรยกวา “หนา” หรอ “Page” หมวดหม (“Categories”)

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

การจดการความรของชมชน ขาวสารทวไปจากชมชน ศนยเรยนรชมชน ผลตภณฑชมชน

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


บทท 2 การเขาสระบบบรหารจดการเวบไซต การเขาสระบบบรหารจดการเวบไซตหมบาน เพอแกไข/เพมเตมขอมลตาง ๆ ใหพมพ URL

ของหมบาน (เหมอนการเขาสหนาแรกของเวบไซตหมบาน) และพมพคาวา /wp-admin ตอทาย เชน http://nernmakuek2.wordpress.com/wp-admin แลว Enter ระบบจะแสดงหนา Login สาหรบการเขาสระบบ

เมอระบบแสดงหนาจอ Login ใหใสชอผใช และรหสผาน ใหถกตอง จากนนคลกทปม เขาสระบบ (ชอผใช และรหสผาน กลมงานสารสนเทศฯ สพจ.พษณโลก เปนผกาหนดให)


http://nernmakuek2.wordpress.com/wp-admin

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


บทท 3 ตงคาทวไปของหมบาน

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

จะแสดงหนาจอการตงคาตงคาทวไป ดงรปดานลาง

1

2 3

4

5 6

9

8 7

หนาจอการตงคาทวไป จะมทงหมด 9 สวน ดงน

1. Site Title : ใสชอหมบาน 2. Tagline : ใสชอเวบไซตของหมบาน 3. อเมล : ใสอเมลของหมบาน 4. เขตเวลา : ใหตงเปน UTC+7


5. รปแบบวนท : เลอกรปแบบวนทของประเทศไทย 6. รปแบบเวลา 7. วนทเรมของสปดาห 8. ภาษา : เลอกภาษาไทย 9. เสรจแลวคลก บนทกการเปลยนแปลง


บทท 4 การแกไขขอมลเมนหลก

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

ทาการแกไขขอมลตามขนตอน ดงน

1

2

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

ลงในชองวาง 4. คลกท “อปเดต” เพอบนทกขอมล



3 4

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

1. ในหนาแกไขหนา ใหคลกทรายละเอยดของ “ขอมลทวไปของชมชน” ตรงบรเวณทตองการแทรกรปภาพ

2. คลกทไอคอนสเหลยม เพอแทรกรปภาพ

2

1

3. คลกท “เลอกไฟล” เพอเลอกไฟลทตองการ อปโหลดจากเครองคอมพวเตอรของเรา

3

4. คลกเลอกรปทตองการ จากนนคลกทปม Open

4


5. ระบบจะทาการอปโหลดไฟลรปภาพ จากนนจะแสดงหนาตาง สาหรบการกรอกรายละเอยดรปภาพ ใหทาการใสคาบรรยายใตภาพ และรายละเอยดภาพ

6. เลอกตาแหนงในการจดวางรปภาพ เชน ชดซาย กงกลาง หรอ ชดขวา และเลอกขนาดรปภาพทตองการ เชน ขนาดเลก ขนาดกลาง ขนาดใหญ หรอ เตมขนาด (โปรแกรมจะทาการปรบขนาดรปภาพตามทเลอกใหอตโนมต โดยไมตองใชโปรแกรมอนชวย)

7. คลกท “ใสเขาในเรอง” 8. รปทเลอกไว จะแสดงในตาแหนงทเราคลกเลอกไวตงแตขนตอนท 1 9. คลกท “อปเดต” เพอบนทก

5

6

7



9

8

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

(มมบนดานซาย) จากนนคลกท “Open in New Window” ดงรปดานลาง

10

11. ระบบจะเปดหนาเวบไซตหมบานหนาตางใหมขนมา

หมายเหต การเพมขอมล หรอ แกไขขอมล (ขนตอนท 3) สามารถ Copy เนอหาจากไฟล MS Word หรอเนอหาจากเวบไซต มาใสได แตกอนทจะนามาใสในชองวาง ใหเปดโปรแกรม Notepad ขนมา จากนนนาเนอหาททาการ Copy ไปวางใน Notepad แลว Copy เนอหาทงหมดจาก Notepad มาใสในชองวาง ทงนเพอปองกนการตด Code หรอ Style ทมากบโปรแกรม MS Word ซงอาจทาใหระบบเสยหาย และเกดขอผดพลาดได

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


การแทรกแผนท Google

การแทรกแผนทจาก Google มขนตอน ดงน 1. เปดหนาเวบไซต Google.co.th 2. คลกท “ลงชอเขาสระบบ”

1 2

4

3

3. หากยงไมเคยสมครสมาชก หรอยงไมมบญชผใช จะตองสรางบญชผใช Google กอน โดยคลกท

“สรางบญชผใชเดยวน” แลวขามไปขอ 5 แตถามบญชผใช Google แลว ใหทาขอ 4 4. กรอกอเมล และรหสผาน แลวคลก “ลงชอเขาใชงาน” แลวขามไปขอ 9


5. กรอกขอมลทจาเปนสาหรบสรางบญชผใช ดงตวอยางดานลาง

5

6

6. เสรจแลวคลกท “ฉนยอมรบ โปรดสรางบญชของฉน”


7. เขาอเมลทใชสรางบญชผใช เพอยนยน

7

8. คลกทลงค เพอยนยน เปนอนเสรจสนการสรางบญชผใช Google

8

เมอสรางบญชผใชเสรจแลว กจะสามารถลงชอเขาใชงานบญช Google ไดโดยทาตามขอ 1-2 และขามมาขอ 9

9. ทชอง Address Bar ใหพมพ www.google.co.th แลวกด Enter

9


http://www.google.co.th/

10. คลกทเมน “แผนท” และคลกท “แผนทของฉน” และคลก “สรางแผนทใหม”

10

11. คลกทเครองหมาย เพอเพมเครองหมายตาแหนง แลวเลอนเมาสมาคลกทสถานท ทตองการในแผนท เมอไดจดในแผนทแลว ใหใสชอสถานทในชอง ชอ เชน “พฒนาชมชนจงหวดพษณโลก” คลก “ตกลง” แลวใสชอสถานทในชองชอ อกครง แลวคลก “บนทก”

11


12. คลกท “ลงก” แลวคลกท “กาหนดเองและแสดงตวอยางแผนททฝงไว”

12

13. จะปรากฏหนาตางตวอยางแผนท ใหกาหนดขนาดทตองการในหวขอ 1

13


14. ถารปแผนทในตวอยางหวขอท 2 ยงไมถกใจ กสามารถเลอนซาย-ขวา-บน-ลาง หรอ ซมเขา -

ซมออก ไดจนกวาจะพอใจ แลวนาเมาสไประบายแถบสคมขอความทงหมด ในหวขอท 3 แลวคลกเมาสขวาในบรเวณขอความ แลวเลอก “Copy”

14


15. กลบมาทการจดการระบบเวบไซตหมบาน คลกท “หนา” เลอนเมาสมาทหวขอ “แผนทหมบาน”

แลวคลกเลอก “แกไข”

15

16. จะปรากฏหนาแกไขแผนทหมบาน ใหคลกทแทบ HTML แลวคลกเมาสขวาในพนทวาง เลอก

“Paste”

16


17. คลกท “อปเดต”

17

18. กลบไปหนาแรก Refresh เพอดการแสดงผล


การแทรกไฟลวดโอ

1. เขาเวบไซต Youtube.com แลวคลกท “Create Account” เพอลงทะเบยนสมาชก

2. กรอกขอมล Username ตามแบบฟอรม แลวคลก “I Accept”

1

2


3. กรอก E-mail Address และกาหนด Password และพมพตวอกษรใหตรง ตามทปรากฏ แลวคลก

“Create New Account and Finish”

3

4. เมอลงทะเบยนสมาชกเสรจเรยบรอย ใหเชคอเมล ทใชลงทะเบยนวามการตอบรบจาก YouTube

แลว

4

5. กรอก Username และ Password และคลก Sign in เพอเขาสระบบสมาชกของ YouTube

5


6. คลกเลอก Upload และคลกท Upload video

6

7. จะปรากฏหนาตางใหเลอกไฟลวดโอจากเครองคอมพวเตอรของเรา แลวคลก Open

7

8. แลวระบบจะทาการ Upload ไฟลวดโอจนครบ 100%

8


9. สามารถแกไขชอเรองของไฟลวดโอได ในชอง Title เลอกหมวดหมในชอง Category เลอกการ

ใหสทธในชอง Privacy เสรจแลวคลกปม “Save changes”

9

10. คลกเมาสซายในชอง Embed เพอใหเกดแถบสคมขอความทงแถว แลวคลกเมาสขวา ในชองเดยวกน เลอก “Copy”

10


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

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

11


12


บทท 5 การสรางเนอหา

ในบทนจะเปนการเพม และการแกไขเนอหา ซงในระบบจะเรยกเนอหา หรอ บทความ ตาง ๆ ในเวบไซต (ทไมใช “หนา” หรอ “Page”) วา “เรอง” หรอ “Posts”

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

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

ตวอยางเนอหาทยงไมมการแกไข


การเพมเนอหา เนอหาในเวบไซต สามารถเพมไดไมจากด วธการเพมเนอหา ใหทาตามขนตอนดงน

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

1

3

4

5

2

4. เลอกหมวดหมทจะแสดงเนอหา สามารถเลอกไดมากกวา 1 หมวดหม 5. คลกท “เผยแพร” เพอบนทกและแสดงเนอหาหนาเวบ (ในกรณทไมคลก “เผยแพร” หนาเวบจะ

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


การแกไขเนอหา มขนตอนดงน 1. คลกท “เรอง” 2. เลอนเมาสไปท ชอเรองทตองการแกไข แลวคลกท “แกไข”

1

2

3. ใสเนอหาลงในชองวาง 4. คลกท “เผยแพร” เพอบนทก

3 4



5


Date post:	11-Jun-2020
Category:	Documents
Upload:	others
View:	5 times
Download:	0 times

- WordPress.com...Dreamweaver ได้แก่ Show Code View, Show Code and Design View และ...

Documents