เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น

การออกแบบและสรางเวบเพจมลตมเดยแอนนเมชน เบองตน

กระทรวงเทคโนโลยสารสนเทศและการสอสาร 2

http://www.mict4u.net

โครงการอบรมเพอการสงเสรมและพฒนาการใช ICT ณ ศนยการเรยนร ICT ชมชน

การออกแบบและสรางเวบเพจมลตมเดยแอนนเมชน เบองตน จานวนชวโมง 30 ชวโมง วตถประสงค 1. สามารถปรบแตงภาพโดยใชเครองมอตางๆ ของ Adobe Photoshop CS2 ได 2. สามารถนาเอารปภาพทปรบแตงไปใชงานกบเวบและงานตางๆ ได 3. สามารถนาผลงานทไดไปประกอบเปนเวบไซต

โดยใชโปรแกรม Macromedia Dream weaver เบองตน ได 4. สามารถใช Action Script เพอควบคมการทางานตางๆ เบองตนไดเอง

การจดเตรยมโปรแกรมกอนการอบรม 1. ระบบปฏบตการ Windows XP/2000/ME/98 2. โปรแกรม Photoshop CS2, CS3 3. โปรแกรม Adobe Dreamweaver CS3

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

จานวน 30 คนตอรน ประโยชนทไดรบ

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

คณสมบตผเขาอบรม 1. ตองเคยการออกแบบเวบไซตมากอน หวขอการอบรม

หลกสตรสาหรบผทสามารถสราง Web และ Presentation ในรปแบบของภาพเคลอนไหว (Animation) สามารถใสเสยงประกอบและสราง Effect ใหกบ Animation เชน การ Menu หรอ ทาปม ทสามารถเคลอนไหวได และมเสยงประกอบเปนการสรางงาน Animation หรอภาพเคลอนไหวดวยเทคนคตางๆ เชน การซอน Layer การทา Masking Layer หรอ การทา Twinning แตละแบบ เพอสรางใหกบภาพเคลอนไหว มการทา Interactive และ Action script เพอการทา Web ,Presentation โดยจะมการคาสง Action script ระดบเบองตน การสราง Web Interface แบบทเปนการเคลอนไหว




สารบญ

บทท หนา ตอนท 1 การสรางเวบเพจดวยภาษา HTML................................................................................................. 5 ภาษา HTML................................................................................................................................................... 5 โครงสรางภาษา HTML.................................................................................................................................... 6 การจดรปแบบเอกสาร ..................................................................................................................................... 7 การจดรปแบบตวอกษร และการใชส .............................................................................................................. 11 การกาหนดเครองหมายหวขอและเลขลาดบ ................................................................................................... 16 การสรางตาราง ............................................................................................................................................. 18 การนารปภาพมาใชกบเวบเพจ ...................................................................................................................... 21 การเชอมโยงเวบเพจ (Link) ........................................................................................................................... 23 ตอนท 2 เทคนคการสราง และตกแตงภาพ ดวย Adobe Photoshop CS3............................................... 26 พนทการทางาน (Work Area)........................................................................................................................ 26 เครองมอตางๆ (Toolbox).............................................................................................................................. 27 การเปดไฟลภาพ (Open) .............................................................................................................................. 30 การสรางไฟลใหม (New) ............................................................................................................................... 31 การบนทกขอมลลงบนไฟล (Save) ................................................................................................................ 32 การใชงาน Palettes....................................................................................................................................... 33 การกาหนดพนท เพอแกไขและตกแตงภาพ (Selection)................................................................................. 37 วธการใชงาน Marquee Tool ......................................................................................................................... 37 การสราง Fixed Size Selection..................................................................................................................... 39 Lasso Tool................................................................................................................................................... 39 Magic Wand Tool ........................................................................................................................................ 40 Crop Tool..................................................................................................................................................... 40 คาสงพนฐานของ Selection........................................................................................................................... 41 การใช Transform เพอปรบเปลยนพนท Selection ........................................................................................ 41 การใชงาน Foreground และ Background Color ........................................................................................... 41 การใชงาน Type Tool ................................................................................................................................... 42 การใชงาน Layer........................................................................................................................................... 45 การทาภาพโดยใช Filter ................................................................................................................................ 47 การใชงาน Layer Style ................................................................................................................................. 50 การเปลยนรปรางของรป (Transform)............................................................................................................ 51 การปรบคาความสวาง/ความคมชด (Brightness/Contrast)............................................................................. 51 การปรบขนาดของชนงาน .............................................................................................................................. 52 การตดกรอบของรป (Crop) ........................................................................................................................... 53




ตอนท 3 เทคนคการสราง และออกแบบ Website ดวย Adobe Dreamweaver CS3................................ 55 การใชงานพนฐาน ......................................................................................................................................... 55 การเรมตนใชงาน Dreamweaver................................................................................................................... 56 สวนประกอบของ Dreamweaver................................................................................................................... 57 การเรมกาหนดโครงรางของเวบ ..................................................................................................................... 58 เรมตนสรางเวบไซต....................................................................................................................................... 59 การตงคาเพอใหอานภาษาไทยได .................................................................................................................. 59 การเพม Font เพอใชงาน............................................................................................................................... 60 การกาหนดรายละเอยดของหนาเวบเพจ ........................................................................................................ 61 การสราง Table............................................................................................................................................. 61 การพมพขอความและการกาหนดตวอกษร..................................................................................................... 66 การเชอมโยง (Link)....................................................................................................................................... 66 การสรางเทมเพลตจากหนาเวบทออกแบบไวแลว ........................................................................................... 67 การกาหนดพนททเปลยนแปลงไดในเทมเพลต ............................................................................................... 68 การนาเทมเพลตมาใชงาน.............................................................................................................................. 70 การปรบปรงแกไขเทมเพลต........................................................................................................................... 71




ตอนท 1 การสรางเวบเพจดวยภาษา HTML 0

ภาษา HTML

Client Server

W W W

- HTML- Style Sheet- JavaScript- VB Script- Java Applet

- PHP- ASP- JSP- PERL- CGI

รปท 1 การตดตอสอสารผาน เวลดไวดเวบ

ภาษา HTML (HyperText Markup Language) เปนภาษาหลกทใชในการสรางเวบเพจ (Web Page)

เปนภาษาประเภท Markup Language เกดขนจากการพฒนาระบบ World Wide Web ในเดอนมนาคม 1989 โดยนกวจยจากสถาบน CERN (Conseil European Pour La Recherche Nucleaire) ซงเปนหองทดลองในเมองเจนวา ประเทศสวสเซอรแลนด ชอ ทม เบอรเนอร - ล (Tim Berners - Lee) ซง ทม เบอรเนอร - ล ไดนาแนวความคดในเรอง Hypertext ของ Vannevar Bush และ Ted Nelson มาใชเพอกระจายขอมลในองค ตอมามการพฒนาและกาหนดมาตรฐานโดยองคกรทชอวา W3C (World Wide Web Consortium)

ภาษา HTML เปนภาษาทมลกษณะของขอมลทเปนตวอกษรในมาตรฐานของรหสแอสก (ASCII Code) โดยเขยนอยในรปของเอกสารขอความ (Text Document) จงกาหนดรปแบบและโครงสรางไดงาย ภาษา HTML ไดถกพฒนาขนอยางตอเนองตงแต HTML Level 1 (รนดงเดม), HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0 ซงเปนรนทนยมเขยนกนในปจจบน (ขณะน W3C ไดพฒนา HTML 4.01 ออกมาแลว เพอลองรบมาตรฐานภาษา XML) จงทาใหภาษา HTML ในปจจบนสาม ารถแสดงภาพทางกราฟฟกและระบบเสยงได เพอตอบสนองในการทางานในปจจบน

ภาษา HTML สามารถสรางขนไดจากโปรแกรมสรางไฟลขอความ (Text Editor) ทว ๆ ไป เชน Notepad หรอ Word Processing ได อกทงงายตอการเรยนรเพราะภาษา HTML ไมมโครงสรางความเปน Programming เลยแมแตนอย และไฟลทไดจากการสรางเอกสาร HTML ยงมขนาดเลกอกดวย

นามสกลของไฟล HTML จะเปนไฟลนามสกล .htm หรอ .html ซงใชในทงระบบปฏบตการยนกซ (UNIX) และระบบปฏบตการ Windows และเรยกใชงานไดจากเวบบราวเซอร (Web Browser)




รปท 2 ตวอยางการเขยนภาษา HTML ดวยโปรแกรม Notepad

รปท 3 ตวอยางการเปดดเอกสาร HTML ดวยโปรแกรม Internet Explorer

โครงสรางภาษา HTML

คาสงในภาษา HTML เรยกวา แทก (Tag) จะเขยนอยในเครองหมาย < และ > แทกจะแบงไดเปนสองกลม คอ แทกแบบเปด และแทกแบบปด โดยปกตแลวแทกของภาษา HTML จะเปดและปด โดยมรปแบบดงน

รปแบบ <TAG> .... </TAG> เชน <HTML> .... </HTML>, <B> .... </B>

การปดแทกจะใชเครองหมาย / (Slash) เปนตวกาหนดในแทกทปด สวนแทกอกประเภทหนงจะเปนแทกในลกษณะเปด คอ ไมตองมแทกเปดทาย เชน <IMG>, <BR>, <WBR> เปนตน




เพอความเขาใจงายในการกาหนดโครสรางภาษา HTML เราจงควรกาหนดแทกเปดและเปดใหเหมาะสมเพอสรางความสมดล เชน เมอเราตองการใชกาหนดใหตวอกษรเปนตวหนาโดยใชแทก <B> และใหมการขดเสนใตโดยใชแทก <U> เราควรทจะกาหนดการเปดและปดแทกโดยเมอขนตนดวยแทก <B> และตามดวยแทก <U> ควรจะปดดวยแทก </U> กอน แลวตามดวยแทก </B> ดงน

<B><U> .... </U></B>

โครงสรางหลก รปแบบมาตรฐานในการสรางเวบเพจประกอบดวยคาสงหลกอย 4 คาสง ดงน <HTML> .... </HTML> เปนคาสงททาหนาทบอกจดเรมตนและจดสนสดของเวบเพจ <HEAD> .... </HEAD> เปนคาสงในสวนของการกาหนดสวนหวเรองของเวบเพจ โดยในคาสง HEAD

จะมคาสง <TITLE> .... </TITLE> อยดวย ซงทาหนาทกาหนดขอความทแสดงบน Title Bar โดยสามารถกาหนดความยาวของขอความได 64 ตวอกษร

<BODY> .... </BODY> เปนคาสงในสวนเนอหาของเวบเพจทงหมด รปแบบการเขยนมดงตอไป

<HTML> <HEAD> <TITLE> Title Bar </TITLE> </HEAD> <BODY> . . . . </BODY> </HTML>

การจดรปแบบเอกสาร

คาสงในการกาหนดหวเรอง (Headding) การกาหนดหวเรองเราจะใชคาสง Headding <H> เพอแสดงอตราอกษรขนาดใหญกวาปกต เชน ชอบท,

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

<H1> .... </H> <H2> .... </H> <H3> .... </H> <H4> .... </H>




<H5> .... </H> <H6> .... </H>

ตวอยางท 1 head.html

<HTML> <HEAD><TITLE> Heading </TITLE></HEAD> <BODY> <H1> Heading Levle 1 </H> <H2> Heading Levle 2 </H> <H3> Heading Levle 3 </H> <H4> Heading Levle 4 </H> <H5> Heading Levle 5 </H> <H6> Heading Levle 6 </H> </BODY>

คาสงขนบรรทดใหม (Line Break) โดยปกตในการพมพเอกสารทว ๆ ไป เราจะขนบรรทดใหมโดยใชการกด Enter แตในการสรางเอกสาร

HTML เวบบราวเซอรจะถอเปนการเวนวรรค 1 ชอง และใชเปนจดตดคาขนบรรทดใหมถายาวเกนขนาดบรรทด แตถาเราตองการใหเวบบราวเซอรตดขอความ ณ ตาแหนงทกาหนดเราจะใชคาสง Line Break <BR> โดยมรปแบบดงน

ขอความ..... <BR>

