คู่มือการสอน Dreamweaver

1

คมอการสอน

2

1. หลกการออกแบบและพฒนาเวบไซต 2. รจกกบ Macromedia Dreamweaver 8 3. การท างานเบองตนกบเวบไซตและเวบเพจ 4. ขอความในเวบเพจ 5. ใสภาพประกอบเวบเพจ 6. การสรางไฮเปอรลงค (Hyperlink) 7. จดหนาเวบเพจดวยตาราง 8. การสรางฟอรม 9. เลนมลตมเดยบนเวบเพจ (Web Multimedia) 10. สรางเวบเพจใหโตตอบกบผชม (Javascript Behavior) 11. การบรหารจดการเวบไซต 12. การเผยแพรเวบไซต

Web Design Using Adobe PhotoShop CS and Macromedia Dreamweaver 8

ELEPHANT’S TALE LANGUAGE AND COMPUTER TRAINING CENTER

http://www.elephantstale.com/

3

ขนตอนการพฒนาเวบไซต

ขอควรทราบ เวบไซต(Website) : เปนทเกบเวบเพจ(URL)โดยใชบราวเซอรดงขอมล(-ชอหนงสอ-) Web Server : เครองคอมพวเตอรทใหบรการเผยแพรขอมล โฮมเพจ(Homepage) : เวบเพจซงเปนหนาแรก(-ปกหนงสอ-**index) เวบเพจ(Webpage) : หนาเวบ(-หนายอย-) + Dreamweaver มใชจดเรมตน แตเปนการรวบรวมผลงานตาง ๆ ทมมาเผยแพร ถาไมมอะไรจะใสใน dream คงตองไปหาใหมกอน + Dreamweaver มใชจดสดทาย เพราะผลทไดจาก dream มผสรางทราบคนเดยว ตองน าไป upload เพอเผยแพรใน Web Server

รปแบบของโครงสรางเวบไซต

แบบเรยงล าดบ เวบทจ านวนเวบเพจไมมาก/เวบทตองการน าเสนอขอมลแบบทละขน แบบระดบชน เวบทจ านวนเวบเพจมากขนพบทวไป

แบบผสม เวบทซบซอน

ก าหนดเปาหมาย และวางแผน

วเคราะห และจดโครงสรางขอมล

ออกแบบเวบ และเตรยมขอมล

ลงมอสราง และทดสอบ เผยแพร และสงเสรมใหเปนท

รจก ดแล และพฒนา

4

โครงสรางพนฐาน <html>

<head> <title>หวขอเวบเพจ</title>

</head> <body> สวนทมเนอหา และขอมลเกยวกบ ภาพ Link ทปรากฎในเวบเพจ

</body> </html>

รปแสดง File 1st.html

รปแสดงผลการ RUN File 1st.html

5

รปแสดงสวนประกอบ Macrmedia Dreamweaver

6

***ขอตกลง การสราง Macromedia Dreamweaver 1. Set up ภาษาไทย 2. ก าหนด site โดยสราง Folder images 3. Set Title & Font 4. Save หนาแรก index.. ชอหามภาษาไทย

การ SET UP Macromedia Dreamweaver ใหรองรบภาษาไทย วธท 1 การก าหนดทละเวบเพจ

วธท 2 การก าหนดภาษาเปนคาเรมตนใหกบทกเวบเพจ

7

รปแสดงการก าหนดฟอนตของ Dreamweaver 8 ส าหรบการใชงานภาษาไทย

รปแสดงการก าหนด encoding ส าหรบการใชงานภาษาไทย

การสราง Site

รปแสดงไดอะลอก Manage Sites

8

รปแสดงการก าหนดคารายการเมน Local Info

รปแสดงไดอะลอก Manage Sites หลงการก าหนดเวบไซตเสรจแลว

9

รปแสดงหนาจอของ Dreamweaver 8 เมอเปดเวบไซต Personal Home Page เพอใชงาน

รปแสดงหนาจอของ Dreamweaver 8 เมอ set Title, Font, Save As,Site

