Dreamweaver cs6

 การใช้โปรแกรม Dreamweaver CS6 เบื้องต้น

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

·       File > New         ใช้สร้างหน้าเว็บเพจใหม่

·       File > Open      ใช้เปิดหน้าเว็บเพจเก่า

·       File > Save        ใช้บันทึกงานที่กำลังทำอยู่

·       File > Save As   ใช้บันทึกงานสำหร้บเปลี่ยนชื่อใหม่หรือเปลี่ยนที่จัดเก็บ

·       File > Save All   ใช้บันทึกงานทั้งหมดที่ถูกเปิดแก้ไข

·       กด ปุ่ม F12         ใช้ทดสอบดูผลหน้าเว็บเพจที่สร้างด้วยโปรแกรมเว็บบราวด์เซอร์ (บันทึกงานก่อนทดสอบ)

1. หน้าต่างการทำงานของ Dreamweaver

สามารถเลือกหน้าต่างการทำงานได้ 3 รูปแบบ โดยการคลิกไอคอนที่อยู่ในแถบเครื่องมือ Toolbar ดังนี้

                                  

1) Code (Show Code View) ให้แสดงหน้าการทำงานแบบเขียนโค้สภาษา HTML

2) Split (Show Code and Design) View ให้แสดงหน้าการทำงานแบบเขียนโค้ส และแบบออกแบบ (Design)

3) Design (Show Design View) ให้แสดงหน้าการทำงานแบบออกแบบ (Design)

2. การเริ่มกำหนดโครงสร้างของเว็บ

ควรกำหนดให้ข้อมูลต่างๆ ที่เกี่ยวข้องอยู่ใน Folder เดียวกันเพื่อง่ายต่อค้นหาและจัดเก็บ

Index.html Main.html Menu.html Head.html Page1.html

Site - My_Website (D:\ My_Website)

3 การกำหนดไซต์(Site) จัดเก็บเว็บไซต์ที่สร้าง

การสร้างเว็บไซต์ จะต้องทำการสร้างโฟลเดอร์เก็บไฟล์เอกสาร และไฟล์ที่เกี่ยวข้องไว้เฉพาะ ซึ่งในโปรแกรม Dreamweaver เรียกว่า การสร้างไซต์ (Site) มีวิธีการดังนี้

1.       คลิกที่เมนู Site

2.       เลือก New Site... จากนั้นจะปรากฏหน้าต่าง Site Setup for ... (ตามชื่อไซต์) 

3.       คลิกที่แท็บ Site

4.       ช่อง Site Name : ตั้งชื่อเว็บไซต์ที่ต้องการ   (ในที่นี้ให้ใส่ชื่อนักเรียนภาษาอังกฤษ เช่น Pramote )

5.       ช่อง Local Site Folder : กำหนดโฟลเดอร์ที่จัดเก็บเว็บไซต์ จากนั้นคลิกที่ปุ่ม Save  (ในที่นี้ให้พิมพ์ “D:\ตามด้วยชื่อนักเรียนภาษาอังกฤษ” เช่น D:\Pramote)

  

6.       คลิกที่แท็บ Advanced Settings

7.       เลือก Local Info

8.       ช่อง Default Images folder : กำหนดโฟลเดอร์ในการจัดเก็บรูปภาพ ต้องอยู่ในโฟลเดอร์ย่อยของโฟลเดอร์ที่จัดเก็บเว็บไซต์ (ตามข้อ 5)

9.       คลิกที่ปุ่ม Save

4 การจัดการพาเนลไฟล์

1) 

ชื่อไซต์

การสร้างโฟลเดอร์ คลิกขวาที่ชื่อไซต์ เลือกคำสั่ง New Folder

2)  การลบไฟล์ คลิกเลือกไฟล์แล้วกดปุ่ม Delete

             หรือ คลิกขวาที่ชื่อไฟล์ เลือกคำสั่ง Edit > Delete

3)  การเปลี่ยนชื่อไฟล์ คลิกขวาที่ชื่อไฟล์ เลือกคำสั่ง Edit > Rename

