แบบฝ กหัด การสร างเว ็บไซต ด วย Adobe Dreamweaver CS4webhelp.swu.ac.th/download.asp?file=download/DWHandsOn_CS4_Dept.pdf · แบบฝ

แบบฝกหัด: การสรางเว็บไซตดวย Adobe Dreamweaver CS4 โดย สุวิมล คงศักด์ิตระกูล

คําอธิบายหลักสูตร:

ศึกษาการใชโปรแกรม Adobe Dreamweaver CS4 ซึ่งเปนโปรแกรมสําเร็จรูปที่ชวยในการสรางเว็บไซตไดอยางงายๆ โดยสามารถนําขอความ รูปภาพ ไฟลมัลติมีเดีย ที่ตองการมาประกอบเปนหนาเว็บเพจ และเขาใจถึงการออกแบบเว็บไซตโดยการใชเทมเพลต ซึ่งทําใหงายตอการแกไข รวมทั้งการสรางเว็บไซตแบบใช Cascading Style Sheet

วัตถุประสงค:

เพื่อใหผูเขารับการอบรมสามารถสรางเว็บไซตดวย Adobe Dreamweaver CS4 ได

Software:

Adobe Dreamweaver CS4 Flash Slideshow Maker Professional

Document Files:

ไฟลที่ใชในการทําแบบฝกหัดจัดเก็บไวใน folder ชื่อ TrainingDW ซึ่งภายในจะมี folder ดังนี้ Source จัดเก็บไฟลเอกสาร Source_TrainingDW.docx ที่จะใชในการทําแบบฝกหัด Images จัดเก็บไฟลรูปภาพ Documents จัดเก็บไฟลเอกสาร css จัดเก็บไฟล Style Sheet activity จัดเก็บไฟลรูปภาพกิจกรรม

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

พันจันทร ธนวัฒนเสถียร. “ออกแบบและสรางเว็บสวยดวย Dreamweaver CS4 ” บริษัท ซัคเซส มีเดีย จํากัด ธันวาคม 2552.

Module 1: การสรางเว็บไซต

แบบฝกหัดท่ี 1: การสรางเว็บไซต

1. เปดโปรแกรม Adobe Dreamweaver CS4 โดยเรียกที่ Start >> Program >> Adobe Master Collection CS4 >> Adobe Dreamweaver CS4

2. คลิกเลือกคําส่ัง HTML จะแสดงหนาเอกสาร HTML ใหมที่ถูกสรางขึ้น

แบบฝกหัด: การสรางเว็บไซตดวย Adobe Dreamweaver CS4

สุวิมล คงศักดิ์ตระกูล สํานักคอมพิวเตอร มศว 2

3. คลิกเมนู Site >> New Site… คลิกเลือกแท็บ Advanced กําหนดรายละเอียดของเว็บไซตที่สรางดังนี้

Site Name :: TrainingDW

Local root folder :: คลิก เลือกไปที่ folder TrainingDW ที่อยู Desktop 4. คลิกปุม OK 5. ที่หนาตาง Panel Group จะเปด Panel Files แสดงชื่อเว็บไซตเปน TrainingDW

Module 2: การสรางเว็บเพจ index.html

แบบฝกหัดท่ี 1: การสรางเว็บเพจ

1. ที่ Panel Files คลิกขวาท่ี folder Site TrainingDW เลือก New File

2. ต้ังชื่อไฟลใหมเปน index.html กดปุม Enter 3. double click ที่ไฟล index.html เพื่อเปดไฟล 4. ที่ Toolbar ต้ังชื่อ Title ของเว็บเพจเปน SWU Computer Center



แบบฝกหัดท่ี 2: การออกแบบเลยเอาท

การวางเลยเอาทเปนการจัดแบงพื้นที่บนหนาเว็บใหเปนสัดสวน กอนวางเนื้อหา เพื่อที่จะควบคุมเนื้อหาใหอยูในกรอบพื้นที่ที่จัดแบงไว

1. ที่ Insert Panel เลือกแท็บ Layout คลิกเลือก

2. กําหนดรายละเอียดของตารางดังนี้

Rows : 1

Columns : 2

Table width : 95 %

Border thickness : 0 pixels

Cell padding : 0

Cell spacing : 0 3. คลิกปุม OK 4. ที่ Property Inspector ของ Table ใหกําหนด Align เปน Center

