- ประวัติความเป็นมาของโปรแกรม Adobe Dreamweaver CS6 - ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe Dreamweaver CS6 - เริ่มต้นการใช้งานโปรแกรม Adobe Dreamweaver CS6 - ส่วนประกอบของหน้าจอโปรแกรม Adobe Dreamweaver CS6

2. ประวัติความเป็นมาของโปรแกรม Adobe Dreamweaver CS6
โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมที่ใช้ในการสร้างเว็บ สามารถเขียน HTML CSS PHP Javascript และ ภาษาอื่นๆ อีกมากมายแม้กระทั่ง Jquery Dreamweaver ก็มี add on อีกด้วย โดยโปรแกรม Macromedia Dreamweaver ตั้งแต่เวอร์ชั่น 1-8 เจ้าของคือ บริษัท Macromedia (1997-2005) ต่อมาเมื่อปี 2007 ได้ออก เวอร์ชั่น CS3 ใน ค่ายของ Adobe จนพัฒนามาเป็นเวอร์ชั่น CS6 ในปัจจุบัน โดยมีลาดับความเป็นมาดังนี้
Macromedia Dreamweaver 1 เมื่อ เดือน ธันวาคม 1997 เป็นรุ่นแรกของ Macromedia Dreamweaver สามารถ ใช้งานกับ Max OS เท่านั้น Macromedia Dreamweaver 2 เมื่อ เดือน มีนาคม 1998 Macromedia Dreamweaver 3 เมื่อ เดือน ธันวาคม 1999 Macromedia Dreamweaver 3 ออก เวอร์ชั่น ย่อย Ultra Dev 1.0 มิถุนายน 1999 Macromedia Dreamweaver 4 เดือน ธันวาคม 1999 และ UltraDev 4.0 เวอร์ชั่นนี้ ออกมาแข่งกับ FrontPage ของค่าย Microsoft และ มีผู้พัฒนาเว็บหลายท่านเปลี่ยนใจมาก FrontPage มาใช้ Dreamweaver ซึ่งทั้งสองโปรแกรมมี ความสามารถของพอๆ กัน แต่หลังจาก เวอร์ชั่นนี้ออกมาแล้วทาง Dreamweaver สามารถใช้งานได้ดีกว่า ทาให้โปรแกรม FrontPage และ FrontPage หายไปจากนักพัฒนาเว็บ Macromedia Dreamweaver 6 MX(Dreamweaver MX) เมื่อเดือนพฤษภาคม 2002 Macromedia Dreamweaver 7 MX 2004 เมื่อเดือนกันยายน 2003 Macromedia Dreamweaver 8 ออกเมื่อเดือน กันยายน 2005 ซึ่งสามารถเขียน โค้ด CSS, php แบบมีตัวช่วย AutoComplete ทาให้ไม่ต้องจา function หรือ selector ของ css ออกรุ่น Adobe Dreamweaver CS3 เมื่อ ปี 2007 แล้วเปลี่ยนค่าไปเป็น ของ Adobe ออกรุ่น Adobe Dreamweaver CS4 เมื่อ ปี 2008 ออกรุ่น Adobe Dreamweaver CS5 เมื่อ 12 เมษายน 2010 ออกรุ่น Adobe Dreamweaver CS6 เมื่อ 12 เมษายน 2012 โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมที่ใช้ในการสร้างเว็บซึ่งมีความสามารถโดดเด่น ประกอบด้วย 1. Fluid grid layout เนื่องจากการออกแบบหน้าเว็บเป็นการออกแบบหน้าจอสาหรับเครื่องคอมพิวเตอร์พีซี และ เครื่องโน้ตบุ๊ก อย่างเดียว แต่ในปัจจุบันอุปกรณ์พกพาอย่าง แท็บเล็ตและมือถือที่หน้าจอมีการแสดงผลไม่มีรูปแบบตายตัว Adobe Dreamweaver CS6 ได้มีการปรับปรุงรูปแบบการทางานให้ทันกับ

