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


ภาษาในการเข้'ยนเว็�บไซต้�ภาษาในการ์เข้�ยนเวิ�บไซึ่ต่ แบ"งออกได�เป,น 2

ลี�กษณะ คิ�อ1. ภาษาในการแสดงผู้ล ห้ร�อ Client Site

HTML, XML, XHTML, DHTML, CSS

เป,นภาษาหลี�กๆในการ์เข้�ยนเวิ�บไซึ่ต่แลีะเวิ�บเพื้จ ทิ� วิๆไป ในการ์ทิ+างานจะทิ+าหน�าทิ� แสั่ดงผู้ลีข้องเวิ�บผู้"านทิางเวิ�บเบร์าวิเซึ่อร์

2. ภาษาในฝั่*$ งเซ�ร�ฟเว็อร� ห้ร�อ Server Site

PHP, ASP, JSP, RUDY, AJAX, JS

เป,นภาษาทิ� ทิ+างานในฝั่5 งข้องเซึ่�ร์ฟเวิอร์ ในการ์ทิ+างานต่�ดต่"อก�บดาต่�าเบสั่ หร์�อการ์ฟ5งกชื่� นต่"างๆ เพื้� อน+ามาแสั่ดงผู้ลี


Web development timeline


ภาษา 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


Cascading Style Sheets: CSS

เป,นภาษาสั่ไต่ลีชื่�ต่ใชื่�ในการ์จ�ดร์�ปแบบข้องเอกสั่าร์ CSS เป,นภาษาทิ� สั่+าคิ�ญต่�วิหน1 งในการ์เข้�ยนเวิ�บไซึ่ต่ แลีะเวิ�บเพื้จ ซึ่1 งเข้�ยนในภาษา HTML แลีะ XHTML


โครงสราง HTML (Hypertext Markup Language)


HTML Headings


HTML Element

<html>

<body>

This is my first paragraph. <a href="http://www.cit.kmutnb.ac.th">This is a link</a> </body>

</html>


HTML Attributes


HTML Attributes

<html>

<body><h1 style="text-align:center">This is a heading</h1>The heading above is aligned to the center of this page.

<a id=”link” calss=“main” title =“CIT.kmuutnb.ac.th” href="http://www.cit.kmutnb.ac.th">This is a link</a>

This is my first paragraph.

</body>

</html>


HTML Text Formatting Tags


HTML Text Formatting TagsThis text is bold<big>This text is big</big>This text is italic<code>This is computer output</code>This is subscript and superscript

This text is bold

This text is big

This text is italic

This is computer output

This is subscript and superscript


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>


โปรแกรมในการสรางเว็�บ

• Notepad++• Notepad• visual studio• Adobe Dreamweaver

• Adobe Photoshop• Adobe Illustrator

Coding Design

17

Adobe Photoshop

Watcharapong Wongvivat

เป,นโปร์แกร์มร์วิบร์วิมเคิร์� องม�อสั่+าหร์�บต่กแต่"งภาพื้ปร์ะสั่�ทิธิ�ภาพื้ในการ์ทิ+างานสั่�ง เพื้� อการ์ทิ+างานร์ะด�บมาต่ร์ฐ์านสั่+าหร์�บน�กออกแบบม�ออาชื่�พื้ทิ� ต่�องการ์สั่ร์�างสั่ร์ร์คิงานกร์าฟ;กทิ� โดด

เด"น ทิ�%งงานทิ� ใชื่�บนเวิ�บแลีะงานสั่� งพื้�มพื้


Adobe Photoshop


Adobe Photoshop


การ์สั่ร์�างงานใหม" 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


การ์ก+าหนด Palettes ข้อง Adobe Photoshop

• Palettes คิ�อ Dialog ทิ� ใชื่�ต่ร์วิจสั่อบแลีะก+าหนดคิ7ณสั่มบ�ต่�ต่"าง ๆ ข้องร์�ปภาพื้ เชื่"น Palette ข้อง Navigator แลีะ Info, Palette ข้อง

Color, Swatches เป,นต่�น


การ 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 เป,นต่�น


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. ร์องร์�บม�ลีต่�ม�เด�ย การ์ใสั่"ไฟลีร์�ป ไฟลีเสั่�ยง


Adobe Dreamweaver


ห้ล กการออกแบบเว็�บไซต้�


Opensource cms

โอเพ็นซอร�ซ (open source) คิ�อวิ�ธิ�การ์ในการ์ออกแบบ พื้�ฒนา แลีะแจกจ"ายสั่+าหร์�บต่�นฉบ�บข้องสั่�นคิ�าหร์�อคิวิามร์� �แลีะแผู้นการ์ในการ์ด+าเน�นการ์ โดยโอเพื้นซึ่อร์ซึ่เป;ดโอกาสั่ให�บ7คิคิลีอ� นน+าเอาร์ะบบน�%นไปพื้�ฒนาได�ต่"อไป

CMS (Content management system)

คิ�อร์ะบบซึ่อฟต่แวิร์คิอมพื้�วิเต่อร์ทิ� ใชื่�เพื้� อจ�ดร์ะเบ�ยบ แลีะสั่"งเสั่ร์�มการ์ทิ+างานในหม�"คิณะ ให�สั่ามาร์ถูสั่ร์�างเอกสั่าร์ หร์�อเน�%อหาสั่าร์ะอ� นๆ โดยมากแลี�วิ ระบบจ ดการเน��อห้า ม�กจะเป,นเวิ�บแอปพื้ลี�เคิชื่�น


CMS ทิ� น�ยมใชื่�งานในป5จจ7บ�น

Wordpress

Joomla

Drupal

TYPO3


ต้ ว็อย2างงานจร�ง