ตวอยางท 2 break_rule.htm l <HTML> <HEAD><TITLE> Break Rule </TITLE></HEAD> <BODY> <P> Microsoft ถกตดสนโดยศาลสหรฐแลว โดยศาลสงให Microsoft แยกบรษทออกเปนบรษทยอย ๆ <I>(ในยอหนาขางบนน แมจะมการกด Enter ขนบรรทดใหม แต HTML จะตความเปนบรรทดเดยว)</I> <P> Microsoft ถกตดสนโดยศาลสหรฐแลว <BR> โดยศาลสงให Microsoft แยกบรษทออกเปนบรษทยอย ๆ <BR> <I>(สวนยอหนานใชคาสง <BR> จงขนบรรทดใหม)</I> </BODY> </HTML>

คาสงยกเลกการข นบรรทดใหม (No Break Rule) เมอเราตองการยกเลกคณสมบตการตดคาของเวบบราวเซอร เราสามารทาไดโดยใชคาสง <NOBR>

โดยมรปแบบดงน <NOBR>

http://se-ed.net/htmlbasic/example/head.html

http://se-ed.net/htmlbasic/example/break_rule.html




.... ขอความ .... </NOBR>

ตวอยางท 3 no_break.html <HTML> <HEAD><TITLE> Break Rule </TITLE></HEAD> <BODY> <NOBR> "The fist step toward success is identifying you own leadership strengths"<BR> (กาวแรกสความสาเรจ คอการระบคณสมบตเดนของการเปนผนาทมอยในตวคณ) </NOBR> </BODY> </HTML>

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

วรรตคไว จนเวบบราวเซอรพบคาสง <BR> จงทาการตดคาขนบรรทดใหม คาสงการจดตาแหนงของขอความ (Paragraph Break) เราจะใชคาสง <P> ในการจดยอหนาของขอความในเวบเพจ ซงคาสง <P> นน จะม Attributes เปน

คาสงเสรมชวยในการจดตาแหนงของยอหนาคอ Alignment โดยมรปแบบดงน <P Align = "ตาแหนง" > .... ขอความ .... </P>

ตาแหนงทใชในการจดยอหนามดวยกนสามลกษณะคอ

• Left จดขอความชดซายบรรทด • Center จดขอความกงกลางบรรทด • Right จดขอความชดขวาบรรทด

โดยปกตคาเรมตนของ Alignment จะอยท Left คอจดขอความชดซายของบรรทด

ตวอยางท 4 paragraph.html <HTML> <HEAD><TITLE> Paragraph </TITLE></HEAD> <BODY> <H4>การจดยอหนาในเวบเพจ</H4><BR> <P ALIGN="Left"> ขอความชดซายบรรทด </P> <P ALIGN="Center"> ขอความกงกลางบรรทด </P> <P ALIGN="Right"> ขอความชดขวาบรรทด </P>

http://se-ed.net/htmlbasic/example/no_break.html

http://se-ed.net/htmlbasic/example/paragraph.html




คาสงจดวางขอความกงกลางบรรทด (Center) ในการจดวางตาแหนงของขอความดวยภาษา HTML นอกจากจะใชคาสง <P Align= "ตาแหนง"> แลว

เรายงสามารถกาหนดกลมขอความหรอรปภาพใหอยกงกลางไดดวยคาสง <CENTER> ทมรปแบบกระชบกวา โดยมรปแบบดงน

<CENTER> .... ขอความ .... </CENTER>

ซงขอความทไดจะอยกงกลางบรรทด เหมาะกบการสรางขอความทเปนหวเรอง ตวอยางท 5 center.html <HTML> <HEAD><TITLE> Center </TITLE></HEAD> <BODY> <H1><CENTER>การฝกอบรมเชงปฏบตการ เรอง </CENTER></H1> <H2><CENTER>การสรางเวบเพจเบองตน</CENTER></H2> <H3><CENTER>วทยากร อ.จกรภพ ใหมเสน</CENTER></H3> </BODY> </HTML>

การตเสนแนวนอน (Horizontal Line) ภาษา HTML มคาสงชวยในการตเสนแนวนอน เพอแยกเอกสารออกเปนสวน ๆ ใหงายตอการดรปแบบ

เอกสารมากขน โดยมรปแบบดงน <HR>

สาหรบคาสง <HR> นจะไมมแทกปด เปนคาสงในลกษณะทเรยกวาแทกเปด ซงถาเปนคา default จะ

แสดงเสนขนาด 2 pixels เตมจอภาพ แตคาสง <HR> ยงม Attributes ชวยในการกาหนดความหนา, ความยาว, การจดตาแหนง และการกาหนดความทบของเสน โดยมรปแบบดงน

<HR Size = "ความหนาของเสน" Width = "ความยาวของเสน" Align = "ตาแหนงการจดวาง" Noshade>

Size เปนการกาหนดความหนาใหกบเสน ขนาดปกต คอ 2 pixels

Width เปนการกาหนดความยาวใหกบเสน สามารถกาหนดเปนทง pixels และ % โดยปกตถาไมกาหนด เสนจะยาวเตมจอภาพ

Align เปนการกาหนดตาแหนงการจดวางของเสน ประกอบดวย

Left คอ การจดเสนชดซายของบรรทด Center คอ การจดเสนอยกงกลางบรรทด Right คอ การจดเสนชดขาวของบรรทด

Noshade เปนการกาหนดแสดงเสนทบไมมการแรงเงาของเสน

http://se-ed.net/htmlbasic/example/center.html




ตวอยางท 6 horizontal_line.html <HTML> <HEAD><TITLE> Horizontal Line </TITLE></HEAD> <BODY> เสนขนาดปกต <HR> เสนความหนา 5 <HR Size="5"> เสนความหนา 20 <HR Size="20"> เสนความยาว 200 <HR Width="200"> เสนความยาว 50% ของจอภาพ <HR Width="50%"> เสนความหนา 20 ความยาว 20% <HR Szie="20" Width="20%"> เสนความหนา 10 ความยาว 20% และอยชดซายของบรรทด <HR Szie="10" Width="20%" Align="Left"> เสนความหนา 10 และแสดงเสนทบโดยไมมการแรเงาของเสน <HR Szie="10" Noshade> </BODY> </HTML>

การจดรปแบบตวอกษร และการใชส

คาสงในการกาหนดแบบตวอกษร (Font Type) คาสงในการกาหนดแบบตวอกษรนน เราใชแทก <FONT> ซงแทกนสามารถทจะกาหนดไดตงแต แบบ

ตวอกษร (Font Face), ขนาดของตวอกษร (Font Size) และสของตวอกษร (Font Color) การกาหนดแบบตวอกษร หรอทเรยกวา ฟอนต (Font) โดยปกตคาเรมตนของเวบบราวเซอรจะกาหนด

เปนแบบ Time New Roman เพอความหลากหลายของรปแบบตวอกษรมากกวา 1 รปแบบบนจอภาพของบราวเซอร เราสามารถใชคาสง <FONT> ตามดวย Attributes "FACE" เพอกาหนดรปแบบการแสดงผลภาษาไทยใหกบตวอกษรของเวบเพจของเราได ซงการแสดงผลภาษาไทยนนมฟอนตใหเลอกหลายแบบตวอยางเชน AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เปนตน แตสาหรบฟอนตทเหมาะสมกบการแสดงผลภาษาไทยในเวบบราวเซอร คอ MS Sans Serif โดยมรปแบบดงน

<FONT Face = "ชอฟอนต "> ... ขอความ ... </FONT>

ถาตองการระบมากกวา 1 ฟอนต ใหกาหนดรปแบบดงน <FONT Face = "ชอฟอนต 1",ชอฟอนต 2",...> ... ขอความ ... </FONT>

ขอดของการกาหนดฟอนตไวมากกวา 1 ฟอนต กคอ เมอเวบบราวเซอรหาฟอนตท 1 ไมเจอกจะหา

ฟอนตท 2 ตอไปตามลาดบ ตวอยางท 7 font_face.html

http://se-ed.net/htmlbasic/example/horizontal_line.html

http://se-ed.net/htmlbasic/example/font_face.html




<HTML> <HEAD><TITLE> Font Face </TITLE></HEAD> <BODY> <FONT Face="AngsanaUPC"> แบบตวอกษรแบบ AngsanaUPC </FONT> <BR> <FONT Face="Ms Sans Serif"> แบบตวอกษรแบบ Ms Sans Serif </FONT> <BR> <FONT Face="Comic Sans MS"> Font Style Comic Sans MS </FONT> <BR> <FONT Face="Bookman Old Style"> Font Style Bookman Old Style </FONT> <BR> </BODY> </HTML>

เราสามารถกาหนดขนาดของตวอกษรในคาสง <FONT> โดยใช Attributes "Size" ในภาษา HTML

กาหนดขนาดของตวอกษรได 7 ขนาด โดยใชตวเลข 1-7 เปนตวกาหนด คาเรมตนจะมขนาดเปน 3 <FONT Size = "ขนาด"> ... ขอความ ... </FONT>

ตวอยางท 8 font_size.html <HTML> <HEAD><TITLE> Font Face </TITLE></HEAD> <BODY> <FONT Size="1">Font Size 1</FONT><BR> <FONT Size="2">Font Size 2</FONT><BR> <FONT Size="3">Font Size 3</FONT><BR> <FONT Size="4">Font Size 4</FONT><BR> <FONT Size="5">Font Size 5</FONT><BR> <FONT Size="6">Font Size 6</FONT><BR> <FONT Size="7">Font Size 7</FONT><BR> </BODY> </HTML>

การกาหนดสใหกบตวอกษรเราใช Attributes "Color" ในการกาหนดสของตวอกษรทาได 2 วธ คอ

1. กาหนดจากชอของสมาตรฐาน เปนการกาหนดจากชอสมาตรฐานโดยตรง เชน Black, Red เปนตน

http://se-ed.net/htmlbasic/example/font_size.html




2. กาหนดจากรหสเลขฐาน 16 จะใชการอางองเลขฐาน 16 ในระบบของหมายเลขส RGB (Red, Green, Blue) ซงมรปแบบของรหสสเปน #RRGGBB โดยใชแทนรหสดวยเลขฐาน 16 ในชวง 0, 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลาดบ

โดยมรปแบบดงน <FONT Color = "ชอสมาตรฐาน "> ... ขอความ ... </FONT> หรอ <FONT Color = "#RRGGBB"> ... ขอความ ... </FONT>

ตวอยางสมาตราฐานในการแสดงผลบนเวบบราวเซอร (ในทนขอใช Internet Explorer เปนหลก) ทงชอของส และรหสเลขฐาน 16 มดงน

ชอมาตรฐาน ตวเลขฐาน 16 ในระบบส #RRGGBB

สทปรากฏบนจอภาพ สทได

Black #000000 สดา Blue #0000FF สนาเงนเขม Cyan #00FFFF สคราม

Darkgray #A9A9A9 สเทาเขม Gray #808080 สเทา

Green #008000 สเขยว Lightgray #D3D3D3 สเทาออน Magenta #FF00FF สมวงออน Orange #FFA500 สสม

Pink #FFC0CB สชมพ Red #FF0000 สแดง

White #FFFFFF สขาว Yellow #FFFF00 สเหลอง

ตวอยางท 9 font_color.html <HTML> <HEAD><TITLE> Font Color</TITLE></HEAD> <BODY> <FONT color="Blue">This is Blue Color</FONT><BR> <FONT color="Green">This is Green Color</FONT><BR> <FONT color="#FFA500">This is #FFA500</FONT><BR> </BODY> </HTML>

http://se-ed.net/htmlbasic/example/font_color.html




คาสงในการกาหนดลกษณะตวอกษร (Style) ในภาษา HTML มคาสงทชวยในการกาหนดลกษณะตวอกษรใหมความเดนชด เพอความเหมาะสมกบ

งานในลกษณะตาง ๆ โดยมรปแบบตาง ๆ ดงน

• การกาหนดตวอกษรตวหนา (Bold) ใชแทก <B> • การกาหนดตวอกษรตวเอยง (Italic) ใชแทก <I> • การกาหนดขดเสนใตตวอกษร (Underline) ใชแทก <U> • การกาหนดตวอกษรตวพมพดด (Typewriter) ใชแทก <TT> • การกาหนดขดเสนพาดทบกลางตวอกษร (Strikethrough) ใชแทก <S> • การกาหนดตวอกษรตวหอย (Subscript) ใชแทก <SUB> • การกาหนดตวอกษรตวยก (Superscript) ใชแทก <SUP> • การกาหนดตวอกษรตวโต (Big) ใชแทก <BIG> • การกาหนดตวอกษรตวเลก (Small) ใชแทก <SMALL>

