สารบัญ - rms.ptl.ac.thrms.ptl.ac.th/files/05522_16020417173900.pdf · สารบัญ (ต่อ) บทที่ 7 การก าหนด Dreamweaver Site.....28

สารบญ บทท 1 กระบวนการพฒนาเวบไซต....................................................................................................... 1

อยากเปนเวบมาสเตอรตองเตรยมตวอยางไร ........................................................................... 1 ผทเกยวของในการพฒนาเวบไซต ............................................................................................ 1 ขนตอน และกระบวนการพฒนาเวบไซต ................................................................................. 2

บทท 2 การเรมตนในการออกแบบเวบไซต............................................................................................ 3 การจดระบบขอมลในเวบไซต .................................................................................................. 3 ไฟลภาพกราฟกทน ามาใชในการท าเวบ ................................................................................... 3 การแสดงภาษา ....................................................................................................................... 5 การก าหนดชอไฟล และนามสกลของไฟลเอกสารเวบ .............................................................. 5 หลกเกณฑในการเลอกภาพ Graphic ...................................................................................... 6 หลกเกณฑการใช Multimedia ............................................................................................... 6 หลกเกณฑในการสรางเอกสาร เวบเพจ ................................................................................... 6 หลกเกณฑในการน าเนอหาหรอ Software จากภายนอกมาแสดงบน เวบไซต ......................... 7

บทท 3 การออกแบบเวบไซต ................................................................................................................ 8 แนวคดในการออกแบบ ........................................................................................................... 8 หลกในการออกแบบเวบไซต ................................................................................................... 9 หลกการออกแบบเวบเพจ ....................................................................................................... 12

บทท 4 การออกแบบระบบเนวเกชนส าหรบเวบ .................................................................................... 13 รปแบบของระบบเนวเกชน ..................................................................................................... 13 ระบบเนวเกชนทมประสทธภาพ .............................................................................................. 14

บทท 5 Macromedia Dreamweaver ................................................................................................ 15 System Requirements........................................................................................................ 15 ขนตอนในการตดตง โปรแกรม Dreamweaver ...................................................................... 16 ขนตอนเปดใชงานโปรแกรม Dreamweaver .......................................................................... 20 รจกกบโปรแกรม Dreamweaver ........................................................................................... 21 สวนการท างานเบองตนในโปรแกรม Dremweaver ................................................................ 22

บทท 6 การก าหนดคาเรมตน Dreamweaver ...................................................................................... 25 การก าหนด Font ................................................................................................................... 25 การตงก าหนดคาของเอกสารเรมตน ........................................................................................ 26 การตงคาไฟลเอกสารเรมตน.................................................................................................... 27 ก าหนดคา Title เพอใชแสดงใน Title bar บนโปรแกรมเวบเบราเซอร.................................... 27

สารบญ (ตอ) บทท 7 การก าหนด Dreamweaver Site ............................................................................................. 28

การสราง Site ......................................................................................................................... 28 บทท 8 การใสเนอหาใหกบเวบเพจ ....................................................................................................... 30

การขนบรรทดใหมในโปรแกรม Dreamweaver...................................................................... 30 การจดรปแบบตวอกษร โดยการก าหนดคา Property ............................................................. 30 ขนตอนในการใสอกษรพเศษแบบตางๆ ................................................................................... 31 ขนตอนการแสดงผลเวบเพจบน Browser ............................................................................... 32

บทท 9 การใสรปภาพใหกบเวบเพจ ...................................................................................................... 33 ขนตอนในการแทรกรปภาพลงบนเวบเพจ ............................................................................... 33 การก าหนดคณสมบตของรปภาพ ............................................................................................ 34

บทท 10 การเชอมโยงเอกสาร (Link) .................................................................................................... 35 การท า Link............................................................................................................................ 35

- การท าเมนขอความ Link .......................................................................................... 35 - การท าเมนรปภาพ Link ......................................................................................... 35

ก าหนดลกษณะการเปดหนาเวบเพจ หลงจากคลกท Link ....................................................... 36 บทท 11 รจกกบ Cascading Style Sheet (CSS) ................................................................................ 37

สวนประกอบของ CSS ............................................................................................................ 37 บทท 12 การอพโหลดเวบไซต (FTP) .................................................................................................... 38

ขนตอนการสราง FTP Connection ....................................................................................... 38 ขนตอนการอพโหลดขอมลขน Web Server ........................................................................... 40 ขนตอนการดาวนโหลดขอมลจาก Web Server ลงมาแกไข .................................................... 40

เขยนโดย : นายธนวฒน พลเขตนคร

ขอสงวนลขสทธ © หามท าการคดลอก หรอดดแปลงบทความน กอนไดรบอนญาตโดยเดดขาด

1

บทท 1 กระบวนการพฒนาเวบไซต

อยากเปนเวบมาสเตอรตองเตรยมตวอยางไร

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

ผทเกยวของในการพฒนาเวบไซต

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

Web Site Developer รบผดชอบในการสรางเวบเพจ โดยใชเครองมอตางๆมความสามารถในการเขาถงพนททมการจดเกบเวบไซตเพอท าการ Update หรอเพมเตมขอมลตางๆในเวบไซต ไดอยางรวดเรว

System Administrator รบผดชอบในการดแล Web Server รวมถง Hardware และ Software อนๆทเกยวของ

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

Translator รบผดชอบในการแปลเนอหาจากภาษาไทยเปนภาษาองกฤษ



2

ขนตอน และกระบวนการพฒนาเวบไซต มดงน ขนตอนท 1 : เกบรวบรวมขอมลส าหรบพฒนาเวบไซต

1. ก าหนดเปาหมายหลกของเวบไซต 2. เนอหาส าหรบจดท าเวบไซต

ขนตอนท 2 : พฒนาเนอหา (Site Contact)

1. สรางกลยทธการน าเสนอขอมล เพอใหเนอหาบนเวบไซต เปนทนาสนใจ 2. ก าหนดขอบเขตเนอหาทจะน าเสนอ 3. จดรปแบบเนอหาขอมลใหถกตองอยางมระบบ

