แผนการจดการเรยนรบรณาการงานสวนพฤกษศาสตรโรงเรยน

กลมสาระการเรยนรการงานอาชพเทคโนโลย

โรงเรยนหนองบวระเหววทยาคาร อ าเภอหนองบวระเหว จงหวดชยภม

วชา เทคโนโลยสารสนเทศ 1 รหสวชา ง.31242 ชนมธยมศกษาปท 4

หนวยการเรยนรท 3 การสรางเวบเพจ เวลา 6 ชวโมง

แผนการจดการเรยนร เรอง การจดท าขอมลพรรณไมดวยเวบเพจ เวลา 2 ชวโมง

บรณาการ งานสวนพฤกษศาสตรโรงเรยน องคประกอบท 1

พชสนใจ........................................ พชศกษา…………………………

ครผสอน……นายราชศกด จตรสตระกล

……………………………………………………………………………………………………………………………………………………………

1. สาระส าคญ/ความคดรวบยอด

เทคโนโลยสาระสนเทศ ไดเขามามบทบาทตอการพฒนาสงคมในดานตางๆมากมายและมเทคโนโลย

ทางดานสาระสนเทศทเกยวของกบการสอสารขอมล จดเกบ บนทก ประมวลผลรวมทงเสนอขอมล เรยกวา

เทคโนโลยดานคอมพวเตอร ซงเปนเทคโนโลยทางการสอสารดนอเลกทรอนกสชนดหนง ทมนษยเปนผ

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

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

ตามทเราตองการนนกคอ “คอมพวเตอร”

เมอคนเราไดรจกการใชคอมพวเตอร เพอท างานตาวความตองการแลวยงไดน าเอาเทคโนโลยดาน

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

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

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

ซงการจดการขอมลบนเวบไซดนกเรยนจ าเปนตองเรยนรเรองการใชโปรแกรม การสงขอมล(Upload) การดง

ขอมล(Dowload) การปรบปรงขอมล (Update)

2. มาตรฐานการเรยนร/ตวชวด/จดประสงคการเรยนร

2.1 มาตรฐานการเรยนร

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล

การเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางม ประสทธภาพ ประสทธผล และม

คณธรรม

2.2 ตวชวด

ตวชวดท 3 การน าเสนอขอมล และตดตอสอสารผานเครอขายคอมพวเตอร อยางมคณธรรมและ

จรยธรรม

2.3 จดประสงคการเรยนร

1. อธบายถงประโยชน โทษ และผลกระทบ ของอนเตอรเนต ตอตนเอง สงคม และสงแวดลอม

2. ใชโปรแกรมส าหรบสรางเวบเพจในการน าเสนอขอมลได

3. มงมนในการท างาน จนงานทมอบหมายส าเรจ อยางมคณภาพ และทนก าหนดเวลา

3. สาระการเรยนร

1. โปรแกรมสรางเวบเพจ

2. การใชโปรแกรม Ftp

4. สมรรถนะส าคญของผเรยน

1. ความสามารถในการสอสาร

2. ความสามารถในการคด

3. ความสามารถในการแกปญหา

4. ความสามารถในการใชทกษะชวต

5. ความสามารถในการใชเทคโนโลย

5. คณลกษณะอนพงประสงค

ขยน ซอสตย อดทน

6. กจกรรมการเรยนร

ขนน าเขาสบทเรยน

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

ครใชค าถามเพอกระตนใหนกเรยนเกดพลงคด “เราจะน าเสนอขอมลบนอนเตอรเนตไดอยางไร” โดย

สมนกเรยนตอบตามความคด 4-5 คน

ขนจดกจกรรมการเรยนร

1. ครรวบรวมและสรปขอมลบนเครอขายอนเตอรเนตแลวสรปความส าคญของขอมลบนเครอขาย

อนเตอรเนต

2. ครอธบายการใชโปรแกรม Web Editor แลวครกอธบายการจดสงขอมล(Upload)ไปเครองเวบ

เซรฟเวอร พรอมกนอธบายวธปรบปรงบนเวบไซต(Update)แลวใหนกเรยนฝกปฏบต

3. ครใหนกเรยนแบงกลมแลวน าใบงานม1ไปศกษาขอมลพรรณไมในโรงเรยนโดยครมอบหมายใหไปศกษา

กลมละ 1 ชนดแลวน าขอมลทไดจากการส ารวจมาจดท าเปนเวบไซตแลวน าเวบขนเวบ เซรฟเวอร