<B> ... ขอความ ... </B> <I> ... ขอความ ... </I> <U> ... ขอความ ... </U> <TT> ... ขอความ ... </TT> <S> ... ขอความ ... </S> <SUB> ... ขอความ ... </SUB> <SUP> ... ขอความ ... </SUP> <BIG> ... ขอความ ... </BIT> <SMALL> ... ขอความ ... </SMALL>

ตวอยางท 10 style.html <HTML> <HEAD><TITLE> Font Face </TITLE></HEAD> <BODY> แบบตวอกษรปกต แบบตวอกษรหนา <B>Bold</B><BR> แบบตวอกษรเอยง <I>Italic</I><BR> แบบตวอกษรขดเสนใต <U>Underline</U><BR> แบบตวอกษรตวพมพดด <TT>Typewriter</TT><BR> แบบตวอกษรขดเสนพาดทบกลางตวอกษร <S>Strikethrough</S><BR> แบบตวอกษรตวหอย <SUB>Subscript</SUB><BR> แบบตวอกษรตวยก <SUP>Superscript</SUP><BR> แบบตวอกษรตวโต <BIG>Big</BIG><BR> แบบตวอกษรตวเลก <SMALL>Small</SMALL> </BODY> </HTML>

การกาหนดสพนหลง การกาหนดสพนหลงของเวบเพจเราสามารถทาไดจากแทก <BODY> โดยกาหนดจาก Attributes

"BGColor" โดยมรปแบบดงน

http://se-ed.net/htmlbasic/example/style.html




กาหนดสพนหลงจากชอสมาตรฐาน <BODY BGColor = "สพนหลง "> .... </BODY> กาหนดสพนหลงจากเลขฐาน 16 <BODY BGColor = "#RRGGBB"> .... </BODY>

ตวอยางท 11 bgcolor.html <HTML> <HEAD><TITLE> BGColor </TITLE></HEAD>  <BODY BGColor="#FFFF00"> The Internet is a collection of information stored in computers physically located throughout the world.<BR> Much of the information on the Internet is organized onto electronic pages. You'll bring one page to your computer screen, discover its contents, and have the option of bringing more pages of information. </BODY> </HTML>

การกาหนดสใหกบตวอกษรทงเอกสาร การกาหนดสใหกบตวอกษรทงเวบเพจเราสามารถทาไดจากแทก <BODY> โดยกาหนดจาก Attributes

"Text" โดยมรปแบบดงน กาหนดสพนหลงจากชอสมาตรฐาน <BODY Text = "สพนหลง "> .... </BODY> กาหนดสพนหลงจากเลขฐาน 16 <BODY Text = "#RRGGBB"> .... </BODY>

ตวอยางท 12 body_text.html <HTML> <HEAD><TITLE> Heading </TITLE></HEAD>  <BODY Text="#FF0000"> The Internet is a collection of information stored in computers physically located throughout the world.<BR> Much of the information on the Internet is organized onto electronic pages. You'll bring one page to your computer screen, discover its contents, and have the option of bringing more pages of information. </BODY> </HTML>

http://se-ed.net/htmlbasic/example/bgcolor.html

http://se-ed.net/htmlbasic/example/body_text.html




การกาหนดเครองหมายหวขอและเลขลาดบ

คาสงในการแสดงรายการแบบไมมลาดบ (Unordered List) Unordered List หรอ Bullet List นน ในภาษา HTML ไดกาหนดคาสงในการอานวยความสะดวกในการ

สราง Bullet ขนไวดวย เพอแสดงเครองหมายหนาหวขอเรองหรอลาดบของรายการตาง ๆ โดยไมมการเรยงลาดบ โดยมรปแบบดงน

<UL> <LI> ... ขอความ ... <LI> ... ขอความ ... <LI> ... ขอความ ... ... ........... </UL> ตวอยางท 13 bullet1.html <HTML> <HEAD><TITLE> List Item </TITLE></HEAD> <BODY> <UL>Viewing the Navigator Window <LI>Window and frames <LI>Colors and underlining <LI>Company logo <LI>Progress bar <LI>Status message area </UL> </BODY> </HTML>

เรายงสามารถระบชนดของเครองหมายไดดวย Attributes "Type" ในแทก <UL> หรอ <LI> โดยม

รปแบบดงน <UL Type = "ชนดของเครองหมาย"> <LI Type = "ชนดของเครองหมาย"> ชนดของเครองหมายมดวยกน 3 แบบ ดงน

ชนดของเครองหมาย สญญาลกษณทปรากฏ

Disc •

Circle o

Square

ตวอยางท 14 bullet2.html <HTML> <HEAD><TITLE> List Item </TITLE></HEAD> <BODY> <UL Type="Circle">การศกษาวชาพนฐานของคณะวทยาศาสตร สาขาวทยาการคอมพวเตอร ไดแก

http://se-ed.net/htmlbasic/example/bullet1.html

http://se-ed.net/htmlbasic/example/bullet2.html




คาสงในการแสดงรายการแบบเปนลาดบ (Ordered List) เราสามารถแสดงรายการแบบเปนลาดบ คอ Ordered List หรอ Number List ได โดยการใชตวเลขหรอ

ตวอกษรเปนตวกาหนดแสดงลาดบ โดยมรปแบบดงน <OL Type = "ชนดของตวเลข" Start = "ตวเลขเรมตน"> <LI> ... ขอความ ... <LI> ... ขอความ ... <LI> ... ขอความ ... ... ........... </OL>

ชนดของ Type กาหนดเลขลาดบไดดงน

ชนดของ Type สงทปรากฏ

A แสดงตวอกษรพมพใหญ (Caplital letters)

a แสดงตวอกษรพมพเลก (Small letters)

I แสดงตวเลขโรมนตวพมพใหญ (Large Roman numerals)

i แสดงตวเลขโรมนตวพมพเลก (Small Roman numerals)

1 แสดงตวเลขอารบก (Small Roman numerals) * เปนคา default *

ตวอยางท 15 order_list.html <HTML> <HEAD><TITLE> Order List </TITLE></HEAD> <BODY> <OL Type="I">My computer in my dream <LI>Inter Pentium 4 processor 2.0 GHz <LI>RDRAM 256 MB <LI>Harddisk 50 GB ATA-100 <LI>52X CD-Rom Drive <LI>Speakers (Labtec) 160 Watt <LI>Asus GeForce3 64 MB <LI>Creative Sound Baster

http://se-ed.net/htmlbasic/example/order_list.html




<LI>Monitor Sony Wega 20" </OL> </BODY> </HTML>

การสรางตาราง

คาสงในการสรางตาราง (Table) การสรางเวบเพจในปจจบนมการนาตารางเขามาเกยวของกบหลาย ๆ สวน ตงแตการสรางตารางเพอ

แสดงความสมพนธในลกษณะแถว (Row) และคอลมน (Column) รวมถงการแบงขอบเขตใหกบขอความเพอการจากดและควบคมขอความใหอยในสวนทเราตองการ

คาสงสาหรบสรางตารางประกอบดวยคาสงดงน Tag คาอธบาย

<TABLE> ... </TABLE> คาสงในการสรางตาราง <CAPTION> ... </CAPTION> คาสงในการกาหนดขอความกากบตาราง

<TR> ... </TR> คาสงในการกาหนดแถวของตาราง 1 แถว <TH> ... </TH> คาสงในการกาหนดสวนหวของตารางแถวแรก <TD> ... </TD> คาสงในการกาหนดสวนของขอมลในแถว หรอทาคอลมน

สาหรบโครงสรางของคาสงในการสรางตารางมดงน <TABLE> <CAPTION> ขอความกากบตาราง </CAPTION> <TR> <TH> ขอความสวนหว </TH> .................... .................... </TR> <TR> <TD> ขอความสวนของขอมล </TD> ........................ ........................ </TR> <TR> <TD> ขอความสวนของขอมล </TD> ........................ ........................ </TR> ........................ ........................ ........................ </TABLE>

ตวอยางท 16 table1.html <HTML> <HEAD><TITLE> Table Tag </TITLE></HEAD>

http://se-ed.net/htmlbasic/example/table1.html




<BODY> <CENTER> Example Data <H2>Report Sale 2001</H2> <TABLE> <TR> <TH>Month</TH> <TH>Sale A</TH> <TH>Sale B</TH> <TH>Sale C</TH> </TR> <TR> <TD>January</TD> <TD>500</TD> <TD>800</TD> <TD>700</TD> </TR> <TR> <TD>February</TD> <TD>1200</TD> <TD>1000</TD> <TD>300</TD> </TR> <TR> <TD>Mar</TD> <TD>900</TD> <TD>400</TD> <TD>600</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

เรายงสามารถใช Attributes เพอใหเวบบราวเซอรแสดงตารางใหชดเจนยงขน Attributes ตาง ๆ มดงน

Attributes คาอธบาย

Align

กาหนดการวางตาแหนงตางราง ม 3 ลกษณะ - Left กาหนดจดวางชดซาย (เปนคา default) - Right กาหนดจดวางชดขวา - Center กาหนดจดวางกงกลาง

Border กาหนดแสดงความหนาของเสนตาราง มหนวยเปน Pixel Height กาหนดความสงของตาราง มหนวยเปน Pixel และ Percent

Width กาหนดความกวางของตาราง มหนวยเปน Pixel และ Percent

CellSpacing กาหนดชองวางระหวางตาราง CellPadding กาหนดชองวางระหวางบรรทดของตาราง

การกาหนดคาตาง ๆ ของ Attributes ทกลาวมาแลว ความแตกตางของการกาหนดคาเปน pixel และ

เปน percent นนมความแตกตางกนดงน

• พกเซล (Pixel) การกาหนดคาเปนแบบพกเซล เมอการลดขนาดของเวบบราวเซอรตารางจะไมลดขนาดตามความกวาง หรอยาวของเวบบราวเซอร




• เปอรเซนต (Percent หรอ %) ถากาหนดคาในลกษณะของ Percent เมอบราวเซอรมการลดขนาดลง ขนาดของตารางจะลดสดสวนตามขนาดของตวเวบบราวเซอรดวย

ตวอยางท 17 table2.html <HTML> <HEAD><TITLE> Table Tag </TITLE></HEAD> <BODY> <CENTER> Example Data <H2>Report Sale 2001</H2> <TABLE Border="3" CellSpacting="5" CellPadding="3"> <TR> <TH>Month</TH> <TH>Sale A</TH> <TH>Sale B</TH> <TH>Sale C</TH> </TR> <TR> <TD>January</TD> <TD>500</TD> <TD>800</TD> <TD>700</TD> </TR> <TR> <TD>February</TD> <TD>1200</TD> <TD>1000</TD> <TD>300</TD> </TR> <TR> <TD>Mar</TD> <TD>900</TD> <TD>400</TD> <TD>600</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

คาสงในการกาหนดส และการจดตาแหนงของขอมลในตาราง ในการสรางตารางในภาษา HTML ม Attributes ทชวยเพมสสนและความเหมาะสมใหกบตาราง คอ

• Align ใชกาหนดการจดตาแหนงของขอมลในตางราง ไมวาจะเปนขอความหรอภาพ กาหนดได 3 ลกษณะ Left กาหนดการจดวางแบบชดขอบซายของตาราง Right กาหนดการจดวางแบบชดขอบขาวของตาราง Center กาหนดการจดวางแบบกงกลางของตาราง

• BGColor เปนการกาหนดพนสภายในตารางทอยในแถวนน





ตวอยางท 18 table3.html <HTML> <HEAD><TITLE> Table Tag </TITLE></HEAD> <BODY> <CENTER> <H2>Report Sale 2001</H2> <TABLE Border="3" CellSpacting="5" CellPadding="3"> <CAPTION Aling="Bottom"> Summation Sale Report </CAPTION> <TR Aling="Center" BGColor="Whitegreen"> <TH>Month</TH> <TH>Sale A</TH> <TH>Sale B</TH> <TH>Sale C</TH> </TR> <TR Align="Center" BGColor="Yellow"> <TD>January</TD> <TD>500</TD> <TD>800</TD> <TD>700</TD> </TR> <TR Align="Center" BGColor="Skyblue"> <TD>February</TD> <TD>1200</TD> <TD>1000</TD> <TD>300</TD> </TR> <TR Align="Center" BGColor="Pink"> <TD>Mar</TD> <TD>900</TD> <TD>400</TD> <TD>600</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

การนารปภาพมาใชกบเวบเพจ