3. ความต้องการของโลก โดยเพิ่มเติม Fluid Grid Layout Template เพื่อให้คุณสามารถออกแบบ Website แบบ Responsive
ได้สะดวกขึ้น
2. JQuery Mobile Framework updates ในเวอร์ชั่นนี้เพิ่มส่วนช่วยในการทางานกับ JQuery Mobile
Framework ได้สะดวกขึ้นไปอีก โดยการนา Theme ที่ออกแบบด้วย Adobe Firework CS6 มาเลือกใช้กับ Mobile Web
project เพื่อใช้ในการกาหนดไอคอนต่างๆ ให้กับ ปุ่มbutton เป็นต้น
3. Adobe Phone Gap Build integration สาหรับ Adobe Dreamweaver ได้เพิ่มส่วนของการทางานกับ
Phone Gap Build เข้าไป เพื่อให้สามารถนา Mobile project ที่ทาอยู่ไปใช้งานในระบบ online service ของ Phone Gap
Build ได้โดยทาการ compile ออกมาเป็นไฟล์ mobile application บน platform ได้ ให้เป็น mobile application แต่ละ
platform ได้อย่างไม่ยุ่งยาก

4. 4. CSS3 Transition สาหรับ Adobe Dreamweaver CS6 ได้เพิ่มส่วน User Interface ให้ผู้ใช้สามารถกาหนด
CSS3 Transition ให้กับ element ได้ตามที่ต้องการ โดยลดขั้นตอนการเขียน code CSS ด้วยตนเอง
5. Integrate with Adobe Business Catalyst เป็นการให้บริการคล้ายกับให้บริการ hosting การใช้บริการ
hosting, SEO, Web Analytic จนไปถึง E-commerce system โดยทาเป็นการ online service เชื่อมกับ Adobe
Dreamweaver เพื่อให้ Web designer ทุ่นแรง ไม่ต้องหา domain หรือ hosting มาใช้งาน เพียงสมัครใช้บริการ แล้วก็
สามารถ upload ตัว Web Project ขึ้นไปใช้งานได้ทันที มีทั้งแบบฟรีให้ทดลองใช้ และเสียเงินเป็นรายเดือน
6. Web Font Management Web Font ในปัจจุบันเริ่มได้รับความนิยมมากขึ้น ซึ่งในประเทศไทยเราเองก็เริ่ม
ตื่นตัวเรื่องการใช้งาน Web Font โดยAdobe Dreamweaver CS6 ได้มีส่วนของการจัดการ Web Font เข้ามาทาให้สามารถ
นา Web Font เข้ามาใช้งานใน Project ได้ง่ายขึ้นกว่าเดิม

5. 7. CSS Multiple Classes selection สาหรับ Adobe Dreamweaver CS6 ได้มีการเพิ่มส่วนในการจัดการ CSS
Multiple Class ให้ง่ายและสะดวกขึ้น สาหรับผู้ใช้งาน
สรุปแล้ว ความโดดเด่นของโปรแกรม Adobe Dreamweaver CS6 ประกอบด้วย
1) Fluid grid layout 2) JQuery Mobile Framework updates 3) Adobe Phone Gap Build integration 4)
CSS3 Transition 5) Integrate with Adobe Business Catalyst 6) Web Font Management และ 7) CSS Multiple
Classes selection
ส่วนประกอบของหน้าต่าง Welcome Screen
หน้าต่าง Welcome Screen เป็นหน้าต่างเริ่มแรกของโปรแกรม Adobe Dreamweaver CS6 ซึ่งหน้าต่าง
Welcome Screen เป็นเครื่องมือสาหรับช่วยเหลือการใช้งานโปรแกรม สาหรับหน้าต่าง Welcome Screen นี้จะแสดงทุกครั้ง
เมื่อเปิดใช้งานโปรแกรม ซึ่งสามารถแบ่งกลุ่มเครื่องมือของหน้าต่าง Welcome

