Chuyển đổi CSS3 trong Dreamweaver CS6

• Có Thể 17, 2024

Với việc bổ sung HTML5 và CSS3, các trang web tương tác đang trở thành mong đợi. Bây giờ, với Dreamweaver^R CS6 và bảng điều khiển Chuyển tiếp CSS mới, bạn có thể tạo hiệu ứng tương tác của riêng mình mà không cần phải viết bất kỳ mã nào. Đầu ra từ quá trình này chỉ là CSS3, không có JavaScript. Do đó, bạn không cần lo lắng nếu người xem đã bật JavaScript. Các hiệu ứng chuyển đổi được tạo bởi Dreamweaver có thể phát trong bất kỳ trình duyệt web hiện đại nào.

Chúng ta hãy xem việc tạo ra các chuyển tiếp tương tác của chúng ta dễ dàng như thế nào. Việc chuyển đổi có thể được áp dụng cho bất kỳ lớp, ID hoặc phần tử CSS nào. Tất cả những gì chúng ta cần làm là đặt các giá trị trong bảng Chuyển tiếp CSS.

1. Bước đầu tiên của chúng tôi là chọn thành phần mà chúng tôi muốn áp dụng chuyển đổi. Trong ví dụ của chúng tôi, nó sẽ là một liên kết menu.
   
   
2. Nhấp vào Window - CSS Transitions để mở bảng điều khiển.
   
   
3. Trong bảng Chuyển tiếp CSS, nhấp vào dấu Plus để thêm chuyển đổi.
   
   
4. Trong hộp thoại Chuyển đổi mới, chúng ta có thể sử dụng menu Quy tắc mục tiêu để chọn từ các cài đặt trước hoặc nhập tên riêng của chúng tôi cho quá trình chuyển đổi. Hãy nhập tên .morph.
   
   
5. Tiếp theo chúng ta cần chọn hành động sẽ kích hoạt quá trình chuyển đổi. Từ menu Transition On, chọn Hover để quá trình chuyển đổi sẽ kích hoạt khi chúng ta đặt chuột trên liên kết. Các lựa chọn khác bao gồm: hoạt động, kiểm tra, vô hiệu hóa, kích hoạt, tập trung, di chuột, không xác định và mục tiêu.
   
   
6. Đối với Tùy chọn Menu, chúng tôi có hai lựa chọn. Hãy chọn cái đầu tiên.
   
   Sử dụng cùng một chuyển đổi cho tất cả các thuộc tính
   Sử dụng một chuyển tiếp khác nhau cho mỗi tài sản
   
   
7. Đối với Thời lượng và Độ trễ của quá trình chuyển đổi, chúng ta có thể sử dụng Giây hoặc Mili giây. Hãy đặt Thời lượng thành 1 giây và Độ trễ thành 0,05 giây.
   
   
8. Đối với chức năng thời gian, chúng tôi có một số lựa chọn nới lỏng. Hãy chọn Dễ ra.
   
   
9. Để thêm Thuộc tính CSS, nhấp vào dấu Plus và chọn một từ danh sách bật lên. Hãy chọn Màu nền.
   
   
10. Khi chúng tôi đã chọn Thuộc tính, chúng tôi có thể đặt Giá trị cuối cho quá trình chuyển đổi. Tùy thuộc vào Thuộc tính mà chúng tôi đã chọn, menu Giá trị cuối sẽ cung cấp cho chúng tôi menu tương ứng cho Thuộc tính đó. Đối với Màu nền, chúng ta sẽ có Bộ chọn màu. Nếu chúng ta thêm thuộc tính Font-weight, chúng ta sẽ có một menu các trọng số đặt trước.
    
    
11. Cuối cùng, chúng ta cần chọn Nơi tạo Transition. Lựa chọn của chúng tôi là Tài liệu này chỉ hoặc Tệp Phong cách Mới. Hãy sử dụng đầu tiên.
    
    

Khi chúng tôi nhấp vào nút Tạo chuyển đổi, chúng tôi có thể thấy rằng quá trình chuyển đổi đã được liệt kê trong bảng Chuyển đổi CSS, cho biết rằng quá trình chuyển đổi hình thái sẽ được kích hoạt bởi hành động di chuột và được áp dụng cho mục tiêu a.morph.

Nếu chúng ta kiểm tra chế độ xem mã, chúng ta sẽ thấy lớp hình thái đã được thêm vào liên kết.

Khi chúng tôi đưa chuột qua liên kết trong chế độ xem Trực tiếp, màu nền sẽ thay đổi.

Nhưng nếu chúng ta cần chỉnh sửa quá trình chuyển đổi thì sao? Chúng tôi có thể làm điều này thông qua bảng điều khiển Chuyển tiếp CSS.

1. Chọn chuyển tiếp a.morph và biểu tượng Chỉnh sửa sẽ hoạt động (biểu tượng bút chì).
   
   
2. Nhấp vào biểu tượng Chỉnh sửa để mở hộp thoại Chỉnh sửa Chuyển tiếp. Ở đây chúng ta có thể thay đổi các giá trị khi cần hoặc thêm Thuộc tính và Giá trị cuối mới.
   
   

Bây giờ chúng ta đã tạo chuyển đổi hình thái, chúng ta có thể dễ dàng áp dụng nó cho các yếu tố khác vì nó hiện có sẵn từ menu Quy tắc mục tiêu.

* Adobe cung cấp một bản sao của phần mềm này cho tôi để xem xét.

Bản quyền 2018 Adobe Systems Incorporated. Đã đăng ký Bản quyền. (Các) ảnh chụp màn hình sản phẩm Adobe được in lại với sự cho phép của Adobe Systems Incorporated. Adobe, Photoshop, Album Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Đóng góp, Cap activate, Flash Catalyst và Flash Paper là / là [a] nhãn hiệu đã đăng ký [s] hoặc nhãn hiệu [s] của Adobe Systems Incorporated tại Hoa Kỳ và / hoặc các quốc gia khác.

Video HướNg DẫN: Thiết kế web - 02 Làm chủ giao diện trong Dreamweaver (Có Thể 2024).