Page 1
การสรางและดแลเวบดวย Macromedia Dreamweaver MX
คมออบรม
จดทาโดย... สวมล คงศกดตระกล
เอกสารประกอบการอบรม
สาหรบผดแลเวบหนวยงานของมหาวทยาลย
สานกคอมพวเตอร มหาวทยาลยศรนครนทรวโรฒ สงหาคม 2547
© Copyright 2004: Srinakharinwirot University
Page 2
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย
สารบญ • HTML ภาษาพนฐาน .........................................................................................1 • ความสามารถของ Macromedia Dreamweaver.....................................................2 • เรมตนใชงาน Macromedia Dreamweaver...........................................................2 • แนะนาการใชเครองมอใน Macromedia Dreamweaver MX .....................................3 • ทาให Dreamweaver ใชภาษาไทยได .................................................................7 • เรมตนสรางเวบไซต ..........................................................................................8 • การสรางโฟลเดอรใหมในเวบไซต ........................................................................9 • การสรางเวบเพจใหมในโฟลเดอร.......................................................................10 • การกาหนดคณสมบตของหนาเวบเพจ (Page Properties) ......................................10 • ขอความ (Text) .............................................................................................11 • รปภาพ (Image) ............................................................................................11 • การเชอมโยง (Link)........................................................................................11 • ตาราง (Table) ..............................................................................................13 • การสรางเฟรมเซตในเวบเพจ.............................................................................14 • การใช Cascading Style Sheet ........................................................................16 • การตรวจสอบ Link ในเวบไซต ..........................................................................18 • การกาหนดขอมลเกยวกบเครองเซรฟเวอร ...........................................................19 • การอพโหลดไฟลจากเครองเราสเครองเซรฟเวอร..................................................20
Page 3
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 1
การสรางและดแลเวบดวย Macromedia Dreamweaver MX
• HTML ภาษาพนฐาน
HTML ยอมาจากคาวา Hypertext Markup Language เปนภาษาหลกทใชในการแสดงผลบนเวบ
บราวเซอรในอนเทอรเนต ภาษา HTML แบงออกเปน 2 สวน คอ สวนทเปนขอความทวๆ ไป และสวน
ทเปนคาสงทใชในการกาหนดรปแบบของขอความทแสดง ซงเราเรยกวา แทก (Tag) โดยคาสงของ
HTML จะอยในเครองหมาย < และ >
<คาสง> ขอความ </คาสง>
<TITLE> MY HOMEPAGE <TITLE>
• โครงสราง HTML พนฐาน
โครงสรางของภาษา HTML แบงออกไดเปน 4 สวนหลก ดงน
<HTML>
<HEAD>
<TITLE> หวขอเวบเพจ <TITLE>
</HEAD>
<BODY>
สวนทเปนเนอหา
</BODY>
</HTML>
<HTML>… </HTML> เปนคาสงแรกทตองมในภาษา HTML ซงบงบอกวานคอภาษา HTML โดย
จะอยทจดเรมตนของเอกสารและทายเอกสารในแตละแฟม
<HEAD> … </HEAD> เปนสวนกาหนดรายละเอยดหวขอเรอง ภายในจะมคาสงยอยอกหนงคาสง
คอ <TITLE> … </TITLE> โดยใชชอหวเรองของเวบเพจ ซงจะไปปรากฏอยบน Title bar ของ
บราวเซอร
<BODY> … </BODY> สวนนเปนสวนของเนอหาเวบเพจของเรา ไมวาจะเปนขอความ รปภาพ
ตารางเสยง และการเชอมตอไปยงยงเอกสารอนๆ ทจะแสดงผลทเวบบราวเซอร
Page 4
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 2
• ความสามารถของ Macromedia Dreamweaver
เปนโปรแกรมทใชงานไดงาย คลายกบโปรแกรม FrontPage, HomeSite, HotDog … ผใชสามารถ
ออกแบบองคประกอบตางๆ (เรยกวา Object) ของหนาเวบเพจไดเอง เพยงแคลากสวนตางๆ เขามา
ประกอบกน โดยไมจาเปนตองมความรในเรองของภาษา HTML (แตหากผใชมความรเกยวกบภาษา
HTML กจะเปนประโยชนในเขาใจหลกการทางาน การสราง รวมถงการแกไขไดอยางละเอยด)
1. สนบสนนการทางานแบบ WYSIWYG (What You See Is What You Get) คอ เราสรางอะไร
บนหนาจอ Dreamweaver กจะปรากฏผลแบบเดยวกนทเวบเพจ ทาใหงายตอการใชงาน
2. มเครองมอชวยในการสรางรปแบบหนาจอ และมความยดหยนในการใชงานสง
3. สนบสนนภาษาสครปตตางๆ ทงฝงไคลเอนต และเซรฟเวอร เชน Java, ASP, PHP, CGI,
VBscript
4. มเครองมอในการอพโหลด (Upload) หนาเวบเพจไปทเครองเพอทาการเผยแพร
5. รองรบมลตมเดย เชน เสยง กราฟก
6. มความสามารถทาการตดตอกบฐานขอมล เพอความสะดวกในการเขยนแอพพลเคชนบน
เวบไซต
• เรมตนใชงาน Macromedia Dreamweaver
หลงจากทตดตงโปรแกรม Dreamweaver MX เรยบรอยแลว สามารถเรยกใชงานไดดงน
1. คลกทปม Start
2. All Program > Macromedia
3. เลอก Macromedia Dreamweaver MX จะปรากฏหนาแรกใหเราเลอกหนาตางการทางาน
โดยจะม 2 รปแบบ คอ หนาตางการทางานของโปรแกรม Dreamweaver MX หรอจะใช
หนาตางการทางานแบบ Dreamweaver 4
Page 5
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 3
• แนะนาการใชเครองมอใน Macromedia Dreamweaver MX
• แถบคาสง (Menu bar)
เปนแถบทใชเกบคาสงทงหมดของโปรแกรม
• แถบเครองมอ (Tool bar)
เปนแถบทรวบรวมปมคาสงทใชงายบอย
• แถบสถานะ (Status bar)
• สวนของ Properties (Properties Inspector)
แตละ Object ทเรานามาใชสรางหนาเวบเพจจะมคณสมบตตางๆ ทเราสามารถปรบแตงได
Page 6
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 4
• สวน Panel Group
เปนสวนทเพมขนมาเพอใหสามารถใชในการตดตอกบฐานขอมลฝงเซรฟเวอร เพอใหงายในการสราง
Application บน Internet
• รายละเอยดของแทบ Insert (Insert Bar)
เปนกลมเครองมอองคประกอบตางๆ (Object) ทจะนามาสรางหนาเวบเพจ ม 12 กลม ดงน
แทบ Common
เปนสวนทรวบรวมกลมเครองมอทใชสรางองคประกอบตางๆ ของเวบ เชนการแทรกภาพ การแทรก
ตาราง การกาหนดลงค เปนตน
กาหนดลงค กาหนดอเมลลงค แทรกตาราง
แทรกรปภาพ แทรกFlash แทรกวนท
กาหนดลงคในเวบเพจเดยวกน
แทบ Layout
เปนสวนรวมเครองมอทชวยในการจดองคประกอบของหนาเวบเพจ
Page 7
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 5
แทบ Text
เปนทรวบรวมคาสงเกยวกบการใชงานตวอกษร
แทบ Table
รวบรวมคาสงในการสรางตารางใหกบเวบเพจ
แทบ Frames
รวบรวมคาสงทใชในการแบงหนาเวบเพจใหออกเปนสวนยอย
แทบ Forms
แทรกเครองทใชในการสรางแบบสอบถาม และตวเลอกตางๆ
แทบ Templates
ใชในการกาหนดรปแบบใหกบเวบเพจ
แทบ Characters
เปนกลมเครองมอทใชแทรกตวอกษร และสญลกษณพเศษ
การแทรก Line Break การแทรกทวาง
แทบ Media
ใชสาหรบแทรกไฟลวดโอ, ภาพเคลอนไหว, Flash, Java applet, ActiveX หรอ Plugin ในหนาเวบ
Page 8
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 6
การแทรกไฟล Flash การสรางปมแบบ Flash การสรางตวอกษรแบบ Flash
แทบ Head
เปนการแทรกคาสงเสรมในหนาเวบ เชน คยเวรด เพอให Search Engine สามารถคนหาเวบเราได
แทบ Script
ใชในการแทรกภาษาสครปตในเวบ
แทบ Application
เปนแทบทรวบรวมคาสงทใชสรางแอพพลเคชนตดตอกบฐานขอมลผานเวบเซรฟเวอร
• หนาตางเวบเพจ (Document Window)
สาหรบหนาตางการทางาน Macromedia Dreamweaver MX สามารถเลอกได 3 รปแบบ
Show Code View เปนหนาตางทแสดงเฉพาะ HTML ของเวบเพจทเรากาลงทางานอย
Page 9
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 7
Show Code and Design Views เปนหนาตางทแสดงทง HTMLและหนาเวบเพจทออกแบบ
Show Design View แสดงแตหนาเวบเพจปกตไมแสดง HTML
• ทาให Dreamweaver ใชภาษาไทยได
ตองตดตงฟอนตภาษาไทย (thai addon) หลงตดตงเรยบรอยแลวเมอเขามาทโปรแกรม
Dreamweaver ใหเลอกคาสง Edit > Preferences และเลอก Fonts เพอกาหนดภาษาและชด
ตวอกษร โดยในชอง Font Settings ใหเลอก THAI Windows-874
Page 10
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 8
• เรมตนสรางเวบไซต 1. ไปทเมน Site >New Site
2. เลอกแทบ Advanced
3. Site Name กาหนดชอใหกบเวบไซต
4. Local Root Folder คลก เลอกโฟลเดอรทตองการเกบ เวบไซต
Page 11
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 9
การเรมตนสราง Site งาน ครงแรกโปรแกรมถามวา ตองการสรางไฟล cache สาหรบเวบไซตหรอไม
ไฟล cache ใชในการปรบไฟลตาง ๆ ในเวบไซตใหเชอมโยงถกตอง แมจะยายไฟลขามโฟลเดอร
ยอยกตาม หากไมตองการใหมขอความนเตอนทกครง ให Don’t ask again
5. Dreamweaver จะแสดงโฟลเดอรทเกบไซตใหมในหนาตางแทบ Site
• การสรางโฟลเดอรใหมในเวบไซต
เลอก Files > New Folder จากเมนของแทบ Site หรอคลกขวาทโฟลเดอรทเราเกบเวบไซตเลอก
New Folder
Page 12
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 10
• การสรางเวบเพจใหมในโฟลเดอร
เลอก File>New File จากแทบ Site หรอ คลกขวาทโฟลเดอรทตองการสรางหนาเวบเพจใหม เลอก
New File
• การกาหนดคณสมบตของหนาเวบเพจ (Page Properties)
กอนเรมตนสรางเวบควรเรมกาหนดคณสมบตหลกของหนาเวบกอน โดยการเลอกคาสง Modify >
Page Properties จากเมนบาร หรอคลกขวา เลอกคาสง Page Properties จะพบหนาตาง Page
Properties
รายละเอยดในหนาตาง Properties 1. Title กาหนดหวเรองของหนาเวบ
2. Background Image กาหนดภาพทใชเปนฉากหลงของหนาเวบ
3. Background กาหนดสทตองการใหเปนพนหลงของหนาเวบ
4. Text กาหนดสตวอกษรปกต
5. Links กาหนดสใหกบตวอกษรททาการ Links
6. Visited Links กาหนดสใหกบตวอกษรทเคยคลก Links
7. Links Links กาหนดสใหกบตวอกษรขณะคลก Links
8. Active Links กาหนดสใหกบ Links แบบตาง ๆ
9. Left Margin กาหนดระยะขอบซายของหนาเวบ (ใชกบบราวเซอร Explorer)
10. Top Margin กาหนดระยะขอบบนของหนาเวบ (ใชกบบราวเซอร Explorer)
11. Margin Width กาหนดระยะขอบซายของหนาเวบ (ใชกบบราวเซอร Netscape)
12. Margin Height กาหนดระยะขอบบนของหนาเวบ (ใชกบบราวเซอร Netscape)
13. Document Encoding กาหนดชดตวอกษร (ใหใช Thai Windows-874)
Page 13
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 11
14. Tracing Image และ Image Transparency ใชกาหนดภาพทใชอางองหรอใชเปนเทม
เพลต
• ขอความ (Text)
สามารถพมพขอความไดเหมอนการพมพเอกสารใน MS Word และกาหนดคณสมบตตางๆ เชน
รปแบบขอความ, การจดตาแหนงขอความ (Alignment)
• รปภาพ (Image) 1. เลอกรปทตองการโดยกดปม (Image) หรอไปทเมน Insert> Image
2. เลอกไฟลรปภาพจากเครอง PC
3. พมพคาอธบาย ในหวขอ Alt ( ภาพทนามาแสดงบนเวบเพจ บางครงไมสามารถ Load
ภาพขนมาแสดงได)
• การเชอมโยง (Link) การเชอมโยงภายในเวบเพจเดยวกน
1. กาหนดจด Anchor หรอจด Link ทจะกระโดดไปในหนาเวบเพจนน
2. คลกเมาสทแถบ Common หรอเลอกจากเมน Insert > Named Anchor
Page 14
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 12
3. ตงชอจด Anchor แลวคลกทปม OK
4. คลกคลมขอความทตองการกาหนดใหเชอมโยง กาหนดการเชอมโยง โดยการพมพ #
ตามดวยชอจด Anchor
กาหนดลกษณะของเพจใหมทเชอมโยง
รปแบบการแสดงผลบนเฟรมจากชอง Target ในแถบ Properties หรอเลอกไดจากเมน Modify> Link
Target
1. _blank ใหเปดเพจทเชอมโยงในหนาตางใหมอกหนาตาง
2. _parent ใหเปดเพจทเชอมโยง แสดงเพจหนาเดม
3. _self ใหเปดเพจทเชอมโยง แสดงในเฟรมเดยวกนกบทมขอความอย
4. _top ใหเปดเพจทเชอมโยงขยายเตมหนาจอ
การเชอมโยงภายในเวบไซตเดยวกน
1. คลกเลอกขอความ หรอ รปภาพ ทจะกาหนดใหเชอมโยง
2. กาหนดจดเชอมโยงโดยคลกทปม จาก Properties ทชอง Link
3. เลอกไฟลทตองการเชอมโยง
การเชอมโยงเวบไซตอน
1. คลกเลอกขอความ หรอ รปภาพทจะกาหนดใหเชอมโยง
2. พมพชอ เวบไซต โดยใหพมพ http:// นาหนาชอเวบเพจทเราตองการเชอมโยง ทชอง Link
จาก Properties เชน http://www.swu.ac.th
การเชอมโยงดวยอเมล
1. เลอกขอความ หรออเมล ทตองการกาหนดใหเชอมโยงไปยงอเมล
Page 15
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 13
2. พมพอเมลแอดเดรสทชอง Link จาก Properties โดยพมพคาวา mailto: ตามดวยชออเมลท
ตองการใหสง เชน mailto:[email protected]
การเชอมโยงดวย Map Link
เปนการทาภาพในเวบเพจ ทประกอบดวยพนทยอยทถกกาหนดใหเชอมโยงกบขอมล โดยสามารถคลก
ทสวนตาง ๆ ของภาพเพอเชอมโยงไปยงขอมลทแตกตางกนได
1. คลกภาพทจะสราง Map Link
2. เลอกบรเวณทตองการ Link โดยใชออบเจกต จาก Properties
3. กาหนดพนทของรปภาพทจะเชอมโยง โดยการคลกเมาสคาง แลวลากใหเปนกรอบ
4. เลอกไฟลทตองการเชอมโยง โดยคลก
• ตาราง (Table)
1. คลกเมาส ตาแหนงทตองการวางตาราง
2. คลกทปม เครองมอสรางตาราง Insert Table ในแถบ Object ปรากฏ กรอบทางาน ดงน
กาหนดรายละเอยดของตาราง คอ
• Rows จานวนแถวของตาราง
• Columns จานวนคอลมนของตาราง
• Width ความกวางของตาราง กาหนดหนวยไดทงระบบ % และ Pixel
• Border ความหนาของเสนขอบรอบตาราง
• Cell Padding ระยะหางจากขอบขางในของเซลลเขามาในเซลล มหนวยเปน pixel
• Cell Spacing ความหนาของเสนคนระหวางเซลล
การลบตาราง
1. คลกเลอกตารางทงตาราง
2. กดปม Delete
การลบแถว, ลบคอลมน
1. คลกเลอกแถวหรอคอลมนทตองการลบ
2. กดปมขวาของเมาส ปรากฏเมนลด
3. เลอกคาสง Delete Row หรอ Delete Column
Page 16
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 14
การเพมแถว
1. นาเมาสไปคลกในเซลลสดทายของตาราง
2. กดปม Tab จะไดแถวใหมตอจากแถวสดทายของตารางโดยอตโนมต
การแทรกแถว/คอลมน
1. คลกเลอกแถวหรอคอลมนทตองการแทรก
2. กดปมขวาของเมาส ปรากฏเมนลด
3. เลอกคาสง Insert, Row หรอ Insert Column หรอ Insert Rows or Columns (กรณ
ตองการแทรกมากกวา 1)
• การสรางเฟรมเซตในเวบเพจ เฟรม คอ ลกษณะของการแบงพนทหนาตางหลก ของบราวเซอรออกเปนสวนยอย ๆ เพอใชสาหรบ
แสดงเวบเพจใหแตละสวนแยกจากกนอยางอสระ
วธการแบงเฟรม ไปท แถบ Frames คลกเลอกรปแบบเฟรมตามทไดออกแบบ
กาหนดรายละเอยดหนาตาง Properties
• Borders กาหนดใหแสดง (Yes) / ไมแสดง (No) ขอบลอมเฟรม (Default คอ Yes)
• Border Width กาหนดความหนาของเฟรม ถาไมตองการแสดงขอบเฟรม กาหนดคานเปน 0
• Border Color กาหนดสของขอบเฟรม
• Column (or Row) and Units กาหนดขนาดของคอลมน หรอความสงของเฟรม โดยใหเราระบ
หนวยทใชในชอง Units
• Pixels หนวย pixel แมนยาทสด ในการกาหนดขนาด
• Percent หนวยเปอรเซนตกบเฟรมอนในหนาตาง
• Relative หนวยเปอรเซนตกบขนาดหนาตางบราวเซอร
Page 17
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 15
รายละเอยดแถบ Properties ของหนาเวบในเฟรมยอย
แถบ ของ Panel Group ดานขวามอของโปรแกรมจะม เครองมอ Advanced Layout ? คลกเลอกแถบเฟรม
? คลกสวนใดสวนหนงของเฟรม
ปรากฏรายละเอยด หนาตาง Properties ของหนาเวบในเฟรมยอย
Frame Name ตงชอทใชเรยกเฟรมยอย ซงตองอางถงชอเฟรม เมอมการเชอมโยงกบ
เฟรมใหใชตวอกขระเลกในการตงชอ
Src ใหกาหนดชอและตาแหนงเกบไฟลเวบเพจทจะถกนามาใชในเฟรม
Borders กาหนดใหแสดง (Yes) / ไมแสดง (No) ขอบลอมเฟรมยอย
(Default คอ Yes)
Scroll กาหนดใหแสดง (Yes) / ไมแสดง (No) แถบเลอน (Scroll bar) ในเฟรม
ยอยAutoใหแสดงแถบเลอนเฉพาะ เมอมขอมลเกนกวาทจะแสดงไดบน
หนาจอ (Default คอ Auto)
No Resize สงใหแสดงขอบเฟรมยอย หากไมตองการใหมการใชเมาส ปรบขนาดเฟรม
ใหเชคถกหนาขอความน
Border Color กาหนดสขอบเฟรม
Margin Width
Margin Height
กาหนดระยะหางระหวางหนาเวบในเฟรมยอยกบขอบเฟรม
โดย Margin Width จะวดจากดานซายของเฟรม
Margin Height จะวดจากดานบนของเฟรม
การแทรกเวบเพจลงในเฟรม
1. เปดหนาตางเฟรมโดยเลอกคาสง Window -->Others --> Frames หรอ กด Shift + F2
2. Click เลอกสวนของเฟรมทตองการจะแทรกเวบเพจ
3. Click ท เพอเลอกไฟลเวบเพจทตองการแทรก
4. เลอกไฟลทตองการแทรก ปรากฏหนาเวบเพจในเฟรมทถกเลอกไว
Page 18
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 16
การบนทกเฟรมยอย
1. เลอกคาสง File>Save All หรอกดคย <Ctrl+Shift+S> คอการบนทกทกไฟลทประกอบเปนหนา
เวบเฟรม
2. โปรแกรมจะถามใหบนทกหนาตอไป ซงจะปรากฏเสนประ รอบ ๆ เฟรมยอย โดยจะบนทกจากดาน
ขวาลาง? ซายลาง ? ขวาบน ? ซายบน จนครบทกเฟรมยอม (ควรตองชอใหเหมาะกบตาแหนง
เฟรม)
หากมการแกไขหรอเปลยนแปลงทกครงตอง ใชคาสงบนทก File > Save All Frames
การเชอมโยงหนาเวบในเฟรม
1. ลากเมาสเลอกขอความทตองกาหนดเปน Link
2. Click mouse ปม เพอเลอกไฟลทจะเชอมโยงดวยในแถบ Properties
3. เลอกไฟลทตองการเชอมโยงดวยแลว Click ปม selete
4. กาหนดรปแบบการแสดงผลบนเฟรมจากชอง Target ในแถบ Properties ตวอยางเราเลอก Main
Frame คอ เฟรมทอยดานขาวมอ
• _blank เปดเพจใหมขนมา
• _parent แสดงเพจหนาเดม โดยจะลบเฟรมออก
• _self แสดงในเฟรมเดยวกนกบทมขอความอย
• _top ขยายเตมหนาจอ
รปแบบทเพมมาจากการเชอมโยงปกต คอ • mainFrame แสดงเพจใหมในหนา mainframe
• topFrame แสดงเพจใหมในหนา topFrame
• leftFrame แสดงเพจใหมในหนา leftFrame
5. เซฟแลวตรวจสอบผานบราวเซอร เมอ Click ท Link หนาเวบเพจทสามารถเชอมโยงได จะถก
แสดงในสวนเฟรมทกาหนดไว
• การใช Cascading Style Sheet
เปดหนาตาง CSS Styles โดยเลอก Window > CSS Styles
Page 19
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 17
คลกปม หรอเลอกคาสง Text > CSS > Edit Style Sheet คลกปม New
จะมรปแบบใหเลอก 3 รปแบบ ดงน
• Make Custom Style เปนการสรางแบบกาหนดชอใหม(เรยกวา Class)
• Redefine HTML Tag เปนการระบคาสง HTML ทจะเปลยนรปแบบใหเปนสไตลใหม
• Use Css Selector เปนการกาหนดสไตลให Link ในแตละแบบ
Define In คอการกาหนดสไตลตามรปแบบตอไปน
• New Style Sheet File กาหนดใหสรางสไตลขนมาใหม
• This Document Only กาหนดใหใชไฟลเอกสารนเทานน
คลกปม OK
กาหนดรปแบบทตองการใหกบสไตลชท
• การนาสไตลชทมาใชงาน
คลกปม เลอกไฟลสไตลชททเกบไว แลวคลกปม OK
Page 20
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 18
โปรแกรมจะทาการสรางโคดให ดงน <link href="/style_sheet/testcss.css" rel="stylesheet"
type="text/css"> หมายถงการทเราเรยกใชไฟลสไตลชททสรางขน
• การตรวจสอบ Link ในเวบไซต
ในระหวางการสรางเวบไซต อาจมการกาหนด Link ใหเชอมโยงไปยงไฟลตางๆ แตบางครงเราอาจ
ไมไดสรางไฟลนนขนมา ทาใหเวบของเราเกดปญหา Link เสยหรอ Broken Link เราสามารถตรวจสอบ
ปญหานไดโดย
2. เลอกโฟลเดอรทตองการตรวจสอบ Broken Link
3. เลอก File > Check Links
4. Dreamweaver จะตรวจสอบทก Link ในโฟลเดอรและไฟลตาง และสรปใหเราทราบ โดยแบง
แสดงเปน 3 กลม ดงน
• Show Broken Link แสดง Link แบบ Relative ทเสย
• Show External Links แสดง Link แบบ Absolute ทเชอมโยงไปนอกเวบไซต
• Show Orphaned Files แสดงไฟลทไมไดเชอมโยงกบทใดเลย
Page 21
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 19
• การกาหนดขอมลเกยวกบเครองเซรฟเวอร
กอนทเราจะทาการอพโหลดขอมลไปยงเครองเวบเซรฟเวอรไดนน เราจาเปนตองทราบ ชอเครองเวบ
เซรฟเวอร, Account Name และ Password กอนจงจะสามารถนาขอมลขนไปเกบยงเครองเวบ
เซรฟเวอรได
1. เลอก Site > Edit Sites
2. เลอกเวบไซต กดปม Edit
3. เลอก Remote Info
4. เลอก FTP
• FTP HOST พมพชอเครองเซรฟเวอร >> www.swu.ac.th
• Host Directory กาหนด directory ของเครอง (สวนใหญเราไมตองระบ)
• Login พมพชอ Account >> www
• Password พมพรหสผาน
• Check เลอก Use Passive FTP สาหรบการเชอมตอกงเครองเวบเซรฟเวอรทมการตดตง
ระบบ Firewall
Page 22
การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล
เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 20
• การอพโหลดไฟลจากเครองเราสเครองเซรฟเวอร 1. เลอกไฟลและโฟลเดอรทตองการอพโหลด
2. คลกปม Put Files เพอนาไฟลเขาเครองเซรฟเวอร หรอ คลกปม Get Files เพอนาไฟล
จากเครองเซรฟเวอรมายงเครอง PC ทเราทางาน