แผนการสอน เว็บไซต์ ม.5

แผนการจั�ดการเร�ยนร �กลุ่��มสาระการเร�ยนร �

การงานอาชี�พแลุ่ะเทคโนโลุ่ย�(การออกแบบเว็�บไซต์")

โรงเร�ยนว็�งบ�อว็#ทยา ต์.ว็�งบ�อ อ.หนองบ�ว็ จั.นครสว็รรค"

ส&าน�กงานเขต์พ()นท�*การศึ,กษาม�ธยมศึ,กษานครสว็รรค" เขต์ 42

ค&าอธ#บายรายว็#ชีา

กลุ่��มสาระการเร�ยนร � การงานอาชี�พแลุ่ะเทคโนโลุ่ย�

รายว็#ชีา การออกแบบเว็�บไซต์"

รห�สว็#ชีา ง 40203

ชี�)นม�ธยมศึ,กษาปี0ท�* 5

เว็ลุ่า 40 ชี�*ว็โมง

รายวิ�ชา การออกแบบเวิ�บไซต์� ช��นมั�ธยมัศึ�กษาปี�ที่�� 5 ศึ�กษาเก��ยวิก�บห ลั� ก ก า ร ส ร# า ง เ วิ� บ เ พ จ ด้# วิ ย โ ปี ร แ ก ร มั ส)า เ ร� จ ร* ปี Macromedia

DreamweaverMX การปีระย,กต์�การสร#างเวิ�บไซต์� การจ�ด้แลัะการต์กแต์-งข้#อควิามั การแที่รกร*ปีภาพลังในเวิ�บเพจ การสร#างต์าราง การสร#างจ�ด้เช2�อมัโยงในแต์-ลัะหน#าเวิ�บเพจ เวิ�บไซต์� การแบ-งหน#าเวิ�บเพจเปี3นส-วินๆ การสร#างฟอร�มัเพ2�อรองร�บข้#อมั*ลัจากผู้*#ใช# การปีระย,กต์�สร#างเลัเยอร�ในการต์กแต์-งเอกสารเวิ�บเพจ การแที่รกมั�ลัต์�มั�เด้�ยส2� อต์-างๆ ลังในเวิ�บเพจ การจ�ด้การเวิ�บไซต์� เช-น การข้อพ2�นที่��เพ2�อรองร�บเวิ�บไซต์�ข้องเรา การข้อข้อใช#บร�การเสร�มัต์-างๆ การน)าเวิ�บไซต์�ข้��นส*-อ�นเต์อร�เน�ต์ เพ2�อการต์กแต์-งเวิ�บเพจให#สวิยงามั

กลุ่��มสาระการเร�ยนร � การงานอาชี�พแลุ่ะเทคโนโลุ่ย�รายว็#ชีา การออกแบบเว็�บไต์"

รห�สว็#ชีา ง 40203ชี�)นม�ธยมศึ,กษาปี0ท�* 5 เว็ลุ่า 40 ชี�*ว็โมง

หน�ว็ยการเร�ยนร � ผลุ่การเร�ยนร �ท�*คาดหว็�งเว็ลุ่า(ชี�*ว็โมง)

หน�ว็ยท�* 1 เร2�อง การต์�ด้ต์��งโปีรแกรมั

1. อธ�บายควิามัร* #เบ2� องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX

ได้# 2. ปี ฏิ� บ� ต์� ก า ร ต์� ด้ ต์�� ง โ ปี ร แ ก ร มั

Dreamweaver MX

3. เข้#าส*-โปีรแกรมั Dreamweaver

MX ได้#

4

หน�ว็ยท�* 2 เร2�อง การใช#งานภาษาไที่ย

1. ปีร�บเปีลั��ยนการต์��งค-าภาษาได้# 2

หน�ว็ยท�* 3 เร2�อง การด้* Preferences

1. สามัารถปีร�บต์��งค-า Preferences 4

หน�ว็ยท�* 4 เร2�อง การสร#างต์าราง

1. อธ�บายข้��นต์อนการสร#างต์ารางได้#โด้ยใช#โปีรแกรมั Dreamweaver

MX ได้#

2. สร#างแลัะแก#ไข้ต์ารางเพ2�อใช#ในการสร#างสรรค�เวิ�บเพจได้#

6

หน�ว็ยท�* 5 เร2�อง การแที่รกข้#อควิามั

1. แที่รกข้#อควิามัลังในเวิ�บเพจได้#

2. แ ก# ไ ข้ ข้# อ ค วิ า มั เ พ2� อ ใ ช# ใ น ก า รสร#างสรรค�เวิ�บเพจได้#

6

หน�ว็ยท�* 6 เร2�อง การ แที่รก ร*ปีภาพ

1. อธ�บายร* ปีแบบต์- างๆข้องไฟ ลั�ร*ปีภาพที่��เหมัาะสมัส)าหร�บเวิ�บเพจได้#

2. ปีฏิ�บ�ต์� การแที่รกร*ปีภาพลังในเวิ�บเพจได้#

6

หน�ว็ยท�* 7 เร2�อง การเช2�อมัโยง 1. อธ�บายร*ปีแบบการเช2�อมัโยงแบบต์-างๆได้#

2. สร#างจ,ด้เช2�อมัโยงในร*ปีแบบต์-างๆได้#

6

หน�ว็ยท�* 8 เร2�อง การ แที่รก ไฟลั�มั�ลัต์�มั�เด้�ย

1. แที่รกไฟลั�มั�ลัต์�มั�เด้�ยลังในเวิ�บเพจได้#

6

ก&าหนดการสอน

กลุ่��มสาระการเร�ยนร � การงานอาชี�พแลุ่ะเทคโนโลุ่ย�

รายว็#ชีา การออกแบบเว็�บไซต์"

รห�สว็#ชีา ง 40203

http://kruwan.school.in.th/dream/ch_5_index.htm









ชี�)นม�ธยมศึ,กษาปี0ท�* 5 เว็ลุ่า 2 ชี�*ว็โมง/ส�ปีดาห"

หน�ว็ยการเร�ยนร �

แผนการจั�ดการเร�ยนร �เว็ลุ่า(ชี�*ว็

โมง)

หน�ว็ยท�* 1 เร2�อง การต์�ด้ต์��งโปีรแกรมั DreamweaverMX 4

DreamweaverMX 4

หน�ว็ยท�* 2 เร2�อง การใช#งานภาษาไที่ย 2

- การใช#งานภาษาไที่ย 2

หน�ว็ยท�* 3 เร2�อง การด้* Preferences 4

- การด้* Preferences 4

หน�ว็ยท�* 4 เร2�อง การสร#างต์าราง 6

- การสร#างต์าราง 6

หน�ว็ยท�* 5 เร2�อง การแที่รกข้#อควิามั 6

- การแที่รกข้#อควิามั 6

หน�ว็ยท�* 6 เร2�อง การ แที่รกร*ปีภาพ 6

- การ แที่รกร*ปีภาพ 6