4. ประเมนผเรยน ดานความร ความเขาใจ(ประเมนผลจากใบงานและการปฏบตกจกรรมระหวางเรยน)

ขนสรปและประเมนผล

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

ใหคะแนนจากงานนกเรยนบนเวบไซตจากงานสวนพฤกษศาสตรโรงเรยน

7. สออปกรณและ แหลงเรยนร

สออปกรณ

1. ใบความร

2. ใบงาน

3. ระบบอนเตอรเนต

แหลงเรยนร

1. สวนพฤกษศาสตรโรงเรยน โรงเรยนหนองบวระเหววทยาคาร

2. หองสวนพฤกษศาสตรโรงเรยน โรงเรยนหนองบวระเหววทยาคาร

3. เวบไซตงานสวนพฤกษศาสตรโรงเรยน http://www.rwschool.ac.th/rw

8. การวดและประเมนผล

วธการ เครองมอ เกณฑ

ตรวจผลงานตามใบงาน ท 1 ใบงาน และเวบเพจ รอยละ 70 ผานเกณฑ

สงเกตพฤตกรรมการท างานกลม

(สมรรถนะผเรยน)

แบบสงเกตพฤตกรรมการท างาน

กลม

ระดบคณภาพ 2 ผานเกณฑ

สงเกตความซอสตยสจรต มวนย ใฝ

เรยนร และมงมนในการท างาน

แบบประเมนคณลกษณะอนพง

ประสงค

ระดบคณภาพ 2 ผานเกณฑ

บนทกหลงสอน

- บนทกผลการจดการเรยนร

………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

- ปญหาและอปสรรค

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

- ขอเสนอแนะแนวทางแกไข

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

ลงชอ………………………………………………………. ครผสอน

(นายราชศกด จตรสตระกล)

หวหนากลมสาระการเรยนรการงานอาชพเทคโนโลย

ขอเสนอแนะ

............................................................................................................................................

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

ลงชอ…………………………………………….หวหนากลมสาระการเรยนร

(นายสมเกยรต วงศสขสน)

ความเหนของผบรหารสถานศกษาหรอผทไดรบมอบหมาย

ขอเสนอแนะ

............................................................................................................................................

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

ลงชอ…………………………………………….หวหนาฝายวชาการ

(นางนยา ชาล)

ขอเสนอแนะ

............................................................................................................................................

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

ลงชอ…………………………………………….รองผอ านวยการโรงเรยน

(นางสาวสมาพร ลมไพบลย)

ขอเสนอแนะ

............................................................................................................................................

……………………………………………………………………………………………………………………………………………………………

……………………………………………………………………………………………………………………………………………………………

ลงชอ…………………………………………….....ผอ านวยการโรงเรยน

(นายสทธพร บ าเพญเพยร)

ใบงานท 1

หนวยท 3 เรองการจดท าขอมลบนเวบเพจ รายวชา เทคโนโลยสารสนเทศ 2 ง31242

ใหนกเรยนแบงกลมกลมละ 5-7 คนแลวไปศกษาขอมลพรรณไมในโรงเรยน จากหองสวนพฤกษศาสตร

กลมละ แลวน ามาจดท าเปนเวบเพจตามแบบฟอรมตามตวอยาง

รหสพรรณไม..........................

ชอพรรณไม..........................

สรปขอมลพรรณไม

……………………………………………………………………………………………………………………………...........

……………………………………………………………………………………………………………………………...........

……………………………………………………………………………………………………………………………...........

……………………………………………………………………………………………………………………………...........

……………………………………………………………………………………………………………………………...........

แบบประเมน ใบงานท 1

หนวยท 3 แผนการจดการเรยนรท 1 เรอง การจดท าขอมลพรรณไมดวยเวบเพจ

คะแนนเตม 10 คะแนน รายวชา เทคโนโลยสารสนเทศ 2 โรงเรยนหนองบวระเหววทยาคาร

***************************************************************************

เกณฑการใหคะแนน

ประเดนการ

ประเมน

ระดบคะแนน / ลกษณะของงาน

9-10 7-8 5-6 3-4 1-2

ความสมบรณ

ของชนงาน

(ตามดลพนจของ

ครผสอน)

-สงตรงเวลา

-เรองถกตอง

-ภาพเขาใจงาย

ชดเจน

