Unit 5 การสร้าง Button และการ Link

Unit 5 การสร้าง Button และการ Link (PART 1.)

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

คราวนี้ลองมาดูวิธีการใช้และสร้างปุ่มกันแบบง่ายๆนะครับ จริงๆแล้วผมคงจะกล่าวถึงในส่วนของ การที่เราทำการ Import เอาButton เข้ามา และจากนั้นก็ทำการตกแต่งนะครับ หลังจากที่เราได้ Background เป็นที่เรียบร้อยแล้ว และทำการตั้งค่า Book Properties เสร็จแล้ว ก็คงจะถึงเวลาเสียที ที่จะทำการนำเอา Button มาใส่ (จริงๆ แล้วผมอาจจะแหกกฎไปสักนิดหนึ่ง นะครับ) เพราะ โดยปกติจะต้องทำการนำเนื้อหามาใส่ก่อน แต่ก็ไม่เป็นไรนะครับ เพราะสิ่งแรก ที่ผมต้องการให้มองเห็น ก็คือ การติดต่อระหว่างหน้า ในแต่ละหน้าว่าจะสามารถใช้งานได้หรือไม่ก่อน เผื่อว่าหากการเชื่อมกันในระหว่างหน้า เกิดมีปัญหา เราจะได้ทำการแก้ไขให้เรียบร้อยเสียก่อน ก่อนที่จะทำการวางข้อมูลเป็นอันดับต่อไป..

การImport Button ขั้นตอนในการทำ นั้นก็ง่ายมากครับ หลังจากวาง Background เรียบร้อยแล้ว และทำการตั้งค่าเรียบร้อย (รวมถึงการกำหนด Page , Background , Book Properties ) แล้ว ทำการคลิกเลือก Button เพื่อทำการสร้างปุ่มขึ้นมา โดยอาจจะกำหนดไว้ในพื้นที่ ที่ว่างอย่างในรูปที่แสดง

จากนั้น..ก็ทำการ Drag เพื่อทำการกำหนดขอบเขต โดยเราจะต้องทำการสร้างปุ่มทั้งหมด 5 ปุ่ม โดยมี ดังนี้

1.ปุ่ม Main กำหนดหน้าเมนูหลัก เพื่อกลับมายังรายการทั้งหมด
2.ปุ่ม Back กำหนดการย้อนกลับ ไปยังหน้าที่ผ่านมา
3.ปุ่ม Next กำหนดเพื่อพลิกไปหน้าถัดไป
4.ปุ่ม Previous กำหนดย้อนกลับมา 1หน้า
5.ปุ่ม Quit กำหนดการออกจากโปรแกรมการทำงาน

เทคนิค..การจัดรูปแบบและขนาดของปุ่มให้มีความเท่ากัน โดยการทำ Duplicate เพื่อทำสำเนาวัตถุให้มีขนาดเท่ากัน และระยะห่างที่เท่ากัน ซึ่งจะต่างจากการใช้ Copy นะครับ โดยรูปไอคอนบน ToolBar ซึ่งจะได้รูป ดังที่แสดง

จากภาพที่แสดง..จะเห็นว่าการ Duplicate จะทำการคลิกที่ไอคอนขึ้นมาอีก 4 อัน จากนั้นภาพจะทำการซ้อนวัตถุขึ้นมา ขั้นตอนที่เหลือก็เพียง แต่ทำการจัดวัตถุ ให้มีระยะห่างที่เท่ากัน เท่านั้นเอง แหมเกือบลืมบอกไปต้องนำวัตถุไปยัง Background นะครับ เพราะว่า..

เราจะได้ทำการ share ปุ่มครั้งเดียวให้ Page หลายหน้า/1 Background หากมีมากกว่านั้น ก็จะต้องทำการ Copy Object(Button) ไปไว้ยัง Object Browser เป็นตัวควบคุมวัตถุในชุดโปรแกรม อาจจะมองภาพ ให้เข้าใจง่ายขึ้น ก็เหมือนกับ Windows Exploer ใน windows 95/98 นะครับ

สังเกตว่า..หากทำการเลือก Menu (View) =>Object Browser จะทำการขึ้นมาดังรูปที่แสดง จากนั้นทำการเลือก Tab ที่เป็นรูปกระดาษซ้อนกัน จะเป็นการกำหนดเอาไว้ที่ Background แล้วจึงทำการ Paste (โดยอาจจะกด Ctrl+V) ก็ได้นะครับ ก็จะได้วัตถุนำมาไว้ในส่วนของ Background อย่าลืมว่าต้องคลิก เลือกที่ชื่อของ Background ก่อนอย่างในรูป ได้ทำการเลือกที่ Back1 จากนั้น..จึงทำการ Paste เมื่อเสร็จแล้ว.. ก็มาดูในหัวข้อถัดไปเลยนะครับ (การสลับ Foreground เป็น Background ให้ทำการกด F4) ในทางกลับกันก็เช่นกัน