ชนดของรปภาพ การนารปภาพมาใสในเวบเพจเปนสวนหนงทสรางความนาสนใจใหกบเวบเพจเปนอยางมาก โดยเฉพาะ

การสรางเวบเพจในปจจบนกาวไปถงขนมการตอบโตกบผทเขาชมเวบเพจ หรอทเรยกกวา อนเตอรแอคทฟ (Interactive) การนารปภาพในใชในเวบเพจยงมความจาเปนมากยงขน

ในการแสดงผลในเวบเพจนน ภาพในแบบทเหมาะสมคอภาพในแบบ GIF หรอ JPEG เนองจากภาพทไดจะมขนาดเลก ทาใหแสดงผลไดอยางรวดเรว

1. Graphics Interchange Format (GIF) เปนภาพทมการบบอดขอมล ภาพจงมขนาดเลก แตสทรปภาพในแบบ GIF นนสามารถแสดงผลไดเพยง 256 ส จงเหมาะกบภาพในลกษณะภาพวาด ไฟลภาพแบบ GIF มอยดวยกน 2 ชนด คอ





- GIF87a เปนไฟล GIF ทวไป - GIF89a เปนไฟล GIF ทสามารถเคลอนไหวได หรอทเรยกวา GIF Animation

ไฟลภาพแบบ GIF ทงสองชนดสามารถปรบการแสดงผลได 3 แบบ ไดแก - แบบ Interlaced จะทาการแสดงภาพออกเปนชวง ๆ แทนทจะแสดงไลลงมาจากบนลงลาง

ตามปกต - แบบ Progressive จะทาการแสดงภาพแบบหยาบ ๆ กอน แลวคอย ๆ ชดขน - แบบ Transparent Background จะแสดงภาพโดยไมมพนฉากหลง

2. Joint Photographic Experts Group (JPEG หรอ JPG) เปนรปภาพทถกบบอดขอมลไว โดยใชเทคนค Lossy ซงคณภาพของภาพทไดจะมคณภาพลดลงตามขนาดทบบอดขอมล แตไมจากดจานวนส ไฟลภาพแบบ JPEG เหมาะสาหรบภาพในลกษณะภาพถาย

คาสงในการใสรปภาพในเวบเพจ (Image) เราจะใชแทก <IMG> ในการนาภาพเขามาแสดงผลในเวบเพจ โดยมรปแบบดงน <IMG SRC = "ไฟลภาพ"> สาหรบ Attributes ทใชระบตาแหนงของรปภาพคอ SRC หรอ Source เราสามารถทจะชตาแหนงทเกบ

ภาพได เชน <IMG SRC="http://www.north.rit.ac.th/image/logo.gif"> เปนตน

ตวอยางท 19 image1.html <HTML> <HEAD><TITLE> Image </TITLE></HEAD> <BODY> <CENTER> <IMG SRC="mypic.jpg"> </CENTER> </BODY> </HTML>

ถาเราตองการใสคาอธบายภาพ ภาษา HTML ม Attributes ทชวยทาในสวนน คอ ALT (Alternative

Text) ประโยชนสาหรบ Attributes นคอ เมอผใชเวบบราวเซอรทไมรองรบการแสดงผลในแบบกราฟฟค ในสวนของภาพจะมขอความขนมาอธบายในสวนนน โดยมรปแบบดงน

<IMG SRC = "ไฟลภาพ" ALT = "คาอธบาย"> ตวอยางท 20 image2.html <HTML> <HEAD><TITLE> Image </TITLE></HEAD> <BODY> <CENTER> <IMG SRC=" mypic.jpg" ALT="รปใครเอย"> </CENTER> </BODY> </HTML>

http://se-ed.net/htmlbasic/example/image1.html

http://se-ed.net/htmlbasic/example/image2.html




การนารปภาพทาเปนพนหลง เราสามารถนารปภาพไปประกอบเปนพนหลงหรอทเรยกวาวอลลเปเปอร (Wall Paper) ของเวบเพจได

โดยกาหนดในสวนของแทก Body ซงใช Attributes Background โดยมรปแบบดงน <BODY Background = "ไฟลภาพ">

ตวอยางท 21 image_background.html <HTML> <HEAD><TITLE> Wall Paper </TITLE></HEAD> <BODY Background="logo_bg.gif"> <CENTER> We are students </CENTER> </BODY> </HTML>

การเชอมโยงเวบเพจ (Link)

การเชอมโยงเวบเพจ หรอทเรยกวาลงค (Link) ถอวาเปนคณสมบตทสาคญของภาษา HTML ดงจะเหนไดจากเวบเพจทว ๆ ไป จดเชอมโยงเวบเพจอาจจะเปนขอความหรอรปภาพกได

การสรางจดเชอมโยงขอความ (Text Link) ในการเชอมโยงเวบเพจเราจะใชแทก <A> โดยการกาหนดขอความในเอกสาร HTML เปนจดเชอมโยง

โดยมรปแบบดงน <A HREF = "URL"> ขอความ </A>

A HREF หมายถง Hypertext Reference สวน URL (Uniform Resource Location) คอ รปแบบ

มาตรฐานทเปนแหลงทขอใชบรการอนเทอรเนต โดยเขยนอยในรปแบบดงน โปรโตคอล://ชอโฮส .โดเมน/ชอไฟล ตวอยางเชน http://www.microsoft.com/ ftp://ftp.nectec.or.th/ http://www.north.rit.ac.th/index.html ตวอยางท 22 link1.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY> <CENTER><H2>สภาบนการศกษา </H2></CENTER><BR> <A HREF="http://www.north.rit.ac.th/">สถาบนเทคโนโลยราชมงคล วทยาเขตภาคพายพ</A><BR> <A HREF="http://www.ru.ac.th/">มหาวทยาลยรามคาแหง</A><BR> <A HREF="http://www.cu.ac.th/">จฬาลงกรณมหาวทยาลย</A><BR> <A HREF="http://www.tu.ac.th/">มหาวทยาลยธรรมศาสตร</A><BR>

http://se-ed.net/htmlbasic/example/image_background.html

http://se-ed.net/htmlbasic/example/link1.html




การสรางจดเชอมโยงกบรปภาพ (Graphic Link) เปนการกาหนดใหรปภาพเปนจดเชอมโยง โดยมรปแบบดงน <A HREF = "URL"><IMG SRC = "ชอไฟล "></A>

ตวอยางท 23 link2.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY> <CENTER> <H2>หนงสอพมพไทย </H2> <P> <A HREF="http://www.komchadluek.com/"> <IMG SRC="komchadluek.gif" BORDER="0"> </A> <P> <A HREF="http://www.thairath.com/"> <IMG SRC="thairath.gif" BORDER="0"> </A> </CENTER> </BODY> </HTML>

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

พรอมทงมเสนใตบงบอกจดเชอมโยงดวย เราจะกาหนดสของ Link ในเวบเพจจากแทก Body โดยมรปแบบดงน <BODY Attributes = "ชอสมาตราฐาน "> หรอ <BODY Attributes = "#RRGGBB"> Attributes ทใชในการกาหนดสมดวยกนดงน

BGCOLOR กาหนดสพนหลงใหกบเวบเพจ

TEXT กาหนดสตวอกษรปกต

LINK กาหนดสตวอกษรทเปนจดเชอมโยง

VLINK (Visited Link) กาหนดสตวอกษรททาการคลกเพอไปยงเปาหมายแลว

ALINK (Active Link) กาหนดสตวอกษรทกาลงคลกไปยงเปาหมาย





ตวอยางท 24 link3.html <HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY TEXT="RED" LINK="BLUE" VLINK="GREEN" ALINK="ORANGE"> <CENTER><H2>สภาบนการศกษา </H2></CENTER><BR> <A HREF="http://www.north.rit.ac.th/">สถาบนเทคโนโลยราชมงคล วทยาเขตภาคพายพ</A><BR> <A HREF="http://www.ru.ac.th/">มหาวทยาลยรามคาแหง</A><BR> <A HREF="http://www.cu.ac.th/">จฬาลงกรณมหาวทยาลย</A><BR> <A HREF="http://www.tu.ac.th/">มหาวทยาลยธรรมศาสตร</A><BR> </BODY> </HTML>

การเชอมโยงระหวางเวบเพจ

ในการระบตาแหนงทอยสาหรบลงคนน ถาอยตางเวบไซตกนจะตองระบไวใหครบถวน ตามตวอยางท 22-24 ทผานมา แตถาเปนไฟล HTML ในเวบไซตเดยวกนเราสามารถละชอเวบไซตได เหลอเพยงชอไฟลกพอ ตวอยางท 25 link3.html

<HTML> <HEAD><TITLE>Link</TITLE></HEAD> <BODY> <CENTER><H2>สภาบนการศกษา </H2></CENTER><BR> <A HREF="head.html">ตวอยางท 1</A><BR> <A HREF="paragraph.html">ตวอยางท 4</A><BR> <A HREF=" font_size.html">ตวอยางท 8</A><BR> <A HREF=" order_list.html">ตวอยางท 15</A><BR> <A HREF=" table3.html">ตวอยางท 18</A><BR> </BODY> </HTML>



http://se-ed.net/htmlbasic/example/paragraph.html







9ตอนท 2 เทคนคการสราง และตกแตงภาพ ดวย Adobe Photoshop CS3

Adobe Photoshop CS3 คออะไร Adobe Photoshop CS3 เปนโปรแกรมคอมพวเตอรทรวบรวมเครองมอสาหรบตกแตงภาพประสทธภาพสง เพอการทางานระดบมาตรฐานสาหรบนกออกแบบมออาชพทตองการสรางสรรคงานกราฟกทโดดเดน ทงงานทใชบนเวบและงานสงพมพ

ความละเอยดของภาพกราฟก ภาพทปรากฏบนหนาจอคอมพวเตอรนน เกดจากจดสเหลยมเลกๆ ของสทเราเรยกวา พกเซล (Pixel) (พกเซลเปนองคประกอบทเลกทสดของภาพ) มาประกอบกนเปนภาพขนาดตางๆ ความละเอยดของภาพจะมหนวยวดปน พกเซล/ตารางนว และงานกราฟกในแตละแบบกจะใชความละเอยดทแตกตางกน ดงน

• ภาพทแสดงบนหนาจอคอมพวเตอร เชน หนาเวบ หรองานพรเซนเตชน ใชความละเอยด 72 พกเซล/ตารางนว

• ภาพถายทวๆไป ใชความละเอยด 150 พกเซล/ตารางนว • ภาพในงานพมพ ใชความละเอยด 300 พกเซล/ตารางนว

พนทการทางาน (Work Area)

Work Area หรอพนทการทางานของโปรแกรม Adobe Photoshop จะประกอบดวยเครองมอสาหรบการตกแตงไฟลภาพตาง ๆ ดงน

1. Menu bar คอสวนทแสดงชอเมนตางๆ ของโปรแกรม กจะประกอบดวย File , Edit , Image , Layer , Select , Filter , View , Window , Help

1.1 File หมายถง คาสงเกยวกบการจดเกบและเรยกใชไฟลรปภาพตางๆ 1.2 Edit หมายถง คาสงเกยวกบการแกไขลกษณะของรปภาพและ Image ตางๆ 1.3 Image หมายถง คาสงการจดการรปภาพและ Image ตางเชน การเปลยนสและการ เปลยน

ขนาด 1.4 Layer หมายถง ชนหรอลาดบของรปภาพและวตถทเราตองการจะทา Effects 1.5 Select เปนคาสงการเลอกพนทหรอสวนตางของรปภาพและวตถในการทจะเลน Effects ตางๆ 1.6 Filter เปนคาสงการเลน Effects ตางๆสาหรบรปภาพและวตถ 1.7 View เปนคาสงเกยวกบมมมองของภาพและวตถในลกษณะตางๆ เชน การขยายภาพ และ

ยอภาพใหดเลก 1.8 Window เปนสวนคาสงในการเลอกใชอปกรณเสรมตางๆทจาเปนในการใชสราง Effects ตางๆ 1.9 Help เปนคาสงเพอแนะนาเกยวกบการใชโปรแกรมฯและจะมลายละเอยดของโปรแกรม อยในนน

2. Toolbox คอสวนของอปกรณตาง ๆ ทใชในการสรางชนงานหรอตกแตงภาพ 3. Tool options bar คอสวนทกาหนดคณสมบตของอปกรณทเลอกจาก Toolbox




