Kể từ khi xuất hiện phiên bản CS6, Adobe đã triển khai trong Photoshop một tùy chọn rất hữu ích để bố trí và phát triển các thiết kế web. Hoạt động là rất dễ và trên tất cả nhanh. Thông qua ứng dụng, chúng tôi sẽ có thể tạo các bảng kiểu xếp tầng lấy các hình dạng và lớp văn bản tham khảo. Quy trình đơn giản như phát triển mô hình của chúng tôi, sao chép phiên bản mã của các phần tử của chúng tôi và dán nó vào trang tính của chúng tôi.
Đó là một lựa chọn rất tốt, đặc biệt là vì nó cho phép chúng tôi xem sự phát triển của thiết kế của mình bằng hình ảnh và trong thời gian thực. Dưới đây là một số mẹo để sử dụng tùy chọn này và nhận được hiệu suất tối đa:
Cố gắng chính xác
Để có được kết quả chuyên nghiệp, bạn nên tính đến các phép đo và tỷ lệ trang web của mình. Đặt các giá trị Chiều rộng và Chiều cao của mẫu bạn đang thiết kế và áp dụng chúng vào mô hình của bạn. Khi bạn sao chép mã CSS, chúng tôi sẽ đặt mỗi phần tử làm tham chiếu khoảng cách tính bằng pixel giữa mỗi phần tử và các cạnh của canvas. Ngoài ra, hãy tính đến kích thước và lý do phân cấp mà bạn sẽ đưa vào thiết kế của mình, bao gồm sự liên kết của từng phần tử và khoảng cách giữa mỗi phần tử để cung cấp khả năng đọc tối đa cho người dùng của bạn.
Việc sử dụng các hướng dẫn và các quy tắc của giao diện sẽ giúp bạn xây dựng một mẫu gọn gàng, sạch sẽ với tất cả các yếu tố của nó được căn chỉnh hoàn hảo.
Định cấu hình tất cả các đặc điểm của từng phần tử
Tùy chọn sao chép mã CSS cung cấp cho chúng tôi khả năng thiết kế trang web của mình với độ chính xác cao bằng cách sử dụng các lớp hình dạng và văn bản. Nội dung của mỗi lớp sẽ được sao chép vào Clipboard và chúng ta có thể nhanh chóng dán nó vào style sheet của mình. Từ các lớp hình dạng, nắm bắt các giá trị của các cài đặt sau:
- Kích
- Posición
- Màu sắc nét
- Tô màu (bao gồm cả gradient)
- Bóng đổ
Từ các lớp văn bản, chúng ta có thể nắm bắt các giá trị sau:
- Họ phông chữ
- Cỡ chữ
- Độ dày phông chữ
- Chiều cao giữa các dòng
- Gạch chân
- Thông qua
- Chỉ số trên
- Chỉ số phụ
- Căn chỉnh văn bản
Hãy ghi nhớ điều đó và đặt từng giá trị này để cung cấp phong cách bạn đang tìm kiếm.
Làm việc với các nhóm lớp
Chức năng này dịch công việc của chúng tôi được tổ chức theo hai loại lớp, một lớp cho mỗi nhóm tập hợp các lớp hình dạng hoặc văn bản lại với nhau và một lớp cho mỗi lớp thuộc một trong các loại này. Mỗi lớp nhóm sẽ đại diện cho một phần tử div cha sẽ chứa các phần tử div con và điều đó sẽ tương ứng với các lớp được chèn trong mỗi nhóm. Bằng cách này, các giá trị trên cùng và bên trái của các vùng chứa con sẽ được đặt bằng cách tham chiếu đến vùng chứa mẹ. Bạn nên nhớ rằng tùy chọn này không khả dụng với các đối tượng thông minh và nó sẽ không thể áp dụng cho nhiều lớp đồng thời trừ khi chúng được nhóm lại.
Các bước chuyển đổi
Khi bạn đã tạo mô hình của mình, bạn đã tùy chỉnh từng phần tử và bạn đã nhóm chúng theo nhóm, bạn sẽ chỉ phải làm theo các bước sau:
- Đi tới bảng điều khiển lớp và chọn một trong hai tùy chọn sau:
- Nhấp chuột phải vào hình dạng hoặc lớp văn bản hoặc một nhóm lớp và chọn Sao chép CSS trong menu ngữ cảnh.
- Chọn một hình dạng hoặc lớp văn bản hoặc một nhóm các lớp, sau đó chọn tùy chọn Sao chép CSS trong menu bảng điều khiển Lớp.
-
Dán mã vào tài liệu biểu định kiểu của bạn và áp dụng mã đó cho các trang của bạn qua html5.
