22
การสรางและดูแลเว็บดวย Macromedia Dreamweaver MX คูมืออบรม จัดทําโดย... สุวิมล คงศักดิ์ตระกูล เอกสารประกอบการอบรม สําหรับผูดูแลเว็บหนวยงานของมหาวิทยาลัย สํานักคอมพิวเตอร มหาวิทยาลัยศรีนครินทรวิโรฒ สิงหาคม 2547 © Copyright 2004: Srinakharinwirot University

การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX

คมออบรม

จดทาโดย... สวมล คงศกดตระกล

เอกสารประกอบการอบรม

สาหรบผดแลเวบหนวยงานของมหาวทยาลย

สานกคอมพวเตอร มหาวทยาลยศรนครนทรวโรฒ สงหาคม 2547

© Copyright 2004: Srinakharinwirot University

Page 2: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย

สารบญ • HTML ภาษาพนฐาน .........................................................................................1 • ความสามารถของ Macromedia Dreamweaver.....................................................2 • เรมตนใชงาน Macromedia Dreamweaver...........................................................2 • แนะนาการใชเครองมอใน Macromedia Dreamweaver MX .....................................3 • ทาให Dreamweaver ใชภาษาไทยได .................................................................7 • เรมตนสรางเวบไซต ..........................................................................................8 • การสรางโฟลเดอรใหมในเวบไซต ........................................................................9 • การสรางเวบเพจใหมในโฟลเดอร.......................................................................10 • การกาหนดคณสมบตของหนาเวบเพจ (Page Properties) ......................................10 • ขอความ (Text) .............................................................................................11 • รปภาพ (Image) ............................................................................................11 • การเชอมโยง (Link)........................................................................................11 • ตาราง (Table) ..............................................................................................13 • การสรางเฟรมเซตในเวบเพจ.............................................................................14 • การใช Cascading Style Sheet ........................................................................16 • การตรวจสอบ Link ในเวบไซต ..........................................................................18 • การกาหนดขอมลเกยวกบเครองเซรฟเวอร ...........................................................19 • การอพโหลดไฟลจากเครองเราสเครองเซรฟเวอร..................................................20

Page 3: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 1

การสรางและดแลเวบดวย Macromedia Dreamweaver MX

• HTML ภาษาพนฐาน

HTML ยอมาจากคาวา Hypertext Markup Language เปนภาษาหลกทใชในการแสดงผลบนเวบ

บราวเซอรในอนเทอรเนต ภาษา HTML แบงออกเปน 2 สวน คอ สวนทเปนขอความทวๆ ไป และสวน

ทเปนคาสงทใชในการกาหนดรปแบบของขอความทแสดง ซงเราเรยกวา แทก (Tag) โดยคาสงของ

HTML จะอยในเครองหมาย < และ >

<คาสง> ขอความ </คาสง>

<TITLE> MY HOMEPAGE <TITLE>

• โครงสราง HTML พนฐาน

โครงสรางของภาษา HTML แบงออกไดเปน 4 สวนหลก ดงน

<HTML>

<HEAD>

<TITLE> หวขอเวบเพจ <TITLE>

</HEAD>

<BODY>

สวนทเปนเนอหา

</BODY>

</HTML>

<HTML>… </HTML> เปนคาสงแรกทตองมในภาษา HTML ซงบงบอกวานคอภาษา HTML โดย

จะอยทจดเรมตนของเอกสารและทายเอกสารในแตละแฟม

<HEAD> … </HEAD> เปนสวนกาหนดรายละเอยดหวขอเรอง ภายในจะมคาสงยอยอกหนงคาสง

คอ <TITLE> … </TITLE> โดยใชชอหวเรองของเวบเพจ ซงจะไปปรากฏอยบน Title bar ของ

บราวเซอร

<BODY> … </BODY> สวนนเปนสวนของเนอหาเวบเพจของเรา ไมวาจะเปนขอความ รปภาพ

