SlideShare a Scribd company logo
รออกแบบเว็บไซต์
                                      Introduction to Web design

สิ่งที่จะได้ จากหลักสู ตร
     - สามารถใช้งานกราฟิ ก ออกแบบเว็บไซต์ได้อย่างสวยงาม
     - สามารถเขียนเว็บไซต์และนาเสนอในรู ปแบบของเว็บไซต์ได้
     - มีความรู้ และความเข้าใจเรื่ องระบบอินเทอร์เน็ต และ การดูแลเว็บไซต์
     - ได้รับใบประกาศนียบัตรจากกระทรวงศึกษาธิการ
     - มี portfolio ของตนเอง
หลักสู ตร
     - เวลาที่ใช้ในหลักสูตร 36 ชัวโมง เต็ม
                                   ่
     - โปรแกรมที่ใช้ประกอบการเรี ยน
     - Adobe Photoshop CS3
     - Adobe Dreamweaver CS3
พืนฐานการออกแบบเว็บไซต์
                                        ้
                                           (Basic Web Design)
                                   ความร้ เบืองต้นเกียวกับเว็บเทคโนโลยี
                                             ้       ่
Outline
   - ความรู้เบือ ้ งต้นการใช้งานอินเทอร์เน็ต
   - หลักการในการออกแบบเว็บไซต์
   - เข้าใจกระบวนการสร้างเว็บไซต์ และ การทางานร่ วมกันระหว่างโปรแกรมต่างๆ

โปรแกรมทีใช้ ประกอบการเรียน
          ่
   - Dreamweaver CS3
   - ความสามารถของโปรแกรม และองค์ประกอบต่างๆของโปรแกรม
   - การตั้งค่าโปรแกรมให้เหมาะสมกับการใช้งาน ภาษาไทย
   - การใช้เครื่ องมือของโปรแกรม ขั้นพื้นฐานในการออกแบบโครงสร้างเว็บไซต์
   - การจัดรู ปแบบเว็บไซต์ ด้วย CSS Style
   - การทางานร่ วมกับ Graphic Animation และ ไฟล์
Multimedia ต่างๆ
   - การจัดการกับเว็บเพจระดับสูงด้วย template

โปรแกรมทีใช้ ประกอบการเรียน
           ่
   - Photoshop CS3
   - ความสามารถของโปรแกรม และองค์ประกอบต่างๆของโปรแกรม
   - การใช้เครื่ องมือต่างๆในการสร้างภาพกราฟิ ก
   - เริ่ มต้นการออกแบบเว็บไซต์
   - การเตรี ยมภาพที่เหมาะสมสาาหรับเว็บไซต์ ให้ใช้งานร่ วมกับ HTML ได้
   - การตรวจสอบความเรี ยบร้อยของงานออกแบบ
การจัดเตรียมเว็บไซต์ขึน้ สู่ อนเตอร์ เน็ต
                              ิ
   - การจัดเตรี ยมเว็บโฮสติง้ Hosting
   - การจดทะเบียนโดเมนเนม Domain Name
   - การนาเว็บไซต์และข้อมูลขึน้ สู่อินเตอร์เน็ต
   - รู้จกโปรแกรม FTP และ Remote
           ั
   - การบริ หารจัดการเว็บไซต์ดวยระบบ Admin
                                      ้
        การดูแลระบบเว็บไซต์และการประชาสัมพันธ์ เว็บไซต์
   - สิ่งที่เว็บมาสเตอร์ควรรู้
   - การลงทะเบียนเว็บไซต์ของเราให้ search engine รู้จกั
   - การใช้เครื่ องมือในการวิเคราะห์เว็บไซต์
   - การประชาสัมพันธ์เว็บไซต์แบบต่างๆ
   - หลักการในการวิเคราะห์และวางแผนการตลาด
   - เครื่ องมือใช้การทาการตลาดบนเว็บไซต์
   - การทา Search engine optimization (SEO) เบื้องต้น

มีอะไรใหม่
Dreamweaver CS3 มีอะไรใหม่
    - Spry
    - Spry Menu Bar
    - Spry Tabbed Panels
    - New Layout Mode
    - Multimedia Suppor
    - Spry Form
    - Properties
    - Browsers Support
    - Full CSS Support
    - Flash Menu
มีอะไรใหม่
Photoshop CS3 มีอะไรใหม่
    - User Interface
    - Single Column Toolbar
    - Free Palette
    - Camera Raw
    - Printing Done Right
    - Black and White
    - Auto Align, Auto Blend
    - New Bridge
    - Fill Light Slider
    - Vibrance Slider
    - Quick Selection Tool
    - Refine Edge floating
Palette
    - Mo Better Curves
    - Clipping Warning, In-
Dialog Histogram
    - Loupe
    - Smart Filte
    - Cloning, Healing
         Clone Source
Website Technology Introduction
                                         พืน้ ฐานของเทคโนโลยีเว็บไซต์
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
           ้
      - เว็บเทคโนโลยี (Web Technology)
      - โปรโตคอล (Protocol) ข้อตกลงกันระหว่าง 2 ฝ่ ายที่ให้เครื่ อง
คอมพิวเตอร์ สามารถสื่อสารกันได้อย่างถูกต้อง
      - บริ การเว็บจะทางานภายใต้ โปรโตคอล HTTP
      - โปรโตคอลจะเป็ นตัวกาหนดวิธีการส่งข้อมูลหรื อไฟล์ ระหว่าง เครื่ องคอมพิวเตอร์ที่เป็ น Client และ
          Server รวมถึงการกาหนด กฏระเบียบในการติดต่อด้วย เราจะใช้โปรแกรมประเภท Browser เป็ น
          ตัวช่วยในการติดต่อสื่อสาร
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
             ้
      - TCP ย่อมาจาก Transmission Control Protocol เป็ น
โพรโตคอลที่ควบคุมการส่งข้อมูลโดยอาศัย IP
      - IP Address เปรี ยบเสมือนบ้านเลขที่ นันก็คือหมายเลข
                                               ่
ของเครื่ อง Computer ที่อยูใน Network
                               ่
      - IP v.4 : 202.44.47.20 => 255.255.255.255
      - IP local host : 192.168.0.1 IP Gateway : xxx.xxx.xxx.0
      - IP v.4 Vs. IP v.6
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
               ้
          อินเทอร์ เน็ต (Internet) หมายถึง การเชื่อมต่อเครื อข่าย
