Suan Dusit Rajabhat University Other titles

Document Sample
Suan Dusit Rajabhat University Other titles Powered By Docstoc
					               ้
การพัฒนาเว็บเบืองต้ นด้ วย
Macromedia Dreamweaver
               โดย
                          ่
      อาจารย์ กฤติเมธ โอพัง
• ทาความรู้ จกเว็บไซต์
              ั
• ขั้นตอนในการพัฒนา website
• การจัดการเกียวกับเว็บเพจ
                ่
• การใส่ ตัวอักษร
• การใส่ ภาพ
• การใส่ flash
• การสร้ างลิงก์
             ้
     มาทาความรู้จักกับเว็บไซต์
• 1 เว็บไซต์ ประกอบด้ วย หลายเว็บเพจ
• 1 เว็บเพจ คือ ไฟล์ เอกสาร HTML 1 ไฟล์
  HTML (Hypertext Markup Language)
• ใน 1 เว็บไซต์ จะมี หน้ าหลัก 1
  หน้ าเรียกว่ า โฮมเพจ (Homepage)
• 1 ไฟล์ html มีการใส่ รูปภาพ
           ่             ่
  ภาพเคลือนไหว และอืนๆ อีก
  มากมาย
  webpage      webpage      webpage
(index.htm)   (king.htm)   (map.htm)
    …….          …….         …….
    …….          …….         …….
                                       ........



              website
    งานเว็บไซต์ ของนักศึกษา
งานกล่ ุม : พัฒนาเว็บไซต์ เนื่องในวโรกาส
 ที่ในหลวงของเราครองราชย์ ครบ 60 ปี
      ่              ่
งานเดียว : หน้ าจอเกียวกับการใช้ IT ของ
 นักศึกษาในมหาวิทยาลัยราชภัฏสวน
 ดุสิต
ลักษณะของเว็บที่ต้องพัฒนา
• ในงานกล่ มต้ องพัฒนาหน้ าหลัก
           ุ
  (Homepage) ในวโรกาสครองราชย์
                               ่
  60 ปี และลิงก์ไปยังเว็บเพจเกียวกับ
  การทรงงานของในหลวงด้ านต่ างๆ
  จานวน 10 เว็บเพจ (ตามจานวนสมาชิก)
• จากหน้ าหลักให้ สร้ างลิงก์ ไปยังหน้ า
                          ้
  สมาชิกกล่ ุม ซึ่งประกอบด้ วยรูปภาพ
  ของสมาชิกกล่ ม  ุ
• จากหน้ าสมาชิกกล่ ุม ให้ สร้ างลิงก์ จาก
                                   ้
  รูปภาพของแต่ ละคนไปยัง เว็บไซต์
     ่
  เดียวของสมาชิกแต่ ละคน
             หน้ าการทรงงาน              10 หน้ า
              ของในหลวง
                 ด้ านต่ างๆ
                                ......
 หน้ าหลัก
Homepage



             หน้ าสมาชิกกลุ่ม            10 หน้ า
                                ......
ข้ อควรรู้ในการทาเว็บไซต์
                    ่
ข้ อมูลและรูปภาพทีนามา
ประกอบการทาเว็บไซต์ ต้องบอก
แหล่ งอ้ างอิงด้ วย
    ขั้นตอนในการพัฒนาเว็บไซต์
• เตรียมข้ อมูล
• ออกแบบเว็บเพจ
• พัฒนา
• อัพโหลด file ไปยัง remote site
    เริ่มต้ นการใช้ งาน
Macromedia Dreamweaver
                  ่
       ความรู้ เกียวกับไซต์
1. Local site คือ การสร้ าง folder เพือ ่
   เก็บไฟล์ งานต่ างๆ ไว้ ในเครื่องของเรา
