หน้าแรก สมาชิก นายสันติ สงบสุข สมุด บทเรียนคอมพิวเตอร์เบื้องต้นการใช้ Dream weaver ทำเว็บไซต์เบื้องต้น

การใช้ Dream weaver ทำเว็บไซต์เบื้องต้น

นายสันติ สงบสุข

เขียนเมื่อ 2 ต.ค. 2551 13:16 น. · แก้ไขเมื่อ 21 มิ.ย. 2555 10:18 น. 2 ต.ค. 2551 · 21 มิ.ย. 2555

คำสำคัญ (Tags): #การใช้ dream weaver ทำเว็บไซต์เบื้องต้น

ความเห็น

นายสันติ สงบสุข

เขียนเมื่อ 2 ต.ค. 2551 13:19 น. 2 ต.ค. 2551

บทที่ 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 พร้อมกับความเปลี่ยนแปลงของสีพื้นจะเปลี่ยนเป็นสีที่ได้ทำการเลือกไว้

นายสันติ สงบสุข

เขียนเมื่อ 2 ต.ค. 2551 13:20 น. 2 ต.ค. 2551

บทที่ 2 การพิมพ์ตัวอักษร

การสร้างงาน

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

การพิมพ์ตัวอักษร

การพิมพ์ตัวอักษรใน Dreamweaver เหมือนกับการใช้ Microsoft Word หากเคยใช้มาบ้างก็จะเป็นการง่ายในการทำความเข้าใจ

การพิมพ์ข้อความ

สามารถพิมพ์เข้าไปในหน้า Document ได้เลย และลอง Preview ดูโดยการกด F12 ( เป็นการจำลอง Browser ) เราจะเห็นได้ว่าตัวอักษรที่พิมพ์จะเหมือนกันกับที่ Preview ทุกประการ นอกจากนั้นยังมีคุณสมบัติพิเศษที่สามารถปรับแต่งได้ โดยการใช้ Properties

วิธีใช้

• Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ

• Paragraph การพิมพ์แบบต่อเนื่อง

• Heading 1-6 การพิมพ์หัวข้อเรื่องตามขนาด Heading 1 เป็นขนาดใหญ่ที่สุดเรียงตามลำดับ การใช้เลือกก่อนพิมพ์ หรือถ้าพิมพ์ไปแล้วจะใช้ได้โดยการ Click Mouse ค้างแล้วป้ายทั้งข้อความที่ต้องการจากนั้นมาเลือกที่ Propreties > Format ตัวอักษรก็จะเปลี่ยนตาม ส่วนตัวอักษรที่ไม่ได้เลือกก็จะไม่มีการเปลี่ยนแปลง

• ในหน้า Document เดียวกันเราสามารถใช้ ตัวอักษรหลายแบบโดย Click ที่ลูกศรในช่อง Default Font จะมี Font อื่นให้เลือก ส่วนค่า Default Font จะเป็น Font ที่ได้ทำการ Set ไว้ในตอนต้น

• Size ขนาดของตัวอักษร

• การใช้ตัวหนา และตัวเอน ตัวหนา Click ที่ B และตัเอน Click ที่ ตัว I

• การจัดให้ ชิดซ้าย ชิดขวา หรือกึ่งกลาง ( เหมือน Word ทุกประการ )

• การใช้หัวข้อย่อย จะเป็นจุดหรือตัวเลขก็ได้

• เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก

ข้อจำกัดของการพิมพ์ตัวอักษร

เนื่องจากการพิมพ์ไม่สามารถเว้นวรรคตัวอักษรได้เกินหนึ่งตัวอักษร ทำให้การจัดรูปแบบการย่อหน้าไม่สามารถทำได้ วิธีแก้ไขโดยการใช้ Object ในหัวข้อ Character ภายในจะมีเครื่องมือให้ใช้หลายอย่างเป็นเครื่องมือที่ในเวอร์ชั่นเก่าไม่มี