-ม ค ว า ม ค ด

สรางสรรค

-ล าดบภาพถกตอง

-สงตรงเวลา

-เรองถกตอง

-ภาพเขาใจงาย

ชดเจน

-ม ค ว า ม ค ด

สรางสรรค

-สงตรงเวลา

-เรองถกตอง

-ภาพเขาใจงาย

ชดเจน

-สงตรงเวลา

-เรองถกตอง

-สงตรงเวลา

ลงชอ................................................ผประเมน

( นายราชศกด จตรสตระกล )

แบบประเมนคณลกษณะอนพงประสงค

เลขท ชอ – นามสกล

คณลกษณะอนพงประสงค

รกชาต

ศาสน

กษตรย

ซอสตย

สจรต

มวนย ใฝเรยนร อยอยาง

พอเพยง

มงมนใน

การ

ท างาน

รกความ

เปนไทย

มจต

สาธารณะ

1,2,3 1,2,3 1,2,3 1,2,3 1,2,3 1,2,3 1,2,3 1,2,3

1

2

3

4

5

6

7

8

นกเรยนทผานการประเมน (ไดระดบผลการประเมน 1-3) จ านวน .......... คน คดเปนรอยละ ................

นกเรยนทไมผานการประเมน (ไดระดบผลการประเมน 0) จ านวน .......... คน คดเปนรอยละ ................

ลงชอ................................................ผประเมน

(นายราชศกด จตรสตระกล)

เกณฑการใหคะแนน

มคณลกษณะในระดบดเยยม ให 3 คะแนน

มคณลกษณะในระดบด ให 2 คะแนน

มคณลกษณะในระดบผานการประเมน ให 1 คะแนน

แบบประเมนสมรรถนะผเรยน

เลขท ชอ – นามสกล

คณลกษณะอนพงประสงค

ความสามารถ

ในการสอสาร

ความสามารถ

ในการคด

ความสามารถ

ในการ

แกปญหา

ความสามารถ

ในการใช

ทกษะชวต

ความสามารถ

ในการใช

เทคโนโลย

1,2,3 1,2,3 1,2,3 1,2,3 1,2,3

1

2

3

4

5

6

7

8

นกเรยนทผานการประเมน (ไดระดบผลการประเมน 1-3) จ านวน .......... คน คดเปนรอยละ ................

นกเรยนทไมผานการประเมน (ไดระดบผลการประเมน 0) จ านวน .......... คน คดเปนรอยละ ................

ลงชอ................................................ผประเมน

(นายราชศกด จตรสตระกล)

เกณฑการใหคะแนน

มคณลกษณะในระดบดเยยม ให 3 คะแนน

มคณลกษณะในระดบด ให 2 คะแนน

มคณลกษณะในระดบผานการประเมน ให 1 คะแนน

ใบความรเรองการสรางเวบ ดวยโปรแกรม Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 เปนอกโปรแกรมหนง ทมการออกแบบ มาเพอทจะใชในการจดการกบ

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

ทมความรในภาษา HTML มาเขยนรหสค าสง (Code) ให แตในปจจบน โปรแกรม Macromedia Dreamweaver

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

เนองจากโปรแกรม Macromedia Dreamweaver 8 นนจะมลกษณะ การท างานทคลายๆ กบโปรแกรมพมพ

เอกสารทเราเคยใชและรจกกนด ซงจะมเครองมอและแถบค าสงใหเราเลอกใชได เหมอนกบ Word

Processor จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

จดเดนของโปรแกรม Macromedia Dreamweaver 8

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

ท าได

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

ท างานทดขน และรวดเรวยงขน

3. สนบสนนเวบเพจทเปนภาษาไทยไดด

4. มคณสมบตทสามารถจดการกบรปภาพเคลอนไหว โดยไมตองอาศย Plugin

5. สามารถเรยกใชตารางจากภายนอก โดยการอมพอรทจาก Text File

6. เปนโปรแกรมทสามารถสนบสนนการใชงาน CSS (Cadcading Style Sheet)

7. มความสามารถในการท า Drop Down Menu รวมไปถงการท าใหรปภาพเปลยนเมอน าเมาสไปช เปน

ตน

ความสามารถของ Macromedia Dreamweaver 8

สรางเวบเพจภาษาไทย

รจกฟงกชนตาง ๆ ของ Macromedia

Dreamweaver

