หลักสูตรวิชาชีพระยะสั้น...

29

Upload: amanda-dominguez

Post on 04-Jan-2016

44 views

Category:

Documents


0 download

DESCRIPTION

หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design. จำนวนชั่วโมงที่เรียน 75 ชั่วโมง ทฤษฎี18ชั่วโมง ปฏิบัติ57ชั่วโมง การประเมินผลการเรียน คะแนนสอบทฤษฎี 30 % คะแนนเก็บระหว่างภาค 70% อาจารย์ผู้สอน อ.สุพรรณี ทวีเดช - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design
Page 2: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

จำ��นวนชั่��วโมงที่ �เรี ยนจำ��นวนชั่��วโมงที่ �เรี ยน 75 ชั่��วโมงทฤษฎี 18ชั่��วโมงปฏิ�บั�ติ� 57ชั่��วโมง 

ก�รีปรีะเม�นผลก�รีเรี ยนก�รีปรีะเม�นผลก�รีเรี ยน คะแนนสอบัทฤษฎี 30 %

คะแนนเก็�บัระหว�างภาค 70 % อ�จำ�รีย�ผ��สอน

อ.ส!พรรณี ทว เดชั่ E-mail : [email protected]

Page 3: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

Topic 1Topic 1

ก�รีออกแบบหน��เว�บก�รีออกแบบหน��เว�บ

Page 4: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

Topic OutlineTopic Outline