• การขึ้นบรรทัดใหม่โดยการกด Enter ในโปรแกรมจะเป็นการเว้น 2 บรรทัด ถ้าหากต้องการเว้นหนึ่งบรรทัดสามารถทำได้โดยการใช้ Character ในหัวข้อ BR ( Line Break ) หรือกด Shitf ค้างพร้อมทั้งกด Enter

• การเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space ดังรูปด้านล่าง

นายสันติ สงบสุข

เขียนเมื่อ 2 ต.ค. 2551 13:20 น. 2 ต.ค. 2551

บทที่ 3 การนำรูปภาพมาใส่ในงาน (Insert Image)

Image รูปภาพ

Dreamweaver จะสนับสนุนไฟล์ได้ทั้งรูปแบบ Jpeg และ GIF เหมือนกับ Browser นอกจากนั้น ยังมีไฟล์แบบ PNG ซึ่งต้องใช้ Browser 4.0 ขึ้นไป จึงจะสามารถดูไฟล์ PNG ได้

ไฟล์ JPG หรือ JPEG

เหมาะสำหรับรูปถ่ายจริง รูปที่ใช้สีใกล้เคียงธรรมชาติ รูปที่ใช้โทนสีจำนวนมาก และสีที่มีโทนสีต่อเนื่องเพราะ JPG มีสีหลักให้เลือก 16.7 ล้านสี

ไฟล์ GIF

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

ไฟล์ GIF มีรูปแบบพิเศษกว่าไฟล์นามสกุลอื่น คือ ไฟล์รูปแบบโปร่งแสงหรือเรียกกันว่า Transparent Image ( รูปที่ไม่มี Background เหมือนรูปบนแผ่นใส )

ไฟล์ GIF สามารถทำเป็นไฟล์ภาพเคลื่อนไหวแบบง่ายๆ หรือที่รู้จักกันว่า Animation GIF มาจากการรวมไฟล์ GIF หลายรูปเข้าด้วยกัน

ไฟล์ PNG

ไฟล์นามสกุล PNG ถูกตั้งเป้าหมายไว้ว่า จะนำมาใช้แทนไฟล์ GIF แบบไม่เป็นทางการ เนื่องจากคุณสมบัติที่กำหนดให้สร้างขึ้นมา เพื่อลบจุดด้อยของไฟล์ JPG และ GIF แต่สาเหตุที่ไฟล์รูปแบบนี้ ยังไม่เป็นที่แพร่หลาย นั้นเพราะว่ายังไม่มีโปรแกรมที่สนับสนุนไฟล์นี้มากเท่าที่ควร มีเพียงโปรแกรม Macromedia Firework

การใส่รูปใน Dreamweaver จะต้องบอกที่เก็บไฟล์เสียก่อนข้อแนะนำก็คือ ควรจะเก็บไฟล์ภาพไว้ที่เดียวกับไฟล์งาน Document ของเรา

Insert image

การใส่รูปลงใน Document ทำได้หลายวิธี แล้วแต่ความถนัดของแต่ละคน

• คลิกที่ Image จาก Object Palette

• เลือกเมนู Insert > Image

• ลากปุ่ม Object Image จาก Object Palette ไปวาง

• ลากรูปจาก Desktop มาใส่ได้เลย

ในที่นี้จะนำเสนอวิธีการใส่รูปภาพโดยการคลิกที่ Image จาก Object Palette เพราะเป็นวิธีที่ง่ายต่อการใช้งาน รวดเร็ว

• ก่อนทำการใส่รูปภาพจำเป็นอย่างยิ่งต้องมีรูปภาพเก็บไว้ในโฟล์เดอร์ที่กำหนดคือ ให้ทำการสร้างโฟล์เดอร์ ชื่อ Image เก็บไว้ในโฟล์เดอร์ที่เราได้สร้างเก็บไฟล์ Index.html ตั้งแต่ตอนต้น

• มาที่ Tasbar ด้านล่างของ Document คลิกที่ Show site