5. คลิกเมาสเลือกที่ Column ดานขวา เพื่อกําหนดความกวางของ Column ที่ Property Inspector ชอง

W กําหนดขนาดเปน 35%



แบบฝกหัดท่ี 3: การใช Cascading Style Sheet

1. ในกรณีที่ไดสรางไฟล .css ไวแลว ใหทําการลิงคไฟล .css มาใช โดยคลิกที่ บน Panel CSS STYLES

2. คลิกปุม Browse… ที่ชอง File/URL เพื่อคนหาไฟล .css 3. ที่หนาตาง Select Style Sheet File ทําการเลือกไฟลชื่อ style_sheet.css ใน folder css 4. ที่ Panel CSS STYLES จะแสดงชื่อ Style Sheet

5. double click ที่ Style ชื่อ Topic สามารถทําการแกไขรูปแบบการแสดงผลของ Style ได โดยเลือกจาก

ฟอรม โดยไมจําเปนตองเขียน Code ขึ้นมาเอง 6. คลิกปุม OK

แบบฝกหัดท่ี 4: การใสขอความบนหนาเว็บเพจ

การใสขอความบนหนาเว็บเพจคลายกับการพิมพเอกสารในโปรแกรม Word โดยคลิกบนพื้นที่ทํางานแลวทําการพิมพขอความลงบนหนาเว็บไดเลย

การขึ้นยอหนาใหม ใหกดปุม Enter

การขึ้นบรรทัดใหม ใหกดปุม Shift+Enter หรือ ที่ Insert Panel เลือกแท็บ text คลิกเลือก



การเวนวรรคระหวางตัวอักษร ในการการสรางเว็บ ไมสามารถเคาะ Space เพื่อเวนวรรคหลายๆ คร้ังไดเหมือนโปรแกรม Word ได ดังนั้นหากตองการเวนวรรคระหวางตัวอักษรมากกวา 1 คร้ัง ใหกดปุม Ctrl+Shift+Space หรือ ที่ Insert Panel เลือกแท็บ text คลิกเลือก

การจัดรูปแบบขอความ ใหทําการ Select ขอความที่ตองการจัดรูปแบบใหเกิดแถบสีดํา โดยกําหนดคาใน Property Inspectorคลิกเลือก เพื่อกําหนด ตัวหนา ตัวเอียง การใส Bullet การจัดยอหนา

การเรียกใช Style Sheet กับขอความ ใหทําการ Select ขอความที่ตองการจัดรูปแบบใหเกิดแถบสีดํา โดยกําหนดคาใน Property Inspector ที่ชอง class

1. คลิกเมาสที่ตําแหนง Row ที่ 1 Column ที่ 1 ของ Table Layout พิมพขอความ CC information 2. กดปุม Enter เพื่อขึ้นยอหนาใหม 3. ที่วินโดวเอกสาร- Source_TrainingDW.docx ทําการ copy ขอความในยอหนา The Computer

Center ทั้งหมดถึงคําวา by the Center. แลวทําการ paste 4. ทําการ Select ขอความ CC information เลือกใช Class ชื่อ Topic 5. ทําการ Select ขอความสวนรายละเอียด เลือกใช Class ชื่อ Text

6. กดปุม Enter เพื่อขึ้นยอหนาใหม 7. พิมพขอความ Announcement เลือกใช Class ชื่อ Topic กดปุม Enter เพื่อขึ้นยอหนาใหม

8. คลิกเลือก พิมพขอความรายละเอียดของขาวที่ 1 9. เลือกใช Class ชื่อ text 10. กดปุม Enter พิมพขอความรายละเอียดขาวถัดไป

11. พิมพขอความ News & Events เลือกใช Class ชื่อ Topic 12. กดปุม Enter เพื่อขึ้นยอหนาใหม



แบบฝกหัดท่ี 5: การใสตารางบนหนาเว็บเพจ

การใสตารางเหมาะสําหรับการนําเสนอขอมูลที่ตองการจัดใหเปนระเบียบหรือเพื่อแบงแยกขอความกับรูปภาพไดอยางชัดเจน โดยอยูในรูปของแถว และคอลัมน

1. คลิกเมาสยังตําแหนงที่ตองการวางตาราง ที่ Insert Panel เลือกแท็บ common คลิกเลือก 2. กําหนดตาราง

Rows : 2

Columns : 2

Table width : 100 %

Border thickness : 0 pixels

Cell padding : 2