4)  การส่งงาน คลิกที่ชื่อไซต์ แล้วคลิกปุ่ม  (Put File)

5)  การดึงงาน คลิกที่ชื่อไซต์ แล้วคลิกปุ่ม  (Get File)

5. การกำหนดคุณสมบัติของเว็บเพจ

ก่อนการสร้างเว็บเพจ จำเป็นต้องกำหนดคุณสมบัติพื้นฐานให้กับเว็บเพจแต่ละหน้า เพื่อความเหมาะสมในการทำงาน ซึ่งมีวิธีการดังนี้

1) คลิกที่เมนู Modify > Page Properties... (กดปุ่ม Ctrl + J)

   หรือ คลิกที่ปุ่ม Page Properties.. ในพาเนลพร็อพเพอร์ตี (Properties) จะปรากฎหน้าต่าง Page Properties

o    Page Font กำหนดรูปแบบของตัวอักษร o    Size: กำหนดขนาดของตัวอักษร o    Text Color: กำหนดสีของตัวอักษร o    Background Color:กำหนดสีพื้นหลังของเว็บเพจ o    Background Image: กำหนดภาพให้เป็นพื้นหลังของเว็บเพจ o    Repeat: กำหนดการแสดงซ้ำของภาพพื้นหลัง o    Left Margin: กำหนดระยะขอบด้านซ้ายของเว็บเพจ o    Right Margin: กำหนดระยะขอบด้านขวาของเว็บเพจ o    Top Margin: กำหนดระยะขอบด้านบนของเว็บเพจ o    Bottom Margin: กำหนดระยะขอบด้านล่างของเว็บเพจ

6. การใส่ข้อความลงในเว็บเพจ
   6.1 เทคนิคการพิมพ์ข้อความ

      1) เว้นวรรคตัวอักษรมากกว่า 1 วรรค กดปุ่ม Ctrl + Shift ค้างแล้วกดปุ่ม Space Bar ย้ำๆ

      2) การขึ้นบรรทัดใหม่แบบไม่เว้นบรรทัด กดปุ่ม Shift + Enter 

  6.2 การปรับแต่งคุณสมบัติ บนพาเนลพร็อพเพอร์ตี้ (Property) ของข้อความ

o    เลือกข้อความที่ต้องการตกแต่งหรือจัดรูปแบบของข้อความ

o    เครื่องมือสำหรับจัดรูปแบบข้อความใน Properties Inspector ซึ่งมีให้เลือก 2 รูปแบบ คือ แบบ HTML และแบบ CSS ดังนี้

จัดรูปแบบด้วย HTML

§  หมายเลข 1 : เปิดการทำงานกับ HTML

§  หมายเลข 2 : Format : เลือกรูปแบบหัวข้อ Heading (ขนาดตัวอักษร) ระดับ 1-6

§  หมายเลข 3 : Class : ดึงสไตล์ของ CSS มาใช้กับข้อความ

§  หมายเลข 4 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา

§  หมายเลข 5 : กำหนดลักษณะตัวอักษรให้เป็นตัวเอียง

§  หมายเลข 6 : ใส่ Bullet หรือหัวข้อย่อย

§  หมายเลข 7 : จัดย่อหน้าของข้อความ

จัดรูปแบบด้วย CSS 

§  หมายเลข 1 : เปิดการทำงานกับ CSS

§  หมายเลข 2 : Targeted Rule : สร้างหรือกำหนดสไตล์ CSS

§  หมายเลข 3 : Font : เลือกรูปแบบของตัวอักษร

§  หมายเลข 4 : Size : ขนาดของตัวอักษร

§  หมายเลข 5 : สีของตัวอักษร

§  หมายเลข 6 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา

§  หมายเลข 7 : กำหนดลักษณะตัวอักษรให้เป็นตัวเอียง

§  หมายเลข 8 : จัดตำแหน่งของข้อความ เช่น ชิดซ้าย กึ่งกลาง ชิดขวา จัดให้ตรงกันทั้งซ้ายและขวา

