1lapaiamnok.files.wordpress.com  · Web view2013. 7. 18. · 2. Site map...

Dreamweaver    Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย 

    ช่วยให้คุณทำงานได้เร็วขึ้นนี่คือข้อดีอันดับต้นๆของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาขv’เว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง 

เป็น Editor ที่มีประสิทธิภาพตัวหนึ่งในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น 

เป็นโปรแกรมจัดการเว็บไซต์ที่ดีDreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น    1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสำรองไว้ในเครื่องเราตลอดด้วย   2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด

ช่วยให้เราทำเว็บได้ง่ายขึ้น

สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย    ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก

เครื่องมือต่างๆในโปรแกรม Dreamweaver

Dreamweaver

    สำหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" 

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

หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆ

อธิบายเครื่องมือต่างๆ   

  1.Document window    เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กำลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบเสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทำงานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บเพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป    ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย     2.Insert Bar

 ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้     1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ     2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ แบบ layout     3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น     4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก     5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น     6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ     7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้

3.Property inspector

    property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น     

4.docking panels

    เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels

 5.menu

    เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย     6.Status bar

    ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้      7.Document Tool bar

    ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title

ของหน้าเว็บเพจอีกด้วย หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา

เวอร์ชั่นล่าสุด CS6

Flash Dreamweaver

โปรแกรม Flash เป็นโปรแกรมที่ใช้ในการสร้างอนิเมชั่นต่างๆ หรือใช้เปิดไฟล์วิดีโอ เปิดเพลง ผ่านเว็บไซต์ แม้แต่กระทั่งทำอัลบัมภาพผ่านเว็บไซต์ ในปัจจุบันโปรแกรม Flash นั้นได้รับความนิยมมากในการทำเว็บไซต์ กระทั้งมีบางเว็บไซต์ที่สร้างเว็บด้วย Flash เลยก็มี 

แต่อย่างไรก็ดีการใช้ Flash นั้นก็มีข้อเสียอยู่เหมือนกัน คือ     1.ถ้าเราใช้ทำอนิเมชั่น ไฟล์จะมีขนาดใหญ่แล้วแต่ความซับซ้อนของอนิเมชั่นนั้น ทำให้การแสดงหน้าเว็บเพจทำได้ช้าลง     2.Search engine ต่างๆไม่สามารถอ่านข้อความที่อยู่ในไฟล์ Flash ได้ ทำให้เราเสียโอกาศในการอยู่ในอันดับดีๆของ search engine     3.ถ้าผู้ใช้ไม่มี Flash player จะทำให้ไฟล์ Flash ของเรานั้นไม่แสดงผล ดังนั้นเราควรใช้งานโปรแกรม Flash ให้เหมาะสมไม่ควรใช้มากเกินไป 

ข้อดีของ Flash มีอยู่มากมาย อย่างเช่น     1.ทำให้เว็บไซต์เราดูน่าสนใจมากขึ้น     2.สามารถเปิดไฟล์วิดิโอ หรือไฟล์เสียง ผ่านเว็บไซต์ได้     3.Flash นั้นปัจจุบันมีความสามารถมาก สามารถสร้างโปรแกรม หรือเกมดีๆ ได้เลย ถ้าเรานำมาประยุกต์ใช้ให้ถูกต้องจะทำให้เว็บของเรามีความสามารถมากขึ้น 

ไฟล์ Flash นั้นจะมี 2 แบบคือ1.swf เป็นไฟล์ที่เราสามารถใส่ได้ทุกที่ในเว็บเพจ2.flv เป็นไฟล์ Flash video 

การใช้งาน flash ร่วมกับ dreamweaver     เมื่อเราแทรกไฟล์ flash หรือ ไฟล์มัลติมีเดียต่างๆ ลงใน dreamweaver โปรแกรมจะทำการเขียน JavaScript ขึ้นมาโดยอัตโนมัติ ชื่อว่า AC_RunActiveContent.js ไฟล์นี้จะอยุ่ใน folder ชื่อว่า scripts การใช้งานจริงหรือการอัพโหลดข้อมูลสู่ webserver นั้นห้ามลืมที่จะอัพโหลดไฟล์นี้เด็ดขาด มิฉนั้นไฟล์ Flash หรือ ไฟล์มัลติมีเดีย ต่างอาจไม่แสดงผลได้

       Flash คืออะไร