หน�ว็ยท�* 7 เร2�อง การเช2�อมัโยง 6

- การเช2�อมัโยง 6

หน�ว็ยการเร�ยนร �

แผนการจั�ดการเร�ยนร �เว็ลุ่า

(ชี�*ว็โมง)

หน�ว็ยท�* 8 เร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย 6











- การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย 6

แผนการจั�ดการเร�ยนร �กลั,-มัสาระการเร�ยนร* # การงานอาช�พแลัะเที่คโนโลัย�

ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 1 เร2�อง การต์�ด้ต์��งโปีรแกรมั DreamweaverMX เวิลัาเร�ยน 4 ช��วิโมัง


แผนการเร�ยนร �ท�* 1 เร2�อง การต์�ด้ต์��งโปีรแกรมั DreamweaverMX เวิลัาเร�ยน 4 ช��วิโมัง

มาต์รฐานการเร�ยนร �มัาต์รฐาน ง 4.1 เข้#าใจ เห�นค,ณค-า แลัะใช#กระบวินการเที่คโนโลัย�

สารสนเที่ศึในการส2บค#นข้#อมั*ลั การเร�ยนร* # การส2�อสาร การแก#ปี;ญหา การที่)างานแลัะอาช�พอย-างมั�ปีระส�ที่ธ�ภาพ ปีระส�ที่ธ�ผู้ลั แลัะมั�ค,ณธรรมั

สาระส&าค�ญ

ศึ�กษาแลัะปีฏิ�บ�ต์� เก��ยวิก�บระบบการที่)า งานข้องเวิ�บเพจการออกแบบเวิ�บเพจเบ2� องต์#น ควิามัร* #เบ2� องต์#นเก��ยวิก�บโปีรแกรมัส)า เร�จร*ปี Macromedia Dreamweaver MX ก า ร ต์� ด้ ต์�� ง โ ปี ร แ ก ร มั Dreamweaver MX การต์�ด้ต์��งภาษาไที่ยในโปีรแกรมั การใช#โปีรแกรมั ส-วินปีระกอบต์-างๆข้องโปีรแกรมั แลัะการก)า หนด้ค-าพ2� นฐานต์-างๆข้องโปีรแกรมั

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. อธ�บายควิามัร* #เบ2�องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX

ได้# 2. ปีฏิ�บ�ต์�การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX

สาระการเร�ยนร �1. ควิามัร* #เบ2�องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX 2. การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX 3. การเข้#าส*-โปีรแกรมั Dreamweaver MX

ก#จักรรมการเร�ยนการสอน

1. น�กเร�ยนที่)าควิามัเข้#าใจเก��ยวิก�บควิามัร* #เบ2�องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX

http://kruwan.school.in.th/dream/ch_1_1.htm





2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX

3. น�กเร�ยนที่)าใบงานเร2�อง ควิามัร* #เบ2�องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX

4. ที่ด้สอบปีฏิ�บ�ต์�เร2�อง การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX

5. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #ส(*อแลุ่ะอ�ปีกรณ์"

1. ใบควิามัร* # เร2�อง การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX

2. ใบงาน เร2�อง การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX 3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน

การว็�ดผลุ่แลุ่ะปีระเม#นผลุ่1. วิ�ธ�การวิ�ด้แลัะปีระเมั�นผู้ลั

- ส�งเกต์การฟ;ง แลัะการต์อบค)าถามั- การที่)าใบงาน

2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX - แบบปีระเมั�นพฤต์�กรรมัการเร�ยน

3. เกณฑ์�การวิ�ด้แลัะปีระเมั�นผู้ลั - ปีระเมั�นใบงาน

การปีระเมั�นอย*-ในระด้�บ ด้� ได้#คะแนน 80% - 100%

การปีระเมั�นอย*-ในระด้�บ พอใช# ได้#คะแนน 60% - 79%

การปีระเมั�นอย*-ในระด้�บ ปีร�บปีร,ง ได้#คะแนน 0% - 59%

- ปีระเมั�นพฤต์�กรรมัการเร�ยนระด้�บ 3 หมัายถ�ง ต์��งใจเร�ยน สนใจถามัหร2อต์อบค)าถามั ที่)างาน

ด้#วิยต์นเอง ส-งงานต์ามั เวิลัาก)าหนด้









ระด้�บ 2 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง มั�ควิามัสนใจถามัหร2อต์อบค)าถามับ#าง ที่)างานด้#วิย

ต์นเอง แต์-ส-งงานช#ากวิ-าก)าหนด้เวิลัา ระด้�บ 1 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง ค�ด้ลัอกผู้ลังานผู้*#อ2�นมัา

ส-งระด้�บ 0 หมัายถ�ง ไมั-ต์��งใจเร�ยน ไมั-ส-งงาน

ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

คว็ามเห�นของผ �บร#หารo เปี3นแผู้นการสอนที่��มั�องค�ปีระกอบครบถ#วินo เปี3นแผู้นการสอนที่��แต์-ลัะองค�ปีระกอบส�มัพ�นธ�ก�นo เปี3นแผู้นการสอนที่��เน#นผู้*#เร�ยนเปี3นส)าค�ญ

o เปี3นแผู้นการสอนที่��ใช#ค,ณธรรมัน)าควิามัร* #o อ2�นๆ…………………………………………………………………

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

ลังช2�อ……………………………

………..……..

(

นายข้,น โอภาษ�)

ผู้*#อ)านวิยการโรงเร�ยนวิ�งบ-อวิ�ที่ยา

บ�นท,กผลุ่หลุ่�งการสอนผู้ลัการเร�ยนร* #

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

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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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

ข้#อเสนอแนะ / แนวิที่างแก#ไข้……………………………………………………………………….……………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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

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

ลังช2�อ

……………………………….…ผู้*#สอน

(…………….…………..

……….)

ต์)าแหน-ง คร*ผู้*#ช-วิย

ใบคว็ามร � เร(*อง โปีรแกรม DreamweaverMX

1. ใส-แผู้-น Dreamweaver CD ในได้ร�ฟ CD - Rom

2. โปีรแกรมัต์�ด้ต์��ง จะเร��มัที่)างาน อ�ต์โนมั�ต์� หากไมั-ต์�ด้ต์��ง ไปีที่�� my

computer > เลั2อก ได้ร�ฟ ที่�� CD-rom อย*- คลั�?ก>เลั2อก โฟลัเด้อร� Dreamweaver MX >ด้�บเบ��ลั คลั�?ก> ด้�บเบ��ลั คลั�?กที่��ต์�วิ Setup ค2อ Dreamweaver Mx Installer.exeโปีรแกรมัจะเร��มัต์�ด้ต์��งอ�ต์โนมั�ต์�


จะแสด้งข้#อควิามัเก��ยวิก�บ ลั�ข้ส�ที่ธ�@ อ-านให#เข้#าใจ แลั#วิเลั2อก ปี,Aมั YES