ตารางเสยง และการเชอมตอไปยงยงเอกสารอนๆ ทจะแสดงผลทเวบบราวเซอร

Page 4: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 2

• ความสามารถของ Macromedia Dreamweaver

เปนโปรแกรมทใชงานไดงาย คลายกบโปรแกรม FrontPage, HomeSite, HotDog … ผใชสามารถ

ออกแบบองคประกอบตางๆ (เรยกวา Object) ของหนาเวบเพจไดเอง เพยงแคลากสวนตางๆ เขามา

ประกอบกน โดยไมจาเปนตองมความรในเรองของภาษา HTML (แตหากผใชมความรเกยวกบภาษา

HTML กจะเปนประโยชนในเขาใจหลกการทางาน การสราง รวมถงการแกไขไดอยางละเอยด)

1. สนบสนนการทางานแบบ WYSIWYG (What You See Is What You Get) คอ เราสรางอะไร

บนหนาจอ Dreamweaver กจะปรากฏผลแบบเดยวกนทเวบเพจ ทาใหงายตอการใชงาน

2. มเครองมอชวยในการสรางรปแบบหนาจอ และมความยดหยนในการใชงานสง

3. สนบสนนภาษาสครปตตางๆ ทงฝงไคลเอนต และเซรฟเวอร เชน Java, ASP, PHP, CGI,

VBscript

4. มเครองมอในการอพโหลด (Upload) หนาเวบเพจไปทเครองเพอทาการเผยแพร

5. รองรบมลตมเดย เชน เสยง กราฟก

6. มความสามารถทาการตดตอกบฐานขอมล เพอความสะดวกในการเขยนแอพพลเคชนบน

เวบไซต

• เรมตนใชงาน Macromedia Dreamweaver

หลงจากทตดตงโปรแกรม Dreamweaver MX เรยบรอยแลว สามารถเรยกใชงานไดดงน

1. คลกทปม Start

2. All Program > Macromedia

3. เลอก Macromedia Dreamweaver MX จะปรากฏหนาแรกใหเราเลอกหนาตางการทางาน

โดยจะม 2 รปแบบ คอ หนาตางการทางานของโปรแกรม Dreamweaver MX หรอจะใช

หนาตางการทางานแบบ Dreamweaver 4

Page 5: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 3

• แนะนาการใชเครองมอใน Macromedia Dreamweaver MX

• แถบคาสง (Menu bar)

เปนแถบทใชเกบคาสงทงหมดของโปรแกรม

• แถบเครองมอ (Tool bar)

เปนแถบทรวบรวมปมคาสงทใชงายบอย

• แถบสถานะ (Status bar)

• สวนของ Properties (Properties Inspector)

แตละ Object ทเรานามาใชสรางหนาเวบเพจจะมคณสมบตตางๆ ทเราสามารถปรบแตงได

Page 6: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 4

• สวน Panel Group

เปนสวนทเพมขนมาเพอใหสามารถใชในการตดตอกบฐานขอมลฝงเซรฟเวอร เพอใหงายในการสราง

Application บน Internet

• รายละเอยดของแทบ Insert (Insert Bar)

เปนกลมเครองมอองคประกอบตางๆ (Object) ทจะนามาสรางหนาเวบเพจ ม 12 กลม ดงน

แทบ Common

เปนสวนทรวบรวมกลมเครองมอทใชสรางองคประกอบตางๆ ของเวบ เชนการแทรกภาพ การแทรก

ตาราง การกาหนดลงค เปนตน

กาหนดลงค กาหนดอเมลลงค แทรกตาราง

แทรกรปภาพ แทรกFlash แทรกวนท

กาหนดลงคในเวบเพจเดยวกน

แทบ Layout

เปนสวนรวมเครองมอทชวยในการจดองคประกอบของหนาเวบเพจ

Page 7: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 5

แทบ Text

เปนทรวบรวมคาสงเกยวกบการใชงานตวอกษร

แทบ Table

