Diễn đàn Đà KTVBenTre
Trang chủDiễn đànNghe nhạcTìm kiếmLiên hệ
 

:: Quên mật khẩu ::

927 Số bài - 47%
 
Admin
225 Số bài - 11%
 
lct90
196 Số bài - 10%
 
thanhproit
178 Số bài - 9%
 
chauthanh
147 Số bài - 7%
 
heartbeat1992
145 Số bài - 7%
 
meohoanbt
76 Số bài - 4%
 
luyenlvtm88
36 Số bài - 2%
 
titoetn
29 Số bài - 1%
 
baobaounin
19 Số bài - 1%
 
kieutuananhvodoi

Các bài gửi mới nhấtNgười gửi cuối


Share
Sat Jan 14, 2012 8:46 pm#1




xem thêm thông tin
Huân chương cao quý :


Năng nổ

Có 400 bài


Tên thật Tên thật : Lê Châu Thanh
Điện Thoại Điện Thoại : 0979.557.334
Tổng số bài gửi Tổng số bài gửi : 927
Tham gia : 05/11/2011
Tuổi : 27
Đến từ Đến từ : TP Bến Tre
Huân chương cao quý :


Năng nổ

Có 400 bài


Tên thật Tên thật : Lê Châu Thanh
Điện Thoại Điện Thoại : 0979.557.334
Tổng số bài gửi Tổng số bài gửi : 927
Tham gia : 05/11/2011
Tuổi : 27
Đến từ Đến từ : TP Bến Tre
Bài gửi Tự thiết kế theme cho FireFox, IE, Chrome...
Tut này có thể được chia làm 2 phần: phần đầu hướng dẫn bạn các ý tưởng
và kĩ năng cần thiết để làm một cái theme, ko riêng cho Firefox, mà cho
cả Chrome, IE hay Windows, Linux... Phần thứ 2 sẽ đi riêng vào từng
trình duyệt vì mỗi trình duyệt có cấu trúc, hệ thống giao diện khác
nhau.

Phần 1. Ý tưởng thiết kế giao diện

như đã nói trên, trình duyệt hay HĐH thì đều có giao diện mang một cấu
trúc, một hệ thống riêng (vd IE với firefox thì tab nằm dưới, sử dụng
mẫu các button, check box từ windows... còn Safari với Opera thì có các
button và checkbox riêng...) nhưng tất cả đều có vài điểm chung

Thứ nhất:
thay đổi giao diện ko khó như bạn nghĩ và cũng ko vi phạm bản quyền hay
dính j` tới pháp luật cả. (ở đây ko xét Safari bởi vì thay đổi giao
diện Safari 3.0 rất khó, dính nhiều tới code và theo mong muốn của
apple là ko muốn bị thay đổi). Ko cần một kĩ năng lập trình, bạn hoàn
toàn có thể thay đổi giao diện của bất kì phần mềm nào nói chung, kể cả
HĐH, và ở đây là trình duyệt nói riêng

Thứ hai. Giao
diện của một chương trình được lưu trữ riêng với file exe. Với Chrome
thì đó là một file dll. Với Firefox thì lại file nén... Vì thế, chúng
ta chỉ cần thay đổi file riêng lẻ đó, ko đá động gì tới file exe chính.

Thông thường, cách thay đổi giao diện thường là dựa trên những mẫu giao
diện, từ đó thiết kế lên. Cái cách làm là trích xuất những hình ảnh,
thông số của kiểu theme mặc định của phần mềm, sau đó dùng Photoshop
hay cái j` đó chỉnh sửa những hình ảnh, rồi đưa vào file dll gốc lại.
Cái ý tưởng là vậy. Trích hình từ file gốc ~> chỉnh sửa ~> đưa lại vào file gốc.

Vậy, cả phần 1 này, bạn chỉ cần nắm một cái: thiết kế theme cho phần mềm là xây dựng một theme mới từ những hình ảnh có sẵn

====================================

Phần 2. Cách thiết kế giao diện trên một phần mềm cụ thể

Sau khi nắm được cái ý tưởng thiết kế theme, bi giờ cái mục đích của
chúng ta là tìm kiếm những file gốc để trích hình như đã nói trên.
Những file này thay đổi tùy theo từng phần mềm. Đó là lí do có phần 2
này. Phần 2 này sẽ giúp bạn thay đổi theme với một phần mềm cụ thể. Cụ
thể ở đây được đề cập là Firefox, IE và Chrome. Bên cạnh đó, cuối bài
viết mình cũng sẽ nói sơ về việc thiết kế các phần mềm khác như WinRAR
hay iTunes

1. Thiết kế giao diện Firefox

Nếu như dùng Firefox lâu và hay đổi skin, bạn đã biết là firefox sử
dụng các file chứa skin là .jar. Công việc đổi skin là mở cửa sổ add-on
lên và kéo file .jar chứa skin vào.

Vậy để chỉnh sửa giao diện firefox, chúng ta sẽ chỉnh sửa file .jar này.

