เมื่อออกแบบหน้า web page เสร็จแล้วจะบันทึกไฟล์ต้องใช้คำสั่งในข้อใด

สารบัญ Show

เมื่อออกแบบหน้า Web Page เสร็จแล้วจะบันทึกไฟล์ต้องใช้คำสั่งใด
ถ้าต้องการบันทึกเว็บเพจทั้งหมดจะต้องใช้คําสั่งใด
ข้อใดคือคำสั่งสำหรับบันทึกไฟล์เอกสารเว็บเพจ
ข้อใดคือขั้นตอนในการบันทึกเว็บเพจที่ถูกต้อง ?

เวิลด์ไวด์เว็บ (World Wide Web หรือ WWW ) หรือที่เรียกกันสั้นๆ ว่า เว็บ (Web) เป็นบริการข้อมูลข่าวสารในแบบสื่อประสมหรือมัลติมีเดีย (Multimedia) กล่าวคือ ข้อมูลเหล่านี้จะเป็นข้อมูลที่มีทั้งข้อความ, ภาพ และเสียงประกอบกัน แทนที่จะมีเพียงตัวอักษรละลานตาเพียงอย่างเดียว จึงสามารถเรียกร้องความสนใจจากผู้ชมได้เป็นอย่างดี ความก้าวหน้าของเทคโนโลยีปัจจุบัน ทำให้ข้อมูลประเภทนี้สามารถแสดงภาพเคลื่อนไหวในแบบของภาพยนตร์ และแสดงเสียงได้คุณภาพระดับเดียวกับแผ่นซีดีเลยทีเดียว

ข้อมูลนี้จะถูกแบ่งเป็นหน้า ๆ แต่ละหน้าจะถูกเขียนขึ้นด้วยภาษาทางคอมพิวเตอร์ที่พัฒนาขึ้นใหม่ เรียกว่า ภาษา HTML (Hyper Text Markup Language) ซึ่งสามารถเชื่อมโยงถึงกันได้โดยไม่จำเป็นต้องอยู่ที่เดียวกัน ดังนั้น ข้อมูลจากทุกมุมโลกจึงถูกโยงใยไปมาถึงกันได้ราวกับใยแมงมุม จึงเรียกว่า เวิลด์ไวด์เว็บ หรือ เครือข่ายใยแมงมุม

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 CS5, Adobe Dreamweaver UltraDev , Adobe HomeSite , Microsoft FrontPages

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 มีองค์ประกอบหลักอยู่ 2 ส่วน คือ ส่วนที่เป็นข้อความที่จะพิมพ์ และส่วนที่เป็นคำสั่ง สำหรับส่วนที่เป็นคำสั่งที่จะนำมาใช้เพื่อเปลี่ยนแปลงรูปร่างและแบบของตัวอักษรหรือเอกสารใด ๆ (Attribute) จะถูกเรียกว่า แท็ก (Tag) และจะเขียนไว้อยู่ในเครื่องหมาย < > ในรูปแบบ <แท็ก> เช่น <HTML>, , เป็นต้น โดยแต่ละแท็กจะทำหน้าที่แตกต่างกันไป แบ่งออกเป็น 2 กลุ่ม ดังนี้
1. รูปแบบคำสั่งที่มีเพียงคำสั่งเดียวหรือมีแท็กเดียว สามารถใช้งานได้เลยและสิ้นสุดความหมายด้วยตัวมันเอง เช่น  ,  เป็นต้น
2. รูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน หรือแท็กคู่ คือ มีส่วนเริ่มต้นและส่วนจบของคำสั่ง โดยที่ส่วนจบของรูปแบบคำสั่งจะมีเครื่องหมาย Slash ( / ) กำกับไว้หน้าแท็กนั้น ๆ
ตัวอย่างเช่น
 <HTML>………</HTML>
 ……………
 …………… เป็นต้น

ในการเขียนรูปแบบคำสั่งที่แยกออกเป็น 2 ส่วน หรือแท็กคู่ คำสั่งนั้นจะต้องเป็นคำสั่งที่สมมาตรกัน เช่น เมื่อเปิดด้วยคำสั่ง ตัวหนา <B> และขีดเส้นใต้  เวลาปิดคำสั่งก็ต้องเปิดด้วยขีดเส้นใต้ก่อนแล้วจึงปิดด้วยคำสั่งตัวหนา ดังนี้

คำสั่งในการกำหนดโครงสร้างหลัก
รูปแบบการจัดวางต่อไปนี้เป็นรูปแบบมาตรฐาน ประกอบไปด้วยคำสั่งหลักอยู่ 4 คำสั่ง โดยมีลักษณะการจัดวางและรายละเอียดดังนี้

