Thủy Hiền

Tạo skin cho Blog Opera từ một webset

Friday, 3. August 2007, 23:48:18

Lâu rồi, em Sói có hỏi:

chị có rành về CSS không, vì em thấy 1 số trang khác sử dụng tem cũng dạng CSS nhưng em không biết CSS có khác nhau nhiều về loại hay gì không? Vì em tìm được 1 số cái cũng hay hay muốn chuyển qua dùng opera như chị mà không biết cách nào.

Tôi cũng đã trả lời rất nhiều lần rằng tôi chẳng biết CSS đâu

Tôi đã từng học rất giỏi... Toán, đặc biệt là Hình học Không gian

Khoe điều này để giải thích rằng tôi tưởng tượng giỏi lắm, hihihi... Mà thật ra, nếu bạn để ý một tí thì sẽ thấy rằng nhìn được cách sắp xếp các hình ảnh của một trang web không khó bằng xem hình vẽ ba chiều của một bài Hình học Không gian đâu

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 360^o, 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)

Nhảm sự... CSSBún riêu cua

Comments

noobboy80 # 5. August 2007, 01:01

Có 1 chỗ chưa chính xác

Để tạo thêm layer, trong HTML người ta dùng bảng (table); còn ở Opera thì dùng wrap.

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

Vâng, layer tiếng Việt là 1 lớp hiển thị. Và thường thì người ta sẽ dùng DIV hoặc SPAN để tạo 1 lớp trên trang web với thuộc tính z-index

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ền # 5. August 2007, 03:02

Cám ơn bạn đã quan tâm. Tôi chỉ tự mò HTML và CSS theo nhu cầu viết một trang web cho con gái và gia đình. Và tôi đã mạnh dạn báo cáo kết quả với mọi người bằng một topic hướng dẫn HTML tại diễn đàn WTT và những bài viết hướng dẫn thay đổi giao diện của Blog Opera trong blog này. Và với những người đã theo "học" cả 2 "lớp" trên thì đó là cách so sánh dễ hình dung nhất (mà thật ra, tôi cũng chỉ biết đến có vậy, và không có nhu cầu phải học thêm nữa).

Theo góp ý của bạn, tôi sẽ chỉnh lại câu đó thành:

Để 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.

Còn những thứ như DIV, SPAN,... thì tôi cũng có dùng (bằng cách chỉnh websets

), nhưng chẳng hiểu cặn kẽ về chúng (bằng table và wrap) nên tôi chẳng dám hướng dẫn ai cả. Mà tôi nghĩ các bố mẹ của WTT, với nhu cầu tạo website hoặc blog cho con, cũng không có nhu cầu cao như vậy đâu

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ỷ # 6. August 2007, 01:58

@noobboy80: Nhiều chuyện quá

, muốn lý sự về CSS và HTML mà viết bằng tiếng việt thì biết chừng nào mới xong. Viết bằng tiếng việt thì viết sao cho người đọc hiểu là OK lắm rồi, còn muốn chính xác từ câu chữ thì hình như viết tiếng Anh sẽ dễ hơn đấy nhễ (híc, nói vậy thôi chứ đừng ai tưởng là tui giỏi tiếng anh đó

).
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 # 6. August 2007, 03:59

Tôi đâu có nhiều chuyện lắm đâu thuthuyqnm

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

Tôi chẳng có trình độ CSS cao siêu gì, lại không có kỹ năng sư phạm nên có muốn mở cũng khó. Chẳng qua tôi thấy bài viết này của chị Hiền có chỗ chưa ổn nên góp ý thôi. Dù có thể góp ý của tôi sai toét nhưng tôi tin rằng như thế chất lượng bài hướng dẫn sẽ được nâng cao. Vì sao ư? Vì chị Hiền chắc sẽ phải xác thực lại bài viết của chị ấy, và chị ấy sẽ thấy đc nhiều cái hay ho khác nữa

Một bài hướng dẫn mà không có những phản hồi về nội dung mà chỉ là phản hồi kiểu: em cám ơn...thì có khác nào cô giáo đứng lớp giảng đều đều, học trò cắm cúi ghi mà chả cần phải "nghi ngờ" những điều cô giảng