Cell spacing : 2 3. คลิกปุม OK

การเพิ่มจํานวนแถวของตาราง ใหนําเมาสไปคลิกในเซลลสุดทายของตาราง กดปุม Tab จะไดแถวใหม

ตอจากแถวสุดทายของตาราง การลบตาราง คลิกเลือกตารางทั้งตาราง กดปุม Delete การลบแถว,ลบคอลัมน คลิกเลือกแถวหรือคอลัมนที่ตองการลบ กดปุมขวาของเมาส เลือก Table

เลือกคําส่ัง Delete Row หรือ Delete Column การแทรกแถว,คอลัมน คลิกเลือกแถวหรือคอลัมนที่ตองการแทรก กดปุมขวาของเมาส เลือก Table

เลือกคําส่ัง Insert Row , Insert Column หรือ Insert Rows or Columns…



4. คลิกเมาสเลือกที่ Column ดานซาย เพื่อกําหนดความกวางของ Column ที่ Property Inspector ชอง W กําหนดขนาดเปน 160

การจัดเรียงขอความในตาราง สามารถจัดเรียงไดทั้งแนวนอน(Horz) Default,Left,Center,Right และ

แนวต้ัง(Vert) Default,Top,Middle,Bottom 5. คลิกเลือกที่ Column ดานขวา กําหนด Vert ใหเปน Top

แบบฝกหัดท่ี 6: การใสรูปภาพบนหนาเว็บเพจ

1. คลิกเมาสยังตําแหนงที่ตองการแสดงภาพ Row ที่ 1 Column ที่ 1 จากน้ันคลิกเลือก ที่ Insert Panel เลือกแท็บ common

2. เลือกไฟลภาพ photo1.jpg ที่จัดเก็บอยูใน folder images

3. ใสขอความกํากับภาพ (Alt) ที่ Property Inspector ที่ชอง Alt เปน ภาพประกอบที่ 1

4. คลิกเมาส Row ที่ 1 Column ที่ 2 พิมพขอความรายละเอียดขาวกิจกรรม 5. คลิกเมาส Row ที่ 2 Column ที่ 1 เลือกไฟลภาพ photo2.jpg ที่จัดเก็บอยูใน folder images ใส

ขอความกํากับภาพ (Alt) ที่ Property Inspector ที่ชอง Alt เปน ภาพประกอบที่ 2 6. คลิกเมาส Row ที่ 2 Column ที่ 2 พิมพขอความรายละเอียดขาวกิจกรรม

แบบฝกหัดท่ี 7: การเชื่อมโยงไปยังเว็บไซตอื่น

1. คลิกเมาสที่ตําแหนง Row ที่ 1 Column ที่ 2 ของ Table Layout พิมพขอความ Quick Link เลือกใช class ชื่อ Topic กดปุม Enter

2. ที่ Property Inspector กําหนด Vert ใหเปน Top เพื่อดันขอความขึ้นดานบน

3. คลิกเลือก พิมพขอความ SWU ทําการ Select ขอความ



4. ที่ Property Inspector พิมพชื่อเว็บไซต http://www.swu.ac.th ที่ชอง Link 5. เลือกใช class ชื่อ text 6. Target เลือก _blank เพื่อเปดหนาเว็บเพจใหม

7. กดปุม Enter พิมพขอความ Quick Link ถัดไป

การสรางรายการ Link โดยใหแสดงเปน DropDown Menu เพื่อชวยประหยัดพื้นที่ในการแสดงรายการ

ทั้งหมด

8. พิมพขอความ Interesting Link เลือกใช class ชื่อ Topic กดปุม Enter

9. ที่ Insert Panel เลือกแท็บ Forms คลิกเลือก 10. ที่ชอง Text ใหพิมพชื่อเว็บไซต Mict 11. ที่ชอง When Selected,go to URL ใหพิมพ URL ของเว็บไซตนั้น http://www.mict.go.th 12. คลิกเลือก เพื่อเพิ่มรายการใหม 13. พิมพ UniNet Link ไปที่ http://www.uni.net.th 14. ถาตองการใหมีปุม Go เพื่อคลิกแลวจึงเรียกไปยังเว็บไซตที่กําหนดไว ใหทําเคร่ืองหมายถูก หนาชอง

Insert go button after menu คลิกปุม OK

แบบฝกหัดท่ี 8: การใสขอความบนหนาเว็บเพจ