คำสั่งหลัก <HTML> .........</HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดจบของเอกสาร HTML
คำสั่งหลัก <HEAD> …… </HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยจะประกอบด้วยคำสั่งหลัก <TITLE> …… </TITLE> ซึ่งเป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบชื่อเรื่อง (Title bar) โดยกำหนดความยาวของข้อความได้ไม่เกิน 64 ตัวอักษร
คำสั่งหลัก <BODY> …… </BODY> เป็นคำสั่งที่ทำหน้าที่กำหนดข้อความ และรูปแบบคำสั่งใดๆ ที่ต้องการปรับแต่งเอกสารบนส่วนของจอภาพ และจะแสดงผลบนจอภาพเมื่อถูกเรียกใช้จากเว็บบราวเซอร์

1) การเรียกใช้โปรแกรม Adobe Dreamweaver CS5 สามารถเรียกใช้ได้ 2 วิธี ดังนี้
วิธีที่ 1 เรียกจากปุ่ม Start

1. คลิกเมาส์ที่ปุ่ม Start

2. เลื่อนเมาส์ไปที่ Programs หรือ All Programs
คลิกเมาส์ที่ชื่อ Adobe Dreamweaver CS5 จะเข้าสู่ โปรแกรมได้ทันที

วิธีที่ 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) จะเป็นคำสั่งพิเศษที่โปรแกรมจัดเตรียมไว้ให้ โดยคำสั่งเหล่านี้จะเปลี่ยนไปตามงานที่เราทำขณะนั้นการเรียกใช้เมนูลัดจะกระทำได้โดย

เลือกคำสั่ง Edit > Undo
และ
เลือกคำสั่ง Edit > Redo

การออกจากโปรแกรม Dreamweaver CS5 สามารถทำได้ 3 วิธี ดังนี้

วิธีที่ 1 เลือกเมนูคำสั่ง File เลือกคำสั่ง Exit

วิธีที่ 2 คลิกที่ปุ่ม

ของหน้าต่างโปรแกรม

วิธีที่ 3 คลิกที่ไอคอน

Adobe Dreamweaver CS5 ที่มุมบนซ้ายของหน้าต่างโปรแกรม แล้วเลือกคำสั่ง Close ดังรูป

แถบสถานะของ 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 CS5นี้ เราสามารถสร้างและใส่ออบเจ็คชนิดต่างๆ ได้อย่างง่ายดาย ซึ่งจะอธิบายการใช้งานออบเจ็คแต่ละชนิดต่อไป

เมื่อใดที่เราคลิกเลือกภาพ หรือองค์ประกอบต่างๆบนหน้าเว็บ จะปรากฏ Property Inspector ที่แสดงค่าต่างๆของภาพให้เราปรับแต่งคุณสมบัติที่เกี่ยวข้องกับองค์ประกอบนั้นได้ ดังตัวอย่างเมื่อเราคลิกเลือกที่ภาพ Property Inspector ก็จะแสดงคุณสมบัติต่างๆของภาพให้เราปรับแต่งได้ ดังรูป

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

Show Code View

คลิกที่

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

Show Code and Design View

คลิกที่

จะแสดงทั้งโค้ดพร้อมทั้งหน้าเว็บเพจที่เรากำลังทำงานอยู่ เหมาะสำหรับผู้ใช้ที่ต้องการดูการแสดงผลโค้ดของหน้าเว็บเพจที่ใช้ในการออกแบบ

Show Design View

คลิกที่

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

ในโปรแกรม 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 เราจะเริ่มจากการกำหนดโครงร่างของเว็บ และสร้างโฟลเดอร์และไฟล์ต่างๆ ที่ประกอบกันเป็นเว็บไซต์ของราก่อน ดังนี้

กำหนดโครงร่างของเว็บ

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

ดังตัวอย่าง ถ้าเราต้องการจัดทำเว็บไซต์ขายเครื่องประดับ ก็อาจสร้างโฟลเดอร์ชื่อ “jewelry” เป็นโฟลเดอร์ที่รวมเว็บเพจ และไฟล์ต่างๆ ที่ใช้ไว้ทั้งหมด โดยในโฟลเดอร์นี้จะประกอบด้วยหลายโฟลเดอร์ย่อยสำหรับแยกเก็บไฟล์ต่างๆ ที่ประกอบกันเป็นเว็บไซต์ เช่น โฟลเดอร์ ชื่อ “home” “new” “catalog” “about” “contact” และจะเก็บไฟล์ .html ที่ใช้ ส่วนโฟลเดอร์ “images” จะเก็บไฟล์รูปภาพและมัลติมีเดียที่ใช้ในเว็บไซต์

เราจะเริ่มต้นโดยการกำหนดเว็บไซต์ใหม่ในโปรแกรม Dreamweaver โดยมี 2 วิธีที่ทำได้ วิธีแรกจะใช้วิซาร์ดช่วย และวิธีที่สองเราจะกำหนดค่าต่างๆ เอง
วิธีที่ 1 สร้างเว็บไซต์แบบใช้วิซาร์ด

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

