Dreamweaver MX

The Welcome window ใหคําแนะนําเกี่ยวกับการตั้งคา workspace เพื่อจุดประสงคตางๆ และใหขอมูลเกี่ยวกับ feature ใหมๆใน Dreamweaver MX The Insert bar ประกอบดวยปุมที่ใชในการแทรกวัตถุตางๆ เชนรูปภาพ, ตาราง และ

layer ลงในงานของเรา The Document toolbar ประกอบดวย Design view และ code view The Document window แสดงผลงานที่กําลังทําอยู The Property inspector ทําใหสามารถดูและเปลี่ยนแปลงคา properties ของวัตถุหรือตัวอักษรท่ีเลือกได (โดยวัตถุแตละชนิดจะมีคา properties ที่แตกตางกันออกไป) Panel groups เปนกลุมของชุดเครื่องมือที่ทํางานในสิ่งเดียวกัน สามารถเปดไดโดยคลิกที่รูปลูกศรทางซายมือของชื่อ group และสามารถนําออกมาไดโดยคลิกที่กลุมของจุดทางซายมือของลูกศรแลวลากออกมา The Site panel ทํางานเกี่ยวกับการจัดการไฟลและโฟลเดอรในการสราง site

Common Attributes ประกอบดวยเครื่องมือตางๆที่มีการใชบอยๆ คลิกที่ปุมเครื่องมือเพื่อแทรกวัตถุตางๆ

Icon ตางๆเรียงตามลําดับหมายถึง

• Links • Email • Anchor Link

• Insert Table • Draw layer

• Image • Image Place holder • Fireworks • Flash • Rollover Image • Navigation bar

• Horizontal rule • Date • Tabular Data

Layout กลุมคําส่ังที่ใชแทรก Object ที่ใชจัดการกับโครงสรางของเว็บเพ็จเชน ตาราง, เลเยอร และทํางานกับมุมมอง Layout เปนตน

1. Insert Table 2. Draw Layer

Text กลุมคําสั่งที่ใชสําหรับจัดรูปแบบขอความภายในเว็บเพ็จ เชนหัวเรื่อง ตัวหนา ตัวเอียง

1. Font Tag Editor 2. Bold 3. Italics 4. Strong

5. Emphasis 6. Paragraph 7. Block Quote 8. Preformatted Text 9. Heading 1 10. Heading 2 11. Heading 3 12. Unordered List 13. Ordered List 14. List Item 15. Definition List 16. Definition Term. 17. Definition Description 18. Abbreviation 19. Acronym

Table กลุมคําสั่งที่ใชสําหรับแทรกตาราง

Frames กลุมคําสั่งสําหรับแบงเว็บเพ็จออกเปน Frame ยอยๆ

1. Left Frame 2. Right Frame 3. Top Frame 4. Bottom Frame 5. Bottom and Nested Left Frame 6. Bottom and Nested Right Frame 7. Left and Nested Bottom Frame 8. Right and Nested Bottom Frame 9. Top and Bottom Frames 10. Left and Nested Top Frame 11. Right and Nested Top Frame 12. Top and Nested Left Frame 13. Top and Nested Right Frame

Forms กลุมคําสั่งสําหรับแทรก Object ที่ใชสําหรับสรางแบบฟอรมในเว็บเพ็จ

1. Form 2. Text Field 3. Hidden Field 4. Text area 5. Checkbox 6. Radio Button 7. Radio Group 8. List/Menu 9. Jump Menu 10. Image Field 11. File Field 12. Button 14. Field set

Characters กลุมคําสั่งสําหรับแทรกอักขระพิเศษ

1. Line Break 2. Non-breaking Space 3. Left Quote 4. Right Quote 5. Em Dash 6. Pound

7. Euro 8. Yen 9. Copyright 10. Registered Trademark 11. Trademark 12. Other Characters Media กลุมคําส่ังสําหรับแทรก multimedia จาก flash, Active X, Shockwave Head กลุมคําส่ังที่ใชสําหรับแทรก tag พิเศษที่อยูสวนหัวของเว็บเพ็จ เชน META, Keyword, Description Script กลุมคําส่ังที่ใชสําหรับแทรก code ภาษา script Application กลุมคําส่ังที่ใชสําหรับแทรก Application และฐานขอมูล

Document Views Dreamweaver มีหลายมุมมองในการจัดการกับงาน ซึ่งสามารถเปลี่ยนมุมมองตางไดโดยคลิกเลือกรูปแบบมุมมองใน Document views ซึ่งประกอบดวย

Code view ในการเปลี่ยนแปลงทุกอยางกับงานไมวาจะเปนการสราง การแทรกวัตถุตางๆ ลงในงาน Dreamweaver จะแปลงเปน HTML code และในการดูและแกไข code นี้ทําไดโดยเลือก มุมมอง Code view

Code & Design view เปนมุมมองผสม ซึ่งจะแสดงทั้ง code และ ผลงานที่จะแสดงออกมา

Design view มุมมองนี้เปนมุมมองแสดงผลตามที่จะเกิดขึ้นใน Internet explorer

Launcher Bar เปนแถบรวมปุมคําสั่งที่ใชสําหรับเปดปดพาเนลตางๆ

Tag Selector จะแสดงอยูที่มุมซายลางของWindow Document เมื่อคลิกที่ออบเจ็ค จะปรากฏแท็กคําสั่งขององคประกอบดังกลาว ใชดูความสัมพันธระหวางแท็กและสามารถแกไขได

Properties Inspector แสดงคุณสมบัติตางๆของออบเจ็คที่เลือกและแสดงคําสั่งในการจัดการ

การสรางและแกไขไซท Dreamweaver site มี 3 สวนคือ Local Folder เปนไดเรคทอรีที่เก็บเว็บไซทที่คุณสรางขึ้นมาในเครื่องของตัวเองเรียกวา Local Site Remote Folder เปนไดเรคทอรี่ที่ใชเก็บและเผยแพรเว็บไซทที่อยูบนserver เรียกวา Remote Site Folder for Dynamic Page เปนไดเร็คทอรีที่ใชเก็บและประมวลผลไดนามิกเพ็จหรือเว็บที่มีการใช server side script ข้ันตอนการสรางไซท

1. เลือกคําสั่ง site > new site จากเมนู 2. จะปรากฏ site definition for Untitled site 1 ใหคลิกที่แถบ basic 3. สามารถใสชื่อsiteของคุณไวในชองวางแลวกด next