การก าหนดคา เพอใชในการสรางเวบเพจ ภาษาไทย

โปรแกรม Macromedia Dreamweaver 8 มการเขยนขนมา เพอความสะดวกสบาย ในการสรางเวบเพจ

เนองจากมวธการใชทเหมอนกบ โปรแกรม Microsoft Office มเมนตางๆ ใหผใชเลอกใชจากนน โปรแกรมจะท า

การแปลงใหเปน ภาษา HTML ซงเปนภาษาในการเขยนเวบเพจ ใหเองโดยอตโนมต

โปรแกรม Macromedia Dreamweaver 8 นนถกออกแบบมา ใหใชไดกบเวบเพจทกภาษา และสามารถท

จะเลอกใชฟอนต ไดตามทมในระบบปฏบตการ ซง โปรแกรม Macromedia Dreamweaver 8 จะมวธในการ

เขารหสทเปนตวอกษรแบบมาตรฐานเทานน คอ (Unicode) ซงจะท าใหมความสะดวกสบายยงขน ทไมตอง

ตดตงโปรแกรมเพมเตมเหมอนกบเวอรชนเกาๆ แตในการทจะใชกบภาษาอะไร ตองมการก าหนดรหส

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

เนองจากภาษาไทยนน มตวอกษร ทคอนขางจะละเอยดออนมาก จงท าใหเกดปญหาบางครง จะอาน

ภาษาไทยไมได ดงนน กอนทจะ ลงมอในการสรางเวบเพจ ดวยโปรแกรม Macromedia Dreamweaver 8 นน

ตองมการก าหนดรหส (Encoding) เพอใหเวบเพจนนสามารถอาน ภาษาไทยได ซงมวธ ในการทจะก าหนด

เพอให Macromedia Dreamweaver 8 อานภาษาไทยไดดงน

เลอกค าสงทเมนบาโดยเลอก Modify จากนนเลอก Page Properties (หรอสามารถเลอกไดทปม Page

Properties ทอยบนพาแนล Properties Inspector)

จากนนใหเลอกทหมวดของ Title/Encoding

ในชอง Encoding นนใหเลอกท Thai (Windows)

จากนนคลก OK

รจกฟงกชนตาง ๆ ของ Macromedia Dreamweaver

ส าหรบโปรแกรม Macromedia Dreamweaver เปน โปรแกรมเขยนเวบ ทออกแบบมาเพอ ชวยจดการกบ

เวบเพจ โดยผใชไมจ าเปนตองมความร ในภาษา HTML ซงเปนภาษาส าหรบสรางเวบเพจ โดยตรง ดงนน

โปรแกรม Macromedia Dreamweaver จงมฟงกชนตางๆ มากมายซงแตละ ฟงกชนกจะ แสดงผลในลกษณะ

ของ วนโดวส (WINDOWS) หรอแถบค าสง (PALETTE) ตวอยางของ ฟงกชน เชน (BEHAVIOR) เปน ฟงกชน

ส าหรบใชในการควบคม การใชสครปตตางๆ เปนตน ในการทจะเลอกใชฟงกชน ผใชตองท าความเขาใจ และ

เรยนรวธในการควบคมการท างาน ของฟงกชนตางๆ ใหเขาใจเสยกอน และวธเรยกใชฟงกชนตางๆ ของ

โปรแกรม Macromedia Dreamweaver กสามารถท าไดดงน เลอกค าสงทเมนบาโดยคลกเลอกเมน Window ก

จะปรากฏ รายการของค าสงควบคม หรอฟงกชนตางๆ ใหเลอก

ส าหรบฟงกชน ทเปนมาตรฐานในการ ท างานกบโปรแกรม Macromedia Dreamweaver ทมการใช งาน

บอยๆ กมอย 3 ฟงกชน ไดแก

ฟงกชน Insert จะเปนฟงกชนทใชส าหรบควบคมเกยวกบวตถตางๆ เชน เลเยอร, รปภาพ ซงแถบ

เครองมอนจะประกอบไปดวย ชดเครองมอตางๆ คอ Characters , Common, Form, Frames, head,

Invisible

ฟงกชน Properties เปนฟงกชนลกษณะตางๆ เชน ใชในการก าหนดคาของขอความในเวบ สของ

ตวหนงสอ รปภาพ ตาราง เปนตน

ฟงกชน Launcher เปนฟงกชนส าหรบใชในการจดการหรอควบคมในสวนของ สครปต (Behaviors)

