9.การเชื่อมโยง (Link)
โดยปกติหน้าของ Web จะมีการ Link ไปยังหน้าอื่น ๆ
เช่น เมื่อคลิกปุ่ม ข้อความหรือภาพที่ต้องการ Link ก็สามารถ Link ไปยังหน้าที่เราต้องการได้ โดยปฏิบัติดังนี้
1.คลิกเลือกปุ่มที่ต้องการจะ
Link .ให้เกิด Active ดังภาพ
2.เลือกปุ่ม Browse for file เพื่อเลือกไฟล์ที่เราต้องการจะ Link ไปหา
3.คลิกไฟล์ที่ต้องการ Link
ไปหาแล้วเลือก Select ดังภาพ
4.ปุ่มจะถูกกำหนดให้ Link
ไปยังไฟล์ data.html ดังภาพ
5.เมื่อ Link เสร็จแล้ว ลองกด F12 ดู
จะได้ดังภาพ
6.กดปุ่มหน้าต่อไป จะปรากฏ ไฟล์
data.html ดังภาพ
menu
วันพุธที่ 27 สิงหาคม พ.ศ. 2557
การสร้างตัวหนังสือวิ่ง
8.
การสร้างตัวหนังสือวิ่ง
การสร้างตัวหนังสือวิ่ง เราจะใช้ tag ของ html ซึ่ง Dreamweaver ได้อำนวยความสะดวก ทำให้เราใช้ได้อย่างง่ายมาก tag ที่จะใช้คือ marquee ซึ่งมีวิธีการดังนี้
2. พิมพ์ข้อความที่ต้องการให้วิ่ง
5. เมื่อคลิกแล้ว Dreamweaver จะนำ tag ไปไว้
ดังภาพ
6. ให้คลิกปุ่ม enter จะปิด Wrap Tag
การสร้างตัวหนังสือวิ่ง เราจะใช้ tag ของ html ซึ่ง Dreamweaver ได้อำนวยความสะดวก ทำให้เราใช้ได้อย่างง่ายมาก tag ที่จะใช้คือ marquee ซึ่งมีวิธีการดังนี้
- 1. กำหนดบริเวณที่จะให้ตัวหนังสือวิ่ง โดยใช้ layout table และ layout cell ดังภาพ
2. พิมพ์ข้อความที่ต้องการให้วิ่ง
3. ลากดำ หรือ hi-light
ข้อความที่พิมพ์ และ ให้คลิกเลือก [ Quick Tag Editor ] ที่ Properties ตามภาพข้างล่าง
4. .จะเกิด Wrap Tag
ขึ้น และอีก 2-3 วินาทีต่อมาจะมีชื่อ tag ต่าง ๆ เกิดขึ้นด้วย ให้เลื่อนลงมาเรื่อย ๆ และเลือก
marquee ดังภาพ
6. ให้คลิกปุ่ม enter จะปิด Wrap Tag
- 7. เมื่อกด F12 จะเห็นข้อความวิ่งในบริเวณที่กำหนด
การสร้างปุ่มที่เปลี่ยนแปลงเมื่อเมาส์ลากผ่าน
7.
การสร้างปุ่มที่เปลี่ยนลักษณะเมื่อเมาส์ลากผ่าน
บางครั้งเราต้องการดึงดูดความสนใจของผู้ใช้ เพื่อให้คลิกไปยังลิงค์ต่าง ๆ โดยเฉพาะเมื่อนำเมาส์ไปลากผ่านปุ่ม ปุ่มก็จะมีลักษณะเปลี่ยนไป เช่น มีแสงเกิดขึ้นที่ตัวอักษร หรือ ตัวอักษรเปลี่ยนสี เป็นต้น มีวิธีการทำดังนี้
1.สร้างปุ่ม 2 ปุ่ม ปุ่มแรก ชื่อ next01.jpg มีลักษณะปกติ ปุ่มที่สอง ชื่อ next02.jpg มีลักษณะที่ต้องการให้เกิดการเปลี่ยนแปลง เมื่อเมาส์ลากผ่าน เช่น
ปุ่มที่ 1 สภาพปกติ ปุ่มที่ 2 เมื่อเมาส์ลากผ่าน
4. แล้วเลือกเมนูที่ Insert > Interactive Images > Rollover Image
7. จากนั้นให้คลิกปุ่ม Browse สำหรับภาพที่จะให้เกิดเมื่อเมาส์ลากผ่าน และ เลือก ภาพที่
2
8. จากนั้น ให้คลิก OK
9. จะปรากฎปุ่มให้เห็นในบริเวณที่กำหนด
10. เมื่อกด F12 และวางเมาส์ผ่านปุ่มนี้ ปุ่มก็จะเปลี่ยนแปลงตามที่ต้องการ
บางครั้งเราต้องการดึงดูดความสนใจของผู้ใช้ เพื่อให้คลิกไปยังลิงค์ต่าง ๆ โดยเฉพาะเมื่อนำเมาส์ไปลากผ่านปุ่ม ปุ่มก็จะมีลักษณะเปลี่ยนไป เช่น มีแสงเกิดขึ้นที่ตัวอักษร หรือ ตัวอักษรเปลี่ยนสี เป็นต้น มีวิธีการทำดังนี้
1.สร้างปุ่ม 2 ปุ่ม ปุ่มแรก ชื่อ next01.jpg มีลักษณะปกติ ปุ่มที่สอง ชื่อ next02.jpg มีลักษณะที่ต้องการให้เกิดการเปลี่ยนแปลง เมื่อเมาส์ลากผ่าน เช่น
ปุ่มที่ 1 สภาพปกติ ปุ่มที่ 2 เมื่อเมาส์ลากผ่าน
- 2. นำภาพไปไว้ในห้องที่เก็บภาพ ซึ่งอยู่ใน site ที่กำลังทำงาน คือ c:\education\images
- 3. เปิดโปรแกรม Dreamweaver แล้วนำ Cursor ไปวางในบริเวณที่ต้องการสร้างปุ่ม
4. แล้วเลือกเมนูที่ Insert > Interactive Images > Rollover Image
5. เมื่อคลิกจะเกิดหน้าจอเมนูเล็ก สำหรับระบุว่า ภาพทั้งสองภาพ
ที่จะนำมาทำเป็นปุ่มนั้นอยู่ที่ไหน
6. ให้คลิกปุ่ม Browse
ของปุ่มแรก จะเกิดเมนูโต้ตอบ ให้คลิกเลือกภาพปกติ
ในตัวอย่างเลือกไฟล์ next01.jpg
8. จากนั้น ให้คลิก OK
9. จะปรากฎปุ่มให้เห็นในบริเวณที่กำหนด
10. เมื่อกด F12 และวางเมาส์ผ่านปุ่มนี้ ปุ่มก็จะเปลี่ยนแปลงตามที่ต้องการ
การนำเข้าข้อมูลในตาราง
6.การนำเข้าข้อมูลในตาราง
1. ก่อนนำเข้าข้อมูลในตาราง ต้องสร้างตารางใน Dreamweaver เสียก่อน โดย
สร้างไฟล์ใหม่ แล้วตั้งชื่อไฟล์ว่า data.html ดังภาพ
2. ดับเบิ้ลคลิกที่ data.html ก็จะเข้าสู่ Document Windows ใหม่
3. ให้เลือก Object คลิกที่ Standard View และคลิกเลือกรูปตาราง (Insert Table) หรือใช้เมนู Insert >Table
4. กำหนดค่าให้มี Rows = 5 Columns = 5 Width =100 Border =1 Cell Padding =5 Cell Spacing = 0 แล้วคลิก OK ดังภาพ
5. ภาพที่ได้จะปรากฏเป็นรูปตาราง ดังนี้
6. ตารางที่สร้างสามารถที่จะยืดหดได้ตามขนาดของข้อมูล โดยนำ Cursor ไปวางที่เส้นของตารางและลากยืดหดได้ตามต้องการ ดังภาพ
7.เราสามารถที่จะพิมพ์ข้อมูลลงในตารางได้ตามต้องการ หรือ Copy ข้อมูลจากไฟล์อื่นและ Paste เข้ามาใส่ในแต่ละช่องของตารางได้ การพิมพ์ตัวหนังสือสามารถทำได้ดังนี้
1. ก่อนนำเข้าข้อมูลในตาราง ต้องสร้างตารางใน Dreamweaver เสียก่อน โดย
สร้างไฟล์ใหม่ แล้วตั้งชื่อไฟล์ว่า data.html ดังภาพ
2. ดับเบิ้ลคลิกที่ data.html ก็จะเข้าสู่ Document Windows ใหม่
3. ให้เลือก Object คลิกที่ Standard View และคลิกเลือกรูปตาราง (Insert Table) หรือใช้เมนู Insert >Table
4. กำหนดค่าให้มี Rows = 5 Columns = 5 Width =100 Border =1 Cell Padding =5 Cell Spacing = 0 แล้วคลิก OK ดังภาพ
5. ภาพที่ได้จะปรากฏเป็นรูปตาราง ดังนี้
6. ตารางที่สร้างสามารถที่จะยืดหดได้ตามขนาดของข้อมูล โดยนำ Cursor ไปวางที่เส้นของตารางและลากยืดหดได้ตามต้องการ ดังภาพ
7.เราสามารถที่จะพิมพ์ข้อมูลลงในตารางได้ตามต้องการ หรือ Copy ข้อมูลจากไฟล์อื่นและ Paste เข้ามาใส่ในแต่ละช่องของตารางได้ การพิมพ์ตัวหนังสือสามารถทำได้ดังนี้
- 1. วาง Cursor ในช่องที่ต้องการพิมพ์และพิมพ์ตัวหนังสือลงไป โดยกำหนดให้ใช้ font เป็น MS Sans serif , Size = 3
- 2. ใช้ Properties ของตัวหนังสือ จัดวางตำแหน่งของตัวหนังสือในแต่ละช่อง ให้อยู่กึ่งกลาง โดยใช้ Align Center
การนำภาพเข้าโปรแกรม
5.การนำภาพเข้าโปรแกรม
การนำภาพเข้าโปรแกรม ปฏิบัติได้ดังนี้
3.เสร็จแล้ว ลองกด F12 ดู จะได้ภาพ ดังนี้
การนำภาพเข้าโปรแกรม ปฏิบัติได้ดังนี้
- 1. save ภาพที่จะใช้ทุกภาพไว้ใน Floder ชื่อ images ใน C:\education\images ที่สร้างไว้แต่แรกเสียก่อน
|
การพิมพ์ตัวอักษร
4.การพิมพ์ตัวอักษร
1.เมื่อสร้างตารางเสร็จ คลิกเลือก Draw Layout Cell ที่ Objects แล้วมาวาดในบริเวณตารางด้านบน จะปรากฏเส้นสีฟ้าแสดงขอบเขตของ Cell ดังภาพ
2. ในขอบเขตของ Cell ให้พิมพ์คำว่า ดอกกุหลาบและกำหนดแบบตัวอักษร สี ขนาด ตำแหน่งของข้อความ (ชิดซ้าย กึ่งกลาง ชิดขวา) และสีพื้นโดยใช้ Properties ดังภาพ
3.หลังจากนั้นให้วาด Cell .ในตารางล่าง 2 Cell และพิมพ์ข้อความบน Cell ในตารางล่างขวามือ ดังภาพ
1.เมื่อสร้างตารางเสร็จ คลิกเลือก Draw Layout Cell ที่ Objects แล้วมาวาดในบริเวณตารางด้านบน จะปรากฏเส้นสีฟ้าแสดงขอบเขตของ Cell ดังภาพ
2. ในขอบเขตของ Cell ให้พิมพ์คำว่า ดอกกุหลาบและกำหนดแบบตัวอักษร สี ขนาด ตำแหน่งของข้อความ (ชิดซ้าย กึ่งกลาง ชิดขวา) และสีพื้นโดยใช้ Properties ดังภาพ
3.หลังจากนั้นให้วาด Cell .ในตารางล่าง 2 Cell และพิมพ์ข้อความบน Cell ในตารางล่างขวามือ ดังภาพ
การออกแบบด้วยตาราง
3. การออกแบบด้วยตาราง
เราจะออกแบบหน้าจอ 2 ส่วน ประกอบด้วยส่วนบนสำหรับหัวเรื่องหรือส่วนหัวของเว็บและส่วนล่างสำหรับข้อความ ขั้นแรกให้ดับเบิ้ลคลิกที่ชื่อไฟล์ index.html เพื่อเปิดหน้าจอมาออกแบบเว็บไซต์ ที่ช่อง Title พิมพ์ว่า หน้าแรกของฉัน เพื่อที่จะให้ผู้ใช้รู้ว่ากำลังอยู่ที่หน้าใด จากนั้นให้ปฏิบัติดังนี้
การกำหนดส่วนบนหรือส่วนหัวของเว็บ
เราจะออกแบบหน้าจอ 2 ส่วน ประกอบด้วยส่วนบนสำหรับหัวเรื่องหรือส่วนหัวของเว็บและส่วนล่างสำหรับข้อความ ขั้นแรกให้ดับเบิ้ลคลิกที่ชื่อไฟล์ index.html เพื่อเปิดหน้าจอมาออกแบบเว็บไซต์ ที่ช่อง Title พิมพ์ว่า หน้าแรกของฉัน เพื่อที่จะให้ผู้ใช้รู้ว่ากำลังอยู่ที่หน้าใด จากนั้นให้ปฏิบัติดังนี้
การกำหนดส่วนบนหรือส่วนหัวของเว็บ
- 1. ที่ Objects คลิกเลือก Layout View 1 ครั้ง
- 2. คลิก Draw Layout Table
- 3. แล้ววาดตารางในหน้าจอ Document Windows ดังภาพ
การกำหนด site และการจัดเก็บไฟล์
- 2. การกำหนด Site และการจัดเก็บไฟล์
การเริ่มต้นใช้โปรแกรม Dreamweaver เพื่อสร้างเว็บสวย ๆ สู่อินเทอร์เน็ต นั้น สิ่งที่ จำเป็นอันดับแรกในการเริ่มงาน คือ การกำหนด Local site เพื่อควบคุมการทำงานของโปรแกรม การสร้าง Local site มีความสำคัญในการใช้งานโปรแกรม Dreamweaver เป็นอย่างมาก เพราะโปรแกรมจะใช้ข้อมูลใน Local site เพื่อติดตามและควบคุมไฟล์งานที่อยู่ในเว็บไซต์
การกำหนด Site ทำได้ดังนี้
- 1. เปิดโปรแกรม Dreamweaver และเลือกเมนู Site>New Site
2. ที่ Site Definition ทางช่องซ้ายมือ Category ให้เลือก Local Info
3. ตั้งชื่อ Site Name ว่า my_homepage
4. กำหนดตำแหน่งที่จะเก็บไฟล์งาน หรือเลือก Folder โดยกดปุ่ม Folder ที่อยู่ทางขวาของหัวข้อ Local Root Folder และเลือกตำแหน่งที่จะเก็บข้อมูล เป็น C :\education
5. ที่ Cache คลิกเลือก ü เครื่องหมายถูก หน้า Enable Cache จะช่วยให้โปรแกรม Dreamweaver สามารถปรับปรุงข้อมูลได้อย่างรวดเร็วเมื่อมีการแก้ไขปรับปรุงเว็บไซต์
6. คลิก OK
- 7. หลังจากนั้นให้เปิดหน้าจอใหม่ โดยใช้คำสั่ง File >New File และตั้งชื่อไฟล์ใหม่เป็น index.html
. ดับเบิ้ลคลิก ที่ชื่อไฟล์ index.html เพื่อเปิดหน้าจอมาออกแบบเว็บไซต์
วันจันทร์ที่ 4 สิงหาคม พ.ศ. 2557
หน้าจอและเมนู
การสร้างเว็บด้วย Dreamweaver
1. หน้าจอและเมนู
หน้าจอ Dreamweaver ประกอบด้วยหลายส่วน แต่ที่สำคัญและใช้บ่อยที่ควรรู้จัก ได้แก่
1. Document Window หรือหน้าจอเป็นส่วนที่แสดงไฟล์ที่กำลังจัดทำซึ่งมีนามสกุล html เมื่อเรียกผ่านโปรแกรม Web Browser (F12) ในส่วนของ Document Window จะแสดง page title โดยมีชื่อไฟล์อยู่ในวงเล็บ และถ้าหากไฟล์นั้นมีการแก้ไขโดยที่ยังไม่ได้บันทึกลงไปจะแสดงเครื่องหมายดอกจันทน์ (*) ไว้ท้ายชื่อไฟล์
สำหรับทางด้านล่างขวาของ Document Window จะเป็น Mini - Launcher ที่จะช่วยให้การทำงานสะดวกขึ้น โดยเป็นส่วนที่ใช้เปิดSite window ,Library palette,Sttyle palette, Behavior inspector, และ HTML inspector
2. Objects เป็นกล่องเครื่องมือที่ใช้ในการสร้างงาน เช่น นำภาพเข้า การกำหนดตาราง การเว้นวรรค การขึ้นบรรทัดใหม่ เป็นต้น การเรียก Objects ไปที่เมนู เลือก Window > Objects
3. Properties เป็นเครื่องมือที่ใช้ในการปรับแต่งสิ่งที่ปรากฏอยู่บนหน้าจอ เช่น การกำหนดขนาดตัวหนังสือ การกำหนดขนาดภาพ การเปลี่ยนสีตัวหนังสือ การจัดตำแหน่งตัวหนังสือ ภาพ และตาราง ที่นำมาแสดงในหน้า Document Window แต่ถ้าหน้าจอไม่ปรากฏ Properties ให้เลือกที่เมนู Window >Properties
4. เครื่องมืออีกชุดหนึ่งที่ควรรู้จัก คือ Code ต่าง ๆ ที่ทำหน้าที่แสดง Code และการแก้ไขเปลี่ยนแปลง Code ให้เป็นไปตามต้องการ
- Show Code View เป็นการแสดง Code ทั้งหมด
- Show Code and design View เป็นการแสดง Code และหน้าจอ Document Windows ที่กำลังทำงาน
- Show design View เป็นการแสดงหน้าจอ Document Windows ที่กำลังทำงาน
ทั้งหมด
สมัครสมาชิก:
บทความ (Atom)