วิธีการจัดเรียง..ทำการเลือกที่ Menu (Draw) แล้วทำการเลือก Align =>Horizontal Centers ซึ่งจะช่วยเกี่ยวกับการจัดเรียงวัตถุ แต่ยังไม่เสร็จนะครับ เพราะ ต้องมาทำการเลือกอีกอย่างที่ Menu (Tool)=>Spread=>Vertically ซึ่งจะช่วยให้รูปจัดเรียง ได้สวยงาม ดังที่ได้แสดง

จะสังเกตว่า..การจัดเรียงยังติดกัน ซึ่งไม่ค่อยจะสวยงามเท่าใดนัก ให้นำเมาส์มาทำการคลิกเลือกวัตถุ(Button 2-5) โดยการกด Shift ค้างไว้แล้วจากนั้น จึงค่อยทำการ Drag ค้างเอาไว้แล้วลากเพื่อเว้นระยะช่องไฟ พอสมควร แล้วจึงค่อยทำการ Select ทั้งหมด(Button1..5) ของวัตถุโดยการกด Shift ค้างไว้เหมือนเดิม

แล้วทำการเลือก... Menu (Tool)=>Spread=>Vertically เพื่อช่วยการจัดเรียงช่องไฟอีกครั้งหนึ่ง เป็นอันเสร็จขั้นตอนการจัดเรียงดังรูป ที่ได้จัดแสดงเอาไว้

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

จากรูปที่แสดง..การตั้งชื่อ (Name)เป็น Main(เป็นชื่อของ Button 1) Caption จะทำการตั้งเป็นชื่อเดียวกันก็ได้ หรือไม่ก็ได้นะครับ แต่ต้องตั้งนะครับ เพราะไม่เช่นนั้น ชื่อปุ่มจะไม่มี...ในตำแหน่งที่ 1 จะเป็นการกำหนด การ Link เช่นอาจจะทำการลิงค์ ไปยังหน้าอื่นๆ ซึ่งจะขอกล่าวในหัวข้อถัดไปในบทนี้ ส่วนในตำแหน่งที่ 2 จะเป็นเรื่องของการนำเอา Graphics..หรือการนำเอารูปภาพมาทำการแต่งที่ Button (อาจจะกล่าวง่ายๆก็คือ การนำเอารูปมาติดไว้ที่ปุ่มนั่นเอง)..ในส่วนนี้ ผมคงจะขออธิบายไปเลยก็แล้วกัน เพราะว่าอย่างแรก เราต้องการนำเอารูปต่อไปนี้มาใส่ไว้ในปุ่ม

ขั้นตอนมีดังนี้..คลิกที่ปุ่ม Graphics..

ตรง Button State : กรณีที่ไม่มีการใช้หรือกดปุ่มจะต้องทำการตั้งไว้ที่ Normal Graphic แล้วถึงทำการคลิกที่ Choose..

ในตำแหน่งที่..เห็นลูกศรชี้ (1)เราจะต้องทำการ Import รูปจาก Folder ที่ได้ทำการจัดเก็บรูปก่อน ในที่นี้ทำการเก็บเอาไว้ใน Drive D (ส่วนของรูปภาพสามารถทำการ Download จากภาพที่แสดงได้เลยนะครับ) ภาพจะต่างกันนะครับ ให้สังเกตโดยการนำ Mouseมาคลิกที่รูปภาพ และทำการเลือก Save as Picture

ซึ่งหากทำการ Save เก็บก็ให้ทำการนำมาไว้ที่ Folder ของ Exam1

คราวนี้..ลอง Import ภาพต่อกันเลยนะครับ โดยจะต้องทำการเลือกทีละภาพ แล้วทำการตอบ OK นะครับ แต่ให้สังเกตว่าสิ่งที่เราต้องการ ก็คือหากกรณีที่มีการคลิก จะมีไฟเกิดขึ้น ซึ่งหากกล่าวอีกอย่าง ก็คือ การอยู่ในสถานะ Invert (ตรงกันข้าม) จากนั้น..ถึงทำการเลือก

เปลี่ยนตำแหน่ง ซึ่งจากเดิมเป็น Normal Graphic เป็น Invert Graphic แล้วทำการจึงทำการคลิก OK ออกไป จากนั้นก็เลือก Button ต่อไปแล้วทำเช่นนี้ จนครบทุก Object ก็จะได้รูปดังนี้..( Object Properties จะช่วยในส่วนของการตั้งค่า Object )ในที่ ที่ต้องการคือ การตั้งค่า Button ให้ทำการคลิกที่ไอคอนนี้ จากนั้นจะทำการขึ้น..

