03 การใส่ข้อความบนเว็บเพจ
บนเว็บเพจส่วนใหญ่มักจะประกอบไปด้วยข้อความ และรูปภาพ ซึ่งเราจะต้องเตรียมข้อมูลต่างๆ เหล่านี้ไว้ล่วงหน้า เพื่อใส่ลงในแต่ละหน้าเว็บเพจ ส าหรับข้อความนั้นเราอาจพิมพ์เก็บไว้ในโปรแกรมเวิลด์ โปรเซสเซอร์ แล้วก็อปปี้มาใช้หรืออาจพิมพ์ลงไปใน Dreamweaver โดยตรงเลยก็ได้ การพิมพ์ข้อความลง ใน Dreamweaver นั้นอาจจะแสดงผลไม่เหมือนกับบนเว็บเพจทั้งหมด ซึ่งจะขึ้นอยู่กับเครื่องของผู้ชมด้วย ดังนั้นมีจุดที่ควรระวังหลายจุด ยกตัวอย่างเช่น การก าหนดฟอนต์ตัวอักษรนั้น หากเลือกใช้ฟอนต์ แปลกๆ ผู้ชมที่ไม่มีฟอนต์นี้อยู่ก็ไม่สามารถอ่านได้ ใส่ข้อความลงบนเว็บเพจ การใส่ข้อความลงบนเว็บเพจของ Dreamweaver มีการใช้งานแบบโปรแกรมเวิร์ดโปรเซสเซอร์คือ วางเคอร์เซอร์ลงบนบริเวณที่ต้องการพิมพ์ แล้วพิมพ์ข้อความตามต้องการ นอกจากนี้ยังสามารถตัด, คัดลอก และวางข้อความได้เหมือนโปรแกรมเวิร์ดโปรเซสเซอร์ - ย้ายข้อความ ท าได้โดยเลือกข้อความ แล้วคลิกลากไปวางที่ต าแหน่งใหม่ หรืออีกวิธีหนึ่งให้เลือก ข้อความ แล้วเลือกค าสั่ง Edit > Cut (คีย์ลัด Ctrl X) กดนั้นวางเคอร์เซอร์ตรงต าแหน่งปลายทาง แล้วใช้ค าสั่ง Edit > Paste (คีย์ลัด Ctrl V) แทนก็ได้ - ก็อปปี้ข้อความ ท าได้โดยเลือกข้อความ แล้วกดคีย์ Ctrl ค้างไว้พร้อมกับคลิกลากไปวางที่ใหม่หรือ อีกวิธีหนึ่ง ให้เลือกข้อความแล้วเลือกค าสั่ง Edit > Copy (คีย์ลัด Ctrl C) จากนั้นวางเคอร์เซอร์ตรง ต าแหน่งปลายทาง แล้วใช้ค าสั่ง Edit > Paste (คีย์ลัด Ctrl V) แทนก็ได้เว้นวรรคระหว่างข้อความ
ตามปกติการเว้นวรรคระหว่างข้อความในเว็บเพจ คุณจะเคาะวรรคได้เพียงอย่างเดียวเท่านั้น หาก ต้องการเคาะวรรคมากกว่าหนึ่งครั้ง อาจเลือกท าตามวิธีใดวิธีหนึ่ง ดังนี้
- บนพาเนล INSERT เมื่อใช่งานครั้งแรกจะแสดงปุ่ม Common อยู่ด้านบน ในคลิดปุ่ม Common > Text จากนั้นคลิก Characters > Non-Breaking Space เพื่อใส่ตัวเว้นวรรค
ขึ้นบรรทัดใหม่ในย่อหน้าเดิม ตามปกติแล้วถ้าต้องการขึ้นบรรทัดใหม่จะท าได้โดยการกดคีย์ Enter แต่ในกรณีที่คุณต้องการปัด ข้อความให้ขึ้นบรรทัดใหม่แต่ยังอยู่ในย่อหน้าเดียวกันแล้วนั้น สามารถท าได้โดยใช้วิธีใดวิธีหนึ่งดังนี้ - วิธีที่ 1 กดคีย์ Shift Enter - วิธีที่ 2 บนพาเนล INSERT เลือกค าสั่ง Text แล้วคลิก Character > Line Break (Shift + Enter) ดังรูป Note ในมุมมองการออกแบบของเว็บเพจที่พิมพ์ข้อความอาจจะต่างจากการแสดงผลริงบนบราวเซอร์เนี่องจาก Dreamweaver ไม่สามารถตัดค าภาษาไทยได้ ดังนั้นการขึ้นบรรทัดใหม่ของข้อความภาษาไทยได้ ไม่สวยงาม แต่ไม่ต้องกังวล เพราะเวลาแสดงผลจริงการตัดคะขึ้นกับบราวเซอร์ และสภาพแวดล้อมที่ผู้ชมใช้ดูเว็บเพจ แทรกสัญลักษณ์พิเศษ การพิมพ์ข้อความลงไปบนเว็บเพจ บางครั้งอาจ าเป็นต้องแทรกสัญลักษณ์พิเศษลงไป เช่น © เป็น ต้น ซึ่งสามารถแทรกได้โดยเลือกกลุ่มค าสั่ง Characters แล้ว เลือกสัญลักษณ์ ที่ต้องการ ถ้าจะใช้สัญลักษณ์ นอกเหนือจากนี้ ให้เลือกค าสั่ง Other Characters เพื่อต้องการเข้าไปเลือกสัญลักษณ์ อื่นๆตามต้องการ
จัดรูปแบบข้อความ
ข้อความที่แสดงบนเว็บเพจสามารถจัดรูปแบบของข้อความเช่น ฟอนต์ตัวอักษร, ขนาด, สี, ลักษณะ ตัวหนา ตัวเอียง รวมต าแหน่งย่อหน้าข้อความได้หลายวิธีด้วยกัน เช่น ใช้เครื่องมือบนพาเนล
PROPERTLES, ใช้ค าสั่งในกลุ่มค าสั่ง Text บนพาเนล INSERT และใช้เมนูลัดจาการคลิกขวา เป็นต้น ใน หนังสือเล่มนี้เน้นที่การใช้พาเนล PROPERTLES เป็นหลักเนื่องจากเป็นวิธีที่สะดวกที่สุด
ก่อนที่จัดรูปแบบข้อความ เราะต้องเลือกกลุ่มข้อความก่อน เพื่อให้มีผลกับข้อความที่เลือกไว้เท่านั้น วิธีในการเลือกข้อความใน Dreamweaver จะเหมือนกับโปรแกรมโปรเซสเซอร์ดังนี้
จัดรูปแบบข้อความด้วยพาเนล PROPERTIES
จัดรูปแบบข้อความด้วย CSS เพื่อให้ข้อความที่อยู่บนเว็บเพจมีความเป็นระเบียบเรียบร้อย เราสามารถใช้ CSS หรือ Cascading Style Sheet ในการจัดข้อความได้ โดยสร้างเป็นสไตล์ส าหรับใช้กับข้อความแต่ละแบบ เช่น หัวข้อระดับ ต่างๆ, เนื้อหา, ข้อความที่อยู่ในตาราง เป็นต้น การสร้างสไตล์ไว้ใช้งานะช่วยลดเวลาในการตั้งค่าให้กับแต่ละ ข้อความ หรือแต่ละเว็บเพจ และยังช่วยให้เว็บดูสวยงามเป็นระเบียบอีกด้วย สร้างสไตล์ตัวอักษร
ก าหนดสีตัวอักษร
การก าหนดสีตัวอักษร หากก าหนดไว้ในหมวด Appearance (CSS) ที่หน้า Page Properties จะมีผล กับข้อความทั้งเว็บเพจ แต่หากต้องการก าหนดสีเฉพาะข้อความบางส่วนให้ท าได้โดยคลิกช่องสี แล้วเลือกสี ที่ต้องการ ดังรูป
หากไม่ได้ก าหนดสีให้กับข้อความ (ปล่อยเป็นค่าว่างๆ) การแสดงผลจะขึ้นอยู่กับการก าหนด Text color ใน Page Properties ก็ไม่ได้ก าหนดไว้ การแสดงผลจะขึ้นกับการตั้งค่าในบราวเซอร์ของผู้ชม
Note
หลังจากจัดรูปแบบข้อความแล้ว ถ้าคุณไม่เห็นผลลัพธ์ปรากฏบนเว็บเพจ ให้ตรวจสอบสถานะของปุ่ม 80 บนทูลบาร์ Style Rendering ซึ่งปุ่มนี้จะต้องถูกเลือกอยู่ ผลการจัดรูปแบบจึงจะแสดงบนเว็บเพจ
ก าหนดสไตล์ตัวอักษรให้กับข้อความ
Tip
การแสดงผลของเว็บเพจบนบราวเซอร์นั้น ถ้าเว็บเพที่สร้างขึ้นใช้รูปแบบฟอนต์ที่ผู้ชมไม่มีในเครื่อง หาก ต้องการใช้ฟอนต์พิเศษเพียงบางจุดควรน าข้อความส่วนนั้นไปสร้างเป็นภาพในโปรแกรมกราฟิกแทน แก้ไขสไตล์ตัวอักษร หลังจากที่สร้างสไตล์ตัวอักษรและก าหนดให้กับเว็บเพจแล้ว หากต้องการแก้ไขสไตล์ก็ท าได้ทันที เช่น เปลี่ยนสไตล์ชุดฟอนต์ตัวอักษร, เปลี่ยนสีตัวอักษร, ท าตัวหนา เป็นต้น ซึ่งการเปลี่ยนแปลงแก้ไขสไตล์ นี้จะมีผลกับทุกข้อความที่ใช้สไตล์นี้อยู่ ดังนั้นจึงช่วยประหยัดเวลาในการแก้ไข เพราะแก้ไขที่สไตล์เดียว ข้อความทั้งหมดบนเว็บเพจที่ใช้สไตล์เดียวกันจะถูกแก้ไขตามทันทีจัดรูปแบบข้อความด้วย HTML
เป็นการจัดรูปแบบด้วยค าสั่งหรือแท็ก HTML โดยจะแตกต่างจากรูปแบบของ CSS คือไม่ต้อง บันทึกรูปแบบที่ก าหนดไว้ ถ้าในเว็บเพจมีการใช้รูปแบบให้กับย่อหน้านั้นๆได้ เช่น หัวข้อระดับต่างๆ หรือ ข้อความทั่วไป เป็นต้น โดยเลือกรูปแบบในช่อง Format บนพาเนล PROPERTIES ดังรูป
ก าหนดลักษณะตัวอักษร
การก าหนดละกษณะตัวอักษรเป็นการก าหนดให้ตัวอักษรที่เลือกเป้นตัวหนา หรือตัวเอียงตาม ต้องการ โดยเลือกข้อความ แล้วคลิกปุ่ม หรือ บนพาเนล PROPERTIES (ถ้าจะยกเลิกก็คลิกซ้ าอัก ครั้ง)
จัดเยื้องย่อหน้า
โดยปกติแล้วย่อหน้าข้อความจะวางชิดซ้ายบนเว็บเพจ ซึ่งเราสามารถจัดให้ย่อหน้าให้เยื้ยงออกไป ทางขวา ครั้งละ 1 ช่วง โดยมีขั้นตอนดังต่อไปนี้
- Text Outdent จัดย่อหน้ากลับมาทางซ้ายทีละ 1 ช่วง Note ถ้าต้องการร่นย่อหน้ากลับทางด้านซ้าย ให้คลิกปุ่ม Text Outdone โดยจะร่นเข้ามาทีละ 1 ช่วง แต่จะ ไม่ร่นไปทางซ้ายเกินกว่าต าแหน่งย่อหน้าปกติ สร้างรายการแบบมีหัวข้อ ในกรณีที่เนื้อหาในเว็บเพจเป็นรายการที่มีหมายเลขก ากับ หรือเป็นรายการที่มีหัวข้อ (Bullet) ก็ สามารถสร้างรายการเหล่านี้ได้ โดยเลือกข้อความที่ต้องการจัดเป็นหัวข้อ แล้วคลิกปุ่ม ส าหรับ รายการที่ต้องการใช้บุลเล็ตก ากับหน้าข้อความ และถ้าต้องการรายการที่มีหมายเลยก ากับ ให้คลิกปุ่ม ที่อยู่บนพาเนล PROPERTIES Note - ข้อความที่จะจัดเป็นคนละหัวข้อ ต้องอยู่อย่างย่อหน้ากัน - หากยังไม่ได้พิมพ์ข้อความ ก็สามารถสร้างรายการได้เช่นกัน โดยคลิกปุ่ม 86 หรือ 86 แล้วพิมพ์ ข้อความ และกดคีย์ Enter ขึ้นหัวข้อถัดไป เมื่อต้องการจบรายการให้กดคีย์ Enter ติดกัน 2 ครั้ง - เมท่อต้องการยกเลิกหัวข้อ ให้คลิกที่หัวข้อนั้น (หรือคลิกลากให้ครอบคลุมหลายหัวข้อ) แล้ว คลิกปุ่ม 86 หรือ 86 ซ้ าอีกครั้ง
สร้างหัวข้อย่อ
แทรกเส้นแบ่งเนื้อหา
ก็อปปี้ข้อความจากภายนอก
ในการเก็บข้อมูลส าหรับสร้างเว็บเพจ บางครั้งอาจเก็บไว้ในไฟล์ประเภทอื่น เช่น Word, Excel ซึ่ง สามารถน าข้อความที่เก็บไว้ในไฟล์เหล่านั้น มาวางไว้บนเว็บเพจได้โดยวิธีการดังต่อไปนี้
ในขั้นตอนที่ 5 ให้ก าหนดรูปแบบในการ วางข้อความ ดังนี้
- 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 ให้คงลักษณะการแบ่งบรรทัดไว้ตามต้นฉบับ
Note
หากมีรูปภาพอยู่ในเนื้อหาที่ก็อปปี้มาโปรแกรมจ าก าหนดชื่อไฟล์ให้กับรูปภาพเหล่านั้นอัตโนมัติ เช่น clip_image001 (ตัวเลขข้างหลังจะเปลี่ยนไปตามล าดับรูป) และจะบันทึกไฟล์รูปภาพเก็บไว้ในเว็บไซต์ ด้วย
Tip
เราสามารถน าเนื้อหาจาก Microsoft Word และ Microsoft Excel เข้ามาได้ทั้งไฟล์โดยเลือกค าสั่ง Fill > Import > Document หรือ Excel Document หรือ Excel Document
ก็อปปี้ตารางจาก Microsoft Excel