หมายเหตุ : หมายเลข 2 : Targeted Rule : สร้างหรือกำหนดสไตล์ CSS
ถ้าเลือก New Inline Style คุณสมบัติที่กำหนดจะมีผลต่อข้อความที่เลือกทันที

      4.) การกำหนดสีและขนาดตัวอกษรเฉพาะส่วนที่เลือก

          4.1) คลิกปุ่ม CSS ของ Properties

          4.2) ช่อง Targeted Rule เลือก <New Inline Style>

          4.3) เลือกสีที่ปุ่ม Text Color

          4.4) กำหนดขนาดตัวอักษรที่ ช่อง Size

      5.) การจัดตำแหน่งข้อความ

          5.1) คลิกปุ่ม CSS ของ Properties

5.2) คลิกปุ่มเลือกตำแหน่ง    (ซิดซ้าย, กึ่งกลาง, ซิดขาว, กระจายสม่ำเสมอ)

   

   6.3 คำสั่งเกี่ยวกับตัวอักษร

      1.) Format > Style > Underline   ขีดเส้นใต้ตัวอักษร

      2.) Format > Color…                 กำหนดสีตัวอักษร

      3.) การนำเข้าข้อความจากไฟล์เอกสารอื่น เช่น Word

            ใช้คำสั่ง File > Import > Word Document…

7. การใส่รูปภาพลงเว็บเพจ

         ประเภทของไฟล์รูปภาพที่นิยมใช้  

1)      ภาพ GIF (Graphic Interchange Format)  กำหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งใสและสร้างภาพเคลื่อนไหวได้

2)      ภาพ JPG (JPEG:Joint Photographic Experts Group) แสดงสีได้สูงถึง 16.7 ล้านสี ส่วนใหญ่มักจะเป็นภาพถ่าย หรือภาพที่มีรายละเอียดสีมากๆ

3)      ภาพ PNG (Portable Network Graphic)  แสดงสีได้สูงถึง 16.7 ล้านสี คุณลักษณะโปร่งใส

     7.1 วิธีการใส่รูปภาพ มี 3 วิธี

1)  คลิกที่ปุ่ม   (Image)

2)  จากเมนูคำสั่ง Insert > Image

3)  กดปุ่ม Ctrl + Alt + I (บนคีย์บอร์ดพร้อมกัน)

     7.2 การใส่ภาพเป็นพื้นหลังเว็บเพจ

        ใช้คำสั่ง   Modify > Page Properties ที่ช่อง Background Image คลิกปุ่ม Browse เลือกรูปภาพที่ต้องการ

    7.3 การปรับแต่งคุณสมบัติ บนพาเนลพร็อพเพอร์ตี้ (Property) ของรูปภาพ

1.       คลิกเลือกรูปภาพที่ต้องการ

2.       ใส่ชื่อของรูปภาพ

3.       แหล่งที่เก็บรูปภาพ

4.       คำอธิบายรูปภาพ

5.       ความสูง (H) ของรูปภาพ

6.       ความกว้าง (W) ของรูปภาพ

7.       เชื่อมโยงไปยัง หน้าเว็บเพจ

8.       เปิด/แก้ไขรูปภาพด้วยโปรแกรมอื่น

9.       ปรับลดความละเอียดของรูปภาพ

10.   อัพเดตรูปภาพ (กรณีไม่แสดงภาพตามต้นฉบับ เฉพาะไฟล์ .PSD)

11.   ตัดรูปภาพ

12.   ปรับขนาดของรูปภาพ

13.   ปรับค่าสี/แสงของรูปภาพ

14.   ปรับความคมชัดของรูปภาพ

8. การใส่ตารางลงเว็บเพจ

   8.1 วิธีการสร้างตาราง มี 3 วิธี

1. คลิกที่ปุ่ม   (Table)

2. จากเมนูคำสั่ง Insert > Table

3. คีย์ลัด กดปุ่ม Ctrl + Alt + T

