การสร้างเว็บไซต์ด้วย Dreamweaver

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 2675.3.4.5 การกาํ หนดคุณสมบตั ิของรูปภาพ มีดงั น้ี 21 34 รูปที่ 5-91 การกาํ หนดคุณสมบตั ิของรูปภาพ 1) ขนาดของรูปภาพ 2) ตาํ แหน่งท่ีเกบ็ รูปภาพ 3) คาํ อธิบายรูปภาพ 4) การเช่ือมโยงดว้ ยรูปภาพ 5.3.4.6 การกาํ หนดรูปภาพเป็นพ้ืนหลงั การกาํ หนดรูปภาพเป็ นพ้นื หลงั โดยปกติเป็นสีขาว หรือเลือกเป็นสีอื่น ๆนอกจากน้ีสามารถนาํ รูปภาพมาตกแตง่ พ้ืนหลงั ได้ ซ่ึงอยใู่ นคาํ สงั่ Background image มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 ไปท่ีเมนู Modify > Page Properties..คลิกที่เมนู Modify > Page Properties.. รูปท่ี 5-92 หนา้ จอวธิ ีการเขา้ Page Properties.. ข้นั ตอนท่ี 2 แสดงหนา้ จอ Page Properties.. คลิกป่ ุม Browse.. เพือ่ เลือกรูปภาพที่นาํ มาใชเ้ ป็ นพ้นื หลงั จากน้นั คลิกเลือกคาํ สงั่ repeat และคลิกป่ ุม OK

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 268 1. คลิกป่ ุม Browse.. เลือกรูปภาพ2. เลือกคาํ สง่ั repeat 3. คลิกป่ ุม OK รูปท่ี 5-93 หนา้ จอการกาํ หนดพ้ืนหลงั เวบ็ เพจ ข้นั ตอนท่ี 3 แสดงรูปภาพที่ไดบ้ นพ้ืนหลงั หนา้ เวบ็ เพจ ดงั ตวั อยา่ งเป็ นการเลือกทาํ ซ้าํ ภาพแบบ repeat จนเตม็ หนา้ เวบ็ เพจ รูปภาพท่ีไดบ้ นพ้นื หลงั หนา้ เวบ็ เพจรูปท่ี 5-94 หนา้ จอแสดงผลลพั ธ์รูปภาพที่ไดบ้ นพ้นื หลงั หนา้ เวบ็ เพจ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 269 5.3.5 การเช่ือมโยงเอกสาร การเชื่อมโยงเอกสารหรือการทาํ Hyperlink คือ การเช่ือมโยงเวบ็ เพจจากเวบ็ เพจหน่ึงไปอีกเวบ็ เพจหน่ึง ในโปรแกรม Dreamweaver เรียกการเชื่อมโยงน้ีส้ัน ๆ วา่ ลิงค์ (Link) 5.3.5.1 การสร้างเมนูเชื่อมโยงเอกสาร โปรแกรม Dreamweaver สามารถสร้างเมนูเช่ือมโยงได้ 2 แบบ คือการสร้างเมนูเช่ือมโยงดว้ ยขอ้ ความ และ การสร้างเมนูเชื่อมโยงดว้ ยรูปภาพ 1) การสร้างเมนูเชื่อมโยงดว้ ยขอ้ ความ มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 พมิ พข์ อ้ ความท่ีตอ้ งการสร้างเมนูเชื่อมโยง พิมพข์ อ้ ความท่ีตอ้ งการสร้างเมนูเชื่อมโยง รูปที่ 5-95 การพมิ พข์ อ้ ความที่ตอ้ งการสร้างเมนูเชื่อมโยง ข้นั ตอนท่ี 2 เลือกขอ้ ความท่ีตอ้ งการสร้างเมนูเชื่อมโยง เลือกขอ้ ความที่ตอ้ งการสร้างเมนูเช่ือมโยง รูปท่ี 5-96 การเลือกขอ้ ความที่ตอ้ งการสร้างเมนูเชื่อมโยง ข้นั ตอนท่ี 3 ไปที่ Properties Inspector จากน้นั พิมพช์ ื่อเวบ็ เพจท่ีตอ้ งการเชื่อมโยงลงในช่อง Link พมิ พช์ ื่อเวบ็ เพจ “index.html” ท่ีตอ้ งการเช่ือมโยง รูปที่ 5-97 การสร้างเมนูเช่ืไอปมโยงดว้ ยขอ้ ความ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 270 2) การสร้างเมนูเช่ือมโยงดว้ ยรูปภาพ มีรูปแบบดงั น้ี (1) การสร้างเมนูเชื่อมโยงดว้ ย Image มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 ไปที่เมนู Insert > Image > Image 1. คลิกเมนู Insert 2. เลือกคาํ สงั่ Image 3. เลือกคาํ สง่ั Image รูปท่ี 5-98 การแทรกรูปภาพ ข้นั ตอนท่ี 2 เลือกรูปภาพที่ตอ้ งการสร้างเมนูเช่ือมโยงดว้ ยรูปภาพจากน้นั คลิกป่ ุม OK เลือกรูปภาพ คลิกป่ ุม OK รูปที่ 5-99 หนา้ จอการเลือกรูปภาพ ข้นั ตอนท่ี 3 แสดงรูปภาพท่ีแทรกลงในหนา้ เวบ็ เพจ จากน้นั คลิกที่รูปภาพเพ่ือสร้างเมนูเชื่อมโยง

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 271 คลิกเลือกรูปภาพ รูปท่ี 5-100 หนา้ จอแสดงรูปภาพ ข้นั ตอนที่ 4 ไปที่ Properties Inspector จากน้นั พมิ พช์ ื่อเวบ็ เพจที่ตอ้ งการเช่ือมโยงขอ้ มลู ลงในช่อง Link พมิ พช์ ่ือเวบ็ เพจ “index.html” ท่ีตอ้ งการเชื่อมโยง รูปท่ี 5-101 การสร้างเมนูเช่ือมโยงดว้ ยรูปภาพ (2) การสร้างเมนูเช่ือมโยงดว้ ย Image Map มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เลือกรูปภาพที่ตอ้ งการสร้างเมนูเชื่อมโยง เลือกรูปภาพสาํ หรับการสร้างเมนูเชื่อมโยงดว้ ย Image Map รูปที่ 5-102 การเลือกรูปภาพสาํ หรับสร้างเมนูเชื่อมโยงดว้ ย Image Map ข้นั ตอนท่ี 2 เลือกรูปทรง Image Map ประกอบไปดว้ ย Rectangle Hotspot Tool รูปทรงส่ีเหล่ียม Circle Hotspot Tool รูปทรงวงกลม Polygon Hotspot Tool รูปทรงอิสระ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 272 ในท่ีน้ีเลือกรูปทรง Rectangle Hotspot Tool เลือกรูปทรงสี่เหล่ียม รูปท่ี 5-103 การเลือกรูปทรงของ Image Map ข้นั ตอนที่ 3 คลิกวาดขนาดพ้ืนที่บนรูปภาพท่ีมีขอ้ ความ “Home”สาํ หรับการเชื่อมโยง คลิกวาดพ้นื ท่ีบนรูปภาพที่ขอ้ ความ Home รูปที่ 5-104 การวาดพ้ืนท่ีบนรูปภาพสาํ หรับการเช่ือมโยง ข้นั ตอนที่ 4 กาํ หนดช่ือไฟลเ์ วบ็ เพจที่ตอ้ งการเช่ือมโยงไปที่ช่อง Link จากน้นั กาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจใหเ้ ลือก _blank เป็นการเปิ ดหนา้ เวบ็ เพจบนหนา้ จอเวบ็ บราวเซอร์ใหม่ และพมิ พค์ าํ อธิบายรูปภาพ 1. พิมพช์ ื่อไฟลเ์ วบ็ เพจ “index.html”2. กาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจใหเ้ ลือก 3. พมิ พค์ าํ อธิบายรูปภาพ_blank รูปท่ี 5-105 การกาํ หนดคา่ การเช่ือมโยง ข้นั ตอนที่ 5 แสดงผลลพั ธ์ท่ีไดจ้ ากการสร้างเมนูเช่ือมโยงดว้ ยImage Map บนเวบ็ บราวเซอร์ ใหค้ ลิกที่เมนู Home

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 273 คลิกท่ีเมนู Home รูปท่ี 5-106 แสดงผลลพั ธ์จากการสร้างเมนูเชื่อมโยงดว้ ย Image Map ข้นั ตอนท่ี 6 แสดงหนา้ เวบ็ เพจที่เชื่อมโยงมาท่ีหนา้ index.htmlโดยเปิ ดหนา้ เวบ็ เพจบนหนา้ จอเวบ็ บราวเซอร์ใหม่ หรือแทบ็ ใหม่ รูปที่ 5-107 แสดงผลลพั ธ์จากการสร้างเมนูเช่ือมโยงดว้ ย Image Map (3) การสร้างเมนูเช่ือมโยงดว้ ย Rollover Image การสร้างเมนูเชื่อมโยงดว้ ย Rollover Image เป็ นการสลบั รูปภาพเม่ือนาํ เมาส์ไปวางเหนือรูปภาพ โดยเปลี่ยนจากรูปภาพหน่ึงเป็ นอีกรูปภาพหน่ึงในทนั ที ไม่ตอ้ งเขียนโคด้ Java Script การสร้างเมนูเช่ือมโยงดว้ ย Rollover Image น้นั ตอ้ งเตรียมรูปภาพไว้ 2 รูปและมีขนาดท่ีเทา่ กนั เพือ่ ความสวยงามในขณะที่สลบั รูปภาพ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 สร้างรูปภาพสําหรับเมนูแบบ Rollover Image จาํ นวน2 รูป รูปที่ 5-108 ไฟลร์ ูปภาพสาํ หรับสร้างเมนูเชื่อมโยงดว้ ย Rollover Image

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 274 ข้นั ตอนที่ 2 เลือกตาํ แหน่งที่วางรูปภาพ จากน้นั สร้างตารางเพ่อื ความเป็ นระเบียบสาํ หรับวางเมนูเช่ือมโยงดว้ ย Rollover Image โดยกาํ หนด Rows เท่ากบั 5Columns เท่ากบั 1 Table width เท่ากบั 100 percent และ Border thickness เท่ากบั 1 pixels กาํ หนดขนาดตารางรูปท่ี 5-109 การสร้างตารางสาํ หรับวางเมนูเชื่อมโยงดว้ ย Rollover Image ข้นั ตอนที่ 3 เม่ือสร้างตารางเสร็จเรียบร้อย ใหเ้ ลือกตาํ แหน่งสาํ หรับวางรูปภาพ คลิกตาํ แหน่งที่ใชส้ าํ หรับวางรูปภาพ รูปท่ี 5-110 การเลือกตาํ แหน่งสาํ หรับวางรูปภาพ ข้นั ตอนที่ 4 ไปที่เมนู Insert > Image > Rollover Image 1. คลิกเมนู Insert 2. เลือกคาํ สงั่ Image 3. เลือกคาํ สง่ั Rollover Image รูปที่ 5-111 การใชค้ าํ สั่ง Rollover Image

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 275 ข้นั ตอนท่ี 5 กาํ หนดไฟล์รูปภาพแรกท่ีแสดงก่อนไวท้ ี่ OriginalImage จากน้ันกําหนดไฟล์รูปภาพที่ 2 แสดงรูปภาพเมื่อนําเมาส์ไปวางเหนือรูปภาพแรกที่ Rollover Image ต่อไปให้กาํ หนดขอ้ ความกาํ กบั รูปภาพที่ Alternate text และกาํ หนดไฟล์ที่เช่ือมโยงเมื่อมีการคลิกรูปภาพที่ When clicked Go to URL รูปภาพท่ีแสดงเป็ นรูปภาพแรก รูปภาพที่ 2 แสดง เมื่อนาํ เมาส์ไปวางเหนือรูปภาพแรก ขอ้ ความกาํ กบั รูปภาพ ข กาํ หนดไฟลท์ ี่เช่ือมโยงเม่ือมีการคลิกท่ีรูปภาพ รูปที่ 5-112 การกาํ หนดค่าต่าง ๆใน Rollover Image ข้นั ตอนท่ี 6 ผลลพั ธ์ท่ีไดก้ ่อนนาํ เมาส์ไปวางเหนือรูปภาพแสดงรูปภาพพ้ืนหลงั สีฟ้ า ก่อนนาํ เมาส์ไปวางเหนือรูปภาพ แสดงรูปภาพพ้นื หลงั สีฟ้ า รูปที่ 5-113 การใชร้ ูปภาพสร้าง Rollover Image 1 ข้นั ตอนท่ี 7 เม่ือนาํ เมาส์มาวางเหนือรูปภาพ รูปภาพน้นั เปล่ียนจากพ้ืนหลงั สีฟ้ าเป็นสีเขียว

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 276 เม่ือนาํ เมาส์ไปวางเหนือรูปภาพ รูปภาพเปล่ียนจากพ้ืนหลงั สีฟ้ าเป็นสีเขียว รูปที่ 5-114 การใชร้ ูปภาพสร้าง Rollover Image 2 5.3.5.2*การกาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจ หลงั จากคลิกท่ีลิงค์ เม่ือเชื่อมโยงเอกสารโดยการพิมพช์ ื่อเวบ็ เพจในช่อง Link จากน้นั ให้คลิกท่ี Target เพื่อเลือกการกาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจ มีดงั น้ี _blank เป็นการกาํ หนดใหเ้ ปิ ดหนา้ เวบ็ เพจบนหนา้ จอเวบ็ บราวเซอร์ใหม่หรือแทบ็ ใหมท่ ุกคร้ังท่ีมีการคลิกลิงค์ new เป็นการกาํ หนดใหเ้ ปิ ดหนา้ เวบ็ เพจบนหนา้ จอเวบ็ บราวเซอร์ใหม่หรือแทบ็ ใหม่ แต่เม่ือคลิกท่ีลิงคอ์ ่ืน ๆ ที่กาํ หนด Target เป็น new เหมือนกนั เวบ็ เพจเหล่าน้นั แสดงในหนา้ จอเวบ็ บราวเซอร์เดิมที่เปิ ดไว้ _parent เป็นการกาํ หนด Target สาํ หรับเวบ็ เพจที่ออกแบบโครงสร้างดว้ ยเฟรมโดยการระบุใหเ้ ปิ ดหนา้ เวบ็ เพจในเฟรมหลกั _self เป็นการกาํ หนด Target สาํ หรับเวบ็ เพจท่ีออกแบบโครงสร้างดว้ ยเฟรมโดยการระบุใหเ้ ปิ ดหนา้ เวบ็ เพจในเฟรมท่ีลิงคน์ ้นั แสดงอยู่ _top เป็นการกาํ หนด Target สาํ หรับเวบ็ เพจที่ออกแบบโครงสร้างดว้ ยเฟรมโดยยกเลิกโครงสร้างเฟรมท้งั หมด

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 277 เลือกกาํ หนดลกั ษณะ การเปิ ดหนา้ เวบ็ เพจ รูปที่ 5-115 การกาํ หนดลกั ษณะการเปิ ดหนา้ เวบ็ เพจ 5.3.5.3 การเช่ือมโยงขอ้ มลู แบ่งได้ 5 วธิ ี ดงั น้ี 1) การเช่ือมโยงขอ้ มูลภายในเวบ็ เพจหนา้ เดียวกนั การเช่ือมโยงแบบน้ีใชใ้ นกรณีหนา้ เวบ็ เพจมีเน้ือหามากตอ้ งใชก้ ารเลื่อนข้ึนบนหรือลงล่างไปที่ตาํ แหน่งเน้ือหาท่ีตอ้ งการ ซ่ึงการสร้างการเช่ือมโยงเพื่อใหผ้ ใู้ ช้เช่ือมโยงไปท่ีจุดท่ีเน้ือหากาํ หนดไวน้ ้นั มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 สร้างจุดปลายทางการเช่ือมโยง โดยการต้งั ชื่อที่ช่อง IDในท่ีน้ีต้งั ช่ือวา่ buy 1. เลือกจุดปลายทาง “วธิ ีการเลือกซ้ืออญั มณี” 2. ต้งั ช่ือ “buy” ท่ีช่อง ID รูปท่ี 5-116 การสร้างจุดปลายทางการเชื่อมโยง

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 278 ข้นั ตอนท่ี 2 กาํ หนดการเช่ือมโยงไปที่จุดหมายปลายทางในช่อง Linkโดยการพิมพ์ # ตามดว้ ยช่ือ ID ที่ไดต้ ้งั ไว้ เช่น #buy 1. เลือกขอ้ ความ “วธิ ีการเลือกซ้ืออญั มณี” เพ่ือเช่ือมโยง 2. พิมพ์ “#buy” ที่ช่อง Link รูปท่ี 5-117 การกาํ หนดจุดเช่ือมโยง ข้นั ตอนที่ 3 เมื่อคลิกเมนู “วธิ ีการเลือกซ้ืออญั มณี” จะเช่ือมโยงไปท่ีเน้ือหา ซ่ึงอยใู่ นหนา้ เวบ็ เพจเดียวกนั เน้ือหา “วธิ ีการเลือกซ้ืออญั มณี รูปท่ี 5-118 ผลลพั ธ์การเช่ือมโยงขอ้ มูลหนา้ เวบ็ เพจเดียวกนั

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 279 2) การเช่ือมโยงขอ้ มลู ในเวบ็ เพจหนา้ อ่ืนภายในเวบ็ ไซตเ์ ดียวกนั การเช่ือมโยงไปท่ีเวบ็ เพจอ่ืนภายในเวบ็ ไซตเ์ ดียวกนั ควรเกบ็ ไฟล์เวบ็ เพจไวใ้ นไดร์ฟ และโฟลเดอร์เดียวกนั เพือ่ สะดวกในการคน้ หา มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 คลิกที่ขอ้ ความหรือรูปภาพท่ีเป็นเมนูเชื่อมโยง ในที่น้ีใช้รูปภาพเป็นเมนู โดยคลิกเมาส์เลือกท่ีรูปภาพ ข้นั ตอนที่ 2 คลิกไอคอนรูปภาพ หลงั ขอ้ ความ Link ที่เคร่ืองมือProperties Inspector เพือ่ เลือกไฟลป์ ลายทางที่ตอ้ งการเช่ือมโยง คลิกท่ีไอคอน เพือ่ เลือกไฟล์ รูปที่ 5-119 การเช่ือมโยงขอ้ มูลในเวบ็ เพจหนา้ อื่นภายในเวบ็ ไซตเ์ ดียวกนั ข้นั ตอนท่ี 3 แสดงหนา้ จอสาํ หรับการเลือกไฟลห์ นา้ เวบ็ เพจ ใหเ้ ลือกไฟลท์ ี่ช่ือวา่ product.html จากน้นั คลิกป่ ุม OK

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 280 เลือกไฟล์ product.html คลิกป่ ุม OK รูปที่ 5-120 การเลือกไฟลห์ นา้ เวบ็ เพจ ข้นั ตอนท่ี 4 ผลลพั ธ์ท่ีไดแ้ สดงขอ้ ความไฟลห์ นา้ เวบ็ เพจที่ช่อง Link แสดงไฟลห์ นา้ เวบ็ เพจ “product.html” ที่ช่อง Linkรูปท่ี 5-121 แสดงไฟลห์ นา้ เวบ็ เพจท่ีช่อง Link

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 281ข้นั ตอนที่ 5 คลิกท่ีเมนู Product เพอื่ เช่ือมโยงไปที่หนา้ สินคา้ แสดงเน้ือหาในหนา้ สินคา้คลิกท่ีเมนู Product รูปท่ี 5-122 ผลลพั ธ์การเชื่อมโยงขอ้ มลู ในเวบ็ เพจหนา้ อ่ืนภายในเวบ็ ไซตเ์ ดียวกนั 3) การเชื่อมโยงขอ้ มลู ไปที่เวบ็ ไซตอ์ ่ืน การเชื่อมโยงไปที่เวบ็ ไซตอ์ ่ืนท่ีอยนู่ อกเวบ็ ไซตท์ ่ีสร้างข้ึน สามารถเช่ือมโยงไปที่เวบ็ ไซตท์ ่ีตอ้ งการโดยพิมพ์ URL ของเวบ็ ไซตท์ ่ีตอ้ งการ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 คลิกท่ีขอ้ ความ หรือรูปภาพที่ใชเ้ ป็ นเมนูเช่ือมโยง ในท่ีน้ีใชข้ อ้ ความเป็นเมนู ข้นั ตอนที่ 2 พมิ พ์ URL เวบ็ ไซตป์ ลายทางท่ีตอ้ งการเชื่อมโยง จากน้นักดป่ ุม Enter ท่ีคียบ์ อร์ด

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 282 1. เลือกขอ้ ความ “แหล่งอา้ งอิงขอ้ มลู ” ที่เช่ือมโยงไปที่เวบ็ ไซตอ์ ื่น 2. พมิ พ์ URL : http://jewelry.technicchan.ac.th/ รูปท่ี 5-123 การเช่ือมโยงไปที่เวบ็ ไซตอ์ ่ืน ข้นั ตอนที่ 3 คลิกที่เมนู “แหล่งอา้ งอิงขอ้ มูล” แสดงผลลพั ธ์หนา้ เวบ็ ไซตท์ ่ีไดเ้ ชื่อมโยงไว้ รูปท่ี 5-124 แสดงหนา้ เวบ็ ไซตท์ ่ีไดเ้ ช่ือมโยงไว้

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 283 4) การเชื่อมโยงไปที่ e-Mail Address การเช่ือมโยงไปที่ e-Mail Address เป็นการอาํ นวยความสะดวกใหก้ บัผใู้ ชใ้ นกรณีตอ้ งการส่งจดหมายติดต่อสอบถาม มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 คลิกท่ีขอ้ ความ หรือรูปภาพที่เป็นเมนูเช่ือมโยง ในที่น้ีใช้ขอ้ ความเป็ นเมนู ข้นั ตอนท่ี 2 พิมพค์ าํ วา่ mailto: ตามดว้ ย e-Mail Address จากน้นักดป่ ุม Enter ท่ีคียบ์ อร์ด เช่น mailto:[email protected] 1. เลือกขอ้ ความที่เช่ือมโยงไปท่ี e-Mail Address 2. พิมพ์ mailto:[email protected] รูปท่ี 5-125 การเช่ือมโยงไปที่ e-Mail Address ข้นั ตอนท่ี 3 คลิกเมาส์ที่ขอ้ ความที่เป็นเมนูเชื่อมโยง แสดงหนา้ จอMicrosoft Outlook สาํ หรับการติดตอ่ สอบถามผา่ น e-Mail Address

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 284 รูปท่ี 5-126 หนา้ โปรแกรม Microsoft Outlook 5) การเชื่อมโยงเพื่อดาวน์โหลดไฟล์ การเช่ือมโยงเพื่อดาวน์โหลดไฟลเ์ ป็นการอาํ นวยความสะดวกใหก้ บัผใู้ ชเ้ วบ็ ไซตใ์ นกรณีที่มีเอกสารดาวน์โหลด มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 คลิกท่ีขอ้ ความ หรือรูปภาพท่ีเป็นเมนูเชื่อมโยง ในที่น้ีใช้ขอ้ ความเป็ นเมนู ข้นั ตอนที่ 2 คลิกไอคอน หลงั ขอ้ ความ Link ที่เครื่องมือProperties Inspector เพื่อเลือกไฟลป์ ลายทางที่ตอ้ งการให้ผใู้ ชเ้ วบ็ ไซตด์ าวน์โหลดไฟล์ 1.เลือกขอ้ ความท่ีเช่ือมโยงเพอื่ ดาวนโ์ หลดไฟล์2. คลิกไอคอน เพอื่ เลือกไฟลท์ ่ีตอ้ งการใหด้ าวนโ์ หลดไฟลน์ ้นั รูปที่ 5-127 การเชื่อมโยงเพ่ือดาวน์โหลดไฟล์

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 285 ข้นั ตอนท่ี 3 แสดงหนา้ จอสาํ หรับเลือกไฟล์สาํ หรับให้ดาวน์โหลดโดยเลือกไฟลท์ ่ีช่ือวา่ serv0013.doc จากน้นั คลิกป่ ุม OK เลือกไฟล์ serv0013.doc คลิกป่ ุม OK รูปที่ 5-128 การเลือกไฟลด์ าวน์โหลด ข้นั ตอนที่ 4 ผลลพั ธ์ท่ีไดแ้ สดงขอ้ ความไฟลเ์ อกสาร สาํ หรับดาวนโ์ หลดไฟลท์ ่ีช่อง Link ไฟลเ์ อกสาร “serv0013.doc” สาํ หรับดาวน์โหลด รูปท่ี 5-129 ขอ้ ความไฟลด์ าวน์โหลดแสดงที่ช่อง Link

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 286 5.3.6 การจดั รูปแบบขอ้ ความ และแทรกสัญลกั ษณ์พเิ ศษ เว็บไซต์ที่สร้างด้วย Dreamweaver สามารถพิมพ์ข้อความลงในหน้าเว็บเพจการเลือกขอ้ ความเพ่ือจดั รูปแบบขอ้ ความใหเ้ หมาะสมและการแทรกสัญลกั ษณ์พิเศษ ทาํ ใหเ้ วบ็ เพจมีความสวยงาม น่าอ่านและน่าสนใจ 5.3.6.1 การพิมพข์ อ้ ความลงในเวบ็ เพจ การสร้างเวบ็ เพจน้นั ขอ้ ความถือวา่ เป็ นองคป์ ระกอบท่ีสําคญั เพราะทุกหนา้เวบ็ เพจตอ้ งมีขอ้ ความเป็ นส่วนประกอบ เช่น ขอ้ ความใน Title ขอ้ ความหวั เรื่อง ขอ้ ความเน้ือหาดงั น้นั การพมิ พข์ อ้ ความต่าง ๆ มีรายละเอียดดงั น้ี 1)* การพิมพข์ อ้ ความลงใน Title ขอ้ ความที่แสดงบน Title ของเวบ็ บราวเซอร์โดยส่วนใหญ่ขอ้ ความที่พิมพเ์ ป็นชื่อหนา้ เวบ็ เพจ หรือขอ้ ความที่แจง้ ใหท้ ราบวา่ หนา้ เวบ็ เพจน้ีแสดงเน้ือหาเก่ียวกบั อะไรดงั รูปท่ี 5-130 คลิกแลว้ พมิ พข์ อ้ ความท่ีตอ้ งการในท่ีน้ีพมิ พ์ “เวบ็ ไซตค์ รูพรี ญา ดุนขนุ ทด” รูปท่ี 5-130 การพิมพข์ อ้ ความลงใน Title 2) การพมิ พข์ อ้ ความลงในส่วนเน้ือหาเวบ็ เพจ ขอ้ ความในเว็บเพจมีขอ้ ความท่ีเป็ นเน้ือหา ขอ้ ความหวั เร่ือง สามารถเลือกบริเวณท่ีตอ้ งการพิมพ์ขอ้ ความ และพิมพล์ งไปในส่วนน้ันได้ทนั ที ซ่ึงรายละเอียดเก่ียวกบัการจดั รูปแบบขอ้ ความ มีดงั น้ี (1)*การเวน้ ช่องวา่ งระหวา่ งขอ้ ความ โปรแกรม Dreamweaver สามารถทาํ ไดโ้ ดยการกดป่ ุม Spacebar ที่คียบ์ อร์ดตามปกติ แต่การเวน้ ช่องว่างระหว่างขอ้ ความเวน้ ได้เพียง 1 ช่องเท่าน้นั ในกรณีท่ีตอ้ งการเวน้ ช่องวา่ งระหวา่ งขอ้ ความมากกวา่ 1 ช่อง มี 2 วธิ ีดงั น้ี

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 287 วิธีที่ 1 การใช้คียล์ ดั กดป่ ุม Ctrl + Shift + Spacebar ท่ีคียบ์ อร์ดตามจาํ นวนช่องวา่ งระหวา่ งขอ้ ความท่ีตอ้ งการ วธิ ีท่ี 2 การใช้ Panel Insert มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เลือกคาํ สั่งบน Panel Insert > Commonจากน้นั คลิกที่คาํ ส่ัง Character : Other Characters 2. เลือกกลุม่ คาํ สง่ั Common 1. คลิกท่ี Panel Insert3. คลิกท่ีคาํ สงั่ Character : Other Characters รูปท่ี 5-131 การใชง้ าน Panel Insert Non-Breaking Space ข้นั ตอนที่ 2 คลิกเลือกท่ีป่ ุมตามจาํ นวนช่องวา่ งระหวา่ งขอ้ ความที่ตอ้ งการ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 288 คลิกป่ ุม Non-Breaking Space รูปท่ี 5-132 การใชค้ าํ สงั่ Non-Breaking Space (2) การข้ึนบรรทดั ใหม่ การข้ึนบรรทดั ใหม่ในโปรแกรม Dreamweaver มี 2 วธิ ีดงั น้ี วธิ ีที่ 1 การข้ึนบรรทดั ใหมใ่ นยอ่ หนา้ ใหม่ โดยการกดป่ ุม Enterที่คียบ์ อร์ด หนา้ ขอ้ ความท่ีตอ้ งการข้ึนบรรทดั ใหม่ผลลพั ธจ์ ากการกดป่ ุม Enter ข้ึนยอ่ หนา้ ใหม่ รูปที่ 5-133 การข้ึนบรรทดั ใหม่ โดยการกดป่ ุม Enter วธิ ีที่ 2 การข้ึนบรรทดั ใหม่ในยอ่ หนา้ เดิม โดยการกดป่ ุมShift + Enter ท่ีคียบ์ อร์ด หนา้ ขอ้ ความที่ตอ้ งการข้ึนบรรทดั ใหม่ผลลพั ธ์จากการกดป่ ุม Shift + Enter อยใู่ นยอ่ หนา้ เดิม รูปที่ 5-134 การข้ึนบรรทดั ใหม่ โดยการกดป่ ุม Shift + Enter

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 289 5.3.6.2 การเลือกขอ้ ความ เม่ือใดที่ตอ้ งการตกแตง่ ขอ้ ความที่พมิ พไ์ ว้ ใหเ้ ลือกขอ้ ความเฉพาะส่วนท่ีตอ้ งการ มีวธิ ีการดงั น้ี วธิ ีที่ 1 การเลือกขอ้ ความเฉพาะส่วนท่ีตอ้ งการ นาํ เมาส์วางไวห้ นา้ ขอ้ ความ คลิกเมาส์ซา้ ยคา้ งไวแ้ ละลากเมาส์เลือกขอ้ ความเฉพาะส่วนท่ีตอ้ งการใหเ้ กิดแถบสีดาํ หรือถา้ ตอ้ งการเลือกท้งั บรรทดั ใหด้ บั เบิลคลิกท่ีบรรทดั ที่ตอ้ งการ ดงั รูปที่ 5-135 เลือกขอ้ ความเฉพาะส่วนท่ีตอ้ งการ รูปท่ี 5-135 การเลือกขอ้ ความเฉพาะส่วนที่ตอ้ งการ วธิ ีที่ 2 เลือกขอ้ ความภายในยอ่ หนา้ เดียวกนั เลือกขอ้ ความท่ีบรรทดั แรกของยอ่ หนา้ คลิกเมาส์ซา้ ยคา้ งไวแ้ ละลากเมาส์จนหมดบรรทดั สุดทา้ ยในยอ่ หนา้ ที่ตอ้ งการใหเ้ กิดแถบสีดาํ ดงั รูปที่ 5-136 เลือกขอ้ ความต้งั แตบ่ รรทดั แรก จนถึงบรรทดั สุดทา้ ย รูปที่ 5-136 การเลือกขอ้ ความภายในยอ่ หนา้ เดียวกนั วธิ ีท่ี 3 เลือกขอ้ ความท้งั หมด เลือกขอ้ ความท้งั หมดดว้ ยคาํ ส่งั Edit > Select All หรือใชค้ ียล์ ดัCtrl+A ดงั รูปท่ี 5-137

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 290 เลือกคาํ สงั่ Edit > Select All รูปท่ี 5-137 การเลือกขอ้ ความท้งั หมด 5.3.6.3 การจดั รูปแบบขอ้ ความแบบ HTML การจดั รูปแบบขอ้ ความแบบ HTML ท่ี Properties Inspector เป็นการกาํ หนดรูปแบบขอ้ ความท่ีมีความโดดเด่นโดยมีรูปแบบการปรับแต่งค่าต่าง ๆ ดงั น้ี 1)*การใช้งาน*Heading*เป็ นรูปแบบสําหรับใช้เป็ นหัวข้อเรื่องที่แสดงบนเว็บเพจมี Heading ท้ังหมด 6 ระดับ ซ่ึง Heading 1 เป็ นหัวข้อเร่ืองที่ใหญ่ท่ีสุด และส่วนHeading อื่น ๆ ลดหลนั่ ลงมาตามลาํ ดบั มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เลือกขอ้ ความท่ีตอ้ งการเปล่ียนรูปแบบ Heading เลือกขอ้ ความท่ีตอ้ งการเปลี่ยนรูปแบบ Heading รูปท่ี 5-138 การเลือกขอ้ ความท่ีตอ้ งการเปลี่ยนรูปแบบ Heading

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 291 ข้นั ตอนที่ 2 เลือกเปล่ียนคาํ สั่ง Format ท่ี Properties Inspector เลือกรูปแบบ Heading 1 รูปที่ 5-139 การใชง้ าน Heading ข้นั ตอนที่ 3 แสดงผลลพั ธ์ที่ไดจ้ ากการเปล่ียนรูปแบบ Heading ผลลพั ธท์ ่ีไดจ้ ากการใชง้ าน Heading รูปที่ 5-140 แสดงผลลพั ธ์ท่ีไดจ้ ากการใชง้ าน Heading 2) การทาํ ตวั หนาและตวั เอียงใหก้ บั ขอ้ ความ การทาํ ตวั หนาและตวั เอียงให้กบั ขอ้ ความ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 เลือกขอ้ ความบนหนา้ เวบ็ เพจที่ตอ้ งการจดั รูปแบบขอ้ ความตวั หนาหรือจดั รูปแบบขอ้ ความตวั เอียง

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 292 เลือกขอ้ ความที่ตอ้ งการสาํ หรับจดั รูปแบบขอ้ ความตวั หนาหรือขอ้ ความตวั เอียงหรือป่ ุม รูปท่ี 5-141 การเลือกขอ้ ความสาํ หรับการทาํ ตวั หนาหรือเอียง ข้นั ตอนที่ 2 คลิกเลือกป่ ุม สาํ หรับจดั รูปแบบขอ้ ความตวั หนา สาํ หรับจดั รูปแบบตวั เอียงตามท่ีตอ้ งการคลิกเลือกป่ ุมที่ตอ้ งการจดั รูปแบบขอ้ ความตวั หนาหรือตวั เอียง รูปท่ี 5-142 การเลือกจดั รูปแบบขอ้ ความตวั หนาหรือตวั เอียง ข้นั ตอนที่ 3 แสดงผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบขอ้ ความ ผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบขอ้ ความ รูปท่ี 5-143 แสดงผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบขอ้ ความ 3) การจดั รูปแบบขอ้ ความดว้ ยสัญลกั ษณ์หนา้ หวั ขอ้ การกาํ หนดสัญลกั ษณ์หนา้ หวั ขอ้ (UL – Unorder List) ใหก้ บั ขอ้ ความของแต่ละรายการสัญลกั ษณ์ท่ีใชเ้ ป็นจุด อยหู่ นา้ บรรทดั ขอ้ ความ มีข้นั ตอนดงั น้ี

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 293 ข้นั ตอนที่ 1 เลือกขอ้ ความท่ีตอ้ งการจดั รูปแบบขอ้ ความดว้ ยสัญลกั ษณ์หนา้ หวั ขอ้ เลือกขอ้ ความสาํ หรับจดั รูปแบบดว้ ยสญั ลกั ษณ์หนา้ หวั ขอ้ รูปที่ 5-144 เลือกขอ้ ความสาํ หรับจดั รูปแบบดว้ ยสัญลกั ษณ์หนา้ หวั ขอ้ ข้นั ตอนท่ี 2 คลิกป่ ุม Unordered List คลิกป่ ุม Unordered List รูปที่ 5-145 การใชค้ าํ สั่งจดั รูปแบบขอ้ ความดว้ ย Unordered List ข้นั ตอนท่ี 3 ผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบขอ้ ความดว้ ยสัญลกั ษณ์หนา้ หวั ขอ้ ผลลพั ธท์ ี่ไดจ้ ากการจดั รูปแบบขอ้ ความแบบ Unordered Listรูปท่ี 5-146 แสดงผลลพั ธ์ที่ไดจ้ ากการจดั รูปแบบขอ้ ความดว้ ยสญั ลกั ษณ์หนา้ หวั ขอ้

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 294 4) การจดั รูปแบบขอ้ ความดว้ ยหมายเลขหนา้ หวั ขอ้ การกาํ หนดหมายเลขหนา้ หวั ขอ้ (OL- Ordered List) เป็นการกาํ หนดเลขลาํ ดบั หนา้ ขอ้ ความแตล่ ะรายการ เป็นตวั เลข มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 เลือกขอ้ ความที่ตอ้ งการจดั รูปแบบขอ้ ความดว้ ยหมายเลขหนา้ หวั ขอ้ เลือกขอ้ ความสาํ หรับจดั รูปแบบดว้ ยหมายเลขหนา้ หวั ขอ้ รูปที่ 5-147 เลือกขอ้ ความสาํ หรับจดั รูปแบบดว้ ยหมายเลขหนา้ หวั ขอ้ ข้นั ตอนท่ี 2 คลิกป่ ุม Ordered List คลิกป่ ุม Ordered List รูปที่ 5-148 การใชค้ าํ สง่ั จดั รูปแบบขอ้ ความดว้ ย Ordered List ข้นั ตอนที่ 3 ผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบขอ้ ความดว้ ยหมายเลขหนา้ หวั ขอ้ ผลลพั ธท์ ี่ไดจ้ ากการจดั รูปแบบขอ้ ความแบบ Ordered Listรูปท่ี 5-149 แสดงผลลพั ธ์ที่ไดจ้ ากการจดั รูปแบบขอ้ ความดว้ ยหมายเลขหนา้ หวั ขอ้

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 295 5.3.6.4 การจดั รูปแบบขอ้ ความแบบ CSS การจดั รูปแบบขอ้ ความแบบ CSS มีความซับซ้อนมากกว่าแบบ HTMLแต่มีความยืดหยุ่นสูงกว่า สามารถนาํ ค่าที่จดั รูปแบบขอ้ ความมาใช้งานซ้ําได้โดยไม่ต้องต้งั ค่าการจดั รูปแบบใหม่ โดยจดั รูปแบบไดท้ ่ี Properties Inspector การปรับแตง่ ค่าต่าง ๆ มีดงั น้ี 1) การกาํ หนดสีใหก้ บั ขอ้ ความ การกําหนดสีให้กับข้อความในเว็บเพจ โปรแกรม Dreamweaverสร้างเป็น CSS Style Sheet ใหโ้ ดยอตั โนมตั ิ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 เลือกขอ้ ความท่ีตอ้ งการกาํ หนดสีใหก้ บั ขอ้ ความ เลือกขอ้ ความท่ีตอ้ งการกาํ หนดสีใหก้ บั ขอ้ ความรูปที่ 5-150 การเลือกขอ้ ความสาํ หรับการกาํ หนดสีใหก้ บั ขอ้ ความ ข้นั ตอนท่ี 2 คลิกที่ป่ ุม ที่ Properties Inspectorคลิกป่ ุม CSS รูปที่ 5-151 การจดั รูปแบบดว้ ย CSS ข้นั ตอนท่ี 3 คลิกป่ ุม จากน้นั เลือกสีตามที่ตอ้ งการ คลิกเลือกสีที่ตอ้ งการใหก้ บั ขอ้ ความ รูปท่ี 5-152 การเลือกสีใหก้ บั ขอ้ ความ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 296 ข้นั ตอนท่ี 4 แสดงผลลพั ธ์การกาํ หนดสีใหก้ บั ขอ้ ความ ผลลพั ธ์ที่ไดจ้ ากการกาํ หนดสีใหก้ บั ขอ้ ความ รูปท่ี 5-153 แสดงผลลพั ธ์ท่ีไดจ้ ากการกาํ หนดสีใหก้ บั ขอ้ ความ 2) การกาํ หนดขนาดขอ้ ความ การกาํ หนดขนาดขอ้ ความทาํ ไดโ้ ดยการเลือกค่าท่ี Properties Inspectorมีการกาํ หนดขนาดและหน่วยการวดั ขอ้ ความหลายรูปแบบดงั น้ีเลือกกาํ หนดขนาดและหน่วยการวดั ขอ้ ความ รูปท่ี 5-154 การกาํ หนดขนาดขอ้ ความของเวบ็ บราวเซอร์ (1) ขนาดขอ้ ความ แบ่งเป็น 3 ประเภท ไดแ้ ก่หน่วยวดั ท่ีเลือก ประเภทที่ 1 None คือ ไมก่ าํ หนดขนาดขอ้ ความ ใชต้ ามค่าเริ่มตน้มีดงั น้ี ประเภทท่ี 2 การกาํ หนดเป็นค่าตวั เลข โดยมีคา่ ต้งั แต่ 9-36 ตาม ประเภทที่ 3 การกาํ หนดเป็นขนาดโดยเทียบกบั ขนาดมาตรฐาน Medium ขนาดขอ้ ความมาตรฐาน xx-small ขนาดขอ้ ความท่ีเลก็ กวา่ มาตรฐาน 2 เทา่ x-small ขนาดขอ้ ความที่เลก็ กวา่ มาตรฐาน 1 เท่า small ขนาดขอ้ ความที่เล็กกวา่ มาตรฐาน smaller ขนาดขอ้ ความท่ีเล็กท่ีสุด

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 297 large ขนาดขอ้ ความท่ีใหญ่กวา่ มาตรฐาน x-large ขนาดขอ้ ความใหญก่ วา่ มาตรฐาน 1 เท่า xx-large ขนาดขอ้ ความใหญ่กวา่ มาตรฐาน 2 เท่า larger ขนาดขอ้ ความใหญท่ ี่สุด รูปที่ 5-155 การกาํ หนดขนาดขอ้ ความ (2) หน่วยวดั ขอ้ ความ หน่วยวดั ขอ้ ความมีหลายหน่วยวดั สามารถเลือกตามที่ตอ้ งการมีดงั น้ี px (pixel) เป็นการกาํ หนดขนาดขอ้ ความแบบคงที่ ไมส่ ามารถปรับลดขนาดขอ้ ความในการแสดงผลบนเวบ็ บราวเซอร์ pt (point) เป็นการกาํ หนดขนาดขอ้ ความแบบคงท่ี สาํ หรับใช้ในงานที่เก่ียวขอ้ งกบั สื่อสิ่งพิมพ์ ซ่ึง 1 point มีค่าเทา่ กบั 1/72 นิ้ว in (inches) เป็นการกาํ หนดขนาดขอ้ ความแบบคงท่ี โดยใชห้ น่วยวดั เป็นนิ้ว cm (centimeters) เป็นการกาํ หนดขนาดขอ้ ความแบบคงท่ี โดยใช้หน่วยวดั เป็ นเซนติเมตร mm (millimeters) เป็นการกาํ หนดขนาดขอ้ ความแบบคงที่ โดยใช้หน่วยวดั เป็ นมิลลิเมตร

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 298 pc (pica) เป็นการกาํ หนดขนาดขอ้ ความแบบคงที่ ใชส้ าํ หรับกาํ หนดขนาดเอกสารกบั งานสื่อสิ่งพมิ พ์ ซ่ึง 1 pica มีค่าเทา่ กบั 1/6 นิ้ว em (em) เป็นการกาํ หนดขนาดขอ้ ความแบบไม่คงที่ สาํ หรับTypography โดยเฉพาะ ซ่ึง W3C แนะนาํ ใหใ้ ชห้ น่วยวดั น้ีในการกาํ หนดขนาดขอ้ ความ ex (ex) เป็นการกาํ หนดขนาดขอ้ ความแบบไม่คงท่ี สามารถปรับลดขนาดขอ้ ความการแสดงผลบนเวบ็ บราวเซอร์ % (percentage) เป็นหน่วยวดั ที่ใชส้ าํ หรับกาํ หนดขนาดของproperty ทว่ั ไป สามารถใชไ้ ดส้ าํ หรับกาํ หนด width, height และอื่นๆ นอกจากน้ีสามารถกาํ หนดfont-size รูปท่ี 5-156 หน่วยวดั ขอ้ ความ 3) การจดั ตาํ แหน่งขอ้ ความบนหนา้ เวบ็ เพจ ขอ้ ความในเวบ็ เพจปกติอยชู่ ิดซ้ายของหนา้ เวบ็ เพจเสมอ หากตอ้ งการจดั ตาํ แหน่งข้อความให้อยู่ก่ึงกลาง หรือชิดขวาทาํ ได้โดยการเลือกค่าที่ Properties Inspectorมีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 เลือกขอ้ ความที่ตอ้ งการจดั ตาํ แหน่งขอ้ ความบนหน้าเวบ็ เพจ เลือกขอ้ ความท่ีตอ้ งการจดั ตาํ แหน่ง รูปท่ี 5-157 การเลือกขอ้ ความสาํ หรับจดั ตาํ แหน่งขอ้ ความบนหนา้ เวบ็ เพจ

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 299 ข้นั ตอนที่ 2 เลือกรูปแบบการจดั ตาํ แหน่งขอ้ ความ ซ่ึงประกอบดว้ ย Align Left เป็นการจดั ขอ้ ความชิดซา้ ย Align Center เป็นการจดั ขอ้ ความอยกู่ ่ึงกลาง Align Right เป็นการจดั ขอ้ ความชิดขวา Justify เป็นการจดั ขอ้ ความหนา้ และหลงั เทา่ กนั ในที่น้ีใหเ้ ลือกป่ ุม Align Center เลือก Align Center จดั ขอ้ ความก่ึงกลาง รูปท่ี 5-158 การเลือกจดั ขอ้ ความไวก้ ่ึงกลางหนา้ เวบ็ เพจ ข้นั ตอนท่ี 3 แสดงผลลพั ธ์จากการจดั ตาํ แหน่งขอ้ ความอยกู่ ่ึงกลางหนา้ เวบ็ เพจ ขอ้ ความอยกู่ ่ึงกลางหนา้ เวบ็ พจ รูปท่ี 5-159 แสดงผลลพั ธ์การจดั ตาํ แหน่งขอ้ ความอยกู่ ่ึงกลางหนา้ เวบ็ เพจ 5.3.6.5 การใช้ Web Font การสร้างเวบ็ ไซต์ในอดีตมีขอ้ จาํ กดั ในการแสดงผลของ Font เพราะตอ้ งเลือกใช้*Font*ที่เว็บบราวเซอร์สนับสนุนเท่าน้ัน เช่น ข้อความบนเว็บเพจเป็ นภาษาไทยควรกาํ หนด Font เป็ น Microsoft Sans Serif, MS Sans Serif หรือ Tahoma ส่วนขอ้ ความบนเวบ็ เพจเป็ นภาษาอังกฤษกําหนด*Font*เป็ น*Arial*เท่าน้ัน*เพราะหากกําหนดเป็ น*Font*ตัวอ่ืนนอกเหนือจากน้ีทาํ ใหผ้ ใู้ ชไ้ มส่ ามารถอ่านขอ้ ความบนเวบ็ เพจได้ ปัจจุบนั มีการใช้ CSS3 มี Property ที่ชื่อ @font-face เป็ นคาํ ส่ังใหม่ที่ถูกเพ่ิมเขา้ มาในมาตรฐานของ CSS3 ช่วยควบคุมการแสดงผลของ Font ได้ ดว้ ยการประกาศโคด้@font-face เพ่ิมเขา้ ไปใน CSS Style Sheet ดงั รูปท่ี 5-160

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 300 รูปท่ี 5-160 การใชง้ าน Property @ font-face การใชง้ านโปรแกรม Dreamweaver สามารถสร้าง Font ไดแ้ บบง่าย ๆดว้ ยการใชค้ าํ สงั่ Manage Fonts สร้างชุดคาํ ส่ัง CSS เพอ่ื เรียกใช้ Font ในเวบ็ ไซต์ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 ไปท่ีเมนู Modify > Manage Fonts.. คลิกเมนู Modify > Manage Fonts..จากน้นั คลิกป่ ุม รูปที่ 5-161 การใชค้ าํ สั่ง Manage Fonts ข้นั ตอนที่ 2 แสดงหนา้ จอ Manage Fonts เลือกแทบ็ Local Web Fonts หลงั ขอ้ ความ EOT Font:

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 301 คลิกป่ ุม Browse.. รูปท่ี 5-162 การใชค้ าํ ส่งั Manage Fontsข้นั ตอนท่ี 3 แสดงหนา้ จอการเลือกไฟล์ Font จากน้นั คลิกป่ ุม Open เลือกไฟล์ Font คลิกป่ ุม Open รูปที่ 5-163 หนา้ จอการเลือกไฟล์ Font

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 302ข้นั ตอนท่ี 4 แสดงไฟล์ Font นามสกลุ ตา่ ง ๆ โดยการคลิกป่ ุม Browse..เลือกไฟลน์ ามสกลุ EOT Font โปรแกรม Dreamweaver เรียก Font นามสกุลชนิดอื่น ๆ มาให้อตั โนมตั ิ จากน้นั คลิกเคร่ืองหมาย  หนา้ ขอ้ ความ “I have property licensed the above font(s)for website use..” คลิกป่ ุม เพื่อเพ่ิม Font และคลิกป่ ุมทาํ เครื่องหมาย  หนา้ ขอ้ ความ แสดงไฟล์ Font คลิกป่ ุม Add คลิกป่ ุม Done รูปท่ี 5-164 การติดต้งั Fontข้นั ตอนที่ 5 เลือกขอ้ ความสําหรับจดั รูปแบบ Font เลือกขอ้ ความสาํ หรับจดั รูปแบบ Fontรูปที่ 5-165 การเลือกขอ้ ความสาํ หรับจดั รูปแบบ Font

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 303 ข้นั ตอนที่ 6 เลือก Font “ trirong bold” คลิกเลือก Font รูปที่ 5-166 การเลือก Font เพ่อื ใชง้ าน ข้นั ตอนท่ี 7 แสดงผลลพั ธ์การจดั รูปแบบ Font ผลลพั ธ์ท่ีไดจ้ ากการจดั รูปแบบ Font รูปท่ี 5-167 แสดงผลลพั ธ์การจดั รูปแบบ Font 5.3.6.6 การแทรกสญั ลกั ษณ์พเิ ศษ การแทรกสญั ลกั ษณ์พเิ ศษ มีข้นั ตอนในการแทรกอกั ษรพเิ ศษแบบตา่ ง ๆดงั น้ี ข้นั ตอนท่ี 1 เลือกคาํ สงั่ บน Panel Insert > Common จากน้นั คลิกที่คาํ ส่ังCharacter : Other Characters

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 3042. เลือกกล่มุ คาํ สง่ั Common 1. คลิกที่ Panel Insert3. คลิกที่คาํ สง่ั Character : Other Charactersรูปที่ 5-168 การใชง้ าน Panel Insertข้นั ตอนที่ 2 แสดงหนา้ จอ Insert Other Character จากน้นั คลิกเลือกสัญลกั ษณ์ท่ีตอ้ งการ และคลิกป่ ุม Ok เลือกสญั ลกั ษณ์ท่ีตอ้ งการ คลิกป่ ุม OKรูปท่ี 5-169 แสดงหนา้ จอ Insert Other Character

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 305 ข้นั ตอนที่ 3 แสดงผลลพั ธ์การแทรกสัญลกั ษณ์พิเศษ ผลลพั ธ์จากการแทรกสญั ลกั ษณ์พิเศษ รูปท่ี 5-170 แสดงผลลพั ธ์การแทรกสัญลกั ษณ์พเิ ศษ 5.3.7 การบนั ทึกไฟลเ์ วบ็ เพจ หลังจากท่ีสร้างเว็บเพจได้ตามต้องการให้บันทึกไฟล์เว็บเพจ โดยเลือกคําสั่งFile > Save (หรือกดคียล์ ดั Ctrl+S) เน่ืองจากไม่ไดบ้ นั ทึกไฟล์น้ีมาก่อน โปรแกรม Dreamweaverใหร้ ะบุช่ือไฟลใ์ หม่ มีข้นั ตอนดงั น้ี ข้นั ตอนที่ 1 ไปที่เมนู File> Save เพ่ือบนั ทึกไฟล์ คลิกเมนู File > Save รูปที่ 5-171 การบนั ทึกไฟลเ์ วบ็ เพจ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 306 ข้นั ตอนท่ี 2 หนา้ จอการเลือกตาํ แหน่งท่ีเกบ็ ไฟลห์ นา้ เวบ็ เพจ จากน้นั ต้งั ช่ือไฟล์ท่ีตอ้ งการและคลิกป่ ุม Save เลือกตาํ แหน่งท่ีเก็บไฟล์ ต้งั ชื่อไฟล์ คลิกป่ ุม Save รูปที่ 5-172 การเลือกตาํ แหน่งไฟลท์ ี่ตอ้ งการบนั ทึก เม่ือมีการแก้ไขหน้าเว็บเพจ และต้องการบนั ทึกการเปลี่ยนแปลงให้เลือกคาํ สั่งFile > Save เพ่ือบนั ทึกหน้าเว็บเพจแทนท่ีไฟล์เดิมที่บนั ทึกไว้ หากตอ้ งการบนั ทึกไฟล์น้ีไว้ที่ตาํ แหน่งใหม่หรือบนั ทึกชื่อไฟลใ์ หม่ใหเ้ ลือกคาํ ส่ัง File > Save As และกาํ หนดตาํ แหน่งท่ีเก็บและช่ือไฟลใ์ หม่ ส่วนคาํ สงั่ อ่ืน ๆ ในการบนั ทึกไฟลเ์ วบ็ เพจ มีดงั น้ี คาํ สั่ง File > Save All บนั ทึกไฟลท์ ุกไฟลท์ ่ีเปิ ดอยทู่ ้งั หมดพร้อมกนั คาํ สั่ง File > Save to Remote Sever บนั ทึกไฟลเ์ กบ็ ไวท้ ่ีเวบ็ เซิร์ฟเวอร์ สําหรับการต้งั ชื่อไฟล์หรือโฟลเดอร์ ไม่ควรมีช่องว่าง หรือมีการใช้อกั ขระพิเศษหรือ ; / . เพราะเม่ือนาํ ไฟล์ไปไวบ้ นเวบ็ เซิร์ฟเวอร์ บางทีอกั ขระเหล่าน้ีอาจถูกเปลี่ยนทาํ ให้เกิดปัญหา เช่น ในการเชื่อมโยงไฟล์ระหว่างหน้าเว็บอาจหาไฟล์ท่ีเช่ือมโยงไม่พบ เพราะช่ือไฟล์เปล่ียนไป นอกจากน้นั ไม่ควรข้ึนตน้ ชื่อไฟลด์ ว้ ยตวั เลข 5.3.8 การแสดงผลเวบ็ เพจบนเวบ็ บราวเซอร์ เม่ือบนั ทึกไฟลเ์ วบ็ เพจเรียบร้อยแลว้ หากตอ้ งการดูผลลพั ธ์เวบ็ เพจที่สร้างข้ึนวา่ มีการแสดงผลอยา่ งไรบนเวบ็ บราวเซอร์ มีข้นั ตอนดงั น้ี ข้นั ตอนท่ี 1 บนั ทึกหนา้ เวบ็ เพจทุกคร้ังก่อนการแสดงผลบนเวบ็ บราวเซอร์ ข้นั ตอนท่ี 2 ไปท่ี Document Toolbar จากน้นั คลิกที่ป่ ุม

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 307 คลิกที่น่ี รูปท่ี 5-173 สญั ลกั ษณ์การแสดงผลหนา้ เวบ็ เพจ ข้นั ตอนที่ 3 เลือกการแสดงผลบนเวบ็ บราวเซอร์ที่ตอ้ งการ ในที่น้ีเลือกคาํ สั่งPreview in IEXPLORE คลิกเลือก Preview in IEXPLORE รูปท่ี 5-174 การเลือก Browser ในการแสดงผล ข้นั ตอนท่ี 4 แสดงผลหนา้ เวบ็ เพจที่เวบ็ บราวเซอร์ Internet Explorer รูปท่ี 5-175 แสดงผลหนา้ เวบ็ เพจที่เวบ็ บราวเซอร์ Internet Explorer

หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 3085.4 บทสรุป Dreamweaver เป็ นโปรแกรมสาํ เร็จรูปท่ีช่วยสร้างเวบ็ ไซตอ์ ยา่ งง่ายโดยสามารถนาํ รูปภาพและข้อความท่ีต้องการมาประกอบเป็ นหน้าเว็บเพจ อีกท้ังสามารถเพิ่มเทคนิคทางด้านเสียงภาพเคล่ือนไหว นอกจากน้ีโปรแกรม Dreamweaver เป็ นโปรแกรมแบบ What You See Is What You Get(WYSIWYG) คือ การจดั วางรูปภาพ หรือขอ้ ความแบบไหน โปรแกรมสร้างโคด้ ให้อตั โนมตั ิตามการจดั วาง ทาํ ให้ผอู้ อกแบบหนา้ เวบ็ ไซต์ หรือ Web Designer สามารถมีส่วนเขา้ มาพฒั นาเวบ็ ไซต์มากข้ึน แมไ้ ม่ถนดั การเขียนโคด้ ซ่ึงส่งผลใหเ้ วบ็ ไซตใ์ นปัจจุบนั น้ีมีความสวยงามน่าสนใจมากกวา่ในยคุ แรก ๆ

หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 309 บรรณานุกรมจีระสิทธ์ิ อ้ึงรัตนวงค.์ **สร้างเวบ็ Mobile Application ด้วย Dreamweaver CS6.**กรุงเทพฯ*:* โปรวชิ น่ั ,*2556.ดวงพร**เกี๋ยงคาํ .**คู่มอื สร้าง Web Site ฉบับสมบูรณ์.**นนทบุรี*: *ไอดีซี พรีเมียร์ จาํ กดั ,*2556.ธนั ยพฒั น์ วงศร์ ัตน.์ **คู่มอื การใช้งาน Dreamweaver CS6.**กรุงเทพฯ*:*สวสั ดี ไอที จาํ กดั ,* 2556.บญั ชา**ปะสีละเตสัง.** การพฒั นาเวบ็ แอปพลเิ คช่ันด้วย PHP ร่วมกบั MySQL และ Dreamweaver.**กรุงเทพฯ*:*ซีเอด็ ยเู คชนั่ ,*2553.ฝ่ ายตาํ ราวชิ าการคอมพิวเตอร์.**การสร้างเวบ็ ไซต์.**กรุงเทพฯ*:*ซีเอด็ ยเู คชนั่ ,*2557.พนั จนั ทร์ ธนวฒั นเสถียร.**ออกแบบและสร้างเวบ็ สวยด้วย Dreamweaver CS6 สาหรับ ผ้เู ริ่มต้น.**กรุงเทพฯ*:*รีไววา่ ,*2557._______.**ออกแบบและสร้างเวบ็ สวยด้วย Dreamweaver CS6 ฉบับ สมบูรณ์.**กรุงเทพฯ*:*รีไววา่ ,*2558.สุธี นวกุล.**ออกแบบและสร้างเวบ็ ไซต์ด้วย Dreamweaver CS6.**กรุงเทพฯ*:*ซีเอ็ดยเู คชนั่ , 2555.