หลักสูตร...
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
(ตัวอย่างการพิมพ์บทความวิจัย)rms.ptl.ac.th/files/05522_16030417172759.doc · Web viewกล มต วอย างท ใช
นวข้อสอบปลัดอ ำภอrms.ptl.ac.th/files/08604_16060815154202.pdfรวบรวมโดยประพ นธ เวำร มย ***** 1. กำรบร