4. เลือกวาคุณตองการใช server technology หรือไมแลวกด next

5. เลือกไดเรคทอรี่ที่ตองการแลวกด Next

6. หลังจากนั้นโปรแกรมจะถามเรื่องการ sharing file

7. จะปรากฏหนาจอแสดงรายละเอียดทั้งหมด แลวกด done

การสรางเว็บเพ็จ เลือกคําสั่ง File > new แลวเลือกประเภทเว็บเพ็จที่ตองการ

การกําหนดคุณสมบัติพื้นฐานของเว็บเพ็จ ทําไดโดยใชคําสั่ง Page Properties 1. เลือกคําสั่งจาก Modify>>Page Properties หรือกดคีย Ctrl+j 2. จากนั้นกําหนดคุณสมบัติของหนาเว็บเพ็จ

1. Title ข่ือของเว็บเพ็จที่จะปรากฏบน Title bar ของโปรแกรม Browser เวลาแสดงผล 2. Background Image ชื่อของรูปภาพที่จะปรากฏเปนพื้นหลังของเว็บเพ็จ

3. Background กําหนดสีพื้นฉากหลังของเว็บเพ็จ 4. Text สีของขอความทั่วไปในเว็บเพ็จ 5. Link สีของขอความที่เปน Hyperlink 6. Visited link สีของขอความ link ที่ถูกคลิกไปแลว 7. Active Link สีของขอความ link ที่กําลังถูกคลิกอยู 8. Margin การกําหนดระยะขอบของเว็บเพ็จ 9. Document Encoding กําหนดภาษาของเว็บเพ็จ 10. Tracing Image กรณีตองการนําภาพตัวอยางมาวางเพื่อชวยในการออกแบบ 11. Image transparency ปรับความโปรงใสของภาพ tracing Image 12. Document Folder แสดงชื่อ Folder ที่จัดเก็บไฟลปจจุบัน 13. Site folder แสดงชื่อ folder ที่เก็บเว็บไซท

การใสเนื้อหาลงในเว็บเพ็จ การเวนวรรคระหวางขอความ ตองใชอักขระพิเศษสําหรับเวนวรรคคือ &nbsp ซึ่งสามารเลือกใสได 2 วิธี 1. กดคีย Ctrl+shift+space 2. คลิกปุม Non-breaking space ที่ tab insert ใน tab Character การขึ้นบรรทัดใหมในยอหนา ปกติการกดคีย Enter ถือวาเปนการขึ้นยอหนาใหม แตบางครั้งเราตองการขึ้นบรรทัดใหมกอนจบยอหนา สามารถทําได 2 วิธี 1. กดคีย Shift+Enter 2. คลิกปุม Line break ใน Tab Insert>>Character การจัดรูปแบบขอความ รูปแบบยอหนาของ HTML ในชอง Format ของ Properties ใชสําหรับกําหนดรูปแบบซึ่งจะมีผลตอการกําหนดขอความทั้งยอหนา

การจัดรูปแบบของขอความ

1. Minimize: คลิกเพ่ือซอนหนาตาง 2. Format: กําหนดรูปแบบของยอหนา 3. Font: เลือกรูปแบบของ font 4. Size: เลือกขนาดของ font 5. Text Color: เลือกสีของ font 6. Hexadecimal Color Value 7. Bold 8. Italic 9. Align Left 10. Align Center 11. Align Right 12. Justify 13. Link: สําหรับใส URL ของลิงค 14. Point to File 15. Browse for File 16. Target: เลือกไดวาตองการเปดlinkน้ันแบบไหน 17. Unordered List 18. Ordered List 19. Text Out dent: เลื่อนระยะยอหนาไปทางซาย

20. Text Indent: เลื่อนระยะยอหนาไปทางขวา 21. Help 22. Expand/Collapse

การใสรูปภาพลงในเว็บเพ็จ ภาพกราฟกที่นิยมนํามาใชงานมากที่สุดคือประเภท GIF และ JPG ใน Dreamweaver เม่ือนํารูปภาพมาวางในงาน โปรแกรมจะสรางโคด HTML ที่เปนคําสั่งในการแทรกรูปภาพคือแท็ก <IMG> ที่จะระบุตําแหนงที่เก็บรูปภาพและขนาดของรูปภาพเพื่อใหการทํางานเปนไปอยางถูกตอง และจะตองบันทึกรูปภาพนั้นเก็บไวใน site ดวย การแทรกรูปภาพลงในเว็บเพ็จมีข้ันตอนดังนี้ 1. คลิกวางเคอรเซอรตรงจุดที่ตองการวางรูปภาพใน Document window 2. คลิกที่ปุม Image ที่แท็บ Common ของ Insert bar 3. คลิกที่ชอง Look in เพื่อเปดไปยังตําแหนงที่เก็บรูปภาพ

4. คลิกที่ปุม view และเลือกแสดงรูปภาพแบบ Thumbnail (ใชไดใน Windows ME, Windows 2000, Windows XP)

5. คลิกเลือกรูปภาพที่ตองการ และดูตัวอยางรูปทางดานขวา 6. คลิก OK 7. ถาโปรแกรมแสดงขอความแจงวารูปภาพนี้อยูนอก Site จะตอง copy เขามาไวในเว็บไซท

โดยใหตอบ Yes 8. เลือกตําแหนงโฟลเดอรที่จะเก็บรูปภาพในเว็บไซท (ควรสรางโฟลเดอร Images เอาไว

สําหรับเก็บรูปภาพเพื่อจะไดรวบรวมไฟลภาพใหเปนหมวดหมู) 9. คลิก Save การปรับแตงคุณสมบัติตางๆของรูปภาพ หลังจากที่นํารูปภาพมาวางไวในเว็บเพ็จแลว คุณสามารถปรับแตงคุณสมบัติเฉพาะของรูปภาพเพิ่มเติม โดยการใช Properties Inspector ดังนี้

การใสกรอบใหรูปภาพ ทําไดโดยระบุความหนาของเสนกรอบในชอง Border บน Properties Inspector

การจัดตําแหนงรูปภาพเทียบกับขอความ ทําไดโดยใชออปชั่น Align ในแถบ Properties Inspector ซึ่งจะมีตัวเลือกดังนี้

