PDA

View Full Version : [Tutorial] Hướng dẫn sử dụng chức năng Customize Profile



Pisces
19-09-2008, 11:13 PM
Nhằm giới thiệu chức năng mới cho những đồng chí nào chưa biết, đồng thời cũng để trợ giúp chút ít về phần kỹ thuật cho các thí sinh tham dự giải đấu "F.P.D Contest", tớ viết bài hướng dẫn sử dụng chức năng Customize Profile (http://www.daoduytu.edu.vn/forum/profile.php?do=customize) trong phần User control Panel (http://www.daoduytu.edu.vn/forum/usercp.php) mà các đồng chí có thể dễ dàng truy cập thông qua việc click vào chữ "Cá nhân (http://www.daoduytu.edu.vn/forum/usercp.php)" ở phía trên góc trái của thanh công cụ.


http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/usercp.jpg (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/usercp.jpg)
http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/cus_prf_1.jpg (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/cus_prf_1.jpg)

Sau khi vào được trang tùy chỉnh giao diện Profile, ta sẽ có 8 phần để thiết lập các thuộc tính. *Lưu ý nhỏ, nếu các đồng chí thay đổi các thông số của phần nào thì phần đó sẽ bị thay đổi, còn nếu để trống thì phần giao diện đó sẽ là thiết lập mặc định của Forum Style, có nghĩa là những phần đấy có thể sẽ khác nhau trên các kiểu style khác nhau :).. Chi tiết các thành phần như bảng bên dưới.
http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Main.png (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Main.png)- Font Family: lựa chọn kiểu phông chữ cho toàn trang.

- Text Color: Chọn màu chữ cho nội dung của phần Main.
- Shaded Text Color: màu chữ cho phần text mờ,
- Hyperlink Color: Màu chữ cho phần nội dung chứa liên kết.
* Để chọn màu thì hoặc là gõ mã màu vào, hoặc là click vào ô vuông bên cạnh để chọn màu thích hợp.

- Border Color, Style, Width, Padding: Lựa chọn các thuộc tính cho đường viền như màu sắc, kiểu dáng, độ rộng và khoảng cách phần đệm.

- Background Color, Background Image: Màu nền và ảnh nền. Ở phần Repeat, chọn phương thức lặp cho ảnh nền:

+ Both: lặp theo cả chiều ngang và dọc;
+ Horizontal: lặp theo trục ngang;
+ Vertical: lặp theo trục dọc;
+ None: ảnh nền không lặp lại.

*Cách sử dụng ảnh nền như thế nào sẽ đề cập chi tiết bên dưới. http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Block_Bdr.png (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Block_Bdr.png) Phần này đơn giản chỉ điều chỉnh màu sắc của phần Block Border, thêm cái chức năng chèn ảnh nền cho các khối nội dung.


Note: Nếu sử dụng ảnh nền cho phần này, tốt nhất không sử dụng ảnh nền của phần Primary Content Areas và Secondary Content Areas bên dưới.




http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Block_Hd.png (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Block_Hd.png) Phần điều chỉnh các thiết lập về màu chữ, màu nền và ảnh nền cho các phần tiêu đề mục: Major Block Header, Minor Block Header, Block Footer. Để có thể nắm rõ hơn vị trí của từng phần trong trang Profile, có thể xem bản đồ bố cục bên dưới.

Note: Riêng phần Block Footer, phần này không hiển thị bên ngoài trang profile mà chỉ có thể nhìn thấy trong phần quản lý Album ảnh, do vậy có thể bỏ qua không cần quan tâm phần này :).

