- Thầy Cô đã dùng hết tất cả các mẫu giao diện mà Violet cung cấp và cảm thấy chưa "đã" ???

- Thầy Cô muốn tạo một phong cách riêng cho trang Violet của mình ??? 

Đây, Bằng Vũ mời Thầy Cô cùng vọc nhé ! 

Bước 1: Download file nguồn giao diện CSS: GIAO DIỆN TRONG SUỐT hoặc GIAO DIỆN BÌNH THƯỜNG

Bước 2: Thầy Cô mở file "GiaodienCSS.doc" (file Word 2003) và thay tên màu vào các vị trí cho phù hợp. Sau đó COPY đoạn code bên dưới dán vào Notepad và lưu với phần mở rộng là .css. Có thể thay đổi màu sắc cho từng mục theo ý thích để tạo phong cách riêng bằng 2 cách:

-          Dùng tên màu chuẩn bằng tiếng Anh (VD: white, red, blue, green, yellow, brown …)

-          Dùng mã màu HEX: Thầy cô dùng bảng chọn mã màu để chế tác màu và copy mã màu đó (DOWNLOAD file flash chọn mã màu TẠI ĐÂY)

Khi đã thay màu thích hợp cho từng mục trên giao diện, Thầy Cô lưu file lại và gởi lên host http://jabry.net (BV thấy host này đang ổn định) hoặc host nào có hỗ trợ Java Script (chằng hạn: http://110mb.com ; http://webng.com) là được.

Bước 3: Chèn link file CSS ấy vào mục “Thông tin bản quyền” bằng đoạn code sau:

 <link rel="stylesheet" type="text/css" media="screen" href="http://bangvu.net/violet/skin/skinbv.css"/> 

(Thầy cô thay đường dẫn đến file của mình nhé !)

Nếu chưa ưng ý, Thầy Cô có thể chỉnh sửa và upload lên lại, file mới up lên sẽ được ghi đè lên file cũ trên host. Tại trang Violet, Thầy Cô nhấn F5 để xem sự thay đổi.

Bước 4: Tạo hình ảnh trên tiêu đề khối chức năng:

Với phần này, BV đã ghi link sẵn dẫn đến hình ảnh. Thầy Cô không cần chỉnh sửa link này nếu thích hình đó.

Hình đây:  (Hình gif tự thay đổi màu nền sau mỗi 10 giây)

Nếu không thích hình ấy, Thầy Cô có thể tự tạo cho mình 1 hình khác theo phong cách riêng với kích thước sau: ngang 190px, cao 42px

Bước 5: Tạo hình ảnh cuối mỗi khung ở khối chức năng:

Thầy Cô dùng phần mềm tạo ảnh tĩnh hoặc ảnh động để tạo ra một hình ảnh độc quyền hiển thị cuối mỗi khung trong khối chức năng theo kích thước: ngang 190px, cao tùy ý (nhỏ nhỏ thì mới xinh xinh nhá !)

VD:   

Bước 6: Tạo khung nền cho các chuyên mục là tài liệu, tư liệu trên khối chính:

-          Gồm 2 khung có kích thước: width 168px  x  height 150px.

-          Thầy Cô dùng phần mềm đồ họa tạo ảnh và ghi chữ độc quyền cuối mỗi khung.

VD:

Khung 1: 

Khung 2: 

Bước 7: Up các hình trên lên Violet và lấy link thay vào các chỗ BV đã ghi chú ở các dòng đầu trang trong file CSS.

Bước 8: Upload file đã hoàn chỉnh lên host. Cuối cùng nhấn F5 để refresh lại trang Viole và ngắm nhìn thành quả.

VD: Giao diện nhà BV đấy !

1) Giao diện trong suốt:

2) Giao diện thường: 

Vũ Ngọc Hải Bằng @ 08:46 07/04/2012