Recommended
More Related Content
What's hot
Similar to Website ett
Similar to Website ett (20)
More from Phranakornsoft
Website ett
- 1. Web Design การออกแบบและสร้างเว็บเพ็จ เบื้องต้น WatcharapongWongvivat www.phranakornsoft.com 1
- 2. ผู้ให้กำเนิดเว็บไซต์ ทิม เบอร์เนอร์-ลี ( Tim Berners-Lee ) ผู้คิดค้นและประดิษฐ์ เวิลด์ไวด์เว็บ World Wide Web หรือ(www | w3) เรียกสั่นๆว่า เว็บ (web) คืนพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URL ผ่านทางโปรโตคอล http (HyperText Transport Protocol) Watcharapong Wongvivat 2
- 3. หลักความเข้าใจในเรื่องเว็บไซต์และเว็บเพจ เว็บเพจ: เป็นเว็บที่ไม่ได้จดทะเบียน หรือมีรูปแบบที่เรียบง่าย ใช้งานในการแสดงข้อมูลเป็นหน้าๆ ผ่านทางระบบเครือข่ายของตน องค์กร หรือ ผ่านเครือข่ายอินเตอร์เน็ต การเรียกใช้งานผ่าน url เว็บไซต์: เป็นเว็บที่ได้จดทะเบียนถูกต้องตามระบบ เวิลด์ไวด์เว็บ (www)ซึ่งข้อมูลเว็บจะอยู่บนเครื่องserverหรือ hostสามารถเรียกใช้งานได้ตลอดเวลา โดยผ่านโปรโตคอล http Watcharapong Wongvivat 3
- 4. ภาษาในการเขียนเว็บไซต์ ภาษาในการเขียนเว็บไซต์ แบ่งออกได้เป็น 2ลักษณะ คือ 1. ภาษาในการแสดงผล หรือ Client Site HTML, XML, XHTML, DHTML, CSS เป็นภาษาหลักๆในการเขียนเว็บไซต์และเว็บเพจ ทั่วๆไป ในการทำงานจะทำหน้าที่แสดงผลของเว็บผ่านทางเว็บเบราว์เซอร์ 2. ภาษาในฝั่งเซิร์ฟเวอร์ หรือ Server Site PHP, ASP, JSP, RUDY, AJAX, JS เป็นภาษาที่ทำงานในฝั่งของเซิร์ฟเวอร์ ในการทำงานติดต่อกับดาต้าเบส หรือการฟังก์ชั่นต่างๆ เพื่อนำมาแสดงผล Watcharapong Wongvivat 4
- 5. Web development timeline Watcharapong Wongvivat 5
- 6. ภาษาHTML (Hypertext Markup Language) HTMLเป็นหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์(web browser)ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม ปัจจุบันถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่HTML Level 1 , HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 HTML 4.1และล่าสุด HTML 5 Watcharapong Wongvivat 6
- 7. Cascading Style Sheets: CSS เป็นภาษาสไตล์ชีตใช้ในการจัดรูปแบบของเอกสาร CSSเป็นภาษาที่สำคัญตัวหนึ่งในการเขียนเว็บไซต์ และเว็บเพจ ซึ่งเขียนในภาษา HTMLและ XHTML Watcharapong Wongvivat 7
- 8. โครงสร้างHTML (Hypertext Markup Language) Watcharapong Wongvivat 8
- 9. HTML Headings Watcharapong Wongvivat 9
- 10. HTML Element Watcharapong Wongvivat 10 <html><body> <p>This is my first paragraph.</p> <br /> <a href="http://www.cit.kmutnb.ac.th">This is a link</a> </body></html>
- 11. HTML Attributes Watcharapong Wongvivat 11
- 12. HTML Attributes Watcharapong Wongvivat 12 <html><body><h1 style="text-align:center">This is a heading</h1><p>The heading above is aligned to the center of this page.</p> <a id=”link” calss=“main” title =“CIT.kmuutnb.ac.th” href="http://www.cit.kmutnb.ac.th">This is a link</a> <p id=”text”>This is my first paragraph.</p> </body></html>
- 13. HTML Text Formatting Tags Watcharapong Wongvivat 13
- 14. HTML Text Formatting Tags <p><b>This text is bold</b></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> This text is bold This text is big This text is italic This is computer output This is subscript and superscript Watcharapong Wongvivat 14
- 15. HTML Table & Headers Watcharapong Wongvivat 15 <table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
- 18. Adobe Photoshop Watcharapong Wongvivat 18
- 19. Adobe Photoshop Watcharapong Wongvivat 19
- 21. Preset คือ ขนาดงานที่โปรแกรมกำหนดมาให้ ซึ่งมีหลากหลายขนาดให้เลือก
- 22. Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา)
- 23. Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง)
- 24. Resolution คือ ความละเอียดของภาพ
- 26. การกำหนดPalettesของAdobe Photoshop Palettes คือ Dialog ที่ใช้ตรวจสอบและกำหนดคุณสมบัติต่าง ๆ ของรูปภาพ เช่น Palette ของ Navigator และ Info, Palette ของ Color, Swatches เป็นต้น Watcharapong Wongvivat 21
- 27. การ Save FileAdobe Photoshop หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สำหรับการเรียกใช้งานในครั้งต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save) อยู่ 3 ลักษณะ คือ - Save บันทึกไฟล์ในรูปแบบ (Format) ปกติ ซึ่งจะอยู่ในรูปแบบ (Format) ของ PSD - Save As บันทึกไฟล์ในรูปแบบ (Format) อื่น ๆ ได้ เช่น JPEG, BMP, GIF เป็นต้น - Save for Web บันทึกไฟล์ในรูปแบบ (Format) สำหรับการใช้งานบนเว็บ เช่น ไฟล์ Html และไฟล์รูปภาพ JPEG, GIF, PGN เป็นต้น Watcharapong Wongvivat 22
- 28. Adobe Dreamweaver Watcharapong Wongvivat 23 ถือได้ว่าเป็นเครื่องมือสำหรับสร้างเว็บ และดูแลเว็บไซต์ที่มีความสามารถสูงตัวหนึ่ง และได้รับความนิยมของ Web Master อย่างกว้างขวาง ซึ่งเป็นโปรแกรมสำหรับเขียนภาษา HTMLโดยเฉพาะ พร้อมทั้ง สามารถแทรก Java Scriptsและ ลูกเล่นต่างๆได้มากมาย โดยที่ผู้ใช้ไม่จำเป็นต้องรู้หลักภาษา HTMLมากนัก ซึ่งช่วยประหยัดเวลาในการทำงาน ความสามารถของ Dreamweaver สนับสนุน การออกแบบเว็บไซต์ในทางด้าน Code และ ด้าน Design มีความสามารถในการอับโหลดไฟล์ขึ้น server ได้ (แต่ไม่นิยมใช่) สนับสนุนในการแก้ไขไฟล์ ในหลายๆภาษา เช่น HTML PHP ASP Java CSS อื่นๆ. รองรับมัลติมีเดีย การใส่ไฟล์รูป ไฟล์เสียง
- 29. Adobe Dreamweaver Watcharapong Wongvivat 24
- 31. Opensourcecms โอเพนซอร์ซ(open source)คือวิธีการในการออกแบบ พัฒนา และแจกจ่ายสำหรับต้นฉบับของสินค้าหรือความรู้และแผนการในการดำเนินการ โดยโอเพนซอร์ซเปิดโอกาสให้บุคคลอื่นนำเอาระบบนั้นไปพัฒนาได้ต่อไป CMS (Content management system) คือระบบซอฟต์แวร์คอมพิวเตอร์ที่ใช้เพื่อจัดระเบียบ และส่งเสริมการทำงานในหมู่คณะ ให้สามารถสร้างเอกสาร หรือเนื้อหาสาระอื่นๆ โดยมากแล้ว ระบบจัดการเนื้อหา มักจะเป็นเว็บแอปพลิเคชัน Watcharapong Wongvivat 26
- 32. CMSที่นิยมใช้งานในปัจจุบัน Wordpress Joomla Drupal TYPO3 Watcharapong Wongvivat 27