ในกรณีที่ต้องการสร้างโฟลเดอร์ย่อยใต้โฟลเดอร์ที่เก็บเว็บไซต์ของเรา เพื่อแยกเก็บข้อมูล และหน้าเว็บให้เป็นหมวดหมู่ ให้เราคลิกเมาส์ปุ่มขวาที่โฟลเดอร์ Site แล้วเลือก New Folder จะปรากฏไฟล์ใหม่ในรายการ ให้เราตั้งชื่อโฟลเดอร์ใหม่นี้แล้วกดปุ่ม <Enter> ดังนี้

เปลี่ยนชื่อไฟล์และโฟลเดอร์

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

นอกจากการสร้างหน้าเว็บเปล่า ที่หน้าต่าง New Document จะแสดงหน้าเว็บแต่ละแบบให้เราเลือกใช้ได้เลย ดังนี้
Blank Page
สร้างหน้าเว็บเปล่า โดยสามารถกำหนดชนิดของหน้าเว็บที่เราจะใช้งานได้ เช่น หน้าเว็บ HTML, เทมเพลต,

ไลบรารี่,   XSLT, ActionScript, CSS, JavaScript และ XML หรือหน้าเว็บแบบไดนามิกที่สนับสนุนการทำงาน

ด้วยภาษาที่ใช้บนเว็บเซิร์ฟเวอร์ เช่น ASP, ColdFusion, JSP และ PHP เป็นต้น
Blank Template                    สร้างหน้าเทมเพลต เพื่อใช้เป็นต้นแบบในการสร้างหน้าเว็บ
Page from Template      สร้างหน้าเว็บโดยใช้ต้นแบบ
Page from Sample         สร้างหน้าเว็บจากต้นแบบที่ Dreamweaver มีให้
Other                           สร้างหน้าเว็บแบบอื่นๆ เช่น หน้าเว็บที่มีการใช้ภาษา C#, VBScript หรือ เท็กซ์ไฟล์ เป็นต้น

การกำหนดรายละเอียดของหน้าเว็บ โดยเลือกคำสั่ง Modify > Page Properties จะพบกับหน้าต่าง Page Properties ดังนี้

หน้าต่าง Page Properties จะแบ่งรายละเอียดต่างๆของหน้าเว็บที่ปรับแต่งได้ออกเป็น 5 หมวด ดังนี้

หมวด Appearance กำหนดหน้าตาของส่วนประกอบต่างๆ บนหน้าเว็บ

Page font กำหนดรูปแบบของตัวอักษรที่ใช้ในเว็บเพจ
Size กำหนดขนาดของรูปแบบตัวอักษรที่ใช้
Text color กำหนดสีให้กับตัวอักษร
Background color กำหนดสีที่ต้องการให้เป็นพื้นหลังของหน้าเว็บ
Background Image กำหนดภาพที่ใช้เป็นฉากหลังของหน้าเว็บ
Repeat กำหนดการแสดงซ้ำของภาพพื้นหลัง
Left Margin กำหนดระยะขอบซ้ายของหน้าเว็บ
Right Margin กำหนดระยะขอบขวาของหน้าเว็บ
Top Margin กำหนดระยะขอบบนของหน้าเว็บ
Bottom Margin กำหนดระยะขอบล่างของหน้าเว็บ

หมวด Links กำหนดแสดงลิงค์บนหน้าเว็บ

Link font กำหนดรูปแบบของตัวอักษรของลิงค์
Size กำหนดขนาดของรูปแบบตัวอักษรของลิงค์
Links color กำหนดสีของลิงค์
Rollover links กำหนดสีของลิงค์เมื่อใช้เมาส์ไปชี้
Visited links กำหนดสีของลิงค์เมื่อถูกคลิกไปแล้ว
Active links กำหนดสีของลิงค์เมื่อกำลังถูกคลิก
Underline style กำหนดรูปแบบการขีดเส้นใต้ให้กับลิงค์

หมวด Headings กำหนดคุณสมบัติหัวของเว็บเพจ

Heading font กำหนดรูปแบบของตัวอักษรให้หัวข้อที่แสดงบนหน้าเว็บ
Heading 1-6 กำหนดขนาดของรูปแบบตัวอักษรที่ใช้สร้างหัวข้อบนหน้าเว็บ

หมวด Title/Encoding กำหนดชื่อให้ส่วนหัวเรื่องของเว็บเพจ และกำหนดชุดตัวอักษรที่ใช้