4. Palettes คอสวนทใชตรวจสอบและกาหนดคณสมบตตาง ๆ ใหกบรปภาพ 5. Status bar คอสวนทแสดงรายละเอยดตาง ๆ ของชนงาน เชน ขนาดของมมมองรปภาพ ขนาดของ

ไฟล คาแนะนาการใชงานของอปกรณทเลอกจาก Toolbox

เครองมอตางๆ (Toolbox)

หมายเหต ปม Toolbar ทมเครองหมายสามเหลยมเลกๆ อยดานลางขวาเมอกดปมสามเหลยมดงกลาว โปรแกรมจะ

แสดงเครองมออนๆ ออกมาเชน










การเปดไฟลภาพ (Open)

1. คลกทเมนคาสง File ทแถบ Menu bar จากนนเลอกคาสง Open

2. จะปรากฏ Dialog แสดงรายชอไฟลตาง ๆ ดงภาพ เพอเลอกไฟลทตองการเปดมาใชงาน

คลกเลอกไฟลทตองการเปดใชงาน จากนนคลกปม Open 3.




การสรางไฟลใหม (New)

1. คลกทเมนคาสง File ทแถบ Menu bar จากนนเลอกคาสง New

2. จะปรากฏ Dialog สาหรบกาหนดคณสมบตตาง ๆ ของไฟลภาพดงน

- Name คอ ชอของชนงาน สามารถกาหนดใหมเองได ชอนจะไประบทช อไฟลตอไป - Preset คอ ขนาดงานทโปรแกรมกาหนดมาให ซงมหลากหลายขนาดใหเลอก หรอ

สามารถกาหนดเองจากชอง Width และ Height ได - Width คอ ขนาดความกวางของงาน (จากซายไปขวา) โดยกาหนดหนวยและขนาดไดเอง

จากรป คอ 1024 Pixels - Height คอ ขนาดความกวางของงาน (จากบนลงลาง) โดยกาหนดหนวยและขนาดไดเอง

จากรป คอ 768 Pixels - Resolution คอ ความละเอยดของภาพ โดยใสตวเลขคาความละเอยดของภาพ เชน งาน

เวบหรอรปทแสดงบนคอมพวเตอรเทากบ 72 pixels/inch งานสงพมพเทากบ 150-200 pixels/inch - Color Mode คอ โหมดสของภาพ ซงประกอบไปดวย โหมดส Bitmap, Grayscale,

RGB Color, CMYK Color, Lab Color - Background Contents คอ สพนหลงของภาพ เมอเรมชนงานใหม มดงน




• White กาหนดใหสพนหลงเปนสขาว • Background Color กาหนดใหสพนหลงเปนสเดยวกบ Background • Transparent ไมมพนหลง

หลงจากกาหนดคณสมบตตาง ๆ ใหคลกปม OK เพอเรมชนงานใหม 3.

การบนทกขอมลลงบนไฟล (Save)

หลงจากตกแตงไฟลภาพเรยบรอย จะตองเกบบนทกขอมลลงบนไฟล (Save) สาหรบการเรยกใชงานในครงตอไป โปรแกรมมการบนทกขอมลลงบนไฟล (Save) อย 3 ลกษณะ คอ

- Save บนทกไฟลในรปแบบ (Format) ปกต ซงจะอยในรปแบบ (Format) ของ PSD - Save As บนทกไฟลในรปแบบ (Format) อน ๆ ได เชน JPEG, BMP, GIF เปนตน - Save for Web บนทกไฟลในรปแบบ (Format) สาหรบการใชงานบนเวบ เชน ไฟล Html และไฟลรปภาพ JPEG, GIF, PGN เปนตน

ในทนเปนแสดงการใชงานของ Save และ Save As 1. คลกทเมนคาสง File ทแถบ Menu bar จากนนเลอกคาสง Save หรอ Save As หรอ Save

for Web & Devices

2. จะปรากฏ Dialog สาหรบกาหนดคณสมบตตาง ๆ ของไฟลภาพดงน




- ชอไฟล (File Name) - รปแบบของไฟล (Format) - กาหนดคณสมบตของการบนทกไฟล (Save Options)

• As a Copy บนทกไฟลเปนชออน รปแบบ (Format) อน ขณะทไฟลเดมกาลงเปดใชงาน

• Layers จะเกบคณสมบตของ Layer ตาง ๆ • Use Proof setup เกบคาโหมดสทจะใชแสดงสของภาพกอนจะพมพ • Thumbnail กาหนดใหไฟลทบนทก (Save) สามารถแสดงภาพตวอยางใน Dialog

ของการเปดไฟล • Use Lower Case Extension กาหนดใหนามสกลไฟลเปนอกษรตวเลก

หลงจากกาหนดคณสมบตตาง ๆ ใหคลกปม Save เพอบนทกขอมลลงบนไฟล 3.

การใชงาน Palettes

Palettes คอ Dialog ทใชตรวจสอบและกาหนดคณสมบตตาง ๆ ของรปภาพ เชน Palette ของ Navigator และ Info, Palette ของ Color, Swatches เปนตน Palette ตาง ๆ จะถกจดเปนกลม ๆ สาหรบการซอนหรอแสดง Palettes นนใหคลกทเมนคาสง Window จากนนเลอก Palette ทตองการซอนหรอแสดง Palette ใดถกเปดใชงานอยจะมเครองหมายถก หนา Palette

Navigator Palette Navigator Palette เปน Palette ทใชสาหรบเปลยนขนาดมมมอง ทจอภาพตามความเหมาะสม ประกอบดวยสวนตาง ๆ ดงน




1. Proxy Preview Area คอสวนทแสดงถงขนาดของภาพในชนงาน กรอบสหมายถงขนาดของชนงาน

หากกรอบของ Proxy Preview อยรมสดของภาพแสดงวาภาพนนมขนาดพอดกบชนงาน 2. ตวเลขเปอรเซนตของภาพ คอสวนทใชกาหนดขนาดมมมองของภาพ ซงอยในรปแบบของเปอรเซนต

โดยคาของขนาดภาพจรงจะเทากบ 100 เปอรเซนต 3. Zoom Out & Zoom In คอสวนทใชกาหนดขนาดมมมองของภาพ ประกอบดวยสวนทใชกาหนด 3

สวน คอ 3.1 Zoom Out คอสวนทอยดานซายสด ใชสาหรบยอขนาดมมมองของภาพใหเลกลง 3.2 Zoom In คอสวนทอยดานซายสด ใชสาหรบขยายขนาดมมมองของภาพใหใหญขน 3.3 Zoom Slider คอสวนทเปนแถบเลอน หากเลอนทางดานซายจะยอขนาดมมมองของภาพใหเลก

ลง แตหากเลอนมาทางขวาจะขยายขนาดมมมองของภาพใหใหญขน Color Palette Color Palette คอ Palette ททาหนาทเปนจานส ซง Mode สทปรากฏในภาพจะเปนลกษณะการผสมใน Mode RGB มสวนประกอบตาง ๆ ดงน

1. Set foreground color คอสวนแสดงสของ foreground 2. Set background color คอสวนแสดงสของ background 3. RGB slider คอสวนทใชกาหนดคาของการผสมสใน Mode RGB ซงสามารถเลอนเพอปรบ

คาสไดจากแถบ slide หรอระบเปนตวเลข (0-255) เชน สดา คอ R=0,G=0, B=0 4. Sample color คอสวนสาหรบกาหนดคาสในลกษณะจมเลอกส

Swatches Palette Swatches Palette คอ Palette ททาหนาทสาหรบเกบสหลกๆ ทนยมใช สามารถเลอกนามาใชไดทนทและถาหากวาคณมสทตองการใชเปนประจา สามารถบนทกสนนไวใน Palette นได




การบนทกสทตองการไวท Swatches Palette สามารถทาไดโดยเลอกสทตองการ จากนนคลกเมาสทปมบนทกส

ใหมท Swatches Palette จะสามารถบนทกสทตองการได

Styles Palette Styles Palette คอ Palette ทมไวสาหรบเกบลวดลายอยางลวดเรว สามารถเลอกลวดลายจาก Palette นไปใชในภาพ จะทาใหภาพทคณวาดไวเปลยนไปตามลวดลายทเลอกไวทนท และยงสามารถสรางลวดลายใหขนมาเองไดดวย การใชงานนนสามารถทาไดโดยเลอกท Layer ทตองการจะทา Style แลวคลกเลอกท Style บน Styles Palette จากนน Layer จะเปลยนตาม Style นนๆ

History Palette เปน Palette ทแสดงขนตอนวธการตาง ๆ ทใชทางานกบไฟลภาพตามลาดบโดยสามารถยอนกลบไปยงการทางานตาง ๆ ในลาดบชนและยกเลกได ประกอบดวยสวนตาง ๆ ดงน 1. สวนทใชกาหนดขอมลของการใช History Brush Tool

เปนภาพทแสดงรายละเอยดของงานททาตามลาดบ 2. 3. History State เปนลาดบขนตอนวธการตาง ๆ ทไดกระทาลงไป 4. New Document คอสวนทใชสรางกระดาษทาการใหม โดยคดลอกภาพจากลาดบทชอย 5. New Snapshot คอสวนทใชสราง Snapshot ใหม 6. Trash Button คอสวนทใชลบขนตอนการทางานกบไฟลภาพในลาดบทเลอกอยออก




Layer Palette Layer Palette เปน Palette ทเกบชนงานหรอภาพทงหมด เรยกวา Layer ซงจะเรยงลาดบกอนหลง ทาใหเกดความสะดวกในการจดการแกไขโดยไมเกดผลกระทบกบชนงานหรอภาพอน ๆ โดยจะแกไขเฉพาะชนงานหรอภาพใน Layer ทเลอกเทานน สวนประกอบของ Layer Palette มดงน

1. Indicates Layer Visibility คอสวนทกาหนดการแสดงผลของ Layer หากมสญลกษณรปตาแสดงวาภาพทอยใน Layer ดงกลาวถกแสดงบน Work Area หากไมมแสดงวา Layer นนถกซอนหรอไมแสดงผล

2. Indicates if Layer is Linked คอสวนทแสดงวา Layer ใดกาลงถกทางาน Layer นน จะมสญลกษณรปพกน นอกจากนยงสามารถกาหนดให Layer อนเลอนตาแหนงตาม Layer ทกาลงทางานอยไดโดยการคลกให Layer อนเปลยนเปนสญลกษณรปโซ

3. Add a Layer Style คอสวนทใชใส Effect เชน แสง เงา ตาง ๆ ใหกบภาพใน Layer 4. Add a mask คอสวนทใชเพม Mask หรอเพม 1 Layer ซอนทบ Layer ทกาลงทางานอย โดยทง 2

จะถอเปน Layer เดยวกน 5. Create a new set คอสวนทใชสราง Folder สาหรบเกบ Layer ตาง ๆ เขาดวยกน 6. Create new fill or adjustment layer คอสวนทใชปรบคาส ความคมชด แสงและความสวางในแบบ

ตาง ๆ ของภาพใน Layer 7. Create a new layer คอสวนทใชสราง Layer ใหม 8. Delete layer คอสวนทใชลบ Layer 9. Layer Thumbnail คอสวนทแสดงวา Layer นนมภาพใดอย 10. Lock คอสวนทใช Lock ในรปแบบตางๆ 11. Opacity คอสวนทใชทาให Layer นนโปรงใส (ทง Fill และ Effect) 12. Fill คอสวนทใชทาให เฉพาะ Fill ใน Layer นนโปรงใส ซงไมรวม Effect ท Layer นนมอย




หมายเหต: แถบสนาเงนแสดงวากาลงทางานกบ Layer 2 การจดลาดบ Layer สามารถทาไดโดยนาเมาสคลกคางไวท Layer แลวลากไปยงตาแหนงทตองการ หรอใชเมนคาสง Layer -> Arrange

• Bring to Front คอ สง Layer ไปยงตาแหนงบนสดของทก Layer • Bring Forward คอ สง Layer ขนไปตาแหนงบน 1 ขน • Send Backward คอ สง Layer ลงไปตาแหนงลาง 1 ขน • Send to Back คอ สง Layer ลงไปตาแหนงลางสดของทก Layer แตยกเวน

Background Layer

การกาหนดพนท เพอแกไขและตกแตงภาพ (Selection)

Marquee Tool เปนเครองมอสาหรบการกาหนด Selection โดยคลกเลอก Marquee Tool จาก Tool box จะม ใหเลอกใชงาน 4 รปแบบตามความเหมาะสม

