เว็บไซต์ครูวันดี จัดทำขึ้นเพื่อการเรียนรู้ เรื่อง การพัฒนาเว็บไซต์ด้วยโปรแกรม Adobe Dreamweaver CS6 
Copyright © 2013 : http://www.kruwan-d.info , All Rights Reserved.
ออกแบบและพัฒนาโดย นางสาววันดี กุลภัทร์แสงทอง
โรงเรียนเทศบาลวัดดอนไก่ดี (สังวรจันทสรราษฎรวิทยา) สังกัดเทศบาลเมืองกระทุ่มแบน จังหวัดสมุทรสาคร
ดาวน์โหลด ใบกิจกรรม
                    เริ่มต้นใส่ข้อความ / การตกแต่งและจัดรูปแบบให้ข้อความ
                    การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ / การนำเอกสารอื่นมาใช้ร่วมกับ Dreamweaver CS6

                    -------------------------------------------------------------------------------




                                                                        VDO : สาธิตการใส่ข้อความ

                                                                        VDO : สาธิตการนำเอกสารอื่น มาใช้ร่วมกับโปรแกรม






เริ่มต้นใส่ข้อความ

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


                  1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการพิมพ์ข้อความ
                  2. พิมพ์ข้อความที่ต้องการ

              การขึ้นบรรทัดใหม่
                  การขึ้นบรรทัดใหม่ ใช้วิธีกดปุ่ม Enter จะเว้นบรรทัดที่ว่างก่อนและหลังให้ 1 บรรทัด

              การขึ้นบรรทัดใหม่ไม่ต้องเว้นที่ว่าง
                  ถ้าต้องการให้การขึ้นบรรทัดใหม่โดยไม่ต้องเว้นที่ว่าง ให้คลิกหน้าข้อความหรือบรรทัดที่ต้องการจะขึ้นบรรทัดใหม่แล้วกดปุ่ม Shift พร้อมกับกดปุ่ม Enter


การตกแต่งและจัดรูปแบบให้ข้อความ

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


                     1. คลิกเมาส์วางเคอร์เซอร์หน้าข้อความและลากเมาส์ไปจนถึงคำสุดท้าย แล้วปล่อยเมาส์
                     2. บริเวณเมาส์ลากผ่านจะมีแถบสีดำขึ้นมา

                - เลือกข้อความทั้งหมด


                     1. คลิกที่เมนู Edit
                     2. เลือก Select All หรือ Ctrl +  A
                     3. ข้อความทั้งหมดจะถูกเลือก โดยเป็นแถบสีดำคลุมข้อความ

                   หมายเหตถ้าต้องการยกเลิกการเลือกเอกสาร ทำได้โดยคลิกพื้นที่ว่างบนหน้าเว็บเพจ


            2. การตกแต่งและจัดรูปแบบของข้อความ

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


                     1. เลือกข้อความที่ต้องการตกแต่งหรือจัดรูปแบบของข้อความ
                     2. เครื่องมือสำหรับจัดรูปแบบข้อความใน 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> คุณสมบัติที่กำหนดจะมีผลต่อข้อความที่เลือกทันที
                                         - ถ้าเลือก <New CSS Rule> จะเป็นการสร้าง CSS ใหม่ ซึ่งสามารถนำไปใช้ซ้ำได้ มีวิธีการดังนี้


                     1. เลือกข้อความ
                     2. ช่อง Targeted Rule เลือก <New CSS Rule>
                     3. ตกแต่งหรือจัดรูปแบบตาม หมายเลข 3-8 (กรณีนี้ สาธิตการกำหนดสีของตัวอักษร)


                     4. ช่อง Selector Name ให้พิมพ์ชื่อที่เราต้องการสร้างเป็น CSS
                     5. ช่อง Rule Definition เลือก (This document only) เพื่อกำหนดเฉพาะข้อความที่เลือกไว้
                     6. คลิกที่ปุ่ม OK เพื่อบันทึก
                     7. ผลจากการจัดรูปแบบด้วย CSS



การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ

            การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ เช่น สกุลเงิน หรือสัญลักษณ์แสดงลิขสิทธิ์ต่าง ๆ มีวิธีการดังนี้

                     1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางสัญลักษณ์
                     2. คลิกที่เมนู Window แล้วเลือก Insert (สังเกตต้องมีเครื่องหมายถูก อยู่ด้านหน้า Insert)
                     3. Insert Panel เลือก Text
                     4. คลิกที่ปุ่ม Characters แล้วเลือกสัญลักษณ์ที่ต้องการ


การนำเอกสารอื่นมาใช้ร่วมกับ Dreamweaver CS6

              Adobe Dreamweaver CS6 สามารถนำข้อมูลจากโปรแกรมอื่น ๆ เช่น Microsoft Word , Excel , PowerPoint มีวิธีการดังนี้

                1. การใช้ Import


                  1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการนำเข้าไฟล์เอกสาร


                  2. คลิกที่เมนู File
                  3. คลิกที่ Import แล้วเลือกประเภทไฟล์นำเข้า (กรณีนี้ เลือกเป็นไฟล์ Word)


                  4. เลือกโฟลเดอร์ที่อยู่ของไฟล์เอกสาร
                  5. เลือกไฟล์ที่ต้องการ
                  6. คลิกที่ปุ่ม Open
                  7. รายละเอียดของไฟล์ทั้งหมด (ทั้งข้อความและภาพ) จะถูกนำเข้ามาในเว็บเพจ ดังรูป

 


                2. การคัดลอกข้อมูลจากไฟล์เอกสาร


                  1. เปิดไฟล์เอกสารที่ต้องการ แล้วเลือกข้อความหรือเนื้อหาที่ต้องการคัดลอก จากนั้นให้คัดลอก หรือกดปุ่ม Ctrl + C


                  2. นำเนื้อหาที่คัดลอกวางลงในโปรแกรม Adobe Dreamweaver โดยคลิกเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางข้อความ จากนั้นคลิกที่เมนู Edit เลือก Pate หรือกดปุ่ม Ctrl + V
                  3. จะได้เนื้อหาตามที่ต้องการ (ทั้งข้อความและรูปภาพ)

 



----------------------------------------------------


เริ่มต้นใส่ข้อความ / การตกแต่งและจัดรูปแบบให้ข้อความ
การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ / การนำเอกสารอื่นมาใช้ร่วมกับ Dreamweaver CS6