Flash เป็นซอฟต์แวร์ ที่ใช้สร้างชิ้นงานกราฟิกที่พบเป็นส่วนมากบนเว็บไซด์ต่าง ๆ และสามารถพบชิ้นงาน Flash บน เกมส์  สื่อโฆษณาบนเว็บไซต์ อินเตอร์เฟสต่าง ๆ ที่อนุญาตให้มีการโต้ตอบกับผู้ใช้

ความสามารถของ Flash

-สร้างชิ้นงาน Interactive

มีส่วนตอบสนองกับผู้ใช้  เช่น ผู้ใช้สามารถคลิกเลือกเมนูต่าง ๆ ได้ นำไปประยุกต์เป็นสื่อการสอน   ( E- Learning ) หน้าจอควบคุมการทำงานต่าง ๆ สื่อโฆษณา                  ( Banner ) บนเว็บไซต์ การ์ตูนแอนิเมชันต่างๆ เป็นต้น

-สร้างชิ้นงาน Animation

จุดเด่นของการทำงานในโปรแกรม Flash คือการสร้าง Animation หรือ ภาพเคลื่อนไหว มีเครื่องมืออำนวยความสะดวก ทำให้โปรแกรม Flash สร้างผลงาน Animation ได้ง่าย

-สร้างเว็บไซต์ [ Website ]

โปรแกรม Flash สามารถสร้างเว็บไซต์ได้สวยงาม และสร้างลูกเล่นต่าง ๆ ได้ง่าย

มีจุดอ่อนคือ เว็บไซต์ที่สร้างด้วยโปรแกรม Flash แก้ไขข้อมูลได้ยาก และขนาดของไฟล์เว็บไซต์ค่อนข้างใหญ่

-สร้างเกมส์ [ GAME ]

FLASH มีเครื่องมือช่วยสร้างองค์ประกอบต่าง ๆ ให้เกมส์มีความสวยงาม มีเครื่องมือสำหรับสร้างคำสั่งควบคุมการเล่นเกมส์ อีกทั้งไฟล์เกมส์ที่สร้างออกมามีขนาดเล็ก ทำให้อัพโหลดสู่เว็บไซต์ได้อย่างรวดเร็ว

หมายเหตุ

สำหรับเอกสารนี้ จะนำเสนอแต่ การสร้างงาน Interactive และ Animation ซึ่งสามารถนำไปเผยแพร่ในลักษณะต่าง ๆ และใช้เป็นฐานในการสร้างเว็บไซด์ และเกมส์ได้

จุดเริ่มต้นใช้งานโปรแกรม Flash บน PC

ทำการติดตั้ง โปรแกรม และเรียกใช้

Start➪All Programs➪Adobe Flash Professional CS5.

ภาพ หน้าต่างเริ่มต้น

หากไม่ต้องการหน้าต่างนี้ปรากฏทุกครั้งที่เริ่มใช้งาน ให้กาเลือกที่กล่อง Don’t show again

สภาพแวดล้อม

ส่วนต่อประสานกับผู้ใช้ (user interface) ของFlash มีหลายลักษณะ ซึ่งผู้ใช้สามารถกำหนดตามความถนัดของตนเอง ในที่นี้รียกส่วนแสดงและแก้ไขชิ้นงานว่าเวที (Stage)

ภาพที่ 1.2  สภาพแวดล้อมของโปรแกรม

การใช้เครื่องมือ

แผง (Panel) เครื่องมือต่าง ๆ

เป็นส่วนที่ผู้ใช้สามารถใช้เครื่องมือ และกำหนดค่าของวัตถุ ส่วนใหญ่จะปรากฏในลักษณะยึดติด (dockable) กับหน้าต่างงาน ที่บริเวณกลุ่มของคุณสมบัติวัตถุที่เรียกใช้ ผู้ใช้สามารถเคลื่อนย้าย หรือปิดแผงงานเหล่านี้ ด้วยวิธีการเดียวกับการจัดการวัตถุบนหน้าต่างงาน ตัวอย่าง เช่น การย้ายแผงวัตถุ โดยการคลิกและลากบริเวณTitlebar คลิกปุ่ม Close เพื่อปิดแผงวัตถุหนึ่ง ๆ

 ภาพที่ 1.3 Icon Panel                 ภาพที่ 1.4 ขยายIcon ด้านซ้าย

