การเปลี่ยน CSS3 ใน Dreamweaver CS6
ด้วยการเพิ่ม HTML5 และ CSS3 เว็บไซต์เชิงโต้ตอบกำลังกลายเป็นที่คาดหวัง ตอนนี้กับ DreamweaverR CS6 และแผงการเปลี่ยน CSS ใหม่คุณสามารถสร้างเอฟเฟกต์โต้ตอบของคุณเองโดยไม่จำเป็นต้องเขียนโค้ดใด ๆ ผลลัพธ์จากกระบวนการนี้เป็น CSS3 เท่านั้นโดยไม่มี JavaScript ดังนั้นคุณไม่ต้องกังวลหากผู้ดูเปิดใช้งาน JavaScript การเปลี่ยนแปลงที่สร้างขึ้นโดย Dreamweaver สามารถเล่นได้ในเว็บเบราว์เซอร์ที่ทันสมัย

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

  1. ขั้นตอนแรกของเราคือการเลือกองค์ประกอบที่เราต้องการใช้การเปลี่ยนแปลง ในตัวอย่างของเรามันจะเป็นลิงค์เมนู

  2. คลิกหน้าต่าง - การเปลี่ยน CSS เพื่อเปิดพาเนล

  3. ในแผงการเปลี่ยน CSS ให้คลิกที่เครื่องหมายบวกเพื่อเพิ่มการเปลี่ยนแปลง

  4. ในกล่องโต้ตอบการเปลี่ยนแปลงใหม่เราสามารถใช้เมนูกฎเป้าหมายเพื่อเลือกจากค่าที่ตั้งไว้ล่วงหน้าหรือพิมพ์ในชื่อของเราเองสำหรับการเปลี่ยนแปลง ลองพิมพ์ชื่อ. morph

  5. ต่อไปเราต้องเลือกการกระทำที่จะทำให้เกิดการเปลี่ยนแปลง จากเมนู Transition On เลือก Hover เพื่อให้การเปลี่ยนแปลงเกิดขึ้นเมื่อเราวางเมาส์เหนือลิงก์ ตัวเลือกอื่น ๆ ได้แก่ : ใช้งาน, ตรวจสอบ, ปิดใช้งาน, เปิดใช้งาน, โฟกัส, โฮเวอร์, ไม่ได้กำหนดและเป้าหมาย

  6. สำหรับตัวเลือกเมนูเรามีสองทางเลือก เลือกก่อน

    ใช้การเปลี่ยนแปลงเดียวกันสำหรับคุณสมบัติทั้งหมด
    ใช้การเปลี่ยนแปลงที่แตกต่างกันสำหรับแต่ละคุณสมบัติ

  7. สำหรับช่วงเวลาและความล่าช้าของการเปลี่ยนแปลงเราสามารถใช้วินาทีหรือมิลลิวินาที มาตั้งค่า Duration เป็น 1 วินาทีและ Delay เป็น .05 วินาที

  8. สำหรับฟังก์ชั่นการจับเวลาเรามีตัวเลือกการผ่อนคลายหลายอย่าง มาเลือก Ease Out กันเถอะ

  9. ในการเพิ่มคุณสมบัติ CSS ให้คลิกที่เครื่องหมายบวกและเลือกจากรายการป๊อปอัพ เลือกพื้นหลัง - สี

  10. เมื่อเราเลือกอสังหาริมทรัพย์เราสามารถตั้งค่าสิ้นสุดสำหรับการเปลี่ยนแปลง ขึ้นอยู่กับคุณสมบัติที่เราเลือกไว้เมนูค่าสิ้นสุดจะให้เมนูที่สอดคล้องกับคุณสมบัตินั้น สำหรับพื้นหลัง - สีเราได้ตัวเลือกสี หากเราเพิ่มคุณสมบัติ Font-Weight เราจะได้เมนูน้ำหนักที่ตั้งไว้ล่วงหน้า

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

เมื่อเราคลิกปุ่มสร้างการเปลี่ยนเราจะเห็นว่าการเปลี่ยนแปลงได้รับการจดทะเบียนในแผงการเปลี่ยน CSS ซึ่งบ่งชี้ว่าการเปลี่ยน morph จะถูกเรียกใช้โดยการดำเนินการโฮเวอร์และนำไปใช้กับเป้าหมาย a.morph

หากเราตรวจสอบมุมมองโค้ดเราจะเห็นว่าคลาส morph ได้ถูกเพิ่มในลิงค์

เมื่อเราเลื่อนเม้าส์ไปที่ลิงค์ใน Live view สีพื้นหลังจะเปลี่ยนไป

แต่ถ้าเราต้องการแก้ไขการเปลี่ยนแปลง เราสามารถทำได้ผ่านแผงการเปลี่ยน CSS

  1. เลือกการเปลี่ยนแปลง a.morph และไอคอนแก้ไขจะเปิดใช้งาน (ไอคอนดินสอ)

  2. คลิกที่ไอคอนแก้ไขเพื่อเปิดกล่องโต้ตอบแก้ไขการเปลี่ยน ที่นี่เราสามารถเปลี่ยนค่าได้ตามต้องการหรือเพิ่มคุณสมบัติใหม่และมูลค่าสุดท้าย

ตอนนี้เราได้สร้างการเปลี่ยนแปลง morph เราสามารถนำไปใช้กับองค์ประกอบอื่น ๆ ได้อย่างง่ายดายเพราะตอนนี้สามารถใช้งานได้จากเมนูกฎเป้าหมาย

* Adobe มอบสำเนาของซอฟต์แวร์นี้ให้ฉันเพื่อการตรวจสอบ

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, สะพาน, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ


คำแนะนำวิดีโอ: วิธีการตกแต่งและเปลี่ยน Style ของ spry menu bar โดยใช้ CSS (มีนาคม 2024).