
Tạo skin cho Blog Opera từ một webset
Friday, August 3, 2007 11:48:18 PM
Thay đổi giao diện Blog Opera
Chúng ta (người Việt Nam) có một điểm lợi rất lớn trong việc học thiết kế website là Internet chạy cực... chậm
Nếu bạn mở một trang web, bạn có thể rất nhiều lần đã gặp trường hợp các hình ảnh sẽ từ từ hiển thị. Lấy ví dụ trang blog của tôi, bạn sẽ thấy những cái lá maples đủ màu hiển thị đầu tiên, không chỉ xuất hiện hai bên mà toàn bộ màn hình.
Điều này không có gì khó hiểu cả. Trong post "Thay đổi background của Blog Opera", tôi đã giải thích các thuộc tính (properties) của background - nếu bạn không xác định thì hình ảnh sẽ tự động lập lại hết chiều ngang và chiều dọc của trang web. Bạn không thấy có nghĩa là hình ảnh đó đã bị che khuất bởi một hình ảnh khác nằm trên nó.
Như vậy, các hình ảnh của một trang web thật ra được xếp chồng lên nhau. Body background luôn là lớp dưới cùng. Để tạo thêm layer, trong các trang web viết bằng HTML, tôi dùng bảng (table); còn ở blog Opera thì tôi dùng wrap. Thế nên, wrap không nhất thiết là đường viền hai bên như nhiều người nhầm tưởng
Vì thế, khi tạo skin cho Opera từ Theme Yahoo 360o, tôi có thể đặt wrap ở vị trí của banner và footer
Vị trí xuất hiện của wrap sẽ tùy thuộc vào số thứ tự của chúng. Có nghĩa là, wrap mang số thứ tự nhỏ nhất sẽ xuất hiện đầu tiên (dưới cùng) và số thứ tự lớn nhất sẽ nằm trên cùng. Tất cả các wraps sẽ nằm dưới banner, footer, sidewrap và mainwrap. Cho nên, nếu muốn dùng wrap làm banner hay footer (để trải rộng như theme Yahoo), tôi đặt thuộc tính cho banner, footer, sidewrap, mainwrap là transparent (trong suốt).
Bây giờ bạn hãy nhìn vào một webset của Cute Colors mà tôi sử dụng để chỉnh sửa thành một trang trong website của Đan Quỳnh: trang video clips. Các viền khung bên ngoài thật ra là phần không bị che khuất của các tables nằm chồng lên nhau (phần trùng lắp đã bị che khuất). Dựa vào cấu trúc tables của webset sau đây: (bạn có thể view source để lấy đoạn mã này)
<table width="800"border="0" cellpadding="5" cellspacing="5" background="album/cutecolorsplantbg3.gif"><tr><td>
<table align="center" width="100%"><tr>
<td width="200" valign="top">
<div align="center"><table width="98%" height="540" border="0" cellpadding="0" cellspacing="0" background="album/cutecolorsplantbg4.gif"><tr><td>
(nội dung)
</td></tr>
</table>
</td>
<td width="*" valign="middle">
<div align="center"><table width="99%" height="540" border="0" align="center" cellpadding="0" cellspacing="0" background="album/cutecolorsplantbg2.gif"><tr><td>
(nội dung)
</td>
</tr></table>
</td></tr>
</table></td> </tr>
</table>
Tôi chuyển thành user.css của skin Chinese New Year
Chẳng biết đối với người khác chuyện này dễ thế nào, riêng đối với tôi, làm được chuyện này tôi thấy mình... vĩ đại lắm
Chẳng đơn giản như nêm một món ăn, thậm chí là nấu cả một món ăn đâu
Dù tôi cũng chỉnh margin và padding cho wrap tương tự như làm với tables, sản phẩm luôn luôn bị lỗi khi xem trên Internet Explorer
Bài tiếp theo tôi sẽ hướng dẫn các bạn cách chuyển webset của Cute Colors thành skin của Blog Opera, và cuối cùng là từ một webset dùng CSS thành skin của Opera Blog, theo cách mà tôi đã làm. Bạn đón đọc nhé. Và lưu ý, ngay từ những posts đầu tiên về thay đổi giao diện Blog Opera, tôi đã quote rằng tôi chỉ hướng dẫn cho amateur như tôi thôi
Các cao thủ có cách nào hay hơn thì hãy viết tuts cho chúng tôi học hỏi
(to be continued)
noobboy80 # Sunday, August 5, 2007 1:01:52 AM
Nghe như có vẻ HTML và Opera là 2 phạm trù khác hẳn nhau. HTML: 1 tiêu chuẩn của internet, Opera: một cty của Nauy? Một trình duyệt web? Một mã nguồn blog???
Nhưng đó chưa phải cái nhầm ghê gớm, cái nhầm nhất ở đây là chị đã mạnh dạn phán rằng, trong HTML để tạo thêm layer thì người ta dùng bảng
Thật ra thì tôi cũng hiểu ý của chị đấy, nhưng chưa biết phải sửa lại câu trên như thế nào? "Opera blog dùng #wrap để tạo ra khung của giao diện?" cũng chưa chính xác lắm
Thủy Hiềndanquynh # Sunday, August 5, 2007 3:02:15 AM
Theo góp ý của bạn, tôi sẽ chỉnh lại câu đó thành:
Còn những thứ như DIV, SPAN,... thì tôi cũng có dùng (bằng cách chỉnh websets
Anyway, bài này tôi chưa viết xong, nhưng vì nhiều người muốn đọc nên tôi public... từ từ, hehehe... Tôi hy vọng rằng bạn sẽ góp ý nhiều hơn để tôi chỉnh sửa cho chính xác. Cám ơn bạn
Nguyễn Thị Thu Thuỷthuthuyqnm # Monday, August 6, 2007 1:58:21 AM
Lại gửi noobboy80: Nếu bạn rành CSS và HTML thì mở lớp nhé, tui sẽ là học trò đầu tiên, nhưng mà phải dạy bằng tiếng việt cơ (giống cô Lu vậy) còn bằng tiếng anh thì tui ứ biết dịch.
noobboy80 # Monday, August 6, 2007 3:59:42 AM
Không phải tôi lý sự gì nhiều, nhưng viết tiếng Việt cho người ta hiểu đã khó, hiểu đúng còn khó hơn. Vì đã là hướng dẫn cho người khác thì phải chính xác. Ngay cả câu chị Hiền sửa lại: "Để tạo thêm layer, trong các trang web viết bằng HTML, tôi dùng bảng (table); còn ở blog Opera thì tôi dùng wrap." Vẫn chưa ổn cho lắm!
Tôi sẽ ví dụ ngay đây: tạo 1 table có nền màu trắng, tạo tiếp 1 table nằm trong table 1 có nền màu đen. Khi chị view trang web chị sẽ thấy hiện như thế nào? Table1 bao table2 nhưng không che được cái nền màu đen của table2. Đây chỉ là ví dụ thôi, chứ thật ra, browser nó sẽ dịch đoạn html của table2 trước, sau đó mới đến table1. Như thế này chưa thể gọi là layer được phải không nào?
Túm lại, để được gọi là 1 layer trên web thì ít nhất nó phải có:
- 1 thuộc tính nào đó để cho dù nó nằm ở đâu khi ta gọi thuộc tính đó thì nó phải đưa cái layer lên trên hoặc dưới các layer khác
- 1 thuộc tính để xác định vị trí hiển thị của layer
- ... còn mấy cái nữa chả nhớ
Còn vụ mở lớp dạy CSS thì tôi xin phép từ chối
Thủy Hiềndanquynh # Monday, August 6, 2007 5:01:45 AM
Theo tôi hiểu thì table 2 (màu đen) nằm trên, thì làm sao table 1 (màu trắng) nằm dưới che được? Ví dụ trong đoạn HTML của Cute Colors ở trên, cái table trong cùng (trên cùng) là table hiển thị đầy đủ nhất
Theo tôi biết, tạo table trong HTML thì có thể định vị trí (nằm trái, phải, giữa) và kích thước (bằng đơn vị pixel hoặc tỉ lệ phần trăm), chứ không định được trên, dưới, không lập lại, cố định,... như CSS được. Chẳng biết có phải không, nhưng từ khi biết cách chỉnh sửa webset tới giờ thì tôi chỉ biết có vậy
Chắc bạn còn nhớ tôi đã từng nói bài viết của tôi luôn được "duyệt" trước khi post
Tuy nhiên, bạn biết không? Tôi dị ứng với các smilies bạn sử dụng (và tôi nghĩ thuthuyqnm cũng thế), chúng làm tôi có cảm giác bạn đang chế giễu chứ không phải thiện chí, hic hic... Nếu không phải thì bạn bỏ qua nhé
Chào... đoàn kết và xây dựng, hihihi... (icon bắt tay cái nào
noobboy80 # Monday, August 6, 2007 6:24:15 AM
Chính vì table dùng như vậy nên "ít người" dùng nó để "tạo layer" bởi để xác định cái nào nằm trên cái nào nằm dưới người ta lại phải xem xem table nào nằm tít trong cùng
Pầu SưTỷtraitimbenphai # Thursday, August 9, 2007 6:13:04 AM
quianhlaluli # Monday, August 13, 2007 10:09:10 AM
heoconsusu # Thursday, October 11, 2007 3:07:36 AM
#menu_blog a { content: "Trang chủ"; }
#menu_archive a { content: "Lưu trữ"; }
#menu_albums a { content: "Albums"; }
#menu_links a { content: "Liên kết"; }
#menu_friends a { content: "Bạn bè"; }
#menu_about a { content: "Giới thiệu"; }
heoconsusu # Thursday, October 11, 2007 3:11:27 AM
Thủy Hiềndanquynh # Saturday, October 13, 2007 1:24:40 PM
Traitimbenphai, trả lời cho em rồi
Laluli
Heoconsusu, xem post "Viết tiếng Việt trên top menu của Blog Opera". Không hiểu câu 2
heoconsusu # Monday, October 15, 2007 2:42:58 AM
Thủy Hiềndanquynh # Tuesday, October 16, 2007 5:07:15 PM
(1) Bạn không tạo tag khi viết bài (xem "Khung soạn thảo của Blog Opera").
(2) Bạn để màu của tag trùng với màu nền nên không thấy.
Tương Phùngtuongphung # Tuesday, January 8, 2008 3:29:33 AM
Về vụ layer dùng bảng hay dùng wrap tôi có thể giải thích cho chị thế này:
- Trước kia, dân design tạo layer bằng bảng. Nhưng cách này phức tạp và có thể hiển thị không đúng trên các trình duyệt.
- Từ khi có CSS, dân "prồ" chuyển sang tạo layer (hay đúng hơn là design toàn bộ) bằng CSS với sự trợ giúp chủ yếu của thẻ DIV.
Trong thẻ DIV có mấy thuộc tính như sau:
Hà Quốc Việtvkjng # Sunday, January 20, 2008 8:26:03 AM
1 lời comment là ok ! http://my.opera.com/vkjng
Hoàng Kiênhnkien # Sunday, January 20, 2008 12:19:46 PM
Thủy Hiềndanquynh # Tuesday, February 12, 2008 4:29:15 AM
Vkjng
Hnkien
thuhientnk # Friday, February 29, 2008 10:04:39 AM
BÙI THANH KHIẾTthanhkhietbui # Friday, December 12, 2008 4:09:43 AM
trương Nhật nguyênkitingoan # Saturday, February 21, 2009 11:41:54 AM
Dollgirl141 # Friday, July 17, 2009 4:07:30 PM
Thanks!
Dollgirl141 # Friday, July 17, 2009 4:08:50 PM
Thanks!
oliuhollala # Sunday, September 5, 2010 5:47:29 AM
NguyenPhuongNguyenPhuong34 # Sunday, September 26, 2010 1:35:02 PM