1

หลกสตร การออกแบบเวบไซต

Introduction to Web design

LOGO

Introduction to Web design

หลกสตร

เวลาทใชในหลกสตร 36 ชวโมง เตมโปรแกรมทใชประกอบการเรยน Adobe Photoshop CS3 Adobe Dreamweaver CS3

สงทจะไดจากหลกสตร

สามารถใชงานกราฟก ออกแบบเวบไซตไดอยางสวยงาม สามารถเขยนเวบไซตและนาเสนอในรปแบบของเวบไซตได มความร และความเขาใจเรองระบบอนเทอรเนต และ การดแลเวบไซตไดรบใบประกาศนยบตรจากกระทรวงศกษาธการ ม portfolio ของตนเอง

พนฐานการออกแบบเวบไซต (Basic Web Design)

ความรเบองตนเกยวกบเวบเทคโนโลย

LOGO

ความรเบองตนเกยวกบเวบเทคโนโลย

2

Outline

ความรเบองตนการใชงานอนเทอรเนตหลกการในการออกแบบเวบไซต เขาใจกระบวนการสรางเวบไซต และ การทางานรวมกนระหวางโปรแกรม

ตางๆ

โปรแกรมทใชประกอบการเรยน

Photoshop CS3 ความสามารถของโปรแกรม และองคประกอบตางๆของโปรแกรม การใชเครองมอตางๆในการสรางภาพกราฟก เรมตนการออกแบบเวบไซต การเตรยมภาพทเหมาะสมสาหรบเวบไซต ใหใชงานรวมกบ HTML ไดการเตรยมภาพทเหมาะสมสาหรบเวบไซต ใหใชงานรวมกบ HTML ได การตรวจสอบความเรยบรอยของงานออกแบบ

โปรแกรมทใชประกอบการเรยน

Dreamweaver CS3 ความสามารถของโปรแกรม และองคประกอบตางๆของโปรแกรม การตงคาโปรแกรมใหเหมาะสมกบการใชงาน ภาษาไทย การใชเครองมอของโปรแกรม ขนพนฐานในการออกแบบโครงสรางเวบไซต

ป ไ CSS St l การจดรปแบบเวบไซต ดวย CSS Style การทางานรวมกบ Graphic Animation และ ไฟล

Multimedia ตางๆ การจดการกบเวบเพจระดบสงดวย template

การจดเตรยมเวบไซตขนสอนเตอรเนต

การจดเตรยมเวบโฮสตง Hostingการจดทะเบยนโดเมนเนม Domain Nameการนาเวบไซตและขอมลขนสอนเตอรเนต

รจกโปรแกรม FTP และ Remote ไ Adminการบรหารจดการเวบไซตดวยระบบ Admin

3

การดแลระบบเวบไซตและการประชาสมพนธเวบไซต

สงทเวบมาสเตอรควรร

การลงทะเบยนเวบไซตของเราให search engine รจก การใชเครองมอในการวเคราะหเวบไซต

การประชาสมพนธเวบไซตแบบตางๆ

ใ หลกการในการวเคราะหและวางแผนการตลาด เครองมอใชการทาการตลาดบนเวบไซต การทา Search engine optimization (SEO) เบองตน

มอะไรใหม

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

paletteMo Better Curves

Clipping Warning, In-Dialog Histogram

New Bridge Loupe

Smart Filter Cloning, Healing

Clone Source

มอะไรใหม

Dreamweaver CS3 มอะไรใหม Spry

Spry Menu Bar Spry Tabbed Panels

S F

New Layout ModeMultimedia Support

Spry Form Properties Browsers Support Full CSS Support Flash Menu

พนฐานของเทคโนโลยเวบไซตWebsite Technology Introduction

4

ความรเบองตนการใชงานอนเทอรเนต

เวบเทคโนโลย (Web Technology) โปรโตคอล (Protocol) ขอตกลงกนระหวาง 2 ฝายทใหเครองคอมพวเตอร สามารถสอสารกนไดอยางถกตอง บรการเวบจะทางานภายใต โปรโตคอล HTTP

โปรโตคอลจะเปนตวกาหนดวธการสงขอมลหรอไฟล ระหวางเครองคอมพวเตอรทเปน Client และ Server รวมถงการกาหนด กฏระเบยบในการตดตอดวย เราจะใชโปรแกรมประเภท Browser เปนตวชวยในการตดตอสอสาร

ความรเบองตนการใชงานอนเทอรเนต