สิ่งหนึ่ง..ที่สำคัญเกี่ยวกับรูปแบบของตัวอักษร ไม่ว่าจะเป็น รูปแบบอักษร ,ขนาดอักษร เป็นต้น เราจะต้องทำการกำหนด ซึ่งหากต้องการทำการกำหนดที่วัตถุ ก็เพียงแต่ทำการคลิกที่วัตถุ ยกตัวอย่างเช่น.. ปุ่มขนาดของข้อความที่แสดงบนปุ่มจะมีขนาดเล็ก หากต้องการเปลี่ยนแบบ และขนาดของอักษร โดยการ.. Menu(Text)=>Charecter..(F6) จากนั้นก็ทำการเลือกขนาด และแบบอักษร ได้ทันที..

มาต่อกันนะครับ..จากการกำหนดค่าของปุ่มที่เราจะทำการนำเอารูปมาใส่บนวัตถุ เมื่อทำเสร็จ จะได้รูป ดังนี้.

ที่เหลือ..ก็เพียงแต่มาทำให้รูปภาพที่อยู่บนวัตถุ (Button) ดูกลมกลืนกันเท่านั้นเอง
ปัญหา..มันเกิดขึ้นตรงที่ว่า หากสังเกตนะครับว่า วัตถุอาจจะไม่กลมกลืนกับ Background เพราะว่า

พื้นหลังไม่ได้เป็นสีดำ ดังนั้นจึงทำให้เกิดปัญหาอย่างงี้ขึ้น

ลักษณะของปุ่มเอง ไม่เข้ากับพื้น Background

สิ่งหนึ่ง..ที่ผมอยากแนะนำก็คือ ในเมื่อไม่สามารถปรับให้เข้ากับจอได้ วิธีแก้ไข..

เปลี่ยนสีพื้นของวัตถุ ไม่ว่าจะเป็นปุ่มหรือพื้นหลัง

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

วิธีการหาก..เราทำการเลือกแบบที่1 คงต้องย้อนกลับไปทำตั้งแต่เริ่มต้นครับ แต่หากเลือกวิธีที่สองก็สามารถ ปฏิบัติตามได้เลย สาเหตุหนึ่ง ทำไมผมถึงไม่เลือก Background ให้มันเหมาะกับการใช้งานของ Button ก็เพราะว่าต้องการให้ทราบปัญหาที่เกิดขึ้น เพื่อที่เราจะได้เรียนรู้วิธีการใช้งาน และการแก้ปัญหาไปในตัวครับ

ขั้นตอนการปฏิบัติ..ให้ทำการคลิกวัตถุ (Button) ทั้งหมดโดยการกด Shift ค้างไว้ จากนั้น จึงทำการคลิกไปที่ Color Tray

แล้วทำการ.. เลือกสีวัตถุเป็นสีดำ จากนั้นทำการคลิกที่ไอคอนที่เป็นเครื่องหมาย (-) เพื่อทำการ Close จากนั้น..ทำการคลิกที่
Line Palette..แล้วทำการเลือก NONE เพื่อกำหนดไม่ให้มีขอบเส้นของวัตถุ จากนั้นทำการคลิกที่..Object Properties อีกครั้ง (โดยจะต้องทำการคลิกวัตถุทั้งหมดเอาไว้ก่อน)

ในตำแหน่งที่ 1ให้ทำการเลือก None ซึ่งจากเดิมค่าจะเป็น Push Button เราไม่ต้องการค่า Border Style ให้มีเส้น และค่าในตำแหน่งที่ 2 ต้องการให้กลมกลืนกับวัตถุจึงทำการเลือก Transparent ในตำแหน่งที่3 สาเหตุที่ทำการเลือก Exclude from Tab Order เพราะว่า อย่างแรกคือ เราต้องการกำหนดค่าปุ่มโดยการใช้ Mouse คลิกอย่างเดียว และไม่ต้องการให้เกิดกรอบล้อมข้อความเอาไว้ เมื่อเวลาทำการคลิก..จากนั้น ก็สามารถทำการแสดงผลได้ โดยการกด F3 (เพื่อเปลี่ยนสถานะเป็น Author Level) ในการแสดงผลการทำงาน และหากต้องการกลับสภาวะเดิม ก็กด F3 อีกครั้ง...

เนื้อหาในบทนี้ ค่อนข้างมีรายละเอียดที่น่าสนใจมาก และเพื่อการนำเสนอที่เข้าใจง่าย จึงขอนำเสนอเป็น 2 บท โดยบทหน้า จะกล่าวในหัวข้อของ การทำ HyperLink และการทำ Effect ในการแสดงผล