Download to read offline
Website ett
- 1. Web Designการออกแบบและสร้างเว็บเพ็จ เบื้องต้นWatcharapongWongvivatwww.phranakornsoft.com1
- 2. ผู้ให้กำเนิดเว็บไซต์ทิม เบอร์เนอร์-ลี ( Tim Berners-Lee ) ผู้คิดค้นและประดิษฐ์ เวิลด์ไวด์เว็บ World Wide Web หรือ(www | w3) เรียกสั่นๆว่า เว็บ (web) คืนพื้นที่ที่เก็บข้อมูลข่าวสารที่เชื่อมต่อกันทางอินเทอร์เน็ต โดยการกำหนด URLผ่านทางโปรโตคอล http (HyperText Transport Protocol)Watcharapong Wongvivat2
- 3. หลักความเข้าใจในเรื่องเว็บไซต์และเว็บเพจเว็บเพจ: เป็นเว็บที่ไม่ได้จดทะเบียน หรือมีรูปแบบที่เรียบง่ายใช้งานในการแสดงข้อมูลเป็นหน้าๆ ผ่านทางระบบเครือข่ายของตน องค์กร หรือ ผ่านเครือข่ายอินเตอร์เน็ต การเรียกใช้งานผ่าน urlเว็บไซต์: เป็นเว็บที่ได้จดทะเบียนถูกต้องตามระบบ เวิลด์ไวด์เว็บ (www)ซึ่งข้อมูลเว็บจะอยู่บนเครื่องserverหรือ hostสามารถเรียกใช้งานได้ตลอดเวลา โดยผ่านโปรโตคอล httpWatcharapong Wongvivat3
- 4. ภาษาในการเขียนเว็บไซต์ภาษาในการเขียนเว็บไซต์ แบ่งออกได้เป็น 2ลักษณะคือ1. ภาษาในการแสดงผล หรือ Client SiteHTML, XML, XHTML, DHTML, CSSเป็นภาษาหลักๆในการเขียนเว็บไซต์และเว็บเพจ ทั่วๆไป ในการทำงานจะทำหน้าที่แสดงผลของเว็บผ่านทางเว็บเบราว์เซอร์2. ภาษาในฝั่งเซิร์ฟเวอร์ หรือ Server SitePHP, ASP, JSP, RUDY, AJAX, JSเป็นภาษาที่ทำงานในฝั่งของเซิร์ฟเวอร์ ในการทำงานติดต่อกับดาต้าเบส หรือการฟังก์ชั่นต่างๆ เพื่อนำมาแสดงผลWatcharapong Wongvivat4
- 5. Web development timelineWatcharapongWongvivat5
- 6. ภาษาHTML (Hypertext MarkupLanguage)HTMLเป็นหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์(web browser)ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์มปัจจุบันถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่HTML Level 1 , HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 HTML 4.1และล่าสุด HTML 5Watcharapong Wongvivat6
- 7. Cascading Style Sheets:CSS เป็นภาษาสไตล์ชีตใช้ในการจัดรูปแบบของเอกสารCSSเป็นภาษาที่สำคัญตัวหนึ่งในการเขียนเว็บไซต์ และเว็บเพจ ซึ่งเขียนในภาษา HTMLและ XHTMLWatcharapong Wongvivat7
- 8. โครงสร้างHTML (Hypertext MarkupLanguage)Watcharapong Wongvivat8
- 9.
- 10. HTML ElementWatcharapong Wongvivat10<html><body><p>Thisis my first paragraph.</p><br /><a href="http://www.cit.kmutnb.ac.th">This is a link</a></body></html>
- 11.
- 12. HTML AttributesWatcharapong Wongvivat12<html><body><h1style="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 FormattingTagsWatcharapong Wongvivat13
- 14. HTML Text FormattingTags<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 boldThis text is bigThis text is italicThis is computer outputThis is subscript and superscriptWatcharapong Wongvivat14
- 15. HTML Table &HeadersWatcharapong Wongvivat15<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>
- 16. โปรแกรมในการสร้างเว็บNotepad++Notepadvisual studioAdobe DreamweaverWatcharapong Wongvivat16Coding DesignAdobe Photoshop
- 17. Adobe Illustrator AdobePhotoshopWatcharapongWongvivat17 เป็นโปรแกรมรวบรวมเครื่องมือสำหรับตกแต่งภาพประสิทธิภาพในการทำงานสูง เพื่อการทำงานระดับมาตรฐานสำหรับนักออกแบบมืออาชีพที่ต้องการสร้างสรรค์งานกราฟิกที่โดดเด่น ทั้งงานที่ใช้บนเว็บและงานสิ่งพิมพ์
- 18.
- 19.
- 20. การสร้างงานใหม่ Adobe PhotoshopWatcharapongWongvivat20Name คือ ชื่อของชิ้นงาน สามารถกำหนดเองได้ ชื่อนี้จะไประบุที่ชื่อไฟล์ต่อไป
- 21. Preset คือ ขนาดงานที่โปรแกรมกำหนดมาให้ ซึ่งมีหลากหลายขนาดให้เลือก
- 22. Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา)
- 23. Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง)
- 24. Resolution คือ ความละเอียดของภาพ
- 25. Color Mode คือโหมดสีของภาพ ซึ่งประกอบไปด้วย โหมดสี Bitmap, Grayscale, RGB Color, CMYK Color, Lab Color Background Contents คือ สีพื้นหลังของภาพ เมื่อเริ่มชิ้นงานใหม่ White Background Color Transparent
- 26. การกำหนดPalettesของAdobe PhotoshopPalettes คือDialog ที่ใช้ตรวจสอบและกำหนดคุณสมบัติต่าง ๆ ของรูปภาพ เช่น Palette ของ Navigator และ Info, Palette ของ Color, Swatches เป็นต้น Watcharapong Wongvivat21
- 27. การ Save FileAdobePhotoshopหลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สำหรับการเรียกใช้งานในครั้งต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save) อยู่ 3 ลักษณะ คือ - Save บันทึกไฟล์ในรูปแบบ (Format) ปกติ ซึ่งจะอยู่ในรูปแบบ (Format) ของ PSD - Save As บันทึกไฟล์ในรูปแบบ (Format) อื่น ๆ ได้ เช่น JPEG, BMP, GIF เป็นต้น - Save for Web บันทึกไฟล์ในรูปแบบ (Format) สำหรับการใช้งานบนเว็บ เช่น ไฟล์ Html และไฟล์รูปภาพ JPEG, GIF, PGN เป็นต้นWatcharapong Wongvivat22
- 28. Adobe DreamweaverWatcharapong Wongvivat23 ถือได้ว่าเป็นเครื่องมือสำหรับสร้างเว็บ และดูแลเว็บไซต์ที่มีความสามารถสูงตัวหนึ่ง และได้รับความนิยมของ Web Master อย่างกว้างขวาง ซึ่งเป็นโปรแกรมสำหรับเขียนภาษา HTMLโดยเฉพาะ พร้อมทั้ง สามารถแทรก Java Scriptsและ ลูกเล่นต่างๆได้มากมาย โดยที่ผู้ใช้ไม่จำเป็นต้องรู้หลักภาษา HTMLมากนัก ซึ่งช่วยประหยัดเวลาในการทำงานความสามารถของ Dreamweaver สนับสนุน การออกแบบเว็บไซต์ในทางด้าน Code และ ด้าน Designมีความสามารถในการอับโหลดไฟล์ขึ้น server ได้ (แต่ไม่นิยมใช่)สนับสนุนในการแก้ไขไฟล์ ในหลายๆภาษา เช่น HTML PHP ASP Java CSS อื่นๆ.รองรับมัลติมีเดีย การใส่ไฟล์รูป ไฟล์เสียง