รวบรวมคาสงในการสรางตารางใหกบเวบเพจ

แทบ Frames

รวบรวมคาสงทใชในการแบงหนาเวบเพจใหออกเปนสวนยอย

แทบ Forms

แทรกเครองทใชในการสรางแบบสอบถาม และตวเลอกตางๆ

แทบ Templates

ใชในการกาหนดรปแบบใหกบเวบเพจ

แทบ Characters

เปนกลมเครองมอทใชแทรกตวอกษร และสญลกษณพเศษ

การแทรก Line Break การแทรกทวาง

แทบ Media

ใชสาหรบแทรกไฟลวดโอ, ภาพเคลอนไหว, Flash, Java applet, ActiveX หรอ Plugin ในหนาเวบ

Page 8: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 6

การแทรกไฟล Flash การสรางปมแบบ Flash การสรางตวอกษรแบบ Flash

แทบ Head

เปนการแทรกคาสงเสรมในหนาเวบ เชน คยเวรด เพอให Search Engine สามารถคนหาเวบเราได

แทบ Script

ใชในการแทรกภาษาสครปตในเวบ

แทบ Application

เปนแทบทรวบรวมคาสงทใชสรางแอพพลเคชนตดตอกบฐานขอมลผานเวบเซรฟเวอร

• หนาตางเวบเพจ (Document Window)

สาหรบหนาตางการทางาน Macromedia Dreamweaver MX สามารถเลอกได 3 รปแบบ

Show Code View เปนหนาตางทแสดงเฉพาะ HTML ของเวบเพจทเรากาลงทางานอย

Page 9: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 7

Show Code and Design Views เปนหนาตางทแสดงทง HTMLและหนาเวบเพจทออกแบบ

Show Design View แสดงแตหนาเวบเพจปกตไมแสดง HTML

• ทาให Dreamweaver ใชภาษาไทยได

ตองตดตงฟอนตภาษาไทย (thai addon) หลงตดตงเรยบรอยแลวเมอเขามาทโปรแกรม

Dreamweaver ใหเลอกคาสง Edit > Preferences และเลอก Fonts เพอกาหนดภาษาและชด

ตวอกษร โดยในชอง Font Settings ใหเลอก THAI Windows-874

Page 10: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 8

• เรมตนสรางเวบไซต 1. ไปทเมน Site >New Site

2. เลอกแทบ Advanced

3. Site Name กาหนดชอใหกบเวบไซต

4. Local Root Folder คลก เลอกโฟลเดอรทตองการเกบ เวบไซต

Page 11: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 9

การเรมตนสราง Site งาน ครงแรกโปรแกรมถามวา ตองการสรางไฟล cache สาหรบเวบไซตหรอไม

ไฟล cache ใชในการปรบไฟลตาง ๆ ในเวบไซตใหเชอมโยงถกตอง แมจะยายไฟลขามโฟลเดอร

ยอยกตาม หากไมตองการใหมขอความนเตอนทกครง ให Don’t ask again

5. Dreamweaver จะแสดงโฟลเดอรทเกบไซตใหมในหนาตางแทบ Site

• การสรางโฟลเดอรใหมในเวบไซต

เลอก Files > New Folder จากเมนของแทบ Site หรอคลกขวาทโฟลเดอรทเราเกบเวบไซตเลอก

New Folder

Page 12: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 10

• การสรางเวบเพจใหมในโฟลเดอร

เลอก File>New File จากแทบ Site หรอ คลกขวาทโฟลเดอรทตองการสรางหนาเวบเพจใหม เลอก

New File

• การกาหนดคณสมบตของหนาเวบเพจ (Page Properties)

กอนเรมตนสรางเวบควรเรมกาหนดคณสมบตหลกของหนาเวบกอน โดยการเลอกคาสง Modify >

Page Properties จากเมนบาร หรอคลกขวา เลอกคาสง Page Properties จะพบหนาตาง Page

Properties

รายละเอยดในหนาตาง Properties 1. Title กาหนดหวเรองของหนาเวบ