Properties Inspector

เป็นส่วนอธิบายลักษณะของวัตถุบนเวที

VI.       เมนู

ชื่อเมนู

การใช้งาน

FILE

Open & close files, save files, import & export files, print, publish movies for the Web, send a movie via e-mail, & quit Flash.

Edit

undo & redo

Cut, Copy, Paste

delete, duplicate, select, deselect,

find & replace;

copy & paste entire frames & motions on the Timeline; edit symbols; set preferences

; customize the Tools panel; map fonts; & create keyboard

shortcuts for comm&s

View

Zoom in & out; show or hide the ruler, grid, & guides; choose a preview mode; & specify snapping preferences for objects for easy placement.

Insert

Insert symbols ;

insert and delete Timeline features,

insert layers; add scenes

Modify

Modify symbols, bitmaps, shapes, frames,

Timeline features and effects, scenes, or the entire movie (the document).

Transform, align, group, and ungroup objects; arrange objects; and break objects apart

Text

Format text

check spelling, and embed font

Commands

Reuse and manage saved commands.

Control

Control the playing of movies, test movies and scenes, access certain interactive functions, and mute sounds.

Debug

Debug ActionScript code.

Window

เปิดใช้งานแผงวัตถุต่าง ๆ

Help

เอกสารอธิบายการใช้งานโปรแกรม

การขอความช่วยเหลือใน Flash กด F1

เวอร์ชั่นล่าสุดCS6

Illustrator

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

    ภาพกราฟิกสามารถแบ่งได้เป็น 2 แบบคือ 

    1.ภาพแบบพิกเซล (pixel) คือ ภาพที่เกิดจากจุดภาพในรูปภาพที่รวมกันเป็นภาพขึ้น โดยภาพหนึ่งๆ จะประกอบไปด้วยจุดภาพหรือพิกเซลมากมาย และเเต่ละภาพที่สร้างขึ้นจะมีความหนาเเน่นของจุดภาพ หรือบางครั้งแทนว่าความละเอียด (ความคมชัด)ที่เเตกต่างกันไป จึงใช้ในการบอกคุณสมบัติของภาพ จอภาพ หรือ อุปกรณ์แสดงผลภาพได้ 

    2.ภาพกราฟิกส์เวกเตอร์ (vector graphics) คือ ภาพที่เกิดจากการกำหนดพิกัดและการคำนวณค่าบนระนาบสองมิติ รวมทั้งมุมและระยะทาง ตามทฤษฎีเวกเตอร์ในทางคณิตศาสตร์ ในการก่อให้เกิดเป็น เส้น หรือรูปภาพ

    ข้อดีคือ ทำให้สามารถย่อขยายได้ โดยคุณภาพไม่เปลี่ยนแปลง ข้อเสียคือภาพไม่เหมือนภาพจริงเป็นได้เพียงภาพวาด หรือใกล้เคียงภาพถ่ายเท่านั้น ข้อมูลภาพพวกนี้ได้เเก่ไฟล์สกุล eps, ai (adobe illustrator) เป็นต้น 

** โปรแกรม Illustrator ทำงานแบบ vector graphics     

ความแตกต่างระหว่างรูปแบบ vector และแบบ pixel

ภาพจาก wikipedia.org

ภาพแบบ pixel 

ภาพแบบ vector

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

    ถึงแม้ว่าปัจจุบัน Photoshop จะพัฒนาเครื่องมือที่สามารถสร้างภาพ vector ได้แต่ความสะดวกก็ยังไม่สู้การใช้งาน Illustrator อยู่ดี ซึ่งในการทำงานจริงๆแล้วจะต้องอาศัยเครื่องมือทั้ง Photoshop และ Illustrator ควบคู่กันจึงจะได้เป็นชิ้นงานขึ้นมา ซึ่งทั้ง 2 โปรแกรมก็ทำงานควบคู่กันได้ดี ส่วนหนึ่งก็มาจากว่าทั้ง 2 โปรมแกรมมาจากบริษัท

เวอร์ชั่นล่าสุด CS6