Kỹ Thuật Viên Bến Tre | Diễn đàn Kỹ Thuật Viên Bến Tre | KTV Bến Tre | Ghost Đa Cấu Hình
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

Kỹ Thuật Viên Bến Tre | Diễn đàn Kỹ Thuật Viên Bến Tre | KTV Bến Tre | Ghost Đa Cấu Hình


 
Trang ChínhGalleryLatest imagesTìm kiếmĐăng kýĐăng Nhập
928 Số bài - 47%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
Admin
225 Số bài - 11%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
lct90
196 Số bài - 10%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
thanhproit
178 Số bài - 9%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
chauthanh
147 Số bài - 7%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
heartbeat1992
145 Số bài - 7%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
meohoanbt
76 Số bài - 4%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
luyenlvtm88
36 Số bài - 2%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
titoetn
29 Số bài - 1%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
baobaounin
19 Số bài - 1%
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  EmptyTự thiết kế theme cho FireFox, IE, Chrome...  Empty 
kieutuananhvodoi

Các bài gửi mới nhấtNgười gửi cuối
Admin
dq2014
quanaothethaovn
thuyhuynh
21thangcu
KenDyGZ
baobaounin
baobaounin
muvietnampro
baobaounin
baobaounin
titoetn

Share
Tự thiết kế theme cho FireFox, IE, Chrome...  EmptySat Jan 14, 2012 8:46 pm#1
Admin
Tự thiết kế theme cho FireFox, IE, Chrome...  Admin_10

Tự thiết kế theme cho FireFox, IE, Chrome...  Thtx_010 Tự thiết kế theme cho FireFox, IE, Chrome...  Thtx_012
Admin
Tự thiết kế theme cho FireFox, IE, Chrome...  Thtx_015 Tự thiết kế theme cho FireFox, IE, Chrome...  Thtx_017


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

Tự thiết kế theme cho FireFox, IE, Chrome...  T5178034
Năng nổ
Tự thiết kế theme cho FireFox, IE, Chrome...  T5178032
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 : 928
Tham gia : 05/11/2011
Tuổi : 34
Đến từ Đến từ : TP Bến Tre
Huân chương cao quý :

Tự thiết kế theme cho FireFox, IE, Chrome...  T5178034
Năng nổ
Tự thiết kế theme cho FireFox, IE, Chrome...  T5178032
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 : 928
Tham gia : 05/11/2011
Tuổi : 34
Đế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 Tự thiết kế theme cho FireFox, IE, Chrome...  4). 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 Tự thiết kế theme cho FireFox, IE, Chrome...  4 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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot99

Đầ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ự thiết kế theme cho FireFox, IE, Chrome...  Untitled1

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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot100

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot101

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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot102

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 Tự thiết kế theme cho FireFox, IE, Chrome...  Nhe)

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


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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot103

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot104

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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot105

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

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot2b106

Tự thiết kế theme cho FireFox, IE, Chrome...  Screenshot2b107

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

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

Chữ Ký
[Click để xem chữ kí của Admin]
https://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.


Tự thiết kế theme cho FireFox, IE, Chrome...  Border_bottom_01Tự thiết kế theme cho FireFox, IE, Chrome...  Border_bottom_03

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 | Báo cáo lạm dụng | Thảo luận mới nhất


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ý