♦ Default ไมระบุตําแหนงการแสดงผล ขึ้นอยูกับ browser ♦ Baseline และ Bottom จัดใหขอบดานลางของภาพอยูในแนวเดียวกับเสนฐานตัวอักษร ♦ Top จัดขอบบนของภาพใหอยูในแนวเดียวกับสวนบนของตัวอักษรหรือออปเจ็คสูงที่สุด ♦ Middle จัดใหจุดกึ่งกลางของภาพอยูในแนวเดียวกับเสนฐานตัวอักษร ♦ Text Top จัดใหขอบบนของภาพอยูในแนวเดียวกับสวนบนของตัวอักษรที่สูงที่สดุ ♦ Absolute Middle จัดจุดกึ่งกลางของภาพใหอยูแนวเดียวกับกึ่งกลางบรรทัดขอความ ♦ Absolute Bottom จัดใหขอบลางของรูปภาพอยูในแนวลางสุดของบรรทัด ♦ Left จัดรูปภาพไวดานซายสุดของขอความ ♦ Right จัดรูปภาพไวดานขวาสุดของขอความ

การสราง Hyperlink Hyperlink หรือที่เรียกส้ันๆวา Link คือการสรางจุดเชื่อมโยงเอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง หรือจากเอกสารหนึ่งไปยังอีกเอกสารหนึ่ง โดยใชขอความ, รูปภาพ หรือเมนูเปนตัวนําทางไปยังเอกสารดังกลาว ซึ่งเนื้อหาขอมูลอาจเกี่ยวขอกันหรือไมก็ได เพราะเอกสารเว็บเพ็จมีจํานวนมากและไมสามารถนํามาวางหนาเดียวกันไดหมด จึงนิยมสรางลิงคขึ้นมาเพื่อใหผูเขาชมสามารถคลิกกระโดดไปยังตําแหนงตางๆภายในเว็บไซทไดงายขึ้น ใน Internet แตละไฟลหรือแตละเว็บเพ็จที่สรางขึ้นจะมีที่อยูที่เราสามารถอางถึงที่ไมซ้ํากันซึ่งเราเรียกวา Uniform Resource Locator (URL) รูปแบบของ URL ประกอบดวย 3 สวนดวยกันไดแก

♦ โปรโตคอล (Protocol) ♦ โดเมน (Domain) ♦ ที่อยูไฟลในโดเมน (Path)

องคประกอบของ Hyperlink ในการทํางานของ Hyperlink จะเกิดข้ึนไดตองมีองคประกอบ 2 สวนดวยกันคือ 1. ตนทาง (Source Anchor) หมายถึงขอมูลบนเว็บเพ็จที่เมื่อเลื่อนเมาสไปชี้ เมาสพอยเตอร

จะเปลี่ยนเปนรูปมือ และเมื่อคลิก เอกสารหรือขอมูลปลายทางจะถูกเปดขึ้นมาซึ่งตนทางอาจเปนรูปภาพหรือขอความก็ได นอกจากนี้ยังสามารถนํารูปภาพเดียวมาแบงเปนลิงคไปยังปลายทางหลายแหงที่ตางกันไดอีกดวยที่เรียกวา “Image Map”

2. ปลายทาง (Destination Anchor) คือ URL ที่อางถึงเอกสาร, ไฟล, โปรแกรมหรือแหลงขอมูลใดๆบน Internet สําหรับปลายทางที่อยูบนเว็บไซทเดียวกันจะใชไดทั้ง URL แบบยอและแบบเต็ม แตถาเปนปลายทางที่เว็บไซทอื่นตองเปนแบบเต็มเทานั้น การสราง Hyperlink สามารถกําหนดปลายทางไดหลายรูปแบบ ดังนี้

♦ การลิงคภายในเว็บเพ็จเดียวกัน (Name Anchor) ♦ การลิงคภายในเว็บไซท (Web Page/File) ♦ การลิงคไปยังเว็บไซทอื่น (URL/Website) ♦ การลิงคอีเมล (E-mail Link)

การลิงคไปยังเว็บเพ็จเดียวกัน (Name Anchor) ใชในกรณีที่เว็บเพ็จนั้นมีเนื้อหายาว และเนื้อหาอาจแบงเปนหัวขอยอยๆ ทําใหผูชมเลื่อนไปยังตําแหนงที่ตองการไดชาลง ดังนั้นอาจทําสารบัญหรือดัชนีไวตอนบนของเว็บเพ็จ และสรางลิงคไปยังสวนตางๆภายในเอกสาร การสรางลิงค ภายในเว็บเพ็จเดียวกันประกอบดวย 2 ขั้นตอน คือ

♦ สราง Name Anchor หรือการกําหนดชื่อใหกับจุดที่จะเชื่อมโยงไป ♦ สรางลิงคไปยัง Name Anchor ที่สรางไว

การสราง Name Anchor 1. เลือกขอความหรือรูปภาพที่จะสรางเปนจุด Name Anchor 2. คลิกที่ปุม Name Anchor ที่แท็บ Common บน Insert bar

3. ตั้งชื่อของ Name Anchor (หามเวนวรรค) จากนั้นคลิก OK

4. จะปรากฏรูปสมอเรือตรงตําแหนงที่เลือก

การสรางลิงคไปยัง Name Anchor 1. เลือกขอความหรือรูปภาพที่จะสรางเปนลิงค 2. พิมพชื่อของ Name Anchor ที่ชอง Link ในแถบ Properties Inspector โดยใสเครื่อง

หมาย # นําหนาชื่อ เชน #Action 3. ทดสอบการทํางานของลิงคโดยกดคีย F12 และลองคลิกที่ลิงคที่สรางไว การสรางลิงคอยางงาย ทําไดโดย 1. เลือกขอความที่จะเปนลิงค 2. คลิกปุม point to file คาง แลวลากไปวางที่สัญลักษณของ Name Anchor ที่ตองการจน

ปรากฏชื่อ Name Anchor ในชอง Link จากนั้นปลอยเมาส การลิงคภายในเว็บไซท (Web Page/File) เปนการสรางลิงคภายในเว็บไซทเดียวกัน จากหนาหนึ่งไปยังอีกหนาหนึ่ง (ไฟล HTML หรือไปยังไฟลอื่นๆ) ทําไดโดย 1. เลือกขอความหรือรูปภาพที่ตองการทําเปนลิงค 2. คลิกที่ปุม Browse for File 3. คลิกเลือกชื่อไฟลทีตองลิงคไปหา

4. คลิกปุม OK 5. ถาตองการกําหนดเฟรมหรือวินโดวปลายทางที่ตองการใหเว็บเพ็จนี้แสดงผล ก็เลือกจาก