2. Remote site คือ การเก็บไฟล์ งานไว้ ที่
   เครื่อง web server
                เป็ นสัญญาณ Analog
    Remote site เช่ น
    web server ของ มสด.   สายโทรศัพท์
                          เป็ นสัญญาณ Analog
                                                                 Server ของ ISP
                                                                          โมเด็มขอ

                                                                              ้
                                                     เครื่ องคอมพิวเตอร์ ของผูใช้ เป็ นส

                    อัพโหลด
              Local site เช่ น
               โมเด็มของผูใช้้
              C:\MyDocument\king_website
                                     ้
                          โมเด็มของผูใช้

                ้
อมพิวเตอร์ ของผูใช้ เป็ นสัญญาณ digital
                           ้
  เครื่ องคอมพิวเตอร์ ของผูใช้ เป็ นสัญญาณ digital
การสร้ าง local site
Local Site
เริ่มต้ นการสร้ างเว็บเพจ
เริ่มต้ นด้ วยการ save file ก่ อนเลย
หลักการตั้งชื่อไฟล์
• หน้ าแรก หรือ homepage ควรตั้งชื่อเป็ น
  – home.htm
  – index.htm
  – default.htm
       หลักการตั้งชื่อไฟล์ (ต่ อ)
• ชื่อไฟล์ต้องเป็ นตัวอักษรภาษาอังกฤษ
  ตัวพิมพ์เล็กเท่ านั้น ใช้ เลข 0-9 ประกอบได้
• ชื่อไฟล์ห้ามมีเว้ นว่ างระหว่ างชื่อ (space)
  ควรใช้ ขีดล่ าง (_) หรือขีดกลาง (-) ถ้ า
  ต้ องการแบ่ งชื่อไฟล์ เช่ น king_work.htm
    หลักการตั้งชื่อไฟล์ (ต่ อ)
•ห้ ามใช้ ตัวอักขระพิเศษ เช่ น % * >
 < / , ในการตั้งชื่อไฟล์
•หลีกเลียงการขึนชื่อไฟล์ ด้วยตัวเลข
          ่         ้
•ตั้งชื่อไฟล์ ส้ั นแต่ ได้ ใจความ
                                แถบเครื่องมือ

แบบการทางาน
                        หน้ าต่ างออกแบบ

                      ิ
              คุณสมบัตของเครื่องมือทีเ่ ลือกใช้
สร้ าง link                                 ่
                                 แทรกสื่ ออืนๆ
สร้ าง link          แทรกตาราง
ไปจดหมาย
                            แทรกรูปภาพ
        สร้ าง link
        ในหน้ าเดียวกัน
   √
มุมมองออกแบบ
มุมมองภาษา HTML
ภาษา HTML

มุมมองออกแบบ
          หัวข้ อในวันนี้
• การจัดการเกียวกับหน้ าเอกสาร (webpage)
                  ่
• การจัดการเกียวกับตัวอักษร
                    ่
• การใส่ ตาราง
• การใส่ สื่อต่ างๆ
• การสร้ างลิงก์
             ้
• การสร้ าง layer
• การทาให้ search engine ค้ นหา
  เว็บไซต์ เราเจอ
       กาหนดส่ งเว็บไซต์
วัน ....... เดือน .......... พ.ศ. ........
                  ั
 ส่งเป็ น URL ให้กบ
           ู้
 อาจารย์ผคุมตอนเรี ยน
     การจัดการกับหน้ า (webpage)

    ๊            ่
คลิกเม๊ าส์ ขวาทีหน้ าออกแบบ
เลือก Page Properties
       ่
การเปลียนขนาดตัวอักษร
       ่
การเปลียนสี ตัวอักษร
       ่     ื้
การเปลียนสี พนหลัง
       ่ ้
การเปลียนพืนหลังให้ เป็ นรูปภาพ
                ั
การใส่ ชื่อให้ กบเว็บเพจ (webpage)
•Background color
•Background image
            ่
การจัดการเกียวกับ อักษรภาษาไทย
เลือก Thai (Windows)
  ข้ อควรรู้ สาหรับภาษาไทย
• ถ้ าใช้ Dream Weaver MX ต้ องลง
  Thai Addon สาหรับภาษาไทยด้ วย
