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

ระดั�บชั้��น่ มั�ธยีมัศึ!กษาปี$ท�% 5รายีว็&ชีา การเขี�ยีนเว็�บไซต์� ง 30245

จ(านว็น 4 ชี�%ว็โมังส อ น ว็� นท�%...................................................................................

มาตรฐาน่การเรยน่ร��มัาต์รฐานท�% 4.1 ขี�อ 4 เขี�า ใจขี�อก(า หนดขีองคอมัพ&ว็เต์อร�และอ-ปีกรณ์�ท�%เก�%ยีว็ขี�อง

ขี�อ 5 จ�ดเก�บและบ(าร-งร�กษาสารสนเทศึให�ถู0กต์�องและเปี1นปี2จจ-บ�นอยี03เสมัอ

ผลุ่การเรยน่ร��ที่�คาดัหว�ง1. เขี�าใจคว็ามัหมัายีขีองเว็�บเพจ เว็�บไซต์�และอ-ปีกรณ์�ท�%

เก�%ยีว็ขี�องได�2. สามัารถูส�งเคราะห�โครงสร�างเว็�บไซต์� รว็มัถู!งออกแบบได�

จุ�ดัประสงค!การเรยน่ร��จุ�ดัประสงค!น่"าที่าง- บอกคว็ามัหมัายีขีองเว็�บเพจ เว็�บไซต์�และอ-ปีกรณ์�ท�%เก�%ยีว็ขี�องได�- ส�งเคราะห�โครงสร�างขีองเว็�บไซต์� และออกแบบได�จุ�ดัประสงค!ปลุ่ายที่าง- เขี�าใจคว็ามัหมัายีขีองเว็�บเพจ เว็�บไซต์�และอ-ปีกรณ์�ท�%เก�%ยีว็ขี�อง- สามัารถูส�งเคราะห�โครงสร�างเว็�บไซต์� และออกแบบได�

จ(านว็น 2 แผน 4 ชี�%ว็โมัง

หน่�วยการเรยน่ร��ที่� 2แผน่การจุ�ดัการเรยน่ร��ที่� 1

เร5%อง คว็ามัหมัายีขีองเว็�บเพจ และเว็�บไซต์�กลุ่��มสาระการเรยน่ร�� การงานอาชี�พและเทคโนโลยี�

ระดั�บชั้��น่ มั�ธยีมัศึ!กษาปี$ท�% 5รายีว็&ชีา การเขี�ยีนเว็�บไซต์� ง 30245 จ(านว็น 4 ชี�%ว็โมังส อ น ว็� นท�%...................................................................................จุ�ดัประสงค!น่"าที่าง

- บอกคว็ามัหมัายีขีองเว็�บเพจ เว็�บไซต์�และอ-ปีกรณ์�ท�%เก�%ยีว็ขี�องได�เน่$�อหาสาระ

- คว็ามัหมัายีขีองค(าว็3า เว็�บเพจ และ เว็�บไซต์�“ ” “ ”

- คว็ามัแต์กต์3างขีองค(าว็3า เว็�บเพจ และ เว็�บไซต์�“ ” “ ”

- บทบาทขีอง เว็�บไซต์�ในอด�ต์ ปี2จจ-บ�น และอนาคต์การจุ�ดักระบวน่การเรยน่ร��

ขั้��น่เตรยมหร$อขั้��น่น่"าเขั้�าส��บที่เรยน่1. คร0แจ�งจ-ดปีระสงค�การเร�ยีนร0 � และว็&ธ�การเร�ยีนร0 � แล�ว็

ทดสอบก3อนเร�ยีน

2. น�กเร�ยีนร3ว็มัแสดงคว็ามัร0 �เด&มัเพ5%อพ&จารณ์าคว็ามัหมัายีขีองค(าว็3า เว็�บเพจ และ เว็�บไซต์� และร3ว็มัก�นแสดงคว็ามัค&ด“ ” “ ”

เห�นถู!งขี�อแต์กต์3างขีองค(าว็3า เว็�บเพจ และ เว็�บไซต์�“ ” “ ”

ขั้��น่สอน่3. คร0อธ&บายีเก�%ยีว็ก�บ คว็ามัหมัายีขีองค(าว็3า เว็�บเพจ“ ”

และ เว็�บไซต์� และขี�อแต์กต์3างขีองค(า ว็3า เว็�บเพจ และ“ ” “ ” เว็�บไซต์� พร�อมัน�กเร�ยีนจดบ�นท!กบทเร�ยีน พร�อมัอธ&บายีบท“ ”

เร�ยีนในร0ปีแบบ PowerPoint

4. คร0แจกใบคว็ามัร0 �ท�% 2 เร5%อง เว็�บเพจ และเว็�บไซต์�5. น�กเร�ยีนสร-ปีคว็ามัร0 �จากการอ3านใบคว็ามัร0 �ท�% 2 แล�ว็ให�

น�กเร�ยีนเขี�ยีนลงสมั-ดบ�นท!ก 6. น�กเร�ยีนร�บใบงานท�% 2 แล�ว็ลงมั5อท(า7. คร0ต์รว็จผลการสร-ปีโดยีต์รว็จจากสมั-ดน�กเร�ยีน และใบ

งานท�% 2ขั้��น่สร�ป

8. คร0เปี6ดโอกาสให�น�กเร�ยีนซ�กถูามัขี�อสงส�ยีเก�%ยีว็ก�บเร5%องท�%ยี�งไมั3เขี�าใจ และร3ว็มัก�นสร-ปีเน57อหาบทเร�ยีน

ส$�อแลุ่ะแหลุ่�งการเรยน่ร�� (มจุ"าน่วน่เที่�าก�บจุ"าน่วน่น่�กเรยน่)

- ใบคว็ามัร0 �ท�% 2 เร5%อง เว็�บเพจ และเว็�บไซต์�- ชี&7นงานน(าเสนอบทเร�ยีน (PowerPoint)

- เว็�บไซต์�ปีระกอบการเร�ยีนร0 � - ใบงานท�% 2

กระบวน่การว�ดัแลุ่ะประเม'น่ผลุ่ (มจุ"าน่วน่เที่�าก�บจุ"าน่วน่น่�กเรยน่)

ว'ธีว�ดัผลุ่- ต์รว็จผลงานจากคว็ามัต์�7งใจขีณ์ะอยี03ภายีในส�งคมัห�องเร�ยีน- การให�คว็ามัร3ว็มัมั5อในการแสดงคว็ามัค&ดเห�น - การท(าแบบทดสอบ และการจดบ�นท!ก

เคร$�องม$อว�ดั- ใบงานท�% 2

เกณฑ์!การประเม'น่- คะแนนแบบทดสอบก3อนเร�ยีนและหล�งเร�ยีน 1-3 คะแนน กล-3มัต์(%า4-6 คะแนน กล-3มัปีานกลาง7-10 คะแนน กล-3มัส0ง

ห�ว็หน�ากล-3มัสาระการงานอาชี�พและเทคโนโลยี�..............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

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

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

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

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

ลงชี5%อ............................................( )

รองผ0�อ(านว็ยีการฝ่:ายีว็&ชีาการ.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ............................................( )

ผ0�อ(านว็ยีการโรงเร�ยีนว็�ดธรรมัจร&ยีาภ&รมัยี�.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ............................................( )

บ�น่ที่+กผลุ่หลุ่�งการสอน่1. ผลการสอน1.1ด�านคว็ามัร0 �.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.2ด� า นท�กษะ.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.3ด� า นค-ณ์ล�กษณ์ะ.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

2. ปี2ญหา / อ-ปีสรรค.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................3. ขี�อเสนอแนะ / แนว็ทางแก�ไขี.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ……………………………………..ผ0�สอน(นางสาว็อ-ไรว็รรณ์ เท�ยีนทอง)

ใบความร��ที่� 2 ความหมายขั้องเว-บเพจุ แลุ่ะเว-บไซต!อะไรค5อโฮมัเพจ อะไรค5อเว็�บเพจ หลายีคนคงค-�นเคยีก�บค(าว็3าโฮมัเพจ เว็�บเพจและเว็�บไซต์�ก�นมัาบ�างแล�ว็ แต์3คงมั�หลายีคนท�%ยี�งส�บสนว็3าอะไรค5อเว็�บเพจและอะไรค5อเว็�บไซต์� ค(า 3 ค(าน�7เหมั5อนหร5อแต์กต์3างก�นอยี3างไรโฮมเพจุ (Home Page)

โฮมัเพจ ค5อค(าท�%ใชี�เร�ยีกหน�าแรกขีองเว็�บไซต์� ซ!%งปีระกอบไปีด�ว็ยีเมัน0ต์3างๆและเร5%องราว็ต์3างๆมัากมัายีคล�ายีก�บหน�าปีกน&ต์ยีสารบ�านเรา ด�งน�7นหากเราออกแบบหน�าโฮมัเพจให�สว็ยีงามัและน3าสนใจ โอกาสท�%ผ0�ชีมัจะแว็ะเขี�ามัาเยี�%ยีมัเยี�ยีนโฮมัเพจขีองเราก�จะยี&%งมัากต์ามัไปีด�ว็ยี

เว-บเพจุ (Web Page)

เว็�บเพจ ค5อ ค(าท�%ใชี�เร�ยีกหน�าเอกสารต์3างๆ ท�%อยี03ในร0ปีแบบไฟล� HTML (Hyper Text Markup Language) เปีร�ยีบเสมั5อนหน�ากระดาษแต์3ละหน�าท�%มั�เร5%องราว็ต์3างๆมัากมัายีบรรจ-อยี03ในน&ต์รสาร แต์3แต์กต์3างก�นต์รงท�%มั�การเชี5%อมัโยีง (Link) ซ!%งเราสามัารถูคล&กไปีท�%หน�าใดขีองโฮมัเพจก�ได�เว-บไซต! (Web Site)

เว็�บไซต์� ค5อ ค(าท�%ใชี�เร�ยีกกล-3มัขีองเว็�บเพจ (ด�งน�7นภายีในเว็�บไซต์�จะปีระกอบไปีด�ว็ยีโฮมัเพจและเว็�บเพจ) โดยีเรามั�กใชี�เร�ยีกเว็�บท�%มั�ขีนาดใหญ3และมั�การจดทะเบ�ยีนชี5% อเว็�บไซต์�น�7นๆไว็�แล�ว็ (Domain

Name) เ ชี3 น http://www.geocities.com , http://www.sanook.com , http://www.yahoo.com เปี1นต์�นเราสามารถสร�างโฮมเพจุดั�วยว'ธีการอย�างไรบ�าง ในการสร�างโฮมัเพจน�7นมั�อยี03หลายีว็&ธ�ด�ว็ยีก�น โดยีแต์3ละว็&ธ�การก�มั�คว็ามัยีากง3ายีแต์กต์3างก�นไปี สามัารถูแบ3งว็&ธ�การสร�างโฮมัเพจออกเปี1น 3 ว็&ธ�ใหญ3ๆ ด�งน�71.สร�างโฮมเพจุดั�วยโปรแกรมขั้อง Web Hosting

Web Hosting ค5อเว็�บไซต์�ท�%ท(าหน�าท�%ให�บร&การจ�ดเก�บขี�อมั0ล โดยีบางเว็�บไซต์�น�7นมั�การให�บร&การสร�างโฮมัเพจส(าเร�จร0ปีให�แก3ผ0�ท�%ต์�องการสร�างโฮมัเพจแบบง3ายีๆ โดยีการคล&กเล5อกร0ปีแบบขีองโฮมัเพจจากร0ปีแบบท�%ทางเว็�บไซต์�ก(าหนดให� จากน�7นก�กรอกรายีละเอ�ยีดต์3างๆต์ามัแบบฟอร�มั เพ�ยีงเท3าน�7เราก�จะสามัารถูสร�างโฮมัเพจในร0ปีแบบง3ายีๆได�ต์ามัต์�องการ แต์3การสร�างโฮมัเพจด�ว็ยีโปีรแกรมัขีอง Web Hosting น�7 ก�มั�ขี�อเส�ยี ค5อ มั�ร0ปีแบบให�เล5อกน�อยีและไมั3สามัารถูออกแบบล�กษณ์ะขีองโฮมัเพจได�ต์ามัต์�องการ 2. ใชั้�โปรแกรมส"าหร�บสร�างเว-บไซต!

ปี2จจ-บ�นได�มั�การพ�ฒนาโปีรแกรมัท�% ใชี�ในการสร�างเว็�บไซต์�ก�นอยี3างมัากมัายี เชี3น FrontPage , GoLive และ HomeSite เปี1นต์�น แต์3โปีรแกรมัสร�างเว็�บไซต์�ท�%น&ยีมัใชี�ก�นมัากท�%ส-ด ก�คงจะหน�ไมั3พ�นโปีรแกรมั Dreamweaver Dreamweaver เปี1นโปีรแกรมัท�%ใชี�งานง3ายีและไมั3จ(าเปี1นต์�องมั�คว็ามัร0 �ในเร5%องขีองภาษา HTML ถู!งแมั�ว็&ธ�การสร�างโฮมัเพจน�7นอาจจะไมั3ง3ายีดายีเท3าการสร�างโฮมัเพจด�ว็ยีเว็�บ Hosting แต์3เราก�จะสามัารถูออกแบบคว็ามัสว็ยีงามัขีองโฮมัเจได�ต์ามัต์�องการ 3. การใชั้�ภาษา HTML แลุ่ะ JavaScript

การสร�างโฮมัเพจด�ว็ยีภาษา HTML และ JavaScript น�7นจะต์�องใชี�คว็ามัสามัารถูและคว็ามัชี(านาญในการเขี�ยีนโปีรแกรมัพอสมัคว็ร เน5%องจากการสร�างโฮมัเพจด�ว็ยีว็&ธ�น�7 จะใชี�ว็&ธ�การพ&มัพ�ขี�อคว็ามัท�%เปี1นค(าส�%งลงไปี จากน�7นโปีรแกรมัจะท(าการแปีลงขี�อมั0ลให�กลายีเปี1นภาพหร5อขี�อคว็ามัท�%ต์�องการ โดยีท�%ว็ไปีเรามั�กใชี�ภาษา HTML และ JavaScript

ในการต์กแต์3งโฮมัเพจ โดยีต์�ว็อยี3างท�%พบเห�นการใชี�ภาษา HTML และ JavaScript ได�แก3 การก(าหนดให�มั�ต์�ว็หน�งส5อว็&%ง การเปีล�%ยีนแถูบส�ขีอง Scroll Bar เปี1นต์�น

ใบงาน่ที่� 2เว-บเพจุ เว-บไซต!แลุ่ะโครงสร�างเว-บฯ

1.เ ว็� บ เ พ จค5อ....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

2. เว็�บไซต์�ค5อ......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

3. คว็ามัแต์กต์3างระหว็3างเว็�บเพจและเว็�บไซต์�................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

หน่�วยการเรยน่ร��ที่� 2แผน่การจุ�ดัการเรยน่ร��ที่� 2

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

ระดั�บชั้��น่ มั�ธยีมัศึ!กษาปี$ท�% 5รายีว็&ชีา การเขี�ยีนเว็�บไซต์� ง 30245 จ(านว็น 2 ชี�%ว็โมัง

ส อ น ว็� นท�%...................................................................................จุ�ดัประสงค!น่"าที่าง

- ส�งเคราะห�โครงสร�างขีองเว็�บไซต์� และออกแบบได�เน่$�อหาสาระ

- องค�ปีระกอบโครงสร�างเว็�บเพจ และเว็�บไซต์�- การก(าหนดร0ปีแบบขีองเว็�บไซต์�- การออกแบบโครงสร�างเว็�บ

การจุ�ดักระบวน่การเรยน่ร��ขั้��น่เตรยมหร$อขั้��น่น่"าเขั้�าส��บที่เรยน่

1. คร0แจ�งจ-ดปีระสงค�การเร�ยีนร0 � และว็&ธ�การเร�ยีนร0 � 2. น�กเร�ยีนร3ว็มัแสดงคว็ามัค&ดเห�นเก�%ยีว็ก�บโครงสร�างขีอง

เว็�บไซต์�ต์ามัท�%ต์นเองเขี�าใจแล�ว็ร3ว็มัก�นว็&เคราะห�ถู!งองค�ปีระกอบขีองโครงสร�างเว็�บขั้��น่สอน่

3. คร0อธ&บายีเก�%ยีว็ก�บ ส3ว็นปีระกอบขีองโครงสร�างในหน�าเว็�บเพจ และโครงสร�าง

เว็�บไซต์� เสนอพร�อมัก�บโปีรแกรมั PowerPoint

น�กเร�ยีนจดบ�นท!ก4. คร0แจกใบคว็ามัร0 �ท�% 3 เร5%อง โครงสร�างเว็�บ5. น�กเร�ยีนสร-ปีคว็ามัร0 �จากการอ3านใบคว็ามัร0 �ท�% 3 แล�ว็

ต์อบค(าถูามัจากใบคว็ามัร0 � 6. น�กเร�ยีนร�บใบงานท�% 3 ลงมั5อปีฏิ&บ�ต์& และปีระเมั&นผลการ

ท(างานล�กษณ์ะกล-3มัขั้��น่สร�ป

7. คร0เปี6ดโอกาสให�น�กเร�ยีนซ�กถูามัขี�อสงส�ยีเก�%ยีว็ก�บเร5%องท�%ยี�งไมั3เขี�าใจ และร3ว็มัก�นสร-ปีเน57อหาบทเร�ยีน

ส$�อแลุ่ะแหลุ่�งการเรยน่ร�� (มจุ"าน่วน่เที่�าก�บจุ"าน่วน่น่�กเรยน่)

- ใบคว็ามัร0 �ท�% 3 เร5%อง โครงสร�างเว็�บฯ- ชี&7นงานน(าเสนอบทเร�ยีน (PowerPoint)

- ใบงานท�% 3- แบบปีระเมั&นการท(างานเปี1นกล-3มั- เว็�บไซต์�ปีระกอบการเร�ยีนร0 � - ต์�ว็อยี3างเว็�บไซต์�ท�%ใชี�เร�ยีนร0 �เก�%ยีว็ก�บด�านโครงสร�างเว็�บฯ

กระบวน่การว�ดัแลุ่ะประเม'น่ผลุ่ (มจุ"าน่วน่เที่�าก�บจุ"าน่วน่น่�กเรยน่)

ว'ธีว�ดัผลุ่- ต์รว็จผลงานจากคว็ามัต์�7งใจขีณ์ะอยี03ภายีในส�งคมัห�องเร�ยีน- การให�คว็ามัร3ว็มัมั5อในการแสดงคว็ามัค&ดเห�น - การท(าใบงานท�% 3 และแบบปีระเมั&นผลการท(างานแบบกล-3มั

เคร$�องม$อว�ดั- แบบปีระเมั&นการท(างานแบบกล-3มั

เกณฑ์!การประเม'น่- คะแนนแบบทดสอบหล�งเร�ยีน คะแนนการปีระเมั&นการท(างานแบบกล-3มั 0 – 50

คะแนน ไมั3ผ3าน51 – 100 คะแนน ผ3าน

ห�ว็หน�ากล-3มัสาระการงานอาชี�พและเทคโนโลยี�.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ............................................( )

รองผ0�อ(านว็ยีการฝ่:ายีว็&ชีาการ.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ............................................( )

ผ0�อ(านว็ยีการโรงเร�ยีนว็�ดธรรมัจร&ยีาภ&รมัยี�.............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ............................................( )

บ�น่ที่+กผลุ่หลุ่�งการสอน่1. ผลการสอน1.1ด�านคว็ามัร0 �.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................1.2ด� า นท�กษะ..................................................................................................................................................................................................................................................................................................................................................................................................................................

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

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

.............................................................1.3ด� า นค-ณ์ล�กษณ์ะ.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................2. ปี2ญหา / อ-ปีสรรค.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................3. ขี�อเสนอแนะ / แนว็ทางแก�ไขี.........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

ลงชี5%อ……………………………………..ผ0�สอน(นางสาว็อ-ไรว็รรณ์ เท�ยีนทอง)

ใบงาน่ที่� 3

เร5%อง การออกแบบโครงสร�างเว็�บก ล-3 มั ท�% ............จ(า น ว็ น ส มั า ชี& ก ใ น ก ล-3 มั ...............ค น ชี�7น...................ว็�น/เด5อน/ปี$............................

1. ชี5% อ ......................................................................... เลขีท�% .......................

2. ชี5% อ ......................................................................... เลขีท�% .......................

จุ�ดัประสงค!1. เพ5% อให�ผ0� เร�ยีนเขี�าใจคว็ามัหมัายีขีองการออกแบบโครงสร�าง

เว็�บไซต์�จากจ&นต์นาการขีองต์นเอง2. เก&ดท�กษะการค&ดอยี3างมั�หล�กการ3. เก&ดท�กษะการท(างานเปี1นกล-3มั

ค"าชั้�แจุง1. แบ3งน�กเร�ยีนเปี1นกล-3มั กล-3มัละ 2 คน แล�ว็ให�แต์3ละกล-3มัท(าการ

ศึ!กษาค�นคว็�าเก�%ยีว็ก�บร0ปีแบบการออกแบบโครงสร�างเว็�บไซต์�ในอ-ดมัคต์&ขีองน�กเร�ยีน

2. ให�สมัาชี&กในกล-3มัต์กลงแบ3งงานศึ!กษาโครงสร�างขีองเว็�บไซต์�ท�%ถู0กต์�อง

3. จากน�7นชี3ว็ยีก�นน(าขี�อมั0ลท�%ค�นคว็�า น(ามัาสร-ปีโครงสร�างและร3ว็มัก�นออกแบบโครงสร�างเว็�บไซต์�ในอ-ดมัคต์&ขีองต์นเองให�ถู0กต์�องและสว็ยีงานท�%ส-ด

4. บ�นท!กขี�อมั0ลลงในส5%อบ�นท!ก

แบบประเม'น่การที่"างาน่

รายการประเม'น่ระดั�บค�ณภาพต์� อ งปีร�บปีร-ง(1 คะแนน)

พอใชี�(2 คะแนน)

ด�(3 คะแนน)

ด�มัาก(4 คะแนน)

การประเม'น่การที่"างาน่1. ท(างานส(าเร�จต์ามัเปีBาหมัายี2. ท(า งานต์ามัว็&ธ�การและขี�7นต์อน3. ก า ร อ อ ก แ บ บ ถู0 กต์�องครอบคล-มัเน57อหา5. คว็ามัสว็ยีงามัและส�ดส3ว็น4. การสร-ปีคว็ามัหมัายีการประเม'น่น่'ส�ยการที่"างาน่1. คว็ามัร�บผ&ดชีอบและเอาใจใส3

2. การท(างานร3ว็มัก�บผ0�อ5%น3. คว็ามัซ5%อส�ต์ยี�4. คว็ามัอดทน5. คว็ามัปีระหยี�ด

ผ0� ปี ร ะ เ มั& น ..............................................................................

ว็� น ท�% ............เ ด5 อ น ...................................พ.ศึ. ...............

ใบความร��ที่� 3 โครงสร�างเว-บไซต! ส�วน่ประกอบส"าค�ญ ๆ ใน่หน่�าโฮมเพจุ ในหน�าโฮมัเพจ (หน�าเเรกขีองเว็�บไซต์�) น�7นคว็รมั�ส3ว็นปีระกอบส(าค�ญ ๆ อยี3างครบถู�ว็น เพ5%อให�ผ0�ชีมัสามัารถูเขี�ามัาใชี�งานได�สะดว็ก ซ!%งหน�าโฮมัเพจส3ว็นใหญ3มั�กมั�ส3ว็นปีระกอบท�%ส(าค�ญ ด�งน�7 1.โลโก� ( Logo)

ส&%งส(าค�ญท�%จะชี3ว็ยีให�ผ0�เขี�าเว็�บจดจ(าเว็�บไซต์�ขีอฃเราได�ก�ค5อ โลโ“

ก� นอกจากน�7เเล�ว็โลโก�ยี�งชี3ว็ยีให�เว็�บไซต์�ขีอฃเราด0มั�เอกล�กษณ์�อ�กด�ว็ยี” โดยีราน&ยีมัว็างต์(าเเหน3งโลโก�ไว็�ท�%มั-มับนซ�ายีเพราะเปี1นจ-ดท�%สามัารถูส�งเกต์-ได�ง3ายี ซ!%งจากการว็&จ�ยีพบว็3าว็างต์(าเเหน3งโลโก�ท�%มั-มับนซ�ายีน�7นชี3ว็ยีให�ผ0�ชีมัสามัารถูจดจ(าเว็�บไซต์�ขีองเราได�ถู!ง 84% เลยีท�%เด�ยีว็

ค-ณ์ค3าขีองการว็างต์(าแหน3งโลโก� บนซ�ายี (Upper Left) = 84%

บนขีว็า (Upper Right) = 6%

บนกลาง (Upper Center) = 6%

ท�%อ5%น ๆ (Other Position) = 4%

จะส�งเกต์ได�ว็3าการออกแบบโลโก�ขีองเเต์3ละเว็�บไซต์�น�7จะไมั3ซ�บซ�อนมัากน�7น แต์3จะเน�นไปีในทางด�านการออกแบบให�เร�ยีบง3ายีและสามัารถูอ3านชี5%อเว็�บไซต์�ได�ชี�ดเจนมัากกว็3า เน5%อฃจากใชี�ภาพโลโก�ท�%ซ�บซ�อนอาจส3งผลให�ผ0�เขี�าชีมัไมั3สามัารถูจดจ(าชี5%อเว็�บไซต์�ขีองเราได�น�%นเอง2.เมัน0หล�ก (Link Menu)

เมัน0หล�กเปี1นจ-ดเชี5%อมัโยีงส&%งส(าค�ญ ๆ ท�%รว็บรว็มัไว็�ในร0ปีแบบขีองเมัน0ปี-:มัหร5อขี�อคว็ามั โดยีผ0�เขี�าชีมัจะสามัารถูร�บร0 �ได�ว็3าภายีในเว็�บไซต์�น�7 มั� เ ร5% อ ง ร า ว็ ท�% น3 า ส น ใ จ อ ยี3 า ง ไ ร บ� า ง เ ชี3 น News (ขี3 า ว็ ใ ห มั3 ๆ) ,Shoooing และ Link (เชี5%อมัโยีงเว็�บท�%เก�%ยีว็ขี�อง) เปี1นต์�น ร0ปีแบบขีองเมัน0หล�กท�%น&ยีมัใชี�ก�นมั�กเปี1นเมัน0แบบแนว็ต์�7งและเมัน-แบบแนว็นอนต์ามัล(าด�บ3.โฆษณ์า (Banner)

โฆษณ์าน�7นเปี1นส3ว็นท�%ส(าค�ญอ�กเชี3นเด�ยีว็ก�น เพราะเว็�บไซต์�ท�%มั�โฆษณ์าจะชี3ว็ยีส3งเสร&มัภาพล�กษณ์� คว็ามัน3าเชี5%อถู5อ และชี3ว็ยีกระต์-�นคว็ามัสนใจเพราะมั�กมั�การใชี�ภาพเคล5%อนไหว็ (Gif animation) ปีระกอบซ!%งจะท(าให�เว็�บไซต์�ขีองเราด0ต์5%นต์าต์5%นใจมัากยี&%งขี!7น จากการว็&จ�ยีพบว็3าภาพเคล5%อนไหว็ยี�งชี3ว็ยีให�เว็�บไซต์�ขีองเราด0น3าสนใจมัากยี&%งขี!7น 30% เลยีท�%เด�ยีว็ นอกจากน�7แล�ว็ยี�งสามัารถูเเสดงถู!งคว็ามัน&ยีมัขีองผ0�เขี�าชีมัได�อ�กด�ว็ยี แต์3ก�ไมั3คว็รให�มั�โฆษณ์ามัากเก&นไปีและคว็รจ�ดว็างต์(าเเหน3งให�เหมัาะสมัด�ว็ยี4.ภาพปีระกอบเเละเน57อหา (Content)

เน57 อหาสาระท�%น3าร0 �เปี1นส3ว็นส(าค�ญอยี3างยี&%งท�%จะท(าให�ผ0�เขี�าชีมัอยีากจะเขี�าเยี�%ยีมัชีมัเว็�บไซต์�ขีองเรามัากขี!7นเเละใชี�บร&การอยี3างสมั(%าเสมัอ

เราจ!งคว็รอ�พเดจเน57อหาให�ใหมั3สด มั�ร0ปีเเบบการจ�ดว็างท�%อ3านง3ายี เน57อหาไมั3ยีาว็หร5อส�7นจนเก&นไปี นอกจากน�7หากเราใชี�ภาพปีระกอบท�%สว็ยีงามัก�จะชี3ว็ยีให�เน57อหาด0ด!งด-ดใจมัากยี&%งขี!7น ซ!%งการใชี�ภาพปีระกอบท�%สว็ยีงามัและฟอนต์�ท�%อ3านง3ายีจะชี3ว็ยีให�เน57อหาขีองเราน3าสนใจเพ&%มัมัากยี&%งขี!7นถู!ง 40-45%การเเบ3งพ57นท�%การใชี�งานในหน�าโฮมัเพจ หล�งจากท�%เราได�ร0 �จ�กก�บส3ว็นปีระกอบส(าค�ญ ๆ ในหน�าโฮมัเพจเเล�ว็ ผ0�อ3านหลายีท3านจะเร&%มัส�งส�ยีว็3าในเมั5%อมั�ส3ว็นปีระกอบมัากมัายีขีนาดน�7เราคว็รจะจ�ดว็างต์(าแหน3งอยี3างไรด� ต์�ว็อยี3างขี�างล3างน�7เปี1นต์�ว็อยี3างหน!%งท�%น&ยีมัใชี�ก�นมัากในการจ�ดว็างหน�าโฮมัเพจ

เรามั�กพบเห�นการเเบ3งพ57นท�%ในร0ปีเเบบ 3 ส3ว็น และ 2 ส3ว็น การใชี�งานก�บเว็�บไซต์�ขีององกรและเว็�บไซต์�ท�%มั�ขีนาดใหญ3 เน5%องจากเปี1นร0ปีแ บ บ ท�% ใ ชี� ง า น ง3 า ยี แ ล ะ มั� ก า ร แ บ3 ง ส� ด ส3 ว็ น อ ยี3 า ง ชี� ด เ จ น เ ชี3 น www.siemens.com, www.msn.com, www.sanook.com ส(าหร�บร0ปีเเบบการเเบ3งพ57นท�% 1 ส3ว็นหร5อเเบบอ&สระน�7น เรามั�กพบเห�นก�บเว็�บไซต์�ท�%เน�นการออกแบบให�สว็ยีงานมัากกว็3าเน�นการใชี�งาน และมั�กมั�การออกแบบท�%สล�บซ�บซ�อน เชี3น www.qooclup.com, www.rustboy.com, www.hardldbelker.com ท(าอยี3างไรให�โฮมัเพจด0ด� ในคว็ามัเปี1นจร&งแล�ว็การออกเเบบเว็�บไซต์�ไมั3ได�มั�ร0ปีเเบบท�%ต์ายีต์�ว็และเเน3นนอนเเต์3ก�มั�องค�ปีระกอบหลายีอยี3างท�%จะชี3ว็ยีให�เว็�บไซต์�เราด0ด�เเละน3าใชี� ผ0�เขี�ยีนจ!งมั�ขี�อเเนะน(าและว็&ธ�การง3ายี ๆ ท�%จะชี3ว็ยีให�โฮมัเพจขีองค-ณ์ด0ด�ขี!7น1. เลุ่$อกใชั้�สให�เหมาะสม การเล5อกใชี�ส�น� 7นมั�ผลอยี3างมัากในภาพรว็มัขีองเว็�บไซต์� เน5%องจากส�เเต์3ละส�น�7นมั�ผลต์3ออารมัณ์�เเละคว็ามัร0 �ส!กก�บผ0�ท�%เขี�ามัาใชี�บร&การ ด�งน�7นเราจ!งคว็รเล5อกใชี�ส�ให�เหมัาะสมัก�บเว็�บไซต์� โดยีเเต์3ละปีระเภทขีองส�น�7นจะให�คว็ามัหมัายีและคว็ามัร0 �ส!กท�%ต์3าง ๆ ก�นน�7

สฟ้:า เปี1นส�ขีองท�องฟBาจ!งชี3ว็ยีให�เราร0 �ส!กปีลอดโปีร3งโล3งสบายี ส�ฟBาน�7นเปี1นส�ท�%ด0แล�ว็สบายีต์าและนอกจากน�7ยี�งร0 �ส!กน-3มันว็ลและส-ขีสบายีอ�กด�ว็ยี สน่"�าเง'น่ ให�คว็ามัร0 �ส!กถู!งคว็ามัจร&งจ�ง มั�%งคงและจร&งจ�ง สงบและปีลอดภ�ยี นอกจากน�7แล�ว็ยี�งให� คว็ามัร0 �ส!กหร0หรา มั�ระด�บ มั�ราคาและคว็ามัเปี1นชีายีอ�กด�ว็ยี สเขั้ยว ส�เขี�ยีว็เปี1นส�ขีองต์�นไมั�ใบหญ�าท(าให�เราร0 �ส!กสดชี5%นเยี�นสบายีเเละชีว็นให�น!กถู!งคว็ามัเปี1นธรรมัชีาต์& ส�เขี�ยีว็น�7นเปี1นส�ท�%สบายีต์ามัากท�%ส-ดส�หน!%ง สเเดัง ให�คว็ามัร0 �ส!กร�อนเเรง คว็ามัร-นแรงคว็ามัมั�พล�งและคว็ามัต์5%นเต์�นสน-กสนานนอกจากน�7เเล�ว็เปี1นส�มังคลขีองคนจ�นอ�กด�ว็ยี สเหลุ่$องแลุ่ะสส�ม ส�เหล5องน�7นให�อารมัณ์�สดใสเเละด!งด0ดสายีต์าเเต์3บางคร�7งอาจท(าให�ร0ส!กเหน5%อยี ส3ว็นส�ส�มัน�7นท(าให�คว็ามัร0 �ส!กอบอ-3นกระต์5อร5อร�นและนอกจากน�7แล�ว็ยี�งด0ท�นสมั�ยีอ�กด�ว็ยี สเที่า ให�คว็ามัร0 �ส!กส-ภาพส-ขี-มั สงบ เเละมั�%นคง และยี�งให�คว็ามัร0 �ส!กหมั3อนหมัอง และโศึกเศึร�าอ�กด�ว็ยี สขั้าว ให�คว็ามัร0 �ส!กเร�ยีบง3ายี สะอาดสะอ�าน โล3งสบายีและบร&ส-ทธ&E2.มความเป;น่เอกลุ่�กษณ! เราสามัารถูออกเเบบเว็�บไซต์�ให�มั�คว็ามัเปี1นเอกล�กษณ์�ยี3างง3ายี ๆ ด�ว็ยีการเล5อกใชี�ส�ฟอนต์�และภาพปีระกอบท�%มั�คว็ามัคล�ายีคล!งก�นท-ก ๆ หน�าขีองเว็�บไซ๖ เน5% องจากเว็�บไซต์�ท�%มั�เอกล�กษณ์�มั�กท(าให�ผ0�ใชี�

จดจ(าได�ง3ายี นอกจากน�7ยี�งมั�จ-ดสนใจอ5%น ๆ เปี1นส3ว็นปีระกอบอ�ก เชี3น โลโก� ส� เเละ คว็ามัคล�ายีคล!งก�น 3. ต�องสามารถใชั้�งาน่ไดั�อย�างเหมาะสม หากเว็�บไซต์�ขีองค-ณ์น�7นมั�การใชี�งานท�%สล�บซ�บซ�อนจนเก&นไปีอาจมั�ผลท(าให�ผ0�ท�%มัาใชี�บร&การหง-ดหง&ดร(าคาญใจได�และท(าให�ไมั3อยีากกล�บมัาใชี�บร&การท�%เว็�บไซต์�ขีองเราอ�กโดยีเฉพาะหากเว็�บไซต์�ขีองค-ณ์เปี1นเว็�บไซต์�เพ5%อการบร&การซ57อขีายีแล�ว็ล3ะก�จะยี&%งเปี1นผลเส�ยีอยี3างมัากในการส�%งซ57อส&นค�าและใชี�บร&การ 4.สามารถแสดังผลุ่ไดั�อย�างรวดัเร-ว ในการออกแบบหน�าโฮมัเพจน�7นนอกจากจะเน�นหน�าต์าท�%น3าสนใจแล�ว็ การแสดงผลท�%รว็ดเร�ว็ก�จะท(าให�เว็�บไซต์�ไมั3น3าเบ5%อ ด�งน�7นการใชี�ภาพหร5อกราฟ6กปีระกอบจ!งคว็รค(าน!งถู!งเร5%องระยีะเว็ลาในการแสดงผลเว็�บไซต์�ด�ว็ยี เน5%องจากยี&%งมั�ภาพปีระกอบมัากเว็ลาในการแสดงผลก�จะยี&%งมัากด�ว็ยีไปีด�ว็ยี นอกจากห�ว็ขี�อต์3าง ๆ ท�%กล3าว็มัาแล�ว็ล�กษณ์ะขีองต์�ว็อ�กษรท�%ใชี�ปีระกอบก�เปี1นส3ว็นส(าค�ญอ�กอยี3างหน!%งท�%จะชี3ว็ยีให�โฮมัเพจขีองเราด0ท�นสมั�ยี น3าเชี5%อถู5อหร5อสน-กสนานมัากยี&%งขี!7น เน5%องจากต์�ว็หน�งส5อแต์3ละล�กษณ์ะน�7นจะให�คว็ามัร0 �ส!กแต์กต์3างก�นไปีต์�ว็หน�งส5อแบบ Serif (มั�เชี&ง)

ให�คว็ามัร0 �ส!กขีองคว็ามัคลาสส&ค ด0เก3าแก3 และค3อนขี�างเปี1นทางการต์�ว็หน�งส5อแบบ San Serif (ไมั3มั�เชี&ง)

ให�คว็ามัร0 �ส!กเร�ยีบง3ายี มั�คว็ามัท�นสมั�ยีและนอกจากน�7แล�ว็ยี�งชี3ว็ยีให�อ3านง3ายีอ�กด�ว็ยี Script (ต์�ว็อ�กษรแบบลายีมั5อ)

ให�คว็ามัร0 �ส!กสน-กสนานเปี1นก�นเองและด0ไมั3เปี1นทางการ มั�กใชี�ก�บค(าโฆษณ์าส�7น ๆ ต์�ว็อ�กษรแบบมั�ห�ว็

มั�กใชี�ก�บบทคว็ามัยีาว็ ๆ เพราะชี3ว็ยีให�อ3านง3ายี เชี3น หน�งส5อเร�ยีน แต์3ในขีณ์ะเด�ยีว็ก�นก�ด0โบราณ์ ต์�ว็อ�กษรแบบไมั3มั�ห�ว็ ต์�ว็หน�งส5อแบบน�7ค3อนขี�างท�%จะอ3านยีาก มั�กใชี�ก�บขี�อคว็ามัส�7น ๆ แต์3ก�ให�คว็ามัร0 �ส!กท�%ท�นสมั�ยี ท�7งหมัดน�7เปี1นเพ�ยีงพ57นฐานเล�ก ๆ น�อยี ๆ ท�%จะชี3ว็ยีให�ค-ณ์สามัารถูเขี�าใจว็&ธ�การง3ายี ๆ ในการออกแบบเพ5%อท�%จะน(าไปีใชี�ก�บโฮมัเพจขีองค-ณ์ โดยีการศึ!กษาหาคว็ามัร0 �ในส&%งท�%ต์นเองสนใจเปี1นพ&เศึษ การด0ต์�ว็อยี3างโฮมัเพจอ5%น ๆ และการฝ่Hกฝ่นการใชี�คว็ามัค&ดสร�างสรรค� จากน�7นจ!งน(ามัาปีระยี-กต์�ใชี� ส&%งเหล3าน�7จะชี3ว็ยีให�ค-ณ์สามัารถูออกแบบโฮมัเพจได�อยี3างสร�างสรรค�และสว็ยีงามัมัากขี!7นน�%นเองขี�7นต์อนส(าค�ญในการสร�างโฮมัเพจ ในการสร�างโฮมัเพจน�7นมั�ขี� 7นต์อนท�%สล�บซ�บซ�อนพอสมัคว็รแต์3ก�ไมั3ยีากจนเก&นไปี ผ0�เขี�ยีนจ!งขีอเสนอแนว็ทางง3ายี ๆ ท�%จะท(าให�เราสามัารถูสร�างโฮมัเพจได�อยี3างเปี1นขี�7นต์อนและมั�คว็ามัเขี�าใจในการสร�างโฮมัเพจมัากขี!7นด�งว็&ธ�การต์3อไปีน�7 1.ขั้อพ$�น่ที่�โฮมเพจุจุาก Web Hosting

ในการขีอพ57นท�%โฮมัเพจเราจะต์�องเล5อก Web Hosting เส�ยีก3อน โดยีการเปีร�ยีบเท�ยีบขี�อด�ขี�อเส�ยีต์3าง ๆ รว็มัถู!งขีนาดขีองพ57นท�%ให�บร&การด�ว็ยี จากน�7นจ!งลงทะเบ�ยีนขีอพ57 นท�% โฮมัเพจ (ผ0�อ3านคว็รค&ดล�กษณ์ะและชี5%อโฮมัเพจท�%ต์�องการสร�างไว็�ในใจเส�ยีก3อนเพ5%อให�ล�กษณ์ะขีองโฮมัเพจและชี5%อท�%ต์� 7งส�มัพ�นธ�ก�น)

2.ก"าหน่ดัลุ่�กษณะขั้องโฮมเพจุ เมั5%อเราขีอพ57นท�%โฮมัเพจแล�ว็ ขี� 7นต์อนต์3อไปีค5อ การก(าหนดล�กษณ์ะโฮมัเพจขีองเรา โดยีในต์อนน�7เราต์�องค&ดและต์�ดส&นใจว็3าเราาจะสร�างโฮมัเพจเก�%ยีว็ก�บอะไรด� มั�ล�กษณ์ะโทนส�อะไร และใครจะเขี�ามัาเยี�%ยีมัชีมัในโฮมัเพจขีองเราบ�าง เมั5%อต์�ดส&นใจได�แล�ว็ก�จะเขี�าส03ขี� 7นต์อนต์3อไปี

3.ออกแบบหน่�าโฮมเพจุดั�วย Photoshop

ในขี�7นต์อนน�7เราจะต์�องมั�ภาพขีองหน�าโฮมัเพจลาง ๆ ไว็�ในใจแล�ว็ว็3าจะมั�ล�กษณ์ะอยี3างไร มั�ส3ว็นปีระกอบอะไรบ�าง จากน�7นเราจ!งมัาเร&%มัต์�นออกแบบและสร�างส3ว็นปีระกอบต์3าง ๆ ในหน�าโฮมัเพจ ซ!%งผ0�เขี�ยีนจะได�อธ&บายีรายีละเอ�ยีดเพ&%มัเต์&มัในต์อนต์3อไปี 4.สร�างโฮมเพจุให�สมบ�รณ!ดั�วย Dreamweaver 8

เมั5%อเราได�ออกแบบส3ว็นปีระกอบต์3าง ๆ ขีองหน�าโฮมัเพจด�ว็ยีโปีรแกรมั Photoshop เสร�จเร�ยีบร�อยีแล�ว็ ต์3อไปีเราจะเขี�าส03การสร�างโฮมัเพจด�ว็ยีโปีรแกรมั Dreamweaver 8 เพ5% อให�ได� โฮมัเพจท�%สมับ0รณ์�ซ!%งเราก�จะได�เร�ยีนร0 �ในต์อนต์3อไปีเชี3นก�น 5.อ�พโหลุ่ดัโฮมเพจุขั้+�น่อ'น่เตอร!เน่-ต เมั5% อเราสร�างโฮมัเพจเร�ยีบร�อยีแล�ว็ก�จะเขี�าส03กระบว็นการอ�พโหลดโฮมัเพจเขี�าส03 Web Hosting ท�%เราได�ขีอพ57นท�%โฮมัเพจไว็�เร�ยีบร�อยีแล�ว็ด�ว็ยีโปีรแกรมั Cute_FTP หร5อโปีรแกรมัท�%ทาง เว็�บไซต์�มั�ให�บร&การขี!7นโหลดขี�อมั0ล เพ�ยีงเท3าน�7เราก�จะสามัารถูสร�างโฮมัเพจได�อยี3างสมับ0รณ์�แบบแล�ว็

การสร�างแลุ่ะออกแบบเว-บกระบว็นการในการสร�างและออกแบบเว็�บจะมั�กระบว็นการพ57นฐานอยี03ด�ว็ยีก�น 5 ขี�7นต์อนค5อ

1. การว็างแผน (Planning) เปี1นขี�7นต์อนท�%ผ0�สร�างเว็�บจะต์�องรว็บรว็มัขี�อมั0ลท�%ต์�องการจะน(ามัาสร�างเว็�บ ก(าหนดว็�ต์ถู-ปีระสงค�และกล-3มัเปีBาหมัายี จากน�7นก(าหนดขีอบเขีต์และคว็ามัต์�องการขีองเว็�บว็3าจะต์�องมั�อะไรบ�าง เชี3น ขีนาดขีองหน�าจอภาพ บราว็เซอร�ท�%จะใชี� ฯลฯ องค�ปีระกอบและเคร5%องมั5อท�%จะต์�องใชี� ต์�องการมั�กระดานขี3าว็ ห�องสนทนา ฯลฯ รว็มัถู!งขี�7นต์อนและกระบว็นการในการบ(าร-งร�กษาอยี3างเปี1นระบบการว็างแผนเบ57องต์�นขีองการสร�างเว็�บส(าหร�บ Dreamweaver ค5อ

- ก(าหนดพ57นท�%จ�ดเก�บเว็�บในเคร5%องคอมัพ&ว็เต์อร�- ก(าหนดพ57นท�%ต์&ดต์�7งเว็�บเมั5%อสร�างเสร�จ2. การออกแบบ (Design) เปี1นขี�7นต์อนท�%น(าขี�อมั0ลและแผนท�%

ว็างไว็�ไปีปีฏิ&บ�ต์& โดยีการลงมั5อปีฏิ&บ�ต์&โดยีจ�ดพ&มัพ�เน57อหา ก(าหนดการเชี5%อมัโยีง และค-ณ์ล�กษณ์ะอ5%นท�%ต์�องใชี�ในเว็�บ การออกแบบก�จะเน�นท�%การจ�ดหน�าจอขีองเว็�บให�สอดคล�องก�นและระมั�ดระว็�งปี2ญหาต์3าง ๆ ในการออกแบบ

3. การพ�ฒนา (Development) เปี1นขี�7นต์อนท�%ต์3อเน5%องจากการออกแบบและการสร�าง โดยีเน�นไปีท�%การต์กแต์3งและเสร&มัเคร5%องมั5อต์3าง ๆ ส(าหร�บเว็�บ เชี3น การก(าหนดส� ภาพ การใชี� Flash ชี3ว็ยีให�เว็�บเร�าคว็ามัสนใจ และเพ&%มัเต์&มัเทคน&คต์3าง ๆ ขีองโปีรแกรมัสน�บสน-นการสร�างเว็�บ

4. การต์&ดต์�7ง (Publishing) เปี1นขี�7นต์อนท�%จะน(า เอาเว็�บท�% ได�สร�างขี!7นเขี�าไปีต์&ดต์�7งในเว็�บเซอร�เว็อร�เพ5%อให�แสดงผลได�ในระบบอ&นเทอร�เน�ต์ หร5อจะเร�ยีกว็3า การอ�บโหลด (Up load) ซ!%งเปี1นขี�7นต์อนท�%จะต์�องด(าเน&นการอยี03เสมัอเมั5%อสร�างเว็�บเสร�จ

5. การบ(าร-งร�กษา (Maintenance) เปี1นขี�7นต์อนปีระเมั&นผลและต์&ดต์ามัผลการต์&ดต์�7งเว็�บไซต์�ว็3ามั�ขี�อขี�ดขี�องหร5อต์�องปีร�บปีร-งเปีล�%ยีนแปีลงเว็�บเพ&%มัเต์&มัให�ท�นสมั�ยีอยี03เสมัอ อาจจะเร�ยีกได�ว็3าขี� 7นต์อนการอ�บเดท (Up date)

การก"าหน่ดัร�ปแบบเว-บไซต! (Web-site)

เว็�บไซต์� (Web-site) หมัายีถู!ง เว็�บท�%ปีระกอบด�ว็ยีเว็�บเพจหลายี ๆ เว็�บเพจมัารว็มัก�น อยี03ภายีในพ57นท�%เด�ยีว็ก�นและเชี5%อมัโยีงระหว็3างก�นภายีใต์�โดเมันเนมัเด�ยีว็ก�น โดยีมั�โฮมัเพจเปี1นหน�าแรกขีองเว็�บไซต์�ท(าหน�าท�%เชี5%อมัโยีงไปียี�งเว็�บเพจต์3าง ๆ

โฮมัเพจ (Homepage) หมัายีถู!ง เว็�บเพจท�%เปี1นหน�าแรกขีองเว็�บไซต์� ท�%เขี�าถู!งได�ท�นท�เมั5%อเขี�าส03ระบบอ&นเทอร�เน�ต์โดยีการพ&มัพ�โดเมันเนมัหร5อยี0อาร�แอลซ!%งเปี1นท�%ต์&ดต์�7งขีองเว็�บไซต์�

เว็�บเพจ (Web page) หมัายีถู!ง เอกสารท�%สร�างขี!7นโดยีในร0ปีแบบขีอง HTML หร5อโปีรแกรมัการสร�างเว็�บโดยีเฉพาะ จะแสดงผลได�เฉพาะโปีรแกรมับราว็เซอร� และต์�องต์&ดต์�7งในเว็�บเซอร�เว็อร�เพ5%อเขี�าไปีอ3านขี�อมั0ลได�โดยีผ3านระบบอ&นเทอร�เน�ต์ เว็�บเพจจะมั� 2 ล�กษณ์ะใหญ3ค5อ

- เว็�บเพจแบบหน�าเด�ยีว็ (Single page) หร5อแบบส�7น (Short

page) หมัายีถู!ง เว็�บเพจท�%แสดงผลขี�อมั0ลหร5อเน57อหาเพ�ยีงหน�าเด�ยีว็มั�ขีนาดเท3าก�บหน�าจอคอมัพ&ว็เต์อร�พอด� หร5อมั�แถูบเล5%อนลงมัาด�านล3างส�7น ๆ หร5อมั�ร0ปีแบบเปี1นกรอบพอด�หน�าจอภาพ

- เว็�บเพจแบบแถูบเล5%อน (Scroll page) หร5อแบบยีาว็ (Long

page) หมัายีถู!ง เว็�บเพจท�%แสดงผลขี�อมั0ลหร5อเน57อหาเปี1นแนว็ยีาว็จากด�านบนลงมัายี�งด�านล3างขีองหน�าจอภาพ โดยีมั�แถูบเล5%อนอยี03ด�านขี�างส(าหร�บเล5%อนหน�าจอภาพ เพ5%อด0ขี�อมั0ลท�%แสดงผลหน�าจอภาพ

การออกแบบโครงสร�างเว-บส&%งท�%ต์�องพ&จารณ์าในการสร�างเว็�บเพ5%อการศึ!กษาค5อ โครงสร�าง

หล�กขีองเว็�บ เน5%องจากการจ�ดการขี�อมั0ลเพ5%อการเร�ยีนการสอนมั�คว็ามัแต์กต์3างก�น กล-3มัผ0�เร�ยีนท�%แต์กต์3างและเน57 อหาขีองเว็�บแต์กต์3างก�น โ ค ร ง ส ร� า ง ขี อ ง เ ว็� บ ก� จ ะ มั� ผ ล ต์3 อ ก า ร เ ร�ยี น ก า ร ส อ น เ ชี3 น ก� น (McCormack and Jones, 1998)โครงสร�างขีองเว็�บโดยีพ57นฐานจะมั� 2 ล�กษณ์ะค5อ

1. โครงสร�างเว็�บแบบต์57น เปี1นโครงสร�างเว็�บในล�กษณ์ะท�%มั�การเชี5%อมัโยีงจากหน�าแรกหร5อหน�าท�%หล�กไปียี�งเน57 อหาโดยีต์รง โดยีไมั3มั�เว็�บเพจท�%เปี1นเน57อหาเชี5%อมัโยีงต์3อไปีอ�กมัากน�ก สามัารถูกล�บมัายี�งหน�าแรกหร5อหน�าหล�กขีองขีองเว็�บไซต์�ได�ในท�นท� อาจจะมั�การเชี5%อมัโยีงขีองเน57 อหาต์3อไปีอ�กบ�างแต์3ไมั3ต์3อเน5% องเปี1นล(า ด�บล!กลงไปีเหมั5อนก�บ

โครงสร�างขีองเว็�บแบบล!ก โครงสร�างล�กษณ์ะน�7จ!งเปี1นโครงสร�างท�%มั�เน57อหาแยีกเปี1นหน3ว็ยียี3อยี ๆ หร5อมั�เน57อหาเฉพาะเร5%องไมั3เก�%ยีว็ขี�องก�น ท(าให�ไมั3ต์�องเชี5%อมัโยีงเว็�บเพจต์3อไปีเร5%อยี ๆ เว็�บแบบต์57นอาจจะมั�เน57อหามัากก�ได� แต์3ไมั3เชี5%อมัโยีงล!กลงไปีอ�ก การออกแบบเว็�บเพจอาจเปี1นแบบหน�าเด�ยีว็ส�7น ๆ หร5อแบบแถูบเล5%อนยีาว็ลงไปีมัากก�ได� เน57อหาจบในหน�าน�7นและไมั3เชี5%อมัโยีงไปีอ�ก

โฮมัเพจเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

ร�ปแสดัง ลุ่�กษณะโครงสร�างเว-บแบบต$�น่1. โครงสร�างเว็�บแบบล!ก เปี1นโครงสร�างท�%มั�การเชี5%อมัโยีงต์3อเน5%องก�นไปีในเน57อหาเด�ยีว็ก�นโดยีต์ลอดหลายี ๆ เว็�บ เน5%องจากมั�เน57อหามัากและเปี1นล(าด�บต์3อเน5%อง ท(าให�โครงสร�างขีองเว็�บต์�องลงล!กไปีเร5%อยี ๆ ส(าหร�บการเล5%อนแถูบเล5%อนด�านขีว็าขีองหน�าจอไมั3ได�หมัายีคว็ามัว็3า โครงสร�างเว็�บน�7นจะเปี1นแบบล!ก เพราะการเล5% อนแถูบเล5% อนด�านขี�างขีว็าขีองจอภาพเปี1นการออกแบบหน�าจอเว็�บ ไมั3ใชี3โครงสร�างภาพ รว็มัขีองเว็�บ การเล5%อน

แถูบเล5%อนด�านขีว็าขีองหน�าจอภาพเปี1นการออกแบบเว็�บแบบแถูบเล5%อน เร�ยีกได�ว็3า การออกแบบหน�าจอภาพแบบแถูบเล5%อน เปี1นแผ3นเด�ยีว็ยีาว็จากด�านบนลงมัาด�านล3าง แต์3การออก แบบโครงสร�างเว็�บแบบล!ก

โฮมัเพจเว็�บไซต์�

ห�ว็เร5%องเว็�บไซต์�

ห�ว็เร5%องเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เน57อหาเว็�บไซ

ต์�

เปี1นการออกแบบท�%มั�เว็�บเพจหลายี ๆ เว็�บเพจต์3อเน5%องจากเปี1นจ(านว็นมัาก

องค!ประกอบที่�ควรมใน่เว-บเพจุองค!ประกอบที่��วไป1. ชี5%อขีองเว็�บเพจ (Title) 2.ปีระว็�ต์&และร0ปีภาพผ0�จ�ดท(า (Profile/Picture)

3. การเชี5%อมัโยีงภายีในและภายีนอกเว็�บ (Links) 4. ก า รแสดงท�%อยี03ขีองเว็�บ : URL

5. ว็�น/เว็ลาท�%สร�างเว็�บ (Date/Time) 6. การปีร�บปีร-งคร�7งล3าส-ด (Update)

7. ผ0�จ�ดท(าเว็�บ : (created by) 8. ก า ร ส ง ว็ นล&ขีส&ทธ&E (Copy right)

9. การต์&ดต์3อผ0�จ�ดท(าเว็�บ (contract /e-mail) 10.

สถูานท�%ต์&ดต์3อขีองเว็�บ (Address)

11. บราว็เซอร�ท�%เหมัาะสมัส(าหร�บการชีมั (Browser ) 12. ขีนาดหน�าจอท�%เหมัาะสมัในการชีมั13. ค(าถูามัท�%ถู0กถูามับ3อยี FAQ (Frequency Asked Question)

14. คว็ามัชี3ว็ยีเหล5อ (Help)

องค!ประกอบพ'เศษ1. สมั-ดเยี�%ยีมั (Guest book) 2. ฝ่ากขี�อคว็ามั (Web board)3. กระดานขี3าว็ (Bulletin Board) 4. กระท0� 5. แบบส(ารว็จ (Web poll) 6. จ(า นว็นผ0� เขี� าชีมั (Counter)

7. ห�องสนทนา (Chat Room) 8. ส ถู& ต์& ท- กปีระเภท (Web state)

9. เทคน&คพ&เศึษด�ว็ยีโปีรแกรมัสคร&ปีต์� (Java script, VBscript , cgi,asp,php)10. โปีรแกรมัพ&เศึษสน�บสน-น (Download) 11. ส ไ ล ด�สร-ปีบรรยีายี (Presentation)

องค!ประกอบเฉพาะส"าหร�บ E-learning 1. ค(าอธ&บายีรายีว็&ชีา 2. ว็� ต์ ถู- ปี ร ะ ส ง ค�รายีว็&ชีา3. ค-ณ์สมับ�ต์&ขีองกล-3มัผ0�เร�ยีน 4. ก า ร ล งทะเบ�ยีน5. ต์ารางเร�ยีน 6. ผ0�บร&หารหล�กส0ต์ร7. ก&จกรรมั 8. ขี3าว็สาร/ปีระกาศึ9. ต์ารางสอน/ต์ารางเร�ยีน 10. ปี ฏิ& ท& น ก า รศึ!กษา11. แผนภ0มั&แสดงโครงสร�างรายีว็&ชีา 12. ส า ร บ� ญเน57อหา13. เน57อหารายีละเอ�ยีด 14. แบบทดสอบก3อนเร�ยีน15. แบบฝ่Hกห�ดระหว็3างเร�ยีน 16. สร-ปีสาระส(าค�ญ17. ขี�อสอบท�ายีการเร�ยีน 18. โครงสร�างหล�กส0ต์ร19. บรรณ์าน-กรมั/รายีการอ�างอ&ง 20. เ ว็� บ ไ ซ ต์� ท�%เก�%ยีว็ขี�อง