วธ เซตให โปรแกรม Macromedia Dreamweaver 8 เปดขนมาเปน ภาษาไทย

1.เขาไปท Edit->Preferences ดงรป (หรอกด crl+u)

2.เลอก NEW Document แลวเปลนคาตางๆ ใหเปน ดง

ค าสงพนฐานทควรทราบในการเรมสรางเวบเพจ

การก าหนดต าแหนงทเกบเวบไซต ค าสงในการสราง เปด บนทกเวบไซต ฯลฯ

การเรมใชงานโปรแกรม Dreamweaver 8

เมอเขาสโปรแกรม Dreamweaver 8• จะปรากฏกรอบ Workspace Setup ดงรป ใหคลกเลอก

Designer แลวคลก OK เพอเขาสหนาจอการออกแบบของโปรแกรม Macromedia Dreamweaver 8

จากนนจะปรากฎหนาจอ Start Page ซงเปนเครองมอส าหรบเรมตนการท างาน โดยตวเลอกจะ

แบงเปน 3 กลมดงรป ส าหรบการสรางเวบเพจเปลาแบบพนฐาน ใหเลอกกลม Create New แลวคลกท HTML

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

แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทก าลงใชงานอย

แถบค าสง (Menu Bar) เปนสวนทเกบค าสงตาง ๆ ทใชงานในโปรแกรม Dreamweaver 8

แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ณ ขณะนน เชนการเปลยนมมมอง

ในการดหนาเวบเพจ

แถบ Insert Bar เปนกลมเครองมอทใชสรางองคประกอบตาง ๆ ในเวบเพจ ซงประกอบดวยชด

เครองมอ 8 ชดดวยกน

พนทออกแบบ (Document Window) เปนสวนทใชส าหรบใสเนอหาและจดองคประกอบของเวบ

เพจ โดยประกอบดวยมมมองการท างาน 3 รปแบบดวยกนคอ Design, Code และ Code and Design

แถบสถานะ (Status Bar) เปนสวนทแสดงสถานะของการใชงานโปรแกรม ณ ขณะนน หนาตาง

Properties เปนสวนของค าสงทใชในการก าหนดคณสมบตขององคประกอบตาง ๆ ทเราตองการ

เปลยนแปลงหรอตกแตง

Panel Group เปนกลมของแผงควบคม ทใชแทนค าสงและตดตอกบฐานขอมล

มมมองตาง ๆ ของ Document Windows

ในการออกแบบหนาเวบเพจดวยโปรแกรม Dreamweaver 8 เราสามารถเลอกรปแบบหรอมมมองของ

หนาตางเวบเพจได 3 รปแบบดวยกนคอ

Show Code View ใชแสดงหนาจอออกแบบเปนภาษา HTML

Show Code and Design View ใชแสดงหนาจอออกแบบเปนภาษา HTML และหนาจอออกแบบ

จรง

Show Design View ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบจรง

การซอนและแสดงเครองมอออกแบบ

ในการออกแบบเวบเพจนน บางครงตองการใชเครองมอเพมเตมเพอใชในการออกแบบ แตบางครงก

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

ออกแบบในโปรแกรม Dreamweaver 8 สามารถท าไดหลายวธดวยกน ดงนคอ

วธท 1 โดยการคลกทค าสง Windows แลวคลกค าสงทตองการใชงาน

วธท 2 โดยการคลกทปมลกศรเลก ๆ หนาแถบ Panel

วธท 3 กดแปนพมพ <F4> เพอซอนหรอแสดงเครองมอทงหมด

การก าหนดโฟลเดอรเพอเกบเวบไซตทสรางใหม

การเรมตนสรางเวบไซตใหมในโปรแกรม Dreamweaver 8 จะตองเรมตนจากการตงชอเวบไซต และ

ก าหนดต าแหนง เชน ไดรฟ และโฟลเดอร ทจะใชเกบไฟลตาง ๆ ของเวบไซตทเราจะออกแบบ ซงท าไดตาม

ขนตอนดงนคอ

1. คลกค าสง Site>New Site…

2. จะปรากฏกรอบ Site Definition ขนมา ใหพมพชอเวบไซตทตองการ แลวคลกปม Next

3. ใหคลกเลอก No, I do not want…….. แลวคลกปม Next