Thủy Hiền # 6. August 2007, 05:01

Hì hì... đã viết lại là "tôi dùng...", vì tôi chỉ biết có nhiêu đó thôi và tôi hướng dẫn các bạn cái mà tôi biết thôi nhé

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?

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

Có nghĩa là tôi chưa bao giờ tự tin rằng bài viết của mình là hoàn hảo cả, đặc biệt trong lĩnh vực mà tôi toàn tự mò mẫm thôi

Vì vậy, tôi rất cám ơn bạn đã góp ý

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 # 6. August 2007, 06:24

Ui, toàn emoticon cười toe toét mà, sao lại bảo tôi chế diễu được

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

Bảng lồng bảng rối tung rối mù. Nếu web nào chỉ đơn thuần là text & ko hiệu ứng màu mè thì dùng bảng cũng tạm ổn nhưng với web có tương tác hoặc áp dụng AJAX thì hiếm ai dùng bảng (nếu có dùng thì cũng dùng DOM để chèn dữ liệu - như Opera blog này này, phần add URL hiện ở sidebar

)

mai thi # 9. August 2007, 06:13

chị ơi giúp em với sao cái skin của em nó thnàh ra vầy rùi , save hoài mà không được

quianh # 13. August 2007, 10:09

cảm ơn bài viết này của chị nhé. Em đọc đã hình dung được phần nào nguyên tắc chỉnh từ 1 webset thành skin opera

heoconsusu # 11. October 2007, 03:07

Pham Lam co gioi thieu chuyen doi noi dung cua menu bar thanh tieng viet bang cach su dung doan code duoi day. Nhung sao minh khong lam duoc, khong biet co bi sai khong. Xem ho minh voi
#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 # 11. October 2007, 03:11

Ah, them mot cai nua la o phan Archive , minh muon hien cac entry vua list theo thang va theo tag luon thi minh lam sao?

Thủy Hiền # 13. October 2007, 13:24

Noobboy80, cười nhiều quá nên...

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 # 15. October 2007, 02:42

Bình thường thì o menu Archive sẽ list ra các entry được xếp thứ tự theo ngày. Nhưng mìnnh thấy ở blog của bạn thì vừa list theo ngày và list theo tag nữa. :-))

Thủy Hiền # 16. October 2007, 17:07

Đó là mặc định của Opera. Bạn xem các blog khác đi, cũng y chang vậy à

Còn nếu bạn không thấy thì có 2 lý do:

(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ùng # 8. January 2008, 03:29

Cám ơn chị Quỳnh chỉ cho link này. Giờ tôi hiểu rõ hơn mấy cái wrap rồi.
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:

Khi phân tích, các trình duyệt sẽ tìm mấy cái "ididid" và "clclcl" kia để hiển thị cho đúng.
Opera dựng trang web HTML bằng các thẻ DIV còn người dùng chỉnh sửa bằng cách sửa đổi các "ididid" và "clclcl" trong file CSS. Opera mà dùng bảng thì 100% là không thể customize được.
Như vậy, mấy cái #wrap, #topbar, #mainwrap, v.v chính là "ididid". Ngòai ra nếu cùng 1 id mà muốn phân biệt thêm ra thì dùng thêm thuộc tính class. Ví dụ cùng là link nhưng chỗ này chị muốn link màu xanh, chỗ kia chị muốn link màu đỏ thì chị chỉnh các "clclcl" (ví dụ mấy cái .mobile, .hide chính là class đó!)
Như vậy việc chị nói để tạo layer ở Opera chị dùng wrap là không có gì sai cả! Opera tạo sẵn các thẻ DIV nhưng bản thân nó chưa thể thành layer nếu không có sự chỉnh sửa của người dùng với wrap, content, v.v...
Không biết tôi trình bày thế có rõ không

Hà Quốc Việt # 20. January 2008, 08:26

vừa làm xong 1 cái skin Blog opera , không biết ý kiến mọi người thế nào . Chị Dan Quynh có thể ghé qua và nhận xét cho em dc ko ?
1 lời comment là ok ! http://my.opera.com/vkjng