*Tạo Album ảnh thiết kế Profile:
Để có thể sử dụng ảnh từ album để thiết kế nền cho các phần này, ta phải tạo một album dành để chứa ảnh "tùy chỉnh Profile". Để tạo album ảnh, ta có thể vào User control Panel (http://www.daoduytu.edu.vn/forum/usercp.php), chọn mục Pictures & Albums thuộc phần Networking, -->click vào Add Album, ở phần Tiêu đề, gõ vào một cái tên tùy thích, phần Descriptions - miêu tả, có thể để trống hoặc viết vơ vẩn gì tùy tâm, nhưng cái quan trọng nhất, phần Album Type, phải chọn kiểu album là Profile - Pictures used to modify your profile style. Tạo Album xong thì tiến hành Upload ảnh từ máy tính của mình lên Album, vậy là xong. Cái này đơn giản nên chỉ nói sơ qua thế thôi, ko cần ảnh minh họa nữa nhá /:). http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Content_Areas.png (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Content_Areas.png)Thiết lập màu chữ, màu link liên kết cho các phần nội dung chính của trang Profile. Về bố cục chi tiết thì lại mời các đồng chí xem qua cái sơ đồ bên dưới.
Nói sơ qua thì phần Primary Content là phần chứa nội dung của các tin nhắn các thành viên, chứa phần lớn nội dung về thông tin thành viên, danh sách bạn bè, các số liệu thống kê,...
Secondary Content là các phần thông tin phụ như ngày tháng - giờ giấc, tên nick, nhưng phần lớn là chứa các link liên kết đến các "đối tác" khác, vì vậy nên lưu ý.
Phần Controls, là phần tùy chỉnh các button và cái khung gửi tin nhắn, phần này tốt nhất không nên chỉnh cái phần màu chữ - Text color, vì có thể sẽ ko đạt kết quả như mong đợi đâu :).

*Chọn ảnh từ Album ảnh để làm ảnh nền cho các thành phần:
Click vào hình http://www.daoduytu.edu.vn/forum/images/editor/insertimage.gif (http://www.daoduytu.edu.vn/forum/images/editor/insertimage.gif) bên cạnh các khung Background Image, danh sách hình ảnh mà các đồng chí đã up vào Album "tùy chỉnh Profile" phía trên sẽ hiện ra, và mọi người chỉ việc chọn ảnh phù hợp là xong B-).

Note: Thỉnh thoảng trong quá trình điều chỉnh các thiết lập, mọi người nên click vào nút Preview để xem qua giao diện của phần Profile, xem đã vừa ý chưa, nếu thấy hài lòng thì Click vào Lưu để save các thông số lại. Nên làm 2 thao tác này thường xuyên, tránh trường hợp lỡ may đang hăng say design thì máy bị đứt mạng, hay tệ hơn là mất điện thì công sức đi tong hết :-".

Sơ đồ bố cục các thành phần trên trang Profile (click vào hình để xem chi tiết):


http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Profile_Map.jpg (http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Profile_Map.jpg)

