Download - Website ett
1
Web Designการออกแบบและสรางเว็�บเพ็�จ เบ��องต้น
Watcharapong Wongvivatwww.phranakornsoft.com
ผู้�ให้ก�าเน�ดเว็�บไซต้�
ทิ�ม เบอร์เนอร์-ลี� ( Tim Berners-Lee )
ผู้��คิ�ดคิ�นแลีะปร์ะด�ษฐ์ เวิ�ลีดไวิดเวิ�บ World Wide Web
หร์�อ (www | w3) เร์�ยกสั่� นๆวิ"า เวิ�บ (web) คิ�นพื้�%นทิ� ทิ� เก�บข้�อม�ลีข้"าวิสั่าร์ทิ� เชื่� อมต่"อก�นทิางอ�นเทิอร์เน�ต่ โดยการ์ก+าหนด URL ผู้"านทิางโปร์โต่คิอลี http (HyperText Transport Protocol)Watcharapong Wongvivat 2
Watcharapong Wongvivat 3
ห้ล กคว็ามเข้าใจในเร�$องเว็�บไซต้�และเว็�บเพ็จ
เว็�บเพ็จ : เป,นเวิ�บทิ� ไม"ได�จดทิะเบ�ยน หร์�อม�ร์�ปแบบทิ� เร์�ยบง"าย ใชื่�งานในการ์แสั่ดงข้�อม�ลีเป,นหน�าๆ ผู้"านทิางร์ะบบเคิร์�อข้"ายข้องต่น องคิกร์ หร์�อ ผู้"านเคิร์�อข้"ายอ�นเต่อร์เน�ต่ การ์เร์�ยกใชื่�งานผู้"าน url
เว็�บไซต้� : เป,นเวิ�บทิ� ได�จดทิะเบ�ยนถู�กต่�องต่ามร์ะบบ เวิ�ลีดไวิดเวิ�บ (www) ซึ่1 งข้�อม�ลีเวิ�บจะอย�"บนเคิร์� อง server หร์�อ host สั่ามาร์ถูเร์�ยกใชื่�งานได�ต่ลีอดเวิลีา โดยผู้"านโปร์โต่คิอลี http
Watcharapong Wongvivat 4
ภาษาในการเข้'ยนเว็�บไซต้�ภาษาในการ์เข้�ยนเวิ�บไซึ่ต่ แบ"งออกได�เป,น 2
ลี�กษณะ คิ�อ1. ภาษาในการแสดงผู้ล ห้ร�อ Client Site
HTML, XML, XHTML, DHTML, CSS
เป,นภาษาหลี�กๆในการ์เข้�ยนเวิ�บไซึ่ต่แลีะเวิ�บเพื้จ ทิ� วิๆไป ในการ์ทิ+างานจะทิ+าหน�าทิ� แสั่ดงผู้ลีข้องเวิ�บผู้"านทิางเวิ�บเบร์าวิเซึ่อร์
2. ภาษาในฝั่*$ งเซ�ร�ฟเว็อร� ห้ร�อ Server Site
PHP, ASP, JSP, RUDY, AJAX, JS
เป,นภาษาทิ� ทิ+างานในฝั่5 งข้องเซึ่�ร์ฟเวิอร์ ในการ์ทิ+างานต่�ดต่"อก�บดาต่�าเบสั่ หร์�อการ์ฟ5งกชื่� นต่"างๆ เพื้� อน+ามาแสั่ดงผู้ลี
Watcharapong Wongvivat 5
Web development timeline
Watcharapong Wongvivat 6
ภาษา HTML (Hypertext Markup Language)
HTML เป,นหลี�กในป5จจ7บ�นทิ� ใชื่�ในการ์สั่ร์�างเวิ�บเพื้จ หร์�อข้�อม�ลีอ� นทิ� เร์�ยกด�ผู้"านทิางเวิ�บเบร์าวิเซึ่อร์ (web browser) ซึ่1 งต่�วิโคิ�ดจะแสั่ดงโคิร์งสั่ร์�างข้องข้�อม�ลี ในการ์แสั่ดง ห�วิข้�อ ลี�งก ย"อหน�า ร์ายการ์ ร์วิมถู1งการ์สั่ร์�างแบบฟอร์ม ป5จจ7บ�นถู�กพื้�ฒนาข้1%นอย"างต่"อเน� องต่�%งแต่" HTML Level 1 , HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 HTML
4.1 แลีะลี"าสั่7ด HTML 5
Watcharapong Wongvivat 7
Cascading Style Sheets: CSS
เป,นภาษาสั่ไต่ลีชื่�ต่ใชื่�ในการ์จ�ดร์�ปแบบข้องเอกสั่าร์ CSS เป,นภาษาทิ� สั่+าคิ�ญต่�วิหน1 งในการ์เข้�ยนเวิ�บไซึ่ต่ แลีะเวิ�บเพื้จ ซึ่1 งเข้�ยนในภาษา HTML แลีะ XHTML
Watcharapong Wongvivat 8
โครงสราง HTML (Hypertext Markup Language)
Watcharapong Wongvivat 9
HTML Headings
Watcharapong Wongvivat 10
HTML Element
<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>
Watcharapong Wongvivat 11
HTML Attributes
Watcharapong Wongvivat 12
HTML Attributes
<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>
Watcharapong Wongvivat 13
HTML Text Formatting Tags
Watcharapong Wongvivat 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 15
HTML Table & Headers
<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>
Watcharapong Wongvivat 16
โปรแกรมในการสรางเว็�บ
• Notepad++• Notepad• visual studio• Adobe Dreamweaver
• Adobe Photoshop• Adobe Illustrator
Coding Design
17
Adobe Photoshop
Watcharapong Wongvivat
เป,นโปร์แกร์มร์วิบร์วิมเคิร์� องม�อสั่+าหร์�บต่กแต่"งภาพื้ปร์ะสั่�ทิธิ�ภาพื้ในการ์ทิ+างานสั่�ง เพื้� อการ์ทิ+างานร์ะด�บมาต่ร์ฐ์านสั่+าหร์�บน�กออกแบบม�ออาชื่�พื้ทิ� ต่�องการ์สั่ร์�างสั่ร์ร์คิงานกร์าฟ;กทิ� โดด
เด"น ทิ�%งงานทิ� ใชื่�บนเวิ�บแลีะงานสั่� งพื้�มพื้
Watcharapong Wongvivat 18
Adobe Photoshop
Watcharapong Wongvivat 19
Adobe Photoshop
Watcharapong Wongvivat 20
การ์สั่ร์�างงานใหม" Adobe Photoshop
• Name ค�อ ชื่�$อข้องชื่��นงาน สามารถก�าห้นดเองได ชื่�$อน'�จะไประบ0ที่'$ชื่�$อ ไฟล�ต้2อไป
• Preset ค�อ ข้นาดงานที่'$โปรแกรมก�าห้นดมาให้ ซ3$งม'ห้ลากห้ลาย ข้นาดให้เล�อก
• Width ค�อ ข้นาดคว็ามกว็างข้องงาน (จากซายไปข้ว็า) • Height ค�อ ข้นาดคว็ามกว็างข้องงาน (จากบนลงล2าง) • Resolution ค�อ คว็ามละเอ'ยดข้องภาพ็• Color Mode ค�อ โห้มดส'ข้องภาพ็ ซ3$งประกอบไปดว็ย โห้มดส' Bitmap,
Grayscale, RGB Color, CMYK Color, Lab Color • Background Contents ค�อ ส'พ็��นห้ล งข้องภาพ็ เม�$อเร�$มชื่��นงานให้ม2 White
Background Color Transparent
Watcharapong Wongvivat 21
การ์ก+าหนด Palettes ข้อง Adobe Photoshop
• Palettes คิ�อ Dialog ทิ� ใชื่�ต่ร์วิจสั่อบแลีะก+าหนดคิ7ณสั่มบ�ต่�ต่"าง ๆ ข้องร์�ปภาพื้ เชื่"น Palette ข้อง Navigator แลีะ Info, Palette ข้อง
Color, Swatches เป,นต่�น
Watcharapong Wongvivat 22
การ Save File Adobe Photoshop• หลี�งจากต่กแต่"งไฟลีภาพื้เร์�ยบร์�อย จะต่�องเก�บบ�นทิ1กข้�อม�ลีลีงบนไฟลี (Save)
สั่+าหร์�บการ์เร์�ยกใชื่�งานในคิร์�% งต่"อไป โปร์แกร์มม�การ์บ�นทิ1กข้�อม�ลีลีงบนไฟลี (Save) อย�" 3 ลี�กษณะ คิ�อ
- Save บ�นทิ1กไฟลีในร์�ปแบบ (Format) ปกต่� ซึ่1 งจะอย�"ในร์�ปแบบ (Format) ข้องPSD
- Save As บ�นทิ1กไฟลีในร์�ปแบบ (Format) อ� น ๆ ได� เชื่"น JPEG, BMP, GIF เป,นต่�น
- Save for Web บ�นทิ1กไฟลีในร์�ปแบบ (Format) สั่+าหร์�บการ์ใชื่�งานบนเวิ�บ เชื่"น ไฟลีHtml แลีะไฟลีร์�ปภาพื้ JPEG, GIF, PGN เป,นต่�น
Watcharapong Wongvivat 23
Adobe Dreamweaver ถู�อได�วิ"าเป,นเคิร์� องม�อสั่+าหร์�บสั่ร์�างเวิ�บ แลีะด�แลี
เวิ�บไซึ่ต่ทิ� ม�คิวิามสั่ามาร์ถูสั่�งต่�วิหน1 ง แลีะได�ร์�บคิวิาม น�ยมข้อง Web Master อย"างกวิ�างข้วิาง
ซึ่1 งเป,นโปร์แกร์มสั่+าหร์�บเข้�ยนภาษา HTML โดย เฉพื้าะ พื้ร์�อมทิ�%ง สั่ามาร์ถูแทิร์ก Java Scripts แลีะ
ลี�กเลี"นต่"างๆได�มากมาย โดยทิ� ผู้��ใชื่�ไม"จ+าเป,นต่�องร์� � หลี�กภาษา HTML มากน�ก ซึ่1 งชื่"วิยปร์ะหย�ดเวิลีาใน
การ์ทิ+างาน คว็ามสามารถข้อง Dreamweaver
1. สั่น�บสั่น7น การ์ออกแบบเวิ�บไซึ่ต่ในทิางด�าน Code แลีะ ด�าน Design2. ม�คิวิามสั่ามาร์ถูในการ์อ�บโหลีดไฟลีข้1%น server ได� (แต่"ไม"น�ยมใชื่")3. สั่น�บสั่น7นในการ์แก�ไข้ไฟลี ในหลีายๆภาษา เชื่"น HTML PHP ASP Java CSS
อ� นๆ.4. ร์องร์�บม�ลีต่�ม�เด�ย การ์ใสั่"ไฟลีร์�ป ไฟลีเสั่�ยง
Watcharapong Wongvivat 24
Adobe Dreamweaver
Watcharapong Wongvivat 25
ห้ล กการออกแบบเว็�บไซต้�
Watcharapong Wongvivat 26
Opensource cms
โอเพ็นซอร�ซ (open source) คิ�อวิ�ธิ�การ์ในการ์ออกแบบ พื้�ฒนา แลีะแจกจ"ายสั่+าหร์�บต่�นฉบ�บข้องสั่�นคิ�าหร์�อคิวิามร์� �แลีะแผู้นการ์ในการ์ด+าเน�นการ์ โดยโอเพื้นซึ่อร์ซึ่เป;ดโอกาสั่ให�บ7คิคิลีอ� นน+าเอาร์ะบบน�%นไปพื้�ฒนาได�ต่"อไป
CMS (Content management system)
คิ�อร์ะบบซึ่อฟต่แวิร์คิอมพื้�วิเต่อร์ทิ� ใชื่�เพื้� อจ�ดร์ะเบ�ยบ แลีะสั่"งเสั่ร์�มการ์ทิ+างานในหม�"คิณะ ให�สั่ามาร์ถูสั่ร์�างเอกสั่าร์ หร์�อเน�%อหาสั่าร์ะอ� นๆ โดยมากแลี�วิ ระบบจ ดการเน��อห้า ม�กจะเป,นเวิ�บแอปพื้ลี�เคิชื่�น
Watcharapong Wongvivat 27
CMS ทิ� น�ยมใชื่�งานในป5จจ7บ�น
Wordpress
Joomla
Drupal
TYPO3
Watcharapong Wongvivat 28
ต้ ว็อย2างงานจร�ง