1. พิมพขอความ Office Hours & Location เลือกใช class ชื่อ Topic กดปุม Enter 2. พิมพขอความ



Computer Center 4th Floor, Building 16 Srinakharinwirot University Monday- Friday : 8:00 a.m.-7:00 p.m. Weekend : 8:30 a.m.- 4:30 p.m.

3. เลือกใช class ชื่อ Text

4. ทําการ Save ไฟล index.html

Module 3: การสรางเว็บเพจ about.html

แบบฝกหัดท่ี 1: การแกไขเว็บเพจ about.html

1. double click ที่ไฟล about.html เพื่อเปดไฟล 2. ในสวนของ Administrator ที่แสดงขอมูลผูบริหารในตาราง ใหทําการคลิกเลือกแถวสุดทาย กดปุมขวา

ของเมาส เลือก Table เลือกคําส่ัง Delete Row

3. ทําการเพิ่มแถว โดยใหนําเมาสไปคลิกในเซลลสุดทายของตาราง กดปุม Tab จะไดแถวใหมตอจาก

แถวสุดทายของตาราง 4. ทําการเพิ่มขอมูลผูบริหาร โดยทําการแทรกรูปภาพ person.jpg ใน Folder images ที่ Column

ดานซาย 5. พิมพ ชื่อ ตําแหนง ที่ Column ดานขวา

แบบฝกหัดท่ี 2:การเชื่อมโยงเพ่ือดาวนโหลดไฟลเอกสาร

1. พิมพขอความ Document Download เลือกใช class ชื่อ Topic กดปุม Enter

2. คลิกเลือก พิมพขอความ Self Assessment Report 2009 ทําการ Select ขอความ

3. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก



4. คลิก เลือกไปที่ folder documents เลือกเอกสารช่ือ sar2009.pdf 5. กําหนด Target เปน _blank เพื่อเปดหนาเว็บเพจใหม 6. ที่ชอง Title พิมพ Self Assessment Report 2009 7. คลิกปุม OK 8. กดปุม Enter พิมพขอความ Report on Quality Assessment 2009 ทําการ Link ไปยังเอกสารชื่อ

Rsar2009.pdf 9. ทําการ Save ไฟล about.html

Module 4: การสรางเว็บเพจ services.html

แบบฝกหัดท่ี 1:การเชื่อมโยงเวบ็ไซตดวยไฟลรูปภาพ

1. double click ที่ไฟล services.html เพื่อเปดไฟล

2. คลิกเลือกรูปภาพที่ 1 3. ที่ Property Inspector ที่ชอง Link พิมพ https://ipass.swu.ac.th เลือก Target เปน _blank กําหนด

Border เปน 0 กําหนด Alt เปน IPass

ทําซํ้าตามขอที่ 2 และ 3 กับรูปภาพที่เหลือทั้งหมด

4. ทําการ Save ไฟล services.html

Module 5: การสรางเว็บเพจ faq.html

แบบฝกหัดท่ี 1:การเชื่อมโยงในหนาเว็บเพจเดียวกัน

1. double click ที่ไฟล faq.html เพื่อเปดไฟล 2. นําเมาสคลิกที่หนาขอความ Web Mail

3. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 4. ที่หนาตาง Named Anchor ต้ังชื่อ Anchor name เปน n1 คลิกปุม OK



5. จะพบสัญลักษณรูปสมอเรืออยูหนาขอความ Web Mail 6. ทําการสราง Anchor Link ที่หนาขอความ IPass โดย Anchor name ต้ังเปน n2

7. ทําการ Select ขอความ Web Mail ที่อยูดานบน 8. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 9. ที่หนาตาง HyperLink ชอง Link ใหเลือก #n1 คลิกปุม OK

10. ทําการสราง HyperLink ที่ขอความ IPass โดยเลือก Link ไปที่ #n2 11. ทําการ Save ไฟล faq.html

Module 6: การสรางเว็บเพจ activity.html

แบบฝกหัดท่ี 1:การสราง Photo Album

1. เปดโปรแกรม Flash Slideshow Maker Professional โดยเรียกที่ Start >> Programs >> Flash Slideshow Maker Professional >> Flash Slideshow Maker Professional

2. คลิกปุม Close เพื่อทําการปดหนาตาง Slideshow Wizard 3. ทําการเลือกรูปภาพที่จะนํามาสราง Photo Album โดยเลือกไปที่ folder TrainingDW >> activity >>