4. ระบชอไดรฟและโฟลเดอรทจะใชเกบขอมลของเวบไซตทจะท าการออกแบบ จากนนคลกปม Next

5. คลกทชอง How do you connect to your remote server ? แลวคลกตวเลอก None จากนนใหคลกทปม

Next

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

ออกแบบเวบเพจ

7. จะปรากฏชอของเวบไซต พรอมทงต าแหนงทเกบเวบไซต แสดงไวใน Panel Group

การสรางหนาเวบเพจใหม

การสรางเวบเพจใหม สามารถท าไดโดย

1. คลกค าสง File>New... ทแถบเมน

2. จะปรากฎกรอบ New Document ขนมา โดยคลกทตวเลอก Basic page ในชอง Category

3. คลกตวเลอก HTML ทชอง Basic page

4. คลกปม Create

การก าหนดคณสมบตพนฐานของเวบเพจ

กอนการออกแบบเวบเพจทกครง ควรเรมจากการก าหนดคณสมบตพนฐาน เชน ชอเวบเพจ (Title) ส

พน (Background color) สของขอความ (Text color) เปนตน Page Propertiesโดยสามารถก าหนดไดดวยค าสง

Modify

1. การก าหนดลกษณะการแสดงผล (Appearance)

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

Page font รปแบบตวอกษร

Size ขนาดตวอกษร

Text color สของขอความทวไป

Background color สพนหลงของหนาเวบเพจ

Background image ภาพฉากหลงของหนาเวบเพจ

Repeat วธแสดงภาพฉากหลงแบบซ า ๆ

Left margin ระยะของดานซายของหนาเวบเพจ

Right margin ระยะของดานขวาของหนาเวบเพจ

Top margin ระยะของดานบนของหนาเวบเพจ

Bottom margin ระยะของดานลางของหนาเวบเพจ

2. การก าหนดลกษณะขอความหวเรองและภาษา (Title/Encoding)

Title/Encoding เปนการก าหนดชอและภาษาทใชของเวบเพจ มรายละเอยดดงนคอ

การบนทก (Save) เวบเพจ

ไฟลเวบเพจของ Dreamweaver 8 ถายงไมไดบนทก (Save) ขอมลทท าการแกไข จะสงเกตไดจากบน

แถบชอเรอง (Title Bar) จะมเครองหมาย * ปรากฏอยทายชอไฟล ซงเปนเครองหมายเตอนวายงไมไดบนทก

(Save) ขอมลของไฟลนน ไฟลขอมลของ Dreamweaver 8 จะถกจดเกบใหเปนไฟลประเภท html ใหอตโนมต

ค าสงทใชในการจดเกบขอมล สามารถเลอกใชไดดงนคอ

o File>Save… จดเกบไฟลโดยใชชอเดม

o File>Save As… จดเกบไฟลโดยใชชอใหม

o File>Save as Template… จดเกบเปนไฟลเทมเพลต

o File>Save to Remote Server จดเกบไวท Remote Server

o File>Save All จดเกบทกไฟลทเปดใชงานอย

o นอกจากนยงสามารถใชแปนพมพ <Ctrl>+<S> แทนการใชค าสง File>Save… หรอ File>Save

As… ได

การดผลการออบแบบบนบราวเซอร

การออกแบบเวบเพจดวยโปรแกรม Dreamweaver 8 ผออกแบบควรท าการตรวจสอบการแสดงผลท

เวบบราวเซอร (Web Browser) ดวย เพราะการแสดงผลบางอยางไมสามารถจะแสดงผลใน Dreamweaver 8

ได ส าหรบการดผลทเวบบราวเซอร (Browser) ท าไดดงนคอ

คลกค าสง File>Preview in Browser>iexplorer (หรอคลกแปนพมพ <F12>)

จะปรากฏหนาของเวบเพจในเวบบราวเซอร (Web Browser)

การเปด (Open) ขนมาแกไข

เวบเพจทไดออกแบบยงไมเสรจหรอตองการท าการแกไขใหม สามารถเปดเวบเพจนน ๆ ขนมาแกไขได ตาม

ขนตอนดงน คอ

1. เรยกใชงานในสวนของ Group Panel จากนนใหคลกเลอกชอของเวบไซตทตองการแกไขขนมา

2. ดบเบลคลกชอไฟลประเภท htm หรอ html ทตองการแกไข

3. ไฟลทตองการแกไขจะปรากฏขนมา

