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

ใบความรู้

หน่วยการเรียนรู้ที่ 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 วางเนื้อหาลงในเว็บเพจที่สร้างด้วย Dreamweaver 1. วางเคอร์เซอร์ตรงต าแหน่งที่ต้องการวางข้อความ

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