รายละเอียดหลักสูตร

Program ที่ใช้ในการเรียน (สามารถใช้ได้ทั้งใน PC และ Apple Macintosh)

Adobe Dreamweaver, Adobe Flash, Text Editor, Wordpress

จุดประสงค์การเรียนรู้

เป็นหลักสูตรที่เหมาะสำหรับคนที่ต้องการทำงานด้านเว็บ, ต้องการสร้างเว็บไซต์ของตนเอง ของบริษัท, ต้องการเป็นเว็บมาสเตอร์ สามารถออกแบบเว็บไซต์เพื่อนำไปใช้งานจริงได้ โดยหลักสูตรจะเน้นทางด้านการออกแบบ และพัฒนาเว็บไซต์โดยเฉพาะ

หลักสูตรได้ถูกออกแบบมาเพื่อรองรับความต้องการที่แตกต่างกันออกไปของผู้ เรียน โดยไม่ต้องลงเรียนแยกรายวิชา เนื้อหาในการเรียนเป็นถูกคัดสรรคื มาให้เหมาะกับโลก Internet ที่พัฒนาไปอย่างรวดเร็ว ทั้งการทำ SEO search engine optimization ที่จะทำให้คุณออกแบบ Website ให้ติด Google หน้าแรกๆ การออกแบบ Website ด้วยระบบ 960 Grid system ทั้งระบบ การสร้าง Web  ด้วย Xhtml และ CSS การใช้ Java Script สำเร็จรูป และ Jquery ในแบบต่างๆ

การติดตั้งใช้งาน และปรับแต่ง ข้อมูล รูปร่างหน้าตาของ Website ด้วย CMS (Content Management System) Wordpress ที่พร้อมใช้งานได้และมั่นใจว่าคุณจะได้ Website ที่ได้มาตรฐานแบบมืออาชีพ
ผู้เรียนจะได้ลองสร้างเว็บไซต์จริงๆของท่าน โดยทาง iSchool จะแนะนำวิธีการเลือกโฮสติ้งแบบต่างๆ การอัพโหลดเว็บเพจ สู่โฮสติ้งจริง

พี้นฐานของผู้สมัครเรียน

ผู้เรียนไม่จำเป็นต้องมีความรู้ทางด้านโปรแกรมกราฟฟิค แต่หากผู้เรียนมีพื้นฐานเบื้องต้นเกี่ยวกับโปรแกรมกราฟฟิค เช่น การใช้โปรแกรม Photoshop หรือ ImageReady ก็จะเป็นการทำให้เว็ปไซต์มีความสวยงามและหลากหลายมากขึ้น

ครั้งที่ 1 Introduction to Internet and website 2.0<

• Internet คืออะไร , Homepage, Website, E-Commerce คืออะไร และรู้จักความหมายของ HTML, DHTML, XML, WWW, Web Server, Browser, CGI etc.
• รู้จักกับ Protocols ต่างๆเช่น TCP/IP, HTTP, PPP, Search Engine, Index.html?
• รู้จักโครงสร้างภาษา HTML ฝึกสร้างโฮมเพจด้วยจากพื้นฐานของ HTML จากโปรแกรมง่ายๆอย่าง Notepad, คำสั่งภาษา HTML ที่ควรทราบ , การใส่สี , จัดหน้ากระดาษ , การใส่รูปภาพ
• รู้จักกับโครงสร้างพื่นฐานของ Website การออกแบบ Site map
• ความรู้เบื้องต้นของการทำ Search engine optimization เรียนรู้การออกแบบ Website และการจัดการ ให้ติดหน้าแรก google รู้จักกับ Page rank การสร้าง Keyword, การใส่ tag  h1, h2, h3, การจัดหน้าเพื่อให้ได้ Page rank สูง

ครั้งที่ 2 เทคนิคในการจัดการกับรูปภาพและออกแบบด้วย PhotoShop CS3

รู้จักโปรแกรม Photoshop CS3 เพื่อการสร้าง website

