การปฎิบัติงานบริการคอมพิวเตอร์: บทที่ ๗ การออกแบบเว็บเพจ

บทที่ 7

การออกแบบเว็บเพจ

การจัดทำเว็บเพจด้วยโปรแกรม Microsoft Word 2003

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

ในการจัดทำเว็บ ก็เหมือนกับเป็นการจัดทำเอกสารทั่ว ๆ ไปของ Microsoft Word 2003 แต่ก็สามารถที่จะทำการจักรูปแบบ และตกแต่งเว็บเพจให้แต่งต่างไปจากเอกสารทั่วไปได้ เช่น การใส่สื้นให้กับเอกสาร (Background) หรือจะทำการเลือกการตกแต่งด้วยชุดรูปแบบ (Theme) ที่ใช้สำหรับตกแต่งเว็บเพจโดยเฉพาะที่โปรแกรมได้มีไว้ให้โดยอัตโนมัติ

1.คลิกเลือกที่เมนูคำสั่ง แฟ้ม >

สร้างใหม่

2.คลิกเลือกที่ตัวเลือก Web

Page (เว็บเพจ) เพื่อสร้างเอกสารขึ้นมาใหม่

ที่ใช้ในการสร้างเว็บต่าง ๆ

3.คลิกเลือกที่เมนูคำสั่ง Format > Thame (รูปแบบ > ชุดรูปแบบ) เพื่อทำการกำหนดรูปแบบของหน้าเว็บเพจให้กับเอกสารโดยอัตโนมัติ

4.คลิกเลือกรูปแบบต่าง ๆ ในช่องของต่าง ๆ ในช่องของ Close a Theme โดยสังเกตรูปแบบที่ช่องทางขวามือ

5.คลิกเลือกที่ปุ่มคำสั่ง (ตกลง) หลังจากที่ได้ทำการเลือกรูปแบบเสร็จเรียบร้อยแล

6.ผลลัพธ์ที่ได้จากการตกแต่งเว็บเพจด้วยข้อความ และรูปภาพให้เกิดความสวยงาม

การดูตัวอย่างในเว็บเพจในบราวเซอร์

เมื่อได้ทำการสร้างเว็บเพจเสร็จเรียบร้อยแล้ว หากต้องการที่จะดูตัวอย่างของเว็บเพจที่ได้จากการทำขึ้นนั้น สามารถที่จะทำทำได้โดยการใช้เว็บบราวเซอร์เป็นตัวเลือกให้แสดงหน้าเว็บเพจ เพื่อตรวจสอบความถูกต้องเมื่อมีการแสดงผลบนอินเทอร์เน็ต ซึ่งโดยปกติแล้วโปรแกรมเว็บบราวเซอร์ที่มีมากับโปรแกรมวินโดร์นั้น จะเป็น Internet Explorer หรือที่เราเรียกสัน ๆ ว่า IE โดยสามารถทำการเลือกดูตัวอย่างเว็บเพจได้ตามขั้นตอนดังนี้

1.คลิกเลื่อกที่เมนูคำสั่ง file > Web Page Preview (แฟ้ม > แสดงตัวอย่างเว็บเพจ)

2.ผลลัพธืที่ได้หลังจากได้มีการสั่งให้แสดงตัวอย่างเว็บเพจด้วยโปรแกรม Internet Explorer

การเก็บบันทึกข้อมูลเว็บเพจ

เมื่อทำได้ทำการสร้างและตกแต่งหน้าเว็บเพจเสร็จเรียบร้อยแล้ว ต่อไปก็จะต้องทำการบันทึกไฟล์เอกสารเวิร์ด ให้เป็นไฟล์ที่มีนามสกุล .HTM หรือ .HTML เพื่อนำข้อมูลไฟล์เวิร์ดไปแสดงบนอินเทร์เน็ตต่อไป โดยสมารถทำได้ตามข้นตอนดังนี้

1.คลิกเลือกที่เมนูสั่ง File > Save as Web Page (แฟ้ม > บันทึกเป็นเว็บเพจ)

2.ให้ตั้งชื่อไฟล์ตามที่ต้องการ ในช่องของ File name : (ชื่อไฟล์) โดยพยายามตั้งเชื่อไฟล์ให้มีชื่อที่มีความสอดคล้องกับงานที่ได้ทำเพื่อสะดวกในการเรียกดูครั้งต่อไป