10

การสรางเวบเพจใหม(1) และ การสรางเวบเพจใหมจากไฟลตวอยางทออกแบบไว(2)

การสรางเวบเพจใหมจากไฟลตวอยางทออกแบบไว

การเปดเวบเพจเดม File > Open , เปดจาก Site

*ขอแตกตางของไฟลทเรยกใชงาน,ไฟลทท าการ save แลวและยงไม save

11

การบนทกเวบเพจ File > Save as, Ctrl + S *เปนภาษาองกฤษเทานน ,ไมมอกขระพเศษใดๆ,ตวพมพเลกทงหมด ,ใช_แทนการเวนวรรค,.html(กอน)=.htm

การก าหนดคณสมบตพนฐานของเวบเพจ

12

*Tracing Image ใชในกรณทตองการน าภาพตวอยงามาวางเพอชวยเปนแนวในการออกแบบเลยเอาทของเวบเพจ(ภาพนจะไมแสดงผลในบราวเซอร) Tracing image เลอกภาพทจะน ามาท าเปนตวอยาง Transparency ปรบความโปรงใสของภาพตวอยาง

ยอนกลบการท างาน History, Ctrl+Z ขอความ

-ใสขอความธรรดา( ชอ-นามสกล) Ctrl+X , Ctrl+C , Ctrl+V Format, Font, Size, Color จาก Insert Bar > Text

-จดต าแหนง

- วรรค Ctrl + Shift + Space , Insert Bar > Text > และ Space ( ) ตงคาใหวรรคโดยเคาะหลายครง Edit > Preferences

-ขนบรรทดใหมในยอหนา Enter, Shift+Enter, Insert Bar > Text >

13

*Dreamweaver ไมสามารถตดค าภาษาไทยได การตดค าขนกบบราวเซอรและสภาพแวดลอมผชมเวบ

- แทรกเสนคน HTML การก าหนดส คลกขวาทเสน > Edit Tag <hr>

- แทรกสญลกษณพเศษ - การ Copy จากโปแกรมอน/ตาราง Excel Edit > Paste Special

การใสภาพ

.Gif

.JPG/.JPEG

.PNG

14

การยกเลกไดอะลอกบอกซส าหรบใสค าอธบาย

15

ปรบแตงคณสมบตของภาพกราฟฟก

16

สรางเอฟเฟคตสลบภาพเมอชเมาส

สรางเวบเพจอลบมรปภาพ Commands > Create Web Photo Album

- โฟลเดอร images เกบไฟลขนาดใหญทโปรแกรมแปลงจากไฟลตนฉบบ - โฟลเดอร thumbnails เกบไฟลขนาดเลกทโปรแกรมแปลงจากไฟลตนฉบบ - โฟลเดอร pages เกบไฟลเกบไฟลเวบเพจซงแสดงภาพขนาดใหญ เวบเพจละ 1 ภาพจะไมมถาเราไม / - Index.htm ถาสรางมากกวา 1 อลบมในโฟลเดอรเดยวกนจะชอ index1.htm, index2.htm,..

17

ใสภาพฉากหลง

no-repeat แสดงภาพเดยวทมมบนซายของหนาเวบเพจ repeat เรยงแบบซ าๆ จนเตมเวบเพจ ทงแนวตงและแนวนอน repeat-x เรยงแบบซ าๆ จนเตมเวบเพจในแนวนอน repeat-y เรยงแบบซ าๆ จนเตมเวบเพจในแนวตง

18

การสรางไฮเปอรลงค(Hyperlink)(ลงค)การเชอมโยงกนของเอกสารบนอนเทอรเนต

1. การสรางลงคภายในเวบเพจเดยวกน

<a name="elephant"></a>

<a href="#elephant">Elephant</a>

2. การสรางลงคไปยงเวบเพจหรอไฟลภายในเวบไซตเดยวกน

<a href="index.html">หนาหลก</a>