2. Background Image กาหนดภาพทใชเปนฉากหลงของหนาเวบ

3. Background กาหนดสทตองการใหเปนพนหลงของหนาเวบ

4. Text กาหนดสตวอกษรปกต

5. Links กาหนดสใหกบตวอกษรททาการ Links

6. Visited Links กาหนดสใหกบตวอกษรทเคยคลก Links

7. Links Links กาหนดสใหกบตวอกษรขณะคลก Links

8. Active Links กาหนดสใหกบ Links แบบตาง ๆ

9. Left Margin กาหนดระยะขอบซายของหนาเวบ (ใชกบบราวเซอร Explorer)

10. Top Margin กาหนดระยะขอบบนของหนาเวบ (ใชกบบราวเซอร Explorer)

11. Margin Width กาหนดระยะขอบซายของหนาเวบ (ใชกบบราวเซอร Netscape)

12. Margin Height กาหนดระยะขอบบนของหนาเวบ (ใชกบบราวเซอร Netscape)

13. Document Encoding กาหนดชดตวอกษร (ใหใช Thai Windows-874)

Page 13: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 11

14. Tracing Image และ Image Transparency ใชกาหนดภาพทใชอางองหรอใชเปนเทม

เพลต

• ขอความ (Text)

สามารถพมพขอความไดเหมอนการพมพเอกสารใน MS Word และกาหนดคณสมบตตางๆ เชน

รปแบบขอความ, การจดตาแหนงขอความ (Alignment)

• รปภาพ (Image) 1. เลอกรปทตองการโดยกดปม (Image) หรอไปทเมน Insert> Image

2. เลอกไฟลรปภาพจากเครอง PC

3. พมพคาอธบาย ในหวขอ Alt ( ภาพทนามาแสดงบนเวบเพจ บางครงไมสามารถ Load

ภาพขนมาแสดงได)

• การเชอมโยง (Link) การเชอมโยงภายในเวบเพจเดยวกน

1. กาหนดจด Anchor หรอจด Link ทจะกระโดดไปในหนาเวบเพจนน

2. คลกเมาสทแถบ Common หรอเลอกจากเมน Insert > Named Anchor

Page 14: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 12

3. ตงชอจด Anchor แลวคลกทปม OK

4. คลกคลมขอความทตองการกาหนดใหเชอมโยง กาหนดการเชอมโยง โดยการพมพ #

ตามดวยชอจด Anchor

กาหนดลกษณะของเพจใหมทเชอมโยง

รปแบบการแสดงผลบนเฟรมจากชอง Target ในแถบ Properties หรอเลอกไดจากเมน Modify> Link

Target

1. _blank ใหเปดเพจทเชอมโยงในหนาตางใหมอกหนาตาง

2. _parent ใหเปดเพจทเชอมโยง แสดงเพจหนาเดม

3. _self ใหเปดเพจทเชอมโยง แสดงในเฟรมเดยวกนกบทมขอความอย

4. _top ใหเปดเพจทเชอมโยงขยายเตมหนาจอ

การเชอมโยงภายในเวบไซตเดยวกน

1. คลกเลอกขอความ หรอ รปภาพ ทจะกาหนดใหเชอมโยง

2. กาหนดจดเชอมโยงโดยคลกทปม จาก Properties ทชอง Link

3. เลอกไฟลทตองการเชอมโยง

การเชอมโยงเวบไซตอน

1. คลกเลอกขอความ หรอ รปภาพทจะกาหนดใหเชอมโยง

2. พมพชอ เวบไซต โดยใหพมพ http:// นาหนาชอเวบเพจทเราตองการเชอมโยง ทชอง Link

จาก Properties เชน http://www.swu.ac.th

การเชอมโยงดวยอเมล

1. เลอกขอความ หรออเมล ทตองการกาหนดใหเชอมโยงไปยงอเมล

Page 15: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 13