3.คลิกเลือกตำแหน่งที่ต้องการจะเก็บไฟล์ข้อมูล ในช่องของ Save in (เก็บใน) เพื่อบันทกไฟล์ไว้ไนโฟลเดอร์ที่ต้องการ โดยในช่องของ Save as type (เก็บเป็นชนิด) เพื่อตรวจสอบดูว่าได้ทำการบันทึกเป็นนามสกุลของไฟล์อะไร

-Single File Web Page (*.mht;*.mhtml) เป็นการบันทึกองค์ประกอบของเว็บเพจทั้งหมด ไม่ว่าจะเป็นข้อความภาพกราฟิก หรือเป็นไฟล์เว็บเพจเดียวเพียงไฟล์เดียว .mht หรือ .mhtml

- Web Page (*.htm;html) เป็นการบันทึกเนื้อหาโดยแยกเป็นไฟล์เว็บเพจ .htm หรือ html และบันทึกรูปภาพหรือกราฟิกที่อยู่ในเว็บเพจแยกเก็บไว้ต่างหากในโฟลเดอร์ชื่อเดียวกับชื่อไฟล์(โดยเติมคำว่า_files ต่อท้ายให้) เช่น orchid_files

Save

4. คลิกเลือกที่ปุ่มคำสั่ง (บันทึก)

การเปลี่ยนไฟล์เอกสาร ให้เป็นไฟล์เว็บเพจ

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

1.คลิกเพื่อเปิดเอกสารที่ต้องการที่จะแปลงไฟล์เอกสารเป็นไฟล์เว็บเพจ

2.คลิกเลือกที่เมนูคำสั่ง Format > Background > Fill Effects (รูปแบบ > พื้นหลัง > เติมลักษณะพิเศษ) เพื่อทำการปรับแต่งพื้นหลังให้กับเอกสาร

3. คลิกเลือกที่แท็บ Gradient (ไล่ระดับสี) เพื่อทำการกำหนดรูปแบบพื้นหลัง

4. ในช่องของ Colors (สี) จะเป็นการเลือกการไล่สีในรูปแบบต่าง ๆและสีต่าง ๆ

ตามที่ต้องการ

5. ในชองของ Shading styles (การไล่ค่าของสี) โดยเลือกรูปแบบที่ต้องการทิศทางในการไล่ค่าของสีในรูปแบบต่าง ๆ และช่องของ Variants (ทิศทางการไล่สี)โดยเลือกรูปแบบที่ต้องการซึ่งมีตัวอย่างแสดงให้ดูอยู่ในช่อง Sample (ตัวอย่าง)

6. คลิกเลือกที่ปุ่มคำสั่ง (ตกลง) เมื่อได้ทำการเลือกรูปแบบต่าง ๆ เสร็จเรียบร้อยแล้ว

7. ผลลัพธ์ที่ได้หลังจากที่ได้ทำการไล่เฉดสีพื้นหลังในรูปแบบต่าง ๆ

8. คลิกเลือกที่เมนูคำสั่ง File > Save as Wed Page (แฟ้ม > บันทึกเป็นเว็บเพจ) เพื่อทำการบันทึกไฟล์เอกสารให้เป็นไฟล์เว็บเพจ

9. ในช่องของ Save in (บันทึกใน) ให้คลิกเลือกโฟลเดอร์ที่ต้องการจัดเก็บไฟล์ข้อมูลไว้

10. ในช่องของ File name (ชื่อแฟ้ม) ให้ทำการตั้งชื่อให้กับไฟล์ข้อมูล โดยการตั้งชื่อ ควรให้มีความสอดคล้องกับข้อมูลที่ได้จัดทำขึ้น เพื่อสะดวกในการสืบค้นและเรียกดูขึ้นมาแก้ไขข้อมูลได้ง่ายในภายหลัง โดยในช่องของ Save as type (บันทึกเป็นชนิด) ให้กำหนดเป็นนามสกุลของไฟล์เป็น Web Page (*.htm , *.html)

Save

