หน่วยที่ 5 การใส่ข้อความลงในเว็บเพจ

ใบความรู้ หน่วยการเรียนร้ทู ี่ 5การใสข่ อ้ ความลงในเว็บเพจ ข้อมลู จาก : หนงั สอื สร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสิทธ์ิ องึ้ รตั นวงศ,์ 2554

การใส่ข้อความลงในเว็บเพจ วธิ ใี สข่ ้อควมลงในเว็บเพจสามารถทาได้เหมือนกบั โปรแกรมประเภท Microsoft Word ซ่งึ เราสามารถพมิ พข์ อ้ ความทจ่ี ้องการลงในพื้นท่ีสร้างงานทนั ที ดงั น้ี 1. เปิดเว็บเพจช่อื indext.html บนหนา้ ต่างพาเนล File 2. วางเคอร์เซอร์ในตาแหน่งท่ีต้องการพิมพ์ข้อความ ซ่ึงในแถวนี้เลือกวางคอลัมน์ด้านซ้ายแถวท่ี 2ของตารางหลกั 3. พมิ พค์ วามที่ตอ้ งการลงไป ขอ้ มลู จาก : หนังสอื สร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รตั นวงศ,์ 2554

จากนน้ั ให้บันทึกเว็บเพจ แลว้ ทดลองแสดงผลบนเบราเซอร์ จะไดด้ งั รูป สังเกตว่าข้อความที่พิมพ์ลงไปน้ันไม่ได้อยู่ส่วนบนของคอลัมถ์ ดังนั้น ถ้าต้องการจัดให้อยู่ในตาแหน่งส่วนบน ทาได้ดังน้ี 1. เลือกคอลมั น์ที่ต้องการซ่ึงในทีน่ ี้เลือกคอลมั น์ในตารางหลัก เมอื่ เลือกแล้วจะเกดิ เสน้ ขอบตารางยอ่ ย ขอ้ มลู จาก : หนงั สอื สรา้ ง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อ้งึ รตั นวงศ,์ 2554

2. คลิกแทก็ <td> ใน Tag Selector เพอื่ เปล่ียนให้เป็นคอลัมนใ์ นตารางหลักหลังคลิกแทก็ <td> แล้วเส้นกรอบสีดาจะลอ้ มรอบคอลัมน์ในตารางหลักแทน3. คลิกเลือก Top ในช่อง Vert เพอ่ื จดั รูปแบบใหแ้ สดงบนสดุ ของคอลัมน์ ข้อมลู จาก : หนงั สือสรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จีระสทิ ธ์ิ อ้ึงรตั นวงศ,์ 2554

ข้นึ บรรทัดใหมใ่ นยอ่ หน้าเดมิ บางคร้ังขอ้ ความที่พมิ พ์ลงไปอาจยาวเต็มบรรทัดหรือต้องการขึ้นบรรทัดใหม่ เราสามารถกด Enter ท่ีคยี บ์ อร์ดได้ทนั ที แค่ะระยะหา่ งระหวา่ งบรรทดั จะมากกวา่ ปกติ ซ่งึ ทาใหข้ ้อความทแ่ี สดงออกมาดูไม่สวยงาม ดงั นั้น ในโปรแกรม Dreamweaver จึงมคี าส่งั ท่ีชว่ ยให้ระยะห่างระหวา่ งบรรทัดนอ้ ยลง ซงึ่ ทาได้ดังนี้ 1. หากต้องการขึ้นย่อหน้าใหม่ (ระยะห่างระหว่าบรรทัดจะมากกว่าปกติ) ให้กด Enter ท่ีคีย์บอร์ด ไดท้ นั ที 2. หากไม่ต้องการขึ้นย่อหน้าใหม่ (ระยะห่างระหว่างบรรทัดจะเท่าเดิม) ให้กด Shift + Enter ทค่ี ยี ์บอร์ด ขอ้ มลู จาก : หนังสอื สรา้ ง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อึง้ รัตนวงศ,์ 2554

เลอื กข้อความบนเว็บเพจ การเลอื กข้อความบนเวบ็ เพจทาไดเ้ ชน่ เดยี วกบั โปรแกรมประเภท Microsoft Office Word ดงั น้ี 1. เลอื กท้งั บรรทัด ทาไดโ้ ดยคลิกท่ีตน้ บรรทดั 2. เลอื กทั้งประโยค ทาไดโ้ ดยดบั เบลิ คลกิ บนปรโยคท่ีต้องการ 3. เลอื กเฉพาะทต่ี ้องการ ทาได้โดยคลิกเมาสซ์ ้ายแลว้ ลากคลมุ เฉพาะส่วนท่ีตอ้ งการ ขอ้ มลู จาก : หนังสอื สรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธิ์ อ้ึงรตั นวงศ,์ 2554

