เรื่อง การแทรกข้อความและเลเยอร์

1. การพิมพ์และแก้ไขข้อความในเว็บเพจ

การพิมพ์ข้อความในเว็บเพจจะคล้ายกับการพิมพ์เอกสารใน Microsoft Word โดยคลิกที่ Document window ก็สามารถพิมพ์เนื้อหาและจัดรูปแบบข้อความให้สวยงามโดยใช้ตัวอักษรกราฟิกที่สีตัวอักษรตัดกับสีพื้นฉากหลัง เพื่อให้สามารถอ่านได้ง่าย และเราสามารถจัดรูปแบบและขนาดตัวอักษรได้โดยให้เลือกข้อความที่ต้องการปรับแต่ง และแก้ไขค่าต่าง ๆ ได้ที่หน้าต่าง Properties โดยมีรายละเอียดดังนี้

• Format เป็นรูปแบบตัวอักษรสำเร็จที่เรานำมากำหนดให้กับข้อความได้
• Font รูปแบบตัวอักษร โดยใน Dreamweaver จะแสดงรูปแบบตัวอักษรที่มีในเครื่อง PC และเครื่อง MAC
• Size ขนาดของตัวอักษร ขนาดมาตรฐานที่กำหนดไว้คือ 3
• Color กำหนดสีให้กับตัวอักษร

2. การขึ้นย่อหน้าใหม่ หรือเริ่มบรรทัดใหม่

ในการขึ้นบรรทัดใหม่ทำได้ดังนี้

2.1 กด Enter เพื่อทำการขึ้นบรรทัดใหม่ ตัวอักษรที่เราพิมพ์มาทั้งหมดจะอยู่ใน <p> </p> โดยอัตโนมัติ ซึ่งจะปรากฎในมุมมอง Code

2.2 กด Shift + Enter จะทำให้ความห่างของบรรทัดมีมากว่าการใช้ enter ปกติ ซึ่งจะปรากฎ <p> </p> ในมุมมอง Code

3. การเลือกข้อความ

การเลือกข้อความเป็นการระบายแถบสีบนข้อความ เพื่อจัดการกับข้อความนั้นๆ เช่น ลบ คัดลอก ย้าย การเลือกข้อความมีหลายลักษณะ ดังนี้
การเลือกเฉพาะคำหรือข้อความ

3.1 วางเมาส์หน้าคำหรือข้อความ คลิกแล้วลากเมาส์ทับบริเวณที่ต้องการ แล้วปล่อยเมาส์
3.2 บริเวณที่เมาส์ลากผ่านจะมีแถบสีดำขึ้นมา

4. การเลือกข้อความขนาดยาว

การเลือกข้อความขนาดยาว  ถ้าใช้การลากเมาส์เหมือนวิธีแรกอาจไม่สะดวก

4.1 คลิกเมาส์ตรงตัวอักษรแรกของข้อความที่จะลือก
4.2 กดแป้น < Shift > ค้างไว้ พร้อมกับคลิกเมาส์ที่ข้อความสุดท้าย

5. การเลือกข้อความทั้งเอกสาร

1. คลิกที่ตำแหน่งใดก็ได้บนเว็บเพจ
2. เลือกคำสั่ง Edit > Select All หรือกดแป้น < Ctrl > + < A > หรือคลิกแท็บ < P > บนแถบสถานะ (Status Bar) ข้อความทั้งหมดจะเป็นแถบสี
3. การยกเลิกการเลือกเอกสารทำได้โดยคลิกพื้นที่ว่างบนเว็บเพจ

6. การเปลี่ยนรูปแบบและสีตัวอักษร

              เปลี่ยนรูปแบบอักษรโดยการใช้ Properties Inspector มีขั้นตอนดังนี้

1. คลิกเลือกข้อความ หรือ คำที่ต้องการจะเปลี่ยนรูปแบบ
2. เลือกแบบอักษรที่ช่อง Font เช่น MS San Serif
3. เลือกขนาดตัวอักษรที่ช่อง Size
4. เลือกสไตล์ที่กำหนดไว้แล้วในช่อง Style
5. เลือกปุ่มสี่เหลี่ยมหน้าช่องสีขาวเพื่อเลือกสีที่ต้องการโดยสังเกตสัญลักษณ์เมาส์จะเปลี่ยนเป็นรูปหลอดดูดสี

              เปลี่ยนรูปแบบอักษรโดยการใช้เมนูคำสั่ง มีขั้นตอนดังนี้

