Dreamweaver CS3 - Prince of Songkla...
Transcript of Dreamweaver CS3 - Prince of Songkla...
![Page 1: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/1.jpg)
Dreamweaver CS3
![Page 2: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/2.jpg)
รจก Dreamweaver
• Dreamweaver ถอไดวาเปนเครองมอสาหรบสรางเวบเพจ และ ดแล
เวบไซต ทมประสทธภาพสง
• เปนทนยมใชของ Web Master
• เปนโปรแกรมสาหรบเขยนภาษา HTML โดยเฉพาะ
• พรอมทงสามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมาย
• ผใชไมจาเปนตองรหลกภาษา HTML กสามารถสรางเวบไซตได
![Page 3: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/3.jpg)
ความสามารถของ Dreamweaver
• ชวยใหเขยนเวบเพจงายขน ไมตองเขยน Code HTML เอง
• มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง
• สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java,
ASP, PHP, CGI, VBScript
• มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server โดยการ
สงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย
• รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงาน
รวมกบโปรแกรม Flash , Fireworks
![Page 4: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/4.jpg)
1. Click Mouse ทป ม
เลอก All Program > Adobe > Dreamweaver CS3 หรอ
2. Click สองครงตดกนท Shortcut Icon ของDreamweaver CS3 บน desktop
เรมตนใช Dreamwever
![Page 5: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/5.jpg)
•
![Page 6: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/6.jpg)
สวนประกอบตางๆ ของหนาจอ Dreamweaver Title bar
คลกเพอขยาย
พนทการ
ทางาน
คลกเพอซอน
properties
![Page 7: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/7.jpg)
• แถบชอ (Title bar) แสดงชอโปรแกรมและชนดเอกสารทกาลงสราง
• แถบคาสง (Menu Bar) เปนแถบทใชเกบคาสงทงหมดของโปรแกรม
• แถบเครองมอ (Toolbar) รวบรวมป มคาสงทใชงานบอย
![Page 8: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/8.jpg)
แถบคาเครองมอ (Toolbar)
มมมองหนาจอแสดงผล
แสดงขอความท title bar ของเบราเซอร
Upload/download
แสดงผลหนาเวบบนเบราเซอร หรอ กด ป ม F12
![Page 9: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/9.jpg)
• แถบวตถ (Object Palette) เปนกลมเครองมอตางๆ ทใชในการ
ควบคมวตถ บนชนงาน เอกสารเวบ เชน เสนกราฟก (Horizontal
Rule), ตาราง, รปภาพ, เลเยอร (Layer)
![Page 10: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/10.jpg)
Common แทรกขอมลทวๆไป เชน รปภาพ ลงค ตาราง วนท เวลา
Layout แทรกขอมลตางๆ เชน ตาราง เฟรม เลเยอร
From แทรกขอมลเกยวกบการสรางฟอรม ฟวด
Data แทรกขอมลเกยวกบการจดการฐานขอมล
Spry รวมคาสงเกยวกบ spry ตางๆ ชวยในการสรางเวบ
Text จดการขอความ ตวอกขระพเศษ
Favorites กลมทเราสรางขนเอง กรณตองใชบอยๆ
![Page 11: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/11.jpg)
• แถบแสดงสถานะ (Status Bar) ประกอบดวยสองสวน
– มมซายเปน tag selecter ใชดความสาคญระหวาง tag และกาหนด
คณสมบตใหกบ tag ทเลอก
– มมขวา
สาหรบเลอก
object
เลอนหนาจอ
เวบเพจ ยอ/ขยายขนาดของ window
ทใชอย คลกเปลยน
ขนาดได
ขนาดของเวบเพจและเวลาท
ใชเมอเปดกบเบราเซอร
![Page 12: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/12.jpg)
• แถบควบคมการทางาน (Properties Palette)
– แสดงคณสมบตของ object ตามการเลอก
– เชน หากมการเลอกทจะพมพ หรอแกไขเนอหา รายการกจะเปน สวนทางานท
เกยวกบอกษร, การจดพารากราฟ ถาเลอกทรปภาพ รายการในแถบน กจะ
เปนคาสงตางๆ ทเกยวกบ การควบคมเรองรปภาพ
![Page 13: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/13.jpg)
• สวนของ Panel Group
– เปนกลมของแถบเครองมอทสามารถเรยกใชงานไดอยางรวดเรว เพอใหงาย
ในการสราง Application บนอนเทอรเนต
– เชน การแทรก Code ของ JavaScript และ VBScript ลงในเวบเพจไดอยาง
งายๆ
– การแสดง หรอ ซอน Panel ไปท เมน Window
![Page 14: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/14.jpg)
หนาจอแสดงผล (Document Windows)
หนาตางการทางานของ Dreamweaver สามารถเลอกหนาตางการทางาน
ได 3 รปแบบ โดยการคลกไอคอนทอยในแถบเครองมอ Toolbar ดงน
• Show Code View เปนหนาตางทใหแสดงเฉพาะโคด HTML ของหนา
เวบเพจท กาลงทางาน
• Show Code and Design View เปนหนาตางทแสดงทงโคด HTML
และหนาเวบเพจทกาลงทางาน
• Show Design View ใหแสดงแตหนาเวบเพจไมตองแสดงโคด HTML
![Page 15: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/15.jpg)
Show Code View
![Page 16: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/16.jpg)
Show Code and Design View
![Page 17: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/17.jpg)
Show Design View
![Page 18: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/18.jpg)
Rulerคลกเพอแสดงหรอซอน
Ruler
คลกขวาเพอเปลยน
หนวยของ Ruler
![Page 19: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/19.jpg)
การเรมกาหนดโครงรางของเวบ
• กอนดาเนนการสรางเวบเพจ ขนแรกควรกาหนดใหขอมลตางๆ ทเกยวของอยใน
Folder เดยวกน เพองายตอการคนหาและจดเกบ
• ตวอยางเชน ทาเวบเพจของหนวยงาน กอนอนเราควรสราง Folder ชอของ
หนวยงานกอน อาจเปนภาษาองกฤษหรอภาษาไทยกได
• ใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder
ยอย เพอใชสาหรบแยกเกบไฟลตาง ๆ เปนหมวดหม
• เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ
![Page 20: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/20.jpg)
ตวอยาง
![Page 21: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/21.jpg)
สรางเวบเพจหนาใหม
1. คลกท เมน file ‐> new
![Page 22: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/22.jpg)
1. เลอกกลมหลก 2. เลอกประเภท
![Page 23: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/23.jpg)
สรางเวบเพจเปลา
สรางจาก สรางจาก template ทโปรแกรมเตรยมไวให
สรางจาก สรางจาก template ทเราสรางเอง
สรางจากไฟลตวอยางทสรางจากไฟลตวอยางท
โปรแกรมมไว
สรางไฟลประเภทอนๆ
![Page 24: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/24.jpg)
การตงคาเพอใหอานภาษาไทยได
1. เลอกเมน Edit > เลอกคาสง Preferences
2. เลอก Fonts > Font Setting > เลอก Thai
![Page 25: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/25.jpg)
การเพม Font เพอใชงาน
การนา Font จาก Windows มาใชงาน เลอกคาสงดงน
![Page 26: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/26.jpg)
• หรอ เลอกท “Edit font List”
• สามารถเลอก font เพมเตมได
![Page 27: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/27.jpg)
1. เลอก font
ทตองการ
2. กด
ป ม 3. Font จะ
ปรากฎตรงน
4. กดป ม
OK
![Page 28: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/28.jpg)
การกาหนดรายละเอยดของหนาเวบเพจ
เลอกเมน Modify > Page Properties > Appearance
สตวอกษรทงหนาเวบ
<body text=“ส”>
ใสสพนหลง
<body bgcolor=“ส”>
ใสพนหลงดวยรปภาพ
<body background=“ชอรป”>
![Page 29: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/29.jpg)
• Heading เกยวกบลกษณะ
ตวอกษรของหวขอท
สรางในหนาเวบเพจ
![Page 30: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/30.jpg)
Title/encoding เกยวกบลกษณะ
ขอความ ทแสดงท
title bar ของเบราวเซอร
![Page 31: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/31.jpg)
การพมพขอความและการกาหนดตวอกษร
• การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word
• โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย
• โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอให
สามารถอานไดงาย
• สามารถจดรปแบบและขนาดตวอกษรไดโดยใหเลอกขอความทตองการ
ปรบแตง และแกไขคาตาง ๆ ไดทหนาตาง Properties
![Page 32: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/32.jpg)
• มรายละเอยดดงน
– Format เปนรปแบบตวอกษรสาเรจทเรานามากาหนดใหกบขอความได
– Font รปแบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมใน
เครอง PCและเครอง MAC
– Size ขนาดของตวอกษร ขนาดมาตรฐานทกาหนดไวคอ 3
– Color กาหนดสใหตวอกษร
![Page 33: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/33.jpg)
การพมพขอความ
พนทการพมพงาน
![Page 34: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/34.jpg)
การกาหนดใหชองวางสามารถตดตอกนมากกวาหนงครง
ดวยการกด space bar ตดตอกน ถาไมกาหนดชองวางท
ตดกนมากกวาหนงครงจะถกรวมเปนชองวางเพยงครงเดยว
คลกทเมน Edit > Preferences > General
คลกใหมเครองหมาย ถก ทน
![Page 35: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/35.jpg)
การจดการกบขอความใหสวยงาม
• การขนบรรทดใหมโดยการกด ป ม enter
• การขนบรรทดใหมโดยการกด ป ม Shift +enter
ระยะหางระหวาง
บรรทดจะแคบลง
![Page 36: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/36.jpg)
การสราง Table
• การใชตารางเหมาะสาหรบการนาเสนอขอมลจานวนมาก
• เพอความสะดวกในการจดการขอมลและความเปนสดสวน
• ควรจดระบบการนาเสนอขอมลของหนาเวบเพจโดยการใชตารางเปน
ตวจดการในการจดวางขอมลในแตละหนาเวบเพจ
![Page 37: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/37.jpg)
โครงสรางของตาราง
![Page 38: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/38.jpg)
วธการสรางตาราง
1. เลอกท object ทแทบ common2. กาหนดคาตางดงน
![Page 39: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/39.jpg)
![Page 40: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/40.jpg)
การกาหนดขนาดของเซลล
• ให Click เลอกเซลลทตองการ หรอ
• Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอก
ตารางไวกอนแลว) ให Click ท Properties เพอกาหนดขนาดของเซลล
・ ดงรป
![Page 41: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/41.jpg)
![Page 42: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/42.jpg)
การผสานเซลล (Marge Cell)
1. ให Click เลอกเซลลทตองการ ผสาน เขาดวยกน
2. Click Properties แลวเลอก เพอกาหนดการผสานเซลล ดงรป
![Page 43: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/43.jpg)
![Page 44: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/44.jpg)
การแทรกรปภาพลงตาราง
1. ให Click เลอกเซลลทตองการแทกรป
2. เลอกเมน Insert > image ดงรป
3. เลอกหาทเกบของรป แลวเลอกรปทตองการแทรกลงตาราง ดงรป
![Page 45: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/45.jpg)
![Page 46: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/46.jpg)
![Page 47: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/47.jpg)
•
![Page 48: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/48.jpg)
การแทรกแถวและคอลมน
1. นาเคอรเซอรไปวางยงตาแหนงทตองการจะแทรกแถว
2. Click Mouse ป มขวาจะปรากฎเมนยอย ใหเลอก Table > Insert Rows or
Columns..
3. จะม Dialog Box ใหกาหนดรปแบบของการแทรกตารางวา จะเลอกแทรก Rows
หรอ Column
4. กาหนดการแทรก Rows ใหแทรกกอน (Above the Selection) หรอหลง
(Before the Selection) ได
5. ในกรณทตองแทรก Column จะมใหแทรกกอน (Before current Column) หรอ
หลง (After current Column)
![Page 49: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/49.jpg)
ขนตอนการแทรกแถวและคอลมน
1 2
3
![Page 50: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/50.jpg)
การพมพขอความและการกาหนดตวอกษร
• การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word
• โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย
• โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอให
สามารถอานไดงาย
• สามารถจดรปแบบและขนาดตวอกษรไดโดยใหเลอกขอความทตองการ
ปรบแตง และแกไขคาตาง ๆ ไดทหนาตาง Properties
![Page 51: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/51.jpg)
• มรายละเอยดดงน
– Format เปนรปแบบตวอกษรสาเรจทเรานามากาหนดใหกบขอความได
– Font รปแบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมใน
เครอง PCและเครอง MAC
– Size ขนาดของตวอกษร ขนาดมาตรฐานทกาหนดไวคอ 3
– Color กาหนดสใหตวอกษร
![Page 52: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/52.jpg)
![Page 53: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/53.jpg)
การเชอมโยง (Link)
• การเชอมโยงบนเวบเพจมดวยกนหลายรปแบบ
• อาจแบงตามการใชงาน หรอตามลกษณะของการเชอมโยงภายในเวบ
เพจ และการเชอมโยงภายนอกเวบเพจ
• แตถาแบงตามวตถประสงคของรปแบบการใชงานจะแบงการเชอมโยง
เวบเพจ ออกเปนดงน
![Page 54: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/54.jpg)
–การเชอมโยงภายในเวบเพจเดยวกน
–การเชอมโยงภายในไซตเดยวกน
–การเชอมโยงไปยงเวบไซตอน
ใหดท Link กบ Target ตรง Properties
![Page 55: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/55.jpg)
การเชอมโยงภายในเวบเพจเดยวกน
Step 1: กาหนดตาแหนงทจะกระโดดไป1. เลอน cursor ไปยงตาแหนงทตองการ2. ท menu bar เลอก Insert และ Named Anchor
ตามลาดบ
3. เมอปรากฏ dialog box ใหใสชอทตองการ ตองเปนอกขระภาษาองกฤษหรอตวเลข ตองไมขนตนดวยตวเลขและไมมชองวาง
จากนนเลอกป ม OK4. ถาไมเหนเครองหมาย Anchor ให เลอก View ‐> Visual
Aids ‐> Invisible Elements
![Page 56: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/56.jpg)
การเชอมโยงภายในเวบเพจเดยวกน
Step 2: กาหนด Link1. ทาแถบสคลมขอความทใชเปนจดลงค
2. สงเกตทแถบ Properties จะเหนรายการ Link3. พมพอกขระแรก คอ # ตามดวย Named Anchor เชน
#label1 หรอ #top เมอตองการไปทจดเรมตนของเวบเพจ
![Page 57: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/57.jpg)
การเชอมโยงภายในไซตเดยวกน
การทาลงคเชอมไฟล1. ทาแถบสคลมขอความทใชเปนจดลงค
2. สงเกตทแถบ Properties จะเหนรายการ Link
3. พมพชอไฟลทตองการใหลงค ชอไฟลอาจจะเปนไฟล .html หรอ ไฟล
ใดๆ กได กรณทไฟลอยใน folder ยอย ใหใสชอ folder ตามดวย /ชอ
ไฟล เชน picture/0001.jpg ถาม folder ยอยอกใหใช / คน เชน
document/344-101/chapter1.doc
![Page 58: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/58.jpg)
การเชอมโยงไปยงเวบไซตอน
การทาลงคไปยงอเมลลใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบดวยคาบงคบ คอ
mailto: แลวตามดวย E-Mail Address ทจะสงไป
ตวอยาง mailto:[email protected]
![Page 59: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/59.jpg)
การเชอมโยงไปยงเวบไซตอน
• ใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบดวยคาบงคบ คอ
http://ชอเวบ หรอ https://ชอเวบ
เชน http://www.psu.ac.th หรอ https://www.psu.ac.th
และถาตองการให เวบใหมไมทบซอนกบเวบเดม ตรง Target ใหเลอก
_blank ถาไมกาหนด เวบใหมจะทบเวบเดม
![Page 60: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/60.jpg)
การยกเลกลงค
1. ใหคลกเมาส ณ จดลงคเดม
2. ลบการออกจาก Link หรอทาใหขอความตรง Link เปนวาง
![Page 61: Dreamweaver CS3 - Prince of Songkla Universitystaff.cs.psu.ac.th/345-101/Lab/Lab-DreamWeaverCS3.pdf1. Click Mouse ท ป ม เล อก All Program > Adobe > Dreamweaver CS3 หร](https://reader030.fdocument.pub/reader030/viewer/2022040818/5e62b8812c14a51afd346be6/html5/thumbnails/61.jpg)
การเปลยนสลงค
• เลอกเมน Modify > Page Properties > Links
• เปนการกาหนดขนาดตวอกษร ส ทเกยวกบการเชอมโยงใหหนาเวบเพจ
เปลยนสลงค
เปลยนสลงคเมอมการคลกแลว
ทาใหขอความทเปนลงค ม/ไมม ขดเสนใต