1. หน้าจอและเมนู 

หน้าจอ Dreamweaver ประกอบด้วยหลายส่วน แต่ที่สำคัญและใช้บ่อยที่ควรรู้จัก ได้แก่

 

Object

Poperties

Document Windows

 

1.         Document Window  หรือหน้าจอเป็นส่วนที่แสดงไฟล์ที่กำลังจัดทำซึ่งมีนามสกุล html เมื่อเรียกผ่านโปรแกรม Web Browser (F12)  ในส่วนของ Document Window จะแสดงpage title โดยมีชื่อไฟล์อยู่ในวงเล็บ และถ้าหากไฟล์นั้นมีการแก้ไขโดยที่ยังไม่ได้บันทึกลงไปจะแสดงเครื่องหมายดอกจันทน์ (*) ไว้ท้ายชื่อไฟล์

 

 

สำหรับทางด้านล่างขวาของ Document Window  จะเป็น Mini - Launcher ที่จะช่วยให้การทำงานสะดวกขึ้น โดยเป็นส่วนที่ใช้เปิด Site window ,Library palette,Sttyle palette, Behavior inspector, และ HTML inspector

 

   

2.      Objects   เป็นกล่องเครื่องมือที่ใช้ในการสร้างงาน เช่น นำภาพเข้า การกำหนดตาราง การเว้นวรรค การขึ้นบรรทัดใหม่ เป็นต้น การเรียก Objects  ไปที่เมนู เลือก Window > Objects

Objects

 

            3. Properties  เป็นเครื่องมือที่ใช้ในการปรับแต่งสิ่งที่ปรากฏอยู่บนหน้าจอ เช่น การกำหนดขนาดตัวหนังสือ การกำหนดขนาดภาพ การเปลี่ยนสีตัวหนังสือ การจัดตำแหน่งตัวหนังสือ ภาพ และตาราง  ที่นำมาแสดงในหน้า Document Window  แต่ถ้าหน้าจอไม่ปรากฏ Properties  ให้เลือกที่เมนู  Window >Properties 

 

 

 

            4. เครื่องมืออีกชุดหนึ่งที่ควรรู้จัก คือ Code ต่าง ๆ ที่ทำหน้าที่แสดง Code และการแก้ไขเปลี่ยนแปลง Code ให้เป็นไปตามต้องการ

                        - Show Code View   เป็นการแสดง Code ทั้งหมด

                        - Show Code and design View เป็นการแสดง Code และหน้าจอ Document Windows ที่กำลังทำงาน

                        - Show design View  เป็นการแสดงหน้าจอ Document Windows ที่กำลังทำงาน

ทั้งหมด

 

2.      การกำหนด Site และการจัดเก็บไฟล์ก่อนเริ่มต้นทำงาน ควรกำหนดที่เก็บงานในไดร์ฟ C ก่อน โดยสร้าง Folder ที่ ไดร์ฟ C และตั้งชื่อ Folder ว่า education  และใน Folder. education ให้สร้าง Folder ย่อยไว้สำหรับเก็บภาพ ชื่อ imageการเริ่มต้นใช้โปรแกรม Dreamweaver เพื่อสร้างเว็บสวย ๆ สู่อินเทอร์เน็ต นั้น สิ่งที่       จำเป็นอันดับแรกในการเริ่มงาน คือ การกำหนด Local site เพื่อควบคุมการทำงานของโปรแกรม การสร้าง Local site  มีความสำคัญในการใช้งานโปรแกรม Dreamweaver เป็นอย่างมาก เพราะโปรแกรมจะใช้ข้อมูลใน Local site เพื่อติดตามและควบคุมไฟล์งานที่อยู่ในเว็บไซต์การกำหนด Site ทำได้ดังนี้1.      เปิดโปรแกรม Dreamweaver และเลือกเมนู Site>New Site 2.      ที่  Site Definition ทางช่องซ้ายมือ Category ให้เลือก Local Info3.      ตั้งชื่อ Site Name ว่า my_homepage4.      

