XD đầu tiên của bạn sang HTML và CSS xuất
Dễ dàng chuyển đổi Adobe XD thành HTML và CSS với sự hỗ trợ cho nhiều trang, kiểu tùy chỉnh và các yếu tố động. Bạn có thể sử dụng thiết kế XD hiện tại hoặc bất kỳ mẫu XD nào được tìm thấy trực tuyến để bắt đầu.
TIP: Learn How to use Export Kit with XD and start to experience awesome in seconds.
Bạn có thể xuất (a) một bản vẽ duy nhất, hoặc (b) tất cả các bảng nghệ thuật dưới dạng các trang HTML riêng lẻ. Nếu bạn xuất một bộ đồ đơn thì bạn sẽ nhận được một tệp IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.6 riêng lẻ cho mỗi lần xuất. Nếu bạn xuất tất cả các bảng nghệ thuật, bạn sẽ nhận được các tệp IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.7 riêng lẻ với một tệp IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.6 để lưu trữ dễ dàng.
Một cái nhìn sâu hơn về xuất khẩu HTML và CSS
Adobe XD đến HTML và CSS của bạn sẽ phản ánh thiết kế tài liệu XD của bạn để duy trì mối quan hệ cha mẹ/con cái của các lớp, cùng với việc ánh xạ các thuộc tính XD đến phần tử HTML chính xác.
Các tệp HTML và CSS đã xuất được sạch sẽ, dễ đọc và sẵn sàng sử dụng ngay lập tức. Tên của các phần tử trong mã là phản ánh quy ước đặt tên của tài liệu XD của bạn.
Văn bản, phông chữ và phạm vi phong cách
Bộ xuất khẩu có hỗ trợ tuyệt vời cho các kiểm lâm viên tùy chỉnh trong các lớp văn bản XD. Sử dụng các thẻ văn bản và thẻ IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.9, bạn có thể hiển thị các phạm vi kiểu hoàn chỉnh của mình.
EXAMPLE: ${p} my custom text
Phạm vi kiểu cho phép bạn có nhiều kiểu phông chữ được áp dụng cho từng từ hoặc ký tự trong cùng một đoạn; Không cần phải tạo một yếu tố văn bản mới cho mỗi kiểu.
HTML Web Forms và Input Elements
Tạo các biểu mẫu web HTML không giới hạn với các thành phần đầu vào động trực tiếp từ thiết kế XD của bạn bằng thẻ TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules. 0 của chúng tôi. Các biểu mẫu web cho phép người dùng cung cấp thông tin sau đó có thể được xử lý bởi khách hàng hoặc máy chủ back-end.
EXAMPLE: ${form|post:email_form.php} my contact form
Tất cả các biểu mẫu web yêu cầu các yếu tố đầu vào để xử lý dữ liệu trên máy chủ. Bạn có thể thêm các mục nhập không giới hạn vào dạng web của bạn bằng thẻ đầu vào của chúng tôi.
IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules.Thẻ đầu vào hoạt động với các thẻ biểu mẫu để cung cấp hỗ trợ tùy chỉnh cho các biểu mẫu web. Thẻ đầu vào sẽ cho phép bạn xác định nhiều yếu tố đầu vào và xuất chúng trực tiếp trong trang web HTML5 của bạn.
- Hộp kiểm
- tập tin
- ẩn giấu
- mật khẩu mở khóa
- Đài
- cài lại
- chữ
- Textarea
- Gửi đi
Kiểu phần tử đầu vào CSS tùy chỉnh
Kiểu lớp CSS áp dụng trực tiếp cho bất kỳ phần tử nào bất kể loại lớp XD. Điều này giúp bạn dễ dàng tùy chỉnh đầy đủ đầu ra cuối cùng của tất cả các dự án để phù hợp với bất kỳ đặc điểm kỹ thuật thiết kế nào.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
CSS và JavaScript Bopup Lights
Tạo nội dung động tùy chỉnh như cửa sổ bật lên và hộp đèn JavaScript trực tiếp bằng các lớp XD của bạn cùng với các thẻ TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules. 1 và TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules. 2. Bạn có thể tạo bất kỳ phần tử HTML gốc hoặc tập lệnh thời gian chạy trong XD.
TIP: Learn more about Class Tag and Code Tag to create native HTML elements.
Bạn có thể tùy chỉnh thêm đầu ra của mình với bất kỳ phần tử HTML5 nào bằng thẻ lớp của chúng tôi với các thư mục của bạn. Tất cả các yếu tố hỗ trợ các thuộc tính tùy chỉnh để bạn có thể ánh xạ chúng theo bất kỳ cách nào bạn muốn.
IMPORTANT: When creating empty elements (eg. <div />) with Class Tag, you must include an empty argument (eg. ${class|div: }).Bạn có thể tạo bất kỳ yếu tố nào bao gồm iframe, canvas và đối tượng, sau đây chỉ là ví dụ. & NBSP; Lưu ý rằng thẻ lớp chỉ hoạt động với các thư mục.
Thẻ HTML | Cách sử dụng |
| $ {class | div:} | |
| $ {class | div:} |
| $ {class | div:} |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} | |
| $ {class | div:} |
| $ {class | div:} | |
| $ {class | div:} |
$ {class | img:}
$ {class | span:}
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
$ {class | form: action = xông/path/to/script.php,}
EXAMPLE: ${p} my custom text0$ {class | input: type = Hồi textarea}
EXAMPLE: ${p} my custom text1$ {class | p:}
EXAMPLE: ${p} my custom text2EXAMPLE: ${p} my custom text3$ A
$ {class | textarea: hàng = 5 5 ″}
$ {class | ul: class = Menu Menu NAV}
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.EXAMPLE: ${p} my custom text5
$ {class | ol: class = Menu Menu Footer}
$ {class | li: class = xông Nav nav-item,}
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.EXAMPLE: ${p} my custom text5
Trình chiếu ảnh JavaScript
Tùy thuộc vào nhu cầu trình chiếu của bạn, bạn có thể muốn Google Google miễn phí slideshow slideshow script và tải xuống một tập lệnh trình chiếu JavaScript miễn phí để bạn bắt đầu với trình chiếu của mình.
EXAMPLE: ${p} my custom text8Việc thiết lập tệp JavaScript của bạn rất quan trọng vì các phần tử HTML mà tập lệnh tìm kiếm, là các phần tử lớp XD giống nhau mà bạn được yêu cầu để tạo. Bộ xuất khẩu giúp dễ dàng ánh xạ các phần tử JavaScript của bạn sang bất kỳ phần tử lớp XD nào, bạn chỉ cần biết tên hoặc lớp để đưa vào PSD của bạn.
Menu điều hướng trang web
Menu NAV là một nhóm các liên kết neo được sử dụng để hướng người dùng đến cả hai trang bên trong và bên ngoài. Các menu NAV có liên quan đến tất cả các thiết kế phổ biến cho cả trang web và ứng dụng.
EXAMPLE: ${p} my custom text9EXAMPLE: ${form|post:email_form.php} my contact form0EXAMPLE: ${form|post:email_form.php} my contact form1EXAMPLE: ${form|post:email_form.php} my contact form2
CSS lơ lửng menu
Thêm tính tương tác với các menu điều hướng với các kiểu và hiệu ứng CSS tùy chỉnh. Mỗi mục menu có thể sử dụng lại cùng kiểu CSS hoặc có kiểu riêng cho các mục tùy chỉnh.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
Các menu cố định và tĩnh
Kiểm soát xuất XD sang HTML của bạn với các đối tượng động như menu cố định và tĩnh. Bạn có thể cá nhân hóa giao diện hoàn chỉnh của dự án của bạn để cung cấp trải nghiệm người dùng tốt nhất.
EXAMPLE: ${p} my custom text5
Trang web Mẫu Wireframe
Khám phá tiềm năng sáng tạo của bạn và tìm hiểu cách chuyển đổi thiết kế hiện tại của bạn thành 100 thiết kế phụ với một vài bước đơn giản. Với một thiết kế duy nhất, bạn có thể cung cấp nhiều bố cục theo chủ đề cho cả khách hàng và người dùng cuối.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
Thư viện CSS và JavaScript bên ngoài
Tải bất kỳ CSS hoặc thư viện JavaScript bên ngoài trực tiếp vào XD sang HTML xuất, để bao gồm tất cả các chức năng và hiệu ứng. Bạn có thể sử dụng lại bất kỳ phương pháp kiểu CSS hoặc JavaScript nào theo yêu cầu trong dự án của bạn để nâng cao trải nghiệm của người dùng cuối.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.EXAMPLE: ${p} my custom text5
Tối ưu hóa hình ảnh có thể tái sử dụng
Dự án của bạn có thể chứa hình ảnh lặp đi lặp lại mà bạn có thể không yêu cầu cho bản phát hành cuối cùng của bạn. Bạn có thể sử dụng lại hình ảnh theo yêu cầu với các kiểu CSS tùy chỉnh để lưu cả băng thông và kích thước dự án.
TIP: Learn more about Class Styles and Layer Styles to create custom run-time designs.
HTML và CSS đáp ứng
Tạo các trang web XD để phản hồi HTML5 và CSS3 bằng cách sử dụng bất kỳ tệp Adobe XD nào. Bạn có thể xác định nhiều kích thước màn hình để hỗ trợ bất kỳ số lượng thiết bị nào về máy tính để bàn, máy tính bảng và thiết bị di động.
Bạn có thể đặt kích thước màn hình thành bất kỳ kích thước tùy chỉnh nào, nhưng nhìn chung đây là một vài kích thước phổ biến:
- Mặc định (bắt buộc)
- 320 (di động)
- 768 (máy tính bảng)
- 1280 (máy tính để bàn)
Bộ xuất khẩu sẽ không cho rằng bạn muốn một phần tử ở một vị trí hoặc kích thước cụ thể khi bạn xuất màn hình CSS phản hồi của mình. Thiết kế của bạn chỉ là như vậy - thiết kế của bạn! Bộ xuất khẩu cho phép bạn tùy chỉnh từng màn hình đích để bạn có thể cá nhân hóa đầu ra của mình cho màn hình đó.
IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.1Mỗi thư mục màn hình CSS phản hồi cho phép bạn thay đổi giao diện và cảm nhận đầu ra của bạn để nhắm mục tiêu kích thước màn hình người dùng. Bạn có thể thay đổi kích thước phần tử, vị trí và hiệu ứng cho từng thư mục màn hình CSS riêng lẻ.
IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.2Chúng tôi khuyên bạn nên bắt đầu với kích thước màn hình đích đáp ứng TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules. 4 và TIP: Take care when adding layer names for Input items, the layer name will be used as the Input item name in the output. Learn more about Layer Naming Rules. 5 khi tạo các thư mục màn hình CSS. Điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian khi tạo thêm màn hình CSS.
IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.3IMPORTANT: The contents of the text layer will be used as the value of the input element when processing the form.4Các menu điều hướng đáp ứng
Tăng cường hơn nữa thiết kế đáp ứng của bạn với bố cục tùy chỉnh cho các menu điều hướng. Mỗi màn hình đáp ứng có thể chứa một thiết kế riêng lẻ với mã JavaScript, giúp dễ dàng thiết kế các menu di động và 4K.
EXAMPLE: ${p} my custom text5
Bố cục nghệ thuật đáp ứng
Bản cập nhật tháng 6 năm 2020 cho Lightning Storm có nhiều tính năng mới bao gồm hỗ trợ đáp ứng tốt hơn cho Artboards, thẻ $ {Global} và $ {RAW} mới cho tổ chức tốt hơn và hơn thế nữa.