การแทรกขอความบนหนาเวบเพจ

การแทรกขอความ และอกขระพเศษ และการจดรปแบบขอความ

การใส Title

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

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

Engine ใชคนหาเวบเพจอกดวย

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

การใสขอความบนหนาเวบ

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

ขอความทพมพไวเรยบรอยแลวจากไฟลอนมาใชกได

1. การพมพขอความในหนาเวบเพจ

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

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

2. การคดลอกขอความจากไฟลอนมาไวในหนาเวบเพจ

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

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

แบบ Text File (มนามสกลเปน txt) โดยมวธการดงนคอ

เปดไฟลทเกบขอความทตองการขนมา จากนนระบายขอความทตองการ

คลกค าสง Edit>Copy หรอกดแปนพมพ <Ctrl>+<C>

เปดหนาของเวบเพจทออกแบบดวยโปรแกรม Dreamweaver 8 จากนนคลกค าสง

Edit>Paste หรอกดแปนพมพ <Ctrl>+<V>

ขอความทคดลอกมาจะแสดงในหนาเวบเพจ

3. การเวนวรรคระหวางขอความ

การใสขอความบนหนาเวบเพจนน ปกตแลวโปรแกรม Dreamweaver 8 จะเวนวรรคใหเพยง 1 ครง

เทานน แตอยางไรกตามเราสามารถทจะเวนวรรคมากกวา 1 ครงได โดย กดแปนพมพ

<Ctrl>+<Shift>+<Space>

การจดรปแบบขอความบนหนาเวบ

การจดรปแบบอกษรในงานออกแบบเวบเพจดวยโปรแกรม Dreamweaver 8 สามารถท าไดดงนคอ

1. ระบายขอความทตองการจดรปแบบอกษร

2. ก าหนดคาในสวนของพาเนล Properties

การแทรกตวอกษรพเศษ (Symbol)

1. การเพมระยะเวนวรรคระหวางขอความ

Dreamweaver 8 ก าหนดใหเวนวรรคระหวางขอความไดเพยง 1 ชองเทานน เมอตองการทจะใหมระยะเวน

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

วางเคอรเซอรในต าแหนงทตองการเพมระยะเวนวรรค

คลกแถบ "Common" แลวคลกเลอกแถบ "Text"

จากนนกดแปนพมพ <Ctrl>+<Shift>+<Space Bar> หรอคลกเครองมอ "BR" แลวคลกค าสง

"Non-Breaking Space"

2. การแทรกสญลกษณพเศษ

สญลกษณพเศษทไมมในแปนพมพ สามารถจะแทรกเพมเตมไดจากแถบ Characters โดยท าไดดงนคอ

วางเคอรเซอรในต าแหนงทตองการแทรกสญลกษณพเศษ

คลกแถบ "Common" แลวคลกเลอกแถบ "Text"

จากนนคลกเครองมอ "BR" แลวคลกเลอกสญลกษณตามตองการ

การใสวนท

การใสวนทในหนาเวบเพจ นอกจากเพอตองการแสดงวนทแลว เรายงสามารถก าหนดรปแบบวนท พรอมทง

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

วางเคอรเซอรในต าแหนงทตองการแทรกวนท

คลกแถบ "Common" บน Insert Bar

จากนนคลกเครองมอ จะปรากฏกรอบใหก าหนดรปแบบ

ใหเลอกรปแบบตามทตองการแลวคลก OK

ถาตองการใหวนทปรบเปลยนอตโนมตใหคลกเครองหมายถก ทหนาขอความ Update Automatically

on Save

การใสเสนคนเนอหา

1. การแทรกเสนแบงเนอหา มวธการดงนคอ

วางเคอรเซอรในต าแหนงทตองการแทรกเสน

คลกเลอกแถบ "HTML" บน Insert Bar

จากนนคลกเครองมอ

2. การปรบแตงสเสน

คลกทเสนคนทตองการปรบแตง

ก าหนดคาในสวนของพาเนล Properties ซงประกอบดวย

o W คอความยาวของเสน ซงจะเลอกก าหนดเปนแบบพกเซล หรอ % กได

o H คอความหนาของเสน คาปกตจะก าหนดความหนาไวท 3 พกเซล

o Align คอการจดวางเสน จะเลอกแบบชดซาย กลาง ขวา กได

o Shading คอการก าหนดใหเสนเปนแบบเสนทบหรอเสนโปรง