อนเทอรเนต (Internet) หมายถง การเชอมตอเครอขายคอมพวเตอรเขาดวยกน โดยมขอกาหนดวาทกเครอขายทเชอมตอถงกน จะตองอยภายใตมาตรฐานของการเชอมตอ(โปรโตคอล) ทถกสรางขนมาเพอใชงานบนเครอขายแบบนโดยเฉพาะ ซงเรยกวา TCP/IP

ความรเบองตนการใชงานอนเทอรเนต

TCP ยอมาจาก Transmission Control Protocol เปนโพรโตคอลทควบคมการสงขอมลโดยอาศย IPIP Address เปรยบเสมอนบานเลขท นนกคอหมายเลข

C ใ kของเครอง Computer ทอยใน NetworkIP v.4 : 202.44.47.20 => 255.255.255.255IP local host : 192.168.0.1 IP Gateway : xxx.xxx.xxx.0IP v.4 Vs. IP v.6

Server : Hosting เครองใหบรการใชสาหรบจดเกบ Web ApplicationClient : PC, Notebook, PDA, Mobile

คอมพวเตอรหรออปกรณทตองการเขาถงขอมลDNS server : เครอง Server ทาหนาท

จบค IP/Domain Name

5

ความรเบองตนการใชงานอนเทอรเนต

ความรเบองตนการใชงานอนเทอรเนต

WWW (World Wide Web)

อาจเรยกสนๆ วา Web (เวบ) เปรยบเสมอนเปนหองสมด

ขนาดใหญทรวบรวมขอมลทมากทสดในโลกกวาได สามารถคนหาขอมลทตองการไดเกอบทกอยางจากบรการเวบ

ความรเบองตนการใชงานอนเทอรเนต

ขอมลในเวบจะอยในรปแบบทเรยกวา Hypertext และทาการเชอมโยง (Links) ขอความหรอ รปภาพ เขากบเอกสารอนๆ อยางเปนอสระตอกน

ความรเบองตนการใชงานอนเทอรเนต

Website (เวบไซต) หากอนเตอรเนตเปนหองสมดเวบไซตจะเปรยบเสมอนหนงสอหนงเลมในหองสมดโดยระบชอหนงสอในลกษณะทเรยกวา URL : (อานวา ย อาร

แอล))

เชน เวบไซตของกระทรวงเทคโนโลยสารสนเทศและการสอสารม URL หรอมชอเปน www.mict.go.th

6

ความรเบองตนการใชงานอนเทอรเนต

เวบเพจ (Web Page) และโฮมเพจ (Home Page) ถาเวบไซต คอ หนงสอหนงเลม เวบเพจ คอ หนากระดาษตางๆ ทบรรจเนอหาในหนงสอเลมนนโฮมเพจ คอ ปกหนาของหนงสอ เมอเรมเปดโปรแกรม Web โฮมเพจ คอ ปกหนาของหนงสอ เมอเรมเปดโปรแกรม Web

Browser โปรแกรมจะนาเขาสหนาแรกของเวบโดยอตโนมต

ความรเบองตนการใชงานอนเทอรเนต

ความรเบองตนการใชงานอนเทอรเนต

โปรแกรมเวบบราวเซอร (Web Browser) โปรแกรมเวบบราวเซอรเปนตวกลางทจะทาหนาทแปลงคาสงใหออกมาเปนรปภาพ เสยง และขอมลตางๆ บราวเซอรทผใชนยมใชกนกจะม

โปรแกรม Internet Explorer, Mozilla Firefox, Chrome และ Safari

ความรเบองตนการใชงานอนเทอรเนต

DNS : Domain Name System คอ ระบบการตงชอบนอนเทอรเนต ทรพยากรบนอนเทอรเนต

หมายเลขประจาเครองคอมพวเตอรเรยกวา IP การทจะจดจาหมายเลขประจาเครองนนทาไดยาก จงมวธการตงชอใหจดจาและใชงานงาย ระบบชอจงถกกาหนดใหเปนมาตรฐาน

โ โดยแบงตามลาดบขนตามสภาพภมศาสตร ประเทศ ประเภทขององคกร ชอองคกร

เชน www.artanddesign.ac.th “th” คอ ชอประเทศไทย ac คอ ประเภทองคกร artanddesign คอ ชอองคกร

7

ความรเบองตนการใชงานอนเทอรเนต

Domain ทนยมใชกนอยในปจจบน เชน

.com = กลมธรกจการคา (Commercial) .edu = กลมการศกษา (Education)