6. Screen ออกเป็นกลุ่มหลัก ๆ ดังต่อไปนี้ 1. Open a Recent Item (เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน) ใช้สาหรับเปิดงานเก่าที่เคยเรียกใช้งาน โดย โปรแกรมจะแสดงรายชื่อไฟล์ที่เคยใช้ทั้งหมด (เรียงลาดับจากที่เคยเปิดล่าสุดเป็นต้นไป) แต่ถ้าเป็นการเปิดโปรแกรมขึ้นมาครั้ง แรกและยังไม่เคยใช้งานใด ๆ จะไม่แสดงชื่อไฟล์ขึ้นมาในส่วนนี้ การเรียกใช้งานเก่าสามารถทาได้โดยคลิกเลือกจารายการชื่อไฟล์ ที่แสดงอยู่ หรือ คลิกปุ่ม Open เพื่อเปิดไฟล์อื่นที่ต้องการได้ 2. Create New (สร้างงานใหม่) ส่วนนี้ใช้สาหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์ได้หลายชนิด ไม่ ว่าจะเป็นไฟล์ HTML PHP ASP และ JavaScript เป็นต้น 3. Top Features (videos) เป็นทางลัดสาหรับเข้าดูรายละเอียดและเทคนิคในการใช้งานต่าง ๆ ของ โปรแกรมผ่านทางเว็บไซต์ Adobe 4. เปิดดูคาแนะนาการใช้โปรแกรม 5. ดาวน์โหลดโปรแกรมหรือดูข้อมูลบนเว็บไซต์ของ Adobe เพิ่มเติม 6. คลิก  เมื่อไม่ต้องการให้แสดงหน้าต่าง Welcome Screen เมื่อเรียกใช้โปรแกรม หากไม่ต้องการให้ หน้าต่าง Welcome Screen แสดงให้คลิก  เลือก
ส่วนประกอบของหน้าจอโปรแกรม ก่อนจะเริ่มลงมือสร้างเว็บเพจ ควรทาความรู้จักกับส่วนประกอบหรือแผงควบคุมการทางานของเครื่องมือแต่ละอย่าง โดยแบ่งแผงควบคุมการทางานออกเป็นกลุ่มตามลักษณะการทางาน เพื่อให้ใช้เครื่องมือในการสร้างเว็บเพจได้อย่างถูกต้อง ซึ่งมี ส่วนประกอบดังนี้

7. 1. Document Window คือพื้นที่ทางานหรือส่วนที่ใช้สาหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ ซึ่งหน้า
วินโดว์นี้จะคล้ายกับหน้าโปรแกรมเวิร์ดโปรเซสเซอร์ทั่วไป เช่น พิมพ์ข้อความ วางภาพกราฟิก และสร้างตารางข้อมูล โดยเนื้อหา
ต่าง ๆ จะแสดงออกมาคล้ายกับที่ปรากฏบนบราวเซอร์ Document window มีมุมมองในการทางานหลายแบบ เช่น มุมมอง
Code, Split, Design
2. Document Toolbar เป็นทูลบาร์ที่ประกอบด้วยปุ่มควบคุมการแสดงวิวหรือหน้าจอเอกสาร รวมทั้งการโอนย้าย
ไฟล์ ซึ่งมีปุ่มการทางานให้เลือกดังรูป
การทางานของ Document Toolbar มีหน้าที่ดังต่อไปนี้
มุมมองในการทางานของวินโดว์ Document มีหลายแบบ แต่ที่ใช้งานบ่อยครั้งมี ดังนี้คือ
2.1 มุมมองออกแบบ(Design View) ในมุมมองนี้วินโดว์ Document จะแสดงเว็บเพจตามลักษณะคล้ายกับที่ปรากฏ
บนบราวเซอร์ โดยสามารถแก้ไขปละจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจได้เช่นเดียวกับในโปรแกรม Microsoft Word ทั่วไป
ส่วนใหญ่แล้วจะใช้มุมมองนี้ในการทางาน

8. 2.2 มุมมองโค๊ด (Code View) ในมุมมองนี้วินโดว์ Document จะแสดงเว็บเพจในชุดคาสั่งภาษา HTML ที่ถูกสร้าง
ขึ้นอัตโนมัติโดย Dreamweaver หรือเป็นคาสั่งที่เขียนเพิ่มเข้าไปเอง นอกจากนี้อาจจะมีคาสั่งสไตล์ซีต (CSS) และภาษาสคริปต์
(Script) ต่าง ๆ ด้วย ซึ่งการแก้ไขจะส่งผลกลับไปยังมุมมองออกแบบ(Design View) โดยอัตโนมัติ เหมาะสาหรับคนที่ชอบเขียน
ไฟล์ด้วยการพิมพ์อย่างเดียว(โปรแกรมเมอร์ชอบเขียนแบบนี้)
2.3 มุมมองโค๊ดและออกแบบ(Code and Design View หรือ Split) ในมุมมองนี้วินโดว์ Document นี้เป็นการ
ผสมระหว่างหน้าโค๊ด(Code) และหน้าออกแบบ(Design) โดยจะแสดงโค๊ดคาสั่งในหน้าต่างซ้าย ส่วนหน้าออกแบบจะแสดงใน
หน้าต่างด้านขวา ซึ่งเป็นการแสดงเว็บเพจทั้งในรูปแบบที่ปรากฏบนเบราเซอร์ และรูปแบบคาสั่งภาษา HTML พร้อม ๆ กัน เพื่อ
ใช้ในการออกแบบและตรวจสอบคาสั่งไปในขณะเดียวกัน ซึ่งสามารถปรับขนาดพื้นที่ของแต่ละส่วนได้โดยการคลิกแล้วลากเส้น
แบ่งระหว่างทั้งสองส่วนนี้

