Bạn là một nhà kinh doanh hoặc bạn chỉ là một nhân viên quản trị mạng như tôi (không biết gì về web). Bạn có một website cần duy trì, và lẽ dĩ nhiên việc cập nhật thông tin cũng như chỉnh sửa một vài điểm liên quan đến thiết kế sẽ khiến bạn nhức đầu bởi phải thường xuyên liên lạc với web designer. Đôi khi những chỉnh sửa của web designer không hề đúng ý muốn của bạn, vậy chi bằng hãy tự chỉnh sửa.
Câu hỏi đặt ra là chúng ta không phải là những nhà thiết kế web chuyên nghiệp? Bạn hãy cứ yên tâm vì giờ đây chỉ với một extension gắn với Firefox tên là FireBug, bạn sẽ có thể bay bổng cùng các mẫu thiết kế web
Giới thiệu:
Di chuyển đến một trang mà bạn muốn chỉnh sửa và kích hoạt FireBug bằng cách nhấn nút F12. Bạn sẽ thấy một công cụ được mở ra ở nửa dưới cửa sổ trình duyệt với tổng cộng 6 tab: “Console”, “HTML”, “CSS”, “Script”, “Dom”, và “Net”. Tôi sẽ giới thiệu sơ cho bạn về 2 tab: “HTML” và “CSS”.
Tab CSS Chỉnh sửa các thuộc tính và giá trị thuộc tính
Để thay đổi thuộc tính và giá trị của thuộc tính, chỉ cần nhấn vào nó và chỉnh sửa mã theo ý muốn. Kết quả sẽ lập tức được thể hiện ở phần cửa sổ trình duyệt phía trên
Xem trước màu sắc và hình ảnh trong CSS
FireBug cho phép người dùng không chuyên nghiệp như tôi dễ dàng hiểu về CSS bằng cách thể hiện một cách trực quan mỗi thuộc tính
Dễ dàng chỉ ra chính xác vị trí, padding và margin
Công cụ hỗ trợ tuyệt vời cho việc thay đổi các giá trị số. Chỉ đơn giản là nhấn vào các giá trị số mà bạn muốn thay đổi và thay đổi chúng – xem kết quả ngay lập tức và chỉnh lại nếu cần
Hãy để FireBug chỉ cho bạn thuộc tính nào có thể được sử dụng
Bôi đen thuộc tính và sử dụng phím mũi tên lên/xuống để liệt kê tất cả các thuộc tính CSS được phép theo thứ tự alphabet
Tab HTML Xem thuộc tính của từng đối tượng box (margin, border, padding, và content)
Mở tab HTML và nhấn nút “Inspect” . Giờ đây bạn có thể di chuyển chuột lên các thành phần thuộc trang web và quan sát những thông số sau:
Mỗi thành phần của trang sẽ được đóng trong một khung xanh
Vùng mã nguồn tương ứng sẽ được tô màu xanh (tab HTML)
Thuộc tính của box sẽ được hiển thị trực quan (tab Layout)
Chỉnh sửa các giá trị thuộc tính trong tab Layout và quan sát các thay đổi ngay lập tức
Như bạn thấy đấy, chỉ với một công cụ nhỏ gọn như FireBug thì giờ đây bạn có thể tạo và tùy biến phần thiết kế của trang web thậm chí ngay cả khi bạn hoàn toàn không có một tí kiến thức nào về thiết kế wen. Dĩ nhiên, FireBug có thể làm được nhiều điều hơn những gì tôi giới thiệu với bạn trong bài viết này. Bạn có thể [Chỉ có thành viên mới thấy links này. ] để tham khảo thêm về FireBug
Tải Firebug tại đây: [Chỉ có thành viên mới thấy links này. ]
27/02/2009, 10:02 AM
FireBug - Công cụ thiết kế web dành cho người không chuyên 
Bài viết cùng chủ đề:
Linear Mode