วธการใชงาน Marquee Tool

1. ใหคลกท Marquee Tool บน Tool Box หรอหากตองการเลอกรปแบบอนของ Marquee Tool ให คลกเมาสคางไว แลวคลกเลอกรปแบบทตองการสราง Selection

2. วางตาแหน ของ Cursor รป เพอกาหนดจดเรมสาหรบการสราง Selection 3. ใหคลกเมาสคางไวและลากเพอกาหนดขนาดของพนททตองการ แลวปลอยเมาส จะปรากฏ

เสนประ ของ Selection ดงภาพ




Marquee options เมอคลกเลอกใชงาน Marquee Tool ท Tool options bar เราจะสามารถกาหนดคณสมบตตาง ๆ ของ Marquee tool ไดดงน

1. การแกไข Selection จะมใหเลอก 4 รปแบบคอการกาหนดเลอก Selection ใหม การเพม ตดและลด Selection และการสราง Selection ดวยวธการตางๆ ดงน

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

2. Feather กาหนดความฟงเบลอของขอบ Selection ภาพ มคาตงแต 1 – 250 หากกาหนดคามากความฟง เบลอจะมากตาม

3. Style ของ Marquee Options ม 3 รปแบบคอ

• Normal เลอกขนาดอสระ ขนาดของ Selection จะเปลยนไปตามการเคลอนตาแหนงเมาส

• Constrained Aspect Ratio กาหนดขนาดของ Selection โดยยดหยนตามอตราสวนของความ กวาง (Width) และความสง (Height)

• Fixed Size กาหนดขนาดของ Selection ตามอตราสวนของความกวาง (Width) และความสง (Height) ทแนนอน

4. Width การกาหนดความกวางของ Selection 5. Height การกาหนดความสงของ Selection




18การสราง Fixed Size Selection

ถาตองการสราง Selection ขนาดกวาง 600 ยาว 80 Pixels ใหเปลยนชอง Style เปนแบบ Fixed Size และกาหนดความกวางและความยาวตามทตองการ

Lasso Tool

เปนเครองมอทสามารถสราง Selection ไดอยางอสระ มความยดหยนสง เมอคลก Lasso Tool ท Tool bar จะม

ใหเลอกทงหมด 3 รปแบบดงน 1. Lasso Tool เปนการสราง Selection อยางอสระ วธการใชงานเมอคลกเมาสคางแลวลากไปตามขอบของพนท Selection ทตองการ จนมาบรรจบทจดเรมตนแลวจงปลอยเมาสจะปรากฏเสนประของ Selection สามารถ กาหนดคณสมบตของ Lasso Tool ตาง ๆ ไดดงน

• Feather กาหนดความฟงเบลอของขอบพนท Selection • Anti-aliased กาหนดใหขอบของพนททเลอกมความเรยบยงขน ไมขรขระ

2. Polygonal Lasso Tool เปนการสรางพนทของ Selection ในลกษณะของรปหลายเหลยม คลกเมาสบนภาพเพอกาหนด จดเรมตนในครงแรกแลว ลากเมาสจะปรากฏเสนตอจากจดเรมตนกบปลายเมาส วธการใชงานเมอคลกเมาส

Selection ทเปนเสนตรงเชอมจากจดตนมายงจดปลายเมาสทคลก ใหทาแบบนเรอย ๆ เพอสรางเสนขอบของ Selection จนสดทายใหคลกเมาสบรรจบทจดเรมตนครงแรก จะเกด Selection ขน สาหรบการกาหนดคณสมบตจะเหมอนกบ Lasso Tool

3. Magnetic Lasso Tool เปนการสรางพนทของ Selection อยางอสระและรวดเรวในลกษณะของแมเหลกทดดเขาหาส โดย

Magnetic Lasso Tool จะใชความแตกตางระหวางสทเลอกกบสของ Background เปนตวกาหนดขอบเขต พนท Selection วธการใชงานเมอคลกเมาสเพอกาหนดจดเรมตนแลว ใหปลอยเมาสแลวลากเมาสตาม ขอบเขตพนททตองการเลอก Magnetic Lasso Tool จะเลอกขอบเขตพนท Selection เองโดยอตโนมต จน สดทายใหคลกเมาสบรรจบทจดเรมตนครงแรก จะเกด Selection ขน คณสมบตของ Magnetic Lasso Tool มเพมจาก Lasso Tool ไดดงน




1. W 0 pixels เปนการกาหนดใหโปรแกรมทาการตรวจสอบหาขอบเขตของพนทท

2. E ทเลอกอยระหวางสท กนมาก มคาตงแต 0-100 pixels หากคาความถมากจะทาใหมการกาหนดจดในแตละชวงของการ

กาหนดพนทของ Selection โดยเลอกบรเวณทมคาสใกลเคยงกน วธการใชงานคอคลกทปม

idth มคาตงแต 1-4เลอก นบตงแตจดทเมาสชอยไป X pixels เพอกาหนดขอบเขต dge Contrast มคาตงแต 0-100% หากมคามากจะทาใหเสนขอบของพนทContrast

3. Frequencyเลอกมาก ทาใหโปรแกรมสามารถเลอกพนทอยางมความถกตองมากขน

Magic Wand Tool

บน Tool box แลวคลกเลอกพนททตองการสราง Selection นอกจากนแลวยงสามารถกาหนดคณสมบตของ Magic Wand Tool ไดดงน

1. ใกลเคยงกบสทถกเลอก

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

All Layers เลอกสโดยมองทก Layer เปนเหมอน Layer เดยว หากไมถก Check ไว หมายถงใช

tion ในภาพทงไป วธการใชงานคอ

คลกทปม

Tolerance มคาใหกาหนดตงแต 0 – 255 pixels เปนคาของจานวนสท2. Anti-aliased กาหนดใหขอบของพนททเลอกมความเรยบยงขน ไมขรขระ

Contiguous สามารถทาการเลอกบรเวณสทใกลถา ไม

4. Use Magic Wand Tool เฉพาะ Layer นนเทานน

Crop Tool

กาหนดพนทของ Selection โดยตดสวนทเหลอทไมไดอยในพนทของ Selec

เม

บน Tool box แลวคลกเมาสคางไวจากนนลากเมาสเพอกาหนดพนทของ Selection แลวจง

ปลอยเมาส อพรอมทจะตดสวนทเหลอออก ใหคลก ปม บน Tool options bar หรอ ปม เพอยกเลก นอกจากนเรายงสามารถกาหนดคณสมบตตาง ๆ ของการตด ดงน

1

ก

จะถกตดออก

. Cropped Area เลอกผลลพธของภาพทตด • Delete ตดภาพโดยลบสวนทเหลอออ• Hide ตดภาพ โดยซอนสวนทเหลอเอาไว

2. Shield cropped area แสดงสบนพนทสวนทเหลอท




3. Color สทจะแสดงบนพนทสวนทเหลอ 4. Opacity คาความโปรงแสงของสบนพนทสวนทเหลอ 5. Perspective ปรบพนทการตดใหไดภาพทมมต

ฐานของ Selection คาสงพน

• All กาหนดพนท Selection โดยใชพนทของรปภาพ

การใช Transform เพอปรบเปลย

คลกทเมนคาสง Edit ทแถบ Menu ba น 1 ขน

ารมองแบบ ก)

มนาฬกา Rotate 90? CCW หมน 90 องศาทวนเขมนาฬกา

ลบจากซายเปนขวา

การใชงาน Foreground และ Background Color

การใชงานในสวนของ Foreground และ Background Color สามารถทาไดทสวนของ Toolbox ดงรป

าหนดพนท Selection หลงจากไดกไป

• Inverse เปนการเปลยนพนทของ Selection จากทกาหนด

ทงหมด • Deselect ยกเลกการกาหนดพนท Selection

Reselect ยอนกลบไปก• ยกเล

ไวใหเปน พนทตรงขาม

นพนท Selection

r จากนนเลอกคาสง Transform- Again กลบสรปแบบเดมกอนหนา- Scale ปรบเปลยนแบบ Scale ตามแนวตง แนวนอนและแนวทแยง- Rotate หมนพนททเลอก - Skew ปดเกลยวพนทเลอก - Distort การบดเบอนพนทเลอก - Perspective ปรบขนาดของพนทเลอกใหมลกษณะก

าว ความลPerspective (แบบมมต ความกวาง ความย- Rotate 180? CW หมน 180 องศา

Rotate 90? CW หมน 90 องศาตามเข- - - Flip Horizontal ก- Flip Vertical กลบจากบนลงลาง




สามารถเปลยนสไดโดยคลกทกรอบ Foreground หรอ Background จะปรากฏ Color Picker ใหเปลยนส

การใชงาน Type Tool

สามารถสรางขอความไดทงในแนวนอนและแนวตง การสรางขอคว ตลามแ ะครงโปรแกรม Adobe Photoshop จะสราง Layer ใหมอตโนมต ลกษณะของขอความจะม 2 รปแบบคอ

1. แบบ Point Type จะมรปแบบเปนคาหรออกษรสน ๆ 1 บรรทด โดยกาหนดจดเรมตนของ

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

2. แบบ Paragraph Type จะมรปแบบเปนขอความทมหลายบรรทด โดยจะอยภายในขอบเขต

ทกาหนดเดยวกน (Bounding box) โดยกาหนดจดขอบเขตของขอความทใส โปรแกรมจะสราง Type Layer ขนมา และสามารถพมพขอความและจดเปน Paragraph ไดจาก Paragraph Palette เมอพมพขอความเรยบรอย ใหคลกทปม เพอตกลง หรอคลกปม

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

แถบส แลว จงปรบแกไขขอความ หรอเปลยนแปลงคณสมบตตาง ๆ ของขอความบน Tool options bar เมอ

แกไขเรยบรอยแลวจง คลกปม




หากตองการตวอกษรทมลวดลายของภาพ Background เชน สามารถทาไดโดยใชสราง Selection ของตวอกษร ซงมวธใหคลกทปม เพอเลอก Horizontal Type Mask Tool หรอ Vertical Type Mask Tool แลวพมพขอความทชนงาน เมอพมพเสรจ จะเกด Selection ทเปนตวอกษร จากนน สามารถทจะคดลอกลวดลายภาพทตองการตาม Selection ของขอความนนได

Warp Text เมอคลกปม จะปรากฏ Dialog สาหรบกาหนดคาเพอปรบแตงรปทรงของขอความ

ตวอยาง Warp Text







26การใชงา

นใสวางซอนกนเปนลาดบของรปภาพ ชวยแยกการทางานให ชดเจน โดยการทางานแตละครงจะมผลกบ Layer ทเลอกอยเทานน การมองจะอยในลกษณะมองจากดานบนลงมา ดานลาง วธการเรยกใชงาน Layer คลกทเมนคาสง Window ทแถบ Menu bar เลอกคาสง Show Layer ถาหากพบวา Hide Layers แสดงวา Palette Layer ถกแสดงแลว

Active Layer คอ Layer ทกาลงถกทางานอย สามารถเลอก Layer ไดจากการคลกทแถบ Layer จากนนชอง Indicates if Layer is จะมสญลกษณรปพกนปรากฏ หากตองการเคลอนยาย Layer โดยให Layer อนเคลอนยายตาม ใหคลกทชอง Indicates if Layer is ใหเปนรปโซ อเชอม Layer เขาดวยกน

ทชอง Indicates Layer Visibility หากปรากฏสญลกษณรปตาหมายความวา Layer นนถกแสดงอย หาก ต ไมใหแสดงผล ใหคลกทชอง Indicates Layer Visibility สญลกษณรปตาจะหายไป

น Layer

ลกษณะการทางานของ Layer เปนเหมอนแผ

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

Layer ท ตองการแลวปลอยเมาส

องการซอน Layer

การสราง Layer ขนใหม ใหคลกทปม หากตองการคดลอก Layer ใหคลก Laye ทตองการแลวปลอย

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

รอตกแตงภาพบน Layer

ามโดยใชการกาหนดคณสมบตของทง 3 ขอทกลาวมา

r ล

การ Lock Layer เปนการกาหนดคณสมบตตาง ๆ เพอบงคบไมให Layer ถกเปลยนแปลงหรอไดรบผลกระทบใด ๆ ม

ทงหมด 4 รปแบบดงน 1. Lock transparent pixels หามไมใหเตมสหรอปรบแกสลงไปใน pixels ทโปรงแสงบน Layer ได 2. Lock image pixels หามไมใหมการแกไขห3. Lock position หามไมใหมการเคลอนยายตาแหนงของ Layer 4. Lock all ห




การ Merge Layer เปนการรวมชนของ Layer ตงแต 2 ชนขนไปมาไวรวมกน โดยคลกทปม แลวจะปรากฏ Dialog

สาหรบเลอกแบบตาง ๆ ของการ Merge Layer ดงน

- Merge Down หรอ Merge Linked เปนการรวม Layer ทใชงานอยกบ Layer ทอยลาดบถดลง โดยถา Layer

ปโซ จะมขอความวา Merge Linked แตหากไมมรปโซจะมขอความวา Merge Down

แสดงหรอมองเหนไดทงหมด -

ckground และจะลบ Layer ทถกซอน ทงไป ากตองการเปลยนชอของ Layer ใหคลกเลอก Layer Properties จะปรากฏ Dialog ของ Layer ซง สามารถ

เปลยนชอของ Layer ได และแถบสได

ทอยลาดบถดไปมสญลกษณ ร

- Merge Visible เปนการรวม Layer ทถก

Flatten Image เปนการรวม Layer ทกลาดบชนเปน Layer เดยว โดยมชอวา Baห

การจด Set ของ Layer เปนการรวบรวม Layer ตาง ๆ มาไวเปนกลม Layer Set สามารถใชคาสงตาง ๆ เหมอน Layer ทว

ไป เชน การด คดลอก เคลอนยาย และการเปลยนลาดบ ยกเวนคาสงบางคาสง เชน Layer Effect ดงนนใช งานคาสงใด ๆ ของ Layer Set จะเกดขนกบ Layer ภายในทก Layer

การสราง Layer Set คลกทปม เพอสราง Set หลงจากนนใหคลกเลอก Layer ทตองการ จดเกบคางไว แลวลากท Layer Set จากนนใหปลอยเมาส หากดบเบลคลกท Layer Set จะปรากฏ Dialog ของ Layer Set Properties ซงสามารถเปลยนชอของ Layer Set ได และแถบสได




การทาภาพโดยใช Filter

ฟลเตอร (Filter) คอการตกแตงภาพดวยเทคนคพเศษ ทสามารถปรบเปลยนรปแบบของภาพตามความตองการของงาน เราสามารถใชงาน Filter ไดโดยเลอก Menu > Filter > เลอกใช Filter ทตองการ ตวอยางการใช Filter

ท Menu Bar จะมปม Filter(1) อย เมอกดแลวจะม Filter Menu ปรากฏขนเลอนเมาสไปยง Filter “Blur”(2) จะมเมนยอยเพมขนมา ใหกดเลอกท “Redial Blur”(3)




เมอเลอกเสรจแลวจะปรากฏหนาจอการปรบเปลยนลกษณะของ Filter สามารถทจะกาหนดไดตามตองการ (ใน Filter แตละตวนน หนาจอการปรบเปลยนลกษณะของ Filter จะไมเหมอนกน) เสรจแลวกดปม OK เพอจบขนตอนการทางานของ Filter

จะไดภาพทมการตกแตงดวย Filter: Radial Blur ออกมา ทงน ถาใช Filter อนรปงานทปรากฏ จะตางกนออกไป

ตวอยาง Filter ทนาสนใจ







การใชงาน Layer Style

คลกทเมน Layer > Layer Style > Blending Options จะปรากฏหนาตางดงภาพขางลาง

(1) คอ Style ทตองการใชกบ Layer ทเราเลอกไว จะมใหเลอก 10 แบบจากบนลงลาง (2) คอ การกาหนดคาตางๆ ของแตละ Style ซงจะแตกตางกนไปในแตละ Style

ตวอยางการใช Layer Style




การเปลยนรปรางของรป (Transform)

ลยนแปลง Layer ในรปแบบตางๆไดเชน การยอ/ขยาย การหมนภาพ การบดภาพ ดวยคาสง Transform ลกษณะของ Transform

เราสามารถเปโดยคลกเลอก Edit > Transform > (เลอก Transform Function ทตองการ)

การป ss/Contrast)