activity2 หนาตางดานขวาจะแสดงรูปภาพใน folder ที่เลือกไว

4. ทําการเลือกรูปภาพที่จะนํามาสราง Photo Album จากนั้นคลิกปุม 5. ที่หนาตางดานลางจะแสดงรูปภาพที่ Add เขามา



6. คลิกเลือกที่แท็บ Theme กําหนดคา Album ดังนี้

Ablum Title : activity2

Width : 400

Height : 300

คลิกเลือก Theme Album ที่ตองการ

7. คลิกเลือกที่แท็บ Publish กําหนด

Output folder ไวที่ TrainingDW >> Activity >> Activity2

Flash file name : activity2.swf

Html file name : activity2.html 8. คลิกปุม Publish Now!

แบบฝกหัดท่ี 2:การแทรกไฟลมัลติมีเดีย

1. สรางเว็บเพจช่ือ activity2.html โดยกําหนด Layout 1 row 1 column ขนาด 95% กําหนด Align เปน Center

2. ทําการ Linkไฟล style_sheet ชื่อ style_sheet.css ใน folder css 3. พิมพขอความ สํานักคอมพิวเตอรรับการประเมินคุณภาพภายใน ประจําปการศึกษา 2552

จากคณะกรรมการประเมินคุณภาพภายในของมหาวิทยาลัย เมื่อวันที่ 23 มิถุนายน 2553 เวลา 8.30-16.30 น. ณ สํานักคอมพิวเตอร กําหนด Class ชื่อ Topic



4. ทําการแทรกไฟล Flash ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 5. เลือกไฟลชื่อ activity2.swf ที่อยูใน folder activity >> activity2

6. ทําการ Save ไฟล activity2.html

แบบฝกหัดท่ี 3:การเชื่อมโยงในเว็บไซตเดียวกัน

1. double click ที่ไฟล activity.html เพื่อเปดไฟล 2. ทําการ Select ขอความ

ผูบริหารสํานักคอมพิวเตอรใหการตอนรับคณะศึกษาดูงานสํานักบริการคอมพิวเตอร มหาวิทยาลัยเกษตรศาสตร เขาศึกษาดูงานดานเทคโนโลยีสารสนเทศและการบริการเครือขาย เม่ือวันที่ 14 กรกฎาคม 2553 ณ สํานักคอมพิวเตอร มศว

3. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 4. ที่ชอง Link เลือกไปที่ไฟล activity1.html คลิกปุม OK



5. ทําการ Select ขอความ สํานักคอมพิวเตอรรับการประเมินคุณภาพภายใน ประจําปการศึกษา 2552 จากคณะกรรมการประเมินคุณภาพภายในของมหาวิทยาลัย เม่ือวันที่ 23 มิถุนายน 2553 เวลา 8.30-16.30 น. ณ สํานักคอมพิวเตอร

6. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 7. ที่ชอง Link เลือกไปที่ไฟล activity2.html คลิกปุม OK 8. ทําการ Save ไฟล activity.html

Module 7: การสรางเว็บเพจ contact.html

แบบฝกหัดท่ี 1:การเชื่อมโยงเพ่ือสง e-mail

1. double click ที่ไฟล contact.html เพื่อเปดไฟล

2. ทําการ Select ขอความ [email protected]

3. ที่ Insert Panel เลือกแท็บ Common คลิกเลือก 4. ที่ชอง E-Mail พิมพ [email protected] คลิกปุม OK

5. ทําการ Save ไฟล contact.html

Module 8: การสรางเทมเพลต

ขอดีของการใชเทมเพลต คือกรณีที่เราเรียกใชเทมเพลตกับเว็บหลายๆหนา เม่ือเราตองการแกไขเทมเพลต เราไมตองเสียเวลาในการแกไขทีละหนาใหเสียเวลา

แบบฝกหัดท่ี 1: การสรางเทมเพลต

1. double click ที่ไฟล template.html เพื่อเปดไฟลตนแบบ



2. ทําการแกไขช่ือ หนวยงาน… ใหถูกตอง

3. ที่ footer ใหทําการแกไขขอมูลใหถูกตอง

4. คลิกเมาสบนพื้นที่สีเทา ทําการลบขอความ “…” ที่แสดงอยูดานซายมือ 5. จากนั้นคลิกเมนู Insert เลือก Template Objects เลือก Editable Region