ชอง Target ♦ _blank ใหเปดเว็บเพ็จปลายทางในวินโดวใหม ♦ _self ใหแสดงเว็บเพ็จในเฟรมเดิมหลังจากเลือกลิงค ♦ _parent ใหแสดงเว็บเพ็จในเฟรมที่ครอบเฟรมปจจุบันอยู ♦ _top ใหแสดงเว็บเพ็จในวินโดวเดิม โดยยกเลิกเฟรมที่ครอบอยูทั้งหมด

6. ทดสอบการทํางานของลิงคภายในเว็บไซท วิธีสราง Hyperlink อยางงาย 1. คลิกปุม Links บน Insert bar แท็บ Common 2. จะปรากฏ Dialogue box ของ Hyperlink ข้ึนมา

♦ พิมพขอความที่เปนลิงคที่ชอง Text ♦ คลิกปุม Browse for File ของ Link เพื่อเลือกไฟลที่จะลิงคไปหา ♦ กําหนดวินโดวหรือเฟรมปลายทางในชอง Target

3. คลิกปุม OK

การลิงคไปยังเว็บไซทอื่น (Website) เปนการสรางลิงคไปยังเว็บไซท เว็บเพ็จ รูปภาพ โปรแกรม หรือแหลงขอมูลอื่นที่อยูภายนอกเว็บไซทของเรา

