Dreamweaver9
การออกแบบด้วย Layout View
การออกแบบเว็บด้วย Layout View
ในการออกแบบหน้าเว็บเพจ การจัดวางองค์ประกอบของเนื้อหาเป็นส่วนหนึ่งที่ทำให้เว็บเพจนั้นน่าอ่านและน่าสนใจ ซึ่ง Dreamweaver ก็ได้จัดเตรียมเครื่องมือให้เราไว้ใช้ในการจัดวางเนื้อหาได้สะดวก
การจัดวางเนื้อหาให้เป็นระเบียบนั้น วิธีหนึ่งนิยมใช้กันก็คือการสร้างตาราง (Table) เพื่อจัดแบ่งการจัดวางเนื้อหาออกเป็นส่วนๆ ตามที่อธิบายไว้ แต่ Dreamweaver ยังมีอีกวิธีหนึ่งที่ง่ายและสะดวกกว่า เพราะออกแบบมาเพื่อใช้ในการออกแบบจัดวางเนื้อหาโดยเฉพาะนั่นก็คือ Layout View ด้วย Layout View นี้ เราสามารถออกแบบหน้าเว็บเพจของเราโดยใช้การวาดโครงร่างของตารางซึ่งแบ่งออกเป็นเชลล์ต่างๆ เพื่อช่วยในในการจัดวางตำแหน่งขององค์ประกอบในหน้าเว็บนั้น ตัวอย่างเช่น เราอาจสร้างเซลล์ขึ้น 1 เซลล์ไว้ในตำแหน่งบนสุดของหน้าตามแนวนอนเพื่อใช้จัดเก็บหัวเรื่องของเว็บเพจ อีกเซลล์หนึ่งอยู่ด้านซ้ายตามแนวตั้งเพื่อใส่กลุ่มของตัวเลือกการเชื่อมโยงต่างๆ และอีกเซลล์หนึ่งทางด้านขวาในพื้นที่ที่เหลือเพื่อใช้ในการแสดงเนื้อหา-----รูป-------
การเข้าสู่ Layout View
1. หากไม่อยู่ในมุมมอง Design View ให้เลือกคำสั่ง View > Design หรือ View > Code and Design
2. เลือกคำสั่ง View > Table View > Layout View หรือ จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม Layout View จะปรากฏกรอบคำแนะนำในการใช้ Layout View เลือก OK
1. หากไม่อยู่ในมุมมอง Design View ให้เลือกคำสั่ง View > Design หรือ View > Code and Design
2. เลือกคำสั่ง View > Table View > Layout View หรือ จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม Layout View จะปรากฏกรอบคำแนะนำในการใช้ Layout View เลือก OK
การออกจาก Layout View
เลือกคำสั่ง View > Table View > Standard View หรือ จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม Standard View
การสร้างโครงร่างตารางและเซลล์
การสร้างตาราง
เราสามารถสร้างตารางขึ้นในพื้นที่ว่างๆ ของหน้าเลย์เอ๊าต์, หรือสร้างครอบตารางหรือเซลล์ที่มีอยู่ก่อน, หรือสร้างซ้อนไว้ในตารางอื่นๆ อีกทีหนึ่ง ก็ได้
1. จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม -------Draw Layout Table ตัวชี้จะเปลี่ยนรูปเครื่องหมาย +
2. วางตัวชี้ที่ตำแหน่งเริ่มต้นของเซลล์ที่จะวาด แล้วลากเพื่อสร้างตารางหากต้องการวาดหลายๆ ตารางต่อเนื่องกัน ให้กดปุ่ม Ctrl ค้างไว้ แล้วลากเพื่อสร้างตาราง
------------------------รูป-------------------------
หากในเลย์เอ๊าต์ยังไม่มีองค์ประกอบใดๆ ตารางจะถูกสร้างที่มุมซ้ายของหน้าหากในหน้าเลยเอาต์มีองค์ประกอบใดๆอยู่ก่อนแล้ว เราสามารถสร้างตารางไว้ในบรรทัดถัดไปจากองค์ประกอบนั้นๆ เท่านั้น
หากในเลย์เอ๊าต์ยังไม่มีองค์ประกอบใดๆ ตารางจะถูกสร้างที่มุมซ้ายของหน้าหากในหน้าเลยเอาต์มีองค์ประกอบใดๆอยู่ก่อนแล้ว เราสามารถสร้างตารางไว้ในบรรทัดถัดไปจากองค์ประกอบนั้นๆ เท่านั้น
การสร้างเซลล์
1. จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม---รูป—Draw Layout Cell ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
2. วางตัวชี้ที่ตำแหน่งเริ่มต้นของเซลล์ที่จะวาด แล้วลากเพื่อสร้างเซลล์หากต้องการวาดหลายๆ เซลล์ต่อเนื่องกัน ให้กดปุ่ม Ctrl ค้างไว้แล้วลากเพื่อสร้างเซลล์
1. จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม---รูป—Draw Layout Cell ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
2. วางตัวชี้ที่ตำแหน่งเริ่มต้นของเซลล์ที่จะวาด แล้วลากเพื่อสร้างเซลล์หากต้องการวาดหลายๆ เซลล์ต่อเนื่องกัน ให้กดปุ่ม Ctrl ค้างไว้แล้วลากเพื่อสร้างเซลล์
--------------------รูป--------------------------------
หากเราสร้างเซลล์ภายนอกตาราง โปรแกรมจะทำการสร้างตารางให้กับเซลล์นั้นโดยอัตโนมัติ
หากเราสร้างเซลล์ภายนอกตาราง โปรแกรมจะทำการสร้างตารางให้กับเซลล์นั้นโดยอัตโนมัติ
การสร้างตารางซ้อนตาราง
1. จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม –รูป—Draw Layout Table ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
2. สร้างตารางขึ้นในพื้นที่ของตารางที่มีอยู่ก่อนแล้วหรือ สร้างครอบตารางที่มีอยู่เดิมนั้น
1. จากแถบ Insert เลือกแท็บ Layout แล้วคลิกที่ปุ่ม –รูป—Draw Layout Table ตัวชี้จะเปลี่ยนเป็นรูปเครื่องหมาย +
2. สร้างตารางขึ้นในพื้นที่ของตารางที่มีอยู่ก่อนแล้วหรือ สร้างครอบตารางที่มีอยู่เดิมนั้น
------------------------รูป---------------------------------
การใช้เส้นพิกัดช่วยในการจัดวางเซลล์
เส้นพิกัด หรือ เส้นกริด (Grid) เป็นเส้นตารางที่ช่วยให้เราสามารถจัดวางเซลล์ในตำแหน่งต่างๆ ได้อย่างแม่นยำ
-----------------------------------------------รูป----------------------------------------------------------
การปิด – เปิดเส้นพิกัด
การปิด – เปิดเส้นพิกัด
เลือกคำสั่ง View > Grid > Show Grid
การยึดแนวเส้นพิกัด
เลือกคำสั่ง View > Grid > Snap to Grid เมื่อเราสร้างเซลล์ใดๆ เซลล์นั้นจะถูกดึงเข้ายึดถึงกับแนวเส้นพิกัดที่ใกล้ที่สุด
การปรับค่าของเส้นพิกัด
เลือกคำสั่ง View > Grid > Grid Settings เลือกปรับค่าตามต้องการ แล้วเลือก OK
--------------------------------------------------รูป-------------------------------------------------------------------
การใส่เนื้อหาลงในเซลล์
เราสามารถใส่ข้อความหรือรูปภาพลงในเซลล์ที่เราสร้างไว้ในหน้าเลย์เอ๊าต์ได้ เช่นเดียวกันการใส่ลงมนหน้าเว็บเพจในมุมมองออกแบบ (Design View)
1. วางตัวบอกตำแหน่งการพิมพ์ลงในเซลล์
2. พิมพ์ข้อความที่ต้องการ ขนาดของเซลล์จะขยายออกตามความกว้างของข้อความ
การใส่รูปภาพลงในเซลล์
1. วางตัวบอกตำแหน่งการพิมพ์ลงในเซลล์
2. เลือกคำสั่ง Insert > Image หรือ คลิกที่ปุ่ม---รูป—Image ในแท็บ Common ของแถบ Insert
3. เลือกรูปภาพตามความต้องการ
การจัดการเซลล์และตาราง
การเลือกเซลล์หรือตาราง
หากต้องการเลือกเซลล์ ให้คลิกที่ขอบของเซลล์
หากต้องการเลือกตาราง ให้คลิกที่แบของตาราง
----------------------------------รูป--------------------------------------------------
จะปรากฏจุดยึดรอบเซลล์หรือตารางนั้น
การปรับขนาดเซลล์หรือตาราง
1. เลือกเซลล์หรือตารางที่จะปรับขนาด
2. ลากจุดยึดเพื่อปรับขนาด การเคลื่อนย้ายเซลล์หรือตาราง
1. เลือกเซลล์หรือตารางที่จะเคลื่อนย้าย
2. ลากเซลล์หรอตารางนั้นไปยังตำแหน่งที่ต้องการ หรือ กดปุ่มลูกศรบนแป้นพิมพ์ เพื่อขยับไปทีละ 1 พิกเซล หากกดปุ่ม Shift ค้างไว้ แล้วกดปุ่มลูกศร จะขยับไปทีละ 10 พิกเซล
การจัดรูปแบบเซลล์หรือตาราง
1. เลือกเซลล์หรือตารางที่จะจัดรูปแบบ
2. กำหนอค่าต่างๆ ในพาเนล Properties
----------------------------------รูป------------------------------------------------
การจัดการคอลัมน์ในตาราง
เมนูของคอลัมน์
เราสามารถจัดการคอลัมน์ในตารางได้ด้วยคำสั่งในเมนูของคอลัมน์ โดยคลิกที่รูปหัวลูกศรในแถบของหัวคอลัมน์
-----------------------------------------------------รูป------------------------------------------------
การกำหนดให้คอลัมน์ยืดขนาดเองอัตโนมัติ
เลือกคำสั่ง Make Column Autostretch จากเมนูของคอลัมน์ หรือ เลือกเซลล์ใดๆ ในคอลัมน์นั้น แล้วคลิกเลือก Autostretch ในพาเนล Properties
-------------------------------------------รูป-------------------------------------------------
ในการยึดคอลัมน์นั้น โปรแกรมจะต้องเติมช่องว่างลงไปให้ เรียกว่า Spacer image ให้เลือกตัวเลือก แล้วเลือก OK
---------------------------------------------รูป----------------------------------------------
การกำหนดให้ความกว้างคอลัมน์คงที่
เลือกคำสั่ง Make Column Fixed Width จากเมนูของคอลัมน์ หรือ เลือกเซลล์ใดๆ ในคอลัมน์นั้น แล้วคลิกเลือก Fixed พาเนล Properties แล้วใส่ข้อความกว้างที่ต้องการ
-----------------------------------------------รูป-------------------------------------------------------------
การตัดที่ว่างส่วนเกินในแนวตั้งของเซลล์
เมื่อเราสร้างเซลล์ขึ้นในเลย์เอ๊าต์ โปรแกรมจะทำการกำหนดความสูงของเซลล์ไว้ตามที่เราสร้าง แต่หลังจากที่เราใส่เนื้อหาลงในเซลล์เหล่านั้นแล้ว บางเซลล์อาจมีเนื้อที่เหลือเป็นพื้นที่ว่างๆ ในเซลล์นั้น ซึ่งเราสามารถตัดส่วนพื้นที่ว่างๆ เหล่านี้ออกไปได้ เพื่อให้ขนาดของเซลล์กระชับเนื้อหาที่มีอยู่จริง
เลือกคำสั่ง Clear Cell Heights จากเมนูคอลัมน์
---------------------------------รูป-----------------------------------
ไม่มีความคิดเห็น:
แสดงความคิดเห็น