การกำหนดฟอนต์และ ลักษณะของฟอนต์

     การกำหนดฟอนต์และ ลักษณะของฟอนต์สามารถทำได้โดยผ่าน Property Inspector หรือ เลือกเมนูคำสั่งที่อยู่ในเมนู Text ซึ่งขั้นตอนการเปลี่ยนฟอนต์และ คุณลักษณะของฟอนต์มีดังต่อไปนี้
     1. เลือกข้อความที่ต้องการจะกำหนดฟอนต์และ ลักษณะของฟอนต์
     2. การกำ หนดฟอนต์ทำ ได้โดยเลือกฟอนต์จากป๊อปอัพเมนู Font ใน Property Inspector หรือ เลือกเมนู Text -> Font แล้วเลือกฟอนต์ที่ต้องการ
     3. การกำหนดรูปแบบของฟอนต์ว่าเป็นตัวเอียง ตัวหนา หรือ ตัวขีดเส้นใต้ทำได้โดยกำหนดใน Property Inspector หรือ เลือกเมนู Text -> Style แล้วเลือก Style ที่ต้องการ
     4. การกำหนดขนาดฟอนต์ทำได้โดยเลือกขนาดของฟอนต์จากป๊อปอัพเมนู Size ใน Property Inspector หรือ เลือกเมนู Text -> Size โดยขนาดที่กำหนดได้มีค่าตั้งแต่ 1 ถึง 7 ส่วนขนาดที่ขึ้นต้นด้วยเครื่องหมาย + และ – หมายความว่าให้เพิ่มหรือ ลดขนาดของฟอนต์จากฟอนต์พื้นฐานที่ใช้ในเว็บเพจ ตัวอย่างเช่น ถ้าฟอนต์พื้นฐานเป็น 3 แล้ว +3 หมายความว่าให้เพิ่มขนาดของฟอนต์ไปอีก 3 หน่วยซึ่งก็คือ 6

การเพิ่มและ กำหนดรูปแบบของข้อความ

     การเพิ่มข้อความลงในเว็บเพจเราสามารถพิมพ์โดยตรงลงไปที่ Document Window หรือ
คัดลอกจากเอกสารอื่นๆ แล้วนำมาวางใน Document Window ก็ได้ การวางข้อความที่คัดลอกมา
จากเอกสารอื่นสามารถทำได้โดยเลือกเมนู Edit -> Paste
     การกำหนดรูปแบบของข้อความใน Dreamweaver คล้ายกับการใช้โปรแกรมเวิร์ดในการ
พิมพ์ข้อความ การกำหนดรูปแบบของข้อความใน Dreamweaver สามารถทำได้โดยเลือกเมนู
Text -> Paragraph หรือ เลือกจากป๊อปอัพเมนู Format ที่อยู่ใน Property Inspector ดังรูปที่ 3-1
ซึ่งรูปแบบของข้อความที่กำหนดได้ก็จะมี รูปแบบย่อหน้า (Paragraph) หรือ หัวเรื่อง (Heading)
เป็นต้น

การเพิ่มข้อความลงในเว็บเพจ

     ใน Dreamweaver การเพิ่มข้อความลงในเว็บเพจสามารถทำได้หลายวิธี ซึ่งในบทนี้จะ
อธิบายวิธีการเพิ่มข้อความลงเว็บเพจ การกำหนดสี ขนาด ชนิดของฟอนต์ (Font) และการจัดข้อ
ความ รวมไปถึงการกำหนดรูปแบบของข้อความโดยผู้ใช้เองโดยใช้ Cascading Style Sheet
(CSS)

การกำหนด Dreamweaver Site

     หลังจากที่เราวางโครงสร้างเว็บไซต์ของเราแล้ว ต่อมาเราจะใช้ Dreamweaver Site เข้ามาช่วยในการสร้างและ จัดการเว็บไซต์ของเรา การนำ Dreamweaver Site เข้ามาจัดการเว็บไซต์ของเราจะทำให้เราสามารถที่จะทำการอัพโหลดไฟล์ที่ใช้ในการสร้างเว็บไซต์ไปไว้ในเว็บเซริฟเวอร์ได้ ง่ายขึ้น นอกจากนี้ Dreamweaver Site ยังช่วยในการตรวจสอบการเชื่อมโยงของไฟล์ต่างๆ ให้อีกด้วยเมื่อเวลามีการแก้ไขไฟล์ต่างๆ ในเว็บไซต์ ซึ่ง Dreamweaver Site ประกอบไปด้วย 3 ส่วน ดังนี้
     • Local folder เป็นไดเรกเทอรี่ที่เราเก็บเว็บไซต์ที่เราสร้างไว้ในเครื่องคอมพิวเตอร์ของเรา ซึ่งใน Dreamweaver จะเรียกไดเรกเทอรี่ที่เราทำงานว่า Local Site
     • Remote folder เป็นไดเรกเทอรี่ที่เราเก็บเว็บไซต์ที่เราสร้างไว้ในเว็บเซิร์ฟเวอร์ ซึ่งใน Dreamweaver จะเรียกไดเรกเทอรี่ที่อยู่ในเว็บเซิร์ฟเวอร์ว่า Remote Site
     • Folder for dynamic page เป็นไดเรกเทอรี่ที่ใช้เก็บและ ประมวลผล dynamic page