6. จะปรากฏหนาตางใหต้ังชื่อพื้นที่ที่สามารถเปล่ียนแปลงแกไขไดใน template นั้น คลิกปุม OK

7. เม่ือกําหนดพื้นที่ที่สามารถเปล่ียนแปลงแกไขได เรียบรอยแลวใหคลิกเมนู File เลือก Save as

Template…

8. ทําการต้ังชื่อ template คลิกปุม Save



9. โปรแกรมจะทําการบันทึกไฟลโดยใชนามสกุลเปน .dwt (template.dwt) และสราง folder ชื่อ Templates เพื่อจัดเก็บไฟลไว

แบบฝกหัดท่ี 2: การเรียกใชเทมเพลต

1. double click ที่ไฟล index.html เพื่อเปดไฟล 2. คลิกเมนู Modify เลือก Templates เลือก Apply Template to Page… 3. คลิกเลือก Templates ชื่อ template คลิกปุม Select

4. คลิกเลือกที่ Document body และ Document head ที่ Move content to new region เลือก

EditRegion1 (เปนชื่อพื้นที่ที่ต้ังไวตอนสราง template เปนพื้นที่ที่สามารถเปล่ียนแปลงแกไขได) คลิกปุม OK

5. Template จะถูกแทรกเขาไปในหนาเว็บ

6. ทําซํ้าตามขอที่ 1 - 4 กับเว็บเพจที่เหลือทั้งหมด

แบบฝกหัดท่ี 3: การแกไขเทมเพลต

1. double click ที่ไฟล template.dwt ที่อยูใน folder Templates



2. ที่ footer ใหกดปุม Enter หลังขอความเพื่อทําการ เพิ่มวันที่ Update เว็บไซต 3. ที่ Insert Panel เลือกแท็บ common คลิกเลือก 4. ที่หนาตาง Insert Date ใหเลือก Format วันที่ที่ตองการแสดง ทําเคร่ืองหมายถูกที่ Update

automatically on save เพื่อเวลามีการแกไขโปรแกรมจะดึงวันที่ที่แกไขลาสุดมาแสดงให คลิกปุม OK

5. คลิกเมนู File เลือก Save 6. ที่หนาตาง Update Template File จะแสดงไฟลที่เรียกใช template นี้ทั้งหมด คลิกปุม Update

7. ที่หนาตาง Update Pages ที่ Look in เลือก Entire Site เพื่อทําการ Update template ทั้งเว็บไซต

คลิกปุม Start

Module 9: การอัพโหลดไฟลสูเว็บไซต

แบบฝกหัดท่ี 1: การตรวจสอบการทํางานของหนาเว็บเพจ (Check Link)

ในระหวางการสรางเว็บไซต อาจมกีารกําหนด Link ใหเช่ือมโยงไปยังไฟลตางๆ แตบางคร้ังเราอาจไมไดสรางไฟลนั้นขึ้นมา ทําใหเว็บของเราเกิดปญหา Link เสีย หรือ Broken Link

1. ที่ Panel Files คลิกขวาท่ี folder Site TrainingDW คลิกเลือก Check Links เลือก Entire Local Site

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

3 กลุม

Broken Links แสดง Link ภายในที่เสีย (หาไฟลที่เช่ือมโยงไมเจอ)



External Links แสดง Link ภายนอกเว็บไซต (เปนการแสดง Link ใหเห็นเทานั้น ไมไดระบุวา Link นั้นเสียหรือไม)

Orphaned Files แสดงไฟลกําพรา ไฟลที่ไมถูกเช่ือมโยง

แบบฝกหัดท่ี 2: การอัพโหลดไฟลไปยังเว็บเซิรฟเวอร

1. ที่ Panel Files คลิกเลือก Remote view คลิก define a remote site

2. ที่หนาตา Site Definition ใหกําหนดคาดังนี้

Access : FTP

FTP Host : พิมพชื่อเคร่ือง Server

Login : พิมพชื่อ Account

Password : พิมพรหัสผาน

เลือก Use Passive FTP สําหรับเคร่ือง Server ที่มีการติดต้ังระบบ Firewall

คลิกปุม OK



3. เลือกไฟลและโฟลเดอรที่ตองการอัพโหลด

4. คลิกปุม Put Files เพื่อนําไฟลเขาเคร่ือง Server

5. คลิกปุม Get Files เพื่อนําไฟลจากเคร่ือง Server มายังเคร่ือง PC ที่ทํางาน