1. เลือกขอความหรือรูปภาพที่จะทําเปนลิงค 2. ใส URL ปลายทางลงในชอง Properties Inspector (URL ปลายทางตองระบุแบบเต็มคือ

http://www.ชื่อเว็บไซท) เชน http://www.cnn.com 3. เลือกวินโดวหรือเฟรมปลายทางที่จะแสดงเว็บเพ็จในชอง Target

การลิงคไปยังอีเมล การสรางลิงคไปยังอีเมล คือการระบุชื่ออีเมลแอดเดรสเปนปลายทางของลิงคซึ่งเมื่อคลิกจะมีการเปดโปรแกรมอีเมลข้ึนมา (ตามคา Default ที่กําหนดไวในเครื่องนั้นๆ เชนโปรแกรม Outlook Express) พรอมกับนําที่อยูอีเมลในลิงคไปใสในชอง To โดยอัตโนมัติทําใหสามารถกรอกขอมูลและสง E-mail ไดเลย 1. เลือกขอความหรือรูปภาพที่จะทําเปนลิงค 2. ใสแอดเดรสปลายทางในชอง Link บน Properties Inspector โดยแอดเดรสปลายทางตอง

ระบุในรูปแบบ mailto:อีเมลแอดเดรส เชน mailto:mymail@hotmail.com

การสราง Image Map Image Map คือการนํารูปภาพมาแบงเปนสวนยอยๆเพื่อกําหนดเปน hyperlink ที่แตกตางกัน โดยสามารถสรางลิงคไดหลายลิงคในหนึ่งรูป นอกจากนี้ยังสามารถกําหนดรูปทรงของ

hyperlink ไดหลากหลายเชน ส่ีเหลี่ยม วงกลม เปนตน สําหรับพื้นที่ยอยแตละสวนของ hyperlink นั้นเราเรียกวา Hotspot ข้ันตอนการสราง 1. คลิกเลือกรูปภาพที่ตองการนํามาทําเปน Image Map 2. เลือกเครื่องมือ Image Map บน Properties Inspector ทางดานลางซาย 3. คลิกลากบนรูปภาพเพื่อวาดรูปทรงกําหนดขอบเขตของ Image Map 4. คลิกในชอง Link เพื่อกําหนด URL หรือชื่อไฟลที่จะลิงคไปหา 5. กําหนดเฟรมหรือวินโดวปลายทางที่จะแสดงผลในชอง Target 6. ใสขอความอธิบายลิงค (ซึ่งจะแสดงเมื่อผูชมเลื่อนเมาสไปชี้ที่ลิงค) ลงในชอง Alt 7. ทําซ้ําขั้นตอนที่ 2-6 เพื่อสราง Hotspot สวนอื่นๆในรูปภาพ 8. ทดสอบการทํางานของ Image Map โดยคีย F12 แลวเลื่อนเมาสไปคลิกบนขอบเขตที่

กําหนดไว

การแกไข Image Map 1. เลือกรูปภาพ Image Map แลวคลิกที่เครื่องมือรูปลูกศร บนแถบ Properties Inspector 2. คลิกเลือกรูปทรงของ Hotspot ที่ตองการแกไข

♦ การลบใหกดคีย Delete ♦ การปรับขนาดใหชี้เมาสที่จุดส่ีเหลี่ยมรอบๆ Hotspot แลวคลิกลากตามตองการ ♦ คลิกเมาสลากที่กลางรูปทรง เพื่อยายตําแหนงหรือใชวิธีกดคียลูกศร ♦ การแกไขลิงค ใหเปลี่ยนคาในชอง Link บน Properties Inspector

♦ การสลับตําแหนงหนา-หลังของ Hotspot ที่ซอนทับกัน ใหคลิกขวาบนรูปทรงแลวเลือก Bring to Front หรือ Send to back

การสรางลิงคแบบ Rollover Image เปนการสรางลิงคแบบใช Effect สลับรูปภาพ effect นี้เปนคุณสมบัติของ DHTML (Dynamic HTML) rollover Image จะทํางานเมื่อมีการเลื่อนเมาสไปวางเหนือรูปภาพ โดยจะเปลี่ยนไปเปนอีกรูปหนึ่ง โดยในการสราง Rollover Image ควรจะเลือกเลือกรูปภาพที่มีขนาดเทากัน 2 ภาพ เพื่อที่ภาพจะไดไมกระตุกมากเวลาเปลี่ยนไปเปนอีกภาพ มีขั้นตอนในการทําดังนี้ 1. เลือกคําสั่ง Insert >> Interactive Images >> Rollover Image จะปรากฏ Dialogue

box Insert Rollover Image ขึ้นมา 2. พิมพชื่อของ Rollover ลงในชอง Image Name 3. คลิกปุม Browse เลือก Original Image (รูปที่แสดงครั้งแรก) 4. คลิกปุม Browse เลือก Rollover Image (รูปที่แสดงเมื่อผูชมวางเมาสเหนือรูป) 5. พิมพ Alternate Text (ขอความอธิบายลิงค) 6. พิมพชื่อเว็บเพ็จ/เว็บไซทที่จะลิงคไปหาในชอง When Click Go to URL และคลิก OK

การออกแบบเว็บเพ็จดวยตาราง (Table) จะชวยในการจัดวาง Layout ของเว็บเพ็จไดอยางสวยงาม และยังชวยในการจัดวางตําแหนงการแสดงผลของขอความหรือรูปภาพไดตามตําแหนงที่ตองการ การสรางและแกไขตาราง 1. คลิกที่ปุม Insert Table ในแท็บ Common บน Insert bar 2. ใน Dialogue box ของ Insert bar ใหกําหนดคุณสมบัติของตารางตามที่ตองการ

1. Row จํานวนแถว 2. Column จํานวนคอลัมน 3. Width ความกวางตารางทั้งหมด กําหนดเปน Pixel หรือ Percent 4. Border ความหนาของเสนขอบตาราง (เปน 0 ถาไมตองการแสดงเสนขอบ) 5. Cell Padding กําหนดระยะหางระหวางขอความกับเสนขอบเซลล 6. Cell Spacing กําหนดระยะหางระหวางเซลลแตละเซลล

3. คลิก OK จะไดตารางตามที่กําหนด จากนั้นไปใชคําสั่งที่ Properties Inspector เพื่อกําหนดคุณสมบัติดานอื่นๆของตารางตามที่ตองการเชน สี, ตําแหนง เปนตน

การเลือกสวนตางๆของตาราง การเลือกทั้งตาราง

เลื่อนเมาสพอยเตอรไปที่มุมใดมุมหนึ่งของตารางจนเมาสพอยเตอรเปลี่ยนเปนรูป แลวคลิกที่ขอบตารางจนเกิดกรอบสีดําขึ้นมา การเลือกแถว เลื่อนเมาสพอยเตอรไปดานหนาของแถวจนเมาสพอยเตอรเปลี่ยนเปนรูปลูกศรขวาแลวคลิก การเลือกคอลัมน เลื่อนเมาสพอยเตอรไปดานบนของคอลัมนจนเมาสพอยเตอรเปลี่ยนเปนรูปลูกศรชี้ลงแลวคลิก การเลือกเซลล คลิกเมาสใหปรากฏเคอรเซอรใน cell ที่ตองการ การเลือกครั้งละหลายๆเซลลใหกด ctrl คางไวแลวคลิกเลือกจนครบทุกเซลล

การแทรกแถวและคอลัมน 1. เลือกแถวหรือคอลัมนตรงจุดที่ตองการแทรก 2. คลิกเมาสขวาตรงตาํแหนงที่เลือกเพื่อเปดเมนูลัดขึ้นมา จากนั้นเลื่อนไปที่คําสั่ง Table >>

Insert Row เพื่อแทรกแถวหรือ Insert Column ถาตองการแทรกคอลัมน การลบแถวหรือคอลัมน 1. เลือกแถวหรือคอลัมนที่ตองการจะลบ 2. คลิกเมาสขวาที่ตําแหนงที่เลือก เพื่อเปดเมนูลัดขึ้นมา จากนั้นเลื่อนไปที่คําสั่ง Table >>

Delete Row เพื่อลบแถวหรือ Delete Column เพื่อลบคอลัมน การแยกเซลล (Split Cell) 1. เลือกเซลลที่ตองการจะแยกออก 2. คลิกเมาสขวาที่ตําแหนงที่เลือกเพื่อเปดเมนูลัดขึ้นมา จากนั้นเลื่อนไปที่คําสั่ง Table >>

Split Cell ... 3. เลือกวาจะแยกเซลลเปนแถวหรือคอลัมน 4. กําหนดจํานวนแถว หรือคอลัมนที่ตองการแยกออกแลวคลิก OK การรวมเซลล (Merge Cell) 1. เลือกเซลลทั้งหมดที่ตองการรวมเขาดวยกัน 2. คลิกขวาที่ตําแหนงที่เลือก เพื่อเปดเมนูลัด แลวเลือกคําสั่ง Table >> Merge Cell การกําหนดคุณสมบัติของตาราง 1. เลือกตารางตามที่ตองการ 2. แกไขคุณสมบัติตางๆของตารางที่ Properties Inspector

♦ Table ID ชื่อของตาราง ♦ Row จํานวนแถว ♦ Column จํานวนคอลัมน ♦ W ความกวาง กําหนดเปน % หรือ Pixel ♦ H ความสูง กําหนดเปน % หรือ Pixel ♦ Cell Pad กําหนดระยะหางระหวางขอความกับเสนขอบเซลล ♦ Cell Space กําหนดระยะหางระหวางเซลลแตละเซลล ♦ Align การจัดวางตารางในตําแหนงซาย ขวา หรือกึ่งกลางหนาเว็บเพ็จ ♦ Bg Color กําหนดสีฉากหลังในตาราง ♦ Border ความหนาของเสนขอบตาราง ♦ Brdr สีเสนขอบตารางและเสนขอบเซลล ♦ Bg Image กําหนดรูปภาพบนฉากหลังตาราง

การจัดรูปแบบตารางอัตโนมัติ 1. คลิกในสวนใดสวนหนึ่งของตาราง

2. เลือกคําสั่งจากเมนู Command >> Format Table 3. คลิกเลือกชื่อรูปแบบและดูรูปตัวอยางทางดานขวา 4. รายละเอียดที่กําหนดในรูปแบบที่เลือก สามารถเปลี่ยนแปลงไดตามตองการ 5. คลิก Apply เพื่อดูผลลัพธ หากยังไมพอใจสามารถเลือกแบบใหมตอได 6. คลิก OK เมื่อเลือกรูปแบบไดแลว

การจัดหนาเว็บเพ็จดวย Layer การเพิ่ม Layer ลงในหนาเว็บเพ็จ 1. คลิกที่ปุม Draw Layer ที่แท็บ Common บน Insert bar 2. นําเมาสพอยเตอร ซึ่งเปลี่ยนเปนรูป + คลิกวาดหรอบสี่เหลี่ยมลงในวินโดว Document ใน

ขนาดที่ตองการ 3. คลิกใน layer เพื่อพิมพขอความ แทรกรูปภาพ หรือออปเจ็คตางๆไดตามตองการ

♦ คลิกที่รูป เพื่อเลือกเลเยอร ♦ คลิกลากที่จุด Resize Handle เพื่อปรับขนาดของเลเยอร

คุณสมบัติของ Layer Panel สามารถปรับแตงคุณสมบัติไดที่ Windows >> Others >> Layers วิธีการแสดงเนื้อหาที่ใหญกวาขนาดของ Layer ทําไดโดยเลือก option overflow จาก properties inspector ดังนี้ ♦ Visible ใหขยายเลเยอรออกจนสามารถแสดงเนื้อหาไดครบ ♦ Hidden ซอนเนื้อหาสวนที่เกินขนาดของเลเยอรไว ♦ Scroll แสดง scroll bar ที่ขอบขวาของเลเยอรใหเลื่อนดูเนื้อหาสวนที่เกินได ♦ Auto แสดง scroll bar เฉพาะกรณีที่เนื้อหาเกินขนาดของเลเยอรเทานั้น ♦ ชองวาง หมายถึงไมระบุ คาปกติก็คือ visible

การจัดรูปแบบเว็บไซทดวย Cascading Style Sheet (CSS) CSS เปนชุดคําสั่งสําหรับจัดรูปแบบการแสดงผลที่ใชกําหนดการแสดงเนื้อหาภายในเว็บเพ็จ เปนกลุมคําสั่งเฉพาะที่นํามาเสริมคุณสมบัติของ HTML เพื่อใหสามารถจัดรูปแบบขอความและองคประกอบอื่นๆในเว็บเพ็จไดอยางมีประสิทธิภาพมากขึ้น นอกจากนี้ยังสามารถควบคุมการแสดงผลบางอยางที่ HTML ไมสามารถทําได เชน ขนาดตัวอักษรบนเว็บเพ็จ CSS สามารถกําหนดเปน point หรือ pixel ซึ่งจะทําใหการแสดงผลบนเครื่องคอมพิวเตอรเหมือนกัน และการกําหนดสีหรือรูปแบบของเสนขอบรูป เปนตน CSS Style ใน Dreamweaver แบงไดเปน 3 ประเภทดังนี้ ♦ Custom CSS Style หรือ Class Style เปนสไตลที่ถูกใชในลักษณะแอตทริบิวต class เพื่อ

เสริมคุณสมบัติใหกับแท็กปกติของ HTML โดยจะนําสไตลนี้ไปใชประกอบกับแท็กใดๆก็ไดในเว็บเพ็จ

♦ HTML Tag Style เปนการใชคําสั่ง style sheet เพื่อดัดแปลงคุณสมบัติของแท็ก HTML โดยตรง ซึ่งจะมีผลตอทุกๆองคประกอบบนเว็บเพ็จที่ใชแท็กดังกลาว

♦ CSS Selector Style สามารถใชได 2 ลักษณะคือ เปน CSS เพื่อดัดแปลงคุณสมบัติของแท็กบางชุดที่ถูกนํามาใชรวมกัน โดยเราตองตั้งชื่อ style ใหตรงกับชุด tag หรือใชในลักษณะแอตทริบิวต id เพื่อเสริมคุณสมบัติใหกับ tag ปกติของ HTML ทุกแท็กที่มี id ตรงกับที่เรากําหนด

ชุดคําสั่งของ CSS จะประกอบไปดวย 2 สวนคือ Selector และ Declaration ดังนี้

♦ Selector เปนชื่อของสไตล ♦ Declaration เปนสวนที่ใชกําหนดวาสไตลนี้มีรูปแบบอะไรบาง ซึ่งประกอบไปดวย

คุณสมบัติ และคาคุณสมบัตินั้น การใช Panel CSS Style

เปด Panel CSS Style โดยกดคีย Shift + F11 หรือเลือกเมนู Windows >> CSS Style ใน Panel CSS Style จะมีปุมใหเลือกโหมดการทํางาน 2 ปุมคือ Apply Style สําหรับการนําสไตลมาใช และ Edit Style สําหรับการแกไขสไตล นอกจากนี้ยังมีคําสั่งอื่นๆ ไดแก ♦ Attach Style Sheet เปด Dialogue box Link External Style Sheet เพื่อนําเขาไฟล CSS

จากภายนอก หรือเชื่อมโยงกับไฟลดังกลาวเขามาใชงาน ♦ New CSS Style เปด Dialogue box สําหรับสรางสไตลใหม

♦ Edit CSS style เปด Dialogue box CSS style Definition สําหรับแกไขสไตลที่อยูในเว็บเพ็จ หรือที่เชื่อมโยงจากภายนอก

♦ Delete CSS Style ลบสไตล การสราง CSS Style ใหม

1. ใน Panel CSS Style คลิกปุม New CSS Style จะปรากฏ Dialogue box New CSS Style 2. เลือก Type ของสไตลตามที่กลาวมาแลวขางตน

3. ในชอง Name/Tag/Selector (ขึ้นอยูกับ Type) ใหพิมพชื่อสไตลหรือเลือกชื่อ tag จากเมนู

♦ กรณีเลือก Custom Style ชื่อสไตลตองขึ้นตนดวย (.) เสมอ ถาไมใสโปรแกรมจะใสใหโดยอัตโนมัติ

♦ กรณีเลือก HTML Tag ใหเลือก tag ที่ตองการดัดแปลงคุณสมบัติจากเมนู ♦ กรณีเลือก CSS Selector ใหตั้งชื่อสไตลโดยไมขึ้นตนดวย (.) หรือเลือกชื่อสไตลจาก

เมนู 4. เลือกไฟลที่จะเก็บสไตลที่สราง

♦ เลือก This Document only เมื่อตองการเก็บสไตลที่สรางไวในไฟลที่กําลังทํางานอยูเทานั้น

♦ เลือก New Style Sheet File ถาตองการเก็บแยกสไตลไวในไฟลสไตลใหม (.CSS) ซึ่งสามารถนําไปใชไดกับหลายๆเว็บเพ็จ

♦ เลือกชื่อไฟลสไตลจากเมนู เพื่อเก็บสไตลที่สรางขึ้นมาไวในไฟลดังกลาว (.CSS) โดยจะถูกเพิ่มตอจากสไตลที่มีอยูแลวในไฟลนั้น

5. คลิก OK

6. จะปรากฏ Dialogue box CSS Style Definition เพื่อใหกําหนดคุณสมบัติตางๆของสไตลซึ่งแยกเปนหมวดๆดังนี้ ♦ Type กําหนดคุณสมบัติของขอความ ♦ Background กําหนดคุณสมบัติของฉากหลัง เชน สี, รูปภาพ สามารถใชไดกับทั้งเว็บ

เพ็จหรือเฉพาะออปเจ็ค เชน ยอหนา หรือ ตาราง ฯลฯ ♦ Block กําหนดคุณสมบัติเกี่ยวกับระยะหางตัวอักษรหรือคําแตละคํา รวมทั้งการจัดยอ

หนาของขอความ ♦ Box กําหนดระยะหางระหวาง object กับเนื้อหาอื่นๆรวมทั้งใชกําหนดขนาดและ

ตําแหนงของ object ที่ถูกจัดใหแยกตัวออกมาจากเนื้อหาปกติ ♦ Border กําหนดคุณสมบัติเกี่ยวกับความหนา รูปแบบ และสีของเสนหรอบ ซึ่งนําไปใช

ไดกับ object ตางๆเชน รูปภาพ, ตารางหรือเซลล, เลเยอรและยอหนาขอความ ♦ List กําหนดคุณสมบัติใหกับรายการแบบมีหัวขอ (List) โดยสามารถเลือกสัญลักษณ

แบบตางๆและเลือกรูปภาพขนาดเล็กมาทําหัวขอได ♦ Positioning กําหนดคุณสมบัติเกี่ยวกับ object ที่ถูกจัดแยกตวัออกมาจากเนื้อหาปกติ

เชน ขนาด, ตําแหนง, หารซอน/แสดงขอมูล และอื่นๆ ♦ Extensions กําหนดคุณสมบัติอื่นๆเพิ่มเติมซึ่งสวนใหญไมสามารถแสดงผลใน

Netscape Navigator ได 7. หลังจากที่กําหนดคุณสมบัติทุกอยางใหกับสไตลตามตองการแลว ก็คลิก OK การใชงาน CSS Style กับ object 1. เลือก object ที่ตองการกําหนด style เชน

♦ คลิกที่ขอความ, ตาราง หรือตําแหนงที่ตองการกําหนดสไตล ♦ คลิกที่ Tag Selector เพื่อเลือก object บางอยางที่ไมสามารถเลือกไดดวยวิธีปกติ เชน

คลิกที่แท็ก <body> เพื่อกําหนดสไตลใหกับเว็บเพ็จทั้งหนา ♦ คลิกแทรกสไตลที่แท็ก HTML ของเว็บเพ็จ

2. ที่ Panel CSS Style ใหเปลี่ยน mode เปน Apply Style จากนั้นคลิกเลือกชื่อสไตลที่ตองการใสใหกับ object

3. สังเกตผลลัพธที่ปรากฏ การยกเลิกการใช CSS Style 1. เลือกขอความหรือ object ที่เลือกใช style อยู 2. คลิกที่คําสั่ง No CSS Style ใน panel CSS Styles การแกไข CSS Style 1. คลิกเปลี่ยนโหมดใน panel CSS Style เปน Edit Styles 2. ดับเบิ้ลคลิกที่ชื่อสไตลที่ตองการแกไข หรือคลิกชื่อสไตลและคลิกที่ปุมแกไข 3. จะปรากฏ Dialogue box CSS Style Definition for …. จากนั้นสามารถแกไขคุณสมบัติใหม

ไดตามตองการ 4. คลิกที่ปุม Apply เพื่อใหการแกไขนี้มีผลกับ object ที่เลือกใช style นี้อยู หรือคลิก OK

การแสดง Code HTML ของ CSS Style ทําไดโดยเปดดู code ดวยมุมมอง code view สวนบนของ code จะปรากฏแท็กที่กําหนดคุณสมบัติของ style การเรียกใชไฟล CSS จากภายนอก การนําเขาหรือเชื่อมโยงไฟล CSS Style

1. เปดเว็บเพ็จที่ตองการเชื่อมโยงไฟล และเปดพาเนล CSS Style 2. คลิกที่ปุม Attach Style Sheet 3. คลิกที่ปุม Browse เพื่อหาไฟล CSS Style Sheet (.CSS) ที่ตองการ 4. เลือกวาจะนําเขาหรือเชื่อมโยง (Import or Link) จากนั้นคลิก OK 5. กลับมาตรวจสอบรายชื่อสไตลที่พาเนล วามีการเชื่อมโยง/นําเขามาหรือไม

การแบงหนาเว็บเพ็จดวย Frame Frame หมายถึงการแบงหนาตางของเว็บบราวเซอรออกเปนพื้นที่หลายๆสวนซึ่งแตละ

สวนสามารถแสดงผลที่แตกตางกันได Frame Set คือไฟล HTML ที่ทําหนาที่ในการแบงเฟรม โดยมีการกําหนดการจัดวาง

และคุณสมบัติของแตละเฟรมเอาไว รวมไปถึงจํานวนขนาดตําแหนงของเฟรม และเอกสาร HTML ที่แตละเฟรมเชื่อมโยงดวย

Web Page คือ เว็บเพ็จ HTML ปกติทั่วไป แตอาจมีการจัดหนาตาใหเหมาะสมสําหรับนําไปแสดงในเฟรมที่มีขนาดแตกตางกัน การสราง Frame Set สามารถทําได 3 วิธีคือ

♦ สรางจากแมแบบที่โปรแกรมเตรียมไวแลว โดยคําสั่ง File >> New ♦ สรางเฟรมเซตดวยตนเองจากเครื่องมือที่มีอยูในแท็บ Frame บน Insert bar ♦ คลิกลากเสนแบงเฟรมใน window document ในมุมมอง view >> virtual aids >>

Frame Borders การสราง Frameset จากแมแบบที่โปรแกรมมีไวให 1. เลือกคําสั่ง File >> New 2. คลิกเลือกหมวด Frameset 3. เลือกรูปแบบการจัดวาง Frameset ที่ตองการ 4. ดูตัวอยางการจัดวางเฟรม 5. คลิกที่ปุม Create การสราง Frameset ดวยเครื่องมือ Frame 1. สรางเว็บเพ็จใหมหรือเปดเว็บเพ็จที่มีอยูแลว 2. คลิกที่แท็บ Frame บน Insert bar 3. คลิกเลือกแบบ Frame ลักษณะที่ตองการ การปรับขนาดและสรางเสนแบงเฟรม

เลื่อนเมาสพอยเตอรไปที่เสนแบงเฟรมจนปรากฏรูปลูกศร จากนั้นลากเมาสปรับแตงขนาดของเฟรม นอกจากนี้ดานขางของวินโดว Document จะมีเสนขอบเฟรมที่สามารถลากออกมาเพื่อทําการสรางเสนแบงเฟรมเพิ่มได หรือลากเสนที่ขอบเฟรมที่มีอยูยอนกลับไปยังขอบวินโดว ก็จะเปนการยกเลิกเฟรมนั้น การบันทึกเฟรมเซตและเว็บเพ็จ คลิกปุม Save all บน tool bar หรือเลือกคําสั่ง File >> Save All เพื่อเซฟ Frameset แตถาตองการบันทึกเฉพาะเว็บเพ็จใหคลิกในเฉพาะเว็บเพ็จนั้น แลวเลือก File >> Save Frame การปรับแตง Frame ทําไดโดยเปด Frame Panel ดวยคําสั่ง Windows >> others >> Frames หรือ Shift + F2 แลวกําหนดที่ Properties Inspector

การใสเนื้อหาใหกับเฟรม ทําได 2 วิธีโดย ♦ ใสเนื้อหาลงในเว็บเพ็จใหมที่อยูในเฟรมโดยตรง ♦ เลือกไฟลเว็บเพ็จที่มีอยูแลวมาใสในเฟรมที่ตองการ โดยระบุชื่อไฟล HTML ที่ properties

inspector ในชอง Src โดยคลิกที่ปุม Browse และเลือกชื่อไฟล หรือเลือกคําสั่ง File >> Open in Frame

การใชงาน Behaviors องคประกอบของ behavior มี 2 สวนไดแก ♦ Event คือเหตุการณที่เกิดขึ้นกับ object ในเว็บเพ็จอยางเชน การเลื่อนเมาสพอยเตอรผาน

รูปภาพ การคลิกที่ลิงคหรือคลิกที่ปุมซึ่งแตละ object ในเว็บเพ็จจะมี event ที่แตกตางกันแต Event ที่นิยมใชมากคือ On Click (เมื่อมีการคลิกเมาส) และ On Mouse Over (เมื่อเมาสเลื่อนผานออปเจ็ค) เปนตน

♦ Action คือโคดภาษา JavaScript ที่ถูกเขียนขึ้นเพื่อทํางานบางอยางตามที่กําหนด เชน แสดงกลองขอความ เลนเพลง เปลี่ยนรูป หรือเปดหนาตางเว็บบราวเซอรใหม เปนตน โดย event จะเรียก action ที่สัมพันธกับมันขึ้นมาทํางาน

การใช Behavior Panel เปด Behavior Panel โดยใชคําสั่ง Windows >> Behavior การใชงานมีดังนี้ ♦ ปุม Action ใชสําหรับเลือก Action เพื่อกําหนดใหกับออปเจ็ค ♦ ปุม Delete สําหรับลบ Action ออกจากออปเจ็ค ♦ Events เปนปอบอัพเมนูของ Event ทั้งหมดที่มี และสามารถกําหนดใหกับออบเจค็ที่กําลัง

เลือกได ♦ Move up และ Move down ใชเลื่อน behavior ขึ้นลง ♦ Show Event for เปนเมนูยอยของ Events ทีใชสําหรับเลือก Browser Program เปาหมาย

ที่ผูชมสวนใหญใช การกําหนด Behavior ใหกับ Object ในเว็บเพ็จ 1. เลือก object บนเว็บเพ็จที่ตองการกําหนด behavior 2. คลิกที่ปุม Action เพื่อเลือก Action ที่ตองการ 3. ถา Action ที่เลือกมี Parameter ที่ตองกําหนดเพิ่มเติมจะปรากฏ Dialogue box ใหใส 4. คลิก OK ก็จะปรากฏ Event และ Action ขึ้นที่ Behavior Panel 5. หากตองการเปลี่ยน event ใหเลือก event ใหมจากเมนู pop up การยกเลิก Behavior 1. เลือกออบเจ็คที่กําหนด behavior ไว 2. คลิกที่ event ที่ตองการจะยกเลิก 3. คลิกที่ปุม Delete

การแทรกไฟล Flash Movie 1. คลิกที่ปุม Flash ที่แท็บ Common หรือแท็บ Media บน Insert bar หรือเลือกคําสั่ง Insert

>> Media >> Flash 2. ที่ Dialogue box Select File ใหเลือกไฟล Flash (.swf) ที่ตองการ 3. จากนั้นจะปรากฏ Flash placeholder ที่เว็บเพ็จ 4. กําหนดคุณสมบัติตารางการทํางานของ Flash Movie ที่ Panel Properties Inspector

การแทรกไฟลมัลติมีเดียลงบนเว็บเพ็จ 1. คลิกที่ปุม plug-in ที่แท็บ Media บน Insert bar 2. ใน dialogue box Select File เปดหาและเลือกไฟลมัลติมีเดียที่ตองการ 3. ปรับขนาดของ control plug-in ใหเหมาะสมกับการแสดงผลและควบคุการแสดง 4. ทดสอบโดยคําสั่ง preview in browser

ขั้นตอนการเชื่อมตอกับเซิรฟเวอร FTP

1. เลือกคําสั่ง Site >> Edit site 2. เลือกชื่อ Site ที่ตองการ และคลิกปุม Edit 3. ในหนาตาง Site Definition คลิกแท็บ Advanced 4. คลิกหัวขอ Remote info และกําหนดรายละเอียดของ FTP Server ลงไป

♦ Access เลือกการเชื่อมตอเปน FTP ♦ FTP Host พิมพชื่อของ FTP Server ที่ตองการเชื่อมตอและนําไฟลไปเก็บ ♦ Host Directory พิมพชื่อ folder ที่ตองการอัพโหลดไปเก็บ ♦ Login พิมพชื่อ login ของคุณตามที่ผูใหบริการโฮสติ้งแจงมา ♦ Password พิมพรหัสผาน

5. คลิกปุม Test เพื่อทดสอบการเชื่อมตอ ถาเชื่อมตอสําเร็จจะมี Dialogue box แจงวา successfully จากนั้นคลิก OK

6. คลิกที่ปุม Done ในหนาตาง Edit Site

ขั้นตอนการ Upload ใน Dreamweaver

1. ที่ panel Site ใหคลิกปุม Connect to remote host 2. คลิกเปลี่ยนมุมมองเปน local view เพื่อแสดงไฟลของเว็บไซทในเครื่องของเรา 3. เลือกไฟลที่ตองการอัพโหลด 4. คลิกที่ปุม Put File 5. จะปรากฏหนาตางอัพโหลดไฟลแสดงขึ้นมา จากนั้นก็รอการอัพโหลดจนกวาจะเสร็จทุกไฟล คลิกเปลี่ยนมุมมองไปที่ Remote view เพื่อตรวจดูความเรียบรอย