กรอก ข้#อมั*ลัผู้*#ใช# แลัะหมัายเลัข้ปีระจ)าโปีรแกรมั ที่��ได้#มัาพร#อมัก�บโปีรแกรมั

http://www.cdd.go.th/itcenter/learn/dream/setup2.html

4.เลั2อกต์)าแหน-งในด้�สก�ที่��จะต์�ด้ต์��ง

5.เลั2อกชน�ด้ข้องไฟลั�ที่��จะใช#ร-วิมัก�บ Dreamweaver แลั#วิ คลั�?ก Next

t

6. โปีรแกรมัพร#อมัที่��จะต์�ด้ต์��ง ให#เลั2อกปี,Aมั Next.

7.โปีรแกรมัก)าลั�งที่)าการต์�ด้ต์��ง

8. เมั2�อต์�ด้ต์��งเสร�จให#เลั2อกปี,Aมั Finish

ใบงานเร(*อง คว็ามร �เบ()องต์�นเก�*ยว็ก�บโปีรแกรม Dreamweaver MX

จั�ดปีระสงค"การเร�ยนร �1. ควิามัร* #เบ2�องต์#นเก��ยวิก�บโปีรแกรมั Dreamweaver MX 2. การต์�ด้ต์��งโปีรแกรมั Dreamweaver MX 3. การเข้#าส*-โปีรแกรมั Dreamweaver MX

ค&า ชี�)แจัง ให#น�ก เร�ยนต์อบค)า ถามัเร2� องการเร�ยกใช#งานโปีรแกรมั

Dreamweaver MX ต์-อไปีน��ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. บอกควิามัหมัายข้องโปีรแกรมั Dreamweaver MX

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

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

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

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

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

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

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

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

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

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

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

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

2. บอกข้��นต์อนการเข้#าส*-โปีรแกรมั Dreamweaver MX ....................................................... .......................................................................................................







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

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

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

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

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

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

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

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

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

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

แบบปีระเม#นพฤต์#กรรมการเร�ยน

ค&าชี�)แจัง ส�งเกต์พฤต์�กรรมัการเร�ยนเปี3นรายบ,คคลัแลั#วิเข้�ยนเคร2�องหมัาย ลังในช-องระด้�บค,ณภาพเกณ์ฑ์"การให�คะแนน

ระด้�บ 3 หมัายถ�ง ต์��งใจเร�ยน สนใจถามัหร2อต์อบค)าถามั ที่)างานด้#วิยต์นเอง ส-งงานต์ามั เวิลัาก)าหนด้ระด้�บ 2 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง มั�ควิามัสนใจถามัหร2อต์อบค)าถามับ#าง ที่)างานด้#วิย ต์นเอง แต์-ส-งงานช#ากวิ-าก)าหนด้เวิลัา ระด้�บ 1 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง ค�ด้ลัอกผู้ลังานผู้*#อ2�นมัาส-งระด้�บ 0 หมัายถ�ง ไมั-ต์��งใจเร�ยน ไมั-ส-งงาน

เกณ์ฑ์"การปีระเม#น น�กเร�ยนที่��ผู้-านการปีระเมั�นต์#องได้# 1 ข้��นไปี

ชี(*อ สก�ลุ่– ระด�บคะแนน สร�ปี

ผลุ่การปีระเม#นo ด้�o พอใช#o ปีร�บปีร,ง

เลุ่ขท�*

3 2 1 0 ผ�าน ไม�ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………

…….…ผู้*#ปีระเมั�น

(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5

หน�ว็ยท�* 2 เร2�อง การใช#งานภาษาไที่ย เวิลัาเร�ยน 2 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การใช#งานภาษาไที่ย เวิลัาเร�ยน 2 ช��วิโมัง




ศึ�กษาแลัะปีฏิ�บ�ต์�เก��ยวิก�บการสร#างเวิ�บเพจแต์-ลัะเวิ�บเพจหร2อเวิ�บไซต์�ใหมั- การก)าหนด้ค,ณสมับ�ต์�เบ2�องต์#นให#ก�บเวิ�บเพจ ในข้��นต์อนการปีร�บเปีลั��ยนภาษา

ผลุ่การเร�ยนร �ท�*คาดหว็�ง

1. ปีร�บเปีลั��ยนการต์��งค-าภาษาได้#

สาระการเร�ยนร �1. การสร#างเวิ�บเพจใหมั-2. การต์��งค-าปีร�บเปีลั��ยนภาษาเวิ�บเพจ

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การใช#งานภาษาไที่ย2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การใช#งานภาษาไที่ย3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การใช#งานภาษาไที่ย

2. ใบงาน เร2�อง การใช#งานภาษาไที่ย3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน



2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การใช#งานภาษาไที่ย- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน










ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

คว็ามเห�นของผ �บร#หารo เปี3นแผู้นการสอนที่��มั�องค�ปีระกอบครบถ#วินo เปี3นแผู้นการสอนที่��แต์-ลัะองค�ปีระกอบส�มัพ�นธ�ก�นo เปี3นแผู้นการสอนที่��เน#นผู้*#เร�ยนเปี3นส)าค�ญo เปี3นแผู้นการสอนที่��ใช#ค,ณธรรมัน)าควิามัร* #o อ2�นๆ…………………………………………………………………

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

ลังช2�อ……………………………

………..……..

(




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

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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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


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

ลังช2�อ

……………………………….…ผู้*#สอน

(…………….…………..

……….)


ใบคว็ามร � เร(*อง การใชี�งานภาษาไทย

อาจจะใช#ต์�วิโปีรแกรมั ที่��มัาก�บแผู้-น หร2อ ด้าวิน�โหลัด้จาก

1.ด้�บเบ��ลัคลั�?กที่��ไฟลั� setup เพ2�อที่)าการต์�ด้ต์��ง

2. โปีรแกรมัจะที่)าการต์�ด้ต์��ง อ�ต์โนมั�ต์� คลั�?ก next อย-างเด้�ยวิแลั#วิอ-านข้#อมั*ลัให#จบ ถ#าเข้#าใจก�คลั�?ก Next

3. เลั2อกโฟลั�เด้อร�ที่��ที่)าการต์�ด้ต์��ง จะระบ,อ�ต์โนมั�ต์�ไวิ#ไมั-ต์#องเปีลั��ยน คลั�?ก Next

4. โปีรแกรมัจะแสด้งข้#อมั*ลัที่��ได้#กระที่)ามัา เลั2อก Install แลั#วิโปีรแกรมัจะที่)าการต์�ด้ต์��งอ�ต์โนมั�ต์�

5. ส��นส,ด้การต์�ด้ต์��ง เลั2อก finish

ใบงานเร(*อง การใชี�งานภาษาไทย

จั�ดปีระสงค"การเร�ยนร �

1. ปีร�บเปีลั��ยนการต์��งค-าภาษาได้#

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องปีร�บเปีลั��ยนการต์��งค-าภาษาได้# ต์-อไปีน��

ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนฝึCกปีฏิ�บ�ต์�การปีร�บต์��งค-าภาษาในการใช#งาน

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

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

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

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

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

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

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

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

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

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

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

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







ชี(*อ สก�ลุ่–

ระด�บคะแนน สร�ปี3 2 1 0 ผ�าน ไม�

ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 3 เร2�อง การด้* Preferences เวิลัาเร�ยน 4 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การด้* Preferences เวิลัาเร�ยน 4 ช��วิโมัง




การด้*แลัะก)าหนด้ค-า Preferences ข้อง โปีรแกรมั Macromedia

Dreamweaver Mx เปี3นส��งที่��ส)าค�ญที่��ส,ด้ ข้องการสร#างเวิบไซต์� ด้#วิยโปีรแกรมั Preferences ข้องโปีรแกรมัก�ค2อ การก)าหนด้ค-าเบ2�องต์#นที่��งหมัด้ ข้องโปีรแกรมั ถ#าเราออกแบบเวิบโด้ยไมั-ได้# ก)าหนด้ค-า เวิบก�จะมั�ค-าผู้�ด้พลัาด้ จากควิามัเปี3นจร�ง

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. สามัารถปีร�บต์��งค-า Preferences

สาระการเร�ยนร �1. การก)าหนด้ค-าข้อง Preferences ในโปีรแกรมั Macromedia