การจดั รปู แบบข้อความดว้ ย Properties Inspector เราสามารถจัดรูปแบบข้อความท่ีต้องการแสดงออกมาทางเบราเซอร์ได้ โดยเลือกข้อความท่ีต้องการหรือวางเคอร์เซอร์ตรงตาแหน่งที่จะพิมพ์ข้อความ แล้วใช้หน้าต่าง Properties Inspector ในการจัดรูปแบบข้อความตามสไตลท์ ่ตี ้องการ ดังนี้ สไตล์ HTMLสไตล์ CSS ข้อมลู จาก : หนงั สือสรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ องึ้ รตั นวงศ,์ 2554

การเลอื กสีฟอนต์ใหก้ บั ขอ้ ความ ข้อความท่ีแสดงบนเบราเซอร์สามารถเลือกฟอนต์ที่จะใช้งานได้ แต่ฟอนต์น้ันจะต้องเป็นฟอนต์มาตรฐานเท่าน้ัน ห้ามเป็นฟอนต์แปลกๆ เนื่องจากในเคร่ืองของผู้ชม อาจจะไม่มีฟอนต์เหล่านั้น เมื่อข้อความเวบ็ เพจปรากฏบนเบราเซฮร์ เบราเซอร์กจ็ ะดงึ ฟอนต์อน่ื ทีม่ ีอยใู่ นเคร่อื งมาแสดงแทน สาหรับฟอนต์ภาษาไทยท่ีนิยมใช้กันจะเป็นฟอนต์ MS San Serif และ Tahoma เนื่องจากอ่านและแสดงผลไดบ้ นเบราเซอรท์ กุ ชนดิ ซ่งึ วิธกี ารเลอื กฟอนตใ์ หก้ ับขอ้ ความ ทาไดด้ งั นี้ 1. เลอื กขอ้ ความทจ่ี ะกาหนดชุดฟอนต์ 2. คลิกเลอื กชดุ ฟอนต์ทตี่ ้องการใช้ทช่ี ่อง Font ในหน้าตา่ ง Properties Inspector สไตล์ CSS ขอ้ มลู จาก : หนงั สือสรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสิทธิ์ องึ้ รตั นวงศ,์ 2554

การปรบั เปลยี่ นขนาดฟอนต์ เราสามารถเปล่ียนขนาดฟอนต์ของข้อความให้เหมาะสมกับการแสดงผลได้ โดยใช้การจัดรูปแบบสไตล์ CSS ดงั น้ี 1. เลือกขอ้ ความทจ่ี ะปรบั เปล่ยี นขนาดฟอนต์ 2. เลือกขนาดตัวอักษรหรือพมิ พค์ ่าลงไปในช่อง Size บนหนา้ ตา่ ง Properties Inspector สไลต์ CSS จากน้นั จะปรากฏหนา้ ต่าง New CSS Rule ใหก้ าหนดคณุ สมบัติเบ้อื งตน้ ของ CSS 3. กาหนดช่ือเรียกของสไตล์ ซ่ึงควรตั้งชื่อเรียกให้สอดคล้องกับสิ่งท่ีให้สไตล์ไปกาหนด ในท่ีนี้ใช้ช่ือleftsubmenu 4. คลกิ ป่มุ OK ขอ้ มลู จาก : หนังสือสรา้ ง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสทิ ธิ์ องึ้ รตั นวงศ,์ 2554

การเปล่ยี นสฟี อนต์ สาหรับขอ้ ความสว่ นที่เป็นหวั ขอ้ หลกั หรอื หวั ข้อย่อย เราสามารถทาให้เกิดความโดดเด่น ได้ดังน้ี 1. เลอื กขอ้ ความทจ่ี ะเปลย่ี นสีฟอนต์ 2. คลิก บนหน้าตา่ ง Properties Inspector สไตล์ CSS 3. คลกิ เลอื กสจี ากตารางสี ข้อมลู จาก : หนังสือสรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสิทธิ์ องึ้ รตั นวงศ,์ 2554

การกาหนดลกั ษณะตัวอักษร การกาหนดลักษณะตัวอกั ษร ไม่วา่ จะเปน็ ตัวหนา ตวั เอียง และลักษณะอืน่ ๆ สามารถทาได้ดังนี้ 1. เลือกขอ้ ความทจ่ี ะกาหนดลกั ษณะตวั อกั ษร 2. คลิกเลอื กลักษณะตัวอักษรบนหน้าต่าง Properties Inspector สไตล์ CSS ขอ้ มูลจาก : หนงั สือสรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อ้ึงรตั นวงศ,์ 2554

