เอกสารประกอบการสอน  Dreamweaver8 ม.6
Upcoming SlideShare
Loading in...5
×
 

เอกสารประกอบการสอน Dreamweaver8 ม.6

on

  • 360 views

 

Statistics

Views

Total Views
360
Views on SlideShare
272
Embed Views
88

Actions

Likes
1
Downloads
6
Comments
0

2 Embeds 88

http://www.kruukrailas.blogspot.com 52
http://kruukrailas.blogspot.com 36

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

เอกสารประกอบการสอน  Dreamweaver8 ม.6 เอกสารประกอบการสอน Dreamweaver8 ม.6 Document Transcript

  • การสร้างเว็บเพจโดย โปรแกรม Macromedia Dreamweaver 8 4.1 ขั&นตอนการเข้าสู่โปรแกรม วิธีการเข้าสู่โปรแกรมมีขันตอนดังนี 1.คลิก ที Taskbar ด้านล่าง 2. เลือกที Program > Macromedia > Macromedia Dreamweaver 8 โปรแกรมจะทํางาน และเปิด หน้าต่างโปรแกรมขึนมา
  • 4.2 หน้าต่างเปิดงาน 1.เปิดงานทีเรากําลังทําค้างอยู่ โปรแกรมจะแสดงงานทีเราเปิดใช้บ่อยๆ ไว้ด้านบน 2.เลือกประเภทงานทีต้องการสร้างใหม่ ได้แก่ HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ 3.เลือกงานตามฟอร์มทีโปรแกรมจัดไว้ให้โดยมีรูปแบบให้เลือกหลายประเภท หน้าจอการทําง
  • 4.3 หน้าจอการทํางานหลักของโปรแกรม หลังจากทีเลือกโปรแกรมเสร็จแล้ว เราจะพบกับหน้าต่างการทํางาน ซึงประกอบด้วย 1.Title Bar คือ ส่วนทีแสดงชือโปรแกรม และชือไฟล์ทีกําลังทํางานอยู่ 2.Menu Bar คือ ส่วนทีรวมคําสังการทํางานทังหมด แล้วแบ่งย่อยตามประเภทและในคําสังหลักมักจะมีเมนู ลัดให้กดด้วย 3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปรแกรม เราสามารถเลือกประเภทคําสังได้ด้วยการคลิกที Common จะปรากฏเมนูขึนมา 4.Toolbar คือ แถบเครืองมือสําหรับการใช้งานด้าน HTML และอินเตอร์เน็ท ประกอบด้วย
  • Show Code View แสดงการทํางานในรูปแบบ HTML Show Code and Design Views แสดงการทํางานแบบ HTML ควบคู่กับแสดงพืนทีออกแบบ Show Design View แสดงการทํางานแบบแสดงพืนทีออกแบบ Document Title ตังชือของเว็บเพจ Check Errors ตรวจสอบข้อผิดพลาดจาก Browser File Management จัดการกับไฟล์ๆ ทีอยู่ในเว็บเพจ Preview / Debug in Browser ทดลอง ดูเว็บเพจทาง Browser หรือกด F12 View Options มุมมองในการทํางานเพิมเติม 5.หน้าต่างออกแบบเว็บเพจ ใช้พิมพ์ข้อความและจัดเรียงรูปภาพ 6.Tag Selector ใช้ควบคุมการทํางานในรูปแบบ HTML 7.Window Size กําหนดพืนทีใช้งานตามต้องการ 8.Estimate Download Time แสดงเวลา ทีใช้ในการดาวน์โหลด 9.Properties ใช้กําหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์ หน้าต่าง Proties สามารถจะเปิดปิดได้ตามต้องการด้วยการคลิกที เพือขยายหน้าต่างการทํางานให้ มากขึน หรือคลิกที Window > properties ก็ได้เช่นกัน 10. Dockable Window เปิดหน้าต่างทีรวบรวมเครืองมืออํานวยความสะดวกเอาไว้ โดยคลิกที เพือ เปิด-ปิดได้ เช่นเดียวกับ Properties
  • 4.4 วิธีการสร้าง Site การสร้าง Site ก็เพื8อที8เวลาสร้างเว็บไซต์ ข้อมูลจะได้ถูกจัดอย่างเป็นระเบียบ ไม่กระจัด กระจาย ง่ายต่อการตรวจสอบ วิธีการสร้างก็ง่ายๆ ตามรูปเลย
  • 4.5 การสร้างข้อความบน Dreamweaver 8 การสร้างข้อความบน Dreamweaver 8 มี ดังนี พิมพ์ข้อความลงในส่วนของหน้าจอการทํางานเลย เป็นวิธีทีง่ายทีสุด เราแค่เตรียมเนือหาให้พร้อม จากนันก็พิมพ์ได้เลย +--ข้อควรจํา--+ ในเรืองของการพิมพ์ข้อความ ก็เลือกเอาตามความถนัดเลย แต่ควรตรวจเรืองของ Font ให้ดีเพราะบางFont อ่านไทยไม่ได้ โดยสามารถตังค่าได้โดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป
  • 4.6 วิธีการเปลี8ยนรูปแบบตัวอักษร 1.ลากเมาส์ข้อความทีต้องการเปลียน 2.คลิกที Font เพือเลือก Font ทีต้องการ ควรเป็น MS Sans Serif
  • การเปลี8ยนขนาดตัวอักษร 1.ลากเมาส์ข้อความทีต้องการเปลียนแปลง 2.คลิกที Size เพือปรับขนาดตามต้องการ 3.ตัวอักษรจะเปลียนขนาดไป
  • 4.7 วิธีการเปลี8ยนสีตัวอักษร 1.ลากเมาส์ข้อความที8ต้องการเปลี8ยนแปลง 2.คลิกทีปุ่ม Text color เพื8อเลือกสี 3.ตัวอักษรจะเปลี8ยนสีแล้ว
  • 4.8 การจัดเรียงข้อความในเพจ การจัดก็จะคล้ายๆกับพวก Microsoft word ทีเรารู้กันดีนันแหละ หากต้องการใช้คําสังจัดเรียงข้อความทีบรรทัดใด ก็ให้คลิกเคอร์เซอร์ ไปทีบรรทัดนัน แล้วคลิกคําสังได้เลย
  • 4.9 วิธีเปลี8ยนสีพื&นหลังและรูปภาพที8พื&นหลัง การเพิ8มสีสันให้กับเว็บในส่วนพื&นหลัง มีวิธีการดังนี&
  • 1.คลิกที8ปุ่ม 2.เลือกสีที8ช่อง ของ Background Color หรือ Background Images 3.คลิกที8ปุ่ม 4.สีพื&นหลังเปลี8ยนตามที8ถูกเลือกไว้แล้ว หมายเหตุ ถ้าต้องการใส่รูปให้เลือกที Background Images
  • 4.10 วิธีนํารูปภาพมาใส่ในเว็บ 1.คลิกวางเคอร์เวอร์ตรงบริเวณทีเราต้องการจะวาง 2.คลิกทีปุ่มคําสัง Images 3. เลือกไฟล์ภาพทีต้องการ
  • 4.คลิกปุ่ม OK 5.มีข้อความเตือนให้ save ก่อน ให้คลิก OK
  • 4.11 วิธีการสร้างตาราง การนําเสนอข้อมูลบางอย่างจําเป็นต้องใช้ตาราง เพือทีจะให้ข้อมูลทีนําเสนอไปนันเข้าใจง่าย เรามี วิธีการสร้างง่ายๆดังนี 1.วางเคอร์เซอร์ไว้ตรงบริเวรทีต้องการ 2.คลิกปุ่ม ทีแถบเครืองมือ Insert 3.คลิกปุ่ม 4.จะมีหน้าต่างคุณสมบัติของตารางขึ&นมา ให้กําหนดค่าต่างๆของตารางตามต้องการ
  • 5.คลิกที8ปุ่ม 6.จะได้ตารางที8พร้อมสําหรับใช้งานแล้ว
  • 4.12 การสร้างลิงค์จากข้อความ ลิงค์ (Link) หรือจุดเชื8อมโยงเว็บเพจ มีหลายรูปแบบดังนี& การทําลิงค์แบบข้อความ การทําลิงค์ไปยัง E-mail การทําลิงคืไปยัง Named Anchor การทําลิงค์แบบ Rollover Image การทําลิงค์ใน Dreamweaver 8 ส่วนสําคัญจะอยุ่ตรงทีแถบ Properties ซึงจะมีอยู่ 2 ส่วนด้วยกัน ได้แก่ 1.Link คือ แถบสําหรับเลือกไฟล์ทีต้องการจะลิงค์ไปถึง 2.Target คือ แถบสําหรับเลือกรูปแบบของปลายทาง ซึงได้แก่ _blank คือ การแสดงเว็บเพจปลายทางในหน้าต่างใหม่ _parent คือ การแสดงเว็บเพจทีหน้าต่างเดียว แต่อยู่ในเฟรมหลัก _self คือ การแสดงเว็บเพจในเฟรมเดียวกับต้นทาง _top คือ การแสดงผลเว็บเพจ โดยจะไม่มีเฟรม วิธีสร้างลิงค์จากข้อความ 1.พิมพ์ข้อความลงไป 2.ลากเม้าส์ทึบข้อความทีต้องการ 3.คลิกที ในแถบ properties เพือเลือกไฟล์ทีจะลิงค์ 4.เมือเลือกได้แล้ว ให้คลิกปุ่ม 5.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว
  • 6. ทดสอบผลทาง Browser โดยการกด F12
  • 4.13 การสร้างลิงค์จากรูปภาพ การสร้างลิงค์ด้วยรูปภาพกําลังเป็นที8นิยมในปัจจุบันนี& ซึ8ง Dreamweaver 8 ก็สามารถทําได้ง่ายๆ ดังนี& 1.คลิกที8รูปภาพ 2.เลือกไฟล์ที8จะลิงค์ โดยคลิกที8 ในแถบ Properties 3.คลิกที8ปุ่ม 4.ทดสอบผลทาง Browser โดยการกด F12
  • 4.14 การทําลิงค์ไปยังเว็บไซต์อื8น การทําลิงค์ไปยังเว็บไซต์อื8น สามารถทําได้ทั&งแบบข้อความและรูปภาพ วิธีการทํา ก็มีดังนี& 1.ถ้าเป็นข้อความให้ลากเมาส์ข้อความสั&นๆ ส่วนถ้าเป็นรูปให้คลิกที8รูป 2.พิมพ์ http:// ชื8อเว็บไซต์ ลงในช่อง Link และเลือกรูปแบบปลายทาง 3.คลิกพื&นที8ว่าง จากนั&นก็ดูผลทาง Browser
  • 4.15 การทําปุ่ม Flash วิธีการนําปุ่มกด Flash มาใช้งาน มีขันตอนดังนี 1.วางเคอเซอร์บนพืนทีทํางาน 2.ไปที Menu Bar เลือก Insert > Media > Flash button 3.ในขันนีถ้าเรายังไม่ได้บันทึกเว็บเพจ โปรแกรมจะเตือนให้เราบันทึกก่อน ถึงจะสามารถใช้ปุ่ม Flash ได้ ให้ เราทําการบันทึก 4.จะปรากฏหน้าต่าง Insert Flash Button ขึนมา ให้เราเลือกรูปแบบของปุ่ม 5.จะได้ปุ่ม Flash เรียบร้อยแล้ว ให้ทดสอบแสดงผลทาง Browser โดยการกดปุ่ม F12