2. พมพอเมลแอดเดรสทชอง Link จาก Properties โดยพมพคาวา mailto: ตามดวยชออเมลท

ตองการใหสง เชน mailto:[email protected]

การเชอมโยงดวย Map Link

เปนการทาภาพในเวบเพจ ทประกอบดวยพนทยอยทถกกาหนดใหเชอมโยงกบขอมล โดยสามารถคลก

ทสวนตาง ๆ ของภาพเพอเชอมโยงไปยงขอมลทแตกตางกนได

1. คลกภาพทจะสราง Map Link

2. เลอกบรเวณทตองการ Link โดยใชออบเจกต จาก Properties

3. กาหนดพนทของรปภาพทจะเชอมโยง โดยการคลกเมาสคาง แลวลากใหเปนกรอบ

4. เลอกไฟลทตองการเชอมโยง โดยคลก

• ตาราง (Table)

1. คลกเมาส ตาแหนงทตองการวางตาราง

2. คลกทปม เครองมอสรางตาราง Insert Table ในแถบ Object ปรากฏ กรอบทางาน ดงน

กาหนดรายละเอยดของตาราง คอ

• Rows จานวนแถวของตาราง

• Columns จานวนคอลมนของตาราง

• Width ความกวางของตาราง กาหนดหนวยไดทงระบบ % และ Pixel

• Border ความหนาของเสนขอบรอบตาราง

• Cell Padding ระยะหางจากขอบขางในของเซลลเขามาในเซลล มหนวยเปน pixel

• Cell Spacing ความหนาของเสนคนระหวางเซลล

การลบตาราง

1. คลกเลอกตารางทงตาราง

2. กดปม Delete

การลบแถว, ลบคอลมน

1. คลกเลอกแถวหรอคอลมนทตองการลบ

2. กดปมขวาของเมาส ปรากฏเมนลด

3. เลอกคาสง Delete Row หรอ Delete Column

Page 16: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 14

การเพมแถว

1. นาเมาสไปคลกในเซลลสดทายของตาราง

2. กดปม Tab จะไดแถวใหมตอจากแถวสดทายของตารางโดยอตโนมต

การแทรกแถว/คอลมน

1. คลกเลอกแถวหรอคอลมนทตองการแทรก

2. กดปมขวาของเมาส ปรากฏเมนลด

3. เลอกคาสง Insert, Row หรอ Insert Column หรอ Insert Rows or Columns (กรณ

ตองการแทรกมากกวา 1)

• การสรางเฟรมเซตในเวบเพจ เฟรม คอ ลกษณะของการแบงพนทหนาตางหลก ของบราวเซอรออกเปนสวนยอย ๆ เพอใชสาหรบ

แสดงเวบเพจใหแตละสวนแยกจากกนอยางอสระ

วธการแบงเฟรม ไปท แถบ Frames คลกเลอกรปแบบเฟรมตามทไดออกแบบ

กาหนดรายละเอยดหนาตาง Properties

• Borders กาหนดใหแสดง (Yes) / ไมแสดง (No) ขอบลอมเฟรม (Default คอ Yes)

• Border Width กาหนดความหนาของเฟรม ถาไมตองการแสดงขอบเฟรม กาหนดคานเปน 0

• Border Color กาหนดสของขอบเฟรม

• Column (or Row) and Units กาหนดขนาดของคอลมน หรอความสงของเฟรม โดยใหเราระบ

หนวยทใชในชอง Units

• Pixels หนวย pixel แมนยาทสด ในการกาหนดขนาด

• Percent หนวยเปอรเซนตกบเฟรมอนในหนาตาง

• Relative หนวยเปอรเซนตกบขนาดหนาตางบราวเซอร

Page 17: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 15

รายละเอยดแถบ Properties ของหนาเวบในเฟรมยอย

แถบ ของ Panel Group ดานขวามอของโปรแกรมจะม เครองมอ Advanced Layout ? คลกเลอกแถบเฟรม

? คลกสวนใดสวนหนงของเฟรม