9. 3. Document bar เป็นเมนูมาตรฐานที่รวบรวมคาสั่งทั่วไป เช่น เมนู File, Edit, View, Insert, Modify, Format,
Commands, Site, Window, Help พร้อมปุ่มทูลบาร์หลัก เช่น
การทางานของ Document Bar ประกอบด้วย
4. Tools Bar เป็นส่วนที่แสดงไอคอนคาสั่งที่ต้องใช้บ่อยๆ ให้สะดวกต่อการเรียกใช้งาน เช่น แถบเครื่องมือของพาเนล
Insert เป็นต้น

10. 5. Workspace switcher ปุ่มนี้ทาหน้าที่เปลี่ยนแปลงรูปแบบการแสดงพื้นที่ใช้งาน (Workspace) โดยสามารถเลือก
รูปแบบเวิร์กสเปชตามต้องการ หรือสร้างหน้าตาเวิร์กสเปชขึ้นมาเองได้ สามารถเลือกเป็น Designer สาหรับผู้ออกแบบ, Coder
สาหรับเน้นการเขียนโค๊ด, App Develop สาหรับนักพัฒนาแอป หรือ Classic สาหรับเมนูคลาสิก ซึ่งสามารถใช้งานเครื่องมือ
ของพาเนล Insert ได้เป็นแถบเครื่องมือ ซึ่งสามารถเปลี่ยนมุมมองของพาเนล Insert ได้ดังนี้
เปลี่ยนมุมมองของพาเนล Insert การเปลี่ยนมุมมองของพาเนล Insert เป็นการเปลี่ยนมุมมองของเครื่องมือ
เพื่อให้สามารถใช้งานได้สะดวกและเหมือนกับเวอร์ชั่นอื่น ๆ ที่เคยใช้ จะทาให้ได้ง่ายขึ้น ไม่ต้องเสียเวลาหาเครื่องมือว่าอยู่ที่ใด
ของหน้าจอ สามารถเปลี่ยนได้ระหว่างแบบเมนูและแบบแท๊บ โดยการเปลี่ยน Workspace จาก Designer เป็น Classic ก่อน
แล้วทาตามขั้นตอนดังนี้
1. คลิกลูกศรชี้ลงตรง DESIGNER
2. คลิกเปลี่ยน Workspace จาก Designer เป็น Classic
การเปลี่ยนมุมมองของพาเนล Insert จากเมนูแบบแท๊บเป็นแบบเมนู การเปลี่ยนมุมมองของพาเนล Insert จาก
มุมมองแบบแท๊บให้เป็นมุมมองแบบเมนู มีขั้นตอนดังนี้
1. เลื่อนเม้าไปตรงเมนู Common แล้วคลิกเมาส์ปุ่มขวาจะปรากฏเมนู Show As Menu และ Color Icons
2. คลิกตรง Show As Menu ให้มีเครื่องหมาย 
3. แสดงมุมมองของพาเนล Insert แบบเมนู

11. การเปลี่ยนมุมมองของพาเนล Insert จากเมนูแบบเมนูเป็นแบบแท๊บ การเปลี่ยนมุมมองจากพาเนล Insert แบบเมนู
ไปเป็นแบบแท๊บ เพื่อให้สะดวกสาหรับผู้ใช้งาน สามารถกระทาได้ดังนี้
1. เลื่อนเม้าไปตรงเมนู Common แล้วคลิกเม้าตรงลูกศรชี้ลง จะปรากฏแถบเมนูของพาเนล Insert ของ
Common
2. คลิกเลือก Show as Menu จะมีเครื่องหมาย 
3. แสดงมุมมองของพาเนล Insert แบบแท๊บ
6. Status Bar เป็นพื้นที่ทางด้านล่างของหน้าต่าง Document เพื่อบอกข้อมูลเกี่ยวกับเว็บเพจที่สร้างขึ้น
สาหรับ แถบสถานะ (Status Bar) เป็นแถบเครื่องมือที่อยู่ทางด้านล่างของวินโดว์ Document ประกอบด้วย 2 ส่วน
คือ ด้านซ้ายเป็น Tag Selection ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ ดังนี้