กำหนดรายละเอียดของตาราง o    Rows : จำนวนแถว o    Columns : จำนวนคอลัมน์ o    Table width : ความกว้างของตาราง (หน่วยที่ใช้วัดเป็นเปอร์เซ็นต์หรือพิกเซล) o    Border thickness : ความหนาของเส้นขอบตาราง o    Cell padding : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา o    Cell spacing : ระยะห่างระหว่างเซลล์ในตาราง

   8.2 การปรับแต่งคุณสมบัติ บนพาเนลพร็อพเพอร์ตี้ (Property) ของตาราง

               

1.       Table : ชื่อของตาราง

2.       Rows : จำนวนแถว

3.       Cols : จำนวนคอลัมน์

4.       W : ความกว้างของตาราง

5.       Direction : เปลี่ยนทิศทางของตาราง

6.       Cellpad : ระยะห่างระหว่างขอบเซลล์กับเนื้อหา

7.       CellSpace : ระยะห่างระหว่างเซลล์แต่ละเซลล์

8.       Align : การจัดตำแหน่งของตาราง

9.       Border : ความหนาของเส้นขอบตาราง

10.   Class : กำหนดค่า CSS ให้กับตาราง

   8.3 การแทรก/ลบแถว (row) ในตาราง

1)      คลิกขวาในเซลล์ของตารางที่ต้องการแทรก เลือกคำสั่ง Table >Insert Row (หรือกดปุ่ม Ctrl+M)

2)      คลิกขวาในเซลล์ของตารางที่ต้องการแทรก เลือกคำสั่ง Table >Delete Row (หรือกดปุ่ม Ctrl+Shift+M)

   8.4 การแทรก/ลบคอลัมม์(Column)ในตาราง

1)      คลิกขวาในเซลล์ของตารางที่ต้องการแทรก เลือกคำสั่ง Table >Insert Column (หรือกดปุ่ม Ctrl+Shift+A)

2)      คลิกขวาในเซลล์ของตารางที่ต้องการแทรก เลือกคำสั่ง Table >Delete Column (หรือกดปุ่ม Ctrl+Shift+ -  )

   8.5 การแทรก/ลบแถวและคอลัมม์ตามจำนวนที่ต้องการ(Column) ในตาราง

คลิกขวาในเซลล์ของตารางที่ต้องการแทรก เลือกคำสั่ง Table >Insert Rows or Column..

-                   Insert :เลือก(row) เพิ่มแถวหรือ(Column)เพิ่มคอลัมม์

-                   Number of Row/Column: ใส่จำนวนแถวหรือคอลัมม์

-                   Where : กำหนดให้เพิ่มด้านบนหรือด้านล่างของเซลล์ที่เลือกอยู่

   8.6 การผสานเซลล์ในตาราง

          คลิกเลือกเซลล์ที่ต้องการผสาน  แล้วคลิกที่ปุ่ม          (Merge Cells) ในหน้าต่าง Properties

   8.7 การแบ่งเซลล์ในตาราง

คลิกเลือกเซลล์ที่ต้องการ คลิกที่ปุ่ม        (Split Cells) ในหน้าต่าง Properties

การกำหนดค่าแบ่งเซลล์ o    Rows : เลือกแบ่งเซลล์ออกเป็นแถว o    Columns : เลือกแบ่งเซลล์ออกเป็นคอลัมน์ o    Number of ... : กำหนดจำนวนเซลล์ที่ต้องการจะแบ่ง

หมายเหตุ

1.       การเลือกเซลล์หลายที่ต่อเนื่อง :คลิกที่เซลล์แรก แล้วกด Shift  ค้างแล้วคลิกที่เซลล์สุดท้าย

2.       การเลือกเซลล์หลายที่ไม่ต่อเนื่อง : กด Ctrl  ค้างแล้วคลิกเลือกเซลล์ในตารางที่ต้องการ

9. การออกแบบเว็บด้วยเฟรม

           เฟรมเซต (Frameset) เป็นการแบ่งหน้าเว็บเพจออกเป็นพื้นที่หลาย ๆ ส่วน โดยแต่ละส่วนแยกออกไปอย่างอิสระไม่ขึ้นต่อกัน การสร้างเฟรมนิยมแบ่งออกเป็น 2 กลุ่ม คือ เฟรมหลัก (Frameset) และเฟรมย่อย (Frame)
   9.1. การออกแบบหน้าเว็บเพจด้วยเฟรมแบบ Top and Nested Left