ปรากฏรายละเอยด หนาตาง Properties ของหนาเวบในเฟรมยอย

Frame Name ตงชอทใชเรยกเฟรมยอย ซงตองอางถงชอเฟรม เมอมการเชอมโยงกบ

เฟรมใหใชตวอกขระเลกในการตงชอ

Src ใหกาหนดชอและตาแหนงเกบไฟลเวบเพจทจะถกนามาใชในเฟรม

Borders กาหนดใหแสดง (Yes) / ไมแสดง (No) ขอบลอมเฟรมยอย

(Default คอ Yes)

Scroll กาหนดใหแสดง (Yes) / ไมแสดง (No) แถบเลอน (Scroll bar) ในเฟรม

ยอยAutoใหแสดงแถบเลอนเฉพาะ เมอมขอมลเกนกวาทจะแสดงไดบน

หนาจอ (Default คอ Auto)

No Resize สงใหแสดงขอบเฟรมยอย หากไมตองการใหมการใชเมาส ปรบขนาดเฟรม

ใหเชคถกหนาขอความน

Border Color กาหนดสขอบเฟรม

Margin Width

Margin Height

กาหนดระยะหางระหวางหนาเวบในเฟรมยอยกบขอบเฟรม

โดย Margin Width จะวดจากดานซายของเฟรม

Margin Height จะวดจากดานบนของเฟรม

การแทรกเวบเพจลงในเฟรม

1. เปดหนาตางเฟรมโดยเลอกคาสง Window -->Others --> Frames หรอ กด Shift + F2

2. Click เลอกสวนของเฟรมทตองการจะแทรกเวบเพจ

3. Click ท เพอเลอกไฟลเวบเพจทตองการแทรก

4. เลอกไฟลทตองการแทรก ปรากฏหนาเวบเพจในเฟรมทถกเลอกไว

Page 18: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 16

การบนทกเฟรมยอย

1. เลอกคาสง File>Save All หรอกดคย <Ctrl+Shift+S> คอการบนทกทกไฟลทประกอบเปนหนา

เวบเฟรม

2. โปรแกรมจะถามใหบนทกหนาตอไป ซงจะปรากฏเสนประ รอบ ๆ เฟรมยอย โดยจะบนทกจากดาน

ขวาลาง? ซายลาง ? ขวาบน ? ซายบน จนครบทกเฟรมยอม (ควรตองชอใหเหมาะกบตาแหนง

เฟรม)

หากมการแกไขหรอเปลยนแปลงทกครงตอง ใชคาสงบนทก File > Save All Frames

การเชอมโยงหนาเวบในเฟรม

1. ลากเมาสเลอกขอความทตองกาหนดเปน Link

2. Click mouse ปม เพอเลอกไฟลทจะเชอมโยงดวยในแถบ Properties

3. เลอกไฟลทตองการเชอมโยงดวยแลว Click ปม selete

4. กาหนดรปแบบการแสดงผลบนเฟรมจากชอง Target ในแถบ Properties ตวอยางเราเลอก Main

Frame คอ เฟรมทอยดานขาวมอ

• _blank เปดเพจใหมขนมา

• _parent แสดงเพจหนาเดม โดยจะลบเฟรมออก

• _self แสดงในเฟรมเดยวกนกบทมขอความอย

• _top ขยายเตมหนาจอ

รปแบบทเพมมาจากการเชอมโยงปกต คอ • mainFrame แสดงเพจใหมในหนา mainframe

• topFrame แสดงเพจใหมในหนา topFrame

• leftFrame แสดงเพจใหมในหนา leftFrame

5. เซฟแลวตรวจสอบผานบราวเซอร เมอ Click ท Link หนาเวบเพจทสามารถเชอมโยงได จะถก

แสดงในสวนเฟรมทกาหนดไว

• การใช Cascading Style Sheet

เปดหนาตาง CSS Styles โดยเลอก Window > CSS Styles

Page 19: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 17