• เลือกที่เมนูคลิก File > New Folder จากนั้นเปลี่ยนชื่อเป็น image ดังภาพด้านล่าง Folder image นี้จะเป็นที่เก็บรูปทั้งหมดของเวบมารวมกันไว้ที่เดียวกัน ถ้าหากเราได้สร้างภาพหรือนำภาพมาจากที่อื่นให้นำมาเก็บไว้ที่ Folder image เพื่อเป็นการง่ายต่อการอ้างอิง File

• หลังจากสร้าง Folder image แล้วให้ทำการเปิด File index.html โดยการดับเบิ้ลคลิกที่ File index.html ใน Local Folder

• จากนั้นเราจะมาที่หน้า Document index.html เพื่อทำการทดลองการดึงรูปภาพมาใช้

• วิธีดึงรูป มาที่ Object palette คลิกที่ Image ( ถ้าหากไม่ปรากฎ Object palette ในหน้าจอให้ไปที่เมนู Window > Object หรือ กด F2 ) หลังจากที่คลิก image จะมี Dialog box ให้เรามาที่ Floder ที่เราได้สร้างไว้ เข้าไปใน Folder แล้วคลิกเลือก File รูปภาพที่ต้องการ คลิก Select

• หลังจากคลิก Select รูปภาพที่เลือกก็จะมาปรากฎที่หน้า Document ให้ทดลองคลิกที่รูปภาพแล้วทดลองการปรับใน Properties inspector รายละเอียดต่างๆมีดังนี้

