Embed Size (px)
Citation preview
Dreamweaver CS3
รจก Dreamweaver
• Dreamweaver ถอไดวาเปนเครองมอสาหรบสรางเวบเพจ และ ดแล
เวบไซต ทมประสทธภาพสง
• เปนทนยมใชของ Web Master
• เปนโปรแกรมสาหรบเขยนภาษา HTML โดยเฉพาะ
• พรอมทงสามารถแทรก Java Scripts และ ลกเลนตางๆไดมากมาย
• ผใชไมจาเปนตองรหลกภาษา HTML กสามารถสรางเวบไซตได
ความสามารถของ Dreamweaver
• ชวยใหเขยนเวบเพจงายขน ไมตองเขยน Code HTML เอง
• มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง
• สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java,
ASP, PHP, CGI, VBScript
• มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server โดยการ
สงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย
• รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงาน
รวมกบโปรแกรม Flash , Fireworks
1. Click Mouse ทป ม
เลอก All Program > Adobe > Dreamweaver CS3 หรอ
2. Click สองครงตดกนท Shortcut Icon ของDreamweaver CS3 บน desktop
เรมตนใช Dreamwever
•
สวนประกอบตางๆ ของหนาจอ Dreamweaver Title bar
คลกเพอขยาย
พนทการ
ทางาน
คลกเพอซอน
properties
• แถบชอ (Title bar) แสดงชอโปรแกรมและชนดเอกสารทกาลงสราง
• แถบคาสง (Menu Bar) เปนแถบทใชเกบคาสงทงหมดของโปรแกรม
• แถบเครองมอ (Toolbar) รวบรวมป มคาสงทใชงานบอย
แถบคาเครองมอ (Toolbar)
มมมองหนาจอแสดงผล
แสดงขอความท title bar ของเบราเซอร
Upload/download
แสดงผลหนาเวบบนเบราเซอร หรอ กด ป ม F12
• แถบวตถ (Object Palette) เปนกลมเครองมอตางๆ ทใชในการ
ควบคมวตถ บนชนงาน เอกสารเวบ เชน เสนกราฟก (Horizontal
Rule), ตาราง, รปภาพ, เลเยอร (Layer)
Common แทรกขอมลทวๆไป เชน รปภาพ ลงค ตาราง วนท เวลา
Layout แทรกขอมลตางๆ เชน ตาราง เฟรม เลเยอร
From แทรกขอมลเกยวกบการสรางฟอรม ฟวด
Data แทรกขอมลเกยวกบการจดการฐานขอมล
Spry รวมคาสงเกยวกบ spry ตางๆ ชวยในการสรางเวบ
Text จดการขอความ ตวอกขระพเศษ
Favorites กลมทเราสรางขนเอง กรณตองใชบอยๆ
• แถบแสดงสถานะ (Status Bar) ประกอบดวยสองสวน
– มมซายเปน tag selecter ใชดความสาคญระหวาง tag และกาหนด
คณสมบตใหกบ tag ทเลอก
– มมขวา
สาหรบเลอก
object
เลอนหนาจอ
เวบเพจ ยอ/ขยายขนาดของ window
ทใชอย คลกเปลยน
ขนาดได
ขนาดของเวบเพจและเวลาท
ใชเมอเปดกบเบราเซอร
• แถบควบคมการทางาน (Properties Palette)
– แสดงคณสมบตของ object ตามการเลอก
– เชน หากมการเลอกทจะพมพ หรอแกไขเนอหา รายการกจะเปน สวนทางานท
เกยวกบอกษร, การจดพารากราฟ ถาเลอกทรปภาพ รายการในแถบน กจะ
เปนคาสงตางๆ ทเกยวกบ การควบคมเรองรปภาพ
• สวนของ Panel Group
– เปนกลมของแถบเครองมอทสามารถเรยกใชงานไดอยางรวดเรว เพอใหงาย
ในการสราง Application บนอนเทอรเนต
– เชน การแทรก Code ของ JavaScript และ VBScript ลงในเวบเพจไดอยาง
งายๆ
– การแสดง หรอ ซอน Panel ไปท เมน Window
หนาจอแสดงผล (Document Windows)
หนาตางการทางานของ Dreamweaver สามารถเลอกหนาตางการทางาน
ได 3 รปแบบ โดยการคลกไอคอนทอยในแถบเครองมอ Toolbar ดงน
• Show Code View เปนหนาตางทใหแสดงเฉพาะโคด HTML ของหนา
เวบเพจท กาลงทางาน
• Show Code and Design View เปนหนาตางทแสดงทงโคด HTML
และหนาเวบเพจทกาลงทางาน
• Show Design View ใหแสดงแตหนาเวบเพจไมตองแสดงโคด HTML
Show Code View
Show Code and Design View
Show Design View
Rulerคลกเพอแสดงหรอซอน
Ruler
คลกขวาเพอเปลยน
หนวยของ Ruler
การเรมกาหนดโครงรางของเวบ
• กอนดาเนนการสรางเวบเพจ ขนแรกควรกาหนดใหขอมลตางๆ ทเกยวของอยใน
Folder เดยวกน เพองายตอการคนหาและจดเกบ
• ตวอยางเชน ทาเวบเพจของหนวยงาน กอนอนเราควรสราง Folder ชอของ
หนวยงานกอน อาจเปนภาษาองกฤษหรอภาษาไทยกได
• ใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder
ยอย เพอใชสาหรบแยกเกบไฟลตาง ๆ เปนหมวดหม
• เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตางๆ
ตวอยาง
สรางเวบเพจหนาใหม
1. คลกท เมน file ‐> new
1. เลอกกลมหลก 2. เลอกประเภท
สรางเวบเพจเปลา
สรางจาก สรางจาก template ทโปรแกรมเตรยมไวให
สรางจาก สรางจาก template ทเราสรางเอง
สรางจากไฟลตวอยางทสรางจากไฟลตวอยางท
โปรแกรมมไว
สรางไฟลประเภทอนๆ
การตงคาเพอใหอานภาษาไทยได
1. เลอกเมน Edit > เลอกคาสง Preferences
2. เลอก Fonts > Font Setting > เลอก Thai
การเพม Font เพอใชงาน
การนา Font จาก Windows มาใชงาน เลอกคาสงดงน
• หรอ เลอกท “Edit font List”
• สามารถเลอก font เพมเตมได
1. เลอก font
ทตองการ
2. กด
ป ม 3. Font จะ
ปรากฎตรงน
4. กดป ม
OK
การกาหนดรายละเอยดของหนาเวบเพจ
เลอกเมน Modify > Page Properties > Appearance
สตวอกษรทงหนาเวบ
<body text=“ส”>
ใสสพนหลง
<body bgcolor=“ส”>
ใสพนหลงดวยรปภาพ
<body background=“ชอรป”>
• Heading เกยวกบลกษณะ
ตวอกษรของหวขอท
สรางในหนาเวบเพจ
Title/encoding เกยวกบลกษณะ
ขอความ ทแสดงท
title bar ของเบราวเซอร
การพมพขอความและการกาหนดตวอกษร
• การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word
• โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย
• โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอให
สามารถอานไดงาย
• สามารถจดรปแบบและขนาดตวอกษรไดโดยใหเลอกขอความทตองการ
ปรบแตง และแกไขคาตาง ๆ ไดทหนาตาง Properties
• มรายละเอยดดงน
– Format เปนรปแบบตวอกษรสาเรจทเรานามากาหนดใหกบขอความได
– Font รปแบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมใน
เครอง PCและเครอง MAC
– Size ขนาดของตวอกษร ขนาดมาตรฐานทกาหนดไวคอ 3
– Color กาหนดสใหตวอกษร
การพมพขอความ
พนทการพมพงาน
การกาหนดใหชองวางสามารถตดตอกนมากกวาหนงครง
ดวยการกด space bar ตดตอกน ถาไมกาหนดชองวางท
ตดกนมากกวาหนงครงจะถกรวมเปนชองวางเพยงครงเดยว
คลกทเมน Edit > Preferences > General
คลกใหมเครองหมาย ถก ทน
การจดการกบขอความใหสวยงาม
• การขนบรรทดใหมโดยการกด ป ม enter
• การขนบรรทดใหมโดยการกด ป ม Shift +enter
ระยะหางระหวาง
บรรทดจะแคบลง
การสราง Table
• การใชตารางเหมาะสาหรบการนาเสนอขอมลจานวนมาก
• เพอความสะดวกในการจดการขอมลและความเปนสดสวน
• ควรจดระบบการนาเสนอขอมลของหนาเวบเพจโดยการใชตารางเปน
ตวจดการในการจดวางขอมลในแตละหนาเวบเพจ
โครงสรางของตาราง
วธการสรางตาราง
1. เลอกท object ทแทบ common2. กาหนดคาตางดงน
การกาหนดขนาดของเซลล
• ให Click เลอกเซลลทตองการ หรอ
• Click ทแทก <td> ทมมซายของหนาจอกได (ใชไดในกรณทเลอก
ตารางไวกอนแลว) ให Click ท Properties เพอกาหนดขนาดของเซลล
・ ดงรป
การผสานเซลล (Marge Cell)
1. ให Click เลอกเซลลทตองการ ผสาน เขาดวยกน
2. Click Properties แลวเลอก เพอกาหนดการผสานเซลล ดงรป
การแทรกรปภาพลงตาราง
1. ให Click เลอกเซลลทตองการแทกรป
2. เลอกเมน Insert > image ดงรป
3. เลอกหาทเกบของรป แลวเลอกรปทตองการแทรกลงตาราง ดงรป
•
การแทรกแถวและคอลมน
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)
ขนตอนการแทรกแถวและคอลมน
1 2
3
การพมพขอความและการกาหนดตวอกษร
• การพมพขอความในเวบเพจจะคลายกบการพมพเอกสารใน Word
• โดยเราสามารถจดรปแบบขอความใหสวยงามไดดวย
• โดยอาจใชตวอกษรกราฟกทสตวอกษรตดกบสพนฉากหลง เพอให
สามารถอานไดงาย
• สามารถจดรปแบบและขนาดตวอกษรไดโดยใหเลอกขอความทตองการ
ปรบแตง และแกไขคาตาง ๆ ไดทหนาตาง Properties
• มรายละเอยดดงน
– Format เปนรปแบบตวอกษรสาเรจทเรานามากาหนดใหกบขอความได
– Font รปแบบตวอกษร โดยใน Dreamweaver จะแสดงรปแบบตวอกษรทมใน
เครอง PCและเครอง MAC
– Size ขนาดของตวอกษร ขนาดมาตรฐานทกาหนดไวคอ 3
– Color กาหนดสใหตวอกษร
การเชอมโยง (Link)
• การเชอมโยงบนเวบเพจมดวยกนหลายรปแบบ
• อาจแบงตามการใชงาน หรอตามลกษณะของการเชอมโยงภายในเวบ
เพจ และการเชอมโยงภายนอกเวบเพจ
• แตถาแบงตามวตถประสงคของรปแบบการใชงานจะแบงการเชอมโยง
เวบเพจ ออกเปนดงน
–การเชอมโยงภายในเวบเพจเดยวกน
–การเชอมโยงภายในไซตเดยวกน
–การเชอมโยงไปยงเวบไซตอน
ใหดท Link กบ Target ตรง Properties
การเชอมโยงภายในเวบเพจเดยวกน
Step 1: กาหนดตาแหนงทจะกระโดดไป1. เลอน cursor ไปยงตาแหนงทตองการ2. ท menu bar เลอก Insert และ Named Anchor
ตามลาดบ
3. เมอปรากฏ dialog box ใหใสชอทตองการ ตองเปนอกขระภาษาองกฤษหรอตวเลข ตองไมขนตนดวยตวเลขและไมมชองวาง
จากนนเลอกป ม OK4. ถาไมเหนเครองหมาย Anchor ให เลอก View ‐> Visual
Aids ‐> Invisible Elements
การเชอมโยงภายในเวบเพจเดยวกน
Step 2: กาหนด Link1. ทาแถบสคลมขอความทใชเปนจดลงค
2. สงเกตทแถบ Properties จะเหนรายการ Link3. พมพอกขระแรก คอ # ตามดวย Named Anchor เชน
#label1 หรอ #top เมอตองการไปทจดเรมตนของเวบเพจ
การเชอมโยงภายในไซตเดยวกน
การทาลงคเชอมไฟล1. ทาแถบสคลมขอความทใชเปนจดลงค
2. สงเกตทแถบ Properties จะเหนรายการ Link
3. พมพชอไฟลทตองการใหลงค ชอไฟลอาจจะเปนไฟล .html หรอ ไฟล
ใดๆ กได กรณทไฟลอยใน folder ยอย ใหใสชอ folder ตามดวย /ชอ
ไฟล เชน picture/0001.jpg ถาม folder ยอยอกใหใช / คน เชน
document/344-101/chapter1.doc
การเชอมโยงไปยงเวบไซตอน
การทาลงคไปยงอเมลลใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบดวยคาบงคบ คอ
mailto: แลวตามดวย E-Mail Address ทจะสงไป
ตวอยาง mailto:[email protected]
การเชอมโยงไปยงเวบไซตอน
• ใชหลกการเดยวกบการทาลงคเชอมไฟล แตใหระบดวยคาบงคบ คอ
http://ชอเวบ หรอ https://ชอเวบ
เชน http://www.psu.ac.th หรอ https://www.psu.ac.th
และถาตองการให เวบใหมไมทบซอนกบเวบเดม ตรง Target ใหเลอก
_blank ถาไมกาหนด เวบใหมจะทบเวบเดม
การยกเลกลงค
1. ใหคลกเมาส ณ จดลงคเดม
2. ลบการออกจาก Link หรอทาใหขอความตรง Link เปนวาง
การเปลยนสลงค
• เลอกเมน Modify > Page Properties > Links
• เปนการกาหนดขนาดตวอกษร ส ทเกยวกบการเชอมโยงใหหนาเวบเพจ
เปลยนสลงค
เปลยนสลงคเมอมการคลกแลว
ทาใหขอความทเปนลงค ม/ไมม ขดเสนใต