• ถ้ าใช้ Dreamweaver 8.0 (2006) ไม่
  ต้ องลง Thai Addon
การใส่ ตัวอักษรในหน้ าออกแบบ
                             ้
สามารถพิมพ์ตัวอักษรลงใน พืนที่ว่าง
ในส่ วนของ design view ได้ เลย
        ั
การใส่ ตวอักษร
คุณสมบัติของตัวอักษร
     การใส่ ตาราง (Table)
•เลือกรูปตาราง ทีแถบเครื่องมือ
                 ่
                       ้
เว้ นระยะระหว่ างเนือหากับขอบตาราง
เว้ นช่ องว่ างระหว่ าง cell ในตาราง
•Table
คุณสมบัติของตาราง
 การใส่ สื่อต่ างๆ ใน webpage
• รูปภาพ
• Flash
                      ้
ควรนาไฟล์ สื่อเหล่ านีไปจัดเก็บใน
local site ก่ อนนะคะ
 การใส่ รูปภาพในเวบเพจ
                 ี่
เลือกรูปต้ นไม้ ทแถบเครื่องมือ
•image
        ิ
คุณสมบัตของรูปภาพ
crop (ตัดภาพ)
  brightness+contrase
  ความสว่ าง และความเข้ มของสี
                  sharpen (ความคมชัด
crop (ตัดภาพ)
brightness+contrase
ความสว่าง และความเข้มของสี
sharpen (ความคมชัด
   การใส่ ไฟล์ flash
•Flash
        ิ
คุณสมบัตของ flash
การ Preview ดูเว็บเพจผ่ าน
       web browser
 ทาได้ ด้วยการ กดป่ ุม F12
      การสร้ างการเชื่อมโยง
          (hyper link)
•การลิงก์ จากตัวอักษร
        ้
•การลิงก์ จากจากรูปภาพ
          ้
•การลิงก์ ไปยัง อีเมล
      ้
•การลิงก์ ไปเอกสารในหน้ า
      ้
 เดียวกัน
•การลิงก์ จากรูปภาพ
        ้
•Link
             ้
  เราสร้ างลิงก์ ไปไหนได้ บ้าง?
     ้              ื่
1. ลิงก์ ไปยังไฟล์ อนๆ ใน website
   ของเรา
       ้                 ่
2. ลิงก์ ไปยัง website อืนๆ
                         ้
การกาหนดสี และรูปแบบของลิงก์
   ๊
คลิกขวา เลือก
Page properties
                ้
  1. การสร้ างลิงก์ จากตัวอักษร
1. พิมพ์ข้อความที่ต้องการเชื่อมโยง
2. ทาการ hilight ข้ อความที่ต้องการ
   เชื่อมโยง
3. เลือกไฟล์ ที่ต้องการเชื่อมโยง
  ้
ลิงก์ ไฟล์ ในเว็บเดียวกัน
     ้
   ลิงก์ ไปยังเว็บไซต์ ข้างนอก



                      ้
พิมพ์ URL ที่ต้องการลิงก์ ลงไป
               ้
 2. การสร้ างลิงก์ จากรูปภาพ
       ๊            ่         ้
1. คลิกเลือกรูปภาพทีต้องการลิงก์
2. เลือกไฟล์ หรือ URL ที่ต้องการ
     ้
   ลิงก์ ไปถึง
                         ้
ใส่ ชื่อไฟล์ ที่ต้องการลิง หรือ
                             ้
ใส่ ชื่อเว็บไซต์ ที่ต้องการลิงก์ ไป
                ้
  3. การสร้ างลิงก์ ไปยังอีเมล
                            ้
1. พิมพ์ข้อความที่ต้องการลิงก์
                               ้
2. Hilight ข้ อความที่ต้องการลิง
      ๊
3. คลิกรูปซองจดหมายทีแถบ  ่
   เครื่องมือ
        ้
4. การลิงก์ ไปเอกสารในหน้ าเดียวกัน
ตัวอย่างการลิ้งก์ในหน้าเดียวกัน
ต้ นทาง
 •.
 •.
 •.




ปลายทาง
                         ้
  1. การกาหนดปลายทางของลิงก์
            (Target)
• Hilight เลือกส่ วนที่การให้ ลงก์
                               ิ้
• เลือก Named anchor ที่แถบ
  เครื่องมือ
• ใส่ ชื่อ anchor
                         ้
2. กาหนดต้ นทางของลิงก์ (Source)
                              ้
1. Hilight ต้ นทางที่ต้องการลิงก์
2. ใส่ เครื่องหมาย # ตามด้ วยชื่อของ
   anchor
              ้
5. การสร้ างลิงก์ โดยใช้ จากส่ วนต่ างๆ
           ของภาพ (map)
 คือ การสร้ างสิ้งก์ จากส่ วนหนึ่ง
 ส่ วนใดของรูปภาพ โดยใช้ การ
 map
ตัวอย่าง การสร้าง map
                  ้
   วิธีการสร้ างลิงแบบ map
               ่              ้
1. ใส่ รูปภาพทีต้องการสร้ างลิงก์
       ๊ ่
2. คลิกทีรูปภาพ
3. เลือกเครื่องมือ map จากคุณสมบัติ
   ของรูปภาพ
             ้                    ้
4. กาหนดพืนที่ที่ต้องการสร้ างลิงก์
                                ้
5. ใส่ ไฟล์หรือส่ วนที่ต้องการลิงก์ ลง
  • ลิงในไฟล์ เดียวกัน
      ้
  • ลิงก์ ไปไฟล์ อน
          ้       ื่
  • ลิงออกเว็บไซต์ ข้างนอก
        ้
          Layer
Layer เปรียบเสมือนแผ่ นใส่ ที่
สามารถนามาวางเรียงซ้ อนกันได้
       layer
     Layer 2

Layer 1
        วิธีการสร้ าง layer
   ่
 ทีแถบเครื่องมือ ให้ เลือก Layout



เลือก draw layer
• สถานะของเม๊ าส์ จะเปลียนจะ
                        ่
        ่
  เปลียนเป็ น +
• นามากาหนดพืนที่วาดกรอบ
                   ้
          ่
  สี่ เหลียมในส่ วนออกแบบ
        ิ
คุณสมบัตของ layer
สิ่ งที่สามารถนามาใส่ ใน layer
1.   ข้ อความ
2.   ตาราง
3.   รูปภาพ
4.          ่
     สื่ ออืนๆ
      การทาให้ search engine
       หาเว็บไซต์ ของเราเจอ
(SEO: Search Engine Optimization )
1. การใส่ title ของเว็บเพจ
2. การจัดการ Meta tag
3. การ add URL
1. การใส่ title ของเว็บเพจ
2. การจัดการ Meta tag
จัดการในไฟล์ หน้ าแรก
(Homepage)
มุมมองภาษา HTML
   จัดการในส่ วนของ Meta tag
<HEAD>
<TITLE>ชื่อ title</TITLE>
<META NAME="DESCRIPTION" CONTENT=“คาอธิบายเว็บ
สั้ นๆ”>
                                          ้
<META NAME="KEYWORDS" CONTENT=“keyword ขึนด้ วย ,
และห้ ามมีเว้ นวรรค”>
</HEAD>
                      ที่ code view
<HEAD>
<TITLE>ในหลวงของฉัน เนื่องในวโรกาสทรงครองราชย์ ครบ 60 ปี </TITLE>
<META NAME="DESCRIPTION" CONTENT=“ในหลวงของฉัน เนื่องใน
   วโรกาสทรงครองราชย์ ครบ 60 ปี ”>
<META NAME="KEYWORDS" CONTENT=“ในหลวง,ครองราชย์ 60 ปี ,
   รัชกาลที่9">
</HEAD>
         3.Add URL
http://www.google.com/addurl/

http://webindex.narak.com/addurl.shtml

http://www.nationaldirectory.com/addurl/

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:9/14/2012
language:Thai
pages:131