• คลิกรูปให้ Active มาที่ Properties inspector จะแสดงรายละเอียด ( สามารถขยายขนาดของ Properties ได้โดยการ Double Click ที่ Properties inspector หรือคลิกที่ลูกศรชี้ลงด้านล่างขวาก็สามารถขยายได้เช่นกัน

• NAME ไว้ให้ตั้งชื่อของรูปภาพ

• W และ H คือค่าความกว้างและความสูงของภาพ ( ตามปกติโปรแกรม Dreamweaver จะกำหนดขนาด ตามรูปจริงอยู่แล้วดังนั้นในช่องนี้จึงเป็นการย่อขยายขนาดรูปเท่านั้น ) แต่ไม่แนะนำให้ทำการปรับขนาดหรือย่อภาพเพราะจะทำให้คุณภาพของภาพเสียหายได้ให้ใช้โปรแกรมในการ Edit ภาพโดยตรงดีกว่า อย่างเช่น Photoshop หรือ Firework

• Src เป็นช่องที่แสดงให้เห็นถึงการอ้างอิง File รูปภาพว่ามาจาก Folder ไหน

• Link เมื่อใส่ชื่อ File.html ในช่อง Link ก็จะทำให้รูปนั้นกลายเป็นปุ่ม Link ทันที (หัวข้อการ Link จะขอกล่าวถึงในการทำ Link อีกครั้งหนึ่ง)

• Align เป็นการจัดวางข้อความที่อยู่ต่อจากรูปภาพ

• Browser Default ขึ้นอยู่กับค่าที่ Browser เซ็ทไว้ (ปกติจะเท่ากับค่า baseline)

• Baseline,Bottom จะจัดข้อความให้อยู่ชิดเส้นล่าง

• Top Aligns, Text Top Align

• Middle Aligns, Absolute Middle Aligns

• Left จะบังคับรูปให้อยู่ด้านซ้ายเสมอ และทำการโยงข้อความ ไปจัดระเบียบใหม่ทางขวาให้หมด แต่ถ้าข้อความบังคับจัดซ้ายเหมือนกันจะการขึ้นบรรทัดใหม่ให้ข้อความแทน

• Right หลักการเหมือนกับ Left

• ALT เป็นคำอธิบายสั้น ๆ แทนรูป กรณีรูปไม่โหลดหรือโหลดยังไม่ครบหรือสำหรับ Browser ที่ไม่สามารถแสดงรูปได้คำอธิบายสั้น ๆ จะทำให้พอเข้าใจว่าตำแหน่งนี้คือรูปอะไร

• V space (คือระยะห่างแนวตั้ง Vertical) และ H space (คือระยะห่างแนวนอน Horizontal)

• Target เป็นการกำหนดให้ทำการเปิดหน้า Document แทนหน้าเดิมหรือเปิด Windows ขึ้นมาใหม่อีกหน้าหนึ่ง ตามปกติค่า Default จะกำหนดให้เปิดหน้า Document ขึ้นมาแทน (ส่วนรายละเอียดอื่น ๆ จะกล่าววิธีการใช้ Target link ในบท Frame)

• Low src คือการใช้รูปขาวดำ (2 BITS) ความละเอียดต่ำมาทำเป็น Preview ให้กับรูปที่กำลังโหลดอยู่เนื่องจาก File จะมีขนาดเล็กมาก และช่วยทำให้ผู้เข้าชมเวบพอจะเดาได้ว่ารูปนี้คืออะไร

• Border ขนาดกรอบรูป ถ้าไม่ต้องการให้มีกรอบให้ใส่ค่าเท่ากับ 0

• Map เรียก Image map มาใช้งาน (จะกล่าวถึงในหัวข้อของการทำ Link)

• Refresh ปุ่ม reset เพื่อคืนค่าความกว้างและความสูงไปใช้ขนาดจริงของรูป

• Edit เมื่อต้องการจะแก้ไขปรับเปลี่ยนรูปนั้น กด Edit ปุ่มนี้ จะเป็นการเรียกโปรแกรมตกแต่งภาพทางลัดโดยเปิด File รูปนี้รอให้ทันที (แต่ต้องมีการตั้งค่าโดยการเลือกที่เมนู Edit > Preferences > File Types / Editors มาที่ Extensions คลิกที่ไฟล์นามสกุลที่เราใช้ ในที่นี้เลือก .gif จากนั้นให้มาที่ Editors ด้านขวามือคลิกเครื่องหมายบวกตามลูกศร จากนั้นจะมี Dialog box ปรากฎให้ทำการเลือกไฟล์ .EXE ของโปรแกรมแต่งภาพที่ต้องการในที่นี้ใช้โปรแกรม Photoshop จากนั้นให้คลิกที่ Photoshop ในช่อง Editors แล้วคลิกปุ่ม Make Primary เพื่อเป็นการเลือกใช้โปรแกรม Photoshop แล้วคลิก ปุ่ม OK การทดสอบได้โดยการคลิกที่รูปที่ต้องการ Edit หน้า Document มาที่ Property Inspector คลิก Edit จากนั้นทางโปรแกรมจะเปิดโปรแกรม Photoshop ให้เพื่อทำการแก้ไขทันที

การใช้ Image Map หรือ Hotspot แบบอิสระ

• คลิกที่รูปภาพให้ทำงานมาที่ Properties inspector

• มาที่ Map เลือกรูปแบบที่จะทำ Hotspot มีให้เลือกแบบสี่เหลี่ยม วงกลม และรูปทรงอิสระ หลังจากเลือกได้แล้วให้มาที่รูปภาพ คลิก Mouse ค้างราก Mouse ให้เป็นรูปที่ต้องการดังภาพ

• จากนั้นให้มาที่ Properties inspector อีกครั้งจะเห็นว่า Properties inspector จะเป็น Option ของ Hotspot มีค่าต่างๆ ให้ตั้งดังนี้

• Link เลือก File ที่ต้องการ Link จะกล่าวในหัวข้อการทำ Link

• Taget กำหนดให้ทำการเปิด Window ใหม่ หรือให้แปะทับของเก่า

• Alt การบอกรายละเอียดของรูปภาพดังที่ได้กล่าวมาแล้ว

นายสันติ สงบสุข

เขียนเมื่อ 2 ต.ค. 2551 13:21 น. 2 ต.ค. 2551

บทที่ 4 การลิงค์ไฟล์งาน (Link)

Link

ลิงค์สามารถแยกเป็นประเภทใหญ่ๆ ได้สองประเภทคือการลิงค์แบบ

• Absolute Link : เป็นลิงค์ที่ต้องอ้างอิงข้ามระหว่างโดเมน เช่นการลิงค์ไปยังเวบไซต์อื่น และจะต้องระบุชื่อโดเมนทั้งหมด เช่น ทำการลิงค์ไปที่ Hotmail ต้องระบุคือ http://www.hotmail.com ถึงจะสามารถลิงค์ได้

• Relative : เป็นการลิงค์ภายในเวบของเราเอง จะอยู่ในโฟลเดอร์เดียวกัน การลิงค์ไม่ยากมากนัก

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

การทำลิงค์ข้อความ

เป็นการลิงค์ที่ง่ายและไม่ยุ่งยากก่อนที่จะทำการลิงค์จำเป็นต้องสร้างไฟล์ที่เป็นเป้าหมายที่จะทำการลิงค์ ให้ทำดังนี้กด F8 เพื่อเรียก Site ให้สร้างไฟล์ขึ้นใหม่ดังนี้ index.html , address_book.html , my_picture.html

• หลังจากที่ได้สร้างไฟล์เรียบร้อยแล้วให้เริ่มทำงานที่หน้า index.html โดยการดับเบิ้ลคลิกที่ไฟล์ index

• จากนั้นจะมาเริ่มต้นที่หน้า Document index.html ให้ทำการพิมพ์ข้อความว่า Address Book และ My Picture

• ขั้นตอนต่อไปเป็นขั้นตอนการลิงค์ทำได้โดยการป้ายทับข้อความ Address Book จากนั้นให้มาที่ Porperties inspector ในช่องลิงค์ให้คลิกที่สัญลักษณ์รูปโฟลเดอร์ดังรูปด้านล่าง

• จากนั้นจะมี Dialog box ให้เลือกไฟล์ address_book.htm จากนั้นคลิก Select

• ต่อมาให้การเลือกข้อความ My Picture ให้พร้อมที่จะทำการลิงค์ ให้เริ่มทำการลิงค์เหมือนกับข้อความแรกแต่ให้เลือกไฟล์ใน Dialog box เป็น my_picture.htm จากนั้นคลิก Select

• หลังจากเลือกไฟล์แล้วให้ทดสอบการโดยการกด F12 เป็นการดูผ่าน Browser ทดลองคลิกที่ลิงค์ที่ได้ทำไว้

• หลังจากคลิกที่ Address Book ทาง Browser จะเปิดหน้าเพจขึ้นใหม่เป็นหน้าเพจของ address_book.htm จะสังเกตได้จากช่อง Address

• การทำลิงค์สามารถพิมพ์เข้าโดยตรงในกรณีที่เราสามารถจำชื่อได้ โดยพิมพ์ในช่อง Link

• หรืออีกวิธีหนึ่งจัดว่าเป็นวิธีที่แน่นอนไม่ผิดพลาดในการลิงค์ แต่เราต้องเปิด Site Local Folder และย่อ Window ของทั้งสองให้เล็กสามารถมองเห็นได้ทั้งสองหน้าต่าง

• จากนั้นทำการคลิกที่ Point to file ค้างแล้วลากมายังชื่อไฟล์ใน Local Folder ที่ต้องการลิงค์

• แต่วิธีดังกล่าวจะใช้เนื้อที่ในการทำงานมากและมีข้อจำกัดสำหรับหน้าจอที่เล็กเนื้อที่ในการทำงานก็จะน้อยลงไปด้วย แต่แนะนำให้ใช้วิธีแรกดีเพราะสะดวกและไม่เกิดการผิดพลาด

การลิงค์ไปยังเวบไซต์อื่น

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

ขั้นตอนการทำลิงค์

• ให้เปิดไฟล์ index.html พร้อมที่จะทำงาน

• พิมพ์ข้อความลงไปดังนี้

• Hotmail

• Yahoo

• Pantip

• จากนั้นให้ป้ายทับข้อความ Hotmail ให้ทำงาน

• มาที่ Properties inspector

• ในช่อง Link ให้พิมพ์ URL เข้าไปคือ http://www.hotmail.com

• ส่วน Yahoo และ Pantip ให้ทำขั้นตอนเดียวกันโดยเปลี่ยนลิงค์ไปที่ http://www.yahoo.com และ http://www.pantip.com

• ทดสอบโดยการกด F12 แต่ยังไม่ต้องคลิกใน Browser เพราะเรายังไม่ได้ทำการต่อเชื่อมอินเตอร์เน็ต ให้

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

การทำลิงค์เมล์ Link E-mail

การทำลิงค์เมล์ส่วนมากจะเป็นการให้ผู้ที่ชมเวบไซต์ได้ติดต่อกับเจ้าของเวบไซต์ กล่าวคือก็เป็นการส่งเมล์ธรมดานั้นเองแต่พิเศษอยู่ที่ผู้ชมไม่ต้องพิมพ์ที่อยู่ E-mail Address ของเรา เพียงพิมพ์ข้อความติชมเท่านั้น เหมือนเป็นการส่งเมล์อัตโนมัติโดยไม่ต้องไปที่ผู้ให้บริการเมล์ โดยหลังจากคลิกลิงค์เมล์ทางBrowser จะทำการเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติส่วนมากถ้าเป็น IE จะเปิดโปรแกรม Outlook ให้

วิธีลิงค์เมล์

• ให้เปิดไฟล์ index.html

• ให้พิมข้อความว่า คำติชม

• หรืออีกวิธีคือ

• ใช้ Object โดยเลือกที่ Insert Email Link

• ภายใน Dialog box ให้กำหนดดังนี้

• Text ให้ใส่ข้อความ คำติชม

• E-mail ให้ใส่ที่อยู่ของเมล์

• คลิก OK

• จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง ( send )

การใช้รูปภาพเป็นลิงค์

ส่วนมากจะมีสองประเภทใหญ่คือ การใช้ภาพทั้งภาพทำลิงค์ หรืออีกอย่างก็คือการใช้บางส่วนของภาพทำลิงค์โดยใช้ Hotspot เลือกเฉพาะที่

การใช้ภาพทั้งภาพเป็นลิงค์

การใช้ภาพเป็นลิงค์นิยมสร้างภาพขึ้นมาเองทำเป็นรูปปุ่มกดจะใช้ร่วมกับ Rollover คือลักษณะก่อนเอาเมาส์ผ่านจะเป็นอีกรูปพอเอาเมาส์ผ่านหรือวางที่รูปก็จะเปลี่ยนเป็นอีกรูปหนึ่งและยังสามารถเป็นลิงค์ได้อีกด้วย การทำดังกล่าวจะกล่าวถึงในหัวข้อ Rollover ในที่นี้จะกล่าวถึงการทำลิงค์แบบธรรมดา

• สร้างรูปเก็บไว้ในโฟลเดอร์ image ที่ได้สร้างไว้

• มาที่หน้า Document index.html

• คลิก Insert image จาก Object

• เลือกรูปจาก Dialog box

• คลิก Select

• จากนั้นให้คลิกที่รูปภาพในหน้า Document ที่ได้ Insert มา

• ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว

• จากนั้นเลือกไฟล์ที่ต้องการลิงค์ไปหา หรือจะลิงค์ไปยังเวบไซต์นอกก็ได้

การลิงค์ภาพแบบ Hotspot

การลิงค์แบบ Hotspot การใช้ส่วนมากเป็นการลิงค์เพียงบางส่วนของภาพ ภาพส่วนมากจะเป็นภาพที่มีขนาดใหญ่เพียงภาพเดียว

ขั้นตอนการทำ Hotspot

• มาที่หน้า Document พร้อมทำงาน