1. คลิกเลือกข้อความที่ต้องการจะเปลี่ยนรูปแบบ
2. เลือกเมนู Text
3. เลือกคำสั่งย่อย เช่น Font แล้วเลือกแบบอักษรที่ต้องการ เช่น MS San Serif
4. เลือกขนาดตัวอักษร (Size) สไตล์ (Style) และสีแบบอักษร (Color)

              เปลี่ยนรูปแบบอักษรโดยการใช้ทูลบาร์ มีขั้นตอนดังนี้

1. คลิกที่ปุ่มแท็บกลุ่มเครื่องมือ Text
2. จะได้แถบเครื่องมือสำหรับแก้ไขลักษณะอักษร
3. การกำหนดตัวอักษรแบบพิเศษเพิ่มเติม สามารถคลิกที่ปุ่มด้านขวาสุดของทูลบาร์ คือปุ่ม Characters
4. ถ้าต้องการเลือกตัวอักษรชนิดพิเศษเพิ่มเติม ให้คลิกที่คำสั่ง Other Character จะได้หน้าต่าง Insert other character
5. คลิกเลือกแบบอักษรที่ต้องการ แล้วคลิกปุ่ม OK

7. การจัดรูปแบบข้อความ
การจัดตำแหน่งของข้อความ มีขั้นตอนดังนี้

1. คลิกเลือกข้อความที่ต้องการจัดรูปแบบ
2. คลิกเลือกรูปแบบการจัดข้อความ มีรายละเอียดดังนี้
2.1 Align Left สำหรับจัดข้อความชิดซ้าย
2.2 Align Center สำหรับจัดข้อความไว้ตรงกลาง
2.3 Align Right สำหรับจัดข้อความชิดขวา
2.4 Justify สำหรับให้ข้อความทั้งด้านหน้าและด้านหลังเท่ากัน

8. การจัดระยะเยื้องของย่อหน้า
การเยื้องของย่อหน้าเป็นการเว้นระยะห่างของข้อความกับขอบหน้าเว็บเพจเข้าไป โดยกำหนดได้ทั้งด้านซ้ายและด้านขวาของหน้าเว็บ มีขั้นตอนดังนี้

1. คลิกตำแหน่งข้อความที่ต้องการจะเยื้อง
2. คลิกที่แถบเครื่องมือเยื้องเข้า (Text Indent) เพื่อเยื้องระยะเข้าไปหนึ่งระยะ ถ้าต้องการเพิ่มระยะให้คลิกอีกครั้งหนึ่ง
3. ถ้าต้องการยกเลิกการเยื้องให้คลิกปุ่มเยื้องออก (Text Outdent)

9. การสร้างเลเยอร์
เลเยอร์ (Layer) เป็นเครื่องมือหนึ่งใน Dreamweaver CS3 ที่เหมาะในการใช้จัดหน้าเว็บเพจ เนื่องจากมีความสะดวกในการเคลื่อนย้ายหรือจัดหน้าเว็บได้ตามความต้องการ ทั้งนี้เพราะ Layer เปรียบเสมือนแผ่นใสที่สามารถนำองค์ประกอบต่าง ๆ มาวางไว้ภายใน และซ้อนกันหลายชั้นได้

              ส่วนประกอบของเลเยอร์

1. มุมซ้ายบนสุดสำหรับลากหรือดึงเลเยอร์ไปตามบริเวณที่ต้องการ
2. จุดขอบเส้นสำหรับย่อหรือขยายขนาดของเลเยอร์ซึ่งมีทั้งหมด 8 จุด

              การสร้างเลเยอร์มีวิธีการ ดังนี้

1. คลิกแท็บ Layout เพื่อสร้างเลเยอร์
2. คลิกปุ่ม Draw Layer
3. ลากพอยน์เตอร์ให้เป็นกรอบสี่เหลี่ยมบนเว็บเพจ

              การพิมพ์ข้อความในเลเยอร์

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

              การใส่รูปภาพในเลเยอร์

1. คลิกที่เลเยอร์ที่ต้องการจะแทรกรูปภาพ
2. คลิกที่คำสั่ง Insert > Image หรือคลิกเครื่องมือ Image บนกลุ่มเครื่องมือ Common
3. จะปรากฎได้หน้าต่าง Select Image Source เลือกรูปภาพที่ต้องการ
4. คลิก OK
5. ภาพที่เลือกจะแทรกอยู่ในเลเยอร์ทันที หากภาพใหญ่เกินไปเลเยอร์จะขยายให้เท่ากับขนาดของภาพโดยอัตโนมัติ
6. คลิกที่มุมของกรอบเลเยอร์เพื่อปรับขนาดภาพและเลเยอร์ตามความเหมาะสม

              การใส่ตารางในเลเยอร์