.gov = กลมองคกรรฐบาล (Government) .org = หนวยงานทไมหวงผลกาไร (Non-Commercial

organizations)

ความรเบองตนการใชงานอนเทอรเนต

ความหมายของ Sub Domain เชน

.co = องคการธรกจ (Commercial) .ac = สถาบนการศกษา (Academic) .go = หนวยงานรฐบาล (Government) .or = องคกรอน ๆ (Organizations)

ความรเบองตนการใชงานอนเทอรเนต

Domain Name ชอยอของประเทศ เชน

.th = Thailand .hk = Hong Kong .jp = Japan .sg = Singapore

.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 บาท

.biz 1 ป 600 บาท .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 บาท

ทมา : www.thnic.or.th

8

ความรเบองตนการใชงานอนเทอรเนต

Web 2.0 กคอ พฒนาการของการพฒนาเวบไซตทเนนความรวมมอ (Collaboration) ทการจดการเนอหาเวบไมตองผกขาดทเวบมาสเตอรแตเพยงผเดยว ผใช ผชมกมสทธรวมสรางสรรค แกไขเนอหาในเวบไซตได (หากไดรบสทธ) ตวอยางของการประยกตใชเทคโนโลย Web 2.0 ในปจจบนกคอ การ

เขยนเนอหา เลาเรอง หรอตชมตางๆ ผาน Blog ซงมจานวนสงมากขนมาปจจบน หรอการรวมกนเขยนบทความในเชงสารานกรมผานเวบไซตวกพเพย (http://th.wikipedia.org)W3C.org เปนหนวยงานผกาหนดมาตราฐานเทคโนโลยเวบไซต

HTML

HTML ยอมาจาก Hyper Text Markup Language เปนภาษาทใชในการพฒนาเวบเพจเพอใหโปรแกรมเวบบราวเซอร (Web Browser) ตางๆ สามารถแสดงผลไดถกตองHTML ซงเปนขอความ Text กบรหสทอยในเครองหมาย < >

และมนามสกลเปน .html โดยเมอเราอานผานโปรแกรมเวบบราวเซอร รหสเหลานจะถกแปลเปนลกษณะของการแสดงผลทหนาจอ เราจะเหนรปแบบทสมบรณผานการแปลความหมายแลวโดย

บราวเซอร (Web Browser)

HTML

สาหรบการสรางไฟล HTML จะตองอาศยโปรแกรมทมคณสมบตเปน Text Editor เชน Notepad,

Edit Plus ไฟลโดยจะตองมนามสกลเปน .html

ไฟ ใ โป ไป ทดสอบไฟลในโปรแกรมเวบบราวเซอรตอไปโปรแกรมสาหรบชวยในการเขยน HTML Microsoft Frontpage Adobe Dreamweaver CS (Macromedia Dreamweaver)

9

HTML

เอกสาร HTML เปนเอกสารทประกอบไปดวยขอมลทเราตองการเผยแพรผาน WWW และ ภาษา HTML ทใชกาหนดการแสดงผลของขอมลดงกลาว

ภาษา HTML เปนภาษาทอยในรปของ แทก (Tag) ทใชหอหมขอมลทเราตองการเผยแพรผาน WWW ซงการแสดงผลของเอกสาร HTML เราสามารถทจะดไดโดยใชโปรแกรมทเรยกวา เวบ บราวเซอร (Web Browser)

HTML

โครงสรางของภาษา HTML จะประกอบไปดวย 3 สวน ดงน

สวนทใชบอกจดเรมตนและจดสนสดของเอกสาร คอ แทก <html></html> สวนหวของเอกสาร HTML คอ แทก <head></head> ซงเราจะแสดงหวเรองของ เอกสาร HTML ไวในสวนนหวเรองของ เอกสาร HTML ไวในสวนน สวนทใชบอกจดเรมตนและจดสนสดของเนอหา คอ แทก

<body></body>

HTML

Create Website

สรางเวบไซดดวย Web Application Packet เวบสาเรจรป

สรางเวบไซดดวยโปรแกรมกราฟฟก Photoshop Flash

สรางเวบไซดดวยโปรแกรมมง HTML JavaScript PHP .Net

10

Page Size

ขนาดหนาของเวบเพจทนยมใชในปจจบนม 2 ขนาด คอ ระยะปลอดภย ขนาด 800X600 pixels จะสามารถแสดงหนาเวบไดครบถวนกบหนาจอทมขนาด 15 นวขนไป นยมใชงาน ขนาด 1024X 768 pixels เปนขนาดของหนาเวบเพจท

นยมมากทสดในปจจบน เพราะสามารถแสดงขอมลของเวบไดมากขนและงายตอการออกแบบดวย

Resolutions Size

สวนประกอบของเวบ

LOGO

สวนประกอบของเวบ

โลโก (Logo)

11

สวนประกอบของเวบ

สวนหวของเวบเพจ (Page Header)

สวนประกอบของเวบ

เมนหลก (Link Menu)

สวนประกอบของเวบ

สวนทใชแสดงเนอหาของเวบ (Page Body)

สวนประกอบของเวบ

สวนลางสดของเลบไซด (Page Footer)

12

สวนประกอบของเวบ

ชองทางการโฆษณาของเวบไซด (Banner)

ขนตอนในการพฒนาเวบไซต

LOGO

ขนตอนในการพฒนาเวบไซต

1 • เตรยมเนอหาทจะนาเสนอ

2 • ออกแบบหนาตาของเวบไซต

3 • เขยนและทดสอบ

4 • ลงทะเบยนชอเวบไซตและจดหาพนทเกบขอมล

5 • Upload เวบไซตและตรวจสอบความเรยบรอย

6 • ประกาศใหโลกรบร

ขนตอนในการพฒนาเวบไซต

เตรยมเนอหาทจะนาเสนอ

กาหนดเปาหมาย ( Target ) : จะทาเวบไซตเกยวกบเรองอะไรและเนอหาตางๆ ทาใหใคร (Visitor) : ผชมเวบคอใคร อยทไหน ภาษา วฒนธรรม กาหนดกรอบแนวคด (Concept) : ระเบยบความคดสเปาหมาย Technology : เลอกเทคโนโลย รวบรวมขอมล (Search) : รวบรวมวตถดบ จดเตรยมทรพยากร(Resource) : ซงหมายถง ขอความ, ภาพประกอบ, เสยง และอน ๆ ใหเปนหมวดหม

13

ขนตอนในการพฒนาเวบไซต

ออกแบบหนาตาของเวบไซต

Concept to Concept Design : นาแนวคดทวางไวมาออกแบบเวบไซต

• Theme : “แนว” ไหน?• Layout : เคาโครงแบบไหน?• Color : โทนส? กส? สสน อะไรบาง? • Font : ขอความ ชนด ขนาด ส

ขนตอนในการพฒนาเวบไซต

Web Structure โครงสรางของเวบไซต

ขนตอนในการพฒนาเวบไซต

รางรปแบบเคาโครงของเวบไซต

LOGO

Homepage | New | Product | About us | Member

list menulist menulist menulist menu

Content Content

Homepage | New | Product | About us | Member

ขนตอนในการพฒนาเวบไซต

ออกแบบหนาตาของเวบไซต

14

ขนตอนในการพฒนาเวบไซต

เขยนและทดสอบ

ลงมอเขยนโดยใชโปรแกรมสาหรบเขยนเวบไซต แลวทาการทดสอบการแสดงผลและ Link ตางๆ วาเชอมโยงไดถกตองหรอไม ในขนตอนนถามปรมาณขอมลมากและมการเชอมโยงทซบซอนกจะใ ป ใชเวลาคอนขางมากเพราะตองคอยปรบแกอยเรอย ๆ

ขนตอนในการพฒนาเวบไซต

ลงทะเบยนชอเวบไซตและจดหาพนทเกบขอมล

ตงชอเวบไซตทเหมาะสม จดหาพนทในการวางเวบไซต เชนเวบโฮสตงตางๆ จดหาและปรบแตงสภาพแวดลอมใหเหมาะสม เชน ฐานขอมล

ขนตอนในการพฒนาเวบไซต

นาเวบไซตทสรางขน Upload ขน Server และตรวจสอบความเรยบรอย

คอ การคดลอกขอมล จากเครองของเราไปเกบไวในเครอง Server ซงการคดลอกนเรยกวา Upload โดยใชโปรแกรมสาหรบการUpload เชน โปรแกรม WinSCP, CuteFtp, WS_FTP (โปรแกรม

Dreamweaver มความสามารถนอยแลว)

ขนตอนในการพฒนาเวบไซต

ประกาศใหโลกรบร

เมอตรวจสอบความเรยบรอยแลว กถงคราวทจะชกชวนใหผคนมาชมเวบไซต โดยประชาสมพนธผานทางสอตางๆ

• แลก Link กบเวบไซตอนๆ • ฝากขอความชกชวนไวตามกระดานขาวตางๆ• SEO : Search Engine Optimize