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 กับเว็บไซต์อื่นๆ

15. • ฝากข้อความชักชวนไว้ตามกระดานข่าวต่างๆ
• SEO : Search Engine Optimize