Trong file .jar này là cái j`, thật chất, đây là một dạng file nén ZIP
nhưng được đổi định dạng thành .jar. Trong file nén này chứa các hình
ảnh của skin và các file text chứa các thông số...

Bây giờ,
nói mãi cũng chán, chúng ta sẽ thực hành. Như hồi nãy đã nói trên,
chúng ta thiết kế skin từ một cái mẫu. Vì vậy, bạn download file .jar
sau về để thực hành trên nó. Đây là cái skin của Firefox 3.7 for 3.5
(mình làm ). Nếu bạn ko thích có thể lên mạng (DeviantArt) để tìm một cái skin .jar phù hợp


[You must be registered and logged in to see this link.]
(tổng dung lượng 1MB file skin của firefox rất nhẹ dù chứa cả trăm hình)

Sau khi down về, có file Dvkndn.jar, giải nén bằng WinRAR vào một thư mục nào đó
Đây là hình ảnh bên trong thư mục vừa giải nén xong


Đầu tiên, chúng ta sẽ lưu dấu ấn cá nhân tại 2 file Contents và install.rdf

Bạn mở file install.rdf bằng notepad, chú ý và thay đổi các thông tin sau


tương tự cũng làm thế với file Contents.rdf

Dù bạn thay đổi thế nào, cần phải có tên tác giả gốc trong cái skin đó vì bạn thiết kế từ skin của họ lên.

Sau khi đã có vài dấu ấn cá nhân, công việc tiếp theo của bạn chỉ là thay đổi hình ảnh trong đó mà thôi.

Thay đổi như thế nào? Mở lên bằng Photoshop và chỉnh sửa, xong lưu đè lại

Vd bạn muốn sửa nút back, vào Browser và chỉnh sửa file back-forward.png

Còn muốn chỉnh sửa chỗ khác, xin thưa, chỉ có một cách là mò riết mới
quen. Ví dụ bạn muốn đổi biểu tượng stop thì đi tìm hình nào có biểu
tượng đó mà sửa. Nếu bạn không biết hình đó thể hiện biểu tượng nào thì
cứ sửa, xong lưu lại và áp dụng sẽ thấy

Ở bài viết này, mình
chỉ đề cập đến mức độ sửa hình ảnh và file text, như thế đã đủ một skin
Pờ rồ rồi, nếu muốn cao hơn nữa thì bạn chỉ việc mở các file css và sửa
tiếp

Sau khi sửa xong, bạn trở lại thư mục ban đầu, chọn tất
cả các file và thư mục (chứ ko chọn thư mục chứa tất cả file đó) và nén
lại thành file ZIP




Sau đó đổi tên file .zip thành file .jar (để hiển thị phần mở rộng, vào
folder Option và bỏ dấu tick chỗ Hide Extension for Know file Types


Vậy là bạn đã có một skin cho Firefox rồi đó, công việc tiếp theo là
kéo vào cửa sổ Addon và chia sẽ cho bạn bè (trên windowsvn.net )

======================================


1. Thiết kế giao diện Chrome

Cũng cùng ý tưởng trích xuất hình ~> Sửa và lưa lại như Firefox, nhưng những hình của Chrome được chứa trong một file default.dll nằm ở


D:Documents and SettingsDvkndnLocal SettingsApplication DataGoogleChromeApplication3.0.192.1Themes
trong đó D là ổ cài Windows, Dvkndn là tên Username của bạn, 3.0.192.1 là tên phiên bản Chrome bạn đang dùng

Sau khi đã nhân dạng file default.dll này, bạn copy nó thành một bản
backup mới do CHrome chỉ có 1 theme, sửa trên cái này mà sai là teo luôn

Sau khi backup, bạn mở file default.dll bằng Restorator (cái này search
trên mạng, down bản trial về) và Extrace toàn bộ thư mục BINDATA thành
định dạng file PNG vào một thư mục




Công việc tiếp theo của bạn chỉ là chỉnh sửa các hình trong đây thôi

Sau khi chỉnh sửa hoàn tất, cũng mở default.dll bằng Restorator lại, và
Assign thư mục BINDATA với thư mục chứa hình bạn vừa sửa (Nói đại khái
là sync cho cái BINDATA giống của bạn) bằng cách click phải BINDATA
~> Assign ~> chọn thư mục


Vậy là xong, restart google để thấy hậu quả

====================================


1. Thiết kế giao diện IE

Sở dĩ mình chọn 3 trình duyệt này để viết là vì cả 3 có những nơi lưu
trữ giao diện (skin, theme) rất đặc trưng: Firefox lưu trong một file
nén tự do, Chrome lưu trong file dll cất kĩ lưỡng, IE lại có một phần
mềm để làm, đó là SKin Studio (FREE)

Thế này thì IE dễ hơn hai
thằng kia do có phần mềm, bạn chỉ việc tạo skin mới (hoặc dùng skin đã
có) và chỉnh sửa trong mục IE 7. Hiện nay SKin Studio chỉ hổ trợ IE 7.
Bản skin studio mới ra (sắp ra thì đúng hơn) sẽ hổ trợ IE 8




Sau đó thì save SKin lại và Apply là xong

================================

Chữ Ký
[Click để xem chữ kí của Admin]
Xem lý lịch thành viên http://ktvbentre.forumvi.com


Trả lời nhanh


Chuyển đến:
Trang 1 trong tổng số 1 trang

Bài viết mới cùng chuyên mục

Bài viết liên quan


Khuyến mãi đặc biệt

Múi giờ GMT. Hiện tại là 09:43 AM.



CNTT 2013 Style 2.0. Designed by (KTV) - Exclusive only KTVBenTre - 2013
Powered by: vBulletin version 3.8.0. Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Ghi rõ nguồn "KTV" khi bạn phát hành lại thông tin từ website này.
nước hoa, mỹ phẩm , trang điểm , quà tang, đà lạt, dalat, da lat, kế toán đà lạt, ke toan da lat, hosting, host vietnam, bivn
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a free blog


Powered by Forumotion® Version 2
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Designed by chauthanh.1990
Diễn đàn Kỹ Thuật Viên Bến Tre.
Địa chỉ: TP Bến Tre - Bến Tre.
Bạn ơi, đăng ký đi Đăng ký