Dreamweaver Mx

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การก)าหนด้ค-าข้อง

Preferences2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การก)าหนด้ค-าข้อง

Preferences3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การก)าหนด้ค-าข้อง Preferences

2. ใบงาน เร2�อง การก)าหนด้ค-าข้อง Preferences

3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน



2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การก)าหนด้ค-าข้อง Preferences

- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน3. เกณฑ์�การวิ�ด้แลัะปีระเมั�นผู้ลั

- ปีระเมั�นใบงาน









ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

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


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

ลังช2�อ……………………………

………..……..

(




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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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

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


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

ลังช2�อ …………………………

…….…ผู้*#สอน

(…………….…………..

……….)


ใบคว็ามร � เร(*อง การก&าหนดค�าของ Preferences

การด้*แลัะก)าหนด้ค-า Preferences ข้อง โปีรแกรมั Macromedia

Dreamweaver Mx เปี3นส��งที่��ส)าค�ญที่��ส,ด้ ข้องการสร#างเวิบไซต์� ด้#วิยด้ปีร

แกรมัน��ค-ะ เพราะ Preferences ข้องโปีรแกรมัก�ค2อ การก)าหนด้ค-าเบ2�องต์#นที่��งหมัด้ ข้องโปีรแกรมั ถ#าเราออกแบบเวิบโด้ยไมั-ได้# ก)าหนด้ค-า เวิบก�จะมั�ค-าผู้�ด้พลัาด้ เพ��ยนจากควิามัเปี3นจร�ง แลัะไมั-สามัารถแก#ไข้ได้#ในเหน#าน��นค-ะ เราต์#อง set ค-าแลั#วิก�ออกแบบใหมั-มัาด้*วิ�ธ�การก)าหนด้ค-าที่��ส)าค�ญก�นค-ะ การก&าหนด font

1. ไปีที่��เมัน* Edit >Preferences ค-ะ

2. จะได้#หน#าต์-างการก)าหนด้ค-า ด้�งร*ปี ถ#าเราได้#ลังไที่ย Addon ไปีแลั#วิ preference ข้องเราก�จะง-าย แที่บไมั-

ต์#องก)าหนด้อะไรเลัยค-ะ เพราะวิ-าโปีรแกรมัจะ defalt ให#ส-วินต์-าง ๆ ที่)างานได้#เลัย �ด้�งร*ปีค-ะ

3. ส-วินที่��ต์#องด้*อ�ก ค2อ New document เปี3นค-าที่��จะให#จ�ด้การก�บเอกสารใหมั-ที่��เราจะเปีDด้ ค-าก�จะ defalt ด้�งภาพ

เที่-าน��ก�เปี3นอ�นเสร�จพ�ธ�การก)าหนด้ Preferences ค-ะ

ใบงานเร(*อง การก&าหนดค�าของ Preferences


1. สามัารถปีร�บต์��งค-า Preferences

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องปีร�บต์��งค-า Preferences ได้# ต์-อไปีน��


ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนฝึCกปีฏิ�บ�ต์�การปีร�บต์��งค-า Preferences

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

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

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

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

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

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

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

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

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

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

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

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








ผ�าน


รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 4 เร2�อง การสร#างต์าราง เวิลัาเร�ยน 6 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การสร#างต์าราง เวิลัาเร�ยน 6 ช��วิโมัง






การสร#างต์ารางในการออกแบบเวิ�บเพจ ข้อง โปีรแกรมั Macromedia Dreamweaver Mx เปี3นส��งที่��ส)าค�ญ ข้องการออกแบบสร#างเวิบไซต์� โด้ยสามัารถการก)าหนด้ค-าเบ2�องต์#นได้#

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. อ ธ� บ า ย ข้�� น ต์ อ น ก า ร ส ร# า ง ต์ า ร า ง ไ ด้# โ ด้ ย ใ ช# โ ปี ร แ ก ร มั

Dreamweaver MX ได้# 2. สร#างแลัะแก#ไข้ต์ารางเพ2�อใช#ในการสร#างสรรค�เวิ�บเพจได้#

สาระการเร�ยนร �1. สร#างต์ารางโด้ยใช#โปีรแกรมั Dreamweaver MX ได้#2. การแก#ไข้ต์ารางในการออกแบบเวิ�บเพจ

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การสร#างต์าราง2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การสร#างต์าราง3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การสร#างต์าราง2. ใบงาน เร2�อง การสร#างต์าราง3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน







2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การสร#างต์าราง- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน











ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………


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

ลังช2�อ……………………………

………..……..

(




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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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


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

ลังช2�อ …………………………


(…………….…………..

……….)


ใบคว็ามร � เร(*อง การสร�างต์าราง

1.ให#เลั2อก Click Mouse ที่��ปี,Aมั Insert Table เลั2อก common > เลั2อกส�ญลั�กษณ2 ต์าราง ด้�งร*ปีค-ะ

2. จากน��นจะปีรากฏิหน#าจอให#ก)าหนด้ค-าข้องต์าราง

Rows ก)าหนด้จ)านวินแถวิข้องต์าราง (เซลัต์ารางต์ามัแนวินอน)

Columns

ก)าหนด้จ)านวินคอลั�มัน�ข้องต์าราง (เซลัต์ารางต์ามัแนวิต์��ง)

Widthก)าหนด้ควิามักวิ#างข้องต์าราง ต์รงน��เราสามัารถก)าหนด้ได้#เปี3น 2 แบบค2อแบบ Pixels ก�บแบบ Percent(%)


Border ก)าหนด้ค-าควิามัหนาข้องกรอบต์ารางCell Padding

ก)าหนด้ระยะห-างระหวิ-างกรอบข้องข้#อควิามัก�บต์�วิอ�กษรภายในเซลัลั�

Cell Spacing

ก)าหนด้ระยะห-างระหวิ-าง Cell ข้องต์าราง

3.คลั�?ก OK จะได้#ต์ารางต์ามัที่��ต์#องการจากการก)าหนด้ข้#างบน

ใบงานเร(*อง การสร�างต์าราง

จั�ดปีระสงค"การเร�ยนร �1. สร#างต์ารางโด้ยใช#โปีรแกรมั Dreamweaver MX ได้#2.การแก#ไข้ต์ารางในการออกแบบเวิ�บเพจ

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�อง การสร#างต์ารางได้# ต์-อไปีน��ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนอธ�บายควิามัหมัายข้องค)าศึ�พที่�ต์-างๆได้#Rows

Columns

Width

Border

Cell Padding



Cell Spacing

2. ให#น�กเร�ยนออกแบบการสร#างต์ารางในหน#าเวิ�บเพจ....................................................... .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .......................................................................................................









ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 5 เร2�อง การแที่รกข้#อควิามั เวิลัาเร�ยน 6 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การแที่รกข้#อควิามั เวิลัาเร�ยน 6 ช��วิโมัง



สาระส&าค�ญการออกแบบเวิ�บเพจ เราสามัารถพ�มัพ�ข้#อควิามัลังในหน#าเวิบได้#เลัย แลัะ

เราสามัารถแก#ไข้หร2อต์��งค-าต์-าง ๆได้#โด้ย ก)าหนด้ Properties ข้องข้#อควิามั

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. แที่รกข้#อควิามัลังในเวิ�บเพจได้#2. แก#ไข้ข้#อควิามัเพ2�อใช#ในการสร#างสรรค�เวิ�บเพจได้#

สาระการเร�ยนร �1. การออกแบบเวิ�บเพจในการแที่รกข้#อควิามัลังในเวิ�บ2. การปีร�บเปีลั��ยนแก#ไข้ข้#อควิามั เปีลั��ยนข้นาด้อ�กษร ร*ปีแบบอ�กษร แลัะ

ส�ข้องต์�วิอ�กษร

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การแที่รกข้#อควิามั2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การแที่รกข้#อควิามั3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #





ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การแที่รกข้#อควิามั2. ใบงาน เร2�อง การแที่รกข้#อควิามั 3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน



2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การแที่รกข้#อควิามั- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน













ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

คว็ามเห�นของผ �บร#หารo เปี3นแผู้นการสอนที่��มั�องค�ปีระกอบครบถ#วินo เปี3นแผู้นการสอนที่��แต์-ลัะองค�ปีระกอบส�มัพ�นธ�ก�นo เปี3นแผู้นการสอนที่��เน#นผู้*#เร�ยนเปี3นส)าค�ญo เปี3นแผู้นการสอนที่��ใช#ค,ณธรรมัน)าควิามัร* #

o อ2�นๆ…………………………………………………………………

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

ลังช2�อ……………………………

………..……..

(




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

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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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


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

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

ลังช2�อ …………………………


(…………….…………..

……….)


ใบคว็ามร � เร(*อง การแทรกข�อคว็าม

เราสามัารถพ�มัพ�ข้#อควิามัลังในหน#าเวิบได้#เลัย แลัะเราสามัารถแก#ไข้หร2อต์��งค-าต์-าง ๆได้#โด้ย ก)าหนด้ Properties ข้องข้#อควิามั ด้�งต์�วิอย-าง


ใบงานเร(*อง การแทรกข�อคว็าม



1. แที่รกข้#อควิามัลังในเวิ�บเพจได้#2. แก#ไข้ข้#อควิามัเพ2�อใช#ในการสร#างสรรค�เวิ�บเพจได้#

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องการแที่รกข้#อควิามั ต์-อไปีน��ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนฝึCกปีฏิ�บ�ต์�การปีร�บต์��งค-า การแที่รกข้#อควิามัลังในเวิ�บเพจ....................................................... .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .......................................................................................................









ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 6 เร2�อง การ แที่รกร*ปีภาพ เวิลัาเร�ยน 6 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การ แที่รกร*ปีภาพ เวิลัาเร�ยน 6 ช��วิโมัง





สาระส&าค�ญการแที่รกร*ปีภาพลังบนเวิ�บเพจ การที่)า webpage แน-นอนส��งหน��งที่��

จะข้าด้ไมั-ได้#นอกจากต์�วิหน�งส2อแลั#วิ ร*ปีภาพก�เปี3นส��งจ)าเปี3น การจะน)าไฟลั�ร*ปีภาพต์-าง ๆ เข้#ามัาใช#งานภายใน webpage

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. อธ�บายร*ปีแบบต์-างๆข้องไฟลั�ร*ปีภาพที่��เหมัาะสมัส)าหร�บเวิ�บเพจได้# 2. ปีฏิ�บ�ต์�การแที่รกร*ปีภาพลังในเวิ�บเพจได้#

สาระการเร�ยนร �การที่)า webpage แน-นอนส��งหน��งที่��จะข้าด้ไมั-ได้#นอกจากต์�วิหน�งส2อแลั#วิ ร*ปีภาพก�เปี3น

ส��งจ)าเปี3น การจะน)าไฟลั�ร*ปีภาพต์-าง ๆ เข้#ามัาใช#งานภายใน webpage เราควิรจะมั�ข้อค)าน�งถ�งอย*- 2 -3 ปีระการด้#วิยก�น ค2อ1. ปีระเภที่ข้องไฟลั�ร*ปีภาพ เราควิรจะใช#เปี3นนามัสก,ลั *.gif or *.jpg จ�งจะเหมัาะสมัก�บงานบน website

2. ข้นาด้ข้องไฟลั�ร*ปีภาพ (ไมั-ใช-ข้นาด้ข้องร*ปีภาพ) ควิรมั�การ Optimize

ก-อนการน)ามัาใช#งาน3. ควิรมั�การใช#งานร*ปีภาพเที่-าที่��จ)าเปี3น อย-าใส-ให#มัากเก�นไปี

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การ แที่รกร*ปีภาพ 2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การ แที่รกร*ปีภาพ 3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การ แที่รกร*ปีภาพ 2. ใบงาน เร2�อง การ แที่รกร*ปีภาพ 3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน

การว็�ดผลุ่แลุ่ะปีระเม#นผลุ่





1. วิ�ธ�การวิ�ด้แลัะปีระเมั�นผู้ลั - ส�งเกต์การฟ;ง แลัะการต์อบค)าถามั- การที่)าใบงาน

2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การ แที่รกร*ปีภาพ - แบบปีระเมั�นพฤต์�กรรมัการเร�ยน











ข�อเสนอแนะ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………


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

ลังช2�อ……………………………

………..……..

