สารบัญ
                                  หัวขอ                          หนา
1. ความรูเบื้องตนในการสรางเว็บไซต       ...
การจัดเรียงขอความในตาราง                                                52
            การแทรกแถวและคอลัมน              ...
เนรมิตเว็บสวยดวย Dreamweaver
                                              

คําอธิบายรายวิชา
        หลักสูตรเนรมิตเว็บส...
2. หลักการสรางเว็บไซต
              เริ่มตนสรางเว็บไซต
              การจัดการโครงสรางโฟลเดอร
              การเปด...
การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล
           การเชื่อมโยงดวย Map Link
           การกําหนดคุณสมบัติของการเ...
ความรูเบื้องตนในการสรางเว็บไซต
           หลักการสรางเว็บไซต
        ในการสรางเว็บไซตในยุคเริ่มแรกนั้น ผูสรางจะต...
ของเรา และระบุที่อยู URL ก็สามารถที่จะเปดเว็บไซตได เชน ถาเราระบุ URLที่
                       ตองการเปด คือ www.T...
ทําความรูจัก HTML
        HTML ยอมาจาก Hyper Text Markup Language ภาษา HTML เปนภาษาที่ใชในวงการ
อินเทอรเน็ต เว็บไซตต...
ตัวอยาง HTML Code




        ตัวอยางผลลัพธที่ได




            คุณสมบัติของเครื่องทีเหมาะกับ Dreamweaver 8
         ...
3. คลิกเมาสที่ปุม Next เพื่อเริ่มขั้นตอนการติดตั้ง ดังภาพ




             4. จากนั้นคลิกเมาสเลือก I accept the terms i...
6. กําหนดวาจะให Dreamweaver แกไขไฟลชนิดใดบาง ใหเลือก Select All แลว คลิก
              Next เพื่อเขาสูขั้นตอนตอไ...
10. เปนการเสร็จสิ้นขั้นตอนการติดตั้งโปรแกรม
            การเปดใชงาน Dreamweaver 8
       เมื่อติดตั้ง Dreamweaver 8 เสร...
b. สวนที่ 2 Create New เปนการสรางหนาเว็บใหม โดยเราจะตองเลือกรูปแบบ
                      การทํางาน เชน HTML, Cold F...
2. สวนประกอบที่สําคัญของหนาจอนี้ มีดังนี้
                       สวนที่ 1 แถบเมนู (Menu bar) เปนแถบที่เก็บคําสั่งทังหม...
กลุมเครื่องมือที่ใชสําหรับสรางงานเว็บเพจ มีอยู 8 กลุมที่ควรรูจัก ดังนี้
            1. กลุมเครื่องมือ Common: เปนส...
การเปลี่ยนรปแบบการเรียกใชงานกลุมเครื่องมือ
                         ู                            
                ในกลุ...
2. Show Code and Design View คลิกที่                  จะปรากฏมุมมองที่แสดงทั้งโคดและ
              หนาเว็บเพจที่เรากําลั...
การกําหนดโครงรางของเว็บ
        ในการสรางเว็บไซต กอนอื่นควรออกแบบโครงรางคราวๆ ของเว็บไซตนั้นกอน เพื่อไมใหเกิด
คว...
• หมายเลข 6 ที่ HTTP address : เปนการกําหนดที่อยู บน Server ถายังไมมีที่อยูบน
             Server ไมตองใส หรือถาม...
การจัดการโครงสรางโฟลเดอร
      ในการสรางเว็บไซตดวย Dreamweaver 8 เมื่อสรางเว็บไซต หรือ Site งานขึ้นมาแลว โปรแกรม
จ...
4. เมื่อออกแบบเว็บเพจเสร็จแลว จะทําการบันทึก ใหไปที่ File>save จะเกิดหนาจอขึ้น ดังภาพ




   5. ใหตั้งชื่อเว็บเพจ ในที...
• การสรางเว็บเพจใหมในพาเนล File
      เปนการสรางไฟลงานใหมที่เก็บไวใน Site งานที่งาย สะดวก รวดเร็ว มีขั้นตอน ดังตอ...
การเปลี่ยนชือไฟลและโฟลเดอร
                          ่
       การเปลี่ ย นชื่ อ ไฟล แ ละโฟลเดอร สามารถ
กระทําไดงาย โ...
กอนที่จะเริ่มตนการออกแบบทํางาน เราควรที่จะกําหนดรายละเอียดของหนาเว็บเสียกอน โดย
คลิกเมาสขวาที่หนาเว็บ แลวเลือก Page...
หมายเลข 4 Rollover links การกําหนดสีเมื่อเมาสลากผาน
                หมายเลข 5 Visited links กําหนดสีมื่อไปที่ Link นี้แล...
หมายเลข 1 Tracing Image ใหเลือกไฟลภาพที่จะใช
                 หมายเลข 2 Image Transparency กําหนดคาความโปรงใสของภาพที...
การใสหัวเรืองบนหนาเว็บ
                            ่
        การใสหัวเรื่องบนหนาเว็บ เมื่อเราเปดเว็บไซตขึ้นมา ในชอง...
ถาเราตองการจะอานโคดออก เปนภาษาไทยเหมือนที่เราพิมพที่ Design View ตองกําหนดให
ภาษาที่ใชในเว็บเปน Thai (Windows) โ...
การเพิ่ม-ลบฟอนต
     ก า ร เ พิ่ ม -ล บ ฟ อ น ต เ พื่ อ ใ ช ง า น ใ น
Dreamweaver ทําไดโดย เลือกคําสั่งที่เมนูบาร
Tex...
การปรับแตงขอความบนเว็บเพจ
           การใสขอความบนหนาเว็บ
      การใสขอความบนหนาเว็บเพจ กระทําไดงาย ๆ โดยการพิมพ...
ซึ่งอยูในกลุมเครื่องมือ Text และเลือก Non-Breaking Space




      ตอไป เราตองการยอหนา บรรทัดแรก ใหเราตั้งเคอรเซอร...
น้ําเงิน เอียง ขอความตําแหนงชิดซายของเว็บเพจ และหัวขอเปนตัวหนา สามารถกระทําไดโดยใช
เครื่องมือดังที่กลาวมาแลว ขาง...
เมื่อเปดพาเนล History จะเห็นบันทึกการทํางานทุกขั้นตอน โดยขั้นตอนลาสุด จะเรียงอยูลําดับ
บนสุดของรายการ ขั้นตอนกอนหนานี...
2. คลิกที่ปุม          ที่อยูมุมลางดานซายมือ ดังภาพ




             การบันทึกเว็บเพจ
      เมื่อเราออกแบบเว็บเพจไดต...
นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจทีควรรูอีก 4 วิธี คือ
                                                ่

   •   วิ...
การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร
    เมื่อเราบันทึกเว็บเพจเสร็จเรียบรอยแลว และ ตองการที่จะดูเว็บเพจที่เราออกแบ...
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Dreamweaver8 new[1]
Upcoming SlideShare
Loading in …5
×

Dreamweaver8 new[1]

8,513 views

Published on