12. 7. Properties Inspector หรือ พาเนล Properties เป็นพาเนลที่อยู่ทางด้านล่าง เพื่อให้ผู้ใช้งานได้ปรับแต่ง
รายละเอียดและแก้ไขคาสั่ง HTML หรือ CSS เช่น ข้อความ รูปภาพ เป็นต้น เป็นพาเนลที่ใช้งาน

13. มากที่สุด จะแสดงคุณสมบัติสาคัญของออบเจ็คที่กาลังเลือกบนเว็บเพจ และใช้กาหนดหรือแก้ไขคุณสมบัติของออบเจ็คต่าง ๆ
เช่น ขนาด ตาแหน่ง และสี ทั้งนี้รายละเอียดบนพาเนล Properties จะเปลี่ยนแปลงตลอดเวลาขึ้นอยู่กับขณะนั้นกาลังเลือกออบ
เจ็คใด
8. Insert Panel เป็นพาเนลที่รวบรวมคาสั่งสาหรับสร้างและแทรกออบเจ๊กต์ต่างๆ เช่น Table(ตาราง) , Images
(รูปภาพ), Links (ลิงค์) โดยมีหมวดให้เลือกใช้งานมากมาย เช่น

14. 9. Files Panel ใช้พาเนล Files เพื่อจัดการไฟล์เอกสารเว็บเพจทั้งรูปภาพ, ไฟล์ HTML, ไฟล์มีเดียต่าง ๆ ที่ใช้สร้าง
เว็บไซต์ด้วยโปรแกรม Dreamweaver ผู้ใช้งานสามารถเปิดดูโฟลเดอร์ ไฟล์ ที่จัดเก็บข้อมูลเว็บไซต์ในพาเนล Files เพื่อดู
เว็บไซต์โลคอลรีโมทไซต์ หรือทดสอบการทางานเว็บเพจผ่านเซิร์ฟเวอร์ได้ ทั้งการลบ ย้าย แก้ไข เปิดดูชื่อไฟล์เว็บเพจและ
ไฟล์ข้อมูล อื่นๆ
การสร้างไซต์ (Site)
ก่อนเริ่มต้นสร้างเว็บไซต์และเว็บเพจ ควรมีการกาหนดโครงสร้างเว็บไซต์ก่อน ซึ่งเป็นการเตรียมพื้นที่หรือโฟลเดอร์
สาหรับเก็บไฟล์เว็บเพจของเว็บไซต์ โดยจัดการสร้างโฟลเดอร์เพื่อเก็บข้อมูลหรือเก็บไฟล์ต่างๆ ให้เป็นหมวดหมู่เพื่อง่ายต่อการ
จัดทาเว็บไซต์ และง่ายต่อการบริหารงานเว็บไซต์ ดังนั้นการจัดการวางแผนจัดเก็บข้อมูลลงในโฟลเดอร์จึงเป็นสิ่งสาคัญ ลักษณะ
ของ การจัดเก็บควรมีลักษณะดังนี้
โฟล์เดอร์หลักใช้เก็บไฟล์ประเภท .html หรือ .php
โฟลเดอร์รูปภาพ
โฟลเดอร์เสียง
โฟลเดอร์ภาพเคลื่อนไหว
อีกทั้งยังสามารถสร้างโฟลเดอร์ย่อย (Sub folder) ลงในโฟลเดอร์ต่าง ๆ ได้อีกด้วย

15. การกาหนดโครงสร้างเว็บไซต์
เป็นการเตรียมความพร้อมในการสร้างเว็บไซต์ ควรประกอบด้วยอะไร เช่น เนื้อหา รูปภาพ ภาพเคลื่อนไหวหรือ
มัลติมีเดียต่างๆ ซึ่งควรมีการแบ่งแยกเนื้อหาแต่ละส่วนไว้อย่างชัดเจนไม่ให้ปะปนกัน จากนั้นจึงจะดาเนินการเริ่มต้นสร้างเว็บไซต์
เป็นการเตรียมโฟลเดอร์เพื่อเก็บข้อมูลโดยสร้างเป็นโฟลเดอร์ย่อยในเครื่องคอมพิวเตอร์ โดยถ้าใช้งานร่วมกับโปรแกม
เซิฟเวอร์จาลองจะสร้างอยู่ในโฟลเดอร์ WWW ตามการสร้างโฟลเดอร์ใช้งานของโปรแกรม
การสร้างไซต์สาหรับจัดเก็บไฟล์เว็บเพจ
การสร้างไซต์ เป็นการสร้างแหล่งสาหรับจัดเก็บไฟล์ต่าง ๆ ที่ใช้ในการออกแบบและพัฒนาเว็บไซต์ อาจประกอบด้วย
ไฟล์รูปภาพ ไฟล์เว็บเพจ ไฟล์ CSS หรือไฟล์ประเภทวีดิโอ-มัลติมีเดียต่าง ๆ ซึ่งมีขั้นตอนดังต่อไปนี้
1. คลิกเลือกเมนู Site
2. คลิกเลือกคาสั่ง New Site จะปรากฏหน้าจอ Site Setup for <ชื่อไซต์>
3. คลิกเลือกแท๊บ Site
4. กาหนดชื่อเว็บไซต์จากช่อง Site Name เช่น spa Thai เป็นต้น
5. คลิก เพื่อเลือกแหล่งที่เก็บไฟล์ต่าง ๆ ของเว็บไซต์
6. เลือกโฟลเดอร์ที่จัดเก็บไฟล์ต่าง ๆ หากยังไม่มีโฟลเดอร์ให้สร้างโฟลเดอร์ใหม่
7. หลังจากเลือกโฟลเดอร์แล้ว คลิกปุ่ม