(




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

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

ปี;ญหา / อ,ปีสรรค

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

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


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

ลังช2�อ

……………………………….…ผู้*#สอน

(…………….…………..

……….)


ใบคว็ามร � เร(*อง การแทรก ร ปีภาพ

การที่)า webpage แน-นอนส��งหน��งที่��จะข้าด้ไมั-ได้#นอกจากต์�วิหน�งส2อแลั#วิ ร*ปีภาพก�เปี3นส��งจ)าเปี3น การจะน)าไฟลั�ร*ปีภาพต์-าง ๆ เข้#ามัาใช#งานภายใน webpage เราควิรจะมั�ข้อค)าน�งถ�งอย*- 2 -3 ปีระการด้#วิยก�น ค2อ1. ปีระเภที่ข้องไฟลั�ร*ปีภาพ เราควิรจะใช#เปี3นนามัสก,ลั *.gif or *.jpg จ�งจะเหมัาะสมัก�บงานบน website

2. ข้นาด้ข้องไฟลั�ร*ปีภาพ (ไมั-ใช-ข้นาด้ข้องร*ปีภาพ) ควิรมั�การ Optimize

ก-อนการน)ามัาใช#งาน3. ควิรมั�การใช#งานร*ปีภาพเที่-าที่��จ)าเปี3น อย-าใส-ให#มัากเก�นไปี

ว็#ธ�การใชี�งานโปีรแกรมให#เราไปีที่��หน#าต์-าง Insert หร2อ Objec(.v.4) จากน��นให#เรา Click เลั2อกไปีที่�� Image ข้อง TAB Common

เมั2�อ Click ไปีแลั#วิจะปีรากฏิหน#าต์-างใหมั-ข้��นมัาเพ2�อให#เราเลั2อกไฟลั�ร*ปีภาพที่��จะน)าเข้#ามัาใช#งานภายในเพจ


ให#เลั2อกไฟลั�ได้#ต์ามัต์#องการ เมั2�อเราเลั2อกไฟลั�ได้#แลั#วิก� Clcik ที่��ปี,Aมั OK ข้องหน#าต์-างน��นในกรณ�ที่��เลั2อกไฟลั�จากต์-าง Folder ข้อง website ที่��ที่-านที่)างานอย*- จะเก�ด้ PopUp แจ#งเต์2อนที่-านวิ-า ที่-านต์#องการ Copy ไฟลั�ร*ปีน��นเข้#ามัาเก�บไวิ#ย�งเวิ�บไซต์�ข้องที่-านหร2อไมั- ต์รงน��ให# Click ที่�� OK เพ2�อน)าไฟลั�มัาใช#ใน website

ข้องเรา

แต์-ถ#าเปี3นการเร�ยกใช#ไฟลั�ภาพใน site ข้องเรา ก�จะไมั-มั� PopUp น��เก�ด้ข้��นค-ะ

เมั2�อเรามั�ไฟลั�ร*ปีภาพเข้#ามัาใน webpage เราแลั#วิ ต์-อมัาให#เราที่)าการคลั�?กเลั2อกที่��ร*ปีภาพน��น (เมั2�อเลั2อกที่��ภาพจะมั�เส#นลั#อมักรอบปีรากฏิข้��น) เพ2�อที่)าการก)าหนด้ค-าให#แก-ร*ปีภาพน��น ด้�งน�#ให#ไปีที่��หน#าต์-าง Properties

ที่��หน#าต์-าง Properties น��เราสามัารถก)าหนด้ค-าต์-าง ๆ ได้#ด้�งน��

ช-องแรก จะเปี3นการก)าหนด้ช2�ออ#างอ�งข้องไฟลั�ร*ปีภาพ

W จะเปี3นค-าควิามักวิ#างข้องร*ปีภาพ

H จะเปี3นค-าควิามัส*งข้องร*ปีภาพ

ที่��ง W แลัะ H เราสามัารถก)าหนด้ได้# 2 ลั�กษณะค2อเปี3นเปีอร�เซ�น (%) ก�บเปี3น pixel โด้ยถ#าเราใส-เปี3นค-า ต์�วิเลัข้ลังไปีอย-างเด้�ยวิจะเปี3นการก)าหนด้แบบ Pixel แต์-ถ#าเราใส-เปี3น 30% จะเปี3นการก)าหนด้แบบ เปีอร�เซ�นต์�

scr ค2อต์)าแหน-งข้องร*ปีภาพ

link

ถ#าต์#องการที่)าภาพน��ให#มั�การเช2�อมัโยงก�บไฟลั�อ2�นหร2อเวิ�บอ2�นก�ก)าหนด้ค-าต์รงส-วินน�� (จะกลั-าวิถ�งการที่)า link ต์-อไปี)

Altค2อการก)าหนด้ Title ข้องร*ปีภาพ เมั2�อเวิลัาเอาเมัาที่�วิางเหน2อร*ปีภาพจะมั� PopUp แสด้งข้#อควิามัออกมัา

V ค2อค-าควิามัห-างระหวิ-างร*ปีภาพก�บวิ�ต์ถ,อ2�นที่างด้#านบนแลัะลั-างข้อง

Space ร*ปี

H Space

ค2อค-าควิามัห-างระหวิ-างร*ปีภาพก�บวิ�ต์ถ,อ2�นที่างด้#านข้วิาแลัะซ#ายข้องร*ปี

Border ค2อ ค-าควิามัหนาข้องกรอบร*ปีภาพที่��ต์#องการ

Aligh ค2อการก)าหนด้ต์)าแหน-งข้องร*ปีภาพ

ใบงานเร(*อง การแทรก ร ปีภาพ

จั�ดปีระสงค"การเร�ยนร �1. อธ�บายร*ปีแบบต์-างๆข้องไฟลั�ร*ปีภาพที่��เหมัาะสมัส)าหร�บเวิ�บเพจได้# 2. ปีฏิ�บ�ต์�การแที่รกร*ปีภาพลังในเวิ�บเพจได้#


ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องการแที่รกร*ปีภาพ ต์-อไปีน��ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนฝึCกปีฏิ�บ�ต์�การปีร�บต์��งค-า การแที่รกร*ปีภาพลังในเวิ�บเพจ....................................................... .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .......................................................................................................









ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 7 เร2�อง การเช2�อมัโยง เวิลัาเร�ยน 6 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การเช2�อมัโยง เวิลัาเร�ยน 6 ช��วิโมัง



สาระส&าค�ญการออกแบบเวิ�บเพจ เราสามัารถเช2�อมัโยงไปีย�งหน#าเวิบต์-างๆ หร2อไปี

ย�งส-วินที่��เราต์#องการได้#



ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. อธ�บายร*ปีแบบการเช2�อมัโยงแบบต์-างๆได้# 2. สร#างจ,ด้เช2�อมัโยงในร*ปีแบบต์-างๆได้#

สาระการเร�ยนร �

Link หร2อการเช2�อมัโยงไปีย�งส-วินต์-าง ๆ มั�วิ�ธ�การเช2�อมัโยงได้#หลัายร*ปีแบบด้#วิยก�น แต์-ที่��เรามั�กจะใช#บ-อย ๆ ก�เช-น

1. การเช2�อมัโยงภายในเวิ�บเพจเด้�ยวิก�น

2. การเช2�อมัโยงภายในเวิบไซต์�เด้�ยวิก�น

3. การเช2�อมัโยงไปีย�งเวิ�บไซต์�อ2�น

4. การเช2�อมัโยงไปีย�งอ�เมัลั�

5. การเช2�อมัโยงไฟลั�ด้าวิน�โหลัด้

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การเช2�อมัโยง2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การเช2�อมัโยง3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การเช2�อมัโยง2. ใบงาน เร2�อง การเช2�อมัโยง3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน


- ส�งเกต์การฟ;ง แลัะการต์อบค)าถามั