11. คลิกเลือกที่ปุ่มคำสั่ง (บันทึก) เมื่อได้ทำการกำหนดแหล่งที่เก็บข้อมูล และการตั้งชื่อให้กับไฟล์ข้อมูลเรียบร้อยแล้ว

การเชื่อมโยงข้อมูลด้วยการสร้างไฮเปอร์ลิงค์

การเชื่อมโยงข้อมูล หรือ ไฮเปอร์ลิงค์ เรียกอีกชื่อหนึ่งว่า “ลิงค์” (Link) นั้น หมายถึงการสร้างจุดเชื่อมต่อหรือจุดเชื่อมโยงให้กับเอกสาร โดยสามารถที่จะคลิกตรงข้อความที่ทำการลิงค์ไว้ เพื่อลิงค์ไปยังเอกสารที่ต้องการ ซึ่งเป็นการลิงค์เอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่งหรือจากเอกสารหนึ่งไปยังเอกสารหนึ่ง ซึ่งอาจจะเป็นการลิงค์โดยการใช้ ข้อความ รูปภาพ หรือเมนูคำสั่งต่าง ๆ เป็นตัวนำทางไปยังเอกสารดังกล่าว ซึ่งเนื้อหาข้อมูลอาจจะเกี่ยวข้องหรือไม่เกี่ยวข้องก็ได้ เพราะเอกสารเว็บเพจมีจำนวนมากและไม่สามารถนำมาวางในหน้าเดียวกันได้ทั้งหมด จึงนิยมสร้างลิงค์ขึ้นมาเพื่อให้ผู้ใช้

คลิกเปลี่ยนดูหน้าเว็บเพจหน้าอื่นได้อย่างรวดเร็ว การทำงานของไฮเปอร์ลิงค์ จะเกิดขึ้นได้ต้องมีองค์ประกอบ 2 ส่วนด้วยกันคือ

ต้นทาง (Source Anchor)

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

ปลายทาง (Destination Anchor)

หมายถึง ข้อมูล แหล่งข้อมูลหรือเอกสารที่ถูกอ้างถึง โดยในอินเทอร์เน็ตจะเรียกว่า URL (Uniform Resource Locator) ซึ่งจะเป็นการอ้างอิงหรืออ้างถึงแหล่งข้อมูลปลายาง การเชื่อมโยงหรือลิงค์ในเอกสารมีลักษณะดังนี้

1.การลิงค์ภายในเอกสารเดียวกัน (Place in This Document) ในการเชื่อมโยงลักษณะนี้จะเป็นการเชื่อมโยงระหว่างข้อมูลภายในเอกสารในหน้าเดียวกัน

2.การลิงค์ระหว่างไฟล์หรือเว็บเพจ (Existing File or Web Pane) ในการเชื่อมโยงลักษณะนี้จะเป็นการเชื่อมโยงระหว่างข้อมูลการลิงค์ ไปยังไฟล์ข้อมูลหรือ เว็บเพจอื่น ๆ ที่มีส่วนเกี่ยวข้องในข้อมูลนั้น ๆ

3. การลิงค์ไปยังเอกสารใหม่ (Create Naw Document) ในการเชื่อมโยงนี้จะเป็นการเปิดไปยังเอกสารใหม่

4.การลิงค์ไปยังอีเมล์ (E-Mail Address) ในการเชื่อมโยงนี้จะเป็นการเชื่อมโยงเพื่อไปทำการส่งอีเมล์ไปยังปลายทางที่ต้องการส่งอีเมล์

การสร้างไฮเปอร์ลิงค์ไปยังเอกสารหรือเว็บเพจอื่น

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

2.คลิกเลือกที่ปุ่มคำสั่ง Insert Hyperlink (แทรกการเชื่อมโยง) เพื่อทำการสร้างลิงค์ให้กับข้อความหรือรูปภาพที่เลือก

3.คลิกเลือกที่แท็บ Existing File or Web Page (แฟ้มหรือเว็บเพจที่มีอยู่) เป็นการคลิกเพื่อเลือกเปิดไฟล์ที่มีอยู่ในเครื่อง

4.คลิกเลือกที่แท็บ Current Folder (โฟลเดอร์ปัจจุบัน)เป็นการคลิกเลือกโฟลเดอเดียวกับโฟลเดอร์ต้นทาง

