16
Bài 13 : Addon firefox cn dùng và cách chnh sa css template Gii thiu các addon thông dng và hướng dẫn cài đặt 1. Addon measureit Dùng để đo kích thướt trên website cho ra kích thước dng px

Bai 12-addon-firefox-can-dung & chinh sua css template

Embed Size (px)

Citation preview

Page 1: Bai 12-addon-firefox-can-dung & chinh sua css template

Bài 13 : Addon firefox cần dùng và cách chỉnh sửa css template

Giới thiệu các addon thông dụng và hướng dẫn cài đặt

1. Addon measureit

Dùng để đo kích thướt trên website cho ra kích thước dạng px

Page 2: Bai 12-addon-firefox-can-dung & chinh sua css template

Khởi động firefox

Mở cây thước đo lên

Page 3: Bai 12-addon-firefox-can-dung & chinh sua css template
Page 4: Bai 12-addon-firefox-can-dung & chinh sua css template
Page 5: Bai 12-addon-firefox-can-dung & chinh sua css template

2. Add on Color Zilla

Dùng để hút màu trên web đưa ra mã màu mà mình hút được

Cài đặt tương tự trên phần 1

kết quả

Page 6: Bai 12-addon-firefox-can-dung & chinh sua css template

Ví dụ: Lấy mã màu trên google

Page 7: Bai 12-addon-firefox-can-dung & chinh sua css template

Kết quả Ta được #E58a08

Hoặc ta có thể sử dụng tool Color Cop củng có chức năng tương tự như trên

Page 8: Bai 12-addon-firefox-can-dung & chinh sua css template

3. Addon web developer

Web Developer là một add-on nhỏ gọn, nhưng sẽ bổ sung cho bạn một thanh

công cụ nhiều tiện ích, tích hợp cùng trình duyệt, đặc biệt hữu dụng với các nhà

phát triển và thiết kế web. Đáng chú ý có:

* Trình biên tập HTML và chỉnh sửa/duyệt mã nguồn.

* Biên tập CSS.

…..

Page 9: Bai 12-addon-firefox-can-dung & chinh sua css template

Cài đặt tương tự như trên phần 1

Kết quả

Page 10: Bai 12-addon-firefox-can-dung & chinh sua css template

4. Notepad ++

Dùng để xem và chỉnh sửa code

Truy cập vào trang web http://notepad-plus-plus.org/ download về

Page 11: Bai 12-addon-firefox-can-dung & chinh sua css template

Tải về

Cài vô máy tính

Kết quả

Page 12: Bai 12-addon-firefox-can-dung & chinh sua css template
Page 13: Bai 12-addon-firefox-can-dung & chinh sua css template

5. Addon fireBug

Giúp ta có thể tìm kiếm những dòng code css dễ dàng

Cài đặt tương tự như phần 1

Dùng firebug kết hợp vớ các tool và addon giới thiệu bên trên để chỉnh sửa 1

template

Click phải lên website cần tìm code css chọn inspect Element with firebug

Page 14: Bai 12-addon-firefox-can-dung & chinh sua css template

Kết quả

Page 15: Bai 12-addon-firefox-can-dung & chinh sua css template

Ta vào đúng đường dẫn

Dùng notepad ++ Tìm đến dòng 1687 chỉnh sửa màu lại

Dùng công cụ color corp hoặc Add on Color Zillad ( phần trên)

Để lấy mã màu thay thế

Page 16: Bai 12-addon-firefox-can-dung & chinh sua css template

Kết quả