คลกปม หรอเลอกคาสง Text > CSS > Edit Style Sheet คลกปม New

จะมรปแบบใหเลอก 3 รปแบบ ดงน

• Make Custom Style เปนการสรางแบบกาหนดชอใหม(เรยกวา Class)

• Redefine HTML Tag เปนการระบคาสง HTML ทจะเปลยนรปแบบใหเปนสไตลใหม

• Use Css Selector เปนการกาหนดสไตลให Link ในแตละแบบ

Define In คอการกาหนดสไตลตามรปแบบตอไปน

• New Style Sheet File กาหนดใหสรางสไตลขนมาใหม

• This Document Only กาหนดใหใชไฟลเอกสารนเทานน

คลกปม OK

กาหนดรปแบบทตองการใหกบสไตลชท

• การนาสไตลชทมาใชงาน

คลกปม เลอกไฟลสไตลชททเกบไว แลวคลกปม OK

Page 20: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 18

โปรแกรมจะทาการสรางโคดให ดงน <link href="/style_sheet/testcss.css" rel="stylesheet"

type="text/css"> หมายถงการทเราเรยกใชไฟลสไตลชททสรางขน

• การตรวจสอบ Link ในเวบไซต

ในระหวางการสรางเวบไซต อาจมการกาหนด Link ใหเชอมโยงไปยงไฟลตางๆ แตบางครงเราอาจ

ไมไดสรางไฟลนนขนมา ทาใหเวบของเราเกดปญหา Link เสยหรอ Broken Link เราสามารถตรวจสอบ

ปญหานไดโดย

2. เลอกโฟลเดอรทตองการตรวจสอบ Broken Link

3. เลอก File > Check Links

4. Dreamweaver จะตรวจสอบทก Link ในโฟลเดอรและไฟลตาง และสรปใหเราทราบ โดยแบง

แสดงเปน 3 กลม ดงน

• Show Broken Link แสดง Link แบบ Relative ทเสย

• Show External Links แสดง Link แบบ Absolute ทเชอมโยงไปนอกเวบไซต

• Show Orphaned Files แสดงไฟลทไมไดเชอมโยงกบทใดเลย

Page 21: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 19

• การกาหนดขอมลเกยวกบเครองเซรฟเวอร

กอนทเราจะทาการอพโหลดขอมลไปยงเครองเวบเซรฟเวอรไดนน เราจาเปนตองทราบ ชอเครองเวบ

เซรฟเวอร, Account Name และ Password กอนจงจะสามารถนาขอมลขนไปเกบยงเครองเวบ

เซรฟเวอรได

1. เลอก Site > Edit Sites

2. เลอกเวบไซต กดปม Edit

3. เลอก Remote Info

4. เลอก FTP

• FTP HOST พมพชอเครองเซรฟเวอร >> www.swu.ac.th

• Host Directory กาหนด directory ของเครอง (สวนใหญเราไมตองระบ)

• Login พมพชอ Account >> www

• Password พมพรหสผาน

• Check เลอก Use Passive FTP สาหรบการเชอมตอกงเครองเวบเซรฟเวอรทมการตดตง

ระบบ Firewall

Page 22: การสร างและด ูแลเว ็บด วย Macromedia Dreamweaver MXccapp.swu.ac.th/eform/doc/590080044_2.pdf · การสร างและด ูแลเว

การสรางและดแลเวบดวย Macromedia Dreamweaver MX สวมล คงศกดตระกล

เอกสารประกอบการอบรมโครงการอบรมสาหรบผดแลเวบหนวยงานของมหาวทยาลย 20

• การอพโหลดไฟลจากเครองเราสเครองเซรฟเวอร 1. เลอกไฟลและโฟลเดอรทตองการอพโหลด

2. คลกปม Put Files เพอนาไฟลเขาเครองเซรฟเวอร หรอ คลกปม Get Files เพอนาไฟล

จากเครองเซรฟเวอรมายงเครอง PC ทเราทางาน