16. 8. คลิกปุ่ม เพื่อยืนยันการกาหนดชื่อและสร้างไซต์
9. เว็บไซต์ที่ถูกสร้างจะปรากฏขึ้น เช่น spa Thai ตรงพาเนล Files
การแก้ไขไซต์
การแก้ไขไซต์อาจกระทาได้เนื่องจากมีการเปลี่ยนแปลงขื่อไซต์ใหม่หรือเปลี่ยนแปลงแหล่งจัดเก็บข้อมูลใหม่ หรือ
ปรับเปลี่ยนค่าเกี่ยวกับไซต์ใหม่ ก็สามารถทาได้ดังนี้
1. คลิกเลือกเมนู Site
2. เลือกคาสั่ง Manage Sites
3. คลิกเลือกชื่อเว็บไซต์ที่ต้องการแก้ไข
4. คลิกปุ่ม
5. แก้ไขข้อมูลชื่อไซต์
6. แก้ไขโฟลเดอร์แหล่งเก็บไฟล์ของเว็บไซต์
7. คลิกปุ่ม เพื่อบันทึกการเปลี่ยนแปลงไซต์

17. 8. คลิกปุ่ม สิ้นสุดการแก้ไขไซต์
การสร้างโฟลเดอร์เพื่อจัดเก็บไฟล์
หลังจากที่สร้างไซต์พร้อมสร้างโฟลเดอร์หลักสาหรับเก็บไฟล์เว็บเพจ จากนั้นจาเป็นต้องสร้างโฟลเดอร์ย่อย เพื่อจัดเก็บ
ไฟล์ข้อมูลต่าง ๆ ที่เกี่ยวข้องในการสร้างเว็บไซต์และเว็บเพจ เช่น โฟลเดอร์เก็บรูปภาพ มัลติมีเดีย และข้อมูลที่เกี่ยวข้องกับการ
สร้างเว็บไซต์ โดยแบ่งเป็นหมวดหมู่แยกตามประเภทของไฟล์ข้อมูลที่ใช้งาน การสร้างหลายโฟลเดอร์ ใช้ขั้นตอนการปฏิบัติ
เช่นเดิม ซึ่งสามารถกระทาได้ตามขั้นตอนดังต่อไปนี้
1. คลิกเมาส์ขวาตรงพาเนล File โดยให้เมาส์ชี้ตรงชื่อไซต์ที่ต้องการสร้างโฟลเดอร์สาหรับเก็บไฟล์ข้อมูลต่าง ๆ (หาก
ไม่ปรากฏพาเนล File ให้ทาการเปิดพาเนล File โดยคลิกเลือกเมนู Window และคลิกเลือกคาสั่ง File แล้วพาเนล File จะ
แสดงอยู่ในส่วนล่างขวาของจอภาพ)

18. 2. เมื่อปรากฏแท็บคาสั่ง ให้เลือกคาสั่ง New Folder เพื่อสร้างโฟลเดอร์ใหม่
3. โปรแกรมจะกาหนดชื่อโฟลเดอร์ให้ ซึ่งสามารถเปลี่ยนแปลงชื่อโฟลเดอร์ได้ โดยลบชื่อโฟลเดอร์ที่โปรแกรมตั้งให้ แล้ว
พิมพ์ชื่อโฟลเดอร์ที่ต้องการแล้วกดแป้น Enter โปรแกรมจะเปลี่ยนชื่อโฟลเดอร์ตามที่กาหนด