การปรบความสวาง-ความมดของภาพ และการตดกนของสทชดเจนขนนน สามารถทาไดโดยใชคาสง trast โดยเลอกคลกท Image > Adjust > Brightness/Contrast

รบคาความสวาง /ความคมชด (Brightne

Brightness/Con




การปรบขนาดของชนงาน

Image Size Image Size คอการ ลด/ ขยายรปภาพโดยสามารถใชคาสงนไดจากเมน Image > Image

าตางทใหเรากาหนดขนาดของภาพขนมาดงรป Size… จะปรากฏหน

(1) Width(กวาง) และ Height(สง) ของรปภาพ สามารถกาหนดไดตามตองการ โดยมหนวยใหเลอกสองแบบคอ Pixel และ %

Proportions Sign เมอสญลกษณนปรากฏดงรป แสดงวาเมอเราไดกาหนด(2) Constrain ขนาดภาพไวดานใดดานหนงแลว โปรแกรมจะกาหนดสดสวนของดานทเหลอใหเอง(อตราสวนทเทากน) ผลทไดกคอ ไมวาจะยอหรอขยาย รปภาพทออกมากจะมอตราสวนของ กวาง x สงเทาเดม

(3) Constrain Proportions Check Box จาก (2) เมอเราไมตองการ ยอ/ขยาย รปภาพให

เหมอนอตราสวนเดมใหคลกท Check Box ออก เครองหมาย จก

ะหายไปหลงจากนนการกาหนดขนาด

Canvas

รป โดยเพมพน Background และสามารถขยายรปโดย

วางและสงสามารถกาหนดไดตามตองการ

Size การ Canvas Size คอการลด/ ขยายพนท

กาหนดทศทางได ดงรป

1. Current Size ขนาดปจจบนของงาน 2. New Size ขนาดทเพมขนจากขนาดของงาน




3. Relative เปนคณสมบตบอกคาขนาดของ New Size เครองหมาย คาในชอง Width และ Height จะเปน 0 สามารถเพมพนทงานโดยไมตองรวมคา Current Size 4. Anchor ททางทตองการเพมขนาดใหไปในทศทางทตองการ ตวอยางการ Canvas Size

การตดกรอบของรป (Crop)

การ Crop คอ การตดกรอบภาพเอาเฉพาะทตองการ นอกจากรปภาพจะมขนาดเลกเกนไปแลว บางครงรปภาพกมขนาดใหญเกนไปไดเชนกน เราสามารถตดกรอบภาพ (Cropping) ใหเหลอเฉพาะทตองการไดโดยใชเครองมอสองชนดน ดงน วธท 1 การตดกรอบภาพโดยเครองมอ Rectangular Marquee Tool

1. เลอกเครองมอ บนแถบเครองมอและกาหนด Feather ใหเทากบ 0 กอน 2. สราง Selection ทภาพในสวนทตองการตดกรอบ 3. เลอกเมน Image -> Crop จะไดรปจากการ Cropping

วธท 2 การตดกรอบภาพโดยเครองมอ Crop 1. เลอกเครองมอ บนแถบเครองมอ 2. สรางพนททตองการตดกรอบภาพ สงเกตวาจะเกดแถบสเทาขนบรเวณรอบนอกขอบกรอบทสราง

ขนมา บรเวณสเทาคอ บรเวณของรปภาพทถกตดทงนนเอง 3. ปรบแตงพนททเลอก 4. คลกปม เพอยนยนการตดกรอบรปตามตองการ (กรณยกเลกใหคลกปม แทน)




ตวอยางการ Cropping




ตอนท 3 เทคนคการสราง และออกแบบ Website ดวย

Adobe Dreamweaver CS3

องมอสาหรบสรางเวบเพจ และ ดแลเวบไซต ทมประสทธภาพสง เปนทนยมใชขอ

ก สะดวกย น

ความสาในการเข พมพงานในโปรแกรม Text Editor ทวไป คอวามนจะเรยง

ชดซายบนตลอดเวลา ไมสามารถยาย หรอ นาไปวางตาแหนงทตองการไดทนทเหมอนโปรแกรมกราฟก เพราะฉะนนหากเราตองการจดวางรปแบบตามทเราตองการ กใชตาราง Table เขามาชวยจดตาแหนง ซงเมอมการจดวางรปแบบทซบซอนมากขน การเขยนภาษา HTML กซบซอนยงขนเชนกน โปรแกรม Dreamweaver อาจจะไมสามารถเขยนเวบไดตามทเราตองการทงหมด วธการแกไขปญหาทดทสดคอ ควรจะเรยนรหลกการของภาษา HTML ไปดวย ซงถอวาเปนสงทจาเปนมากสาหรบผทตองการประกอบอาชพ Webmaster แบบจรงจง อาจจะไมตองถงกบทองจา Tag ตาง ๆ ไดทงหมด แตขอใหร เขาใจหลกการกพอแลว เพราะหลาย ๆ ครงทเราจะเขยนเวบใน Dreamweaver แลวกลบไดผลผดเพยนไป ไมตรงตามทตองการ กตองมาแกไข Code HTML เอง และความสามารถของ Dreamweaver สรปไดดงน

1. สนบสนนการทางานแบบ WYSIWYG (What You See Is What You Get) หมายความวา เวบทเรายนหนาจอ Dreamweaver กจะแสดงแบบเดยวกบเวบเพจจรงๆ ชวยใหเราเขยนเวบเพจงายขน ไมตองเขยน

Code HTML เอง 2. มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง 3. สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java, ASP, PHP, CGI, VBScript 4. มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server เพอทาการเผยแพรงานทเราสรางใน

อนเทอรเนต โดยการสงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย เชน WS FTP 5. รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงานรวมกบโปรแกรม Flash, Fireworks

การใชงานพนฐาน (สงทควรทราบเบองตน )

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

2. หากตองการเพมลกเลน หรอ เทคนคพเศษ เชน Effect ตาง ๆ ตองนาภาษา JavaScript าเสรม TML อกท 3. การจดรปแบบใน Code เชนการขนบรรทดใหม การเวนวรรค ไมมผลตอการแสดงผลทาง Web

Browser

รจกกบ Dreamweaver Dreamweaver ถอไดวาเปนเครง Web Master อยางกวางขวาง ซงเปนโปรแกรมสาหรบเขยนภาษา HTML โดยเฉพาะ พรอมทง

สามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมาย โดยทผใชไมจาเปนตองรหลกภาษา HTML มากนซงชวยประหยดเวลา และ ทางานได งข

มารถของ Dreamweaver ยนเวบเพจ จะมลกษณะคลายกบการ

เข

มH




4. การขนบรรทดใหม ตองใช Tag <BR> หรอ กดปม Shift+Enter 5. การขนยอหนาใหม ตองใช Tag <P> หรอ กด trl+ Shift + Spacebar 7. หลกการอาน . ไฟล HTML และ Script ตางๆ สามารถเปดแ

9. การ ขอความตามตองการ หรอ คาตาง ๆ เพมเตม

การเรมตน

หลงจาตอไปน

1.

ปม Enter 6. การเวนวรรค ตองใช Tag พเศษ คอ หรอ กดปม C Tag ของภาษา HTML จะอานคาจาก Tag ทอยดานในกอน 8กไขในโปรแกรม Text Editor ทว ๆ ไป ไมจาเปนตองแกไขใน Dreamweaver เพยงอยางเดยว

แทรกขอความ และ การปรบแตงคาตาง ๆ ใหคลกตาแหนงทตองการ แลวพมพใหเลอกขอความเมอตองการกาหนด

ใชงาน Dreamweaver

กททาการตดตง Dreamweaver เรยบรอยแลว กสามารถเรยกใชงานโปรแกรมดวยวธการ

Click Mouse ทปม กคาสง All Program > เลอกตามรป 2. เลอ




สวนประกอบของ

• แถบคาสง (Menu Bar) เปนแถบทใชเกบคาสงทงหมดของโปรแกรม

• แถบวตถ (Object Palette) เปนกลมเครองมอตางๆ ทใชในการควบคมวตถ บนชนงาน เอกสารเวบ เชน เสนกราฟก (Horizontal Rule), ตาราง, รปภาพ, เลเยอร (Layer)

• แถบแสดงสถานะ (Status Bar) • แถบควบคมการทางาน (Properties Palette) เปนรายการทปรบเปลยนได ตามลกษณะการเลอก

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

• สวนของ Panel Group เปนกลมของแถบเครองมอทสามารถเรยกใชงานไดอยางรวดเรว เพอใหงายในการสราง Application บนอนเทอรเนต เชน การแทรก Code ของ JavaScript และ VBScript ลงในเวบเพจไดอยางงายๆ โดยสามารถเรยกใชงานไดจาก Panel Group

weaver

Dreamweaver

• แถบคาเครองมอ (Toolbar) รวบรวมปมคาสงทใชงานบอย

สวนประกอบตางๆ ของหนาจอ Dream

แสดงสวนประกอบของ Dreamweaver

หนาจอแสดงผล (Document Windows)

หนาตางการทางานของ Dreamweaver สามารถเลอกหนาตางการทางานได 3 รปแบบ โดยการคลไอคอนทอยในแถบเครองมอ Toolbar ดงน

ก

Show Code View เปนหนาตางทใหแสดงเฉพาะโคด HTML ของหนาเวบเพจท กาลงทางาน




Show Code and Design View เปนหนาตางทแสดงทงโคด HTML และหนาเวบเพจทกาลงทางาน

Show Design View ใหแสดงแตหนาเวบเพจไมตองแสดงโคด HTML

การเรมกาหนดโครงรางของเวบ

กอนดาเนนการสรางเวบเพจ ขนแรกควรกาหนดใหขอมลตางๆ ทเกยวของอยใน Folder เดยวกน เพองายตอคนหาและจดเกบ ตวอยางเชนทาเวบเพจของหนวยงานกอนอนเราควรสราง Folder ชอของหนวยงานกอนอาจเปนภาษาองกฤษหรอภาษาไทยกได แลวใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder ยอย เพอใชสาหรบแยกเกบไฟลตาง ๆ เปนหมวดหม เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ




เรมตนสรางเวบไซต

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

1. เลอก เมน Site > เลอกคาสง New Site 2. เลอกแทบ Advanced

การตงคาเพอใหอานภาษาไทยได

หลงจากททาการตดตงโปรแกรม Dreamweaver แลว โปรแกรมจะไมรจก Font ภาษาไทย เนองจาก Dreamweaver ไมสนบสนนภาษาไทย ดงนนเราตองตด Font ภาษาไทยกอน ซงสามารถ Download ไดท http://www.thaiware.com/softwae/develop/DV00250.htm ซงเปนโปรแกรมทถกพฒนาจากคนไทย เมอ

Download ไดแลวใหทาการตดตงเพมเตม เพอใหโปรแกรมสามารถอานภาษาไทยได หลงจากตดตง Font ภาษาไทยลงเครองแลว เมอเปดโปรแกรม Dreamweaver มาใชงานใหเลอกคาสง

ดงน เพอตง Font ใหมใหเอกสาร 1. เลอกเมน Edit > เลอกคาสง Preferences 2. เลอก Fonts > Font Setting > เลอก Thai

ตง




การเพม Font เพอใชงาน

เราสามารถเพม Font เพอใชงานได โดยการนา Font จาก Windows มาใชงาน Dreamweaver โดยเลอกคาสงดงน

1. Text > Font > Edit Font List 2. เลอก Font เชน Microsoft Sans Serif




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

กอนเรมกาหนดรายละเอยดตางๆ ใหหนาเวบ เราควรเรมโดยการกาหนดรายละเอยดของหนาเวบกอน โดยมขนตอนดงน

1. เลอกเมน Modify > Page Properties 2. ปรบเปลยนขอมล

การสราง

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

จ กอนอนเรามาทาความรจกกบสวนประกอบของตารางกอน

Table

การใชตารางเหสดสวน ควรจดระบบการนาเสนอขอมลของหนาเวบเพจโดยการใชตารางเปนตวจดการในการจดวา

ขอมลในแตละหนาเวบเพ




การกาหนดขนาดของเซลล

1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอกตารางไวกอนแลว) ให Click ท Properties เพอกาหนดขนาดของเซลล ดงรป