ขนตอนท 3 : พฒนาโครงสรางเวบไซต (Site Structure)

1. จดท าแผนผงโครงสรางขอมล 2. พฒนาระบบเนวเกชน

ขนตอนท 4 : ออกแบบและพฒนาเวบไซต (Visual Design)

1. ออกแบบลกษณะหนาจอโฮมเพจ และเวบเพจ 2. พฒนาเวบเพจตนแบบทจะใชส าหรบการพฒนาเวบไซต 3. พฒนาเครองมอส าหรบ Update หรอเพมเตมขอมลตางๆในเวบไซต

ขนตอนท 5 : พฒนาและด าเนนการ (Production and Operation)

1. ใสขอมล และเนอหาทจะน าเสนอลงในหนาจอโฮมเพจ และเวบเพจ 2. เปดตวเวบไซต และท าใหเปนทรจก 3. ดแล และพฒนาตอเนอง



3

บทท 2 การเรมตนในการออกแบบเวบไซต

การจดระบบขอมลในเวบไซต

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

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

ภาษาองกฤษเทานน สรางโฟลเดอรเฉพาะ ส าหรบเอกสารเวบแตละชด/เรอง เพอความเปนระเบยบ และตองท าการตง

ชอโฟลเดอรเปนภาษาองกฤษเทานน จดหาภาพ หรอสรางภาพทเกยวของกบเนอหา หลงจากนนใหน าภาพทตองใชงานทงหมดบนทกไว

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

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

เวบเบราเซอรแตละคาย แตละรน รจกค าสง HTML ไมเทากน ไฟลภาพกราฟกทน ามาใชในการท าเวบ

ภาพกราฟก หรอรปกราฟกทน ามาใชในการท าเวบเพจ หรอน ามาใชในอนเทอรเนต จะตองเปนไฟลลกษณะเฉพาะ ปจจบนนยมใชกน 3 ฟอรแมต คอ