1)      แบ่งหน้าเว็บเพจใหม่ออกเป็นเฟรม ใช้คำสั่ง Insert > HTML >Frames > Top Nested Left    

2)      เปิดพาเนลเฟรมด้วยคำสั่ง Window > Frames  (กดปุ่ม Shift+F2)

3)      การบันทึกและสร้างหน้าเว็บเพจ

ขั้นตอนการบันทึก  บันทึกทั้งหมด 4 ไฟล์ (1. Index.html   2. Main.html  3. Left.html  4. Top.html )

3.1)  ไฟล์ที่ 1 ชื่อ Index.html

- คลิกที่พาเนล Frame

- ใช้คำสั่ง File > Save Frameset     
- ชื่อไฟล์  Index.html ที่ช่อง File Name

3.2)  ไฟล์ที่ 2 ชื่อ Main.html

Top

- คลิกที่เฟรม main ที่พาเนล Frame

Left

- ใช้คำสั่ง File > Save Frame
- ชื่อไฟล์  Main.html ที่ช่อง File Name

3.3)

Main

 ไฟล์ที่ 3 ชื่อ Left.html

- คลิกที่เฟรม Left ที่พาเนล Frame

- ใช้คำสั่ง File > Save Frame
- ใส่ชื่อ Left.html ที่ช่อง File Name

3.4)  ไฟล์ที่ 4 ชื่อ Top.html

- คลิกที่เฟรม Top ที่พาเนล Frame

- ใช้คำสั่ง File > Save Frame
- ใส่ชื่อ Top.html ที่ช่อง File Name

ขั้นตอนการสร้างหน้าเว็บเพจ

3.5)  เฟรมบน (Top Frame)
- ใส่รูปภาพหัวเว็บเพจ
- กำหนดให้ภาพชิดขอบ (Margin) โดยคลิกที่เมนูคำสั่ง  Modify > Page  Properties กำหนดค่า Left margin = 0, Right margin= 0, Top margin=0, Bottom margin=0       กดปุ่ม OK

3.6)  เฟรมเนื้อหา (Mainframe) เป็นหน้าแรกของเว็บเพจ ใส่เนื้อหาและรูปภาพ

3.7)  เฟรมซ้าย (Left Frame)
- สร้างเมนู โดยสร้างตารางขนาด 6 แถว 1 คอลัมน์ กว้าง 98 present (%) border = 1
- ใส่หัวข้อเมนู  เชื่อมโยงเมนูไปยังหน้าเว็บเพจเนื้อหา 

      4) การเชื่อมโยงเมนูกับหน้าเว็บเพจเนื้อหา

4.1)  เชื่อโยงเมนูหน้าแรก  เลือกข้อความ “หน้าแรก “

4.2)  ในช่อง Link กำหนดชื่อไฟล์ที่ต้องการเชื่อมโยง เช่น main.html

4.3)  ในช่อง  Target ให้คลิกเลือก mainframe (เฟรมเนื้อหา)

4.4)  เชื่อโยงหัวข้ออื่นๆ จะกำหนดค่าคล้ายกันเช่น เลือก “หัวข้อที่ 2”

4.5)  ในช่อง Link คลิกและพิมพ์ Page2.html

4.6)  ในช่อง Target คลิกเลือก mainframe ทุกหน้า

4.7)  แก้ไขเสร็จแล้วคลิก File>Save All จะเป็นการบันทึกไฟล์ทีเดียวทุกไฟล์ เนื่องจากเว็บเพจ แบบเฟรม จะมีการเปิดไฟล์ต่างๆ พร้อมกันมากกว่า 1 ไฟล์

4.8)  ทดสอบเว็บไซต์ผ่านโปรแกรมเว็บบราวเซอร์ โดยการกดปุ่ม F12