กำหนดตำแหน่งที่จะเก็บไฟล์งาน หรือเลือก Folder โดยกดปุ่ม Folder ที่อยู่ทางขวาของหัวข้อ Local Root Folder และเลือกตำแหน่งที่จะเก็บข้อมูล  เป็น C :\education5.      ที่ Cache  คลิกเลือก     ü    เครื่องหมายถูก หน้า Enable Cache  จะช่วยให้โปรแกรม Dreamweaver สามารถปรับปรุงข้อมูลได้อย่างรวดเร็วเมื่อมีการแก้ไขปรับปรุงเว็บไซต์6.      คลิก OK.  

เลือก Local Info

เลือกที่อยู่ Site

ชื่อ Site

 7.      หลังจากนั้นให้เปิดหน้าจอใหม่ โดยใช้คำสั่ง File >New File และตั้งชื่อไฟล์ใหม่เป็น index.html 8.      ดับเบิ้ลคลิก ที่ชื่อไฟล์ index.html เพื่อเปิดหน้าจอมาออกแบบเว็บไซต์
3. การออกแบบด้วยตาราง

เราจะออกแบบหน้าจอ 2 ส่วน ประกอบด้วยส่วนบนสำหรับหัวเรื่องหรือส่วนหัวของเว็บและส่วนล่างสำหรับข้อความ  ขั้นแรกให้ดับเบิ้ลคลิกที่ชื่อไฟล์ index.html เพื่อเปิดหน้าจอมาออกแบบเว็บไซต์ ที่ช่องTitle พิมพ์ว่า หน้าแรกของฉัน เพื่อที่จะให้ผู้ใช้รู้ว่ากำลังอยู่ที่หน้าใด   จากนั้นให้ปฏิบัติดังนี้

การกำหนดส่วนบนหรือส่วนหัวของเว็บ

1.      ที่ Objects คลิกเลือก Layout View 1 ครั้ง

2.      คลิก Draw Layout Table

3.      แล้ววาดตารางในหน้าจอ Document Windows ดังภาพ

 

3.ตารางส่วนหัวเรื่อง

1.คลิกเลือกLayout View

2.คลิก Draw Layout Table

 

4. วาดอีก 1 ตารางสำหรับเนื้อหา ดังภาพ

ตารางส่วนหัวเรื่องเรื่อง

ตารางเนื้อหา

4.การพิมพ์ตัวอักษร

1.เมื่อสร้างตารางเสร็จ  คลิกเลือก Draw Layout Cell ที่ Objects แล้วมาวาดในบริเวณตารางด้านบน  จะปรากฏเส้นสีฟ้าแสดงขอบเขตของ Cell ดังภาพ

 

ขอบเขตของCell

คลิก Draw Layout Cell

   2. ในขอบเขตของ Cell ให้พิมพ์คำว่า ดอกกุหลาบและกำหนดแบบตัวอักษร สี ขนาด ตำแหน่งของข้อความ (ชิดซ้าย กึ่งกลาง ชิดขวา) และสีพื้นโดยใช้ Properties ดังภาพ

ตำแหน่งข้อความ (กึ่งกลาง)

เลือกสีตัวอักษร

เลือกขนาดตัวอักษร

เลือกแบบตัวอักษร

 

กำหนดสีพื้น(Bg)

 3.หลังจากนั้นให้วาด Cell .ในตารางล่าง 2 Cell และพิมพ์ข้อความบน Cell ในตารางล่างขวามือ ดังภาพ 

พิมพ์ข้อความ

5.การนำภาพเข้าโปรแกรม          การนำภาพเข้าโปรแกรม ปฏิบัติได้ดังนี้1.      save ภาพที่จะใช้ทุกภาพไว้ใน Floder ชื่อ images ใน C:\education\images ที่สร้างไว้แต่แรกเสียก่อน2.  เรียกภาพเข้ามาใช้ใน Dreamweaver โดยคลิกให้เกิด Cell สีฟ้าตรงที่จะนำภาพเข้าแล้วคลิกที่รูปต้นไม้ (Insert  Image) ที่ Objects แล้วเลือกภาพที่ต้องการใช้ ดังภาพ 

2. คลิกที่รูปต้นไม้    เพื่อนำภาพเข้า

