การพิมพ์ข้อความ ในโปรแกรม Dreamweaver

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

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

การแทรกรูปภาพในโปรแกรม Dreamweaver

ชนิดของรูปภาพที่ใช้ในเว็บเพจ

          ชนิดของรูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกันดังนี้

          GIF (Graphic Interchange Format) นับเป็นไฟล์ภาพที่สามารถแสดงผลกับเบราเซอร์ได้ทุกชนิด จึงได้รับความนิยม โดยส่วนมากมักจะใช้รูปภาพไฟล์ .gif กำหนดฉากหลังหรือพื้นที่โปรงใส การใช้ทำภาพเคลื่อนไหว (Animation) ภาพโลโก้ ตัวการ์ตูน ภาพตัวอักษรลายเส้นต่างๆ

          JPG (Joint Photographic Expert Group) เป็นไฟล์ภาพที่แสดงสีได้ถึง 16.7 ล้านสี เหมาะสำหรับภาพที่ใช้สีจำนวนมาก ภาพที่มีการไล่ระดับสีอย่างต่อเนื่องหรือภาพถ่ายทั่วไป

          PNG (Portable Network Graphic) เป็นไฟล์ภาพที่ไม่ได้รับความนิยมมากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเป็นรูปแบบใหม่ จึงไม่สามารถแสดงผลได้ทุกเบราเซอร์

ขั้นตอนการแทรกรูปภาพ

1. คลิกที่ปุ่ม Image หลังจากนั้นจะมีหน้าต่าง Select Image Source ขึ้นมา

2. เลือกรูปภาพที่ต้องการ แล้วคลิกที่ปุ่ม OK

3. ปรับขนาดตามต้องการจากเมนู Properties (ตามภาพด้านล่าง)

 ** ในการแทรกไฟล์แอนิเมชัน และแทรกปุ่ม ก็ให้ด้วยวิธีเดียวกัน

การเชื่อมโยง (Link) ในโปรแกรม Dreamweaver

          การเชื่อมโยงบนเว็บเพจมีด้วยกันหลายรูปแบบ อาจแบ่งตามการใช้งาน หรือตามลักษณะของการเชื่อมโยงภายในเว็บเพจ และการเชื่อมโยงภายนอกเว็บเพจ แต่ถ้าแบ่งตามวัตถุประสงค์ของรูปแบบการใช้งานจะแบ่งการเชื่อมโยงเว็บเพจออกเป็นการเชื่อมโยงภายในเว็บเพจเดียวกัน การเชื่อมโยงภายในไซต์เดียวกัน การเชื่อมโยงไปยังเว็บไซต์อื่น

การทำลิงค์เชื่อมไฟล์

          การทำลิงค์เชื่อมไฟล์ สามารถทำได้หลายฟอร์แมต ทั้งไฟล์สกุล HTML และอื่นๆ โดยไฟล์อื่นๆ จะทำงานในลักษณะ Download ไฟล์
1. ทำแถบสีคลุมข้อความที่ใช้เป็นจุดลิงค์
2. สังเกตที่แถบ Properties จะเห็นรายการ Link
… พิมพ์ชื่อไฟล์ที่ต้องการให้ลิงค์
ชื่อไฟล์อาจจะเป็นไฟล์ .html หรือ ไฟล์ใดๆ ก็ได้ โดยจะต้องระบุ “นามสกุล” ของไฟล์ด้วยเสมอ (หมายเหตุ ระวังเรื่องพิมพ์ชื่อไฟล์ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ถือว่าเป็นคนละตัวกัน) สามารถใช้ปุ่มสัญลักษณ์รูปแฟ้มสีเหลือง เลือกไฟล์ได้ เมื่อกำหนดชื่อไฟล์ที่ต้องการลิงค์จากรายการ Link เรียบร้อยแล้ว ให้นำเมาส์มาคลิกในพื้นที่ทำงาน เพื่อยืนยันการกำหนดลิงค์

การยกเลิกลิงค์

1. ให้คลิกเมาส์ ณ จุดลิงค์เดิม
2. ลบรายชื่อไฟล์ออกจากรายการ Link

การทำลิงค์

1. เลือกรูปภาพ หรือเลือกข้อความที่ต้องการ

2. ในส่วน Properties พิมพ์ URL ของเว็บเพจลงไปในช่อง Link เช่น https://www.kru-it.com เป็นต้น หรือถ้าในกรณีที่จะเชื่อมโยงไปยังเว็บเพจที่เราสร้าง ก็สามารถกระทำได้โดยคลิกที่ไอคอน แล้วเลือกหน้าเว็บเพจที่ต้อง

การบันทึกเว็บเพจในโปรแกรม Dreamweaver

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

1. คลิกที่เมนู File > Save (Ctrl + S)
2. เลือกพื้นที่จัดเก็บ
3. ตั้งชื่อไฟล์
4. คลิกปุ่ม Save เพื่อบันทึก

การทดสอบเว็บเพจกับเบราเซอร์

ในระหว่างการสร้างเว็บเพจ เราต้องตรวจสอบการแสดงผลของเนื้อหา เช่น สี ขนาด และตำแหน่งของข้อความหรือรูปภาพเมื่อนำขึ้นไปแสดงผลบนเบราเซอร์ โดยคลิกที่เมนู File > Preview in Browser > เลือกเว็บบราวเซอร์ เช่น Internet Explorer หรือกดปุ่ม F12 ที่คีย์บอร์ด

อ้างอิง : 

1. จีระพงษ์  โพพันธุ์ . “หน่วยที่ 2 ทำความรู้จักกับ Macromedia Dreamweaver”. http://www.glongchalk.com/index1.php?name=knowledge . 2554
2. ICT CENTER . “เทคนิคการสร้าง และออกแบบ Web site ด้วย Adobe Dreamweaver CS3”. http://aster.spu.ac.th/file/user/66/66/upload/doc_train/dreamweverCS3.pdf .

• Facebook
• Twitter
• Line