Target _blank ใหเปดเวบเพจปลายทางในวนโดวใหม _parent ใหแสดงเวบเพจในเฟรมทครอบครมเฟรมปจจบน(กรณทใชเฟรม) _self ใหแสดงเวบเพจในเฟรมเดมของลงค _top ใหแสดงเวบเพจบนในวนโดวเดม โดยยกเลกเฟรมทครอบอยทงหมด

http://www.elephantstale.com/trainting/course.htm

โปรโตคอล ชอโดเมน พาธและชอไฟล

19

3. สรางลงคไปยงเวบไซตอน

4. สรางลงคเพอสงอเมลล

5. สราง Image Map

6. การสราง Navigation Bar

20

7. การสราง Jump Menu

21

จดหนาเวบเพจดวยตาราง โครงสรางของตาราง

การสรางตาราง

-ใสเนอหาในตาราง - การเลอกสวนตางๆ ของตาราง - เลอกทงตาราง - เลอกแถว/คอลมน - เลอกเซลในตาราง - เลอกสวนประกอบของตารางดวย Tag Selector

22

ปรบแตงคณสมบตของตาราง

- คณสมบตของตารางบน Properties Inspector - ปรบความกวาง/สงของตาราง - หนวยของตาราง - ต าแนง - ใสเสนขอบ - ใสสพน - ใสภาพฉากหลง - ปรบแตงคณสมบตของเซล

- คณสมบตของตารางบน Properties Inspector - ปรบความกวาง/สงของเซล แถว และคอลมภ - ปรบขนาดเซล แถว คอมลมภ ดวย Properties Inspector, คลกเมาส - จดต าแนงเนอหาภายในเซล - ใสสพน สเสนขอบ และภาพฉากหลงของเซล

ปรบแตงเซลในตาราง

- แทรกแถวและคอลมน - ลบแถวและคอลมน

23

- แยกเซล - รวมเซล

เรยงล าดบขอมลในตาราง Command > Sort Table

จดรปแบบตารางอตโนมต Command >Format Table น าตารางมาชวยจดเลยเอาทของเวบเพจ สรางตารางรวมภาพกราฟกจาก Photoshop********** 2 ชวโมง สราง Banner ดวย Photoshop จดหนาเวบเพจในมมมอง Layout จดหนาเวบเพจดวยเลเยอร( Layer) แบงหนาเวบเพจดวยเฟรม (Frame) การสราง Template และการใชงาน Library การสรางฟอรม (Form)

องคประกอบของการสรางฟอรม -ตวฟอรม -ฟอรมออบเจค - ป ม Submit และ Reset - องคประกอบอนๆ

24

25

26

การเลนมลตมเดยบนเวบเพจ (Web Multimedia)

สรางปม Flash

27

ปรบแตงคณสมบตของปม Flash

สรางขอความ Flash

สรางสไลดโชวภาพดวย Image Viewer เลน Flash Video บนเวบเพจ

การแสดงมลตมเดยของ Flash และ Shockwave

28

เลนมลตมเดยอนบนเวบ

.midi / .mid เลนเสงโนตดนตร

.wav เสยง

.aif เสยง

.mp3 เสยง

.rm บนทกเพลง

.mov เสยงและวดโอ

.avi เสยงและวดโอ

.wmv, asf เสยงและวดโอ

29

เลนมลตมเดยโดยใชปลกอน (Plugin)

30

สรางเวบเพจใหโตตอบกบผชม (JavaScript Behavior)

ตวอยางการน า Behavior มาใชงาน

- เปดวนโดวแบบปอปอพ สรางแลวเลอกออกเจคท Behaviors

31

- เลนเสยง เลอกออบเจคทจะใชเลนเสยง

- แสดงกลองขอความ

เลอกภาพกราฟก

32

- แสดงขอความบนแถบสถานะ

เลอกไฮเปอรลงค Action เลอก Set Text > Set Text of Status Bar

การบรหารจดการเวบไซต การเผยแพรเวบไซต

Documents

คู่มือการสอน Dreamweaver