1.คลิกให้เกิด   Cell ก่อน

 3.เสร็จแล้ว ลองกด F12 ดู จะได้ภาพ ดังนี้ 

5.การนำภาพเข้าโปรแกรม          การนำภาพเข้าโปรแกรม ปฏิบัติได้ดังนี้1.      save ภาพที่จะใช้ทุกภาพไว้ใน Floder ชื่อ images ใน C:\education\images ที่สร้างไว้แต่แรกเสียก่อน2.  เรียกภาพเข้ามาใช้ใน Dreamweaver โดยคลิกให้เกิด Cell สีฟ้าตรงที่จะนำภาพเข้าแล้วคลิกที่รูปต้นไม้ (Insert  Image) ที่ Objects แล้วเลือกภาพที่ต้องการใช้ ดังภาพ 

2. คลิกที่รูปต้นไม้    เพื่อนำภาพเข้า

1.คลิกให้เกิด   Cell ก่อน

 3.เสร็จแล้ว ลองกด F12 ดู จะได้ภาพ ดังนี้ 

6.การนำเข้าข้อมูลในตาราง          1. ก่อนนำเข้าข้อมูลในตาราง ต้องสร้างตารางใน Dreamweaver เสียก่อน โดยสร้างไฟล์ใหม่ แล้วตั้งชื่อไฟล์ว่า data.html  ดังภาพ            2. ดับเบิ้ลคลิกที่ data.html ก็จะเข้าสู่ Document Windows ใหม่            3. ให้เลือก Object  คลิกที่ Standard View และคลิกเลือกรูปตาราง (Insert Table) หรือใช้เมนู Insert >Table            4. กำหนดค่าให้มี Rows = 5 Columns = 5  Width =100 Border =1  Cell Padding =5 Cell Spacing = 0 แล้วคลิก OK ดังภาพ

Insert Table

Standard View

 5. ภาพที่ได้จะปรากฏเป็นรูปตาราง ดังนี้6. ตารางที่สร้างสามารถที่จะยืดหดได้ตามขนาดของข้อมูล  โดยนำ Cursor ไปวางที่เส้นของตารางและลากยืดหดได้ตามต้องการ ดังภาพ  7.เราสามารถที่จะพิมพ์ข้อมูลลงในตารางได้ตามต้องการ หรือ Copy ข้อมูลจากไฟล์อื่นและ Paste เข้ามาใส่ในแต่ละช่องของตารางได้ การพิมพ์ตัวหนังสือสามารถทำได้ดังนี้1.      วาง Cursor ในช่องที่ต้องการพิมพ์และพิมพ์ตัวหนังสือลงไป โดยกำหนดให้ใช้ font  เป็น MS Sans serif , Size = 32.      ใช้ Properties ของตัวหนังสือ จัดวางตำแหน่งของตัวหนังสือในแต่ละช่อง ให้อยู่กึ่งกลาง โดยใช้ Align Center 

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

สร้างปุ่ม 2 ปุ่ม ปุ่มแรก ชื่อ next01.jpg มีลักษณะปกติ ปุ่มที่สอง ชื่อ next02.jpg มีลักษณะที่ต้องการให้เกิดการเปลี่ยนแปลง เมื่อเมาส์ลากผ่าน เช่น  ปุ่มที่ 1 สภาพปกติ                      ปุ่มที่ 2 เมื่อเมาส์ลากผ่าน2.      นำภาพไปไว้ในห้องที่เก็บภาพ ซึ่งอยู่ใน site ที่กำลังทำงาน  คือ c:\education\images3.      เปิดโปรแกรม Dreamweaver แล้วนำ Cursor ไปวางในบริเวณที่ต้องการสร้างปุ่ม 

ต้องการสร้างปุ่ม ที่นี่

 4.      แล้วเลือกเมนูที่  Insert > Interactive Images > Rollover Image 5.      เมื่อคลิกจะเกิดหน้าจอเมนูเล็ก สำหรับระบุว่า ภาพทั้งสองภาพ ที่จะนำมาทำเป็นปุ่มนั้นอยู่ที่ไหน 

สำหรับภาพที่  2

