บทที่ 1 การสร้างงานพื้นฐาน

การใช้งานเบื้องต้น

หลังจากที่เปิดโปรแกรม Dream weaver 4 จะสังเกตเห็นหน้าจอที่เข้าใจง่ายต่อการออกแบบและปรับเปลี่ยนได้ตามความถนัดของผู้ใช้ การออกแบบจะอยู่ในส่วนที่เรียกว่าหน้า DOCUMENT เมื่อเรานำมาเปิดที่ Browser ก็จะเห็นเหมือนกับที่เราออกแบบไว้ที่หน้า DOCUMENT ซึ่งเป็นการง่ายต่อการออกแบบ

แนะนำเครื่องมือที่สำคัญในการทำงาน

• Object palette : เป็นเครื่องมือที่มีความสำคัญมากใช้ในการ ดึงรูป สร้าง link ตาราง และอื่นๆ

• Properties inspector : เป็นเหมือนกับคุณสมบัติของ Object ที่เราเลือกเพราะ Properties จะเปลี่ยนตาม Object ที่เลือก

• Mini launcher : จะเน้นไปทางโครงสร้างของงานเช่น การดู Code html ดูโครงสร้างของ file

การใช้งาน

Object palette เรียกใช้งานโดยการเลือกที่ Window >Object palette หรือ กด F2 ภายในจะมีหัวข้อคำสั่ง 7 หัวข้อเลือกใช้ได้โดยคลิกที่ลูกจะมีคำสั่งให้เลือกดังภาพ

1. Characters เป็นการจัดเกี่ยวกับด้านสัญลักษณ์ต่างๆที่มีปัญหากับเวอร์ชั่นเก่าทำให้สามารถใช้งานได้ง่ายขึ้น

2. Common เป็นObject ที่ใช้งานมากที่สุดเป็นคำสั่งนำรูปภาพมาใช้ ตาราง และพวก Plung in ต่างๆ

3. Forms เป็นการสร้างแบบฟอร์ม เช็คบ๊อกซ์

4. Frames เป็นคำสั่งการแบ่งหน้าจอออกเป็นส่วนๆสมัยก่อนนิยมใช้กันมาก

5. Head เป็นคำสั่งใช้ Link

6. Invisible เป็นการใช้คำสั่งด้านภาษา Script ต่างๆ

7. Special เป็นคำสั่งพิเศษสำหรับมืออาชีพ สำหรับระดับเบื้องต้นไม่จำเป็นต้องใช้

การสร้าง File งาน

ในที่นี้จะแนะนำการสร้าง File งานอย่างถูกต้องเป็นขั้นตอนและมีระบบเพื่อให้ง่ายต่อการทำงานและสามารถแก้ไขปรับปรุงได้ในอนาคต

1. ไปที่ Menu Bar เลือกที่ Site จะมีเมนูย่อยให้เลือกที่ New Site

2. จะมีวินโดวส์ New Site เกิดขึ้นให้ใส่ข้อมูลดังขั้นตอนต่อไปนี้

• ช่อง Site Name ให้ทำการตั้งชื่อ Site

• ในช่อง Local Root Folder ให้เลือกสัญลักษณ์รูปซองเอกสารด้านขวาจากนั้นจะขึ้นวินโดวส์ดังภาพ

• ให้ Click ที่ลูกศรดังภาพจากนั้นให้เลือกที่ Desktop

• ให้เลือกที่ Create New Folder จากนั้นให้ตั้งชื่อตามที่ต้องการ แลัว Click ปุ่ม Open แล้ว Click ปุ่ม Select อีกครั้ง จากนั้นจะกลับเข้าสู่หน้า New Site อีกครั้ง และ Click ปุ่ม Ok ด้านล่าง

• หลังจาก Click ปุ่ม Ok แล้วจะกลับมาสู่หน้า Site ด้านซ้ายบนจะมีชื่อ Site Name ที่ได้ตั้งไว้ขึ้นมา และช่อง Local Folder จะมี Folder ที่ได้เลือกไว้เช่นกัน

• ขั้นตอนต่อไปเป็นการสร้าง File งาน การสร้าง File แรกจำเป็นต้องตั้งชื่อ File เป็น index.html เสมอเพราะ Browser จะอ่าน File index.html ก่อนเป็นอันดับแรกแต่ในช่อง URL จะไม่แสดง / index.html แต่จะแสดงเพียงชื่อ website เท่านั้นและหลังจากนั้นถึงจะ Link ไปยัง File งานอื่นซึ่งจะตั้งเป็นชื่ออะไรก็ได้

• การสร้าง New File โดยการ Click ที่ File > New File