• เข้าใจหลักการทำงานของโปรแกรม  Adobe Photoshop CS3 สำหรับงาน  Graphic Design
• การตั้งหน้าจอ 820 or 960 px
• โหมดสีที่ใช้สำหรับทำงาน Website, การใช้เครื่องมือจาก Tool Box, ทำความรู้จักกับ Palette ต่างๆ, หลักการทำงานแบบ Layer
• การเลือกมุมภาพ , การใช้งานแถบเครื่องมือ , การใช้งานเมนู , การใช้งานเครื่องมือช่วยเหลือ
• การใช้เครื่องมือ Selection Tool , การใช้เครื่องมือ  Rectangular marquee tool , การใช้เครื่องมือ Elliptical Marquee tool
• การใช้เครื่องมือ Magic wand , การใช้เครื่องมือ lasso tool , การรวม Selection  , การ  Crop รูปภาพ
• การสร้าง Path  และ  Clipping Path
• หลักการทำงานแบบ Layer ,  การลิงค์ Layer , การใส่ค่ากราเดียนให้กับ Layer , การเพิ่มตัวอักษร , การรวมเลเยอร์
• การใช้งาน Mask และการทำ Layer Mask
• การใช้งาน Clipping Mask
• การใช้งาน Quick Mask

ครั้งที่ 3 เทคนิคในการจัดการกับรูปภาพและออกแบบด้วย PhotoShop CS3

• การพิมพ์ตัวอักษาด้วย Type Tool แบบต่างๆ
• การตกแต่งรูปภาพด้วยเมนู  image และ Filter
• การปรับแต่งสีให้กับภาพถ่าย : Brightness/Contrast, Color Balance, Level
• การย่อ-ขยาย ปรับแต่งรูปทรงให้กับภาพด้วยคำสั่ง Transform, Rotate, Stretch, Scale
• การบันทึกงาน (Safe File) ใน Format ต่างๆ
• การตัด design เพื่อใช้ทำหน้า website
• ทฤษฎีการออกแบบ website: ส่วนประกอบต่างๆ, การสร้าง Wire-frame, การใช้งาน 960 Grid system  ทั้งแบบ 12 และ 16 Column
  

ครั้งที่ 4 การใช้สร้างโฮมเพจด้วย Macromedia Dreamweaver 1

รู้จักกับโปรแกรมสร้างเว็ป Macromedia Dreamweaver และหลักการสร้าง web  ด้วย CSS

• เรียนรู้โครงสร้างพื้นฐานของ CSS และ XHTML
• รู้จักการตัดและปรับแก้ code html ให้ได้มาตราฐานตาม Standard XHTML
• เรียนรู้ Code พื้นฐานของ HTML เช่น การ link, การตั้งค่า Paragraph
• การสร้าง Code HTML ด้วยการใช้ div เพื่อให้ website ของเราสามารถรองรับได้ดีกับทุก Browser
• เรียนรู้ Code พื้นฐานของ CSS และ XHTML เช่น Margin, Padding, Width, Height, Float, Clear

ครั้งที่ 5 การใช้สร้างโฮมเพจด้วย Macromedia Dreamweaver 2

• ลงรายละเอียดเกี่ยวกับ CSS และ XHTML ที่ควรรู้ โดยเริ่มจากการนำ Web Design ที่เตรียมไว้ (หรือใช้ web design ตัวอย่าง) มาตัดเป็น XHTML + CSS ให้ได้
• เรียนรู้การใช้ Code Reset CSS เพื่อให้แสดงผลได้เหมือนกันในทุก Browser
• ทำความรู้จักกับ Text Editor ทั่วไป

Workshop: ตัด HTML จากที่ออกแบบไว้

การบ้าน: ตัด HTML เพิ่มเติม กรณีสนใจทำเว็บหลายๆ หน้าที่มีหน้าตาต่างๆ กัน