http://www.cdd.go.th/itcenter/learn/dream/linkload.html

http://www.cdd.go.th/itcenter/learn/dream/linkemail.html

http://www.cdd.go.th/itcenter/learn/dream/linkweb1.html

http://www.cdd.go.th/itcenter/learn/dream/linkweb.html

http://www.cdd.go.th/itcenter/learn/dream/link.html

- การที่)าใบงาน2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั

- ใบงาน เร2�อง การเช2�อมัโยง- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน










ข�อเสนอแนะ


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


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

ลังช2�อ……………………………

………..……..

(




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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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

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


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

ลังช2�อ …………………………


(…………….…………..

……….)


ใบคว็ามร � เร(*อง การเชี(*อมโยง


Link หร2อการเช2�อมัโยงไปีย�งส-วินต์-าง ๆ มั�วิ�ธ�การเช2�อมัโยงได้#หลัายร*ปีแบบด้#วิยก�นค-ะ แต์-ที่��เรามั�กจะใช#บ-อย ๆ ก�เช-น

1.

การเช2�อมัโยงภายในเวิ�บเพจเด้�ยวิก�น

2.

การเช2�อมัโยงภายในเวิบไซต์�เด้�ยวิก�น

3.

การเช2�อมัโยงไปีย�งเวิ�บไซต์�อ2�น

4.

การเช2�อมัโยงไปีย�งอ�เมัลัลั�

5.

การเช2�อมัโยงไฟลั�ด้าวิน�โหลัด้

การเชี(*อมโยงภายในเว็�บเพจัเด�ยว็ก�น

การเช2�อมัโยงไปีย�งส-วินต์-าง ๆ ในเวิ�บเพจ เด้�ยวิก�น มั� ข้� �นต์อน 2 ข้��นต์อน ค2อ การก)าหนด้เปีEาหมัาย ที่��จะให#กระโด้ด้ ไปีถ�ง แลัะการก)าหนด้จ,ด้เช2�อมัโยงไปีย�งเปีEาหมัายน��น

การก&าหนดเปี8าหมาย

1. วิางต์�วิบอกต์)าแหน-งการพ�มัพ�ต์รงที่��จะก)าหนด้เปีEาหมัาย

2.

เลั2อกค)าส��ง Insert > Name Anchor หร2อ กด้ปี,Aมั Ctrl+Alt+A หร2อในแถบ Insert เลั2อกแที่�บ common แลั#วิคลัFกที่��ปี,Aมั Name Anchor

3. ในส-วินข้อง Anchor Name ต์��งช2�อเปีEาหมัายแลั#วิเลั2อก OK

http://www.cdd.go.th/itcenter/learn/dream/linkload.html

http://www.cdd.go.th/itcenter/learn/dream/linkemail.html

http://www.cdd.go.th/itcenter/learn/dream/linkweb1.html





จะปีรากฏิเคร2�องหมัายแสด้งเปีEาหมัายที่��จ,ด้ที่��ก)าหนด้

การสร�างการเชี(*อมโยงไปีย�งเปี8าหมาย

1. เลั2อกข้#อควิามัหร2อร*ปีภาพที่��จะใช#เปี3นจ,ด้เช2�อมัโยง

2.ในส-วินข้อง Link ในพาเนลั Properties พ�มัพ�เคร2�องหมัาย #

ต์ามัด้#วิยช2�อเปีEาหมัายน��น

หร2อ

คลั�กที่�� Icon Point to File ที่��อย*-ต์�ด้ก�บกรอบ Link

ใน properties แลั#วิลัากไปีคลั�กย�งเคร2�องหมัายเปีEาหมัายในเวิบเพจน��น

ใบงานเร(*อง การเชี(*อมโยง

จั�ดปีระสงค"การเร�ยนร �1. อธ�บายร*ปีแบบการเช2�อมัโยงแบบต์-างๆได้# 2. สร#างจ,ด้เช2�อมัโยงในร*ปีแบบต์-างๆได้#

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องการเช2�อมัโยง ต์-อไปีน��ให#ถ*กต์#อง

ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนอธ�บายร*ปีแบบการเช2�อมัโยงแบบต์-างๆ


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

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

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

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

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

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

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

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

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

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

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

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

2. น�กเร�ยนฝึCกปีฏิ�บ�ต์�การสร#างจ,ด้เช2�อมัโยงในร*ปีแบบต์-างๆ



ระด้�บ 3 หมัายถ�ง ต์��งใจเร�ยน สนใจถามัหร2อต์อบค)าถามั ที่)างานด้#วิยต์นเอง ส-งงานต์ามั


เวิลัาก)าหนด้ระด้�บ 2 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง มั�ควิามัสนใจถามัหร2อต์อบค)าถามับ#าง ที่)างานด้#วิย ต์นเอง แต์-ส-งงานช#ากวิ-าก)าหนด้เวิลัา ระด้�บ 1 หมัายถ�ง ต์��งใจเร�ยนเปี3นบางคร��ง ค�ด้ลัอกผู้ลังานผู้*#อ2�นมัาส-งระด้�บ 0 หมัายถ�ง ไมั-ต์��งใจเร�ยน ไมั-ส-งงาน





ผ�าน

รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)



ช��นมั�ธยมัศึ�กษาปี�ที่�� 5หน�ว็ยท�* 8 เร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย

เวิลัาเร�ยน 6 ช��วิโมังแผนการเร�ยนร �ท�* 1 เร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย เวิลัาเร�ยน 6 ช��วิโมัง




เราสามัารถสร#างไฟลั�แฟลัช ได้#จากโปีรแกรมั Macromedia Flash

หร2อ swish ซ��งโปีรแกรมั Dreamweaver สามัารถแสด้งผู้ลัไฟลั�ที่�นที่�โด้ยไมั-ต์#องมั�โปีรแกรมั Flash ต์�ด้ต์��งอย*-ในเคร2�อง

ผลุ่การเร�ยนร �ท�*คาดหว็�ง1. แที่รกไฟลั�มั�ลัต์�มั�เด้�ยลังในเวิ�บเพจได้#



สาระการเร�ยนร �

ไฟลั�ที่��เก�ด้จากโปีรแกรมั Flash มั�อย*-ด้#วิยก�น 3 ชน�ด้ ค2อ

1. ไฟลั� Flash(.fla)

