เรื่อง หลักการสร้างเว็บไซต์และรู้จักกับDreamweaver CS3
เวิลด์ไวด์เว็บ (World Wide Web หรือ WWW ) หรือที่เรียกกันสั้นๆ ว่า เว็บ (Web) เป็นบริการข้อมูลข่าวสารในแบบสื่อประสมหรือมัลติมีเดีย (Multimedia) กล่าวคือ ข้อมูลเหล่านี้จะเป็นข้อมูลที่มีทั้งข้อความ, ภาพ และเสียงประกอบกัน แทนที่จะมีเพียงตัวอักษรละลานตาเพียงอย่างเดียว จึงสามารถเรียกร้องความสนใจจากผู้ชมได้เป็นอย่างดี
ความก้าวหน้าของเทคโนโลยีปัจจุบัน ทำให้ข้อมูลประเภทนี้สามารถแสดงภาพเคลื่อนไหวในแบบของภาพยนตร์ และแสดงเสียงได้คุณภาพระดับเดียวกับแผ่นซีดีเลยทีเดียว
ข้อมูลนี้จะถูกแบ่งเป็นหน้า ๆ แต่ละหน้าจะถูกเขียนขึ้นด้วยภาษาทางคอมพิวเตอร์ที่พัฒนาขึ้นใหม่ เรียกว่าภาษา HTML (Hyper Text Markup Language) ซึ่งสามารถเชื่อมโยงถึงกันได้โดยไม่จำเป็นต้องอยู่ที่เดียวกัน ดังนั้น ข้อมูลจากทุกมุมโลกจึงถูกโยงใยไปมาถึงกันได้ราวกับใยแมงมุม
จึงเรียกว่า เวิลด์ไวด์เว็บ หรือ เครือข่ายใยแมงมุม
< ส่วนประกอบใน WWW
– Home Page
เว็บเพจหน้าแรกสุดของข้อมูลแต่ละเรื่อง ซึ่งก็เปรียบเสมือนหน้าปกของหนังสือนั่นเอง ส่วนของโฮมเพจนี้จะเป็นส่วนที่บอกให้ทราบว่าข้อมูลนี้เป็นข้อมูลเรื่องใด พร้อมกับมีสารบัญในการเลือกไปยังหัวข้อต่างๆ ในเรื่องนั้นๆ ด้วย
– Web Site
เป็นเครื่องมือที่ใช้ในการจัดเก็บเว็บเพจแต่ละองค์กรที่จะนำเสนอข้อมูลของตนในรูปของเว็บนี้มักจะมีเว็บไซต์เป็นของตนเอง และมักใช้ชื่อองค์กรเป็นชื่อเว็บไซต์เพื่อให้ผู้สนใจสามารถจดจำได้ง่าย
– Web Page
เอกสารข้อมูลในแต่ละหน้าซึ่งถูกเขียนขึ้นด้วยภาษา HTML ข้อมูลที่แสดงในเว็บเพจแต่ละหน้านี้อาจประกอบด้วยข้อความ , ภาพ และเสียง จึงเป็นข้อมูลแบบสื่อประสม หรือ มัลติมีเดีย
– เว็บบราวเซอร์ (Web Browser)
เว็บเพจแต่ละหน้าเป็นเอกสารข้อมูลที่ถูกเขียนขึ้นด้วยภาษา HTML ดังนั้น การที่เครื่องของเราจะอ่านและแสดงผลเว็บเพจเหล่านี้ได้ จะต้องมีโปรแกรมพิเศษสำหรับทำหน้าที่นี้โดยเฉพาะ โปรแกรมเหล่านี้ เรียกว่า เว็บบราวเซอร์ (Web Browser) ซึ่งมีอยู่มากมายในปัจจุบัน แต่ที่รู้จักกันดีเห็นจะได้แก่ Internet Explorer ของบริษัทไมโครซอฟท์ และ Netscape Navigator ของ AOL ซึ่งทั้งสองโปรแกรมนี้มีขีดความสามารถที่ใกล้เคียงกันเป็นอย่างมาก
< การสร้างเว็บเพจ
การสร้างเว็บเพจ จะกระทำได้ 2 ทางด้วยกัน คือ
1. สร้างขึ้นเอง
โดยการเรียนรู้คำสั่งของภาษา HTML แล้วพิมพ์เข้าไปผ่านทางโปรแกรม Text Editor ใดๆ เช่นNotepad โดยตรง
2. ใช้โปรแกรมสำหรับสร้างเว็บ
โดยใช้โปรแกรมต่าง ๆ ที่มีความสามารถในการสร้างเว็บเพจ ซึ่งมีอยู่มากมายหลายโปรแกรมด้วยกัน การสร้างเว็บเพจด้วยวิธีนี้
เราไม่จำเป็นต้องเรียนรู้คำสั่งของภาษา HTML แต่อย่างใด โปรแกรมเหล่านี้จะทำการแปลงให้เราเองโดยอัตโนมัติ ปัจจุบันมีโปรแกรมที่กำลังได้รับความนิยม Adobe Dreamweaver CS3, Adobe Dreamweaver UltraDev , Adobe HomeSite , Microsoft FrontPages
< ภาษา HTML
HTML (Hypertext Markup Language) เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์
เพื่อตอบสนองในการแสดงผลบนจอภาพในระบบอินเตอร์เน็ต (Internet) ในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ทั้งภาษาไทยและภาษาอังกฤษ รวมทั้งรูปทรงกราฟฟิค, ภาพนิ่ง, ภาพเคลื่อนไหว, เสียง หรือแม้กระทั่งการเชื่อมโยงไปยังเว็บไซต์อื่นๆ ในระบบอินเตอร์เน็ต
ภาษา HTML เป็นภาษาที่มีลักษณะเป็น โค้ด (Code) กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของ รหัสแอสกี
(ASCII Code) โดยเขียนอยู่ในรูปของเอกสารข้อความ (Text Document) ดังนั้นจึงทำให้ง่ายต่อการเรียนรู้ สามารถกำหนดรูปแบบและโครงสร้างได้ง่ายด้วยภาษาHTML นี้ได้ถูกพัฒนาตั้งแต่รุ่น 1.0 , 2.0 , 3.0 จนถึงรุ่น 4.0 ในปัจจุบัน นอกจากนี้ ภาษา HTML
ยังมีลักษณะพิเศษที่ควรทราบดังนี้
สามารถใช้ได้กับโปรแกรมสร้างและแก้ไขไฟล์ข้อความ (Text Editor) ได้แก่ Notepad, Word Processing ต่างๆ ซึ่งง่ายต่อการเรียนรู้
และไฟล์ที่ได้จะมีขนาดเล็ก
HTML ที่ถูกบันทึกใน Text Editor จะมีชนิดของไฟล์เป็น HTM สำหรับในระบบปฏิบัติการ MS-DOS และจะมีชนิดเป็น HTM หรือ HTML ในระบบปฏิบัติการยูนิกซ์ , วินโดวส์
สามารถทำงานได้บนเว็บบราวเซอร์ทุกตัวที่สนับสนุน HTML ได้แก่ Netscape รุ่นต่างๆ Microsoft Internet Explorer , American Online , Mosaic เป็นต้น
< โครงสร้างของภาษา HTML
การสร้างเอกสาร HTML มีองค์ประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นข้อความที่จะพิมพ์ และส่วนที่เป็นคำสั่ง สำหรับส่วนที่เป็นคำสั่งที่จะนำมาใช้เพื่อเปลี่ยนแปลงรูปร่างและแบบของตัวอักษรหรือเอกสารใด ๆ(Attribute) จะถูกเรียกว่า แท็ก (Tag) และจะเขียนไว้อยู่ในเครื่องหมาย < > ในรูปแบบ <แท็ก> เช่น <HTML>, <B> ,<U> เป็นต้น
โดยแต่ละแท็กจะทำหน้าที่แตกต่างกันไป แบ่งออกเป็น 2 กลุ่ม ดังนี้
1. รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีแท็กเดียว สามารถใช้งานได้เลยและสิ้นสุดความหมายด้วยตัวมันเอง เช่น <BR> , <WBR> เป็นต้น
2. รูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน หรือแท็กคู่ คือ มีส่วนเริ่มต้นและส่วนจบของคำสั่ง โดยที่ส่วนจบของรูปแบบคำสั่งจะมีเครื่องหมาย Slash ( / ) กำกับไว้หน้าแท็กนั้น ๆ
ตัวอย่างเช่น
<HTML>………</HTML>
<B>……………</B>
<U>……………</U> เป็นต้น
ในการเขียนรูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน หรือแท็กคู่ คำสั่งนั้นจะต้องเป็นคำสั่งที่สมมาตรกัน เช่น เมื่อเปิดด้วยคำสั่ง ตัวหนา <B> และขีดเส้นใต้ <U> เวลาปิดคำสั่งก็ต้องเปิดด้วยขีดเส้นใต้ก่อนแล้วจึงปิดด้วยคำสั่งตัวหนา ดังนี้
– คำสั่งในการกำหนดโครงสร้างหลัก
รูปแบบการจัดวางต่อไปนี้เป็นรูปแบบมาตรฐาน ประกอบไปด้วยคำสั่งหลักอยู่ 4 คำสั่ง โดยมีลักษณะการจัดวางและรายละเอียดดังนี้
- คำสั่งหลัก <HTML> ………</HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดจบของเอกสาร HTML
- คำสั่งหลัก <HEAD> …… </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยจะประกอบด้วยคำสั่งหลัก <TITLE> …… </TITLE> ซึ่งเป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบชื่อเรื่อง (Title bar) โดยกำหนดความยาวของข้อความได้ไม่เกิน 64 ตัวอักษร
- คำสั่งหลัก <BODY> …… </BODY> เป็นคำสั่งที่ทำหน้าที่กำหนดข้อความ และรูปแบบคำสั่งใดๆ ที่ต้องการปรับแต่งเอกสารบนส่วนของจอภาพ และจะแสดงผลบนจอภาพเมื่อถูกเรียกใช้จากเว็บบราวเซอร์
การเรียกใช้โปรแกรม Adobe Dreamweaver CS3
1) การเรียกใช้โปรแกรม Adobe Dreamweaver CS3 สามารถเรียกใช้ได้ 2
วิธี ดังนี้
วิธีที่ 1 เรียกจากปุ่ม Start
1. คลิกเมาส์ที่ปุ่ม Start
2. เลื่อนเมาส์ไปที่ Programs หรือ All Programs
คลิกเมาส์ที่ชื่อ Adobe Dreamweaver CS3 จะเข้าสู่ โปรแกรมได้ทันที
วิธีที่ 2 เรียกจากไอคอนบนเดสก์ทอป
1.
ดับเบิ้ลคลิกเมาส์ที่ไอคอนโปรแกรม บนเดสก์ทอปจะเข้าสู่โปรแกรมได้ทันที
2) เมื่อเปิดโปรแกรมแล้วจะแสดงหน้าต่างที่เรียกว่า Start page ที่มีตัวเลือก ดังนี้
1. Open a Recent Item เปิดเอกสาร (หน้าเว็บ) เดิมที่สร้างไว้
2. Create New
สร้างเอกสารเปล่าตามรูปแบบที่เราเลือก เช่น HTML, ColdFusion, PHP, ASP, CSS
3. Create from Samples สร้างเอกสารจากต้นแบบ จะได้เอกสารที่มีเนื้อหาเริ่มต้น ไม่ใช่เอกสารเปล่า ให้เราใช้แก้ไขต่อไปได้
ซึ่งในที่นี่ เราจะคลิกเลือกเป็น เพื่อสร้างหน้าเอกสาร HTML ขึ้นมาใหม่ จากนั้นจะเข้าสู่หน้าจอเริ่มต้นของโปรแกรม Dreamweaver
การเรียกใช้คำสั่งของโปรแกรม
การเรียกใช้คำสั่งในโปรแกรมทำได้ 2 วิธี ดังนี้
การเรียกใช้คำสั่งจากแถบเมนู
แถบเมนู (Menu bar) เป็นส่วนที่แสดงคำสั่งที่ถูกจัดไว้เป็นกลุ่มๆ เรียกว่า เมนู เพื่อความสะดวกในการเรียกใช้ การเรียกใช้คำสั่งในแต่ละเมนูจะกระทำได้ดังนี้
1. คลิกที่ชื่อเมนู
2. คลิกที่ชื่อคำสั่ง
การเรียกใช้คำสั่งจากเมนูลัด
(Context menu)
เมนูลัด (Context Menu) จะเป็นคำสั่งพิเศษที่โปรแกรมจัดเตรียมไว้ให้ โดยคำสั่งเหล่านี้จะเปลี่ยนไปตามงานที่เราทำขณะนั้นการเรียกใช้เมนูลัดจะกระทำได้โดย
การยกเลิกคำสั่งและการทำซ้ำ
เลือกคำสั่ง Edit > Undoและ
เลือกคำสั่ง Edit > Redo
การเรียกใช้ส่วนช่วยเหลือของโปรแกรม
โปรแกรม Dreamweaver ได้จัดเตรียมส่วนช่วยเหลือไว้ให้เราเรียกใช้งานได้ทันทีเมื่อเราอยากทราบเกี่ยวกับการใช้งานของโปรแกรม โดยสามารถเรียกใช้ได้ 2 วิธีดังนี้
วิธีที่ 1 จากเมนูคำสั่ง Help โดยคลิกเลือกคำสั่ง Help >>> Using Dreamweaver
การออกจากโปรแกรม
การออกจากโปรแกรม Dreamweaver CS3 สามารถทำได้ 3 วิธี ดังนี้
วิธีที่ 1 เลือกเมนูคำสั่ง File เลือกคำสั่ง Exit
วิธีที่ 2 คลิกที่ปุ่ม ของหน้าต่างโปรแกรม
วิธีที่ 3 คลิกที่ไอคอน Adobe Dreamweaver CS3
ที่มุมบนซ้ายของหน้าต่างโปรแกรม แล้วเลือกคำสั่ง Close ดังรูป
ส่วนประกอบของโปรแกรม Dreamweaver CS3
แถบสถานะ (Status bar)
แถบสถานะของ Dreamweaver จะแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่เรากำลังทำ โดยมีส่วนประกอบต่างๆ
ดังนี้
* ส่วนไว้เลือกแท็ก HTML (Tag Selector) : จะแสดงแท็ก HTML ของตำแหน่งที่เราคลิกเลือกบนหน้าเว็บ เช่น เราคลิกเลือกตาราง ก็จะแสดงแท็ก <tabel> ซึ่งจะมีประโยชน์มากในการเลือกจุดแก้ไข เพราะสามารถเลือกจุกหรือแท็กที่ต้องการได้อย่างแม่นยำ
* ขนาดของหน้าจอออกแบบเว็บเพจ (Window Size) : จะแสดงขนาดของหน้าต่างออกแบบเว็บเพจ
* เครื่องมือปรับการแสดงผลหน้าเว็บขณะออกแบบ : Zoom Tool ใช้สำหรับย่อขยายหน้าเว็บให้เห็นรายละเอียดชัดขึ้น หรือใช้ Hand Tool เลื่อนดูหน้าเว็บในส่วนที่มองไม่เห็น
* ขนาดของหน้าเว็บและเวลาที่ใช้ในการโหลด : จะแสดงเวลา (โดยประมาณ) ที่ใช้ในการโหลดหน้าเว็บเพจที่เราสร้าง โดยถ้าหน้าที่เราสร้างมีขนาดใหญ่เพราะมีข้อความ และรูปภาพจำนวนมาก ก็จะทำให้ต้องใช้เวลาโหลดนาน นอกจากนั้นความเร็วในการโหลดหน้าเว็บขึ้นอยู่กับความเร็วในการโอนย้ายข้อมูลของผู้ใช้ที่เชื่อมต่อกับเครือข่ายอินเทอร์เน็ตด้วย โดยเริ่มแรก Dreamweaver จะแสดงเวลานี้โดยอ้างอิงกับโมด็มความเร็ว 60 k (เราสามารถเปลี่ยนค่านี้ได้ในบทการปรับแต่งค่า Dreamweaver)
แท็บเครื่องมือ
เป็นเครื่องมือที่ใช้สำหรับสร้างองค์ประกอบต่าง ๆ (เราเรียกองค์ประกอบเหล่านี้ว่าออบเจ็ค) ที่จะนำมาสร้างหน้าเว็บเพจ โดยกลุ่มเครื่องมือจะถูกเก็บไว้เป็นกลุ่มในแท็บต่างๆ 7 แท็บ ดังนี้
แท็บ Common: เป็นแท็บที่รวบรวมเครื่องมือต่างๆที่เราเรียกใช้งานบ่อย ได้แก่ การแทรกภาพ การแทรกตาราง เป็นต้น
แท็บ Layout: เป็นแท็บที่รวบรวมเครื่องมือที่ช่วยในการจัดองค์ประกอบบนหน้าเว็บ
แท็บ Forms: เป็นแท็บที่รวบรวมเครื่องมือที่ใช้ในการสร้างแบบฟอร์มสอบถาม และตัวเลือกต่างๆ
แท็บ Data: เป็นแท็บที่รวบรวมเครื่องมือสำหรับสร้างแอพพลิเคชั่นติดต่อกับฐานข้อมูล
แท็บ Spry: เป็นแท็บที่รวบรวมเครื่องมือที่ช่วยให้การสร้างฟอร์มได้รวดเร็วขึ้น
แท็บ Text: เป็นแท็บที่รวบรวมเครื่องมือสำหรับวาง และปรับแต่งตัวอักษรบนหน้าเว็บ
แท็บ Favorites: เป็นแท็บที่รวบรวมเครื่องมือที่ใช้บ่อยจากแต่ละกลุ่มเครื่องมือมาใส่ในเมนูนี้ได้
องค์ประกอบของหน้าเว็บเพจ
ในหน้าเว็บเพจอาจประกอบด้วยองค์ประกอบหลายแบบหลายชนิด เช่น เนื้อความ , รูปภาพ , ภาพเคลื่อนไหว และเสียงประกอบ เป็นต้น องค์ประกอบเหล่านี้ เราเรียกว่า ออบเจ็ค (Object)
ดังตัวอย่างด้านล่าง
ในโปรแกรม Dreamweaver CS3นี้ เราสามารถสร้างและใส่ออบเจ็คชนิดต่างๆ ได้อย่างง่ายดาย ซึ่งจะอธิบายการใช้งานออบเจ็คแต่ละชนิดต่อไป
กำหนดคุณสมบัติขององค์ประกอบต่างๆบนหน้าเว็บ (Property
Inspector)
เมื่อใดที่เราคลิกเลือกภาพ หรือองค์ประกอบต่างๆบนหน้าเว็บ จะปรากฏ Property Inspector ที่แสดงค่าต่างๆของภาพให้เราปรับแต่งคุณสมบัติที่เกี่ยวข้องกับองค์ประกอบนั้นได้ ดังตัวอย่างเมื่อเราคลิกเลือกที่ภาพ Property Inspector ก็จะแสดงคุณสมบัติต่าง ๆของภาพให้เราปรับแต่งได้ ดังรูป
มุมมองในหน้าต่าง Document
ใน Dreamweaver สารมารถเลือกมุมมองการทำงานได้ 3 รูปแบบ ให้เราเลือกใช้ได้ตามความถนัดของเราโดยการคลิกไอคอนที่อยู่ในทูลบาร์ ดังนี้
- Show Code View
คลิกที่ จะปรากฏมุมมองแสดงโค้ด HTML หรือสคลิปต์ต่างๆ ของหน้าเว็บเพจที่เรากำลังทำงานอยู่ ซึ่งเหมาะสำหรับผู้สร้างเว็บไซต์ที่สามารถเขียนโค้ด HTML หรือสคริปต์ต่างๆได้
- Show Code and Design View
คลิกที่ จะแสดงทั้งโค้ดพร้อมทั้งหน้าเว็บเพจที่เรากำลังทำงานอยู่ เหมาะสำหรับผู้ใช้ที่ต้องการดูการแสดงผลโค้ดของหน้าเว็บเพจที่ใช้ในการออกแบบ
- Show Design View
คลิกที่ สำหรับแสดงหน้าจอออกแบบเว็บเพจที่ไม่มีการแสดงโค้ดต่างๆ เหมาะสำหรับผู้ที่สร้างเว็บไซต์ที่ไม่รู้เกี่ยวกับการสร้างเว็บไซต์ด้วยภาษา HTML หรือสคริปต์ต่างๆ เพราะสามารถจัดองค์ประกอบของภาพและข้อความบนหน้าเว็บนี้ได้อย่างง่ายๆ
กลุ่มหน้าต่างพาเนล (Panel Group)
ในโปรแกรม Dreamweaver มีหน้าต่างพาเนลต่างๆที่ช่วยเพิ่มความสามารถในการจัดการ และออกแบบหน้าเว็บของเราได้ ซึ่งแต่ละพาเนลจะมีความสามารถในการจัดหน้าเว็บได้ไม่เหมือนกัน
เราสามารถเรียกเปิดพาเนลได้จากเมนูคำสั่ง Window > และเลือกพาเนลที่ต้องการดังนี้
พาเนล CSS
พาเนล CSS เป็นพาเนลที่ใช้ในการกำหนดรูปแบบการแสดงหน้าเว็บ พาเนลนี้ประกอบไปด้วยแท็บ CSS Styles และแท็บ AP Elements
พาเนล Application
พาเนล Application เป็นพาเนลที่เกี่ยวกับการเชื่อมโยงเว็บไซต์ของเรากับฐานข้อมูลบนเครื่องเซิร์ฟเวอร์ โดยพาเนลประกอบไปด้วยแท็บ Database, แท็บ Bindings, แท็บ Sever Behaviors และแท็บ Components
พาเนล Tag
Inspector
พาเนล Tag จะรวบรวมการใช้งานแท็กคำสั่งของ CSS (Cascade Style Sheet) ทั้งหมด ซึ่งในพาเนลนี้จะมีส่วนประกอบทั้งหมด 2 แท็บ คือ แท็บ Attributes และแท็บ Behaviors
พาเนล Files
พาเนล Files เป็นพาเนลที่บอกว่าภายในเว็ปไซต์ของเรามีเว็บเพจ และโฟลเดอร์อะไรเก็บอยู่บ้าง โดยจะประกอบด้วยแท็บ Fikes, แท็บ Assets และแท็บ Snippets ที่อำนวยความสะดวกให้กับคนที่สร้างเว็บเพจในการแก้ไขโค้ด HTML และการแทรกภาษาสคริปต์ต่างๆ
การพับเก็บกรอบหน้าต่างพาเนล
หากไม่จำเป็นต้องปรับค่าจากพาเนล เราสามารถพับเก็บกรอบหน้าต่างพาเนล เพื่อเพิ่มพื้นที่ในการตกแต่งเว็บเพจได้สะดวกขึ้น และเมื่อต้องการทำงานกำหนดค่าในพาเนล ให้เปิดหน้าต่างกลับมาดังเดิมได้ ดังนี้
ย้ายหน้าต่างพาเนลเข้า – ออก
หากต้องการนำหน้าต่างพาเนลมาอยู่ใกล้พื้นที่การทำงานในเว็บเพจ ก็สามารถดึงพาเนลออกมาจากกรอบหน้าต่างได้ และเมื่อใช้งานเสร็จแล้วก็ดึงไปเก็บที่เดิม เพื่อไม่ให้เกะกะในพื้นที่ทำงาน ดังนี้
โปรแกรม Dreamweaver CS3
Dream weaver เป็นโปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใช้งานในแบบ WYSIWYG อ่านว่า วิสสิวิก (What You See Is What You Get) คือ โปรแกรมประเภทคุณออกแบบหน้าเว็บเพจ หรือเว็บไซต์ มาอย่างไรในโปรแกรม คุณก็จะเห็นงานของคุณเป็นแบบนั้น
การใช้งานของโปรแกรมจะอำนวยความสะดวกให้กับการออกแบบ webpage เป็นอย่างมาก โดยโปรแกรมจะทำงานในลักษณะ HTML Generator นั่นคือโปรแกรมจะสร้างรหัสคำสั่ง HTML โดยเราไม่จำเป็นต้องมานั่งเรียนรู้ CODE ของ HTML เลย เราก็สามารถสร้าง website ได้อย่างมืออาชีพแล้ว โดยโปรแกรมมีลักษณะการทำงาน คล้าย ๆ กับการพิมพ์เอกสารด้วย Word Processing ที่สามารถใช้เครื่องมือ (Tool bars) หรือแถบคำสั่ง (Menu bar) ควบคุมการทำงาน ช่วยให้การใช้งานง่าย สะดวกและรวดเร็ว
ความรู้เบื้องต้นเกี่ยวกับ Dream weaver CS3
Dream weaver เป็นโปรแกรมประเภท Web Design ซึ่งมีคุณสมบัติในการใช้งานในแบบ WYSIWYG อ่านว่า วิสสิวิก (What You See Is What You Get) คือ โปรแกรมประเภทคุณออกแบบหน้าเว็บเพจ หรือเว็บไซต์ มาอย่างไรในโปรแกรม คุณก็จะเห็นงานของคุณเป็นแบบนั้น
การใช้งานของโปรแกรมจะอำนวยความสะดวกให้กับการออกแบบ webpage เป็นอย่างมาก โดยโปรแกรมจะทำงานในลักษณะ HTML Generator นั่นคือโปรแกรมจะสร้างรหัสคำสั่ง HTML โดยเราไม่จำเป็นต้องมานั่งเรียนรู้ CODE ของ HTML เลย เราก็สามารถสร้าง website ได้อย่างมืออาชีพแล้ว โดยโปรแกรมมีลักษณะการทำงาน คล้ายๆกับการพิมพ์เอกสารด้วย Word Processing ที่สามารถใช้เครื่องมือ (Tool bars) หรือแถบคำสั่ง (Menu bar) ควบคุมการทำงาน ช่วยให้การใช้งานง่าย สะดวกและรวดเร็ว
จุดเด่นของโปรแกรม
- ผู้ใช้ไม่ต้องศึกษาภาษา HTML ก็สามารถสร้างเว็บเพจได้ เพราะโปรแกรมมีฟังก์ชัน
การทำงานแบบ HTML Generator
2. สามารถสร้างภาพเคลื่อนไหว (Animation) โดยใช้รูปแบบของ Macromedia Director
ด้วยคุณสมบัติ Animate Netscape และ CSS-P Layers ทำให้ภาพเคลื่อนไหวบนเบราเซอร์ โดยไม่ต้องอาศัยโปรแกรมเสริมใดๆ
- สามารถนำข้อความเข้ามาในโปรแกรมได้ (Import Text File)
- สนับสนุน CSS (Cascading Style Sheet)
- สามารถตรวจสอบชนิดของเบราเซอร์ได้
- ความสามารถเกี่ยวกับการปรับปรุง ดูแลรักษาไซต์ เช่น โอนถ่ายข้อมูล (FTP) ขึ้น
เครื่องแม่ข่าย และจัดการเพิ่มลบเว็บเพจได้ เป็นต้น
- ความสามารถในการทำ Image Roller
- สนับสนุนภาษาไทย
เริ่มต้นการใช้งานโปรแกรม Dream weaver CS3
1. คลิกที่ปุ่ม start
2. เลื่อนเมาส์ไปที่ Program
3. เลื่อนเมาส์ไปที่คลิกเลือกเมนู
Macromedia
4. เลื่อนเมาส์ไปที่คลิกเลือกคำสั่ง Macromedia Dreamweaver CS3 เพื่อเรียกใช้โปรแกรม
ตัวอย่างการอัพโหลดด้วย Dreamweaver CS3
นอกจากการอัพโหลดด้วย FileZilla แล้ว ตัวโปรแกรม Dreamweaver ก็สามารถอัพโหลดไฟล์เข้า เว็บไซต์ได้เช่นกัน แต่จะต้องตั้งค่าก่อน
ตั้งค่าการอัพโหลดเข้าฟรีเว็บไซต์ที่ Kmancity.com
เป็นการตั้งค่าการอัพโหลดข้อมูลเข้าฟรีเว็บไซต์ที่ kmancity.com
1. คลิก Site>>Manage Size
2. คลิกเลือกเว็บไซต์ เช่น pasakresort
3. คลิก Edit
4. คลิก
Remote Info
5. คลิกเลือก FTP
6. ช่อง FTP Host พิมพ์ตามตัวอย่าง
7. ไดเรคทอรี = / (เครื่องหมายทับ)
8. Login เข้า พิมพ์
9. Password = ….
10. คลิกเลือก Use passive FTP
11. การตั้งค่ามาตรฐานส่วนใหญ่จะใช้ตามนี้ อาจไม่คลิกติ๊กถูก Use Passive ก็ได้ เซอร์เวอร์บางที่ อาจไม่ยอมรับค่านี้
12. คลิกปุ่ม Test ทดสอบการเชื่อมต่อกับเซอร์เวอร์จริง แต่ขณะนั้นต้องเชื่อมต่ออินเตอร์เน็ตก่อน
ไม่เช่นนั้นก็ทดสอบไม่ได้
13. ถ้าปรากฏข้อความตามตัวอย่าง ก็แสดงว่า สามารถเชื่อมต่อได้
14. คลิกปุ่ม OK
วิธีการเชื่อมต่อ
1. คลิกปุ่มขยายหน้าจอดาวน์โหลดให้เต็มจอ
2. คลิกเชื่อมต่อ
3. จะปรากฏหน้าจอแแสดงการเชื่อมต่อ
4. ถ้าเชื่อมต่อสำเร็จก็จะแสดงข้อมูลในเว็บไซต์ออกมา
5. ในส่วน Remote Site เป็นข้อมูลจริงที่อยู่ในอินเตอร์เน็ต
6. ส่วน LocalFiles จะเป็นข้อมูลที่อยู่ในเครื่องของเราเอง
7. การอัพโหลด ให้คลิกเลือกไฟล์ที่ต้องการ ต้องการมากกว่าหนึ่งไฟล์ ก็คลิกไฟล์แรกก่อน
กดปุ่ม Ctrl ที่แป้นพิมพ์ค้างไว้แล้วคลิกเลือกไฟล์ที่ต้องการ ครบแล้วปล่อยปุ่ม Ctrl
8. คลิกปุ่ม Put เริ่มอัพโหลด
9. กรณีที่ไฟล์ชื่อซ้ำกัน ก็คลิกเลือก Yes เพื่อนำไฟล์ใหม่ไปแทนที่ ถ้าเป็นไฟล์ที่ใหม่กว่า และได้ แก้ไขแล้ว
10. สำหรับการดาวน์โหลดหรือก็อปปี้ไฟล์ในเว็บไซต์มาไว้ในเครื่องของเราให้คลิกเลือกไฟล์แล้ว คลิกปุ่ม Get
- << ต่อไป
สรุปขั้นตอนการสร้างเว็บไซต์ด้วย Dreamweaver CS3
บทความนี้น่าจะช่วยให้ผู้อ่านเข้าใจถึงขั้นตอนการสร้างเว็บไซต์ได้เร็วขึ้น แต่ในการทำงานจริงๆ ความยากจะไปอยู่ที่การออกแบบเว็บเพจให้สวยงาม ดูน่าสนใจ ไม่ใช่การออกแบบเว็บเพจง่ายๆ เหมือน ในตัวอย่าง การออกแบบเว็บเพจก็ต้องศึกษาการใช้งาน Dreamweaver ในขั้นสูงต่อไป และขั้นสูงขึ้นไปอีก ด้วยการเขียนโปรแกรมเพื่อใช้งานกับไฟล์เว็บเพจที่ได้เพื่อให้สามารถโต้ตอบกับผู้เข้าชมได้ ส่วนท่านใดที่เน้นเว็บไซต์ง่ายๆ
เป็นเว็บบอร์ดหรือแชตรูมสำหรับเพื่อนๆ ในกลุ่ม อาจเปิดข้ามไป อ่านในบทที่ 19 ซึ่งเป็นบทสุดท้ายเลยก็ได้ ไม่จำเป็นต้องอ่านทุกบท