ครั้งที่ 6 การใช้สร้างโฮมเพจด้วย Macromedia Dreamweaver 3

• การทำงานกับตัวอักษรและข้อความ การกำหนด Font และขนาดตัวอักษร การตกแต่งสี รูปแบบ และ ตำแหน่งตัวอักษร การจัดลำดับ Ordered List และ Unordered List
• การใส่รูปภาพใน WebPage, ชนิดและคุณสมบัติต่างๆ ของไฟล์รูปภาพที่สามารถใช้ในเว็ปได้ การจัดตำแหน่งและกำหนดขนาดของรูปภาพ
• การใช้ตาราง (Table) ในการกำหนดสัดส่วนหน้าเว็ปแบบมืออาชีพ , สร้าง Form สั่งซื้อสินค้า , การสร้าง Link ไปยังเอกสาร HTML หน้าอื่น , การสร้าง Link แบบต่างๆ, การใส่ไฟล์เสียงและไฟล์วีดีโอให้กับโฮมเพจ , ทำให้เว็ปสามารถ Download ข้อมูลได้
• การใส่ Keyword เพื่อค้นหาได้ใน Search Engine, การทำ Picture Mapping ลิงค์หลายจุดในภาพเดียว , การใส่ลูกเล่นต่างๆให้กับโฮมเพจเช่น Rollover Image.

ครั้งที่ 7 ทดลองทำ ​Website ของตัวเอง

• ทบทวนการใช้งาน XHTML และ CSS

Workshop: ติดตั้ง และสร้างเว็บของตนเอง

การบ้าน: ศึกษา HTML เบื้องต้น, เตรียม Web Design ที่ต้องการนำมาใช้กับระบบ

ครั้งที่ 8 การ Upload ไฟล์ขึ้นสู่ Server การใช้งาน Hosting

• ทดลอง Upload ไฟล์ขึ้นสู่ Server, ทดลองใช้ไฟล์ Manager เพื่อจัดระบบเว็ปไซต์ให้พร้อม Online บนโลกอินเตอร์เน็ต
• ติดตั้ง Plugin ที่น่าสนใจต่างๆ เพื่อทำให้เว็บของเรามีความสามารถที่หลากหลาย เช่น ทำเป็นเว็บแสดงเนื้อหา, เว็บแคตาล็อก, เว็บแกลอรี
  

ครั้งที่ 9 การใช้งาน Wordpress เบื้องต้น

• เรียนรู้การติดตั้ง Wordpress CMS ยอดฮิต ขึ้น  Server
• เรียนรู้การ ติดตั้งและใช้งาน Theme, Plugin ต่างๆ
• ทำการเพิ่ม Edit Page และ Post
• ทำการปรับแต่งค่า Setting ต่างๆที่จำเป็นของ Website เช่น  ค่า Writing, Reading, Discussion
• ทำลองใช้ Plugin ที่โรงเรียนแนะนำเช่น Web gallery, Beautyful URL, E-commerce system, Webboard ทำเว็บ Gallery,

ครั้งที่ 10 การปรับแต่ง Wordpress เบื้องต้น

• เรียนรู้แรับแต่ง หน้าตาของ Website หรือ theme ต่างๆ เพื่อให้ได้ Web ที่เราต้องการ
• เรียนรู้และ ทดลองใช้ CSS Editer ในการ Edit CSS file ของ  Wordpress
• ทำเว็บแสดงสินค้า – แคตาล็อก ฯลฯ และกล่าวถึง CMS ตัวอื่นๆ บ้างเล็กน้อย เช่น Drupal, phpBB, UNB, SMF, Zenphoto, Gallery 2

Workshop:ทดลองนำ Wordpress มาปรับใช้กับ Website ของตัวเอง

ข้อดีของการใช้ CSS

1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว

2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว และที่สำคัญ Google track keyword ได้เร็วกว่า Html  แบบ  table  มากๆ

3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร

4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser

5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน

6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี

ตรวจสอบตารางเรียน