สำหรับภาพที่  1

 6.      ให้คลิกปุ่ม Browse ของปุ่มแรก จะเกิดเมนูโต้ตอบ  ให้คลิกเลือกภาพปกติ ในตัวอย่างเลือกไฟล์ next01.jpg 7.      จากนั้นให้คลิกปุ่ม Browse สำหรับภาพที่จะให้เกิดเมื่อเมาส์ลากผ่าน และ เลือก ภาพที่ 2  8.      จากนั้น ให้คลิก OK 

คลิก OK

 9.      จะปรากฎปุ่มให้เห็นในบริเวณที่กำหนด   10.  เมื่อกด F12 และวางเมาส์ผ่านปุ่มนี้ ปุ่มก็จะเปลี่ยนแปลงตามที่ต้องการ
8. การสร้างตัวหนังสือวิ่งการสร้างตัวหนังสือวิ่ง เราจะใช้ tag ของ html ซึ่ง Dreamweaver ได้อำนวยความสะดวก ทำให้เราใช้ได้อย่างง่ายมาก tag ที่จะใช้คือ marquee ซึ่งมีวิธีการดังนี้1.      กำหนดบริเวณที่จะให้ตัวหนังสือวิ่ง โดยใช้ layout table และ layout cell ดังภาพ 

ตัวหนังสือจะวิ่งในบริเวณนี้

 2.      พิมพ์ข้อความที่ต้องการให้วิ่ง 3.      ลากดำ หรือ hi-light ข้อความที่พิมพ์ และ ให้คลิกเลือก  [ Quick Tag Editor ] ที่ Properties ตามภาพข้างล่าง  4.      .จะเกิด Wrap Tag ขึ้น และอีก 2-3 วินาทีต่อมาจะมีชื่อ tag ต่าง ๆ เกิดขึ้นด้วย ให้เลื่อนลงมาเรื่อย ๆ และเลือก marquee ดังภาพ 5.      เมื่อคลิกแล้ว Dreamweaver จะนำ tag ไปไว้ ดังภาพ  6.      ให้คลิกปุ่ม enter จะปิด Wrap Tag7.      เมื่อกด F12 จะเห็นข้อความวิ่งในบริเวณที่กำหนด 
9.การเชื่อมโยง (Link)          โดยปกติหน้าของ Web จะมีการ Link  ไปยังหน้าอื่น ๆ เช่น เมื่อคลิกปุ่ม ข้อความหรือภาพที่ต้องการ Link  ก็สามารถ Link ไปยังหน้าที่เราต้องการได้ โดยปฏิบัติดังนี้            1.คลิกเลือกปุ่มที่ต้องการจะ Link .ให้เกิด Active ดังภาพ2.เลือกปุ่ม Browse for file เพื่อเลือกไฟล์ที่เราต้องการจะ Link ไปหา 

1.คลิกปุ่มที่จะ Linkให้เกิด Active

2.คลิกBrowse เพื่อเลือกไฟล์ที่จะ Link ไปหา

             3.คลิกไฟล์ที่ต้องการ Link ไปหาแล้วเลือก Select ดังภาพ           

คลิกSelect

เลือกไฟล์ที่ต้องการLink ไปหา

             4.ปุ่มจะถูกกำหนดให้ Link  ไปยังไฟล์ data.html  ดังภาพ 

Link ไปยังไฟล์data.html

                        5.เมื่อ Link เสร็จแล้ว ลองกด  F12  ดู จะได้ดังภาพ                          6.กดปุ่มหน้าต่อไป จะปรากฏ ไฟล์ data.html ดังภาพ           

10.การส่งข้อมูลขึ้นอินเทอร์เน็ต  (การ upload ไฟล์)

 

เมื่อสร้างเว็บเสร็จเรียบร้อยแล้ว จะต้องส่งขึ้นไปยัง Server เพื่อออกสู่อินเทอร์เน็ต Sever ที่ให้บริการบางแห่งก็ให้บริการฟรี แต่มักจะมีโฆษณาติดมาด้วย หรือบางแห่ง ก็ให้บริการโดยคิดราคาแตกต่างกัน ขึ้นอยู่กับบริการที่จัดให้  ตัวอย่างเว็บไซต์ ที่ให้บริการ Server สำหรับ สร้างเว็บฟรี ได้แก่  www.thai.net, www.netfirms.com, www.geocities.com เป็นต้น

 การส่งไฟล์ไปยัง Server

