Tổng quan trình soạn
Làm quen với ba chế độ làm việc, cách chọn một phần tử và cách đọc cây cấu trúc DOM bên trái.
1.Ba chế độ làm việc: Thiết kế · Xem trước · Mã nguồn
Thanh trên cùng của vùng làm việc có ba tab: Thiết kế (kéo-thả, chọn phần tử, chỉnh thuộc tính trực quan), Xem trước (chạy thử trang như trình duyệt thật), và Mã nguồn (đọc/sửa trực tiếp HTML, CSS, JS).
Cột trái là thư viện khối và cây cấu trúc DOM của trang; cột phải là thanh thuộc tính, nơi hiện thuộc tính của phần tử đang chọn. Panel dưới cùng là vùng mã nguồn, có thể thu gọn hoặc phóng to toàn màn hình.
2.Chọn phần tử và sửa trong thanh thuộc tính
Bấm vào một phần tử trên canvas (hoặc dòng tương ứng trong cây DOM bên trái) để chọn nó. Phần tử được chọn sẽ hiện viền xanh và thanh thuộc tính bên phải đổi sang hiện đúng thuộc tính của nó (thẻ, id, class, nội dung chữ, thuộc tính tùy chỉnh...).
Sửa trực tiếp trong các ô của thanh thuộc tính: thay đổi áp dụng ngay vào canvas, không cần bấm lưu riêng cho từng ô.
3.Cây cấu trúc DOM và công tắc "Thuộc tính"
Cây DOM bên trái liệt kê toàn bộ phần tử của trang theo đúng thứ tự lồng nhau. Bật công tắc "Thuộc tính" ở đầu mục "Cấu trúc DOM" để hiện thêm các thuộc tính quan trọng của từng thẻ (class, id, và các thuộc tính đặc thù theo loại thẻ) ngay dưới tên thẻ, không cần chọn từng phần tử để xem.
Có thể kéo một khối từ thư viện bên trái thả vào canvas hoặc vào đúng vị trí trong cây DOM để chèn phần tử mới.