เปี3นไฟลั�หลั�กที่��ถ*กสร#างข้��นในโปีรแกรมั Flash แลัะต์#องเปีDด้ใช#หร2อแก#ไข้ด้#วิยโปีรแกรมั Flash เที่-าน��น ไมั-สามัารถเปีDด้ใน Dreamweaver ได้#

2. ไฟลั� Flash Movie(.swf)

เปี3นไฟลัแฟลัช(.fla) ที่��ถ*กบ�บอ�ด้เพ2�อน)าไปีใช#แสด้งผู้ลับนเวิ�บบราวิเซอร� ซ��งสามัารสด้*ผู้ลัใน Dreamweaver ได้# แต์-ไฟลั�น�ด้น��ไมั-สามัารถกลั�บไปีแก#ไในโปีรแกรมั flash ได้#อ�ก

3. ไฟลั� Flash Template (.swt)

เปี3นไฟลั� Flash Movie ที่��สามัารถแก#ไข้ได้# มั�กใช#เปี3นไฟลั�แมั-แบบ แต์-ไฟลั�ชน�ด้น�� ไมั-สามัารถใช#ใน

Dreamweaver ได้#

ก#จักรรมการเร�ยนการสอน1. คร*ถามัน�กเร�ยนถ�งควิามัเข้#าใจเร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย 2. คร*แลัะน�กเร�ยนร-วิมัก�นศึ�กษาใบควิามัร* #เร2�อง การ แที่รกไฟลั�

มั�ลัต์�มั�เด้�ย3. คร*ส�งเกต์การณ�ปีฏิ�บ�ต์�งานแลัะบ�นที่�กพฤต์�กรรมัการเร�ยนร* #

ส(*อแลุ่ะอ�ปีกรณ์"1. ใบควิามัร* # เร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย 2. ใบงาน เร2�อง การ แที่รกไฟลั�มั�ลัต์�มั�เด้�ย 3. แบบปีระเมั�นพฤต์�กรรมัการเร�ยน








2. เคร2�องมั2อวิ�ด้แลัะปีระเมั�นผู้ลั - ใบงาน เร2�อง การแที่รกข้#อควิามั- แบบปีระเมั�นพฤต์�กรรมัการเร�ยน










ข�อเสนอแนะ


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


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

ลังช2�อ……………………………

………..……..

(




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

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

ปี;ญหา / อ,ปีสรรค…………………………………………………………………………….………………………………………………………………………………………………………….……………………………………………………………………………………………………………………………………………………………………….

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

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


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

ลังช2�อ …………………………


(…………….…………..

……….)


ใบคว็ามร � เร(*อง การ แทรกไฟลุ่"ม�ลุ่ต์#ม�เด�ย


เมัน* แถบเคร2�องมั2อ insert เลั2อก เคร2�องมั2อ Media ด้�งภาพ

ซ��งมั� ปี,Aมัต์-าง ๆ ด้�งน��

การใส- Flash movie

เราสามัารถสร#างไฟลั�แฟลัช ได้#จากโปีรแกรมั Macromedia Flash

หร2อ swish ซ��งโปีรแกรมั Dreamweaver สามัารถแสด้งผู้ลัไฟลั�ที่�นที่�โด้ยไมั-ต์#องมั�โปีรแกรมั Flash ต์�ด้ต์��งอย*-ในเคร2�อง

ไฟลั�ที่��เก�ด้จากโปีรแกรมั Flash มั�อย*-ด้#วิยก�น 3 ชน�ด้ ค2อ

1. ไฟลั� Flash(.fla)

เปี3นไฟลั�หลั�กที่��ถ*กสร#างข้��นในโปีรแกรมั Flash แลัะต์#องเปีDด้ใช#หร2อแก#ไข้ด้#วิยโปีรแกรมั Flash เที่-าน��น ไมั-สามัารถเปีDด้ใน Dreamweaver ได้#

2. ไฟลั� Flash Movie(.swf)

เปี3นไฟลัแฟลัช(.fla) ที่��ถ*กบ�บอ�ด้เพ2�อน)าไปีใช#แสด้งผู้ลับนเวิ�บบราวิเซอร� ซ��งสามัารสด้*ผู้ลัใน Dreamweaver ได้# แต์-ไฟลั�น�ด้น��ไมั-สามัารถกลั�บไปีแก#ไในโปีรแกรมั flash ได้#อ�ก

3. ไฟลั� Flash Template (.swt)

เปี3นไฟลั� Flash Movie ที่��สามัารถแก#ไข้ได้# มั�กใช#เปี3นไฟลั�แมั-แบบ แต์-ไฟลั�ชน�ด้น�� ไมั-สามัารถใช#ใน Dreamweaver ได้#

ด้�งน��น ไฟลั�ที่��เราใช#ในการ ที่)างานร-วิมัก�บ Dreamweaver เราจ�งใช# ไฟลั�แฟลัช นามัสก,ลั .swf

ท�น�)มาด การใส� ไฟลุ่"แฟลุ่ชี

1. วิางต์�วิบอกต์)าแหน-ง การพ�มัพ�ในต์)าแหน-งที่��ต์#องการค-ะ

2. จากแถบ Insert ในแถบ Media เลั2อกปี,Aมั หร2อลัากปี,Aมัน�� ลังมัาย�งหน#าต์-าง Document หร2อ เลั2อกค)าส��ง Insert > Media > Flash3. เลั2อกไฟลั� แฟลัชที่��ต์#องการ อย-าลั2มันะคะ ต์�วิที่��ใช#ได้#ต์#องนามัสก,ลั . swf

4. ใน Properties คลั�กที่��ปี,Aมั play เพ2�อด้*การแสด้งผู้ลั

แลัะเมั2�อข้��นเวิ�บ หร2อ preview ก�จะปีรากฏิผู้ลั

ใบงานเร(*อง การ แทรกไฟลุ่"ม�ลุ่ต์#ม�เด�ย

จั�ดปีระสงค"การเร�ยนร �1. แที่รกไฟลั�มั�ลัต์�มั�เด้�ยลังในเวิ�บเพจได้#

ค&าชี�)แจัง ให#น�กเร�ยนต์อบค)าถามัเร2�องการแที่รกแที่รกไฟลั�มั�ลัต์�มั�เด้�ย ต์-อไปีน��


ช2� อ -

สก,ลั......................................................................................

...เลัข้ที่��.......................ช��น.......................

1. น�กเร�ยนบอกชน�ด้ข้องไฟลั�มั�ลัต์�มั�เด้�ย....................................................... .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .............................................................................................................................................................. .......................................................................................................

2. ฝึCกปีฏิ�บ�ต์�การแที่รกไฟลั�มั�ลัต์�มั�เด้�ยลังในเวิ�บเพจ แต์-ลัะชน�ด้









ผ�าน


รว็ม

ข�อเสนอแนะ………………………………………………………………..………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

ลังช2�อ …………………………


(…………….…………..

……….)


แผนการสอน เว็บไซต์ ม.5

Documents

Transcript of แผนการสอน เว็บไซต์ ม.5