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 xi[r]
(1)TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG
Bước 1: Download file nguồn giao diện CSS TẠI http://dongholp.violet.vn
Bước 2: Trong file nguồn CSS, Dongholp ghi rõ cuối dòng cho mục cần thay màu Thầy Cô mở file Notepad thay đổi màu sắc cho mục theo ý thích để tạo phong cách riêng cách:
- Dùng tên màu chuẩn tiếng Anh (VD: white, red, blue, green, yellow, brown …)
(2)Khi thay màu thích hợp cho mục giao diện, Thầy Cô lưu file lại gởi lên host http://jabry.net (DongHolp thấy host ổn định) host có hỗ trợ Java Script (chằng hạn: http://110mb.com ; http://webng.com)
Bước 3: Chèn link file CSS vào mục “Thông tin quyền” đoạn code sau: <link rel="stylesheet" type="text/css" media="screen" href="LINK DẪN ĐẾN FILE CSS"/>
VD: <link rel="stylesheet" type="text/css" media="screen" href=" http://users11.jabry.com/dongholp/skinwebdongholp.css"/>
Nếu chưa ưng ý, Thầy Cô chỉnh sửa upload lên lại, file up lên ghi đè lên file cũ host Tại trang Violet, Thầy Cô nhấn F5 để xem thay đổi
Bước 4: Tạo hình ảnh tiêu đề khối chức năng:
Với phần này, Dongholp ghi link sẵn dẫn đến hình ảnh Thầy Cơ khơng cần chỉnh sửa link thích hình Tải
Hình đây: (Hình gif tự thay đổi màu sau 10 giây)
Nếu khơng thích hình ấy, Thầy Cơ tự tạo cho 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 khung khối chức năng:
Thầy Cô dùng phần mềm tạo ảnh tĩnh ảnh động để tạo hình ảnh độc quyền hiển thị cuối khung khối chức theo kích thước: ngang 190px, cao tùy ý (nhỏ nhỏ xinh xinh nhá !)
Bước 6: Tạo khung cho chuyên mục tài liệu, tư liệu khối chính: - Gồm 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 ghi chữ độc quyền cuối khung
VD: Khung 1: Khung 2:
Bước 7: Up hình lên Violet lấy link thay vào chỗ DongHoLp ghi dòng đầu trang file CSS
(3)Bước 8: Upload file css hồn chỉnh tạo thêm file có Js hoàn chỉnh lên host Cuối nhấn F5 để refresh lại trang Viole ngắm nhìn thành Cách tạo file js
(4)Sau nội dung file css Thầy cô copy đoạn mã sau dán vào chương trình notepad, chỉnh sửa lưu lại với tên <tên>.css
h2{font-size:16px}#posts{width:100%;overflow-x:hidden;} #posts li{padding-bottom:10px;
height:auto !important; height:124px;min-height:124px;
background:#fff url(http://s1051.photobucket.com/albums/s434/dongholp/Khungnoidung-1.gif) top left no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU - KHỐI CHÍNH*/
}
#smallposts li{padding-bottom:10px; height:auto !important;
height:54px;min-height:54px;
background:#fff url(http://s1051.photobucket.com/albums/s434/dongholp/khungtruycap.gif) top left no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU KHI RÊ CHUỘT VÀO - KHỐI CHÍNH*/
}
.title{font-size:13px; font-weight:bold;
margin:0;
text-transform:uppercase; overflow:hidden;
}.title a:link,.title a:visited{color:BLUE;}.by{font-size:10px;margin:0 2px 0; color:BROWN;
text-transform:uppercase;
}.txt,.blue{color:#117ca4;}.txt{font-style:italic; font-size:12px;
(5)margin:7px 18px 7px 7px; }
#smallposts pic{margin:5px 18px 7px 5px;}.pos1{clear:both;} #letters{line-height:2;padding-bottom:2px;}.size1
{font-size:10px;}.size2{font-size:12px;}.size3{font-size:15px;}.size4{font-size:17px;}.size5{font-size:22px;font-weight:bold;
}.pager{float:left;clear:both;
width:100%;padding:10px 10px 10px 10px;}.pager float-right{float:left;}.float-left{float:left; }.float-right{float:right;margin-right:20px;}.comments{padding:0px;
width:528px;_width:100%;color:#3333FF }.comments navigator{color:#3366FF;
font-size:11px;margin:0px 0px 0px 0px;float:left;}.comments comment2
{width:100%;border:1px solid #DDDDDD;margin:0px 0px 10px 0px;padding:10px 10px 10px 10px; float:left;text-color:RED;
}.comments comment1{width:100%;background-color:#f6f6f6; border:1px solid #DDDDDD;
margin:0px 0px 10px 0px;padding:10px 10px 10px 10px;float:left; text-color:#3366FF;
}.comments avatar{width:60px;height:60px;border:1px solid #CCCCCC; background-color:#FFFFFF;
padding:3px 3px 3px 3px;margin:5px 5px 5px 5px;text-align:center;float:left;}.comment-edit{text-align:left;
}.comment-author{text-align:right;}.document li{display:block;text-align:center;float:left; background-color:#FFFFFF;
margin:0px 0px 5px 0px;
(6)background:url(http://s1051.photobucket.com/albums/s434/dongholp/Khungnoidung-1.gif) no-repeat; /*MÀU NỀN KHUNG TƯ LIỆU - KHỐI CHÍNH*/
background-position:center 0px;overflow:hidden;}.document over {background:transparent
url(http://s1051.photobucket.com/albums/s434/dongholp/khungtruycap.gif) no-repeat center 0px; /*MÀU NỀN KHUNG TƯ LIỆU KHI RÊ CHUỘT VÀO - KHỐI CHÍNH*/
}.document a,.document a:visited{color:#777777;text-decoration:none;}.document a:hover{text-decoration:underline;cursor:pointer;
}.document li label{text-align:center;line-height:1em; font-size:0.8em;margin:4px 12px 2px 12px;
display:block;
}.document li img{display:block; background-color:#FFFFFF;text-align:center;
margin:10px auto 0px auto; padding:0px 0px 0px 0px;
cursor:pointer;
}.shortdesc{width:259px;float:left;text-align:left;padding:10px 0px 0px 0px;}.shortdesc img{float:left;margin-right:10px;}.shortdesc h3
{padding:0px;margin:0px;font-size:12px;line-height:normal;}
.docgroup h2, entrygroup h2, entry h2, doc h2 { padding: 10px 10px 0px 10px;
margin: 0px 0px 0px 0px; min-height: 25px;
clear: both;
background: transparent url() repeat-x top left;
(7)font-size: 14px; }
.docgroup content, entrygroup content, entry content, doc content { background: #5FFEA1; /*MÀU NỀN KHUNG NỘI DUNG - KHỐI CHÍNH*/
}
.entrygroup, entry, doc { background: BLACK;
}
#side h2{_width:190px;margin:0px 0px 0px 0px;font-size:13px;text-align:center;font-family:Times New
Roman,arial,sans-serif;background:url(http://s1051.photobucket.com/albums/s434/dongholp/Tieudetren.gif) no-repeat center top;padding:5px;height:42px;color:#ffffff;text-transform:uppercase;font-weight:bold;clear:both} /*HÌNH ẢNH HIỂN THỊ PHÍA TRÊN KHUNG KHỐI CHỨC NĂNG*/
#side content { _width: 190px; margin:0px 0px 0px 0px;
background: #5FFEA1; /*MÀU NỀN KHUNG NỘI DUNG - KHỐI CHỨC NĂNG*/ display:block;
padding: 1px;
border-left: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ TRÁI KHUNG KHỐI CHỨC NĂNG*/ border-right: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ PHẢI KHUNG KHỐI CHỨC NĂNG*/
(8)border-bottom: 4px solid #FFFFFF; /*MÀU ĐƯỜNG KẺ DƯỚI KHUNG KHỐI CHỨC NĂNG*/ padding-bottom: 3px;
padding-top: 3px; }
.selected {
background: BROWN; }
#side bottom{_width:190px;margin:0px 0px 10px
0px;background:url(http://s1051.photobucket.com/albums/s434/dongholp/tieudeduoi.gif) no-repeat center top;height:23px;display:block;clear:both;} /*HÌNH ẢNH HIỂN THỊ PHÍA DƯỚI
KHUNG KHỐI CHỨC NĂNG*/
}
#side content a { height: 15px;
}
#side content li a {
color: BLUE; /*MÀU CHỮ LINK Ý KIẾN THÀNH VIÊN - KHỐI CHỨC NĂNG*/ }
#side content li {
color: BLUE; /*MÀU CHỮ TRONG MỤC THỐNG KÊ Ở KHỐI CHỨC NĂNG*/ border-bottom: dotted 1px #FFFFFF;
}
#side content {
color: BLUE; /*MÀU CHỮ NỘI DUNG Ở KHỐI CHỨC NĂNG*/ }
(9)line-height:15px; }
.leftmenu ul { padding: 0px;
margin: 0px; }
.leftmenu li { display:block; padding: 0px; margin: 0px;
border-bottom: 2px dotted white; /*MÀU ĐƯỜNG KẺ PHÂN CÁCH TRONG MỤC Ý KIẾN THÀNH VIÊN - KHỐI CHỨC NĂNG*/
}
.menutop {
background:url() repeat-x center center;
background-color: #0325FD; /*MÀU NỀN PHẦN CÒN DƯ CỦA MENU*/ border: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ TRÊN VÀ VIỀN TRÁI CỦA MENU*/
font-weight: normal;
border-bottom: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ DƯỚI CỦA MENU*/ }
.menutop a:hover {
background:url() repeat-x center center;
(10)} menutop a {
background:url() repeat-x center center; background-color: #0325FD; /*MÀU NỀN MENU*/
border-RIGHT: 2px solid YELLOW; /*MÀU ĐƯỜNG KẺ PHẢI CỦA MENU*/
} menutop li {
border-right: 0px solid YELLOW; /*MÀU ĐƯỜNG KẺ TRÁI CỦA MENU*/
}
#top a:link {
color: white; /*MÀU CHỮ MENU KHI CHƯA NHẤN CHUỘT VÀO*/ }
#top a:visited {
color: WHITE; /*MÀU CHỮ MENU KHI ĐÃ NHẤN CHUỘT VÀO*/ }
#welcome a {
background: GREEN; /*MÀU NỀN CHỮ THỐT CẠNH TÊN THÀNH VIÊN GĨC PHẢI TRÊN*/ }
.dropmenudiv {
font:normal 12px Verdana; line-height:18px;
(11).dropmenudiv ul {
border: 0px solid BROWN; /*MÀU KHUNG MENU XỔ XUỐNG*/
}
.dropmenudiv a {
font-size: 11px; /*CỠ CHỮ TRONG MENU XỔ XUỐNG*/ color: WHITE; /*MÀU CHỮ MENU XỔ XUỐNG*/
}
.dropmenudiv li {
border-bottom: dotted 2px #03FE39; /*MÀU ĐƯỜNG KẺ PHÂN CÁCH LINK TRONG MENU XỔ XUỐNG*/
background: BLUE; /*MÀU NỀN TRONG MENU XỔ XUỐNG*/ }
.dropmenudiv a:hover { /*THEME CHANGE HERE*/
background:YELLOW; /*MÀU NỀN KHI RÊ CHUỘT CHỌN LINK TRONG MENU XỔ XUỐNG*/ text-decoration:underline;
}
#wrap3 {
background: #057CFB; /*MÀU NỀN CHUNG CHO CẢ TRANG*/ border:1px solid YELLOW; /*MÀU KHUNG CHUNG CHO CẢ TRANG*/
(12)overflow-x: hidden; }
.comments comment2 {
background-color: #FF9999; /*MÀU NỀN MỤC Ý KIẾN 2*/ }
.comments comment1 {
background-color: lightyellow; /*MÀU NỀN MỤC Ý KIẾN 1*/ }
body {
http://dongholp.violet.vn Http://Violet.vn/hocn http://jabry.net http://110mb.com http://webng.com) Khung 1: Khung 2: s đây