ตารางที่สร้างในเลเยอร์อาจจะเป็นตารางเปล่าที่สร้างขึ้นมาใหม่ หรือคัดลอกตารางที่สร้างไว้แล้วมาใส่ก็ได้ ดังนี้

1. คลิกที่เลเยอร์ที่จะแทรกตาราง
2. คลิกที่เครื่องมือ Table จะได้หน้าต่าง Table ขึ้นมา
3. คลิกขนาดตารางที่ต้องการ
4. คลิกปุ่ม OK
5. ตารางจะแทรกในเลเยอร์ทันที สามารถปรับขนาดตารางและตกแต่งตารางได้

10. การปรับแต่งรายละเอียดของเลเยอร์
การปรับแต่เลเยอร์ โดยทั่วไปจะใช้ Properties Inspector ซึ่งเมื่อคลิกที่เลเยอร์จะได้
Properties หน้าต่างดังรูป ซึ่งประกอบด้วยรายละเอียดต่อไปนี้

1. Layer ID หมายถึง หมายเลขอ้างอิงเมื่อเรียกใช้  Layer  นั้น ๆ  เช่น  Layer1, Layer2 ซึ่งจะเรียงลำดับเลเยอร์ที่สร้างก่อนเป็นหลัก

2. L และ T หมายถึง การกำหนดตำแหน่งของเลเยอร์ ซึ่งย่อมาจาก Left  และ Top

3. W และ H หมายถึง การกำหนดขนาดของเลเยอร์ ซึ่งย่อมากจาก Width และ Height มีหน่วยเป็นพิกเซล (Pixel)

4. Z-Index ใช้ในการเปลี่ยนลำดับเลเยอร์

5. Bg image สำหรับปรับแต่งสีและรูปภาพพื้นหลังเลเยอร์

6. Vis สำหรับกำหนดว่าจะแสดงหรือซ่อนเลเยอร์

7. Overflow หมายถึง การตั้งค่าเผื่อองค์ประกอบที่มีขนาดใหญ่กว่าเลเยอร์ ซึ่งแบ่งออกเป็น

7.1 Visible ขยายเลเยอร์เพื่อให้เห็นทั้งหมด
7.2 Hidden จำกัดเลเยอร์เท่าเดิม
7.3 Scroll ให้สร้างสกรอล์บาร์โดยอัตโนมัติ
7.4 Auto ให้สร้างสกรอล์บาร์อัตโนมัติเมื่อขนาดองค์ประกอบใหญ่กว่าเลเยอร์

8. Clip สำหรับจำกัดส่วนในการแสดงผล โดยมีตำแหน่ง L (Left), R (Right), T (Top), B (Bottom)

              การเคลื่อนย้ายเลเยอร์

1. การย้ายเลเยอร์ด้วย Properties โดยกำหนดเป็นตัวเลขที่ L (Left) และ T (Top)
2. การใช้เมาส์ ให้เลื่อนเมาส์ไปตรงเส้นขอบหรือปุ่มมุมบนขวา เมาส์จะเปลี่ยนเป็นรูปมือ คลิกเมาส์ค้างไว้แล้วลากย้ายไปยังตำแหน่งที่ต้องการจึงให้ปล่อยเมาส์

              การย่อ / ขยายเลเยอร์

1. คลิกที่เลเยอร์ ใช้ Properties กำหนดที่ช่อง W เพื่อกำหนดความกว้าง และ H เพื่อกำหนดความสูง โดยกำหนดเป็นตัวเลข Pixel
2. คลิกที่เลเยอร์ เลื่อนเมาส์ไปที่ปุ่มแฮนเดิล ด้านใดด้านหนึ่ง เมาส์จะเปลี่ยนเป็นรูปลูกศร 2 ทิศ คลิกค้างไว้แล้วลากเมาส์เพื่อย่อหรือขยายเลเยอร์

              การใส่สีและภาพพื้นหลังเลเยอร์

1. ใส่สีโดยคลิกที่เลเยอร์ แล้วคลิกเลือก Bg Color ที่ Properties Inspector
2. การใส่ภาพพื้นหลังโดยคลิกเลือกที่ Bg Image ที่ช่อง Properties Inspector
3. เลือกภาพที่ต้องการจากหน้าต่าง Select Image Source