• จากนั้นให้เปลี่ยนชื่อ เป็น index.html

• ให้ทดสอบโดยการ ดับเบิล Click ที่ index.html ก็จะปรากฏหน้า Document ที่ชื่อ index.html ที่พร้อมสร้างงานได้ทันที

การตั้งค่าต่างๆ ที่จำเป็นต่อการสร้างงาน

การตั้งขนาดหน้าจอ

การที่จะทำการออกแบบเราต้องทราบถึงขนาดหน้าจอว่าเราต้องการออกแบบหน้าจอให้จอภาพขนาดไหนที่สามารถรับชมเวบของเราได้พอดีกับหน้าจอ ในปัจจุบันจอคอมพิวเตอร์จะอยู่ในระดับ 15 นิ้ว ประมาณ 90 % ที่เหลือจะเป็น 14 และ 17 นิ้ว ในที่นี้แนะนำให้กำหนดขนาดระดับจอภาพ 15 นิ้ว ขนาด 800 x 600 เพราะจอใหญ่กว่าก็สามารถดูได้

การตั้งขนาดให้กับ Document

ตั้งได้โดยการเลือกที่ด้านล่างของหน้างานโดยการ Click ที่ลูกศรจะมีขนาดให้เลือก

หากไม่มีขนาดที่ต้องการให้เลือกที่ Edit Size จะเป็นหัวข้อ Perference ช่อง Status Bar

ในหัวข้อ Window Sizes จะมีให้เราระบุขนาดตามต้องการในช่อง Width ใส่ขนาด 800 ส่วนช่อง Height ใส่ขนาด 600 และ Click Ok จากนั้นให้กลับมาเลือกขนาดจาก Window Size อีกครั้งจะมีขนาดที่ได้ตั้งไว้ปรากฎขึ้นมาและให้ทำการเลือกขนาดที่ได้กำหนดไว้หน้า Document ก็จะเปลี่ยนเป็นขนาด 800 x 600 ทดสอบได้จากการ Click ที่ View >Rulers เลือก Show และเลือกหน่วยเป็น Pixels

การตั้งตัวอักษร

การตั้งให้สามารถใช้ภาษาได้นั้นทำได้โดยการเลือกที่ Edit>Perference>Font Type/Encoding หรือใช้ Ctrl U เป็นปุ่มลัดก็สามารถเข้าไปที่ Perferences ได้

• ในหัวข้อ Font / Encoding ให้ระบุค่าดังนี้

• Default Encoding เลือกเป็น Other

• Font Setting เลือกเป็น Other

• Proportional Font เลือกเป็น Font อะไรก็ได้ที่ใช้ภาษาไทยได้แต่ควรเลือก Font ที่เป็นมาตรฐานหน่อย เพราะถ้า Browser ของผู้ชมไม่มี Font ชนิดที่เราเลือกก็จะไม่สามารถแสดงได้ตามที่เราต้องการ ขอแนะนำให้ใช้ Font ของ Ms Sans Serif ขนาด 10 pt เพราะเป็น Font มาตรฐานที่มีมากับระบบปฏิบัติการ Window

• Fixed Font เลือกเหมือนเดิมไม่ต้องเปลี่ยนแปลง

• Code Inspector เลือก Ms Sans Serif ขนาดตามต้องการ ( เป็นตัวแสดง html )

• Click ok

• ทดสอบโดยการพิมพ์ภาษาไทย

การตั้งค่าของ Document

เลือก Modify >Page Properties หรือ Clrt J จะช่วยให้ทำงานได้เร็วขึ้น

• Title ใส่ชื่อ

• Background Image เป็นการใช้รูปมาทำเป็น backgound ถ้ารูปมีขนาดเล็กทางโปรแกรมจะจัดเรียงเป็น Patten เรียงรูปซ้ำกันเป็นแบบตาราง

• Background สีพื้นของเวบสามารถเลือกสีได้ตามต้องการโดยการ Click ที่ช่องสี จะมีจานสีให้เลือกดังภาพด้านล่าง

• Text เป็นสีของตัวอักษรสีมาตรฐานคือสีดำสามารถเลือกได้

• Link สีตัวอักษรที่เป็น Link มาตรฐานจะเป็นสีน้ำเงิน

• Visited Link เป็นสีสำหรับ Link ที่ไปมาแล้ว

• Active Link เป็นสีในขณะที่ Click Link

• Document Encoding ให้เลือกเป็น Other

• Click Apply

• Click Ok

• จากนั้นจะกลับมาที่หน้า Document พร้อมกับความเปลี่ยนแปลงของสีพื้นจะเปลี่ยนเป็นสีที่ได้ทำการเลือกไว้