หมายเหตุ   1. ทุกครั้งที่แก้ไขงานต้องบันทึกโดยคำสั่ง File > Save All

             2. การทดสอบเว็บโดยกดปุ่ม F12 ต้องทำการบันทึกก่อนทุกครั้ง

             3. การเปิดหน้าเว็บเพจแรกขึ้นมาแก้ไขให้เปิดไฟล์ Index.html 

             4. กำหนดให้แสดงเส้นแบ่งเฟรม ใช้คำสั่ง View > Visual Aids > Frame  Borders

          5. เปิดหน้าต่าง Frame ใช้คำสั่ง Window > Frame (หรือกดปุ่ม Shift + F2)

          6. การเลือกเฟรมเพื่อปรับแต่งรายละเอียด โดยการกดปุ่ม Alt แล้วคลิกเฟรมที่ต้องการ

                - Src คือชื่อไฟล์ที่ถูกนำมาแสดงในเฟรมนี้

                - Scroll คือ กำหนดให้แสดงหรือไม่แสดงแถบเลื่อนดูข้อมูล (Scroll Bar)

       5) การสร้างหน้าเว็บเพจใหม่ในเฟรม

5.1)  เลือกเมนูคำสั่ง  File >New

5.2)  บันทึก ใช้คำสั่ง File > Save บันทึกชื่อว่า Page2.html (หรือชื่อตามที่ต้องการ)

5.3)  ใส่เนื้อหาตกแต่งหน้าเว็บเพจให้สวยงาม

5.4)  กลับไปที่หน้าหลัก (ดับเบิ้ลคลิกที่ไฟล์ Index.html) เชื่อมโยงกับเมนูที่เตรียมไว้

10. สร้างการเชื่อมโยง (Link)  

          เราสามารถสร้างการเชื่อมโยงได้หลายแบบด้วยกันดังนี้

·      เชื่อมโยงไปยังหน้าเว็บเพจอื่นหรือไฟล์เว็บเพจอื่นในเว็บไซต์เดียวกัน

·      เชื่อมโยงภายในเว็บเพจเดียวกัน

·      เชื่อมโยงไปยังเว็บไซต์อื่น

·      เชื่อมโยงไปยังอีเมล์ (E-mail link)

·      เชื่อมโยงไปยังไฟล์ดาว์นโหลด

การเชื่อมโยงไปเว็บไซต์อื่น

1. เลือกข้อความที่ต้องการเชื่อมโยง

2. ในช่อง Link กำหนดชื่อเว็บไซต์อื่น ให้เราระบุ URL ของเว็บเพจนั้น โดยพิมพ์ http:// นำหน้าชื่อเว็บเพจที่เราต้องการเชื่อมโยงด้วยทุกครั้ง เช่น http://www.islamiccollege.ac.th

3. ในช่อง Target ให้คลิกเลือก _blank  (กำหนดวิธีเปิดหน้าเว็บที่เชื่อมโยง)

4. ทดสอบ ให้เราสั่งบันทึกการทำงาน และกดปุ่ม <F12>เพื่อทดสอบดูผลลัพธ์การเชื่อมโยงไปยังเว็บไซต์อื่น เมื่อเราคลิกภาพหรือข้อความ จะเป็นการลิงค์ไปยังเว็บไซต์ที่เรากำหนดไว้

กำหนดลักษณะการเปิดหน้าเว็บที่เชื่อมโยง

          ที่ Property ในส่วนของ Target เราสามารถกำหนดวิธีเปิดหน้าเว็บที่เชื่อมโยงเมื่อมีการคลิกลิงค์ได้ดังนี้

_blank           ให้เปิดเว็บใหม่ที่เชื่อมโยงในหน้าต่างบราวเซอร์ใหม่อีกหน้าต่าง

_parent          ให้เปิดเว็บใหม่ที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม

_self             ให้เปิดเว็บใหม่ที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม หรือในกรอบเฟรมเดิม

_top              ให้เปิดเว็บใหม่ที่เชื่อมโยงในหน้าต่างบราวเซอร์เดิม หรือในกรอบเฟรมนอกสุด