1. คว�มหม�ยและคว�มส��ค�ญของเว�บไซต์�- ส(วนปรีะกอบส��ค�ญในหน��โฮมเพจำ- ปรีะโยชั่น�ของเว�ปไซต์�

2. ก�รีว�งแผนและออกแบบเว�บไซต์�- ก�รีว�งแผนสรี��งเว�บไซด์�- ก�รีรีวบรีวมและว�เครี�ะห�โครีงสรี��งข�อม�ล- ก�รีออกแบบและสรี��งเว�บไซต์�- ลงม-อสรี��งและที่ด์สอบ (Construction and Testing )- เผยแพรี(และส(งเสรี�มให�เป.นที่ �รี��จำ�ก (Publishing and Promotion )- ด์�แลและพ�ฒน� (Maintenance and Innovation )

3. ที่ฤษฎี ของส

Page 5: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

คว�มหม�ยและคว�มส��ค�ญของเว�บไซต์�คว�มหม�ยและคว�มส��ค�ญของเว�บไซต์�โฮมเพจำ โฮมเพจำ ((Home PageHome Page))

โฮมเพจำโฮมเพจำ ค%อค&าท �ใชั่(เร ยก็หน(าแรก็ของเว�บัไซติ- ซ.�งท&าหน(าท �เหม%อนเป/นปก็หน�งส%อ โดยโฮมเพจจะเป/นเหม%อนทางเข(าของเว�บัเพจท�2งหมดในเว�บัไซติ-น�2น โดยโฮมเพจจะสร!ปเน%2อหา และเป/นเหม%อนสารบั�ญของเว�บัเพจท�2งหมดในเว�บัไซติ-น�2น

เว�บเพจำ เว�บเพจำ ((Web PageWeb Page))เว�บเพจำเว�บเพจำ ค%อ ค&าท �ใชั่(เร ยก็หน(าเอก็สารติ�างๆ ท �อย6�ในร6ปแบับัไฟล- HTML

(HyperText Markup Language ) เปร ยบัเสม%อนหน(าก็ระดาษแติ�ละหน(าท �ม เร%�องราวติ�างๆ แติ�แติก็ติ�างก็�นติรงท �ม ก็ารเชั่%�อมโยง (Link ) ซ.�งเราสามารถคล�ก็ไปท �หน(าใดของโฮมเพจก็�ได(

เว�บไซต์� เว�บไซต์� ((Web SiteWeb Site))เว�บไซต์�เว�บไซต์� ค%อ ค&าท �ใชั่(เร ยก็ก็ล!�มของเว�บัเพจ โดยใชั่(เร ยก็เว�บัท �ม ขนาดใหญ�และ

ม ก็ารจดทะเบั ยนชั่%�อเว�บัไซติ-น�2นๆไว( เชั่�น http://www.yahoo.com เป/นติ(น

Page 6: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ส(วนปรีะกอบส��ค�ญในหน��โฮมเพจำส(วนปรีะกอบส��ค�ญในหน��โฮมเพจำ• โลโก�และชั่-�อ ในที่3กๆหน�� เพ-�อที่ �ส�ม�รีถคล�กที่ �โลโก� แล�วกล�บม�ย�งหน��แรีก

ของเว�บได์�

• Search Engine ส��หรี�บเว�บไซต์�ที่ �ม จำ��นวนหน��ม�ก ๆ

• รีะบ3ชั่-�อ Title ของเว�บเพจำ ลงไปที่3กๆ หน�� ซ6�งม�นจำะชั่(วยที่��ให�ก�รีค�นห�ในภ�ยหล�งง(�ยย��งข68น

• เน-8อห�ของเว�บไซที่� ไม(ให�เย��นเย�อ และที่3กหน�� จำะต์�องม เน-8อห� ไปในแนวที่�งเด์ ยวก�น

• รี�ปภ�พที่ �ใชั่� ควรีที่��เป.นภ�พเล�กๆ เพรี�ะต์อนเป9ด์หน��เว�บจำะได์�ไม(ล(�ชั่�� ไม(ควรีใชั่�ไฟส�ภ�พขน�ด์ใหญ( หรี-อขน�ด์จำรี�ง จำะม ผลต์(อก�รีเป9ด์หน��เว�บเพจำ

• ควรีม Link Title เพ-�อให� ส�ม�รีถรี��ว(� เป.นเรี-�องเก �ยวก�บอะไรีก(อนที่ �จำะคล�ก

Page 7: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ปรีะโยชั่น�ของเว�บไซต์�ปรีะโยชั่น�ของเว�บไซต์�• เป.นก�รีเพ��มชั่(องที่�งในก�รีข�ยส�นค��และบรี�ก�รีของบรี�ษ�ที่อ กชั่(องที่�งหน6�ง

• ไม(ต์�องเส ยค(�ใชั่�จำ(�ยที่ �ส�ง ส��หรี�บก�รีที่ �จำะม เว�บไซต์�เพ-�อต์�ด์ต์(อก�บโลกภ�ยนอก

• ก�รีม หน��รี��น (Homepage) รี��นค��ของต์นเอง จำะเป.นก�รีเป9ด์ต์�วส�(ต์ล�ด์โลก

• สะด์วก รีวด์เรี�วในเรี-�องก�รีต์�ด์ต์(อ โด์ยใชั่�อ เมล�ในก�รีต์�ด์ต์(อล�กค��

• ส�ม�รีถซ-8อ-ข�ยส�นค��หรี-อบรี�ก�รี ได์�ต์ลอด์ 24 ชั่��วโมง

• ชั่(วยในเรี-�องก�รีโฆษณ�บรี�ษ�ที่ฯ หรี-อองค�กรี ให�เป.นที่ �รี��จำ�กที่�8งในปรีะเที่ศและต์(�งปรีะเที่ศ

• เป.นอ กชั่(องที่�งในก�รีส(งเสรี�มก�รีข�ยส�นค��และบรี�ก�รีต์(�ง ๆ ของบรี�ษ�ที่

Page 8: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ก�รีว�งแผนและออกแบบเว�บไซต์�1 . ก�รีว�งแผนสรี��งเว�บไซด์�

โด์ยม หล�กที่ �จำะต์�องก��หนด์ไว�ในแผนง�นด์�งน 8

1 1. รีะยะเวล�ก�รีที่��ง�น เป.นก�รีก��หนด์เวล�ที่ �จำะใชั่�ในก�รีสรี��งเว�บ อ�จำก��หนด์เป.นรี�ยว�นหรี-อรี�ยว�นหรี-อรี�ยส�ปด์�ห�ก�ได์�ข68นอย�(ก�บองค�ปรีะกอบด์��นอ-�น ๆ เชั่(น คว�มย�กง(�ย จำ��นวนผ��รี(วมง�น ปรีะส�ที่ธิ�ภ�พก�รีที่��ง�นของแต์(ละคน ฯลฯ

1 2. ที่ มง�นหรี-อผ��รี(วมง�น ปกต์�ก�รีสรี��งเว�บจำะต์�องที่��ง�นเป.นที่ ม อย(�งน�อยต์�องม 3 ฝ่A�ย ค-อ ผ��เชั่ �ยวชั่�ญด์��นภ�ษ� HTML หรี-อโปรีแกรีมสรี��งเว�บเพ�จำ ผ��เชั่ �ยวชั่�ญด์��นก�รีออกแบบและต์กแต์(งภ�พ และผ��เชั่ �ยวชั่�ญด์��นเน-8อห�หรี-อบรีรีณ�ธิ�ก�รี

1 3. งบปรีะม�ณ เป.นก�รีก��หนด์ค(�ใชั่�จำ(�ย เชั่(น ค(�จำ��ง ค(�เด์�นที่�ง ค(�อ3ปกรีณ� ฯลฯ

1.4 . อ3ปกรีณ�หรี-อเครี-�องม-อชั่(วยง�น กรีณ ที่ �สรี��งเว�บเพ�จำเองจำะม อ3ปกรีณ�ที่ �ส��ค�ญ เชั่(น เครี-�องคอมพ�วเต์อรี� เครี-�องสแกนเนอรี� กล�องด์�จำ�ต์อล และรี�ปภ�พปรีะกอบเว�บเพ�จำ เป.นต์�น

1.5 . ปBญห�และอ3ปสรีรีค ในแผนก�รีที่��ง�นควรีรีะบ3ปBญห�และอ3ปสรีรีคที่ �อ�จำเก�ด์ข68นซ6�งจำะส(งผลที่��ให�ง�นล(�ชั่��หรี-อผ�ด์ว�ต์ถ3ปรีะสงค� เชั่(น ผ��รี(วมง�นปAวยไม(ส�ม�รีถม�ที่��ง�นได์� พรี�อมที่�8งห�แนวที่�งแก�ไขปBญห�ไว�ล(วงหน��

Page 9: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ก�รีว�งแผนและออกแบบเว�บไซต์� (ต์(อ)

2 . ก�รีรีวบรีวมและว�เครี�ะห�โครีงสรี��งข�อม�ล

ก�รีรีวบรีวมและว�เครี�ะห�โครีงสรี��งข�อม�ล เป.นข�8นต์อนหน6�งที่ �ต์(อจำ�กก�รีว�งแผน ค-อ เม-�อได์�ว�งแผนง�นเสรี�จำแล�ว ก�เป.นก�รีน��แผนง�นไปปฏิ�บ�ต์� โด์ยก�รีรีวบรีวมข�อม�ลที่ �จำ��เป.นต์�องใชั่�ในก�รีสรี��งเว�บ เชั่(น เว�บไซด์�ก�รีที่(องเที่ �ยวก�ควรีจำะรีวบรีวมข�อม�ลแหล(งที่(องเที่ �ยวให�ได์�ครีบหรี-อม�กที่ �ส3ด์ ที่�8งด์��นเน-8อห� ภ�พ เส ยง และ ภ�พเคล-�อนไหว เก�บรีวบรีวมเป.นไฟล�ข�อม�ล หรี-อ ใส(แฟDมแยกเป.นหมวด์หม�( เพ-�อคว�มสะด์วกในก�รีหย�บม�ใชั่�ง�น

- ข�อม�ลข�อคว�ม (.doc, .txt )- ภ�พถ(�ย หรี-อ ภ�พว�ด์ (.gif, .jpg )- ข�อม�ลเส ยง (.mp3 )- ข�อม�ลภ�พเคล-�อนไหว (.gif ,swf)

Page 10: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ก�รีว�งแผนและออกแบบเว�บไซต์� (ต์(อ) 3. ก�รีออกแบบและสรี��งเว�บเพ�จำ

เป.นข�8นต์อนก�รีน��เอ�ข�อม�ลที่�8งหมด์ม�สรี��งเป.นเว�บไซด์�ด์�วยภ�ษ� HTML หรี-อ เครี-�องม-อก�รีสรี��งเว�บอ-�น ๆ ข�8นต์อนส��ค�ญในก�รีออกแบบและสรี��งเว�บไซด์� ค-อ

1.ก��หนด์จำ3ด์ปรีะสงค�ของเว�บไซด์� โด์ยว�งเปD�หม�ยว(�เป.นกล3(มใด์ เชั่(น เว�บไซด์�ด์��นก�รีที่(องเที่ �ยว เว�บไซด์�ข�ยส�นค�� เว�บไซด์�ข�ยหน�งส-อ ฯลฯ ซ6�งเว�บไซด์�แต์(ละปรีะเภที่จำะม กล3(มคนที่ �สนใจำอย�(กล3(มหน6�ง ผ��สรี��งเว�บไซด์�ควรีก��หนด์ลงไปให�ชั่�ด์เจำนต์�8งแต์(แรีกว(� ผ��ชั่มกล3(มเปD�หม�ยหล�กเป.นใครี จำ��นวนปรีะม�ณเที่(�ไรี

2.เล-อกเว�บเบรี�ว�เซอรี� เป.นก�รีเล-อกเว�บเบรี�ว�เซอรี�ที่ �ใชั่�แสด์งผลเว�บไซด์� จำะได์�ก��หนด์ขน�ด์กว��ง ย�ว และล�กษณะก�รีว�งองค�ปรีะกอบเว�บให�สวยง�ม แสด์งผลได์�เรี�ว

3.ว�งโครีงรี(�งของเว�บไซด์� ก��หนด์โครีงรี(�งของเว�บไว�ว(�จำะม ที่�8งหมด์ก �เว�บเพ�จำ แต์(ละเว�บเจำพม เน-8อห�อะไรีบ��ง ควรีเข ยนเป.นแผนผ�งเว�บไซด์�ออกม�บนกรีะด์�ษ

4.ออกแบบหน��ต์�ของเว�บ เป.นข�8นต์อนก�รีลงม-อสรี��งเว�บเพ�จำแต์(ละหน��ต์�มที่ �ได์�ออกแบบไว� พรี�อมก�บที่ด์สอบผ(�นเว�บเบรี�ว�เซอรี� (แบบ offline)

Page 11: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

เที่คน�คก�รีออกแบบเว�บไซต์�เที่คน�คก�รีออกแบบเว�บไซต์�ม เที่คน�คที่ �จำะต์�องพ�จำ�รีณ� 3 ปรีะก�รี ค-อ

1 . ออกแบบเว�บไซด์�ที่ �เน�นเน-8อห� เว�บไซด์�บ�ง

ปรีะเภที่จำะเน�นเน-8อห� หรี-อ ข�อคว�มเป.นหล�ก ภ�ยในเว�บไซด์�ก�จำะปรีะกอบด์�วยต์�วหน�งส-อ ม ภ�พปรีะกอบบ��งแต์(ไม(ม�ก เชั่(น ด์�กชั่�นน�รี ฯลฯ

2 . ออกแบบเว�บไซด์�ที่ �เน�นภ�พกรี�ฟ9ก เว�บไซด์�ชั่น�ด์น 8จำะใชั่�ภ�พหรี-อกรี�ฟ9กในก�รีน��เสนอเรี-�อง ม ข�อคว�มบ��งเล�กน�อย

3 . ออกแบบเว�บไซด์�ที่ �เน�นที่�8งเน-8อห�และภ�พ เว�บไซด์�ปรีะเภที่น 8จำะให�น�8�หน�กที่�8งข�อคว�มและภ�พเที่(� ๆ ก�น

Page 12: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ก�รีก��หนด์โครีงสรี��งและก�รีออกแบบก�รีก��หนด์โครีงสรี��งและก�รีออกแบบในภ�พรีวมในภ�พรีวม

ก�รีว�งโครีงสรี��งที่�8งหมด์ของเว�บไซด์�  ว(�แต์(ละหน��จำะปรีะกอบ ด์�วยเน-8อห�อะไรีบ��ง  ม ภ�พปรีะกอบ  ต์�รี�ง ฯลฯ   ต์ลอด์จำนก�รีเชั่-�อมโยงเว�บเพ�จำแต์(ละหน��เข��ด์�วยก�น

1.  ก�รีก��หนด์โครีงสรี��งเว�บไซด์�ภ�พรีวม ก�รีก��หนด์โครีงสรี��งของเว�บไซด์�เป.นก�รีออกแบบส(วนปรีะกอบ

ที่�8งหมด์ของเว�บไซด์�ที่ �ต์�องก�รีให�ผ��เข��ม�เย �ยมชั่มได์�ที่รี�บ  เชั่(น  ที่�8งเว�บไซด์�จำะม ก �หน��  แต์(ละหน��จำะม เน-8อห�อะไรี  เน-8อห�แต์(ละส(วนจำะเชั่-�อมโยงก�นอย(�งไรี  เปรี ยบเสม-อนก�รีเข ยนหน�งส-อที่ �แบ(งเน-8อห�ออกเป.นบที่ เน-8อห�แต์(ละส(วนจำะเชั่-�อมโยงก�นอย(�งไรี  เปรี ยบเสม-อนก�รีเข ยนหน�งส-อที่ �แบ(งเน-8อห�ออกเป.นบที่ย(อย ๆ แต์(ละบที่ม ห�วข�อใหญ(และห�วข�อย(อยเรี ยงล��ด์�บก�นไป

Page 13: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ต์�วอย(�งเชั่(น  ก�รีออกแบบเว�บไซด์�เก �ยวก�นส�นค��ต์กแต์(งบ��น 

เข ยนโครีงสรี��งเว�บไซด์� ด์�งน 8

โครีงสรี��งเว�บไซด์�ด์�งกล(�วอ�จำเปล �ยนแปลงไปต์�มจำ3ด์ปรีะสงค�ของเว�บไซด์�  เชั่(น  เว�บไซด์�ด์��นที่(องเที่ �ยว  สถ�นศ6กษ�  หน(วยง�นรี�ชั่ก�รี  ฯลฯ  ก�จำะม โครีงสรี��งแต์กต์(�งก�นออกไป

Page 14: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

2. ก�รีออกแบบหน��เว�บเพ�จำหล�ก (Index)

          หน(าแรก็ของเว�บัเพ�จถ%อเป/นหน(าหล�ก็ส&าหร�บัผู้6(ชั่ม เป/นหน(าติาของเว�บัไซด-  เม%�อผู้6(ชั่มเป:ดเข(ามาก็�จะพบัก็�บัหน(าน 2เป/นอ�นด�บัแรก็  โดยปก็ติ�หน(าแรก็จะม องค-ประก็อบัหล�ก็  ค%อ  โลโก็(องค-ก็รแถบัชั่%�อองค-ก็ร  ร6ปภาพ  โฆษณีา  และแถบัล�งก็-เข(าส6�เว�บัไซด-  ด�งติ�วอย�าง

Page 15: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

จาก็ติ�วอย�างได(วางเมน6ส&าหร�บัก็ารเชั่%�อมโยงเข(าส6�เว�บัเพ�จอ%�น ๆ  ไว(ด(านบัน  เพ%�อความสะดวก็และใชั่(งานง�าย ส�วนติรงก็ลางอาจใชั่(ภาพส�นค(าหร%อภาพจ!ดเด�นขององค-ก็รเพ%�อส%�อสารก็�บัผู้6(ชั่ม  และด(านล�างเป/นภาพหมวดส�นค(าติ�าง ๆ ท �ผู้6(ชั่มสามารถส�งก็-เข(าไปชั่มส�นค(าหมวดน�2น ๆ ได(ท�นท

Page 16: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

3. ก�รีออกแบบหน��โฮมเพจำ (Home.html)หน��โฮมเพจำหรี-อหน��แรีกเป.นหน��เรี��มต์�นของเว�บไซด์�  เป.นหน��ส�รีบ�ญ

ที่ �จำะบอกให�ผ��ชั่มที่รี�บว(�ในแต์(ละบที่ปรีะกอบด์�วยเรี-�องอะไรี  อย�(หน��ไหน  ก�รีจำะเข��ส�(หน��อ-�น ๆ  จำะต์�องสรี��งล�งก�หรี-อก�รีเชั่-�อมโยงเอ�ไว�  โด์ยน��หน�� Index  บ�งส(วนม�ใชั่�  หรี-ออ�จำต์�8งชั่-�อindex2.html  เป.น home.html ก�ได์�

Page 17: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

4.  ก�รีออกแบบหน��ส�นค��ใหม(  (NewProduct.html)

หน��ส�นค��ใหม(ใชั่�ส��หรี�บแสด์งรี�ยก�รีส�นค��ใหม( ๆ  หรี-อส�นค��ข�ยด์   เพ-�อให�ผ��เย �ยมชั่มสนใจำเล-อกซ-8อ  รี�ปแบบข�อห�วเว�บเพ�จำ และเมน� จำะย�งเหม-อนเด์�ม แต์(จำะเพ��มเต์�มส�นค��ใหม( ด์�งต์�วอย(�ง

Page 18: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

จำ�กหน��ส�นค��ใหม(อ�จำใชั่�ชั่-�อว(�  newproduct.html  เพ-�อให�สะด์วกในก�รีจำ��ชั่-�อ  โด์ยใชั่�ต์�นแบบจำ�กหน��โฮมเพจำ  ส��งที่ �ต์�องเต์รี ยมให�ครีบถ�วน  ค-อ 

ข�อม�ลส�นค��ใหม(ที่�8งหมด์  และภ�พปรีะกอบ โด์ยสรี��งเป.นต์�รี�งส��หรี�บส�นค��แต์(ละชั่�8นแยกก�นให�ชั่�ด์เจำน

ควรีม ก�รีจำ�ด์อ�นด์�บส�นค��ข�ยด์   หรี-อส�นค��ที่ �ล�กค��ถ�มถ6งบ(อย ๆ ม�แสด์งไว�ด์�วย  เพ-�อเป.นข�อม�ลในก�รีต์�ด์ส�นใจำซ-8อ

ส�นค��หน��ใหม(จำะต์�องม ก�รีปรี�บปรี3งอย�(เสมอที่3กครี�8งที่ �ม ส�นค��ใหม( ๆออกม�  หรี-อ ม คว�มเปล �ยนแปลงเก �ยวก�บส�นค��ที่ �ต์�องก�รีส-�อส�รีก�บผ��ชั่มเป.นปBจำจำ3บ�น

ถ��เป.นเว�บไซด์�ที่ �ไม(เก �ยวก�บก�รีข�ยส�นค��  หน��ส�นค��ใหม(อ�จำจำะเปล �ยนไปเป.นหน��ที่ �เก �ยวข�องก�บส��งใหม( ๆ เชั่(น  แหล(งที่(องเที่ �ยวใหม(  สถ�นก�รีณ�ปBจำจำ3บ�น 

ข�อม�ลใหม(  ฯลฯ

Page 19: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

5. ก�รีออกแบบหน��แคต์ต์�ล�อก (catalog.html)

หน��น 8จำะคล��ยก�บส�นค��ใหม(  แต์(จำะเป.นหน��ที่ �รีวมส�นค��ที่�8งหมด์ไว�  โด์ยแยกเป.นหมวด์หม�(อย(�งชั่�ด์เจำน  ม ที่3กกล3(มส�นค��ที่�8งส�นค��ใหม(และส�นค��ที่ �ม จำ��หน(�ยอย�(ปBจำจำ3บ�น  ด์�งต์�วอย(�ง

Page 20: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

6.  ก�รีออกแบบหน��ข�อม�ลบรี�ษ�ที่  (Profile.html)

เว�บเพ�จำหน��น 8จำะบรีรีจำ3ข�อม�ลปรีะว�ต์�ของบรี�ษ�ที่  หน(วยง�น  ต์ลอด์จำนผลง�นที่ �ผ(�นม� อ�จำใชั่�ชั่-�อ  about.html ม โครีงสรี��งด์�งต์�วอย(�ง

Page 21: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

7.  ก�รีออกแบบหน��สม�ครีสม�ชั่�ก (mumber.html)

เป.นหน��ส��หรี�บให�ผ��ชั่มสม�ครีสม�ชั่�กเว�บไซด์�  หรี-อลงที่ะเบ ยนเพ-�อรี�บส�ที่ธิ�พ�เศษ  เชั่(น  เม-�อซ-8อส�นค��จำะม ส(วนลด์ หรี-อได์�คะแนนสะสม  เป.นต์�น หน��สม�ครีสม�ชั่�กจำะไม(เหม-อนก�บหน��อ-�น ๆ  เพรี�ะต์�องออกแบบให�เป.นได์น�ม�ก  (Dynamic)  ค-อต์�องรี�บข�อม�ลจำ�กผ��ใชั่�เข��ม�ส�(ฐ�นข�อม�ล  ด์�งน�8น  ก�รีสรี��งเว�บเพ�จำหน��น 8ต์�องใชั่�แอพพล�เคชั่�นฐ�นข�อม�ล  เชั่(น  ASP , PHP   เป.นต์�น  ต์�วอย(�งก�รีออกแบบ

Page 22: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

4 . ลงม-อสรี��งและที่ด์สอบ (Construction and Testing) เป.นข�8นต์อนที่ �เว�บจำะถ�กสรี��งข68นที่ ละหน�� โด์ยอ�ศ�ยเค��โครีงและองค�

ปรีะกอบที่ �ออกแบบไว� เน-�อห�ต์(�ง ๆ จำะถ�กน��ม�ใส(และจำ�ด์รี�ปแบบ ล�งค� เม-�อลงม-อสรี��งอ�จำพบส��งออกแบบบ�งอย(�งไม(เหม�ะสม ส�ม�รีถใชั่�โปรีแกรีมต์(�ง ๆ ปรี�บแต์(งเว�บได์� เชั่(น Macromedia Dreamweaver , Microsoft Front Page และ Adobe เว�บไซต์�ที่ �สรี��งข68นม�จำะได์�รี�บก�รีที่ด์สอบก(อนออกน��เผยแพรี( เชั่(น เรี-�องของคว�มถ�กต์�องของเน-8อห� ก�รีที่��ง�นของล�งค� ต์รีวจำห�คว�มผ�ด์พล�ด์ของโปรีแกรีม เพ-�อให�ส�ม�รีถชั่มเว�บไซต์�ได์�อย(�งสมบ�รีณ�และม ปรีะส�ที่ธิ�ภ�พ

5 . เผยแพรี(และส(งเสรี�มให�เป.นที่ �รี��จำ�ก (Publishing and Promotion) เว�บไซต์�ที่ �ปรีะสบคว�มส��เรี�จำ ต์�องม เน-8อห�ที่ �ด์ ม ก�รีว�งโครีงสรี��ง

และก�รีออกแบบ ย�งต์�องได์�รี�บก�รีโฆษณ�และส(งเสรี�มให�เป.นที่ �รี��จำ�กในกล3(มเปD�หม�ย เชั่(น ก�รีจำ�ด์ง�นเป9ด์ต์�ว ก�รีลงโฆษณ�บนเว�บไซต์�อ-�น ในส��งพ�มพ� ว�ที่ย3และโที่รีที่�ศน�

6. ด์�แลและพ�ฒน� (Maintenance and Innovation)

เว�บไซต์�ที่ �ได์�รี�บก�รีเผยแพรี( ควรีด์�แลและปรี�บปรี3งเพ-�อให�ผ��ชั่มรี��ส6กวว(�ม ก�รีเปล �ยนแปลง ม คว�มใหม(ที่�นสม�ยอย�(ต์ลอด์ โด์ยต์รีวจำสอบจำ�กสถ�ต์�ของก�รีเข��ชั่มว(�ม ผ��ชั่มม�กและเป.นที่ �น�ยมของกล3(มเปD�หม�ย

ก�รีว�งแผนและออกแบบเว�บไซต์� (ต์(อ)

Page 23: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ที่ฤษฎี ของส ที่ฤษฎี ของส ส เป.นเรี-�องที่ �ม คว�มส��ค�ญม�กต์(อก�รีที่��เว�บไซต์� ก�รีเล-อกส ให�เข��ก�บ

เน-8อห� จำะที่��ให�เว�บไซต์�ม คว�มน(�สนใจำและสวยง�มซ6�งจำะที่��ให�ด์6งด์�ด์ให�คนเข��ชั่มได์�ม�กย��งข68น

โหมด์ส ค-ออะไรี?โหมด์ส ค-อ รี�ปแบบก�รีผสมส ด์�วยเที่คน�ค หรี-อว�ธิ ก�รีต์(�ง ๆ เพ-�อให�ได์�ม�

ซ6�งส ที่ �ใชั่�แสด์งออกที่�งจำอ หรี-อเครี-�องพ�มพ�G ซ6�งส�ม�รีถแบ(งได์�เป.น 3 โมเด์ลหล�ก ๆ ด์�งน 8 ค-อ

1. โมเด์ลส แบบ RGB โมเด์ลส แบบ RGB เป.นรี�ปแบบของส ที่ �เก�ด์จำ�กก�รีผสมแม(ส ที่�งแสง

ส�มส ค-อ ส แด์ง(Red) ส เข ยว(Green) และส น�8�เง�น(Blue) รี�ปแบบน 8น�ยมใชั่�ในก�รีแสด์งผลที่�งหน��จำอมอน�เต์อรี� หน��จำอโที่รีที่�ศน� หรี-ออ3ปกรีณ�ที่ �ใชั่�ก�รีก��เน�ด์ส โด์ยใชั่�แสงเป.นหล�ก

ข�อเส ยของรี�ปแบบน 8ค-อ จำ��นวนส ที่�8งหมด์ที่ �สรี��งข68นม� จำะม เพ ยงบ�งส(วนเที่(�น�8นที่ �จำะส�ม�รีถพ�มพ�ออกที่�งง�นพ�มพ�Gได์� เน-�องจำ�กส บ�งส ไม(ส�ม�รีถสรี��งข68นได์�จำรี�งด์�วยหม6กพ�มพ�ได์�

ก�รีก��หนด์ค(�ส จำะม ค(�ต์�8งแต์( 0 ค-อ ไม(ม แสงส เลย จำนถ6ง 255 ค-อ ม แสงส อย�(เต์�ม ถ��แสงที่3กส ม�ผสมก�นจำะที่��ให�เก�ด์แสงส ข�ว และในที่�งกล�บก�นถ��ไม(ม แสงส ใด์เลย จำะที่��ให�เก�ด์แสงส ด์��แด์ง (Red)เข ยว (Green)น�8�เง�น (Blue)

Page 24: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ที่ฤษฎี ของส ที่ฤษฎี ของส ((ต์(อต์(อ))

แด์ง (Red)

เข ยว (Green)

น�8�เง�น (Blue)

โมเด์ลส แบบ RGB

Page 25: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ที่ฤษฎี ของส ที่ฤษฎี ของส ((ต์(อต์(อ)) 2. โมเด์ลส แบบ CMYK

โมเด์ลส รี�ปแบบน 8เป.นก�รีผสมส โด์ยใชั่�แม(ส ซ6�งปรีะกอบด์�วย ส ฟD� (Cyan) ส บ�นเย�น (Magenta) ส เหล-อง (Yellow) และส ด์�� (Black)

แม(ส เหล(�น 8เก�ด์จำ�กหล�กก�รีด์�ด์ซ�บส ของว�ต์ถ3 แล�วปล(อยส ที่ �ไม(ส�ม�รีถด์�ด์ซ�บได์�ออกม� เชั่(นส ฟD�เก�ด์จำ�กก�รีที่ �แสงส แด์งถ�กด์�ด์ซ�บไว�โด์ยหม6กส ฟD� แล�วปล(อยแสงส น�8�เง�น และเข ยวให�สะที่�อนออกม� จำ6งผสมก�นเก�ด์เป.นส ฟD�ข68นม�

เม-�อแม(ส ที่�8งส�มถ�กน��ม�ผสมก�นอย(�งเที่(� ๆ ก�น จำ6งที่��ให�เก�ด์เป.นส ด์��จำรี�ง ๆ ได์� ที่��ให�ส ด์��เป.นส หล�ก (Key Color) ของโมเด์ลส ชั่น�ด์น 8

รี�ปแบบน 8ไม(ส�ม�รีถแสด์งส ได์�ที่3กส ต์�มธิรีรีมชั่�ต์� แต์(จำะส�ม�รีถพ�มพ�ได์�จำรี�ง ก�รีก��หนด์ค(�ส รี�ปแบบน 8จำะว�ด์เป.นเปอรี�เซ�นต์�คว�มเข�มของแต์(ละส ต์�8งแต์( 0 ถ6ง 100 เปอรี�เซ�นต์� เม-�อม ค(�น�อย ๆ ส จำะสว(�ง เม-�อม ค(�ม�ก ๆ ส จำะม คว�มเข�มหรี-อม-ด์ม�ก บ�นเย�น (Magenta ) ฟD� (Cyan ) เหล-อง (Yellow)

Page 26: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ที่ฤษฎี ของส ที่ฤษฎี ของส ((ต์(อต์(อ))

บ�นเย�น (Magenta)

ฟD� (Cyan)

เหล-อง (Yellow)

โมเด์ลส แบบ CMYK

Page 27: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ที่ฤษฎี ของส ที่ฤษฎี ของส ((ต์(อต์(อ))3. โมเด์ลส แบบ HSB

โมเดลส ร6ปแบับัน 2 เป/นก็ารสร(างส โดยจ&าลองว�ธี ก็ารมองเห�นภาพของติามน!ษย- ด�งน�2นจ.งสามารถสร(างส ท �ใก็ล(เค ยงก็�บัก็ารมองเห�นของมน!ษย-มาก็ท �ส!ด แติ�ร6ปแบับัน 2จะม ป=ญหาในติอนท �น&าไปใชั่(ในงานพ�มพ-จร�ง ๆ เน%�องจาก็ก็ารส�งเคราะห-ส ของเคร%�องพ�มพ-ไม�สามารถสร(างส บัางส ข.2นมาได(

ส ในโมเดลน 2เก็�ดจาก็ H มาจาก็ Hue S มาก็จาก็ Saturation และ B มาจาก็ Brightness

Hue ค%อ ส ท �เก็�ดจาก็ก็ารสะท(อนแสงจาก็ผู้�วของว�ติถ! ค�า Hue สามารถก็&าหนดได(จาก็ม!มท �หม!นไปในวงล(อส มาติราฐาน ม หน�วยเป/นองศา ติ�2งแติ� - 0360

องศา ติามปก็ติ�จะเร ยก็ค�า Hue น 2เป/นส ออก็มาเลย เชั่�น ส แดง ส เข ยว เป/นติ(นSaturation ค%อ ค�าความบัร�ส!ทธี�A หร%อความอ��มติ�วของเน%2อส เป/นก็ารก็&าหนด

ว�าส น� 2น ๆ จะม ส เทาปนมาก็น(อยแค�ไหน ม หน�วยว�ดเป/นอ�ติราส�วนระหว�างส จร�งก็�บัส เทา ถ(าหาก็ S เท�าก็�บั 100 เปอร-เซ�นติ- หมายถ.ง ม ส จร�งอย6�ท� 2งหมดไม�ม ส เทา แติ�หาก็ S เท�าก็�บั 0 เปอร-เซ�นติ- แสดงว�าไม�ม ส จร�งอย6�เลยนอก็จาก็ส เทา

Brightness ค%อ ค�าความสว�างของส โดยม หน�วยว�ดเป/นเปอร-เซ�นติ- ค%อถ(าหาก็ B เท�าก็�บั 0 เปอร-เซ�นติ- ส ท �ได(จะม%ดหร%อเป/นส ด&า แติ�ถ(าหาก็ม ค�างมาก็ข.2นเร%�อย ๆ จนถ.ง 100 เปอร-เซ�นติ- แสดงว�าจะสว�างข.2นเร%�อย ๆ จนเป/นส ขาว

Page 28: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

ก�รีบ��นก�รีบ��น 1. ให�แต์(ละคนค�ด์ว(�จำะที่��เว�บไซต์�เก �ยวก�บอะไรี? 2. ก��หนด์จำ3ด์ปรีะสงค�ของเว�บไซด์�  ก��หนด์กล3(มเปD�หม�ย 3. ต์�8งชั่-�อเว�บไซต์�

4. เรี��มที่��ก�รีรีวบรีวมข�อม�ลพวก ข�อคว�ม ภ�พ เส ยง ฯลฯ

Page 29: หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

จำบจำบ