คอมพิวเตอร์เข้าด้วยกัน โดยมีขอกาหนดว่าทุกเครื อข่ายที่
                                   ้
เชื่อมต่อถึงกัน จะต้องอยูภายใต้มาตรฐานของการเชื่อมต่อ
                             ่
(โปรโตคอล) ที่ถกสร้างขึ้นมาเพื่อใช้งานบนเครื อข่ายแบบนี้
                   ู
          โดยเฉพาะ ซึ่งเรี ยกว่า TCP/IP
     Server : Hosting เครื่ องให้บริ การใช้
สาหรับจัดเก็บ Web Application
     Client : PC, Notebook, PDA, Mobile
คอมพิวเตอร์หรื ออุปกรณ์ที่ตองการ ้
เข้าถึงข้อมูล
DNS server : เครื่ อง Server ทาหน้าที่
          จับคู่ IP/Domain Name
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
           ้
ข้ อมูลในเว็บจะอยูในรู ปแบบที่เรี ยกว่า Hypertext และทาการเชื่อมโยง(Links) ข้อความหรื อ รู ปภาพ เข้ากับ
                     ่
เอกสารอื่นๆ อย่างเป็ นอิสระต่อกัน
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
             ้
WWW (World Wide Web)
อาจเรี ยกสั้นๆ ว่า Web (เว็บ)
เปรี ยบเสมือนเป็ นห้องสมุด
ขนาดใหญ่ที่รวบรวมข้อมูลที่
มากที่สุดในโลกก็ว่าได้ สามารถ
ค้นหาข้อมูลที่ตองการได้เกือบ
                   ้
          ทุกอย่างจากบริ การเว็บ
ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต
               ้
 Website (เว็บไซต์) หากอินเตอร์เน็ตเป็ นห้องสมุดเว็บไซต์จะ
เปรี ยบเสมือนหนังสือหนึ่งเล่มในห้องสมุด
 โดยระบุชื่อหนังสือในลักษณะที่เรี ยกว่า URL : (อ่านว่า ยู อาร์
แอล)
 เช่น เว็บไซต์ของกระทรวงเทคโนโลยีสารสนเทศและการ
          สื่อสารมี URL หรื อมีชื่อเป็ น www.mict.go.th
 เว็บเพจ (Web Page) และโฮมเพจ (Home Page)
ถ้าเว็บไซต์ คือ หนังสือหนึ่งเล่ม
     - เว็บเพจ คือ หน้ากระดาษต่างๆ ที่บรรจุเนื้อหาในหนังสือเล่มนั้น
     - โฮมเพจ คือ ปกหน้าของหนังสือ เมื่อเริ่ มเปิ ดโปรแกรม Web
          Browser โปรแกรมจะนาเข้าสู่หน้าแรกของเว็บโดยอัตโนมัติ
โปรแกรมเว็บบราวเซอร์ (Web
Browser) โปรแกรมเว็บบราวเซอร์
เป็ นตัวกลางที่จะทาหน้าที่แปลงคาสัง      ่
ให้ออกมาเป็ นรู ปภาพ เสียง และข้อมูล
ต่างๆ
  บราวเซอร์ที่ผใช้นิยมใช้กนก็จะมี
                  ู้           ั
โปรแกรม Internet Explorer, Mozilla
           Firefox, Chrome และ Safari
  DNS : Domain Name System คือ ระบบการตั้งชื่อบนอินเทอร์เน็ต
ทรัพยากรบนอินเทอร์เน็ต
  หมายเลขประจาเครื่ องคอมพิวเตอร์เรี ยกว่า IP การที่จะจดจาหมายเลขประจา
เครื่ องนั้นทาได้ยาก จึงมีวิธีการตั้งชื่อให้จดจาและใช้งานง่าย ระบบชื่อจึงถูก
กาหนดให้เป็ นมาตรฐาน
       - โดยแบ่งตามลาดับขั้นตามสภาพภูมิศาสตร์
       - ประเทศ
       - ประเภทขององค์กร
       - ชื่อองค์กร
เช่น www.artanddesign.ac.th “th” คือ ชื่อประเทศไทย ac คือ ประเภทองค์กร
           artanddesign คือ ชื่อองค์กร
Domain ที่นิยมใช้ กนอยู่ในปัจจุบน เช่น
                      ั              ั
.com = กลุ่มธุรกิจการค้า (Commercial)
.edu = กลุ่มการศึกษา (Education)
.gov = กลุ่มองค์กรรัฐบาล (Government)
.org = หน่วยงานที่ไม่หวังผลกาไร (Non-Commercial
           organizations)
Domain Name ชื่อย่อของประเทศ เช่ น
.th = Thailand
.hk = Hong Kong
.jp = Japan
.sg = Singapore
ความหมายของ Sub Domain เช่น
.co = องค์การธุรกิจ (Commercial)
.ac = สถาบันการศึกษา (Academic)
.go = หน่วยงานรัฐบาล (Government)
.or = องค์กรอื่น ๆ (Organizations)
.net 1 ปี 600 บาท
.com 1 ปี 600 บาท
.org 1 ปี 600 บาท
.info 1 ปี 600 บาท
.biz 1 ปี 600 บาท
.th 1 ปี 800 บาท
.asia 1 ปี 850 บาท
.uk 1 ปี 1,000 บาท
.ca 1 ปี 1,050 บาท ป .de 1 ปี 600 บาท
.eu 1 ปี 600 บาท
.mobi 1 ปี 700 บาท
.be 1 ปี 750 บาท
.es 1 ปี 750 บาท
.at 1 ปี 1,500 บาท
.cc 1 ปี 2,250 บาท
.cn 1 ปี 2,600 บาท
.tv 1 ปี 2,600 บาท
.ch 1 ปี 3,000 บาท
Web 2.0 ก็คือ พัฒนาการของการพัฒนาเว็บไซต์ที่เน้นความร่ วมมือ
(Collaboration) ที่การจัดการเนื้อหาเว็บไม่ตองผูกขาดที่เว็บมาสเตอร์แต่
                                               ้
                             ี ิ
เพียงผูเ้ ดียว ผูใช้ ผูชมก็มสิทธ์ร่ วมสร้างสรรค์ แก้ไขเนื้อหาในเว็บไซต์ได้
                 ้ ้