Published in: Technology, Design
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
8,513
On SlideShare
0
From Embeds
0
Number of Embeds
180
Actions
Shares
0
Downloads
618
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Dreamweaver8 new[1]

  1. 1. สารบัญ หัวขอ หนา 1. ความรูเบื้องตนในการสรางเว็บไซต 6 หลักการสรางเว็บไซต 6 อินเทอรเน็ตพืนฐาน้ 6 ความสําคัญของอินเทอรเน็ต 6 ทําความรูจัก HTML 8 คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8 9 การติดตั้ง Dreamweaver 8 9 การเปดใชงาน Dreamweaver 8 12 สวนประกอบของ Dreamweaver 8 13 2. หลักการสรางเว็บไซต 17 เริ่มตนสรางเว็บไซต 17 การจัดการโครงสรางโฟลเดอร 20 การสรางเว็บเพจใหม 20 การเพิ่มและแกไของคประกอบบนหนาเว็บ 26 การใสหัวเรื่องบนหนาเว็บ 27 การใชงานภาษาไทยใน Dreamweaver 8 27 การเพิ่ม-ลบฟอนต 29 3. การปรับแตงขอความบนเว็บเพจ 30 การใสขอความบนหนาเว็บ 30 การตกแตงและจัดรูปแบบขอความ 31 การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History 32 การบันทึกเว็บเพจ 34 การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร 36 4. ตกแตงเว็บเพจดวยกราฟก 36 เตรียมภาพเพือใชในเว็บเพจ ่ 36 การปรับแตงรูปภาพ 38 การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ 43 การแกไขรูปภาพ 45 5. การสรางตารางบนเว็บเพจ 46 การสรางตาราง 46 การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง 48 การเลือกตาราง แถว คอลัมน และเซล 50 การปรับแตงรายละเอียดของตาราง 52 เนรมิตเว็บสวยดวย Dreamweaver หนา 1/96
  2. 2. การจัดเรียงขอความในตาราง 52 การแทรกแถวและคอลัมน 54 การลบแถวและคอลัมน 56 การรวมและการแบงเซล 57 การขยายและลดความกวางเซลในตาราง 58 ปรับความสูงและความกวางของตารางใน Property Inspector 59 การซอนตาราง 62 การกําหนดสีใหกับพื้นตาราง 62 การคัดลอกขอมูลในตาราง 65 6. การเชื่อมโยง 65 การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน 65 การเชื่อมโยงภายในเว็บไซตเดียวกัน 66 การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล 68 การเชื่อมโยงดวย Map Link 69 การกําหนดคุณสมบัติของการเชื่อมโยง 70 7. การออกแบบเลยเอาท 71 การใชเลยเอาท 71 โครงสรางของหนาเว็บ 73 การสรางเลยเอาทเทเบิล และเลยเอาทเซล ้ 73 8. เฟรม เลเยอร แฟลช 77 การใชเฟรม 77 การใชเลเยอร 80 การใชแฟลช (Flash) 82 9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล 85 การจดทะเบียนเว็บไซต 85 การหาเว็บโฮสติ้ง 88 การอัพโหลดไฟล 90 หนา 2/96 เนรมิตเว็บสวยดวย Dreamweaver
  3. 3. เนรมิตเว็บสวยดวย Dreamweaver  คําอธิบายรายวิชา หลักสูตรเนรมิตเว็บสวยดวย Dreamweaver นี้ จะชวยใหผูเขาอบรมลดภาระการประชาสัมพันธ การเผยแพรขอมูลตางๆ ของ องคการ และลดปริมาณเอกสารภายใน โดยการจัดเก็บไวในรูปแบบของสื่อ อิเล็กทรอนิกส หลักสูตรนี้เหมาะอยางยิ่งสําหรับหนวยงานที่ตองการจัดทําเอกสารไวในรูปแบบของ เอกสารอิเล็กทรอนิกส หรือตองการลดปริมาณกระดาษ เชน ฝายบุคคลตองการสรางเว็บเพื่อแสดงขอมูล ของพนักงานแตละคนไดวาชื่ออะไร อยูแผนกไหน เบอรโทรศัพทอะไร อีเมลอะไร พรอมรูปถาย หรือแจง ขาวสารการจัดฝกอบรม การจัดเก็บคูมือปฏิบัติงาน การจัดเก็บวิดีโอสอนการทํางาน ฝายขายก็สามารถ แสดงภาพสินคา และคุณสมบัติตางๆ ของ สินคาแตละชนิดได ฝายประชาสัมพันธก็สามารถเผยแพร ขาวสารของบริษัทได ไมวาจะเปน ขาวเกี่ยวกับ 5ส การไปทัศนะศึกษาดูโรงงาน หรือวิดีโอการทํา กิจกรรมในวันสําคัญตางๆ ฝายหองสมุดก็สามารถแนะนําหนังสือใหมๆ หรือความรูตางๆ สําหรับ เผยแพรภายในบริษัท ฝายธุรการก็สามารถสรุปรายงานการประชุม ขาวสารจากผูบริหารได ซึ่งจะชวยให องคการ ของทานมีการสื่อสารกันไดอยางมีประสิทธิภาพ จุดประสงค 1. เพื่อใหผูเขาอบรมเขาใจหลักการสรางเว็บไซตสําหรับใชภายในองคกรของตนได 2. เพื่อใหผูเขาอบรมเขาใจการทํางาน และสามารถใชโปรแกรม Dreamweaver ได 3. เพื่อใหผูเขาอบรมนําไฟลประเภทตาง ๆ เชน ไฟลรูปภาพ ไฟลวิดีโอ มาใชในการจัดทําเว็บไซต ไดอยางมีประสิทธิภาพ ความรูพื้นฐานของผูเขาอบรม 1. Microsoft Windows 2. Internet Explorer เนื้อหาหลักสูตร 1. ความรูเบื้องตนในการสรางเว็บไซต หลักการสรางเว็บไซต อินเทอรเน็ตพืนฐาน ้ ความสําคัญของอินเทอรเน็ต ทําความรูจัก HTML คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8 การติดตั้ง Dreamweaver 8 การเปดใชงาน Dreamweaver 8 สวนประกอบของ Dreamweaver 8 เนรมิตเว็บสวยดวย Dreamweaver หนา 3/96
  4. 4. 2. หลักการสรางเว็บไซต เริ่มตนสรางเว็บไซต การจัดการโครงสรางโฟลเดอร การเปดเว็บเพจใหม การเพิ่มและแกไของคประกอบบนหนาเว็บ การใสหัวเรื่องบนหนาเว็บ การใชงานภาษาไทยใน Dreamweaver 8 การเพิ่ม-ลบฟอนต 3. การปรับแตงขอความบนเว็บเพจ การใสขอความบนหนาเว็บ การตกแตงและจัดรูปแบบขอความ การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History การบันทึกเว็บเพจ การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร 4. ตกแตงเวบเพจดวยกราฟก ็ เตรียมภาพเพือใชในเว็บเพจ ่ การปรับแตงรูปภาพ การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ การแกไขรูปภาพ 5. การสรางตารางบนเว็บเพจ การสรางตาราง การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง การเลือกตาราง แถว คอลัมน และเซล การปรับแตงรายละเอียดของตาราง การจัดเรียงขอความในตาราง การแทรกแถวและคอลัมน การลบแถวและคอลัมน การรวมและการแบงเซล การขยายและลดความกวางเซลในตาราง ปรับความสูงและความกวางของตารางใน Property Inspector การซอนตาราง การกําหนดสีใหกับพื้นตาราง การคัดลอกขอมูลในตาราง 6. การเชื่อมโยง การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน การเชื่อมโยงภายในเว็บไซตเดียวกัน หนา 4/96 เนรมิตเว็บสวยดวย Dreamweaver
  5. 5. การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล การเชื่อมโยงดวย Map Link การกําหนดคุณสมบัติของการเชื่อมโยง 7. การออกแบบเลยเอาท การใชเลยเอาท โครงสรางของหนาเว็บ การสรางเลยเอาทเทเบิล และเลยเอาทเซล ้ 8. เฟรม เลเยอร แฟลช การใชเฟรม การใชเลเยอร การใชแฟลช (Flash) 9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง การอัพโหลดไฟล เนรมิตเว็บสวยดวย Dreamweaver หนา 5/96
  6. 6. ความรูเบื้องตนในการสรางเว็บไซต หลักการสรางเว็บไซต ในการสรางเว็บไซตในยุคเริ่มแรกนั้น ผูสรางจะตองมีความรูเกี่ยว กับภาษา HTML จึงจะ สามารถสรางเว็บเพจได โดยใชโปรแกรม EditPlus หรือ Notepad ในการเขียนโคดทั้งหมด แลวบันทึก เปนไฟลนามสกุล .html จากนั้นเปดบราวเซอรเพื่อดูผลลัพธของหนาเว็บที่สราง ซึ่งทําใหเสียเวลาในการ ทํางานมาก แตถามี ความรูในภาษา HTML บางจะชวยใหเราสรางสรรคงานไดอยางสวยงาม ตามความ ตองการ ในปจจุบันโปรแกรม Dreamweaver เปนโปรแกรม สรางเอกสารเว็บเพจ ที่ทํางานในลักษณะ HTML Generator คือ โปรแกรมจะสรางรหัสคําสั่ง HTML ใหอัตโนมัติ โดยผูใช ไมตองศึกษาภาษา HTML หรือปอนรหัสคําสั่ง HTML มีลักษณะการทํางานคลายๆ กับการพิมพเอกสารดวย Word Processor โดยอาศัยปุมเครื่องมือ (Toolbars) หรือแถบคําสั่ง (Menu Bar) ควบคุมการทํางาน ชวยให งายตอการใชงาน สะดวก และรวดเร็วในการสรางเว็บเพจ อินเทอรเน็ตพื้นฐาน อินเทอรเน็ต มาจากคําวา Inter Connection Network เปนระบบเครือขายคอมพิวเตอรที่มีขนาด ใหญ เครื่องคอมพิวเตอรทุกเครื่องทั่วโลกสามารถติดตอสื่อสารถึงกันได โดยใชมาตรฐานในการรับสง ขอมูลที่เปนหนึ่งเดียว หรือที่เรียกวา โปรโตคอล (Protocol) ซึ่งโปรโตคอลที่ใชบนระบบเครือขาย อินเทอรเน็ตมีชื่อวา ทีซีพี/ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol) ลักษณะของระบบอินเทอรเน็ตเปนเสมือนใยแมงมุม ที่ครอบคลุมทั่วโลก ในแตละจุดที่เชื่อมตอ อินเทอรเน็ตนั้น สามารถสื่อสารกันไดหลายเสนทางตามความตองการ โดยไมกําหนดตายตัว และไม จําเปนตองไปตามเสนทางโดยตรง อาจจะผานจุดอื่น ๆ หรือเลือกไปเสนทางอื่นไดหลาย ๆ เสนทาง การ ติดตอสื่อสารผานระบบเครือขายอินเทอรเน็ตนั้นอาจเรียกวา การติดตอสื่อสารแบบไรมิติ หรือ Cyberspace ความสําคัญของอินเทอรเน็ต 1. การประยุกตใชเทคโนโลยีสารสนเทศที่ทันสมัย 2. การติดตอสื่อสารที่สะดวก และรวดเร็ว 3. สามารถใชเปนแหลงคนควาหาขอมูลไดทั่วโลก ระบบเครือขายอินเทอรเน็ตจะทําหนาที่ เสมือนเปนหองสมุดขนาดใหญ และเปนแหลงรวบรวมขอมูลแหลงใหญที่สุดในโลก ในการติดตอสื่อสารบนเครื่อขายอินเทอรเน็ตที่คอมพิวเตอรทั่วโลกเชื่อมโยงถึงกันนั้น มีการ ติดตอสื่อสารอยู 2 แบบคือ แบบสงขอมูลและรับขอมูล และการที่จะสรางเว็บเพจดวย Dreamweaver นั้น เราควรมีความรูเกี่ยวกับศัพททางอินเทอรเน็ตที่เกี่ยวของ เพื่อความเขาใจที่ดี ดังนี้ เครื่องใหบริการ (Server) คือ เครื่องคอมพิวเตอรที่ทําหนาที่สงขอมูล เครื่องรับบริการ (Client) คือ เครื่องคอมพิวเตอรที่ทําหนาที่รับขอมูล เครือขายใยแมงมุม WWW (World Wide Web) หรือเรียกสั้น ๆ วาเว็บ คือ การใหบริการในรูปแบบที่เรียกบราวเซอร เชน Internet Explorer จากเครื่อง หนา 6/96 เนรมิตเว็บสวยดวย Dreamweaver
  7. 7. ของเรา และระบุที่อยู URL ก็สามารถที่จะเปดเว็บไซตได เชน ถาเราระบุ URLที่ ตองการเปด คือ www.TrainingDD.com ก็เ ปนการเปดดูเ ว็บไซต ของ TrainingDD ดังภาพ เว็บเพจ (Web Page) คือ เอกสารที่เราเปดดูจาก www ซึ่งสวนใหญจะถูกสราง ขึ้นจากภาษาคอมพิวเตอรที่ เรียกวา HTML ประกอบดวยตัวหนังสือ รูปภาพ และมีการเชื่อมตอกับเว็บเพจอื่นๆ เว็บไซต (Web Site) คือ การรวบรวมเว็บเพจไวหลาย ๆ หนา และ กําหนด เว็บเพจหนาหนึ่งใหเปนหนาแรก เรียกวา โฮมเพจ (Home Page) ซึ่งเปนประตู ทางเขาสูเว็บเพจหนาอื่น ๆ ทั้งหมดในเว็บไซตนั้น ๆ เว็บบราวเซอร (Web Browser) คือ โปรแกรมที่ใชเขาสู World Wide Web เปนโปรแกรมที่อยูในเครื่องคอมพิวเตอรลูกขาย (Client) ทําหนาที่ในการ นําเสนอขอมูลเว็บ บราวเซอรที่ไดรับความนิยมในปจจุบัน เชน Internet Explorer ของไมโครซอฟท และ Firefox ซึ่งเปนบราวเซอรโอเพนซอสต เว็บเซิรฟเวอร (Server) คือ ที่เก็บเว็บเพจ โดยใชโปรแกรม WFTP ในการนํา เว็บเพจขึ้นไปไวบนเซิรฟเวอร เรียกวาอัพโหลด (Upload) และนําเว็บเพจลงมา แกไขในเครื่องของเรา เรียกวา ดาวนโหลด (Download) โดเมนเนม (Domain name) คือ การติดตอกันบนอินเทอรเน็ต จะใชไอพี แอดเดรส (IP address)ในการทํางาน แตเปนตัวเลขหลายตัว ทําใหจดจําไดยาก จึงมีการใชโดเมนเนม ซึ่งเปนตัวอักษรที่จดกัน และจะมีชื่อไมซ้ํากันโดยตั้งชื่อให สอดคลองกับหนวยงาน องคกร บริษัท หางราน เพื่อความสะดวกในการจดจํา ชื่อ เชน การไฟฟาฝายผลิตแหงประเทศไทย มีโดเมนเนม คือ egat.co.th เนรมิตเว็บสวยดวย Dreamweaver หนา 7/96
  8. 8. ทําความรูจัก HTML HTML ยอมาจาก Hyper Text Markup Language ภาษา HTML เปนภาษาที่ใชในวงการ อินเทอรเน็ต เว็บไซตตาง ๆ เขียนขึ้นโดยใชภาษา HTML เปนหลัก ทําใหเราสามารถนําเสนอ ขอความ ภาพ เสียง หรือแมแตวิดีโอ ผานทางอินเทอรเน็ตได คําวา Hyper มีความหมายตรงขามกับคําวา เรียงลําดับ คือ ไมจําเปนตองเรียงลําดับ สามารถ กระโดดขามขั้นตอนได เชน ในหนาเว็บ เราสามารถที่จะคลิกไปยังที่ตาง ๆ ตามลิงค ไดตามตองการ ไม จําเปนตองอานเรียงไปทีละหนา นี่จึงเปนลักษณะสําคัญของ HTML ที่สามารถลิงคไปยังที่ตาง ๆ ได คําวา Text หมายถึงขอความ HTML เปนไฟลตัวอักษร หรือ text file สามารถสรางโดยใช โปรแกรมไดหลายโปรแกรม เชน Notepad, EditPlus หรือแมแต MS Word ก็ได คําวา Markup เปนการแบงขอความออกเปนสวน ๆ โดยมีคําสั่ง หรือ tag บอกใหทราบวาจะให แสดงภาพ หรือ ขอความนั้น ๆ อยางไร เชน ใหตัวอักษรเปนสีตาง ๆ มีลักษณะตัวหนา หรือ ตัวเอียง เปนตน สวนคําวา Language หมายถึง ภาษา เราจัด HTML เปนภาษา ทางคอมพิวเตอรภาษาหนึ่ง แต ใชในการนําเสนอเนื้อหาสาระบนเว็บเทานั้น อยางไรก็ตาม มีบางคนยัง ไมยอมรับวา HTML เปนภาษา ทางคอมพิวเตอรเพราะขาดคุณสมบัติทางดานตัวแปรเพราะ HTML ไมมีการเก็บคา ตัวแปรแตอยางใด โครงสรางของภาษา HTML โครงสรางหลักของภาษา จะมี Tag ที่ประกอบจากวงเล็บ <TAG name> เปนตัวเปดการควบคุม อักษรและปดการควบคุมอักษรดวย </TAG name> โดยมีเครื่องหมาย / อยูใน Tag หมายถึง การปด การควบคุม ภายใน Tag ตาง ๆ จะมี Tag ที่อยูเดี่ยว (Single) กับ Tag ที่ตองประกอบกันเปนชุด (Composite) และใน Tag แตละตัวอาจจะมี Attribute เพื่อขยาย ความหมายหรือเพิ่มการควบคุม Tag ไดอีกดวย นอกจากนั้น HTML สามารถทํา Comment ไดดวยการใช <! และจบดวย !> เพื่อไมตองแปล สัญลักษณที่อยูระหวางเครื่องหมายทั้งสองนี้ Tag ในภาษา HTML ที่สําคัญมีดังตอไปนี้ <HTML> และ </HTML> เปน Tag ที่ใชเพื่อกําหนดวาเอกสารตอไปนี้ เปนเอกสาร HTML เปน Markup Language <HEAD> และ </HEAD> เปน Tag ที่ใชกําหนดสวนหัวของเอกสาร HEAD ไมไดเปนสวนของ เอกสารภายใน แตจะให ขอมูลเกี่ยวกับเอกสารฉบับนี้ โดยจะมี <METHA> Tag เปนตัวกําหนด คุณสมบัติตาง ๆ การกําหนด Key Word ใหรูวาเว็บของเราคืออะไร เปนคําสั่งควบคุมการทํางาน ของเว็บใหทํางานแบบอัตโนมัติได ซึ่งจะเปนประโยชนสําหรับการคนหาเว็บไซตตาง ๆ ที่มีอยูใน โลกนี้ ดวยวิธี Search Engine <TITLE> และ </TITLE> เปนการระบุขอความที่ตองการใหเปนสวนหัวของเอกสาร ที่จะปรากฏ อยูที่ Task Bar ใน Browser โดย Title จะเปนสวนหนึ่งของ Head เชน <title> การไฟฟาฝาย ผลิตแหงประเทศไทย</title> จะปรากฏใหเห็นรายละเอียดอยูดานบน Task Bar ดานบน <BODY> และ </BODY> เปน Tag ที่บอกถึงลักษณะตาง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะ มี Attribute ตาง ๆ ไดแก BGCOLOR = "#XXXXXX", TEXT = "# XXXXXX " เปนตน หนา 8/96 เนรมิตเว็บสวยดวย Dreamweaver
  9. 9. ตัวอยาง HTML Code ตัวอยางผลลัพธที่ได คุณสมบัติของเครื่องทีเหมาะกับ Dreamweaver 8 ่ สําหรับเครื่อง PC CPU ความเร็วไมต่ํากวา 800 MHz ระดับไมต่ํากวา Pentium III หนวยประเมินผลกลาง(CPU) processor หรือเทียบเทา ระบบปฏิบัติการ windows 2000 หรือ Windows XP หนวยความจํา(RAM) 256 MB หากใชงานบน Windows XP ควรใช 512 MB หรือ 1 GB ขึ้นไป พื้นที่วางบนฮารดดิสก อยางนอย 650 MB การติดตั้ง Dreamweaver 8 การติดตั้ง Dreamweaver 8 เริ่มตนดวยการนําแผนโปรแกรมใสในชองอาน CD และเริ่มติดตั้ง ตามขั้นตอนดังตอไปนี้ 1. ดับเบิ้ลคลิกที่ไอคอน Install Dreamweaver 8 ดังภาพ 2. จะปรากฏหนาตางเตรียมการติดตั้งโปรแกรม ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 9/96
  10. 10. 3. คลิกเมาสที่ปุม Next เพื่อเริ่มขั้นตอนการติดตั้ง ดังภาพ 4. จากนั้นคลิกเมาสเลือก I accept the terms in the license agreement เพื่อรับขอตกลง ในการใชงาน Dreamweaver และคลิก Next เพื่อติดตั้งโปรแกรมตอไป ดังภาพ 5. โปรแกรมจะแสดงไดเร็กทอรี่ที่จะเก็บโปรแกรม Dreamweaver 8 ถาไมตองการ ก็ สามารถคลิกปุม Change เพื่อเปลี่ยนไดเร็กทอรี่ได นอกจากนี้โปรแกรมยังเปดโอกาสให เลือกสราง Shortcut ไวที่แถบ Quick launch และไวที่บนหนาจอ (Desktop) หากไม ตองการไมตองคลิกเลือก แลวคลิกปุม Next ดังภาพ หนา 10/96 เนรมิตเว็บสวยดวย Dreamweaver
  11. 11. 6. กําหนดวาจะให Dreamweaver แกไขไฟลชนิดใดบาง ใหเลือก Select All แลว คลิก Next เพื่อเขาสูขั้นตอนตอไป 7. คลิกเมาสที่ปุม Install เพื่อติดตั้งโปรแกรม 8. โปรแกรมจะเริ่มทําการติดตั้ง ดังภาพ 9. ขั้นตอนสุดทาย เมื่อติดตั้งเสร็จ ใหคลิก Finish ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 11/96
  12. 12. 10. เปนการเสร็จสิ้นขั้นตอนการติดตั้งโปรแกรม การเปดใชงาน Dreamweaver 8 เมื่อติดตั้ง Dreamweaver 8 เสร็จเรียบรอยแลว เราก็สามารถเปดใชโปรแกรม Dreamweaver 8 โดยปฏิบัติตามขั้นตอนดังตอไปนี้ 1. คลิกเมาสที่ปุม 2. เลือกคําสั่ง All Programs>Macromedia>Macromedia Dreamweaver 8 ดังภาพ 3. คลิกเลือก Macromedia Dreamweaver 8 โปรแกรมจะเปดหนาจอ ดังภาพ 4. หนาจอนี้มีสวนสําคัญ 3 สวน คือ a. สวนที่ 1 Open a Recent Item เปนการเลือกเว็บเพจที่เราสรางไวแลว นํากลับ ขึ้นมาทํางานใหม หนา 12/96 เนรมิตเว็บสวยดวย Dreamweaver
  13. 13. b. สวนที่ 2 Create New เปนการสรางหนาเว็บใหม โดยเราจะตองเลือกรูปแบบ การทํางาน เชน HTML, Cold Fusion, PHP, ASP, JavaScript ตามที่ตองการ c. สวนที่ 3 Create from Samples เปนการสรางหนาเว็บใหม โดยใชหนาเว็บ สําเร็จรูปมาใชเปนแบบเริ่มตน d. ในที่นี้ เราจะสรางเว็บเพจใหม ใหคลิกเลือกใช HTML ในสวนที่ 2 Create New ดังภาพ 5. หนาเอกสารวาง ๆ จะถูกเปดขึ้นสําหรับการสรางเว็บเพจ เราสามารถใสขอความและ รูปภาพ ในหนานี้ได ดังตัวอยางที่เห็นในภาพ สวนประกอบของ Dreamweaver 8 กอนที่เราจะใชงาน Dreamweaver 8 เราควรรูสวนประกอบตาง ๆ ของ Dreamweaver 8 ใน เบื้องตนเพื่อเปนพื้นฐานในการใชงานไดสะดวก 1. เมื่อคลิกเมาสเขาสูโปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหนาจอ ดัง ภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 13/96
  14. 14. 2. สวนประกอบที่สําคัญของหนาจอนี้ มีดังนี้ สวนที่ 1 แถบเมนู (Menu bar) เปนแถบที่เก็บคําสั่งทังหมดของโปรแกรม ้ สวนที่ 2 แถบกลุมเครื่องมือ (Insert bar) เปนแถบที่รวมเครื่องมือตาง ๆ ใน การสรางเว็บ สวนที่ 3 แถบเครื่องมือ (Toolbar) รวมปุมเครื่องมือตาง ๆ ที่ใชงานบอย สวนที่ 4 แถบสถานะ (Status bar) แสดงขอมูลเพิ่มเติมเกี่ยวกับงานที่กําลังทํา อยู สวนที่ 5 Property Inspector เปนสวนกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บและ สามารถปรับแตงคาขององคประกอบตาง ๆ ได 3. แถบแสดงสถานะที่ควรรูจัก ดังภาพ สวนที่ 1 สวนไวเลือกแท็ก HTML: จะแสดงโคด HTML ของเว็บเพจ สวนที่ 2 เปนเครื่องมือปรับการแสดงผลเว็บเพจขณะทํางาน: Zoom Tool สําหรับซูมเขาออกเพื่อขยายหนาจอการแสดงผล หรือใช Hand Tool เลื่อนดู หนาเว็บในสวนที่มองไมเห็น  สวนที่ 3 แสดงขนาดหนาตางของเว็บเพจ Window Size: ที่เรากําหนด สามารถ เลือกกําหนดเปนขนาดและเปอรเซ็นต สวนที่ 4 แสดงขนาดเอกสารและเวลาในการโหลด: แสดงเวลาโดยประมาณ ที่ใชใน การโหลดหนาเว็บเพจที่เราสราง กลุมเครื่องมือ การเขาถึงกลุมเครื่องมือ ใหคลิกเมาสที่ปุมตัวเลือก ดังภาพ และคลิกเลือกกลุมเครื่องมือที่ตองการได ดังภาพ หนา 14/96 เนรมิตเว็บสวยดวย Dreamweaver
  15. 15. กลุมเครื่องมือที่ใชสําหรับสรางงานเว็บเพจ มีอยู 8 กลุมที่ควรรูจัก ดังนี้ 1. กลุมเครื่องมือ Common: เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่เราใชงานบอย เชน การแทรกภาพ แทรกตาราง เปนตน 2. กลุมเครื่องมือ Layout :เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่ใชจัดองคประกอบบน หนาเว็บ เชน การจัดวางขอความใหอยูในตําแหนงตาง ๆ เปนตน 3. กลุมเครื่องมือ Forms :เปนสวนที่รวบรวมเครื่องมื่อในการสรางแบบฟอรม ปุม ตัวเลือก ลักษณะตาง ๆ เชน check box, radio button เปนตน 4. กลุมเครื่องมือ Text :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการจัดวางตําแหนง และ ปรับแตงตัวอักษรบนหนาเว็บ 5. กลุมเครื่องมือ HTML :เปนสวนที่รวบรวมเครื่องมื่อสําหรับจัดการภาษา HTML บน หนาเว็บ 6. กลุมเครื่องมือ Application :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการสราง Application ติดตอกับฐานขอมูล 7. กลุมเครื่องมือ Flash elements: เปนเครื่องมือสําหรับนําองคประกอบที่สรางจาก โปรแกรม Flash มาวางบนหนาเว็บ 8. กลุมเครื่องมือ Favorites: เราสามารถเลือกเครื่องมือที่ใชบอยจากแตละกลุมเครื่องมือ มาใสในเมนูนี้ไดตามความตองการ เนรมิตเว็บสวยดวย Dreamweaver หนา 15/96
  16. 16. การเปลี่ยนรปแบบการเรียกใชงานกลุมเครื่องมือ ู  ในกลุมเครื่องมือ คําสั่งสุดทาย คือ Show as Tabs ดังภาพ Show as Tabs คือคําสั่งที่ใหแสดงกลุมเครื่องมือแยกเปนแท็บ ๆ เราสามารถคลิกเลือกแท็บ ของเครื่องมือที่ตองการใชงานไดตามความตองการ ดังภาพ การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ (Property Inspector) การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ สามารถกระทําไดเมื่อเราคลิกเลือก ภาพ ตาราง ตัวหนังสือหรือองคประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององคประกอบนั้น ๆ ใหเราสามารถปรับแตงไดตามตองการ กลุมหนาตางพาเนล(Panel Group) โปรแกรม Dreamweaver 8 มีหนาตางพาเนลตาง ๆ ที่เพิ่ม ความสามารถในการจัดการและออกแบบหนาเว็บเพจ ซึ่งแตละพาเนลจะ มีความสามารถในการจัดการหนาเว็บเพจไดไมเหมือนกัน เราเรียกเปด พาเนลไดจากเมนู Window > และเลือกพาเนลที่ตองการ ดังภาพ มุมมองการทํางานใน Dreamweaver ในการสรางงานเว็บเพจ เราสามารถเลือกมุมมองในการทํางาน ได 3 รูปแบบ โดยคลิกที่รูปไอคอน ที่อยู ใน Toolbar แถบเครื่องมือมาตรฐาน ดังนี้ 1. Show Code View คลิกที่ จะปรากฏมุมมอง แสดงโคด HTML ของหนาเว็บเพจที่เรากําลังทํางานอยู ถาเรามีความรูเรื่องภาษา HTML ก็สามารถแกไขโคดไดตามตองการ ดังภาพ หนา 16/96 เนรมิตเว็บสวยดวย Dreamweaver
  17. 17. 2. Show Code and Design View คลิกที่ จะปรากฏมุมมองที่แสดงทั้งโคดและ หนาเว็บเพจที่เรากําลังทํางานอยู สําหรับผูที่ตองการดูโคดไปพรอมกับการออกแบบ หนาจอ ดังภาพ 3. Show Design View คลิกที่ จะแสดงหนาจอที่เราออกแบบเว็บเพจซึ่ง ประกอบดวยภาพ ขอความ ตาราง หรื่ออื่น ๆ โดยไมมีการแสดงโคดตาง ๆ มา เกี่ยวของ ดังภาพ การออกจากโปรแกรม Dreamweaver การออกจากโปรแกรม Dreamweaver ทําไดหลายวิธีดวยกัน ดังนี้ 1. เลือกคําสั่ง File แลวเลือกคําสั่ง File>Exit เปนการสุดสิ้นการใชงานโปรแกรม 2. คลิกเมาสที่ บริเวณมุมบนขวาของหนาจอ 3. คลิกเมาสที่ บริเวณมุมบนซายของหนาจอและเลือกคลิกที่ Close 4. กดที่คียบอรด <Ctrl+Q> หลักการสรางเว็บไซต เริ่มตนสรางเว็บไซต ในการสรางเว็บไซตดวย Dreamweaver 8 กอนอื่นตองมีการกําหนด Site เพื่อใชจัดเก็บหนาเว็บ เพจแตละหนาใหอยูในชื่อเว็บไซตเดียวกัน และจัดการกับไซตที่เราสรางขึ้น ไดตามตองการ เนรมิตเว็บสวยดวย Dreamweaver หนา 17/96
  18. 18. การกําหนดโครงรางของเว็บ ในการสรางเว็บไซต กอนอื่นควรออกแบบโครงรางคราวๆ ของเว็บไซตนั้นกอน เพื่อไมใหเกิด ความยุงยากที่จะตามมาในภายหลัง เว็บไซตที่ประกอบดวยเว็บเพจหลาย ๆหนา ควรจัดเก็บเว็บเพจไว ในโฟลเดอรตาง ๆ ดังตัวอยาง ถาเราทําเว็บไซตเกี่ยวกับองคกรของเรา ก็อาจสรางตั้งโฟลเดอรชื่อ Organization เปนโฟลเดอร ที่เก็บรวมเว็บเพจและไฟลตาง ๆ ที่ใชไวทั้งหมด โดยโฟลเดอรนี้อาจ ประกอบไปดวยโฟลเดอรยอย ๆ สําหรับเก็บไฟลตาง ๆ ที่ประกอบกันเปนเว็บไซต ดูตัวอยาง ดังภาพ ตัวอยางการจัดโฟลเดอรสําหรับเก็บไฟลตาง ๆ จากภาพ จะเห็นวาหนาโฮมเพจหลัก (index.html) จะตองอยูในโฟลเดอร หลักและไมควรอยูในโฟลเดอรยอยใด ๆ ทั้งสิ้น การสรางเว็บไซตใหมใน Dreamweaver การสรางเว็บไซตใหมใน Dreamweaver ตองกําหนดที่อยูของไฟลตาง ๆ บนเว็บไซตเสียกอน โดยการสราง Site ไฟลทุกไฟลและภาพที่นํามาใช ตองอยูใน Site งานที่กําหนด วิธีการสรางเว็บไซตแบบใชวิซารด สามารถดําเนินการไดตามขั้นตอนดังนี้ 1. เลือกคําสั่ง Site> New Site... เพื่อเขาสูการสรางเว็บไซต ดังภาพ 1. จะปรากฏหนาจอ Site Definition for Unnamed Site1 เพื่อใหตั้งคา ดังตอไปนี้ • หมายเลข 1 คลิกเมาสเลือกที่แท็บ Basic ที่อยูมุมบนซาย • หมายเลข 2 คลิกเมาสเลือก Local Info • หมายเลข 3 ที่ Site name : ใหตั้งชื่อไซตงานตามตองการ ควรใหมีความหมาย เกี่ยวของกับงานหรือกิจกรรมของเว็บไซตนั้น ๆ ในที่นี้ จะตั้งชื่อวา myorganization • หมายเลข 4 ที่ Local root folder : เปนการกําหนดที่อยูของเว็บไซตบนเครื่องที่เรากําลัง ทํางานอยู (ควรสรางโฟลเดอรเก็บงานไวกอนแลว ในที่นี้สรางโฟลเดอรเก็บงาน ชื่อ organization ไวใน ไดรฟ C) และสามารถคลิกเลือกโฟลเดอรไดเลย • หมายเลข 5 กําหนดโฟลเดอรที่จะเก็บภาพ โดยอาจคลิกเลือกโฟลเดอรยอยที่สรางไว แลว ในโฟลเดอรเก็บงาน ในที่นี้ใชชื่อ images หนา 18/96 เนรมิตเว็บสวยดวย Dreamweaver
  19. 19. • หมายเลข 6 ที่ HTTP address : เปนการกําหนดที่อยู บน Server ถายังไมมีที่อยูบน Server ไมตองใส หรือถามีแตไมตองการให Dreamweaver สงขึ้นไปก็ไมตองใส • หมายเลข 7 ที่ Case - sensitive links :ใหคลิกเลือกเครื่องหมายถูก เพื่อตรวจสอบ ตัวอักษร เล็ก-ใหญ ซึ่งจะเห็นขอแตกตาง ถา Server เปนระบบ Unix เพราะ Unix ถือ วาตัวอักษร เล็ก-ใหญ ไมเหมือนกันเปนคนละตัวกัน 2. ใสชื่อ Site name เลือกโฟลเดอร และตั้งคาตาง ๆ ดังภาพ แลวคลิก Ok ที่ปุมดานลาง 3. โปรแกรมจะแสดงชื่อเว็บไซต โฟลเดอรที่ เก็บเว็บไซตที่เรากําลังจะสรางขึ้นใหม และ โฟลเดอรเก็บภาพ ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 19/96
  20. 20. การจัดการโครงสรางโฟลเดอร ในการสรางเว็บไซตดวย Dreamweaver 8 เมื่อสรางเว็บไซต หรือ Site งานขึ้นมาแลว โปรแกรม จะสรางโฟลเดอรใหมสําหรับเก็บขอมูลการทํางานในเว็บไซตนั้น ทั้งหมด หรืออีกวิธีหนึ่ง เราสามารถ สรางโฟลเดอร เก็บงานไวที่ไดร C และสรางโฟลเดอรยอย ๆ ในการเก็บงานแตละประเภท และเมื่อใช โปรแกรม Dreamweaver ใหเราเลือกโฟลเดอรที่สรางเตรียมไวสําหรับเก็บเว็บเพจไดตามตองการ การสรางเว็บเพจใหม ในการสรางเว็บเพจใหมที่จะเก็บไวในเว็บไซตของเรา เราสามารถสรางได 2 วิธี ดวยกัน คือ การสรางเว็บเพจใหมในหนาตาง New Document และการสรางเว็บเพจใหมในพาเนล Files • การสรางเว็บเพจใหมในหนาตาง New Document กอนสรางเว็บ ทานตองสรางโครงสราง และกําหนด Site ตามขั้นตอนในเรื่องที่ 1 ใหเรียบรอย เสียกอน จากนั้นจึงสรางหนาเว็บแตละหนา ซึ่งทานสามารถดําเนินการไดตามขั้นตอน ตอไปนี้ 1. ไปที่เมนู File แลวคลิกเลือก New ดังภาพ 2. หนาตาง New Document จะปรากฏขึ้น ใหคลิกเลือกแท็บ General เพื่อเลือกหัวขอการสราง เว็บเพจใหม และในชอง Category คลิกหัวขอ Basic page แลวเลือก HTML ดังภาพ 3. จะเกิดหนาเว็บเพจใหมขึ้น และพรอมที่จะสรางงาน หนา 20/96 เนรมิตเว็บสวยดวย Dreamweaver
  21. 21. 4. เมื่อออกแบบเว็บเพจเสร็จแลว จะทําการบันทึก ใหไปที่ File>save จะเกิดหนาจอขึ้น ดังภาพ 5. ใหตั้งชื่อเว็บเพจ ในที่นี้ เราจะตั้งชื่อเว็บเพจนี้วา index.html แลวคลิก save ชื่อเว็บเพจนี้จะ ปรากฏอยูในเว็บไซตหรือ Site งานที่เราสรางขึ้น ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 21/96
  22. 22. • การสรางเว็บเพจใหมในพาเนล File เปนการสรางไฟลงานใหมที่เก็บไวใน Site งานที่งาย สะดวก รวดเร็ว มีขั้นตอน ดังตอไปนี้ 1. คลิกเมาสปุมขวาที่โฟลเดอร Site งาน แลวคลิกเลือก New File 2. จะปรากฏเว็บเพจใหม ชื่อ Untitled (แปลวา ไมมีชื่อ) ที่มีนามสกุล .html พรอมสําหรับการ เปลี่ยนชื่อ ใหตั้งชื่อไฟลงานตามตองการ 3. ดังตัวอยาง สมมุติเว็บเพจนี้เปนหนาหลัก ใช ชื่อวา index.html ก็พิมพชื่อแลวกด Enter การสรางโฟลเดอรใหมในเว็บไซต ในกรณีที่เราตองการสรางโฟลเดอรใหมเพื่อเก็บภาพ หรือแยกจัดเก็บเรื่องตาง ๆ ไมใหปะปนกัน เราจําเปนตองสรางโฟลเดอรใหม การสรางโฟลเดอรใหม สามารถทําไดดังนี้ 1. คลิกเมาสปุมขวาที่โฟลเดอรที่เก็บ Site งาน แลว เลือก New Folder 2. ใหตั้งชื่อโฟลเดอรใหม สมมุติโฟลเดอรนี้ไวเก็บ ข อ มู ล บุ ค คลที่ ใ ช ใ นเว็ บ ไซต นี้ ให ชื่ อ โฟลเดอร ว า personal พิมพชื่อแลวกด Enter จะไดดังภาพ หนา 22/96 เนรมิตเว็บสวยดวย Dreamweaver
  23. 23. การเปลี่ยนชือไฟลและโฟลเดอร ่ การเปลี่ ย นชื่ อ ไฟล แ ละโฟลเดอร สามารถ กระทําไดงาย โดยคลิกเมาสขวาที่ไฟล หรือโฟลเดอรที่ ตองการจะเปลี่ยนชื่อ แลวเลือก Edit >Rename จะเกิด ลักษณะพรอมที่จะเปลี่ยน แลวพิมพชื่อใหมที่ตองการ การลบไฟลและโฟลเดอร การลบไฟลและโฟลเดอร ทําไดโดยคลิกเมาสขวา ที่ ไฟล หรือโฟลเดอรที่ตองการลบ แลวเลือก Edit >Delete ไฟลหรือโฟลเดอรจะถูกลบไป ดังภาพ การเปดเว็บเพจใหม ในการเปดเว็บเพจใหม ใหดับเบิ้ลคลิกไฟลที่สรางไว เพื่อที่จะเขาไปทํางาน เว็บเพจจะถูกเปดหนา วางขึ้นมาใหเราออกแบบการทํางาน เนรมิตเว็บสวยดวย Dreamweaver หนา 23/96
  24. 24. กอนที่จะเริ่มตนการออกแบบทํางาน เราควรที่จะกําหนดรายละเอียดของหนาเว็บเสียกอน โดย คลิกเมาสขวาที่หนาเว็บ แลวเลือก Page Properties เพื่อตั้งคาตาง ๆ Page Properties จะแบงออกเปน 5 หมวด โดยในหมวดแรก คือ 1. หมวด Appearance เปนการกําหนดสวนประกอบตาง ๆ บนหนาเว็บ ดังภาพ สวนประกอบตาง ๆ ในหนานี้ มีการกําหนดคา ดังนี้ หมายเลข 1 Page font ใหเลือกรูปแบบตัวอักษรที่จะใชในเว็บเพจ หมายเลข 2 Size กําหนดขนาดของตัวอักษร หมายเลข 3 Text color กําหนดสีของตัวอักษร หมายเลข 4 Background color กําหนดสีพื้นหลังของหนาเว็บเพจ หมายเลข 5 Background image กําหนดภาพที่เปนพื้นหลังของหนาเว็บเพจ หมายเลข 6 Repeat กําหนดใหเลือกภาพ Background วาใหกระทําซ้ําอยางไร (no-repeat ไมซ้ํา, repeat เปนแบบปูเต็มพื้นที่, repeat-x ปูไปตามแนวนอน, repeat-y ปูไปตามแนวตั้ง) หมายเลข 7 Left margin กําหนดระยะขอบซายของหนาเว็บ หมายเลข 8 Right margin กําหนดระยะขอบขวาของหนาเว็บ หมายเลข 9 Top margin กําหนดระยะขอบบนของหนาเว็บ หมายเลข 10 Bottom margin กําหนดระยะขอบลางของหนาเว็บ 2. หมวด 2 Links เปนการกําหนดคุณสมบัติของ Links มีรายละเอียด ดังนี้ หมายเลข 1 Link font กําหนดตัวอักษรของลิงค หมายเลข 2 Size กําหนดขนาดตัวอักษรของลิงค หมายเลข 3 Link color กําหนดสีใหกับลิงค หนา 24/96 เนรมิตเว็บสวยดวย Dreamweaver
  25. 25. หมายเลข 4 Rollover links การกําหนดสีเมื่อเมาสลากผาน หมายเลข 5 Visited links กําหนดสีมื่อไปที่ Link นี้แลว หมายเลข 6 Active links การกําหนดสี Link ที่ใชงานได หมายเลข 7 Underline style กําหนดรูปแบบการขีดเสนใตใหกับลิงค 3. หมวด 3 Headings เปนการกําหนดคุณสมบัติหัวขอของเว็บเพจ มีรายละเอียด ดังนี้ หมายเลข 1 Heading font กําหนดรูปแบบตัวอักษรหัวขอที่จะปรากฏบนหนาเว็บ หมายเลข 2 Heading 1-6 กําหนดขนาดตัวอักษรที่ใชสรางหัวขอบนหนาเว็บ 4. หมวด 4 Title/Encoding เปนการกําหนดชื่อใหสวนไตเติ้ลและกําหนดชุดตัวอักษรที่ใชของ เว็บเพจ มีรายละเอียด ดังนี้ หมายเลข 1 Title กําหนดสวนไตเติ้ลหรือชื่อหัวเรื่องใหเว็บเพจ หมายเลข 2 Document type กําหนดประเภทของเว็บเพจ หมายเลข 3 Encoding กําหนดรูปแบบภาษาของตัวอักษรที่ใชในเว็บเพจ สําหรับ การแปลงตัวอักษรเพื่อเปนภาษามาตรฐาน โดยใหเลือก Thai (Windows) ถา ตองการใชภาษาไทย 5. หมวด 5 Tracing Image เปนการกําหนดคุณสมบัติของรูปที่ใชเปนแบบในการสรางหนา เว็บเพจ มีรายละเอียด ดังนี้ เนรมิตเว็บสวยดวย Dreamweaver หนา 25/96
  26. 26. หมายเลข 1 Tracing Image ใหเลือกไฟลภาพที่จะใช หมายเลข 2 Image Transparency กําหนดคาความโปรงใสของภาพที่จะแสดงบนหนา เว็บเพจ การเพิ่มและแกไของคประกอบบนหนาเว็บ ในการเพิ่มและปรับแตงองคประกอบบนหนาเว็บ สามารถทําไดงาย ๆ ไมวาจะพิ่มตาราง รูปภาพ หรือแบบฟอรมตาง ๆ ในโปรแกรม Dreamweaver จะเรียกองคประกอบเหลานี้วา Object (ออบเจ็กต) โดยเราสามารถสรางออบเจ็กตนี้ได โดยอาศัยกลุม เครื่องมือตาง ๆ ที่ไดกลาวไว แลวในตอนตน ดังตัวอยาง ถาเราตองการนําภาพเขา ในโปรแกรม ใหไปที่เครื่องมือรูป ซึ่งอยูในกลุม Common เมื่อ เลือ กภาพที่ ตอ งการไดแ ลว ให ค ลิก แทรกภาพเข า โปรแกรม ภาพก็จะปรากฏในหนาเว็บ ณ ตําแหนงที่ เคอรเซอรอยู เมื่อนําภาพเขาโปรแกรมไดแลว ถ า เราจะจั ดการปรั บ แต ง ภาพ หรื อ ออบเจ็กต ใหคลิกที่ภาพนั้น ๆ จะเกิอ จุดดํา 3 จุดรอบภาพ และเกิด Property Inspector ของภาพดานลาง เพื่อให กําหนดรายละเอียดตามตองการ สําหรับการพิมพตัวหนังสือ สามารถพิมพลงบนหนาเว็บไดเลย และปรับแตงตัวหนังสือ กําหนด ขนาด กําหนดสีและอื่น ๆ ไดที่ Properties ดานลาง หนา 26/96 เนรมิตเว็บสวยดวย Dreamweaver
  27. 27. การใสหัวเรืองบนหนาเว็บ ่ การใสหัวเรื่องบนหนาเว็บ เมื่อเราเปดเว็บไซตขึ้นมา ในชอง Title บน Toolbar เราสามารถพิมพ ชื่อหัวเรื่องที่ตองการลงไปไดเลย ตอจากนั้นเลือกคําสั่ง File>Save เพื่อบันทึก แลวกดปุม F12 ดู ชื่อหัวเรื่องของหนาเว็บบน หนาตางบราวเซอร ซึ่งจะปรากฏชื่อตามที่เราตั้งไว ดังภาพ การใชงานภาษาไทยใน Dreamweaver 8 การใชงานภาษาไทยใน Dreamweaver 8 ซึ่งในเวอรชั่นนี้ เราสามารถพิมพภาษาไทย ในหนาตาง Design View ได เ ลยและข อ ความภาษาไทยก็ จ ะปรากฏในหน า ต า งบราวเซอร ทั น ที สําหรับผูที่ตองการเขาไปแกไขโคด HTML ในหนาตาง Code View จะเห็นไดวาขอความที่เรา พิมพที่ Design View จะแสดงเปนเลขรหัส ในหนาตาง Code View ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 27/96
  28. 28. ถาเราตองการจะอานโคดออก เปนภาษาไทยเหมือนที่เราพิมพที่ Design View ตองกําหนดให ภาษาที่ใชในเว็บเปน Thai (Windows) โดยเลือกเมนูคาสั่ง Modify>Page Properties หรือคลิกขวาที่ ํ หนาเว็บ แลวเลือก Page Properties ดังภาพ ตอไป ใหเลือกหัวขอ Title/Encoding ที่ชอง Encoding เลือก Thai (Windows) ดังภาพ เมื่อเลือก Thai (Windows) แลว โคดที่เปนรหัสจะแสดงเปนภาษาไทยเหมือนที่เราพิมพ ที่ หนาตาง Design View ดังภาพ หนา 28/96 เนรมิตเว็บสวยดวย Dreamweaver
  29. 29. การเพิ่ม-ลบฟอนต ก า ร เ พิ่ ม -ล บ ฟ อ น ต เ พื่ อ ใ ช ง า น ใ น Dreamweaver ทําไดโดย เลือกคําสั่งที่เมนูบาร Text>Font>Edit Font List ดังภาพ ขั้นตอนการเพิ่มฟอนต มีรายละเอียดดังนี้ ดู ภาพประกอบ 1. หมายเลข 1 Font list เปนฟอนตที่มีอยูแลว 2. หมายเลข 2 Available fonts เลือกฟอนตจาก windows ที่ตองการเพิ่ม ดังตัวอยาง ถาตองการ เลือกฟอนต ชื่อ AngsanaUPC ใหคลิกเลือก 3. หมายเลข 3 เมื่อเลือกฟอนตไดแลว ใหคลิกปุม เพื่อสงมาที่ชองหมายเลข 4 4. หมายเลข 4 Chosen fonts เปนชองที่วางฟอนตที่ถูกเลือกเพิ่มขึ้นมา 5. หมายเลข 5 สามารถจัดลําดับของฟอนตที่ใชบอย ๆ ใหเลื่อนขึ้นมาอยูลําดับแรก ๆ ได โดยใช ลูกศรเลื่อนขึ้น หรือลูกศรเลื่อนลงเพื่อตองการจัดใหฟอนตเลื่อนลงจากตําแหนงเดิม 6. หมายเลข 6 เมื่อเลือกฟอนตไดตามตองการแลว ใหกดปุม OK • การลบฟอนต การลบฟอนต ทําไดโดย เลือกคําสั่งที่เมนูบาร Text>Font>Edit Font List แลวเลือกฟอนตที่ ตองการลบในชอง Font list และคลิกปุม แลวคลิกปุม OK เนรมิตเว็บสวยดวย Dreamweaver หนา 29/96
  30. 30. การปรับแตงขอความบนเว็บเพจ การใสขอความบนหนาเว็บ การใสขอความบนหนาเว็บเพจ กระทําไดงาย ๆ โดยการพิมพบนหนาเว็บเพจไดเลย หรือจะ copy ขอความมาจากไฟล word หรือจากโปรแกรมอื่น ๆ แลวนํามาวางบนหนาเว็บเพจก็ได ดังภาพ จากตัวอยาง ถาเราตองการขึ้นยอหนาใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอร เซอรหนาขอความที่ตองการจะขึ้นยอหนาใหมแลวกด Enter ที่แปนพิมพ ขอความนั้น จะขึ้นยอหนาใหม ให และเกิดการแทรกบรรทัดวางขึ้น ดังภาพ ถาเราไมตองการขึ้นยอหนาใหม แตตองการขึ้นบรรทัดใหม ใหกด <Shift + Enter> หรือคลิก เมาสที่ปุม ในกลุมเครื่องมือ Text จะเปนการแทรก Line Break ในขอความตรงตําแหนงที่เรา ตองการ ดังตัวอยาง ถาเราตองการขึ้นบรรทัดใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอรเซ อรหนาขอความที่ตองการจะขึ้นบรรทัดใหมแลวกด <Shift + Enter> ที่แปนพิมพ ก็จะได ดังภาพ ตอไป ถาเราตองการจะยอหนา ใหคลิกเมาสที่ สามเหลี่ยมเล็ก ๆ ขางปุม BR ดังภาพ หนา 30/96 เนรมิตเว็บสวยดวย Dreamweaver
  31. 31. ซึ่งอยูในกลุมเครื่องมือ Text และเลือก Non-Breaking Space ตอไป เราตองการยอหนา บรรทัดแรก ใหเราตั้งเคอรเซอร ที่หนาคําวา "ศูนย... และบรรทัดที่ 5 คําวา "ตอมา...ใหคลิกที่รูป ดังภาพ โดยคลิกติด ๆ กัน จนกวาจะยอหนาเขา ไปไดตามตองการ ดังภาพ การตกแตงและจัดรูปแบบขอความ กอนที่จะตกแตงและจัดรูปแบบขอความ เราตองเลือกขอความทั้งหมดกอน โดยเลือกคําสั่ง Edit  >Select All หรือคลิกเลือกที่แท็ก <body> จะไดผลลัพธ ดังภาพ เมื่อเลือกขอความแลว เราปรับแตงและจัดรูปแบบขอความ โดย Property Inspector หรือใชกลุม เครื่องมือ Text ที่แถบ Insert Bar ในที่นี้ ใหไปที่ Window และเลือก Properties โปรแกรมจะเปด เครื่องมือ Properties เราก็สามารถตั้งคาฟอนต ขนาด สี ตําแหนงของขัอความ ดังภาพ เมื่อเปดหนาจอเครื่องมือ ที่จะใชปรับแตงตัวหนังสือ หรือขอความ ขึ้น เราสามารถกําหนดขนาด ประเภทตัวหนังสือหรือฟอนต สีของตัวอักษร ตําแหนง และอื่น ๆ สมมุติวา ตองการใหขอความเปน ตัวสี เนรมิตเว็บสวยดวย Dreamweaver หนา 31/96
  32. 32. น้ําเงิน เอียง ขอความตําแหนงชิดซายของเว็บเพจ และหัวขอเปนตัวหนา สามารถกระทําไดโดยใช เครื่องมือดังที่กลาวมาแลว ขางตน จะไดผลลัพธ ดังภาพ เครื่องมือที่ใชจัดตําแหนงและตกแตงขอความ ที่ควรรู มีดังนี้ การจัดตําแหนงขอความโดยใชปุม 1. จัดชิดซายของเว็บเพจ 2. จัดอยูกึ่งกลาง 3. จัดชิดขวา 4. จัดใหขอความอยูเต็มบรรทัด การจัดยอหนาโดยใชปุม 5. คลิกที่ปุม Text Indent เพื่อจัดยอหนาของขอความใหเขาไปมากนอยไดตาม ตองการ 6. ถาจัดยอหนาเขาไปมากเกินไป ก็สามารถคลิกปุม Text Outdent เพื่อยกเลิกยอหนา ใหไดระยะหางตามตองการ การใส Bullet และตัวเลขกํากับในแตละบรรทัด 7. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวย Bullet หรือสัญลักษณรูปแบบ ตาง ๆ 8. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวยตัวเลข การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History ในการทํางานออกแบบเว็บเพจ เมื่อทําไปเรื่อย ๆ อาจเกิดขอผิดพลาดได เราสามารถยอนกลับไป แกไขขอผิดพลาดได โดยไปที่เมนูบาร Window>History หรือกดคีย < Shift+F10> ดังภาพ หนา 32/96 เนรมิตเว็บสวยดวย Dreamweaver
  33. 33. เมื่อเปดพาเนล History จะเห็นบันทึกการทํางานทุกขั้นตอน โดยขั้นตอนลาสุด จะเรียงอยูลําดับ บนสุดของรายการ ขั้นตอนกอนหนานี้จะอยูลาง ๆ ดังภาพ การยอนกลับการทํางานหลาย ๆ ขั้นดวยพาเนลนี้ เราทําไดโดย คลิกเลื่อนแถบ ไปยังขั้นตอนที่ เราตองการยอนกลับไป โดยจะเลื่อนไปทีละขั้นตอน หรือหลายขั้นตอนได ดังภาพ การทําซ้ําขั้นตอนการทํางาน เราสามารถสั่งใหทําซ้ําขั้นตอนการทํางานที่เราตองการจะใหทําซ้ํา ในพาเนล History ได โดย 1. คลิกเลือกขั้นตอนที่ตองการใหซ้ํา เนรมิตเว็บสวยดวย Dreamweaver หนา 33/96
  34. 34. 2. คลิกที่ปุม ที่อยูมุมลางดานซายมือ ดังภาพ การบันทึกเว็บเพจ เมื่อเราออกแบบเว็บเพจไดตามตองการแลว การที่จะบันทึกงาน ใหเลือกคําสั่ง File>Save As เพื่อ บันทึกไฟลในชื่อใหม ดังภาพ จากนั้นใหทําตามขั้นตอน ดังนี้ 1. เลือกโฟลเดอรที่เก็บไฟลงาน 2. ใหตั้งชื่อไฟล โดยใสนามสกุลเปน .html 3. คลิกปุม Save เพื่อสั่งบันทึกไฟล หนา 34/96 เนรมิตเว็บสวยดวย Dreamweaver
  35. 35. นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจทีควรรูอีก 4 วิธี คือ ่ • วิธีที่ 1 เลือกคําสั่ง File>Save เพื่อบันทึกไฟลในชื่อเดิม • วิธีที่ 2 เลือกคําสั่ง File>Save All บันทึกไฟลทั้งหมดที่มการเปลี่ยนแปลงแกไข ี • วิธีที่ 3 เลือกคําสั่ง File>Save to Remote Server ทําการบันทึกเว็บเพจและอัพโหลดไปยัง เซิรฟเวอร • วิธีที่ 4 คลิกเลือกรูป นี้ ในกลุมเครื่องมือ Standard Bar บน Insert Bar เพื่อบันทึกไฟลเว็บ เพจใหมโดยตั้งชื่อใหมตามที่เราตองการ หรือบันทึกไฟลเว็บเพจในชื่อเดิมไดอยางรวดเร็ว โดย ดําเนินการไดดงนี้ 1. คลิกเมาสขวาที่แถบกลุมเครื่องมือ Document และเลือกคําสั่ง Standard ดังภาพ 2. คลิกเมาสบันทึกไฟลเว็บเพจที่เรากําลังทํางานอยู ดังภาพ แตถาเราออกแบบงานเว็บเพจเสร็จแลว และยังไมไดมีการบันทึก หรือมีการแกไข เปลี่ยนแปลงและยังไมไดบันทึก โปรแกรม Dreamweaver จะมีเครื่องหมาย * ปรากฏเตือนอยูที่ มุมบนขวาของชื่อไฟล ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 35/96
  36. 36. การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร เมื่อเราบันทึกเว็บเพจเสร็จเรียบรอยแลว และ ตองการที่จะดูเว็บเพจที่เราออกแบบวาเวลาแสดงผล บนหนาตางบราวเซอรจะมีผลตามที่ตองการหรือไม อยางไร เราสามารถดําเนินการได 3 วิธีการ ดังนี้ วิธีที่ 1 กดปุม < F12 > ที่คียบอรด วิธีที่ 2 ดับเบิ้ลคลิกที่ไฟล html ที่เราบันทึกเก็บไวในเครืองคอมพิวเตอร ่ วิธีที่ 3 เลือกคําสั่ง File>Preview in Browser>IEexplore ดังภาพ หลังจากนั้นผลลัพธ จะปรากฏบนหนาจอในหนาตางบราวเซอร ดังภาพ ตกแตงเว็บเพจดวยกราฟก เตรียมภาพเพื่อใชในเว็บเพจ ในการออกแบบเว็บเพจ นอกจากจะมีขอความแลว ภาพนับวาเปนสิ่งสําคัญที่จะชวยทําใหเว็บ เพจนั้น ๆ มีความนาสนใจมากยิ่งขึ้น หนา 36/96 เนรมิตเว็บสวยดวย Dreamweaver

×