ไฟลฟอรแมต JPEG (Joint Photographer's Experts Group File) ไฟลฟอรแมต GIF (Graphics Interlace File) ไฟลฟอรแมต PNG (Portable Network Graphics)

ไฟลสกล JPG (Joint Photographer’s Experts Group) เปนอกไฟลหนงทนยมใชบน Internet มกใชกรณ

1. ภาพทตองการน าเสนอมความละเอยดสง และใชสจ านวนมาก (สนบสนนถง 24 bit color) 2. ตองการบบไฟลตามความตองการของผใช 3. ไฟลชนดนมกจะใชกบภาพถายทน ามาสแกน และตองการน าไปใชบนอนเทอรเนต เพราะใหความ

คมชดและความละเอยดของภาพสง จดเดน

1. สนบสนนสไดถง 24 bit 2. สามารถก าหนดคาการบบไฟลไดตามทตองการ 3. มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Progressive 4. มโปรแกรมสนบสนนการสรางจ านวนมาก



4

5. เรยกดไดกบ Graphics Browser ทกตว 6. ตงคาการบบไฟลได (compress files)

จดดอย 1. ท าใหพนของรปโปรงใสไมได 2. ขอเสยของการบบไฟล (Compress File)

ก าหนดคาการบบไฟลไวสง (1 - 10) แมวาจะชวยใหขนาดของไฟลมขนาดต า แตกมขอเสย คอ เมอ

มการสงภาพจาก Server ไปแสดงผลท Client จะท าใหการแสดงผลชามาก เพราะตองเสยเวลาในการคลายไฟล ดงนนการเลอกคาการบบไฟล ควรก าหนดใหเหมาะสมกบภาพแตละภาพ

ไฟลสกล GIF (Graphics Interlace File)

ภาพกราฟกสกล GIF พฒนาโดยบรษท CompuServe จดเปนไฟลภาพส าหรบการเผยแพรผานอนเทอรเนตตงแตยคแรก จดเดน

1. สามารถใชงานขามระบบ (Cross Platform) หมายความวา คอมพวเตอรทกระบบ ไมวาจะใช Windows, Unix กสามารถเรยกใชไฟลภาพสกลนได

2. มขนาดไฟลต า จากเทคโนโลยการบบอดภาพ ท าใหสามารถสงไฟลภาพไดรวดเรว 3. สามารถท าพนของภาพใหเปนพนแบบโปรงใสได (Transparent) 4. มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Interlace 5. มโปรแกรมสนบสนนการสรางจ านวนมาก 6. เรยกดไดกบ Graphics Browser ทกตว 7. ความสามารถดานการน าเสนอแบบภาพเคลอนไหว (GIF Animation)

จดดอย 1. ไฟลชนดนกมจดดอยในเรองของการแสดงส ซงแสดงไดเพยง 256 ส ท าให การน าเสนอภาพถาย

หรอภาพทตองการความคมชดหรอภาพสดใส จะตองอาศยฟอรแมตอน ไฟล .GIF ม 2 สกล ไดแก

GIF87 พฒนาขนในป ค.ศ. 1987 เปนไฟลกราฟกรนแรกทสนบสนนการน าเสนอบนอนเทอรเนต เปนไฟลทมขนาดเลกและแสดงผลสไดเพยง 256 ส และก าหนดใหแสดงผลแบบโครงรางได (Interlace)

GIF89A พฒนาขนในป ค.ศ. 1989 เปนไฟลกราฟกทพฒนาตอจาก GIF87 โดยเพมความสามารถการแสดงผลแบบพนโปรงใส (Transparent) และการสรางภาพเคลอนไหว (GIF Animation) ซงเปนไฟลกราฟกทมความสามารถพเศษโดยน าเอาไฟลภาพหลายๆ ไฟลมารวมกนและน าเสนอภาพเหลานนโดยอาศยการหนวงเวลา มการใสรปแบบการน าเสนอลกษณะตางๆ (Effects) ในลกษณะภาพเคลอนไหว

การบบอดภาพ

เทคนคการบบอดภาพสกล GIF เปนเทคนคการบบอดคงสญญาณ LZW (Lempel-Ziv-Welch) Lossless compression โดยขอมลเดมจะถกสรางขนใหมดวยวธสราง Index สจากสทซ าๆ และใกลเคยง



5

กน โดยจะ Scan แนวตงของภาพทงหมด และ Scan แนวนอนของภาพทงหมด และเปรยบเทยบวาแนวใดไดขอมลทจะบนทกเปนไฟลนอยกวากน

ไฟลสกล PNG (Portable Network Graphics)

ไฟลสกลลาสดทน าจดเดนของไฟล GIF และ JPEG มาพฒนารวมกน ท าใหภาพในสกลนแสดงผลสไดมากกวา 256 ส และยงสามารถท าพนภาพใหโปรงใสได จงเปนไฟลภาพทไดรบความนยมมากในปจจบนดวยอกสกลหนง คณสมบตของภาพคอ

สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพวเตอรทกระบบ ไมวาจะใช Windows, Unix กสามารถเรยกใชไฟลภาพสกลนได

ขนาดไฟลเลก ดวยเทคนคการบบอดคงสญญาณ LZW สามารถท าภาพโปรงใสจากสพน 256 ระดบ แสดงภาพแบบสอดประสานเชนเดยวกบ GIF โดยมความคมชดทดกวา มคณสมบต Gamma ท าใหภาพสามารถปรบตวเองไดตามจอภาพ และปรบระดบความสวางท

แทจรงตามทควรจะเปน จดเดน

1. สนบสนนสไดถงตามคา True color (16 bit, 32 bit หรอ 64 bit) 2. สามารถก าหนดคาการบบไฟลไดตามทตองการ 3. มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยด (Interlace) 4. สามารถท าพนโปรงใสได

จดดอย 1. หากก าหนดคาการบบไฟลไวสง จะใชเวลาในการคลายไฟลสงตามไปดวย แตขนาดของไฟลจะม

ขนาดต า 2. ไมสนบสนนกบ Graphic Browser รนเกา สนบสนนเฉพาะ IE 4 และ Netscape 4 3. ความละเอยดของภาพและจ านวนสขนอยกบ Video Card 4. โปรแกรมสนบสนนในการสรางมนอย

การแสดงภาษา

เลอกฟอนตทตองการจากตวเลอก Font โดยเอกสารภาษาไทยควรก าหนดฟอนตเปน MS Sans Serif หรอ Tahoma ส าหรบเอกสารภาษาองกฤษ ก าหนดเปน Arial

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

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

การกดปม <Enter> จะกระท าเมอตองการขนบรรทดใหม, เวนบรรทด หรอจบพารากราฟ หากตองการขนบรรทดใหม กอนจบพารากราฟใหกดปม <Shift><Enter>

การก าหนดชอไฟล และนามสกลของไฟลเอกสารเวบ

ควรใชตวอกษร a - z หรอตวเลข 0 - 9 หรอผสมกน ตวอกษร a - z ควรเปนตวพมพเลก



6

หามตงชอไฟลเปนภาษาไทย ชอไฟลแรกของเอกสารเวบ มกจะใชชอ index หรอ default

หลกเกณฑในการเลอกภาพ Graphic

ขนาดไฟลไมควรเกน 80 กโลไบต เพอความรวดเรวในการแสดงผล ใชไฟลแบบ JPEG ส าหรบรปถาย หรอรปทมสเกน 256 ส ใชไฟลแบบ GIF ส าหรบภาพวาดหรอภาพการตนทมสไมเกน 256 ส เลอกภาพทมความนาสนใจและดงดด เพอไมใหเสยเวลาทเสยไปในการ Download ภาพเปลาประโยชน

หลกเกณฑการใช Multimedia

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

หลกเกณฑในการใชงานไฟล Multimedia แบบ Flash ไดแกไมควรสราง Multimedia ทประกอบดวยรปภาพจ านวนมากควรจะใชเครองมอวาดรปของโปรแกรม Flash เอง เพอใหไดขนาดไฟลทไมใหญจนเกนไปและ Download ไดเรวกวา

หลกเกณฑในการใชไฟล Video และ Audio ไมควรใชไฟลแบบ WAV เพราะจะมขนาดใหญควรเปลยนมาใชไฟลทมขนาดเลกกวาเชน mp3,ram หรอ wmv หากตองการแสดงผล Video ควรจะใชกระบวนการแบบ Streaming ซงเปนการลดระยะเวลาในการ Download ท าใหการแสดงผลรวดเรวยงขน เชนไฟลแบบ Streaming ของ Real,Quick Time และWindows Media เปนตน

หากมการเรยกใชไฟล Multimedia ทตองการโปรกรมพเศษในการเรยกดควรมจะท า Link ส าหรบการ Download โปรแกรมเหลานนไวดวยหากเปดโอกาสใหผเขาชมสามารถ Download โปรแกรมเหลานนจากเวบไซต หนวยงานนน จะตองท าการตรวจสอบขอมลทางดานลขสทธของเจาของโปรแกรมคอมพวเตอรนนๆกอนวาสามารถท าไดหรอไม

หลกเกณฑในการสรางเอกสาร เวบเพจ

1. ก าหนดการเขารหส (Encoding ,Charset)ของภาษไทยใหถกตอง โดยเลอกจากรหส ดงตอไปน 1. การเขารหสแบบ windows -847 ส าหรบระบบปฏบตการ windows ซง นยมใช กนอยาง

แพรหลาย 2. การเขารหส แบบ tis-620 ของส านกงานมาตรฐานอตสาหกรรมแหงประเทศไทย 3. การเขสารหสแบบ iso-8859-11 ของ ISO

ตวอยางการเขารหสในไฟลเวบเพจโดยค าสง HTML <meta http-equiv=”Content-type”content=”text/html; charset=windows-874”>

ท าการก าหนดชอใหกบทกหนา เพอใหการแสดงบน Task Bar ของ Windows ถกตอง ตวอยางการก าหนดชอเอกสารในไฟลเวบเพจโดยใชค าสง html <head>



7

<title>โครงสรางการบรหารงาน</title> </head>

ท าการก าหนดขอมลส าหรบ Tag Author, Descriptionและ Keywords เพอใหงายตอการท าดชนส าหรบ Search Engine

ตวอยางการก าหนด Author <meta name=”Author”Trin Tantsetthi [email protected]”> ตวอยางการก าหนด Description

<meta name=” Description” content=”Information about Thailand,Best directory Service for information (www/Gopher/FTP) Server in Thailand”>

ตวอยางการก าหนด Keywords <meta name =”Keywords” content=”Thailand,NECTEC,Internet, Directories,Y2k,Year 2000,Service,Ellectronment, Thai Government, IT Policy”>

ในการพมพ Tag ของค าสง HTML ควรจะใชตวอกษรตวพมพเลกทงหมด หรอตวพมพใหญทงหมด เพอใหสามารถเปลยนแปลงเอกสารจาก HTML ไปเปน XHTML หรอ XML ในอนาคตท าไดงายขน

หลกเกณฑในการน าเนอหาหรอ Software จากภายนอกมาแสดงบน เวบไซต กรณทมการน าเนอหาจากภายนอกมาแสดง ณ ยงเวบไซต ขององคกรเชน เนอหาทเปนเอกสาร เวบเพจ หรอไฟลเอกสารตางๆ (Word, Acrobat) รวมทง Software ตางๆจะตองกระท าตามหลกเกณฑดงตอไปน

1. ท าการตรวจสอบขอมลทางดานลขสทธและทรพยสนจากเจาของเนอหา หรอ Software เหลานนเสยกอนวาเปดโอกาสใหน าไปเผยแพรตอไดหรอไม

2. หากตองมการขออนญาตเจาของเนอหาหรอ Software จะตองมการท าหนงสอเปนลายลกษณ อกษร

3. กรณทไดรบอนญาตแลวหรอสามารถเผยแพรไดโดยไมผดตอเงอนไขทางดานลขสทธและทรพยสนทางปญญาจะตองมการแสดงแหลงทมาของเนอหาเหลานนประกอบกบเนอหาดวยทกครง เชนไดมาเวบไซตใด หรอไดรบอนญาตจากหนวยงานหรอบรษทใดเปนตน ยกเวนกรณทมการจดซอเนอหาเหลานนมาเพอน ามาเผยแพรโดยเฉพาะ

mailto:[email protected]



8

บทท 3 การออกแบบเวบไซต

แนวคดในการออกแบบ เรยนรจากเวบไซตตางๆ

เปนวธทชวยใหเรามไอเดยในการออกแบบหนาเวบของเราก คอ การส ารวจรปแบบและเทคนคจากเวบไซตตางๆ ทงทเราชอบและไมชอบ ซงอาจจะเปนเวบไซตทอยในกลมเดยวกน หรออาจเปนเวบไซตอนๆทไมเกยวของเลยกได โดยพยายามสงเกตทงลกษณะทด เพอน ามาประยกตใช และลกษณะทไมเหมาะสม เพอหลกเลยงไมใหขอผดพลาดเกดขนกบเวบไซตของเรา วธนนอกจากจะไดพบเหนรปแบบของเวบไซตทนาสนใจแลว เรายงสามารถเรยนรเทคนคการสรางเวบนนดวยค าสง View Source ในเมนบราวเซอร เพอแสดงโคด HTML ใหคณศกษาไดอกดวย

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

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

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

พดงายๆกคอการใชสงทเราคนเคยในการอธบายถงสงทเราไมคนเคยเทานนเอง ในขนตอนนเราจะน าเอาการจ าลองลกษณะทมองเหน (Visual metaphor) มาใช โดยเราสามารถเลอกแบบจ าลองมาใชในเวบไดจากสงตางๆรอบตวเราไมวาจะเปนรปภาพจากสงพมพ ลกษณะหนาตาของอปกรณ หรอแมกระทงรปแบบของรานขายของ เปนตน และสงส าคญ คอ รปแบบทเลอกมาใชนน ตองมลกษณะทคนสวนใหญคนเคย เขาใจไดงาย ชวยสนบสนนแนวคด และสงเสรมกระบวนการสอสารของเวบไซต เชน ถาคนตองการแบบจ าลองเกยวกบระบบขอมลกอาจจะนกถงลกษณะของหนงสอ หรอ หองสมด แทนทจะเปนรถยนตหรอดอกไมทไมมความเกยวของกนเลย แตผออกแบบชอบ

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

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

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



9

หลกในการออกแบบเวบไซต • สรางล าดบชนความส าคญขององคประกอบ

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

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

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

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

o ภาพเคลอนไหว เปนสงทดงดดความสนใจไดเปนอยางด แตคณตองใชอยางจ ากดและระมดระวง เพราะการทเราใชสงเคลอนไหวในหนาเวบมากเกนไปนน จะท าใหมจดสนใจบนหนาจอมากมายจนผใชตดสนใจไดล าบากวาสงไหนส าคญกวากน ดงนนเราควรใชภาพเคลอนไหวโดยมเปาหมายทชดเจนวาจะใหผชมเพงความสนใจไปตรงไหน

• สรางรปแบบ บคลก และสไตล รปแบบของหนาเวบนนขนอยกบเนอหา และเปาหมายของเวบไซตวาตองการใหความร โฆษณา

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

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

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

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

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



10

ค านงถงความเหมาะสม และจะตองระวงเปนพเศษ เมอน ากราฟกจากเวบไซตอนทมสไตลแตกตางจากของเรามาใช นอกจากนรปแบบของกราฟกตางๆรวมถงสไตลของเวบไซตควรมความสมพนธกบเนอหาในเวบไซตอยางมเหตผล ไมใชใชเพยงเพอแสดงฝมอวาเราสามารถตกแตงกราฟกโดยใชเทคนคแปลกๆได และไมวาเราจะเลอกรปแบบ บคลก และสไตลใดมาใชกตาม เราควรใชลกษณะเหลานนใหสม าเสมอตลอดทงเวบไซต เพอปองกนความสบสนทอาจเกดขนได เชน ถาเราใชปมเนวเกชนทเปนแบบ 2D มาตลอด แลวกลบเปลยนเปน 3D ในบางสวน ผใชจะรสกสบสนกบความแตกตางทเกดขนอยางไมมเหตผลได • สรางความสม าเสมอตลอดทงไซต

ปญหาอยางหนงทคณอาจจะเคยพบเหนมาแลวในบางเวบไซต คอ การมรปแบบในแตละหนาทไมเหมอนกน จนท าใหเราไมแนใจวายงอยในเวบเดมหรอเปลา เมอเราไดออกแบบโครงสรางของหนาเวบเพจ, รปแบบกราฟก, ลกษณะตวอกษร, โทนส และองคประกอบอนๆเปนทเรยบรอยแลว กควรนะลกษณะดงกลาวไปใชกบทกๆหนาใหเปนมาตราฐานเดยวกนตลอดทงเวบไซต เพอเปนเอกลกษณใหผใชสามารถจดจ าลกษณะของเวบไซตไดดยงขน นอกจากนน ความสม าเสมอของโครงสรางหนาเวบและระบบเนวเกชนกจะท าใหผใชรสกคนเคย และสามารถคาดการณลกษณะของเวบไดลวงหนา ซงจะชวยใหการทองเวบเปนไปอยางสะดวก • จดวางองคประกอบทส าคญไวในสวนบนของหนาเสมอ สวนบนของหนาในทน หมายถง สวนแรกของหนาทจะปรากฏขนในหนาตางบราวเซอรโดยทยงไมมการ

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

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

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

หนาปรากฏขนมาจนครบกอน • สรางจดสนใจดวยความแตกตาง

การจดองคประกอบใหภาพรวมของหนามความแตกตาง เปนสงทส าคญทจะน าสายตาผอานไปยงบรเวณตางๆ สวนหนาทเตมไปดวยตวอกษรจะดคลายเปนแถบสเทาทไมนาสนใจ ส าหรบหนาทถกออกแบบมาไมดโดยเนนการใชกราฟก หรอตวอกษรทมากเกนไป จะท าใหยากตอการมองหาขอมลทมความส าคญจรงๆ เราสามารถใชเทคนคการจดโครงสรางของหนา (page layout) การจดระเบยบตวอกษร (typography), การออกแบบกราฟก, การเลอกใชส และการแสดงภาพประกอบ (illustration) เพอน าสายตาผอานไปยงสวนส าคญของเนอหาตามความเหมาะสม เราสามารถใชความแตกตางของสเขามาชวยสรางลกษณะเดนในหนาเวบ เพอใหเกดการน าเสนอทนาสนใจได เพราะความแตกตางของสทเกดขนจะท าใหผอานสามารถแยกแยะบรเวณตางๆออกจากกนไดดขน ตวอยางเชน การก าหนดพนหลงของแตละบรเวณใหเปนสตางๆกนเพอแยกเนอหาออกเปนสดสวน แตตองแนใจวาสพนทใชนนตดกบสของตวอกษรอยางชดเจน เพอใหอานไดอยางสะดวก • จดแตงหนาเวบใหเปนระเบยบและเรยบงาย

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



11

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

หลายคนอาจคดวาการใชกราฟกจ านวนมากจะท าใหเวบเราดด และนาสนใจกวาเวบอน แตความจรงแลว การใชกราฟกจ านวนมากอยางไมเปนระเบยบ อาจสงผลลพธในทางตรงขามกบสงทเราคาดหวงไวกได เราควรใชกราฟกทเปนไอคอน, ปมลายเสน และสงอนๆตามความเหมาะสมและไมมากเกนไป เพอหลกเลยงโครงสรางของหนาทยงเหยงไมเปนระเบยบ เชนเดยวกบการใชตวอกษรขนาดใหญดวยค าสง H1 และ H2 ทควรใชในปรมาณนอยๆ เพอใหไดผลลพธสงสด การใชกราฟกมากเกนความจ าเปนจะท าใหเกดจดเดนทวไปทงหนา และเปนผลใหไมมอะไรในหนานนเดนขนมาจรงๆ



12

หลกการออกแบบเวบเพจ สามารถแบงได 3 ลกษณะ คอ 1. แบบล าดบขน (Hierarchy) เปนการจดแสดงหนาเวบ เรยงตามล าดบกงกาน แตกแขนงตอเนอง

ไปเหมอนตนไมกลบหว

2. แบบเชงเสน (Linear) เปนการจดแสดงหนาเวบเรยงตอเนองไปในทศทางเดยว

3. แบบผสม (Combination) เปนการจดหนาเวบชนดผสมระหวางแบบล าดบขน และแบบเชงเสน



13

บทท 4 การออกแบบระบบเนวเกชนส าหรบเวบ

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

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

ระบบเนวเกชนนนอาจจะประกอบดวยองคประกอบหลายๆอยาง เชน เนวเกชนบาร หรอ pop-up menu ซงมกจะมอยในทกหนาของเวบเพจ และอาจอยในหนาเฉพาะทมรปแบบเปนระบบสารบญ, ระบบดชน หรอ Site Map ทสามารถใหผใชคลกผานโครงสรางขอมลไปยงสวนอนๆได การเขาใจถงรปแบบและองคประกอบของระบบเนวเกชนเหลาน จะท าใหคณออกแบบระบบเนวเกชนดวยองคประกอบทเหมาะสมไดอยางมประสทธภาพ รปแบบของระบบเนวเกชน ระบบเนวเกชนส าหรบเวบไซตขนาดใหญมกใชหลายรปแบบรวมกนเพอชองทางการเขาถงขอมลใหมากขน ซงผออกแบบควรมความเขาใจและเลอกใชอยางเหมาะสม โดยไมใหหลากหลายหรอจ ากดเกนไป ระบบเนวเกชนแบงออกเปน 4 รปแบบ ดงน

ระบบเนวเกชนแบบล าดบขน (Hierarchical) ระบบเนวเกชนแบบล าดบชนนเปนแบบพนฐานทผคนมกใชกนในเวบไซตอยแลวอยางไมรตว การท

เรามหนาโฮมเพจหนงหนา และมลงคไปยงหนาอนๆภายในเวบไซตนนกถอเปนแบบล าดบชนอยางหนงแลว แตเนองจากขอจ ากดในการเคลอนทไดเฉพาะในแนวตง (บน-ลาง คอจากหนาหลกไปยงหนายอยถดลงไปหรอยอนกลบขนมา) ท าใหเราจ าเปนตองอาศยระบบเนวเกชนแบบอนเพมเตม เพอใหมความคลองตวยงขน

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

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



14

ระบบเนวเกชนแบบโลคอล (Local) ส าหรบเวบทมความซบซอนมาก นอกจากระบบเนวเกชนแบบโกลบอลแลวยงอาจตองใชระบบเนว

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

ระบบเนวเกชนเฉพาะท (Ad Hoc) ระบบเนวเกชนอกแบบหนง คอ ระบบเนวเกชนแบบเฉพาะทตามความจ าเปนของเนอหา ซงกคอ

ลงคของค าหรอขอความทนาสนใจซงฝงอยในประโยค (embedded link) ทเชอมโยงไปยงรายละเอยดเกยวกบค านนๆ เพมเตม ปรกตแลวผดแลเนอหาในเวบไซตจะเลอกค าหรอวลทนาสนใจในขอความมาสรางเปนลงคเพมให แตกตองระวงไมสรางลงคใหมากเกนไปในขอความแตละยอหนาจนดรกหรอสบสน ระบบเนวเกชนทมประสทธภาพ

1. เขาใจงาย 2. มความสม าเสมอ 3. มการตอบสนองตอผใช 4. มความพรอมและเหมาะสมตอการใชงาน 5. น าเสนอหลายทางเลอก 6. มขนตอนสนและประหยดเวลา 7. มรปแบบทสอความหมาย 8. มค าอธบายทชดเจนและเขาใจไดงาย 9. เหมาะสมกบวตถประสงคของเวบไซต 10. สนบสนนเปาหมายและพฤตกรรมผใช



15

บทท 5 Macromedia Dreamweaver

ความตองการของโปรแกรม (System Requirements) ความตองการของโปแกรม (System Requirements)

ความเรวของเครองคอมพวเตอร : จะตองไมต ากวา 600 MHz Intel Pentium III Processor ระบบปฏบตการ : ทสามารถตดตงได คอ Windows 98 SE, Windows 2000, Windows XP, or Windows

Server 2003 หนวยความจ า : จะตองไมนอยกวา 128 MB Ram(256 MB recommended) พนทในการตดตง : 275 MB available disk space



16

ขนตอนในการตดตง โปรแกรม Dreamweaver มดงน 1. ดบเบลคลกทชอไฟล Set-up.exe

2. หลงจากนนจะเขาสขนตอนการตดตงโปรแกรม โดยจะปรากฏหนาจอดงน

3. คลกทปม Install



17

4. คลกทปม Accept

5. กรอก Serial Number แลวคลกทปม Next



18

6. เลอกโปรแกรมทตองการตดตง หลงจากนนคลกทปม Install

7. โปรแกรมจะเรมท าการตดตง



19

8. เมอตดตงโปรแกรมเรยบรอยแลว จะปรากฏหนาจอดงน



20

ขนตอนการเปดใชงานโปรแกรม Dreamweaver มดงน 1. ท าการเปดโปรแกรม Dreamweaver โดยเขาไปท เมน Start > All Programs > Adobe Master

Collection CS6 > Adobe Dreamweaver CS6

2. เมอเปดโปรแกรม Dreamweaver ในครงแรกจะปรากฏหนาจอดงน

3. ใหท าการเลอกท Designer แลวท าการกดทปม OK จะปรากฏหนาจอดงน



21

รจกกบโปรแกรม Dreamweaver Dreamweaver เปนโปรแกรมของบรษท Macromedia Inc. ทใชส าหรบออกแบบ และพฒนา

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

ในปจจบนโปรแกรม Dreamweaver นอกจากจะสนบสนนการใชงานกบภาษา HTML และยงสนบสนนการใชงานรวมกบเทคโนโลยทางดานเวบอนๆ ดวย เชน CSS และ Java Script เปนตน การสรางเวบแอปพลเคชน (Web Application) ดวยโปรแกรม Dreamweaver นนสามารถทจะสราง การตดตอกบฐานขอมล และดงขอมลจากฐานขอมลโดยไมจ าเปนทตองเขยนโคดของเซรฟเวอรสครปต (Server Script) เลย ตวโปรแกรมจะสรางใหเองโดยอตโนมต ซงจะท าใหเวลาทใชในการพฒนาเวบแอปพลเคชนนนนอยลง



22

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

1. Document Window อยดานลางของ Document Toolbar ซงเปนสวนทใชแสดงเนอหาของเวบเพจทเราสรางขน และ

ก าลงท างานอยในขณะนน 2. Insert Bar

ประกอบไปดวยปมทใชแทรกออบเจกต (Object) ชนดตางๆ เชน รปภาพ ตาราง และ เลเยอร เปนตน ลงในเวบเพจทเราก าลงท างานอยในขณะนน

3. Property Inspector

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

4. Tag Selector

อยใน Status Bar ทอยทางดานลางของ Document Window เมอเราคลกวตถในเอกสารจะปรากฏ Tag Select ใน Status Bar ขนมา เมอเราคลกเลอก Tag Selector แลวแทกตางๆ ทถกลอมดวยแทกทเราเลอกจะถกเลอกดวย



23

Site Panel ใชในการจดการไฟลและ โฟลเดอรทใชในการสรางเวบไซต นอกจากนยงสามารถใชดไฟลตางๆในเครองไดอกดวย

5. Document Toolbar

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



24

Code ในมมมองน Document Window จะแสดงเวบเพจในรปแบบของโคดภาษา HTML ทจะถกสรางขนโดยโปรแกรม Dreamweaver หรอ เราเขยนขนเองโดยโคดภาษา HTML ทแสดง เราสามารถทจะเพมหรอ แกไขได ดงรป

Spilt ในมมมองน Document Window จะแสดงเวบเพจทงในรปของหนาตาเวบเพจและ โคด

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

Design ในมมมองน Document Window จะแสดงเวบเพจทงในรปของหนาตาของเวบเพจ

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



25

บทท 6 การก าหนดคาเรมตน Dreamweaver

การด Preferences

การดและก าหนดคา Preferences ของ โปรแกรม Macromedia Dreamweaver เปนสงทส าคญทสด ของการสรางเวบไซต ดวยโปรแกรมน เพราะ Preferences ของโปรแกรมกคอ การก าหนดคาเบองตนทงหมด ของโปรแกรม ถาเราออกแบบเวบโดยไมได ก าหนดคา เวบกจะมคาผดพลาด เพยนจากความเปนจรง และไมสามารถแกไขไดในเหนานน เราตอง set คาแลวกออกแบบใหม มาดวธการก าหนดทส าคญดงน การก าหนด Font

1. ไปทเมน Edit >Preferences จะไดหนาตางการก าหนดคา ดงรป



26

2. หลงจากนนใหเลอก Front settings เปน Thai แลวในสวนของ Proportional font และ Code view เปน Tahoma เพอเปนการก าหนดคา Front เรมตน ดงรป

การตงก าหนดคาของเอกสารเรมตน

1. New Document เปนการก าหนดคา default ใหเอกสารเรมตน ดงรป



27

การตงคาไฟลเอกสารเรมตน หากตองการก าหนดคาต าแหนงเรมตนชดบนสด ซายสด

1. เลอก Modify > Page Properties…

2. ก าหนดคา Left margin : 0 และ Top margin : 0 ก าหนดคา Title เพอใชแสดงใน Title bar บนโปรแกรมเวบเบราเซอร

1. เลอก Modify > Page Properties… แลวเลอกท Title/Encoding

2. ใสขอความลงไปใน Title



28

บทท 7 การก าหนด Dreamweaver Site

หลงจากทเราวางโครงสรางเวบไซตของเราแลว ตอมาเราจะใช Dreamweaver Site เขามาชวยใน

การสรางและ จดการเวบไซตของเรา การน า Dreamweaver Site เขามาจดการเวบไซตของเราจะท าใหเราสามารถทจะท าการอพโหลดไฟลทใชในการสรางเวบไซตไปในเวบเซรฟเวอรได งายขน นอกจากน Dreamweaver Site ยงชวยในการตรวจสอบการชอโยงของไฟลตางๆ ใหอกดวยเมอเวลามการแกไขไฟลตางๆ ในเวบไซต ดวย การสราง Site

1. ไปทเมน Site > New Site

2. ก าหนดคา Site name และ Local Site folder หลงจากนนกดปม Save



29

เมอเสรจสนการสราง Site แลว จะปรากฏอยในสวนของ Site Panel ดงรป



30

บทท 8 การใสเนอหาใหกบเวบเพจ

โปรแกรม Dreamweaver ซงมคณสมบตแบบ WYSIWYG (What you see is what you get)

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

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

1. กดปม Enter โดยตรง (Tag <p>) ตวอยาง ดงน

2. กดปม Shift คางไว แลวกด Enter (Tag <br>)

ตวอยาง ดงน

การจดรปแบบตวอกษร HTML โดยการก าหนดคา Property มดงน

1. รปแบบของตวอกษร เปน Paragraph, Heading 1-16 2. การก าหนดแมแบบอกษร (Style sheet) 3. การเชอมโยง

การจดรปแบบตวอกษร CSS โดยการก าหนดคา Property มดงน

4. การก าหนด Font ตวอกษร



31

5. การจดต าแหนง 6. การก าหนดขนาดอกษร (Font) size 1-7 7. การก าหนดลกษณะอกษร ใสสอกษร

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

Microsoft Sans Serif, MS Sans Serif หรอ Tahoma และส าหรบขอความบนเวบเพจเปนภาษาองกฤษ ใหท าการก าหนดเปนก าหนดเปน Arial เทานน เพราะหากเราท าการก าหนดเปนฟอนตตวอนนอกเหนอจากน อาจท าใหคอมพวเตอรบางเครอง ไมสามารถท าการเปดอานขอความบนเวบเพจของทานได นอกเหนอจากการพมพขอความตวอกษรทอยบนคยบอรดแลว ในโปรแกรม Dreamweaver ยงสามารถท าการการใสอกษรพเศษแบบตางๆ ไดอกดวย ดงน ขนตอนในการใสอกษรพเศษแบบตางๆ มดงน ไปทกลมค าสง Text แลวเลอกทเมน Characters > Other Characters

เมอคลกท Other Characters จะปรากฏหนาตาง ดงน

หากตองการใสอกษรพเศษตวใด ใหท าการคลก หลงจากนนโปรแกรม Dreamweaver จะท าการ Insert อกษรพเศษนนลงใน Document Window

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



32

ขนตอนการแสดงผลเวบเพจบน Browser มดงน 1. ใหท าการ Save เวบเพจ กอนท าการแสดงผลบน Browser ทกครง 2. ไปท Document Toolbar แลวคลกทสญลกษณคลายกบรปโลก

3. เลอกเมน Preview in IExplore

หลงจากนนโปรแกรม Dreamweaver จะท าการแสดงผลของเวบเพจทโปรแกรม Internet Explorer



33

บทท 9 การใสรปภาพใหกบเวบเพจ

ภาพกราฟก หรอรปกราฟกทน ามาใชในการท าเวบเพจ หรอน ามาใชในอนเทอรเนต จะตองเปน

ไฟลลกษณะเฉพาะ ปจจบนนยมใชกน 3 ฟอรแมต คอ ไฟลฟอรแมต JPEG (Joint Photographer's Experts Group File) ไฟลฟอรแมต GIF (Graphics Interlace File) ไฟลฟอรแมต PNG (Portable Network Graphics)

ขนตอนในการแทรกรปภาพลงบนเวบเพจ ม 3 วธ ดงน

1. ไปทเมน Insert > Image 2. ไปทกลมค าสง Common แลวเลอกทปมการแทรกรปภาพ

3. ท าการลากไฟลรปภาพจาก Files Panel มาวางในสวนของ Document Windows



34

การก าหนดคณสมบตของรปภาพ มดงน

1. ขนาดของภาพ 2. ทอยของภาพ 3. ค าอธบายรปภาพ 4. การเชอมโยงดวยรปภาพ (Link)



35

บทท 10

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

การเชอโยงเอกสาร หรอการท า Hyperlink คอ การเชอมโยงเวบเพจ จากเวบเพจหนงไปยงอกเวบเพจหนงนนเอง ซงในโปรแกรม Dreamweaver จะเรยกการเชอโยงนสนๆ วาการท า Link การท า Link มอย 7 แบบ คอ

1. Link ไปยงไฟลเดยวกนภายใน Site 2. Link ไปยงเวบไซตอน 3. Link ไปยงอเมล 4. Link ไปยงเปาหมายทก าหนดภายในหนาเวบเพจ (Named Anchor) 5. Link ภายในไฟลเอกสารชนดอน เชน .doc, .xls , .pdf, .zip, .exe 6. การใชรปภาพเปนตวเชอมโยง 7. Link แบบ Hotspot

ในโปรแกรม Dreamweaver เราสามารถสรางเมน Link ได 2 แบบ คอ การท าเมนขอความ Link และ

การท าเมนรปภาพ Link การท าเมนขอความ Link มขนตอน ดงน

1. พมพเมนขอความทตอง 2. Crop ขอความทตองการท า Link 3. ไปท Properties แลวใสชอเวบเพจทตองการเชอมโยงขอมลลงในชอง Link

การท าเมนรปภาพ Link มขนตอน ดงน

1. Insert รปภาพทตองการสรางเปนเมนลงบน Document Window 2. คลกทรปภาพ 3. ไปท Properties แลวใสชอเวบเพจทตองการเชอมโยงขอมลลงในชอง Link



36

การก าหนดลกษณะการเปดหนาเวบเพจ หลงจากคลกท Link เมอท าการการเชอมโยงเองสาร โดยการใสชอเวบเพจลงในชอง Link แลวใหคลกเลอกท Target

ความหมายของ Target มดงน

_blank ใหเปดหนาเวบใหมทเชอมโยงในหนาตาง Browser ใหมอกหนาตาง new ใหเปดหนาเวบใหมทเชอมโยงในหนาตาง Browser ใหมอกหนาตาง _parent ใหเปดหนาเวบใหมทเชอมโยงในหนาตาง Browser เดม _self ใหเปดหนาเวบใหมทเชอมโยงในเฟรมเดม _top ใหเปดหนาเวบใหมทเชอมโยงในหนาตาง Browser เดม โดยแสดงใหเตมพนทหนาตาง



37

บทท 11

รจกกบ Cascading Style Sheet (CSS)

CSS เปนกลมของรปแบบการแสดงผลทเราไดสรางไวเพอใชก าหนดการแสดงผลของเนอหาในเวบเพจ การน า CSS เขามาก าหนดการแสดงผลจะชวยใหการก าหนดการแสดงผลของเนอหาทอยในเวบเพจท าไดงายและ ถกตองมากขน นอกจากน CSS ยงสามารถควบคมการแสดงผลบางอยางท HTML ไมสามารถควบคมไดดวย อยางเชน ขนาดของตวอกษรบนเวบเพจใน CSS จะก าหนดขนาดเปนพกเซล ซงจะท าใหแสดงผลของตวอกษรในทกๆ เวบบราเซอรเหมอนกน หรอ ต าแหนงของเลเยอรซงดวย CSS เราสามารถทจะก าหนดต าแหนงการแสดงผลของมนได เปนตน CSS จะประกอบดวย 2 สวนดวยกนคอ Selector และ Declaration ดงรป

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

1. Selector เปนชอของ CSS 2. Declaration เปนสวนทใชก าหนดวา CSS นมรปแบบอะไรบาง ซงประกอบไปดวยคณสมบต และ

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

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

1. Customer CSS Style หรอ Class Style เปน CSS ทสรางขน และสามารถใชไดทกทของเวบเพจ

2. HTML Tag Style เปน CSS ทมการก าหนดรปแบบใหกบ HTML เดมทมอยแลว 3. CSS Sector Style เปน CSS ทมการก าหนดรปแบบใหกบแทกทมการผสมกนหรอทกแทกทม id

ตรงกบทเราก าหนดใน CSS



38

บทท 12 การอพโหลดเวบไซต (FTP)

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

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

1. คลกทปม ท Files Panel

2. ในกรณทยงไมไดมการก าหนดคา FTP จะขนหนาตาง Site Setup for mysite ใหเลอกทปมเคลองหมายบวก +



39

3. จากนนท าการก าหนดคาตางๆ ดงน

4. ใสคาส าหรบการ FTP

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



40

6. ในกรณทการเชอมตอลมเหลว จะขนขอความดงน

* ใหลองตรวจสอบ username / password ทผใหบรการใหมาอกครง หรอ FTP Host ขนตอนการอพโหลดขอมลขน Web Server มขนตอน ดงน

1. คลกเลอกไฟลทตองการอพโหลดท Files Panel

2. คลกทปม เพอท าการ upload ขอมลขน Web Server ขนตอนการดาวนโหลดขอมลจาก Web Server ลงมาแกไข มขนตอน ดงน

1. คลกเลอกไฟลทตองการดาวนโหลดท Files Panel

2. คลกทปม เพอท าการดาวนโหลดขอมลจาก Web Server ลงมาแกไข

Documents

สารบัญ - rms.ptl.ac.thrms.ptl.ac.th/files/05522_16020417173900.pdf · สารบัญ (ต่อ) บทที่ 7 การก าหนด Dreamweaver Site.....28