(หากได้รับสิทธ์)ิ
   ตัวอย่างของการประยุกต์ใช้เทคโนโลยี Web 2.0 ในปัจจุบนก็คือ การ
                                                               ั
เขียนเนื้อหา เล่าเรื่ อง หรื อติชมต่างๆ ผ่าน Blog ซึ่งมีจานวนสูงมากขึ้นมา
ปัจจุบน หรื อการร่ วมกันเขียนบทความในเชิงสารานุกรมผ่านเว็บไซต์วกิ
       ั                                                                ิ
พีเพีย (http://th.wikipedia.org)
     W3C.org เป็ นหน่วยงานผูกาหนดมาตรฐานเทคโนโลยีเว็บไซต์
                                   ้
HTML ย่อมาจาก Hyper Text Markup Language เป็ นภาษาที่
ใช้ในการพัฒนาเว็บเพจเพื่อให้โปรแกรมเว็บบราวเซอร์ (Web
Browser) ต่างๆ สามารถแสดงผลได้ถกต้อง      ู
HTML ซึ่งเป็ นข้อความ Text กับรหัสที่อยูในเครื่ องหมาย < >
                                             ่
และมีนามสกุลเป็ น .html โดยเมื่อเราอ่านผ่านโปรแกรมเว็บ
บราวเซอร์ รหัสเหล่านี้จะถูกแปลเป็ นลักษณะของการแสดงผลที่
หน้าจอ
เราจะเห็นรู ปแบบที่สมบูรณ์ผานการแปลความหมายแล้วโดย
                                 ่
            บราวเซอร์ (Web Browser)
สาหรับการสร้างไฟล์ HTML
จะต้องอาศัยโปรแกรมที่มีคุณสมบัติเป็ น Text Editor เช่น Notepad,
Edit Plus
 ไฟล์โดยจะต้องมีนามสกุลเป็ น .html
 ทดสอบไฟล์ในโปรแกรมเว็บบราวเซอร์ต่อไป
โปรแกรมสาหรับช่วยในการเขียน HTML
 Microsoft Frontpage
 Adobe Dreamweaver CS (Macromedia Dreamweaver)
HTML
เอกสาร HTML เป็ นเอกสารที่ประกอบไปด้วยข้อมูลที่เราต้องการเผยแพร่ ผาน       ่
WWW และ ภาษา HTML ที่ใช้กาหนดการแสดงผลของข้อมูลดังกล่าว
ภาษา HTML เป็ นภาษาที่อยูในรู ปของ แท๊ก (Tag) ที่ใช้ห่อหุมข้อมูลที่เราต้องการ
                                                           ้
เผยแพร่ ผาน WWW ซึ่งการแสดงผลของเอกสาร HTML เราสามารถที่จะดูได้โดย
            ่
           ใช้โปรแกรมที่เรี ยกว่า เว็บ บราวเซอร์ (Web Browser)
โครงสร้างของภาษา HTML จะประกอบไปด้วย 3 ส่วน ดังนี้
   ส่วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้นสุดของเอกสาร คือ แท๊ก
<html></html>
ส่วนหัวของเอกสาร HTML คือ แท๊ก <head></head> ซึ่งเราจะแสดง
หัวเรื่ องของ เอกสาร HTML ไว้ในส่วนนี้
ส่วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้นสุดของเนื้อหา คือ แท๊ก
           <body></body>

Create Website
สร้างเว็บไซด์ดวย Web Application Packet
                ้
เว็บสาเร็ จรู ป
สร้างเว็บไซด์ดวยโปรแกรมกราฟฟิ ก
                  ้
 Photoshop
 Flash
สร้างเว็บไซด์ดวยโปรแกรมมิง
                    ้
 HTML
 JavaScript
 PHP
 .Net
Page Size
ขนาดหน้าของเว็บเพจที่นิยมใช้ในปัจจุบนมี 2 ขนาด คือ
                                      ั
 ระยะปลอดภัย ขนาด 800X600 pixels จะสามารถแสดงหน้าเว็บได้
ครบถ้วนกับหน้าจอที่มีขนาด 15 นิ้วขึ้นไป
 นิยมใช้งาน ขนาด 1024X 768 pixels เป็ นขนาดของหน้าเว็บเพจที่
          นิยมมากที่สุดในปัจจุบน เพราะสามารถแสดงข้อมูลของเว็บได้มากขึ้นและง่ายต่อการออกแบบด้วย
                               ั
ส่ วนประกอบของเว็บ




โลโก้ (Logo)




ส่ วนหัวของเว็บเพจ
(Page Header)
ส่ วนที่ใช้ แสดงเนือหาของเว็บ (Page Body)
                   ้




เมนูหลัก (Link Menu)




ส่ วนล่างสุดของเล็บไซด์ (Page Footer)




ช่ องทางการโฆษณาของเว็บ ไซด์ (Banner)




ขั้นตอนในการพัฒนาเว็บไซต์
1 • เตรี ยมเนื้อหาที่จะนาเสนอ
2 • ออกแบบหน้าตาของเว็บไซต์
3 • เขียนและทดสอบ
4 • ลงทะเบียนชื่อเว็บไซต์และจัดหาพื้นที่เก็บข้อมูล
5 • Upload เว็บไซต์และตรวจสอบความเรี ยบร้อย
6 • ประกาศให้โลกรับรู้
ขั้นตอนในการพัฒนาเว็บไซต์
 เตรียมเนือหาที่จะนาเสนอ
          ้
 กาหนดเป้ าหมาย ( Target ) : จะทาเว็บไซต์เกี่ยวกับเรื่ องอะไรและ
เนื้อหาต่างๆ
 ทาให้ใคร (Visitor) : ผูชมเว็บคือใคร อยูที่ไหน ภาษา วัฒนธรรม
                        ้               ่
 กาหนดกรอบแนวคิด (Concept) : ระเบียบความคิดสู่เป้ าหมาย
 Technology : เลือกเทคโนโลยี
 รวบรวมข้อมูล (Search) : รวบรวมวัตถุดิบ
จัดเตรี ยมทรัพยากร(Resource) : ซึ่งหมายถึง ข้อความ,
ภาพประกอบ, เสียง และอื่น ๆ ให้เป็ นหมวดหมู่

ออกแบบหน้ าตาของเว็บไซต์
 Concept to Concept Design : นาแนวคิดที่วางไว้มา
ออกแบบเว็บไซต์
• Theme : “แนว” ไหน?
• Layout : เค้าโครงแบบไหน?
• Color : โทนสี? กี่สี่? สีสน อะไรบ้าง?
                            ั
• Font : ข้อความ ชนิด ขนาด สี

ร่ างรูปแบบเค้าโครงของเว็บไซต์
LOGO
Homepage | New | Product | About us | Member
list menu
list menu
list menu
list menu
Content Content
Homepage | New | Product | About us | Member
Web Structure โครงสร้ างของเว็บไซต์




  ออกแบบหน้ าตาของเว็บไซต์




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

นาเว็บไซต์ที่สร้ างขึน Upload ขึน Server และตรวจสอบความเรียบร้ อย
                     ้           ้
คือ การคัดลอกข้อมูล จากเครื่ องของเราไปเก็บไว้ในเครื่ อง Server
ซึ่งการคัดลอกนี้เรี ยกว่า Upload โดยใช้โปรแกรมสาหรับการUpload
เช่น โปรแกรม WinSCP, CuteFtp, WS_FTP (โปรแกรม
Dreamweaver มีความสามารถนี้อยูแล้ว)่

ลงทะเบียนชื่อเว็บไซต์และจัดหาพืนที่เก็บข้ อมูล
                                 ้
ตั้งชื่อเว็บไซต์ท่ีเหมาะสม
จัดหาพื้นที่ในการวางเว็บไซต์ เช่นเว็บโฮสติ้งต่างๆ
จัดหาและปรับแต่งสภาพแวดล้อมให้เหมาะสม เช่น ฐานข้อมูล

ประกาศให้โลกรับรู้
 เมื่อตรวจสอบความเรี ยบร้อยแล้ว ก็ถึงคราวที่จะชักชวนให้
ผูคนมาชมเว็บไซต์ โดยประชาสัมพันธ์ผานทางสื่อต่างๆ
  ้                                   ่
• แลก Link กับเว็บไซต์อื่นๆ
• ฝากข้อความชักชวนไว้ตามกระดานข่าวต่างๆ
• SEO : Search Engine Optimize

More Related Content

What's hot

ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-comkrittykrit
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-comajangkana
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-comthanischet
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 
20110201 drupal-ir
20110201 drupal-ir20110201 drupal-ir
20110201 drupal-ir
Boonlert Aroonpiboon
 
Web 2.0 & Social Networking
Web 2.0 & Social NetworkingWeb 2.0 & Social Networking
Web 2.0 & Social Networking
Boonlert Aroonpiboon
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
khon Kaen University
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2pom_2555
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 

What's hot (14)

ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-com
 
wordpress
wordpresswordpress
wordpress
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-com
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-com
 
20100803 wordpress-com
20100803 wordpress-com20100803 wordpress-com
20100803 wordpress-com
 
Wordpress com
Wordpress comWordpress com
Wordpress com
 
Chapter4
Chapter4Chapter4
Chapter4
 
20110201 drupal-ir
20110201 drupal-ir20110201 drupal-ir
20110201 drupal-ir
 
Web 2.0 & Social Networking
Web 2.0 & Social NetworkingWeb 2.0 & Social Networking
Web 2.0 & Social Networking
 
Webbasic
WebbasicWebbasic
Webbasic
 
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of EducationDesigning of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 

Viewers also liked

Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
Azkue Fundazioa
 
презентация команды клевер
презентация команды клеверпрезентация команды клевер
презентация команды клеверKlever98
 
Abstract edgar morin teoria etica e implicazioni pedagogiche
Abstract edgar morin teoria etica e implicazioni pedagogicheAbstract edgar morin teoria etica e implicazioni pedagogiche
Abstract edgar morin teoria etica e implicazioni pedagogicheGiorgio Cingari
 
Niri prez final
Niri prez finalNiri prez final
Niri prez final
NIRIRichmond
 
как открыть свой интернет магазин
как открыть свой интернет магазинкак открыть свой интернет магазин
как открыть свой интернет магазин
pers56
 
Chart Reading Presentation
Chart Reading PresentationChart Reading Presentation
Chart Reading Presentationzenonosense
 
Atos internacionais celebrados entre Brasil e França
Atos internacionais celebrados entre Brasil e FrançaAtos internacionais celebrados entre Brasil e França
Atos internacionais celebrados entre Brasil e França
Palácio do Planalto
 
Neptu
NeptuNeptu
Neptuma-hu
 
Introduction to nuclear weapons free zones by ghassan shahrour
Introduction to nuclear weapons free zones by ghassan shahrourIntroduction to nuclear weapons free zones by ghassan shahrour
Introduction to nuclear weapons free zones by ghassan shahrour
Ghassan Shahrour
 
單車安全騎乘講座
單車安全騎乘講座單車安全騎乘講座
單車安全騎乘講座
david0932
 
Сайт 2012
Сайт 2012Сайт 2012
Сайт 2012
Kirill Partala
 
Wirtén CSR seminarium
Wirtén CSR seminarium Wirtén CSR seminarium
Wirtén CSR seminarium
Wirtén Content Agency
 
Informática Educativa Um
Informática Educativa UmInformática Educativa Um
Informática Educativa Um
Talitha21
 
Taksonomi Evaluasi Pendidikan
Taksonomi Evaluasi PendidikanTaksonomi Evaluasi Pendidikan
Taksonomi Evaluasi Pendidikan
eryeryey
 
ソーシャルメディアマーケティング、6つの誤解
ソーシャルメディアマーケティング、6つの誤解ソーシャルメディアマーケティング、6つの誤解
ソーシャルメディアマーケティング、6つの誤解
Goro Kosaka
 
楊三郎美術館 新北市動畫館
楊三郎美術館  新北市動畫館楊三郎美術館  新北市動畫館
楊三郎美術館 新北市動畫館
2018fidelity-1
 
Reunião Pública 1T12
Reunião Pública 1T12Reunião Pública 1T12
Reunião Pública 1T12
Profarma
 

Viewers also liked (20)

Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
Teknologia berriak eta euskara. Eguneroko lanean erabiltzeko moduko tresna ba...
 
презентация команды клевер
презентация команды клеверпрезентация команды клевер
презентация команды клевер
 
Abstract edgar morin teoria etica e implicazioni pedagogiche
Abstract edgar morin teoria etica e implicazioni pedagogicheAbstract edgar morin teoria etica e implicazioni pedagogiche
Abstract edgar morin teoria etica e implicazioni pedagogiche
 
Śniadanie Daje Moc
Śniadanie Daje MocŚniadanie Daje Moc
Śniadanie Daje Moc
 
Niri prez final
Niri prez finalNiri prez final
Niri prez final
 
Euler
EulerEuler
Euler
 
как открыть свой интернет магазин
как открыть свой интернет магазинкак открыть свой интернет магазин
как открыть свой интернет магазин
 
Chart Reading Presentation
Chart Reading PresentationChart Reading Presentation
Chart Reading Presentation
 
Atos internacionais celebrados entre Brasil e França
Atos internacionais celebrados entre Brasil e FrançaAtos internacionais celebrados entre Brasil e França
Atos internacionais celebrados entre Brasil e França
 
Neptu
NeptuNeptu
Neptu
 
Introduction to nuclear weapons free zones by ghassan shahrour
Introduction to nuclear weapons free zones by ghassan shahrourIntroduction to nuclear weapons free zones by ghassan shahrour
Introduction to nuclear weapons free zones by ghassan shahrour
 
Latihan Bab 1
Latihan Bab 1Latihan Bab 1
Latihan Bab 1
 
單車安全騎乘講座
單車安全騎乘講座單車安全騎乘講座
單車安全騎乘講座
 
Сайт 2012
Сайт 2012Сайт 2012
Сайт 2012
 
Wirtén CSR seminarium
Wirtén CSR seminarium Wirtén CSR seminarium
Wirtén CSR seminarium
 
Informática Educativa Um
Informática Educativa UmInformática Educativa Um
Informática Educativa Um
 
Taksonomi Evaluasi Pendidikan
Taksonomi Evaluasi PendidikanTaksonomi Evaluasi Pendidikan
Taksonomi Evaluasi Pendidikan
 
ソーシャルメディアマーケティング、6つの誤解
ソーシャルメディアマーケティング、6つの誤解ソーシャルメディアマーケティング、6つの誤解
ソーシャルメディアマーケティング、6つの誤解
 
楊三郎美術館 新北市動畫館
楊三郎美術館  新北市動畫館楊三郎美術館  新北市動畫館
楊三郎美術館 新北市動畫館
 
Reunião Pública 1T12
Reunião Pública 1T12Reunião Pública 1T12
Reunião Pública 1T12
 

Similar to โบ

Php
PhpPhp
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตเขมิกา กุลาศรี
 
Web browser คืออะไร
Web browser คืออะไรWeb browser คืออะไร
Web browser คืออะไร
อนันต์ เสริมสุข
 
Unit2
Unit2Unit2
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บKhon Kaen University
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
Sutin Yotyavilai
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บanuchit025
 
Building ec
Building ecBuilding ec
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์Kittichai Pinlert
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์Kittichai Pinlert
 
e-Publishing
e-Publishinge-Publishing
e-Publishing
Boonlert Aroonpiboon
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Boonlert Aroonpiboon
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Boonlert Aroonpiboon
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
Satapon Yosakonkun
 
Web Accessibility Coding
Web Accessibility CodingWeb Accessibility Coding
Web Accessibility Coding
Boonlert Aroonpiboon
 

Similar to โบ (20)

Php
PhpPhp
Php
 
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ต
 
Web browser คืออะไร
Web browser คืออะไรWeb browser คืออะไร
Web browser คืออะไร
 
Unit2
Unit2Unit2
Unit2
 
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บการเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
 
Internet
InternetInternet
Internet
 
โปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บโปรแกรมประยุกต์บนเว็บ
โปรแกรมประยุกต์บนเว็บ
 
Building ec
Building ecBuilding ec
Building ec
 
Internet
InternetInternet
Internet
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
e-Publishing
e-Publishinge-Publishing
e-Publishing
 
Websitebasic
WebsitebasicWebsitebasic
Websitebasic
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
 
Web Accessibility Coding
Web Accessibility CodingWeb Accessibility Coding
Web Accessibility Coding
 
คอม2
คอม2คอม2
คอม2
 
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บเวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
 

More from sirinet

หมวย
หมวยหมวย
หมวยsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 

More from sirinet (6)

หมวย
หมวยหมวย
หมวย
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
Best
BestBest
Best
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 

โบ

  • 1. รออกแบบเว็บไซต์ Introduction to Web design สิ่งที่จะได้ จากหลักสู ตร - สามารถใช้งานกราฟิ ก ออกแบบเว็บไซต์ได้อย่างสวยงาม - สามารถเขียนเว็บไซต์และนาเสนอในรู ปแบบของเว็บไซต์ได้ - มีความรู้ และความเข้าใจเรื่ องระบบอินเทอร์เน็ต และ การดูแลเว็บไซต์ - ได้รับใบประกาศนียบัตรจากกระทรวงศึกษาธิการ - มี portfolio ของตนเอง หลักสู ตร - เวลาที่ใช้ในหลักสูตร 36 ชัวโมง เต็ม ่ - โปรแกรมที่ใช้ประกอบการเรี ยน - Adobe Photoshop CS3 - Adobe Dreamweaver CS3
  • 2. พืนฐานการออกแบบเว็บไซต์ ้ (Basic Web Design) ความร้ เบืองต้นเกียวกับเว็บเทคโนโลยี ้ ่ Outline - ความรู้เบือ ้ งต้นการใช้งานอินเทอร์เน็ต - หลักการในการออกแบบเว็บไซต์ - เข้าใจกระบวนการสร้างเว็บไซต์ และ การทางานร่ วมกันระหว่างโปรแกรมต่างๆ โปรแกรมทีใช้ ประกอบการเรียน ่ - Dreamweaver CS3 - ความสามารถของโปรแกรม และองค์ประกอบต่างๆของโปรแกรม - การตั้งค่าโปรแกรมให้เหมาะสมกับการใช้งาน ภาษาไทย - การใช้เครื่ องมือของโปรแกรม ขั้นพื้นฐานในการออกแบบโครงสร้างเว็บไซต์ - การจัดรู ปแบบเว็บไซต์ ด้วย CSS Style - การทางานร่ วมกับ Graphic Animation และ ไฟล์ Multimedia ต่างๆ - การจัดการกับเว็บเพจระดับสูงด้วย template โปรแกรมทีใช้ ประกอบการเรียน ่ - Photoshop CS3 - ความสามารถของโปรแกรม และองค์ประกอบต่างๆของโปรแกรม - การใช้เครื่ องมือต่างๆในการสร้างภาพกราฟิ ก - เริ่ มต้นการออกแบบเว็บไซต์ - การเตรี ยมภาพที่เหมาะสมสาาหรับเว็บไซต์ ให้ใช้งานร่ วมกับ HTML ได้ - การตรวจสอบความเรี ยบร้อยของงานออกแบบ
  • 3. การจัดเตรียมเว็บไซต์ขึน้ สู่ อนเตอร์ เน็ต ิ - การจัดเตรี ยมเว็บโฮสติง้ Hosting - การจดทะเบียนโดเมนเนม Domain Name - การนาเว็บไซต์และข้อมูลขึน้ สู่อินเตอร์เน็ต - รู้จกโปรแกรม FTP และ Remote ั - การบริ หารจัดการเว็บไซต์ดวยระบบ Admin ้ การดูแลระบบเว็บไซต์และการประชาสัมพันธ์ เว็บไซต์ - สิ่งที่เว็บมาสเตอร์ควรรู้ - การลงทะเบียนเว็บไซต์ของเราให้ search engine รู้จกั - การใช้เครื่ องมือในการวิเคราะห์เว็บไซต์ - การประชาสัมพันธ์เว็บไซต์แบบต่างๆ - หลักการในการวิเคราะห์และวางแผนการตลาด - เครื่ องมือใช้การทาการตลาดบนเว็บไซต์ - การทา Search engine optimization (SEO) เบื้องต้น มีอะไรใหม่ Dreamweaver CS3 มีอะไรใหม่ - Spry - Spry Menu Bar - Spry Tabbed Panels - New Layout Mode - Multimedia Suppor - Spry Form - Properties - Browsers Support - Full CSS Support - Flash Menu
  • 4. มีอะไรใหม่ Photoshop CS3 มีอะไรใหม่ - User Interface - Single Column Toolbar - Free Palette - Camera Raw - Printing Done Right - Black and White - Auto Align, Auto Blend - New Bridge - Fill Light Slider - Vibrance Slider - Quick Selection Tool - Refine Edge floating Palette - Mo Better Curves - Clipping Warning, In- Dialog Histogram - Loupe - Smart Filte - Cloning, Healing Clone Source
  • 5. Website Technology Introduction พืน้ ฐานของเทคโนโลยีเว็บไซต์ ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ - เว็บเทคโนโลยี (Web Technology) - โปรโตคอล (Protocol) ข้อตกลงกันระหว่าง 2 ฝ่ ายที่ให้เครื่ อง คอมพิวเตอร์ สามารถสื่อสารกันได้อย่างถูกต้อง - บริ การเว็บจะทางานภายใต้ โปรโตคอล HTTP - โปรโตคอลจะเป็ นตัวกาหนดวิธีการส่งข้อมูลหรื อไฟล์ ระหว่าง เครื่ องคอมพิวเตอร์ที่เป็ น Client และ Server รวมถึงการกาหนด กฏระเบียบในการติดต่อด้วย เราจะใช้โปรแกรมประเภท Browser เป็ น ตัวช่วยในการติดต่อสื่อสาร ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ - TCP ย่อมาจาก Transmission Control Protocol เป็ น โพรโตคอลที่ควบคุมการส่งข้อมูลโดยอาศัย IP - IP Address เปรี ยบเสมือนบ้านเลขที่ นันก็คือหมายเลข ่ ของเครื่ อง Computer ที่อยูใน Network ่ - IP v.4 : 202.44.47.20 => 255.255.255.255 - IP local host : 192.168.0.1 IP Gateway : xxx.xxx.xxx.0 - IP v.4 Vs. IP v.6 ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ อินเทอร์ เน็ต (Internet) หมายถึง การเชื่อมต่อเครื อข่าย คอมพิวเตอร์เข้าด้วยกัน โดยมีขอกาหนดว่าทุกเครื อข่ายที่ ้ เชื่อมต่อถึงกัน จะต้องอยูภายใต้มาตรฐานของการเชื่อมต่อ ่ (โปรโตคอล) ที่ถกสร้างขึ้นมาเพื่อใช้งานบนเครื อข่ายแบบนี้ ู โดยเฉพาะ ซึ่งเรี ยกว่า TCP/IP Server : Hosting เครื่ องให้บริ การใช้ สาหรับจัดเก็บ Web Application Client : PC, Notebook, PDA, Mobile คอมพิวเตอร์หรื ออุปกรณ์ที่ตองการ ้ เข้าถึงข้อมูล
  • 6. DNS server : เครื่ อง Server ทาหน้าที่ จับคู่ IP/Domain Name ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ ข้ อมูลในเว็บจะอยูในรู ปแบบที่เรี ยกว่า Hypertext และทาการเชื่อมโยง(Links) ข้อความหรื อ รู ปภาพ เข้ากับ ่ เอกสารอื่นๆ อย่างเป็ นอิสระต่อกัน ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ WWW (World Wide Web) อาจเรี ยกสั้นๆ ว่า Web (เว็บ) เปรี ยบเสมือนเป็ นห้องสมุด ขนาดใหญ่ที่รวบรวมข้อมูลที่ มากที่สุดในโลกก็ว่าได้ สามารถ ค้นหาข้อมูลที่ตองการได้เกือบ ้ ทุกอย่างจากบริ การเว็บ ความรู้เบืองต้นการใช้ งานอินเทอร์ เน็ต ้ Website (เว็บไซต์) หากอินเตอร์เน็ตเป็ นห้องสมุดเว็บไซต์จะ เปรี ยบเสมือนหนังสือหนึ่งเล่มในห้องสมุด โดยระบุชื่อหนังสือในลักษณะที่เรี ยกว่า URL : (อ่านว่า ยู อาร์ แอล) เช่น เว็บไซต์ของกระทรวงเทคโนโลยีสารสนเทศและการ สื่อสารมี URL หรื อมีชื่อเป็ น www.mict.go.th เว็บเพจ (Web Page) และโฮมเพจ (Home Page) ถ้าเว็บไซต์ คือ หนังสือหนึ่งเล่ม - เว็บเพจ คือ หน้ากระดาษต่างๆ ที่บรรจุเนื้อหาในหนังสือเล่มนั้น - โฮมเพจ คือ ปกหน้าของหนังสือ เมื่อเริ่ มเปิ ดโปรแกรม Web Browser โปรแกรมจะนาเข้าสู่หน้าแรกของเว็บโดยอัตโนมัติ
  • 7. โปรแกรมเว็บบราวเซอร์ (Web Browser) โปรแกรมเว็บบราวเซอร์ เป็ นตัวกลางที่จะทาหน้าที่แปลงคาสัง ่ ให้ออกมาเป็ นรู ปภาพ เสียง และข้อมูล ต่างๆ บราวเซอร์ที่ผใช้นิยมใช้กนก็จะมี ู้ ั โปรแกรม Internet Explorer, Mozilla Firefox, Chrome และ Safari DNS : Domain Name System คือ ระบบการตั้งชื่อบนอินเทอร์เน็ต ทรัพยากรบนอินเทอร์เน็ต หมายเลขประจาเครื่ องคอมพิวเตอร์เรี ยกว่า IP การที่จะจดจาหมายเลขประจา เครื่ องนั้นทาได้ยาก จึงมีวิธีการตั้งชื่อให้จดจาและใช้งานง่าย ระบบชื่อจึงถูก กาหนดให้เป็ นมาตรฐาน - โดยแบ่งตามลาดับขั้นตามสภาพภูมิศาสตร์ - ประเทศ - ประเภทขององค์กร - ชื่อองค์กร เช่น www.artanddesign.ac.th “th” คือ ชื่อประเทศไทย ac คือ ประเภทองค์กร artanddesign คือ ชื่อองค์กร Domain ที่นิยมใช้ กนอยู่ในปัจจุบน เช่น ั ั .com = กลุ่มธุรกิจการค้า (Commercial) .edu = กลุ่มการศึกษา (Education) .gov = กลุ่มองค์กรรัฐบาล (Government) .org = หน่วยงานที่ไม่หวังผลกาไร (Non-Commercial organizations)
  • 8. Domain Name ชื่อย่อของประเทศ เช่ น .th = Thailand .hk = Hong Kong .jp = Japan .sg = Singapore ความหมายของ Sub Domain เช่น .co = องค์การธุรกิจ (Commercial) .ac = สถาบันการศึกษา (Academic) .go = หน่วยงานรัฐบาล (Government) .or = องค์กรอื่น ๆ (Organizations) .net 1 ปี 600 บาท .com 1 ปี 600 บาท .org 1 ปี 600 บาท .info 1 ปี 600 บาท .biz 1 ปี 600 บาท .th 1 ปี 800 บาท .asia 1 ปี 850 บาท .uk 1 ปี 1,000 บาท .ca 1 ปี 1,050 บาท ป .de 1 ปี 600 บาท .eu 1 ปี 600 บาท .mobi 1 ปี 700 บาท .be 1 ปี 750 บาท .es 1 ปี 750 บาท .at 1 ปี 1,500 บาท .cc 1 ปี 2,250 บาท .cn 1 ปี 2,600 บาท .tv 1 ปี 2,600 บาท .ch 1 ปี 3,000 บาท
  • 9. Web 2.0 ก็คือ พัฒนาการของการพัฒนาเว็บไซต์ที่เน้นความร่ วมมือ (Collaboration) ที่การจัดการเนื้อหาเว็บไม่ตองผูกขาดที่เว็บมาสเตอร์แต่ ้ ี ิ เพียงผูเ้ ดียว ผูใช้ ผูชมก็มสิทธ์ร่ วมสร้างสรรค์ แก้ไขเนื้อหาในเว็บไซต์ได้ ้ ้ (หากได้รับสิทธ์)ิ ตัวอย่างของการประยุกต์ใช้เทคโนโลยี Web 2.0 ในปัจจุบนก็คือ การ ั เขียนเนื้อหา เล่าเรื่ อง หรื อติชมต่างๆ ผ่าน Blog ซึ่งมีจานวนสูงมากขึ้นมา ปัจจุบน หรื อการร่ วมกันเขียนบทความในเชิงสารานุกรมผ่านเว็บไซต์วกิ ั ิ พีเพีย (http://th.wikipedia.org) W3C.org เป็ นหน่วยงานผูกาหนดมาตรฐานเทคโนโลยีเว็บไซต์ ้ HTML ย่อมาจาก Hyper Text Markup Language เป็ นภาษาที่ ใช้ในการพัฒนาเว็บเพจเพื่อให้โปรแกรมเว็บบราวเซอร์ (Web Browser) ต่างๆ สามารถแสดงผลได้ถกต้อง ู HTML ซึ่งเป็ นข้อความ Text กับรหัสที่อยูในเครื่ องหมาย < > ่ และมีนามสกุลเป็ น .html โดยเมื่อเราอ่านผ่านโปรแกรมเว็บ บราวเซอร์ รหัสเหล่านี้จะถูกแปลเป็ นลักษณะของการแสดงผลที่ หน้าจอ เราจะเห็นรู ปแบบที่สมบูรณ์ผานการแปลความหมายแล้วโดย ่ บราวเซอร์ (Web Browser) สาหรับการสร้างไฟล์ HTML จะต้องอาศัยโปรแกรมที่มีคุณสมบัติเป็ น Text Editor เช่น Notepad, Edit Plus ไฟล์โดยจะต้องมีนามสกุลเป็ น .html ทดสอบไฟล์ในโปรแกรมเว็บบราวเซอร์ต่อไป โปรแกรมสาหรับช่วยในการเขียน HTML Microsoft Frontpage Adobe Dreamweaver CS (Macromedia Dreamweaver) HTML เอกสาร HTML เป็ นเอกสารที่ประกอบไปด้วยข้อมูลที่เราต้องการเผยแพร่ ผาน ่ WWW และ ภาษา HTML ที่ใช้กาหนดการแสดงผลของข้อมูลดังกล่าว
  • 10. ภาษา HTML เป็ นภาษาที่อยูในรู ปของ แท๊ก (Tag) ที่ใช้ห่อหุมข้อมูลที่เราต้องการ ้ เผยแพร่ ผาน WWW ซึ่งการแสดงผลของเอกสาร HTML เราสามารถที่จะดูได้โดย ่ ใช้โปรแกรมที่เรี ยกว่า เว็บ บราวเซอร์ (Web Browser) โครงสร้างของภาษา HTML จะประกอบไปด้วย 3 ส่วน ดังนี้ ส่วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้นสุดของเอกสาร คือ แท๊ก <html></html> ส่วนหัวของเอกสาร HTML คือ แท๊ก <head></head> ซึ่งเราจะแสดง หัวเรื่ องของ เอกสาร HTML ไว้ในส่วนนี้ ส่วนที่ใช้บอกจดเริ่ มต้นและจุดสิ้นสุดของเนื้อหา คือ แท๊ก <body></body> Create Website สร้างเว็บไซด์ดวย Web Application Packet ้ เว็บสาเร็ จรู ป สร้างเว็บไซด์ดวยโปรแกรมกราฟฟิ ก ้ Photoshop Flash สร้างเว็บไซด์ดวยโปรแกรมมิง ้ HTML JavaScript PHP .Net Page Size ขนาดหน้าของเว็บเพจที่นิยมใช้ในปัจจุบนมี 2 ขนาด คือ ั ระยะปลอดภัย ขนาด 800X600 pixels จะสามารถแสดงหน้าเว็บได้ ครบถ้วนกับหน้าจอที่มีขนาด 15 นิ้วขึ้นไป นิยมใช้งาน ขนาด 1024X 768 pixels เป็ นขนาดของหน้าเว็บเพจที่ นิยมมากที่สุดในปัจจุบน เพราะสามารถแสดงข้อมูลของเว็บได้มากขึ้นและง่ายต่อการออกแบบด้วย ั
  • 11. ส่ วนประกอบของเว็บ โลโก้ (Logo) ส่ วนหัวของเว็บเพจ (Page Header)
  • 12. ส่ วนที่ใช้ แสดงเนือหาของเว็บ (Page Body) ้ เมนูหลัก (Link Menu) ส่ วนล่างสุดของเล็บไซด์ (Page Footer) ช่ องทางการโฆษณาของเว็บ ไซด์ (Banner) ขั้นตอนในการพัฒนาเว็บไซต์ 1 • เตรี ยมเนื้อหาที่จะนาเสนอ 2 • ออกแบบหน้าตาของเว็บไซต์ 3 • เขียนและทดสอบ 4 • ลงทะเบียนชื่อเว็บไซต์และจัดหาพื้นที่เก็บข้อมูล 5 • Upload เว็บไซต์และตรวจสอบความเรี ยบร้อย 6 • ประกาศให้โลกรับรู้
  • 13. ขั้นตอนในการพัฒนาเว็บไซต์ เตรียมเนือหาที่จะนาเสนอ ้ กาหนดเป้ าหมาย ( Target ) : จะทาเว็บไซต์เกี่ยวกับเรื่ องอะไรและ เนื้อหาต่างๆ ทาให้ใคร (Visitor) : ผูชมเว็บคือใคร อยูที่ไหน ภาษา วัฒนธรรม ้ ่ กาหนดกรอบแนวคิด (Concept) : ระเบียบความคิดสู่เป้ าหมาย Technology : เลือกเทคโนโลยี รวบรวมข้อมูล (Search) : รวบรวมวัตถุดิบ จัดเตรี ยมทรัพยากร(Resource) : ซึ่งหมายถึง ข้อความ, ภาพประกอบ, เสียง และอื่น ๆ ให้เป็ นหมวดหมู่ ออกแบบหน้ าตาของเว็บไซต์ Concept to Concept Design : นาแนวคิดที่วางไว้มา ออกแบบเว็บไซต์ • Theme : “แนว” ไหน? • Layout : เค้าโครงแบบไหน? • Color : โทนสี? กี่สี่? สีสน อะไรบ้าง? ั • Font : ข้อความ ชนิด ขนาด สี ร่ างรูปแบบเค้าโครงของเว็บไซต์ LOGO Homepage | New | Product | About us | Member list menu list menu list menu list menu Content Content Homepage | New | Product | About us | Member
  • 14. Web Structure โครงสร้ างของเว็บไซต์ ออกแบบหน้ าตาของเว็บไซต์ เขียนและทดสอบ ลงมือเขียนโดยใช้โปรแกรมสาหรับเขียนเว็บไซต์ แล้วทาการ ทดสอบการแสดงผลและ Link ต่างๆ ว่าเชื่อมโยงได้ถกต้องหรื อไม่ ู ในขั้นตอนนี้ถามีปริ มาณข้อมูลมากและมีการเชื่อมโยงที่ซบซ้อนก็จะ ้ ั ใช้เวลาค่อนข้างมากเพราะต้องคอยปรับแก้อยูเ่ รื่ อย ๆ นาเว็บไซต์ที่สร้ างขึน Upload ขึน Server และตรวจสอบความเรียบร้ อย ้ ้ คือ การคัดลอกข้อมูล จากเครื่ องของเราไปเก็บไว้ในเครื่ อง Server ซึ่งการคัดลอกนี้เรี ยกว่า Upload โดยใช้โปรแกรมสาหรับการUpload เช่น โปรแกรม WinSCP, CuteFtp, WS_FTP (โปรแกรม Dreamweaver มีความสามารถนี้อยูแล้ว)่ ลงทะเบียนชื่อเว็บไซต์และจัดหาพืนที่เก็บข้ อมูล ้ ตั้งชื่อเว็บไซต์ท่ีเหมาะสม จัดหาพื้นที่ในการวางเว็บไซต์ เช่นเว็บโฮสติ้งต่างๆ จัดหาและปรับแต่งสภาพแวดล้อมให้เหมาะสม เช่น ฐานข้อมูล ประกาศให้โลกรับรู้ เมื่อตรวจสอบความเรี ยบร้อยแล้ว ก็ถึงคราวที่จะชักชวนให้ ผูคนมาชมเว็บไซต์ โดยประชาสัมพันธ์ผานทางสื่อต่างๆ ้ ่ • แลก Link กับเว็บไซต์อื่นๆ