(หรือ เซิร์ฟเวอร์สคริปต์) ที่เราสร้างขึ้นในเว็บไซต์ของเรา
     ในเบื้องต้นถ้าเรายังไม่มีเว็บเซิร์ฟเวอร์ที่ไว้ใช้เก็บเว็บไซต์ของเรา ก็ให้กำหนด Local floder
อย่างเดียวก่อน ซึ่งขั้นตอนการกำหนด Dreamweaver Site มีดังนี้
     1. เลือกคำสั่ง Site -> New Site หลังจากเลือกคำสั่งแล้วจะปรากฎไดอะล็อก Site Definition
     2. ในไดอะล็อก Site Definition ให้คลิกที่ Basic Tab
     3. ในขั้นตอน Editing Files หน้าแรกในฟิลด์ What would you like to name your site? ให้พิมพ์ชื่อไซต์ของเราแล้วคลิกที่ปุ่ม Next
     4. จะปรากฎหน้าที่สองของขั้นตอน Editing Files ให้เลือกที่ No, I do not want to use server technology แล้วคลิกที่ปุ่ม Next
     5. จะปรากฎหน้าที่สามของขั้นตอน Editing Files ให้เลือกที่ Edit local copies on my machine, then upload to server when ready? และ กรอกที่อยู่ของไดเรกเทอรี่หรือใช้ไอคอนโฟลเดอร์ในการเลือกไดเรกเทอรี่ภายในเครื่องคอมพิวเตอร์ของเรา ที่ต้องการให้เป็นที่เก็บเว็บไซต์ของเราในฟิลด์ Where on your computer do you want to store your files? แล้วคลิกที่ปุ่ม Next
     6. หลังจากที่คลิกปุ่ม Next แล้วจะปรากฎหน้าจอของขั้นตอน Sharing Files ในป๊อปอัพเมนูให้เลือก None แล้วคลิกที่ปุ่ม Next
     7. จะปรากฎหน้าจอ Summary ซึ่งจะแสดงรายการสรุปข้อมูลของไซต์ที่เราสร้างขึ้นให้คลิกปุ่ม Done เพื่อทำการจบสร้างไซต์
     8. Dreamweaver จะเปิดพาเนล Site และ แสดงไซต์ที่เราสร้างขึ้นในพาเนล

สร้างและ รวบรวมไฟล์ต่างๆ ที่ใช้ในการสร้างเว็บเพจ

     ก่อนจะสร้างเว็บไซต์เราควรจะสร้างและ รวบรวมไฟล์ต่างๆ ไม่ว่าจะเป็นรูปภาพ ภาพเคลื่อนไหวหรือ ไฟล์เสียงที่ใช้ในการสร้างเว็บเพจให้ครบเสียก่อนเพราะว่าถ้าในขณะที่เรากำลังสร้างเว็บไชต์เกิดพบว่าไม่มีไฟล์บางตัวที่เราต้องการใช้ก็อาจจะทำให้เราต้องเสียเวลาในการค้นหาหรือ สร้างขึ้นใหม่ ซึ่งจะทำให้การสร้างเว็บไซต์เป็นไปไม่ต่อเนื่องและ ล่าช้าได้
     ใน Dreamweaver MX เราสามารถที่จะสร้างแม่แบบที่ใช้ในการสร้างเว็บเพจในแต่ละ
หน้าได้ซึ่งเราเรียกแม่แบบดังกล่าวว่า เทมป์เพลต (Template)
     เราจะสร้างเทมป์เพลตก็ต่อเมื่อเราพบว่าในเว็บไซต์ของเรามีเว็บเพจหลายหน้าที่มีการวาง
องค์ประกอบของเนื้อหาในบางส่วนเหมือนกัน เราจะใช้ส่วนที่เหมือนกันมาสร้างเป็นเทมป์เพลตไว้
     เมื่อใดก็ตามที่เราต้องการสร้างเว็บเพจที่มีการจัดวางองค์ประกอบเหมือนกับเว็บเพจเดิมที่มีอยู่
เราก็ใช้เทมป์เพลตที่เราสร้างไว้ในการสร้างเว็บเพจใหม่และ แก้ไขบางส่วนที่ต้องการ ซึ่งการใช้เทมป์เพลตจะช่วยให้เราสร้างเว็บเพจได้ง่ายขึ้นและ เมื่อใดที่มีการแก้ไขเทมป์เพลต เว็บเพจทั้งหมดที่ถูกสร้างจากเทมป์เพลตดังกล่าวก็จะเปลี่ยนแปลงด้วย ทำให้เราไม่ต้องแก้ไขเว็บเพจทุกหน้าๆ ที่ใช้เทมป์เพลตดังกล่าวด้วยตัวเอง ซึ่งจะทำให้เวลาที่ใช้ในการพัฒนาเว็บเพจน้อยลง

ออกแบบหน้าตาเว็บไซต์

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

จัดโครงสร้างเว็บไซต์

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