เราสามารถ ส่งไฟล์ไปยัง Server บนอินเทอร์เน็ต โดยใช้  Dreamweaver ได้  แต่ในบทเรียนนี้ จะเป็นการส่งไฟล์ไปบน อินเทอร์เน็ต โดยใช้วิธีการ FTP และใช้โปรแกรม Shareware ชื่อ WS_FTPLE ซึ่งสามารถดาวน์โหลดไปใช้ได้ คลิกที่นี่

 การเตรียมการก่อนส่งไฟล์ขึ้น อินเทอร์เน็ต

1. ดูโครงสร้างของเว็บที่สร้างว่า ไฟล์ที่ใช้ทั้งหมดอยู่ภายใน directory เดียวกันหรือไม่ ไฟล์ภาพที่ใช้ทั้งหมด อยู่ใน Subdirectory ของ directory ที่กำลังใช้งานอยู่หรือไม่ ถ้ามีไฟล์ที่อยู่นอก directory จะต้องนำมาไว้ใน folder ที่อยู่ใน directory และทำการ link เสียใหม่

ตัวอย่าง

ถ้าโครงสร้างของไฟล์ เหมือนดังภาพข้างล่างนี้

 

 

นั่นคือขณะนี้ กำลังทำงานใน directory ที่ชื่อ education ไฟล์ที่ใช้ทั้งหมดจะต้องอยู่ใน directory นี้ ซึ่งอาจจะอยู่กันคนละ Folder ก็ได้ จากตัวอย่างข้างบน ไฟล์ภาพ จะถูกเก็บไว้ในห้อง images ถ้ามีภาพที่อยู่ในห้องอื่น ที่ไม่ได้อยู่ใน directory education เวลาส่งไฟล์ขึ้นบน อินเทอร์เน็ตจะมีปัญหา ไม่สามารถหากันเจอได้ ภาพก็จะไม่ปรากฎให้เห็น

2. หา Server ที่จะให้บริการพื้นที่สำหรับวางเว็บ ซึ่งมีทั้งของฟรี และเสียค่าใช้จ่าย ถ้าเป็นของฟรี มักจะมี โดเมนเนม หรือชื่อสำหรับเว็บไซต์  ให้ด้วย เช่น http://www.geocities.com/photaram หรือhttp://magrood.netfirms.com เป็นต้น หรือจะไปลงทะเบียนขอโดเมนเนม ของตัวเอง ก็ได้

      Server ที่ให้บริการฟรี หลายแห่ง กำหนดให้ส่งไฟล์ขึ้นเว็บผ่านทาง File Manager ซึ่งเป็นโปรแกรมที่เว็บไซต์แต่ละแห่งจัดทำขึ้น และมักจะไม่อนุญาตให้ใช้โปรแกรม FTP ต้องใช้โปรแกรมของเว็บนั้น ๆ

      เมื่อติดต่อ Server ได้แล้ว จะได้รับ รหัส สำหรับ login ซึ่งจะประกอบด้วย ชื่อ หรือ UserID และ รหัสผ่าน ซึ่งจำเป็นต้องใช้ในการ ส่งไฟล์ขึ้นอินเทอร์เน็ต (upload)

3. ขอจดโดเมนเนม  ถ้าต้องการชื่อเว็บไซต์ที่กำหนดเอง ต้องจดทะเบียนโดเมนเนม กับหน่วยงานที่ควบคุม เช่น ถ้าต้องการจดโดเมนเนมในประเทศไทย ต้องติดต่อที่ THNIC 

 

ขั้นตอนการส่งไฟล์

1.      ติดตั้งโปรแกรม WS_FTPLE

1.      เลือก Start > Run แล้วไปยังไฟล์ SetUp ของ WS_FTP

 

 

2.      คลิก OK จะเปิดหน้าจอการติดตั้ง พร้อมทั้งเมนูเล็ก ให้คลิก Continue เพื่อติดตั้งโปรแกรม

 

