หมวย
- 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