vitaminb12
19-09-2008, 11:26 PM
hè hè, giờ thì em hiểu rõ hơn rồi... Cảm ơn bác. Nói qua nói lại thì làm đẹp được vẫn khó :(

duynamckbk7
20-09-2008, 12:03 AM
Khó wa', xem xét rùi làm tiếp. Định làm thành hình bức tranh nhưng phải cắt ghép nhìu wá nên chưa tưởng tượng ra :((
------------------------------------------
Bó tay, để nhiều cái thanh kia wa làm chỉnh mãi hok dc như ý mun, mấy cái lại còn liên wan đển nhau nữa mí khó chứ :((

test
20-09-2008, 02:08 AM
Hì, thanks Pisces nhiều. Viết thế này là quá dễ hiểu rồi. Các bác cứ nhìn kỹ thì có gì đâu mà rối với rắm gì.

vitaminb12
20-09-2008, 09:35 AM
Ai dà, bác Pis này còn dấu nghề nhá... Em nói luôn : để làm trong suốt khung thì gõ transparent vào khung background color. Ehehe...

hmt
20-09-2008, 11:02 AM
Ồ... Giờ mới thấu....... Được..:shoot:

vitaminb12
20-09-2008, 11:24 AM
à, nữa. Em thấy có nhiều 4r còn có thể tạo nhạc nền cho trang profiles nữa. Của mình có không các bác...

Reddevils
20-09-2008, 11:37 AM
Sao của em ko có cái biểu tượng Insert image vậy

Pisces
20-09-2008, 12:46 PM
à, nữa. Em thấy có nhiều 4r còn có thể tạo nhạc nền cho trang profiles nữa. Của mình có không các bác...

Trang nào cậu cho tớ cái ví dụ? VÌ tớ lọ mọ mãi trong cái phần tùy chỉnh này, cả trong hệ thống cấu tạo nữa, cũng ko thấy đề cập :-?. Chắc cái này là một dạng Plugin rồi, mà chèn ảnh ko thôi cậu đã la nặng, còn lôi thêm nhạc nền vào nữa làm chi :-".

P/S: câu của cậu Red đã trả lời trong Profile =).

vitaminb12
20-09-2008, 02:38 PM
có mà, có mà. Sáng nay để tìm được cái "ngón bí truyền" của bác em đã phải tìm khắp các 4r, tự dưng em phát hiện ra. Load ko chậm hơn là mấy cả...
Nhưng mà giờ đi học đã, tối về em tìm lại...

Candy
20-09-2008, 03:16 PM
sao mà cái hình nền của em nó bị che hết đi roài là sao anh ơi

duynamckbk7
20-09-2008, 10:23 PM
Ai dà, bác Pis này còn dấu nghề nhá... Em nói luôn : để làm trong suốt khung thì gõ transparent vào khung background color. Ehehe...

Làm j` được đâu :(, chú cứ đùa anh

vitaminb12
20-09-2008, 10:57 PM
Làm j` được đâu :(, chú cứ đùa anh
em làm được đấy thôi, bác qua mà xem. :blush:

vitaminb12
21-09-2008, 09:53 PM
tình hình là em thấy hơi nhiều người dùng cái transparent thì phải... :(

Pisces
21-09-2008, 10:14 PM
tình hình là em thấy hơi nhiều người dùng cái transparent thì phải... :(

Thường thì chỉ sử dụng 2 kiểu thiết lập nền cho các module (các khung nội dung):
- Ko sử dụng màu nền mà dùng ảnh nền, vì nếu đã dùng ảnh thì sẽ ko thấy màu nền.
- Ko sử dụng ảnh nền và dùng transparent để nhìn thấy ảnh nền dưới cùng (ảnh nền của phần Main).

vitaminb12
21-09-2008, 11:47 PM
Thường thì chỉ sử dụng 2 kiểu thiết lập nền cho các module (các khung nội dung):
- Ko sử dụng màu nền mà dùng ảnh nền, vì nếu đã dùng ảnh thì sẽ ko thấy màu nền.
- Ko sử dụng ảnh nền và dùng transparent để nhìn thấy ảnh nền dưới cùng (ảnh nền của phần Main).
em thì vẫn thấy sự khác biệt của cái profile của bác với các profile dùng transparent thông thường khác - mà đơn cử là của em. Nhìn nó không được thuận mắt cho lắm.
Bác có thể chỉ giáo chút ít ko ... :crave:

Pisces
21-09-2008, 11:58 PM
em thì vẫn thấy sự khác biệt của cái profile của bác với các profile dùng transparent thông thường khác - mà đơn cử là của em. Nhìn nó không được thuận mắt cho lắm.
Bác có thể chỉ giáo chút ít ko ... :crave:

Chỉ có như thế này thôi, đâu có "giáo" gì khác biệt ;))
http://i130.photobucket.com/albums/p267/hanam225/Tut_Fr/Prf_Content_Areas-1.png

duynamckbk7
22-09-2008, 09:26 AM
o`o`, được roài.cảm ơn các chú đã chỉ giáo ^^:congratz:

Jubi
24-09-2008, 02:33 PM
Ai dà, bác Pis này còn dấu nghề nhá... Em nói luôn : để làm trong suốt khung thì gõ transparent vào khung background color. Ehehe...
thế không làm suốt khung mà chỷ làm mờ khung thỳ làm thế nào ạ

vitaminb12
24-09-2008, 05:01 PM
thế không làm suốt khung mà chỷ làm mờ khung thỳ làm thế nào ạ

à, cái vấn đề này chắc người thiết kế ra vBulletin chắc cũng chưa nghĩ ra quá em ạ :hot:

vitaminb12
25-09-2008, 05:34 PM
theo vitamin nhận thấy thì khi trang trí thì cả cái album cover mà "hợp tông" và "ấn tượng" thì cũng đem đến hiệu quả nhất định - có tác dụng đến thiện cảm của người xem.

vitaminb12
27-09-2008, 01:15 AM
Giữa lúc mọi người đang chờ đợi sự đánh giá từ ban giám khảo, Vitamin mạo muội up cái Profile cũ của Vitamin lên cho mọi người cùng chém. Đánh giá thử xem Vitamin sẽ được bao nhiêu điểm nếu dự thi với Profile này
http://i128.photobucket.com/albums/p198/zen_148v/1.jpg

haminhvan
27-09-2008, 01:44 PM
Oa, cũng đẹp phết anh ạ
Cỏ và những giọt sương à?

Pisces
27-09-2008, 02:21 PM
Xét quan điểm thẩm mĩ và sự hợp lý của ảnh nền, màu sắc bố cục của tớ, cái đấy được khoảng 6-7/10 điểm =).

haminhvan
27-09-2008, 02:22 PM
Nói chung là theo em thì cũng đc khoảng 15/20 = 7.5/10 (tuy vậy, em ghét cái màu xanh lá cây lắm)

vitaminb12
27-09-2008, 05:11 PM
Xét quan điểm thẩm mĩ và sự hợp lý của ảnh nền, màu sắc bố cục của tớ, cái đấy được khoảng 6-7/10 điểm =).
:sweat: Bác chấm em cao nhờ...
Cái profile nầy load thì chậm, nhìn thì rối mắt. Được mỗi cái màu nhìn trông sáng sủa. :empty:

haminhvan
27-09-2008, 05:17 PM
thế thì cho anh 5 điểm để đủ điểm TB

vitaminb12
27-09-2008, 05:21 PM
thế thì cho anh 5 điểm để đủ điểm TB
Hay quá, 5 điểm là không bị thi lại rồi :phew: Nhưng mà mới được điểm D (hay F nhở) thôi. Nguy cơ bị đuổi lớn lắm :brbr:

haminhvan
27-09-2008, 05:23 PM
thế cũng đc rồi anh ạ!!!!!!!!

Ơ hơ, mà anh trong BGK mà

[S]w33t[H]3art
29-09-2008, 05:37 PM
sao hok cho thêm nhạc nền vào profile ạ.....................................giống như 1 cái blog í ạ :D

Pisces
29-09-2008, 05:52 PM
VBB ko hỗ trợ đồng chí ạh.
Với lại 4rum giao lưu - trao đổi - bàn luận là chính, nếu có nhu cầu viết blog thì cứ yahoo.360, yahoo 360plus, blogspot, wordpress,... mà chiến, tùy chọn nhiều thứ hơn, đc hỗ trợ nhiều thứ hơn =).

Pisces
01-10-2008, 02:42 AM
Tình hình là đã nghiên cứu để làm thêm cái khung chèn đc media player rồi =)), nhưng mà hiện đang giới hạn chỉ có một số nhóm điều hành mới đc phép sử dụng #Devil.

Edit: Đã mở chức năng cho toàn bộ thành viên. Các đồng chí cứ vào trong phần tùy chọn của UCP là thấy ;)).