การเลอกเซลล และ การกาหนดสพน

1. ให Click เลอกเซลลทตองการ หรอ Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอกตารางไวกอนแลว)

2. ให Click ท Properties เพอกาหนดส โดยเลอกท BG แลวกาหนดเลอกส (ใหเลอกสเขยว) หรอสามารถพมพรหสสได







การแทรกแถวและคอลมน การแทรกแถว

1. นาเคอรเซอรไปวางยงตาแหนงทตองการจะแทรกแถว 2. Click Mouse ปมขวาจะปรากฎเมนยอย ใหเลอก Table > Insert Rows or Columns.. 3. จะม Dialog Box ใหกาหนดรปแบบของการแทรกตารางวา จะเลอกแทรก Rows หรอ Column (ใหแทรก Rows จานวน 2 Rows) 4. กาหนดการแทรก Rows ใหแทรกกอน (Above the Selection) หรอหลง (Before the Selection) ได 5. ในกรณทตองแทรก Column จะมใหแทกกอน (Before current Column) หรอหลง (After current Column)




แสดงขนตอนการแทรกแถวและคอลมน

แสดงกา s จานวน 2 Rows หนาจอทไดแสดงดงรป

รแทรก Column หลงจากแทรก Row




การพมพขอความและการกาหนดตวอกษร

การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอใหสามารถอานไดงาย และเรา

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

เรานามากาหนดใหกบขอความได แบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมในเครอง PCและเครอง MAC

• S นทกาหนดไวคอ 3 • C

สามารถจดรปแบบแหนาตาง Properties โดยมรายล

• Format เปนรปแบบตวอกษรสาเรจท• Font รป

ize ขนาดของตวอกษร ขนาดมาตรฐาolor กาหนดสใหตวอกษร

การเชอมโยง (Link)

การเชอมโยงบนเวบเพจมดวยกนหลายรปแบบ อาจแบงตามการใชงาน หรอตามลกษณะของการเชอมโยงภายในเวบเพจ และการเชอมโยงภายนอกเวบเพจ แตถาแบงตามวตถประสงคของรปแบบการใชงานจะแบงการเชอมโยงเวบเพจ ออกเปนดงน

การเชอมโยงภายในเวบเพจเดยวกน การเชอมโยงภายในไซตเดยวกน

การเชอมโยงไปยงเวบไซตอน

1. การเชอมโยงดวย e-Mail 2. การเชอมโยงไปยงไฟล Download 3. การเชอมโยงดวย Map Link

1. ทาแถบสคลมขอความทใชเปนจดลงค

การทาลงคเชอมไฟล

การทาลงคเชอมไฟล สามารถทาไดหลายฟอรแมต ทงไฟลสกล HTML และอนๆ โดยไฟลอนๆ จะทางานในลกษณะ Download ไฟล

2. สงเกตทแถบ Properties จะเหนรายการ Link .. พมพชอไฟลทตองการใหลงค




ชอไฟลอาจจะเปนไฟล .html หรอ ไฟลใดๆ กได โดยจะตองระบ "นามสกล" ของไฟลดวยเสมอ (หมายเหต ระวงเรองพมพชอไฟลตวพมพใหญ ตวพมพเลก ถอวาเปนคนละตวกน) สามารถใชปมสญลกษณรปแฟมส

ลอง เลอกไฟลได เมอกาหนดชอไฟลทตองการลงคจากรายการ Link เรยบรอยแลว ใหนาเมาสมาคลกในพนททางาน เพอยนยนการกาหนดลงค การยกเลกลงค 1. ใหคลกเมาส ณ จดลงคเดม 2. ลบรายชอไฟลออกจากรายการ Link การทาลงค

1. ทาแถบสคลมขอความทตองการ 2. สงเกตทแถบ Properties จะเหนรายการ Link 3. พมพคาบงคบในการทาจดลงคเพอสงเมลคอ mailto: แลวตามดวย E-Mail Address ของผจดทาเอกสารเวบ (หมายเหต ระวงเรองพมพชอไฟลตวพมพใหญ ตวพมพเลก ถอวาเปนคนละตวกน และใหพมพตดกนทงหมด) ตวอยาง ต งการทาลงคเพอใหสงเมลไปยง http://ictcenter.spu.ac.thใหระบคาดงน

เห

อ

รปแสดงการเชอมโยงกบ e-Mail

ก ลงคเรยกเวบไซตอน ดวยคาบงคบ คอ http://ชอเวบ ทงนสามารถระบ

Ta

ก

1.. as Template แลว click ปม Save

ารทาจดใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบ

rget =_blank เพอเปดหนาตางใหมในการแสดงผล

ารสรางเทมเพลตจากหนาเวบทออกแบบไวแลว

เลอกคาสง File > Save as Template เพอ save file หนาเวบเพจทเราไดออกแบบไวเปนไฟลเทมเพลต ตงชอไฟลเทมเพลตในหนาตาง Save2




3. เมอเปดดหนาตาง Template (เปดหนาตางนไดโดยเลอก Windows > Template) จะแสดงไฟลเทมเพลตทเราสรางเกดขน

เมอเปดดหนาตาง Template (เปเกดขน

รปแสดงการเกบข

ดหนาตางนไดโดยเลอก Windows >Template) จะแสดงไฟลเทมเพลตทเราสราง

การกาหนดพนททเปลยนแปลงไดในเทมเพลต

1. เปดหนาเทมเพลตเลอกเมน Insert > Template Object > Edit Region 2. กาหนดชอเรยกพนททสามารถเปลยนแปลงได แลว click mouse ปม ok 3. ชอทต งจะปรากฎในบรเวณทสามารถเปลยนแปลงได ซงในขณะทเราเปดเทมเพลตเราจะแกไขไดทงพนททกาหนดใหเปลยนแปลงได และพนทลอคไว แตเมอใดทเรานาเทมเพลตนไปใชกบหนาเวบเพจ หนาเวบเพจนนจะแกไดเฉพาะพนททถกกาหนดไวใหเปลยนแปลงไดเทานน

ve file หนาเวบเพจทเราไดออกแบบไวเปนไฟลเทมเพลต

อมลข

ตงชอไฟลเทมเพลตในหนาตาง Save as Template แลว click ปม Save

เลอกคาสง File > Save as Template เพอ sa

องเทมเพลต




รปการเปลยนแปลงขอมลเทมเพลต

เปดหนาเทมเพลตเลอกเมน Insert > Template Object >

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

กาหนดชอเรยกพนททสามารถเปลยนแปลงได แลว click mouse ปม ok

ไปใชกบหนาเวบเพจ หนาเวบเพจนนจะแกไดเฉพาะพนททถกกาหนดไวใหเปลยนแปลงไดเทานน

Edit Region




การนาเทมเพลตมาใชงาน

1. เปดหนาเวบเพจเปลาขนมา 2. เลอกแทบ Template

เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกนามาเพมเขาไปในหนาเวบใหม ในสวนทเปนเทมเพลตเราไมสามารถเขาไปแกไขได แตเราสามารถออกแบบหนาเวบเพจในสวนทแกไขไดเทานน

รปการเลอกเทมเพลตทจะนามาใชงาน

รปการนาเทมเพลตมาใชงาน




รปแสดงหนาจอเมอเปดเทมเพลตมาใชงาน เลอกชอเทมเพลตทตองการ และ click mouse ปม Select เนอหาทมในเทมเพลตจะถกนามาเพมเขา

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

ารปรบปร

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

1. เปดเทมเพลตทสรางไวแลวขนมาทจะปรบปรง 2. ทาการแกไขเทมเพลตตามความตองการ เสรจแลวทาการ Save 3. Click Mouse ปม Yes เพอปรบปรงหนาเวบเพจทใชเทมเพลตนทงหมดตามการเปลยนแปลงท

เกดขน โดยในชอง Lock in ใหเราระบเพมเตมวาจะกาหนดใหปรบปรงไฟลทใชเทมเพลตในเวบไซตทเราเลอก หรอใหปรบปรงทกไฟลทใชเทมเพลตในเวบไซตทเรากาลงเปดอยนกได

4. จากนนจะมรายงานผลการ Update ไฟล Click Mouse ปม Close เพอปดหนาตางน หากในการแกไขเทมเพลตเราไมไดกาหนดใหการเปลยนแปลงนมผลกบหนาเวบเพจอน แต ตอมา

ภายหลงตองการใหมผล กทาไดโดยเลอกคาสง Modify > Templates > Update Pages

ก งแกไขเทมเพลต




รปการ Save เทมเพลตเมอมการปรบปรงแกไข

Education

เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น