ประวัติความเป็นมาของโปรแกรม 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 ได้มีการปรับปรุงรูปแบบการท างานให้ทันกับ

ความต้องการของโลก โดยเพิ่มเติม 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. 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 ได้ง่ายขึ้นกว่าเดิม

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

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 แสดงให้คลิก เลือก

ส่วนประกอบของหน้าจอโปรแกรม ก่อนจะเริ่มลงมือสร้างเว็บเพจ ควรท าความรู้จักกับส่วนประกอบหรือแผงควบคุมการท างานของเครื่องมือแต่ละอย่าง โดยแบ่งแผงควบคุมการท างานออกเป็นกลุ่มตามลักษณะการท างาน เพื่อให้ใช้เครื่องมือในการสร้างเว็บเพจได้อย่างถูกต้อง ซึ่งมีส่วนประกอบดังนี้

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

การท างานของ Document Toolbar มีหน้าที่ดังต่อไปนี้

มุมมองในการท างานของวินโดว์ Document มีหลายแบบ แต่ที่ใช้งานบ่อยครั้งมี ดังนี้คือ 2.1 มุมมองออกแบบ(Design View) ในมุมมองนี้วินโดว์ Document จะแสดงเว็บเพจตามลักษณะคล้ายกับที่ปรากฏบนบราวเซอร์ โดยสามารถแก้ไขปละจัดวางเนื้อหาต่าง ๆ ลงบนเว็บเพจได้เช่นเดียวกับในโปรแกรม Microsoft Word ทั่วไป ส่วนใหญ่แล้วจะใช้มุมมองนี้ในการท างาน

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

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

3. Document bar เป็นเมนูมาตรฐานที่รวบรวมค าสั่งทั่วไป เช่น เมนู File, Edit, View, Insert, Modify, Format, Commands, Site, Window, Help พร้อมปุ่มทูลบาร์หลัก เช่น

การท างานของ Document Bar ประกอบด้วย

4. Tools Bar เป็นส่วนที่แสดงไอคอนค าสั่งที่ต้องใช้บ่อยๆ ให้สะดวกต่อการเรียกใช้งาน เช่น แถบเครื่องมือของพาเนล Insert เป็นต้น

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 แบบเมนู

การเปลี่ยนมุมมองของพาเนล Insert จากเมนูแบบเมนูเป็นแบบแท๊บ การเปลี่ยนมุมมองจากพาเนล Insert แบบเมนูไปเป็นแบบแท๊บ เพื่อให้สะดวกสาหรับผู้ใช้งาน สามารถกระท าได้ดังนี้ 1. เลื่อนเม้าไปตรงเมนู Common แล้วคลิกเม้าตรงลูกศรชี้ลง จะปรากฏแถบเมนูของพาเนล Insert ของ Common 2. คลิกเลือก Show as Menu จะมีเครื่องหมาย 3. แสดงมุมมองของพาเนล Insert แบบแท๊บ

6. Status Bar เป็นพื้นที่ทางด้านล่างของหน้าต่าง Document เพ่ือบอกข้อมูลเกี่ยวกับเว็บเพจที่สร้างขึ้น

ส าหรับ แถบสถานะ (Status Bar) เป็นแถบเครื่องมือที่อยู่ทางด้านล่างของวินโดว์ Document ประกอบด้วย 2 ส่วน คือ ด้านซ้ายเป็น Tag Selection ส่วนด้านขวาเป็นเครื่องมือต่าง ๆ ดังนี้

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

มากที่สุด จะแสดงคุณสมบัติส าคัญของออบเจ็คท่ีกาลังเลือกบนเว็บเพจ และใช้ก าหนดหรือแก้ไขคุณสมบัติของออบเจ็คต่าง ๆ เช่น ขนาด ต าแหน่ง และสี ทั้งนี้รายละเอียดบนพาเนล Properties จะเปลี่ยนแปลงตลอดเวลาขึ้นอยู่กับขณะนั้นก าลังเลือกออบเจ็คใด

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

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

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

การก าหนดโครงสร้างเว็บไซต์ เป็นการเตรียมความพร้อมในการสร้างเว็บไซต์ ควรประกอบด้วยอะไร เช่น เนื้อหา รูปภาพ ภาพเคลื่อนไหวหรือมัลติมีเดียต่างๆ ซึ่งควรมีการแบ่งแยกเนื้อหาแต่ละส่วนไว้อย่างชัดเจนไม่ให้ปะปนกัน จากนั้นจึงจะด าเนินการเริ่มต้นสร้างเว็บไซต์

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

5. คลิก เพ่ือเลือกแหล่งที่เก็บไฟล์ต่าง ๆ ของเว็บไซต์ 6. เลือกโฟลเดอร์ที่จัดเก็บไฟล์ต่าง ๆ หากยังไม่มีโฟลเดอร์ให้สร้างโฟลเดอร์ใหม่

7. หลังจากเลือกโฟลเดอร์แล้ว คลิกปุม่

8. คลิกปุม่ เพ่ือยืนยันการก าหนดชื่อและสร้างไซต์ 9. เว็บไซต์ที่ถูกสร้างจะปรากฏขึ้น เช่น spa Thai ตรงพาเนล Files

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

8. คลิกปุม่ สิ้นสุดการแก้ไขไซต์

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

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

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