แทรกสญั ลักษณพ์ ิเศษในเวบ็ เพจ เราสามารถแทรกสัญลักษณ์พิเศษ อย่างเช่น © (Copyright) หรือ ™ (Trademark) ด้วยการพิมพ์ลงในเวบ็ เพจไดด้ งั นี้ 1. วางเคอร์เซอร์ตรงตาแหนง่ ท่ีตอ้ งการแทรกสัญลักษณ์พิเศษ 2. คลิกแท็บ Text บน Insert Bar ขอ้ มูลจาก : หนังสอื สร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธ์ิ องึ้ รตั นวงศ,์ 2554

3. เลือกสญั ลกั ษณ์พิเศษท่ตี อ้ งการแทรกลงในเวบ็ เพจในแถบ Charactersจากนน้ั สัญลักษณพ์ เิ ศษทเ่ี ลือกจะถูกแทรกลงในตาแหน่งท่ีวางเคอรเ์ ซอร์ ดังรูป ข้อมลู จาก : หนังสอื สรา้ ง Web งา่ ยๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อึง้ รตั นวงศ,์ 2554

จากนั้นพิมพ์ข้อความลิขสิทธ์ิต่อท้าย หากต้องการจัดให้ข้อความในบรรทัดอยู่กึ่งกลาง ทาได้โดยวางเคอร์เซอร์ลงในแถวน้ัน แล้วคลิกเลือก Center ที่ช่อง Horz ในเว็บเพจจะจัดข้อความบรรทัดนั้นอยู่ก่ึงกลางตารางตาทกี่ าหนด ดงั รูป ข้อมลู จาก : หนังสอื สร้าง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อึ้งรตั นวงศ,์ 2554

การกอ๊ ปป้ีและจัดวางเน้ือหาจากเอกสาร Office การกอ๊ ปปขี้ ้อความหรือเน้ือหาทอ่ี ย่ใู นไฟล์เอกสาร Office อย่างเชน่ Word หรือ Excel มาวางบนเว็บเพจ มี 2 ข้ันตอนดงั นี้ ขัน้ ตอนท่ี 1 กอ๊ ปปเ้ี นื้อหาจากไฟลง์ านเอหสารต้นฉบับ 1. เปดิ ไฟล์เอกสาร Office ที่ตอ้ งการก๊อปปี้ 2. เลอื กข้อความหรอื เน้อื หาที่ต้องการก๊อปป้ี 3. คลิกเมาส์ขวาบนขอ้ ความ แล้วเลือกคาส่ัง Copy ข้อมลู จาก : หนงั สือสรา้ ง Web ง่ายๆ แค่คลิก Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อง้ึ รัตนวงศ,์ 2554

ขั้นตอนที่ 2 วางเนือ้ หาลงในเว็บเพจท่สี ร้างด้วย Dreamweaver1. วางเคอรเ์ ซอร์ตรงตาแหนง่ ทตี่ อ้ งการวางขอ้ ความ2. คลกิ เมนู Edit > Past Specialจากนนั้ จะปรากฏหนา้ ตา่ ง Paste Special ข้นึ มาให้เลือกรูปแบบการจดั วาง ขอ้ มลู จาก : หนังสือสร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสิทธิ์ อ้งึ รตั นวงศ,์ 2554

3. รูปแบบการจดั วางข้อความที่ก๊อปปี้มา สามารถเลอื กได้ดังน้ี - Text only วางเฉพาะข้อความอยา่ งเดยี ว แตไ่ มม่ ีการจดั รปู แบบใดๆ - Text with structure (paragraphs, lists, tables, etc.) วางข้อความตามรูปแบบโครงสรา้ งตน้ ฉบบั เชน่ จดั ย่อหน้า, จัดลสิ ตล์ าดับ, ตาราง เป็นต้น - Text with structure plus basic formatting (bold, italic) วางข้อความตามรปู แบบลักษณะขอ้ ความตน้ ฉบบั เชน่ ตัวหนา ตวั เอยี ง เปน็ ต้น - Text with structure plus full formatting (bold, italic, styles) วางข้อความตามรปู แบบลกั ษณะขอ้ ความตน้ ฉบับ รวมทั้งรปู แบบสไตล์ที่ใช้จัดข้อความดว้ ย - Retain line breaks คงลกั ษณะการแบ่งบรรทัดตามต้นฉบบั - Clean up Word paragraph spacing ล้างค่าระยะห่างระหว่างย่อหน้าที่กาหนดไว้ในWord ออก4. คลกิ ปมุ่ OKจะไดเ้ ว็บเพจทีแ่ สดงขอ้ ความทก่ี ๊อปป้จี ากโปรแกรม Word ข้อมูลจาก : หนงั สือสรา้ ง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธ์ิ อง้ึ รัตนวงศ,์ 2554