1. Trang chủ
  2. » Giáo án - Bài giảng

TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG

13 270 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 13
Dung lượng 2,97 MB

Nội dung

TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG - 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: 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 @ 10:30 25/06/2011 Số lượt xem: 11064 TẠO PHONG CÁCH RIÊNG CHO TRANG VIOLET ĐÂY NHÁ ! V ũ Ng ọ c H ả i B ằ ng @ 23h:28p 30/03/11 Một b i vià ết quá chi tiết.Xin cám ơn thầy Vũ Ngọc Hải Bằng đã chia sẻ.Chúc thầy cùng nhóm VỌC VUI VẺ nhé ! Lê V ă n Bình @ 06h:43p 31/03/11 Thật tuyệt! mình đang đậu phụ lĩnh vực n yà Chu V ă n Quý @ 10h:39p 31/03/11 C3 l m thà ử nha Cơn ÚT Hải Bằngnhiều ! Tr ươ ng Thu Trang @ 16h:09p 31/03/11 Ôm b i n y và à ề nh tà ừ từ vọc nhé. Đỗ Thanh D ươ ng @ 20h:57p 31/03/11 Mời thầy Hải Bằng v o chuyên mà ục n y Và ỌC cho mình mấy nét cơ bản về chữ chạy trong PM tạo ảnh GIF. http://lebinh72qn.violet.vn/present/show/entry_id/5311670 Lê V ă n Bình @ 22h:14p 31/03/11 Rinh về ngâm cứu đã Hải Bằng nhé! Bình Nguyên @ 22h:16p 31/03/11 Mai đã l ng y Cá Tháng 4 (April Fool's Day), Chúc Thà à ầy may mắn! H ả i Nguyên V ă n @ 23h:11p 31/03/11 Ch o thà ầy Hải Bằng buổi sáng nhé ! Mình mới sơn lại nh àđấy ! Lê V ă n Bình @ 06h:06p 01/04/11 Sang thăm thầy Hải Bằng . Chúc thầy vui nhé! Hải Bằng ơi! Lúc n y TN không mà ở của sổ nhìn qua nh em không à được. Không biết tại sao nữa. Thường xuyên đi đường vòng nè! Nguy ễ n Th ị T ươ i @ 11h:40p 01/04/11 12 3 4 5 14 15 Đường dẫn: • T Ạ O CH Ỉ M Ụ C CHO “TOP 10 BÀI VI Ế T TIÊU BI Ể U” (24/06/11) • Thi ế t l ậ p hình n ề n cho trang riêng (23/06/11) • Code b ả ng qu ả ng cáo góc d ướ i ph ả i. (20/06/11) • M ẹ o nh ỏ để bi ế t chính xác ng y th nh là à ậ p trang riêng Violet. (16/06/11) • Code hi ể n th ị tình tr ạ ng online/offline trên YM! (16/06/11) BẰNG VŨ HỖ TRỢ TRỰC TUYẾN QUA YAHOO MESSENGER. Chèn biểu cảm Tìm ki ế m th nh viênà IN TRANG NÁY TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG - 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: 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ũ ọ ả ằ @ 10:30 25/06/2011 S l t xem: 11064ố ượ T O PHONG CÁCH RIÊNG CHO TRANG VIOLET ÂY NHÁ !Ạ Đ [...]... Tươi @ 11h:40p 01/04/11 12345 1415 Đường dẫn: • • • • • TẠ CHỈ MỤ CHO “TOP 10 BÀI VIẾ TIÊU BIỂ (24/06/11) O C T U” Thiết lập hình nền cho trang riêng (23/06/11) Code bảng quảng cáo góc dưới phải (20/06/11) Mẹo nhỏ để biết chính xác ngày thành lập trang riêng Violet (16/06/11) Code hiển thị tình trạng online/offline trên YM! (16/06/11) BẰ VŨHỖTRỢTRỰ TUYẾ QUA YAHOO MESSENGER NG C N Chèn biểu cảm Tìm kiếm... Trương Thu Trang @ 16h:09p 31/03/11 Ôm bài này về nhà từ từ vọc nhé Đỗ Thanh Dương @ 20h:57p 31/03/11 Mời thầy Hải Bằng vào chuyên mục này VỌC cho mình mấy nét cơ bản về chữ chạy trong PM tạo ảnh GIF http://lebinh72qn .violet. vn/present/show/entry_id/5311670 Lê Văn Bình @ 22h:14p 31/03/11 Rinh về ngâm cứu đã Hải Bằng nhé! Bình Nguyên @ 22h:16p 31/03/11 Mai đã là ngày Cá Tháng 4 (April Fool's Day), Chúc . TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG - 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. NÁY TỰ TẠO GIAO DIỆN VIOLET THEO PHONG CÁCH RIÊNG - 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. 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 @ 10:30 25/06/2011 Số lượt xem: 11064 TẠO PHONG CÁCH RIÊNG CHO TRANG VIOLET ĐÂY

Ngày đăng: 31/10/2014, 05:00

TỪ KHÓA LIÊN QUAN

w