Phần tử và bảng thuộc tính

Một trang là một cây phần tử: khung chứa khung, bên trong là chữ, ảnh, nút. Bạn dựng trang bằng cách kéo phần tử vào, rồi sửa chúng trong bảng thuộc tính bên phải.

Bảng phần tử

Mục Phần tử (en: Elements) trên thanh công cụ mở bảng phần tử. Nó chia thành các nhóm:

Nhóm	en	Bên trong có gì
Bố cục	Layout	Khung chứa, hàng, cột — thứ mọi thứ khác nằm bên trong
Cơ bản	Basic	Tiêu đề, văn bản, nút, biểu tượng, đường phân cách, danh sách
Đa phương tiện	Media	Hình ảnh, video
Điều hướng	Navigation	Menu, menu icon, thanh điều hướng
Nhập liệu	Input	Các ô nhập của biểu mẫu
Nâng cao & Nhúng	Advanced & Embeds	Mã tuỳ chỉnh, nội dung nhúng

Mục Cửa hàng (en: Store) trên thanh công cụ là một bảng riêng, chứa các phần tử lấy dữ liệu từ danh mục của bạn: Sản phẩm, Bộ sưu tập, Bài viết, Chuyên mục blog, Gian hàng (giỏ hàng, bộ lọc, và những thứ tương tự). Xem Danh sách tự đổ dữ liệu.

Ô tìm kiếm ở đầu bảng lọc theo tên, nhanh hơn là cuộn.

Đưa một phần tử lên trang

Kéo thẻ của nó từ bảng vào canvas. Trong lúc kéo, một vạch chỉ báo hiện ra cho biết nó sẽ rơi vào đâu — trước, sau, hay bên trong khung bạn đang rê qua.

Gần như mọi thứ đều phải nằm bên trong một khung chứa. Nếu bạn định xếp vài thứ cạnh nhau, hãy thả một khung Bố cục trước rồi bỏ chúng vào trong; đó là cách duy nhất để chúng cùng chịu chung một khoảng cách, một nền, một khoảng đệm.

Chọn một phần tử

Bấm vào nó. Đường viền chọn hiện ra kèm một thanh công cụ nhỏ, và bảng bên phải đổi sang các tuỳ chọn của nó.

Khi chúng nằm lồng nhau, cú bấm đầu tiên thường trúng phần tử ở trong cùng. Hai cách đi ngược ra ngoài:

• ⌘ ↑ chọn phần tử cha. Bấm tiếp để đi tiếp ra ngoài. (Trên Windows/Linux dùng Ctrl.)
• Mở Lớp (en: Layer) trên thanh công cụ và bấm thẳng vào nhánh bạn muốn. Cây lớp là cách đáng tin cậy nhất khi trang đã sâu.

Esc bỏ chọn.

Bảng thuộc tính

Bảng bên phải hiện những gì sửa được trên phần tử đang chọn, gom thành từng nhóm: bố cục, khoảng cách, chữ, nền, viền, đổ bóng, và các nhóm riêng của phần tử đó.

Vài thói quen đáng có:

Liên kết / bỏ liên kết các cạnh. Khoảng đệm và bo góc có một nút bật tắt giữa "cả bốn cạnh như nhau" và "từng cạnh một". Bỏ liên kết khi bạn cần một bên khác các bên còn lại.

"Không đặt" khác với 0. Với chiều rộng/cao tối thiểu và tối đa, Không đặt nghĩa là phần tử tự quyết; 0 là một con số bạn áp lên nó. Hai thứ đó cho kết quả khác nhau.

Vừa nội dung, Lấp đầy khung, Tùy chỉnh. Ba cách một phần tử quyết định bề rộng của nó. Vừa nội dung co lại theo nội dung; Lấp đầy khung giãn ra hết chỗ trống; Tùy chỉnh là con số bạn tự gõ.

Biểu thức calc. Ở chỗ cần một phép tính, bạn gõ được biểu thức CSS calc. Nó chỉ nhận độ dài, + - * /, var() và dấu ngoặc; gõ sai thì ô nói ngay chứ không lưu một giá trị không chạy được.

Một phần tử có thể làm việc gì đó

Nhiều phần tử có nhóm hành động: Khi nhấp (en: On click) làm gì. Danh sách có sẵn gồm mở một liên kết, mở một trang, mở/đóng giỏ hàng, đi tới thanh toán, bật tắt menu, chuyển tab, và các thao tác trên dòng giỏ hàng.

Nếu bạn chọn một hành động chưa dùng được trên trang đã xuất bản, trình chỉnh sửa nói thẳng thay vì để bạn tự phát hiện sau khi lên sóng — ví dụ "Đã lưu, nhưng phần tử này chưa hiển thị dạng liên kết nên không tới được đích."

Phím tắt đáng nhớ

Việc	Phím
Nhân bản	⌘ D
Xoá	Del
Đổi chỗ trong khung chứa	↑ ↓ ← →
Sao chép / Cắt / Dán	⌘ C · ⌘ X · ⌘ V
Hoàn tác / Làm lại	⌘ Z · ⇧ ⌘ Z
Ẩn/hiện bảng thuộc tính	⌘ \

Mũi tên đổi chỗ theo trục của khung chứa: ← → khi xếp ngang, ↑ ↓ khi xếp dọc.

Tiếp theo

Phần lớn thuộc tính bạn vừa chỉnh được lưu riêng cho từng khổ màn hình. Đó là Sửa riêng cho điện thoại, và là điều nên đọc trước khi bạn chỉnh nhiều.