3.      ให้ระบุสถานะของผู้ใช้ คลิกเลือก Other

 

 

4.      กำหนดจุดประสงค์การใช้ คลิกเลือกตามตัวอย่าง

 

 

5.      ให้คลิก Next และยอมรับเงื่อนไขการใช้โปรแกรม และคลิก OK โปรแกรมจะติดตั้ง เมื่อเสร็จแล้ว จะมีข้อความบอกให้ทราบ ดังนี้

 

 

6.      การเรียกใช้โปรแกรม เรียกได้ตามปกติ ดังภาพ

 

 2.      ติดต่อกับอินเทอร์เน็ต ด้วยวิธี DialUp Networking3.      เปิดโปรแกรม WS_FTPLE โปรแกรมจะเปิดหน้าจอให้เลือก หรือ สร้าง Profile ใหม่ 

 

สร้าง Profile ใหม่ ในกรณีที่เป็นการส่งขึ้น อินเทอร์เน็ตครั้งแรก จำเป็นต้องสร้าง Profile ใหม่ โดยใส่รายละเอียด ดังนี้

 

Profile Name	ชื่อที่ต้องการกำหนด มักจะใช้ชื่อเว็บ
Host Name/Address	เป็น URLของเว็บไซต์ ที่ได้จากการลงทะเบียนโดเมนเนม
UserID,	ชื่อผู้ใช้ Server ที่ Server กำหนดมาให้ หรือเป็นชื่อที่เราได้ ในขณะขอใช้ Server
Password	รหัสผ่าน ที่ได้รับจาก Server

 4.      ลักษณะของหน้าจอเมื่อเข้าไปยัง  Server ได้แล้ว 

ข้อมูลเครื่องของท่าน

ข้อมูลบนServer

 

5.      สร้างห้องใหม่สำหรับเก็บไฟล์

เมื่อเข้าถึง Server แล้ว ต้องสร้างห้องสำหรับเก็บไฟล์ ห้องที่สร้างจะต้องมีโครงสร้างเช่นเดียวกับห้องที่อยู่บนเครื่องของเรา นั่นคือ มีห้องอะไร อยู่ในห้องอะไร ไฟล์อะไร อยู่ในห้องอะไร จะต้องให้เหมือนกันทั้งบนฝั่งเครื่องของเรา และบนฝั่งอินเทอร์เน็ต

การสร้างห้องใหม่ ให้คลิกที่ปุ่ม  MkDir และจะเกิดหน้าจอเล็กให้พิมพ์ชื่อห้องที่ต้องการสร้าง

 

จะเกิดห้องใหม่ขึ้น ดังภาพ

 

 6.      

อยู่ในห้อง _education ของฝั่ง Server

ให้ดับเบิ้ลคลิกห้องที่สร้างใหม่  และกลับมาที่ฝั่งเครื่องเพื่อไปยังห้องที่เก็บไฟล์ที่ต้องการส่ง ดังภาพ

	คลิกที่นี่ เพื่อไปยังที่อยู่ของไฟล์ที่ต้องการ Upload

 

 

7.      การส่งไฟล์ไปยัง Server

เมื่อไปยังตำแหน่งที่อยู่ของไฟล์ที่ต้องการส่งแล้ว ให้คลิกปุ่มลูกศรส่ง ไปฝั่ง Server  ถ้าเป็นไฟล์ข้อมูล HTML ให้คลิกที่ปุ่ม ASSCII  แต่ถ้าเป็นไฟล์ ภาพ ให้คลิกที่ปุ่ม  Binary ถ้าต้องการส่งทั้งไฟล์ HTML และ ภาพ ให้เลือกปุ่ม Auto ด้วย ดังภาพ

 

เลือก Autoสำหรับส่งข้อมูลและภาพ

คลิกลูกศรส่งข้อมูลมายังฝั่ง Server

คลิกเลือก file ที่จะส่งไปไว้บน Server

 

8.      เมื่อ Upload เสร็จแล้วจะมีลักษณะ ดังภาพ

 

 

9.      เมื่อเรียกผ่าน Browser จะเป็นดังนี้