Title กำหนดส่วนชื่อหัวเรื่องให้เว็บเพจ
Document type กำหนดประเภทของเว็บเพจ
Encoding กำหนดรูปแบบภาษาของตัวอักษรที่ใช้ในเว็บเพจ สำหรับการแปลงตัวอักษร เพื่อให้เป็นภาษามาตรฐานที่ต้องการ ถ้าเราต้องการใช้ภาษาไทยให้เลือกไทย (Windows) หรือ Unicode (UTF-8)

หมวด Tracing Image กำหนดคุณสมบัติหัวของภาพที่จะใช้เป็นแบบในการสร้างหน้าเว็บเพจ

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

ขั้นตอนที่ 1 กำหนดหัวเรื่องบนหน้าเว็บ

เราสามารถใส่หัวเรื่องบนหน้าเว็บ หรือที่นิยมเรียกว่าไตเติ้ล (Title) ได้ที่ช่อง Title บนแถบเครื่องมือ ดังนี้

ขั้นตอนที่ 2 แทรกภาพในหน้าเว็บเพจ

แทรกภาพลงหน้าเว็บเพจ มีวิธีการดังนี้

โปรแกรมจะแสดงคุณสมบัติของวัตถุรูปภาพให้เราสามารถปรับแต่งค่าต่าง ๆได้ทั้งหมด เช่นการปรับขนาดรูปภาพ การทำ Map Images การเชื่อมโยง การกำหนดให้มีคำอธิบายรูปภาพ

ขั้นตอนที่ 3 ใส่ข้อความบนหน้าเว็บ

การใส่ข้อความบนหน้าเว็บคล้ายกับการพิมพ์เอกสารในโปรแกรม Word โดยให้เราคลิกบนพื้นที่ทำงาน แล้วพิมพ์ข้อความบนหน้าเว็บได้เลย

การกดปุ่ม <Enter> จะเป็นการขึ้นย่อหน้าใหม่ และข้อความในแต่ละย่อหน้าจะถูกจัดให้เต็มหน้าต่าง
ในกรณีที่เราต้องการขึ้นบรรทัดใหม่ในย่อหน้าเดิม ให้กด <Shift + Enter> แทน (หรือคลิกแท็บ Text และคลิกปุ่ม

ก็ได้)

หลังจากที่เราสร้างเว็บเพจได้ตามต้องการแล้ว ให้ทำการบันทึกไฟล์เว็บเพจ โดยเลือกคำสั่ง File > Save เนื่องจากเรายังไม่เคยบันทึกไฟล์นี้มาก่อนโปรแกรม Dreamweaver จะให้เราระบุชื่อไฟล์ใหม่ด้วย เช่น

จากนั้นเมื่อใดที่เราทำการแก้ไขหน้าเว็บ และต้องการบันทึกการเปลี่ยนแปลง ก็ให้เลือกคำสั่ง File > Save เพื่อบันทึกหน้าเว็บแทนที่ไฟล์เดิมที่บันทึกไว้ได้ แต่ถ้าต้องการบันทึกไฟล์นี้ไว้ที่ตำแหน่งใหม่ หรือบันทึกเป็นไฟล์ใหม่ ให้เลือกคำสั่ง File > Save As… และกำหนดตำแหน่งเก็บและชื่อไฟล์ได้

ในกรณีที่เราต้องการยกเลิกสิ่งที่เราได้กระทำไปแล้ว เราสามารถกระทำได้โดยเปิดใช้พาเนล History ซึ่งพาเนลนี้จะช่วยให้เราดู, ยกเลิก, หรือทำซ้ำการกระทำใด ๆ ที่ได้กระทำไปแล้ว

การเปิดใช้พาเนล History จะกระทำได้โดยเลือกเมนูคำสั่ง Windows เลือกคำสั่ง History

เมื่อเราบันทึกเว็บเพจที่เราสร้างเสร็จเรียบร้อยแล้ว ให้เปิดดูหน้าเว็บได้บราวเซอร์ โดยเลือกคำสั่ง
File > Preview in Browser > ชื่อบราวเซอร์ที่ติดตั้งไว้ในเครื่อง (หรือกดคีย์ลัด <F12>)

เมื่อออกแบบหน้า Web Page เสร็จแล้วจะบันทึกไฟล์ต้องใช้คำสั่งใด

หลังจากที่สร้างหรือแก้ไขเว็บเพจแล้ว สามารถบันทึกเว็บเพจนั้นได้โดยมีขั้นตอนดังนี้ 1. กดปุ่ม <Ctrl> + <s> หรือ เลือกเมนู File -> Save. 2. เลือกโฟลเดอร์หลัก 3. ตั้งชื่อไฟล์ที่ต้องการ 4. คลิกปุ่ม Save. ไฟล์ที่ใช้งานอยู่หากยังไม่ถูกบันทึก จะปรากฏ เครื่องหมาย * ต่อท้ายชื่อ ①คลิกเมนูFile.