5.คลิกเลือกโฟลเดอร์เว็บเพจที่ต้องการที่สร้างลิงค์เพื่อเปิดไฟล์เว็บเพจ e-learning MIS.htm

6.คลิกเลือกที่ปุ่ม (ตกลง) เมื่อทำการกำหนดหรือเลือกไฟล์ข้อมูลที่ต้องการทำลิงค์ไปหาเสร็จเรียบร้อยแล้ว

7.เมื่อเลื่อนเม้าส์ไปวางไว้บนข้อความที่ได้สร้างลิงค์ไว้ จะมีคำอธิบายปรากฏขึ้นเพื่อบอกหรืออธิบายวิธีการลิงค์ โดยสามารถทำได้คือ การกดที่ปุ่ม Ctrl ค้างไว้แล้วคลิกเมาส์เลือกข้อความที่ได้ทำลิงค์ไว้ ก็จะสามารถลิงค์ไปยังโฟล์เว็บเพจที่ได้ทำการเลือกไว้ในขั้นตอนข้างต้น

แบบทดสอบหลังเรียน

ตอนที่ 1 ตอบคำถามต่อไปนี้ให้ถูกต้องสมบูรณ์

1. จงอธิบายถึงชุดเอกสารเว็บเพจ ประกอบด้วยอะไรบ้าง

2. จงยกตัวอย่างโปรแกรม Simple Tax Edition มา 3 โปรแกรม

3. จงอธิบายหลักการออกแบบเว็บเพจ

4. จงอธิบายวิธีการ Link เอกสารภายในในหน้าเดียวกัน

5. อธิบายวิธีการกำหนดชื่อไฟล์ และนามสกุลของไฟล์เอกสารเว็บ

...............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

1.ข้อใด ไม่ใช่ ลักษณะการออกแบบเว็บเพจ

ก. Hierarchy

ข. Linear

ค. Combination

ง. Circle

2.ข้อใดไม่ใช่ข้อกำหนดพื้นฐานในการพัฒนาเว็บเพจ

ก. กำหนด URL

ข. กำหนดชื่อโฟลเดอร์

ค. กำหนดชื่อโฟลเดอร์เอกสาร

ง. กำหนดชื่อไฟล์รูปภาพ

3.หน้าแรกของเว็บเพจเรียกว่า

ก. web page

ข. Web Site

ค. Home Page

ง. Title Page

4.เนื้อหาในแต่ละหน้าเรียกว่าอะไร

ก. Web Page

ข. Web Site

ค. Home Page

ง. Title Page

5.องค์ประกอบกาทำงานสำคัญของ Hyper Link มีกี่ส่วน

ก. 2 ส่วน

ข. 3 ส่วน

ค. 4 ส่วน

ง. 5 ส่วน

6. ข้อใดไม่ใช่วิธีการในการสร้าง hyper link

ก. ใช้ข้อความ

ข. ใช้เสียง

ค. ใช้รูปภาพ

ง. ใช้เมนู

7. รูปแบบใดเป็นการบันทึกข้อมูลองค์ประกอบทั้งหมดของเว็บเพจ

ก. Single File Web page

ข. Web page

ค. Save as Wab page

ง. Save as

8. นางสกุลของเอกสารเว็บคืออะไร

ก. .htm

ข. .dml

ค. .html

ง. ข้อ ก และ ค ถูก

9. คำสั่งใดใช้ในการดูตัวอย่างเว็บเพจผ่านเว็บบราวเซอร์

ก. View > Web page Preview

ข. File >Web page Preview

ค. Tool>Web page Preview

ง. Widows>Web page Preview

10.ข้อดีของการัฒนาเว็บเพจด้วยการลงรหัส HTML ด้วยโปรแกรม Simple Text Editor คืออะไร

ก. พัฒนาง่าย

ข. เห็นผลลัพธ์ทันที

ค. สามารถลงรหัสใหม่ ๆ ตามต้องการ

ง. ไม่มีคำตอบที่ถูกต้อง

หน้าเว็บ

ค้นหาบล็อกนี้

วันพฤหัสบดีที่ 23 กุมภาพันธ์ พ.ศ. 2555

บทที่ ๗ การออกแบบเว็บเพจ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น