Để Làm Được Blog Đẹp
Thursday, 12. January 2009, 03:50:54
Sau gần nửa tháng mày mò, tìm hiểu về Blog tôi muốn chia sẽ với các bạn những bước để làm một Blog đẹp, chuyên nghiệp .( tất nhiên là những kinh nghiệm qua việc làm Blog Winddesign).1.Để làm một blog đẹp và chuyên nghiệp đầu tiên các bạn phải định hướng cho blog của mình2.sau đó các bạn hãy tìm cho mình một skin (giao diện) phù hợp với ý tưởng của mình (các bạn nên tham khảo qua 2 Blog http://my.opera.com/phamlam và http://my.opera.com/danquynh tại hai blog này có rất nhiều thủ thuật liên quan đến blog ), trong các bộ skin này gồm 2 phần chính: phần thứ nhất là mã CSS tức một loại ngôn ngữ định dạng và bài trí layout (bố cục).Phần thứ hai là Skin chính xác là các hình ảnh sẽ xuất hiện và tạo thành giao diện cho blog3.Sau khi tìm được các skin cho mình các bạn hãy tìm đoạn mã CSS thường có tên là user.css, các bạn mở nó ra bằng notepad của winddown và tìm đọc các các đoạn mã đó. Tất nhiên công việc này không dễ - bạn phải có một ít kiến thức tiếng Anh hoặc bạn phải hiểu các câu chử tiếng Anh đó là gì.Chẳng hạn từ body là thân sườn của bố cục, background là ảnh nền, border là đường viền, color là màu sắc, px la đơn vị đo, vi dụ border: 1px có nghĩa là đường viền đó có độ rộng là 1 pixel v.v...Nhưng cũng không khó lắm đâu, các bạn có thể thử nghiệm từng bước, như thử thay đổi một vài thông số màu ( thông số màu của ngôn ngữ lập trình web là hệ hexa như #fff, #ff000 v.v... các th ông số này dễ nhất là tìm trong bảng màu của Photoshop.) hoặc thay đổi các liên kết ví dụ đoạn mã sau dây :body {background:url(http://files.myopera.com/danquynh/journal/bg.jpg);margin:0;padding:0;font-family: Arial, Tahoma,'trebuchet ms',helvetica,sans-serif; /*Font chu mac dinh tren toan bo blog*/font-size:12px;line-height:145%;text-align:center;color:#5163A5;}dòng chữ: background:url(http://files.myopera.com/danquynh/journal/bg.jpg), trong đó background là ảnh nền, url(http://files.myopera.com/danquynh/journal/bg.jpg) là liên kết của ảnh nền.margin là canh lề, padding là khoảng cách4.Bây giờ các bạn tiên hành thiết kế lại giao diện cho mình, có 2 cách:a/.cách thứ nhất: bạn k
hởi động photoshop lên, mở tất cả các hình ảnh mà sau này sẽ là các phần tử cấu thành nên giao diện blog, mỗi phần tử hình ảnh này tương ứng với các tên gọi như Background, topbar, footer vv...Sau đó bạn chuyển chúng thành các tông màu mà bạn muốn chuyển.Ví dụ: tôi mở hinh ảnh có tên banner, tức là banner của Blog.Trong photoshop bấm phím Ctrl+U kéo thanh trượt HUE để có màu sắc mong muốn.Bạn làm như vậy cho tất cả các phần tử hình ảnh.Tiếp theo bạn vào blog của mình chọn mypage/acount/file, up tất cả các hinh ảnh này lên, khi đã hoàn tất bấm chuột phải vào các hình ảnh vừa up, chọn properties bạn sẽ thấy đường đẫn của file bạn đã up, copy các đường dẫn này past vào thay thế các đường dẫn trong file user.css. Xong các bạn copy toàn bộ mã của file user.css dán vào Custom style sheet. Save lại.b/cách thứ hai: chuyên nghiệp hơn, bạn phải thiết kế lại skin. Sau khi đã chiêm nguỡng skin mới của mình (bằng cách thay đổi từ một skin khác).Bạn chụp màn hình bằng phím Print Screen, vào Photoshop new một trang mới bấm Ctrl+v để dán giao diện mình vừa chụp được. Bước này nhằm làm tham chiếu cho thiết kế, bạn gióng các guide vào các vùng bạn muốn thiết kế, sau đó bạn thiết kế theo ý muốn của mình, (giao diện của tôi thiết kế lại dựa trên skin beccary từ blog của danquynh). Điều lưu ý là các bạn phải xác định được các phần tử skin thì mới làm được.Sau khi thiết kế skin xong bạn save lại skin này bằng đuôi jpg. Mở skin có đuôi jpg này lên đồng thời mở các phần tử skin cũ lên lôi chung vào skin mới thiết kế, lúc này các bạn đặt chúng đúng vị trí trên skin mới, chọn phần tử skin cũ bấm vào bảng layer nhấn Ctrl click chọn vào layer phần tử skin củ để tạo vung chọn, xong bạn chọn vào layer skin mới nhấn Ctrl+j để tạo một lớp mới lớp mới này chinh là phần tử skin mới. Tới đây chắc các bạn đã hiểu. Và như thế các bạn cứ tiếp tục cho các phần tử skin khác. Tiếp theo bạn vào blog của mình chọn mypage/acount/file, up tất cả các hinh ảnh này lên, khi đã hoàn tất bấm chuột phải vào các hình ảnh vừa up, chọn properties bạn sẽ thấy đường đẫn của file bạn đã up, copy các đường dẫn nà
y past vào thay thế các đường dẫn trong file user.css. Xong các bạn copy toàn bộ mã của file user.css dán vào Custom style sheet. Save lại.5. Mục đích của tôi là làm sao có thể có một blog đẹp, rõ ràng tương tự như của danquynh và phạmlâm hì hì ( tôi cũng chỉ đi học lóm ở hai blog này thôi mà).Lúc đầu tôi dựa trên mã Skin Beccary nên có một số lỗi như albumslide bị lỗi, box visitor cũng vậy, cảm thấy rất khó chịu nhưng sau một đêm tìm hiểu tôi đã sửa được 2 lỗi này, và blog tôi cũng không có các box như của danquynh va phamlam, cũng không có readmore.Như vậy, sau khi thiết kế xong blog của bạn phải ít nhất là giống Blog của WinddesignVà lúc này bạn hoàn toàn có một skin mới dựa trên sườn skin có sẵn. Chúc các bạn thành công.Mọi thắc mắc các bạn có thể comment cho tôi, tôi sẽ trả lời.
Thursday, 12. January 2009, 03:50:54
Sau gần nửa tháng mày mò, tìm hiểu về Blog tôi muốn chia sẽ với các bạn những bước để làm một Blog đẹp, chuyên nghiệp .( tất nhiên là những kinh nghiệm qua việc làm Blog Winddesign).1.Để làm một blog đẹp và chuyên nghiệp đầu tiên các bạn phải định hướng cho blog của mình2.sau đó các bạn hãy tìm cho mình một skin (giao diện) phù hợp với ý tưởng của mình (các bạn nên tham khảo qua 2 Blog http://my.opera.com/phamlam và http://my.opera.com/danquynh tại hai blog này có rất nhiều thủ thuật liên quan đến blog ), trong các bộ skin này gồm 2 phần chính: phần thứ nhất là mã CSS tức một loại ngôn ngữ định dạng và bài trí layout (bố cục).Phần thứ hai là Skin chính xác là các hình ảnh sẽ xuất hiện và tạo thành giao diện cho blog3.Sau khi tìm được các skin cho mình các bạn hãy tìm đoạn mã CSS thường có tên là user.css, các bạn mở nó ra bằng notepad của winddown và tìm đọc các các đoạn mã đó. Tất nhiên công việc này không dễ - bạn phải có một ít kiến thức tiếng Anh hoặc bạn phải hiểu các câu chử tiếng Anh đó là gì.Chẳng hạn từ body là thân sườn của bố cục, background là ảnh nền, border là đường viền, color là màu sắc, px la đơn vị đo, vi dụ border: 1px có nghĩa là đường viền đó có độ rộng là 1 pixel v.v...Nhưng cũng không khó lắm đâu, các bạn có thể thử nghiệm từng bước, như thử thay đổi một vài thông số màu ( thông số màu của ngôn ngữ lập trình web là hệ hexa như #fff, #ff000 v.v... các th ông số này dễ nhất là tìm trong bảng màu của Photoshop.) hoặc thay đổi các liên kết ví dụ đoạn mã sau dây :body {background:url(http://files.myopera.com/danquynh/journal/bg.jpg);margin:0;padding:0;font-family: Arial, Tahoma,'trebuchet ms',helvetica,sans-serif; /*Font chu mac dinh tren toan bo blog*/font-size:12px;line-height:145%;text-align:center;color:#5163A5;}dòng chữ: background:url(http://files.myopera.com/danquynh/journal/bg.jpg), trong đó background là ảnh nền, url(http://files.myopera.com/danquynh/journal/bg.jpg) là liên kết của ảnh nền.margin là canh lề, padding là khoảng cách4.Bây giờ các bạn tiên hành thiết kế lại giao diện cho mình, có 2 cách:a/.cách thứ nhất: bạn k
hởi động photoshop lên, mở tất cả các hình ảnh mà sau này sẽ là các phần tử cấu thành nên giao diện blog, mỗi phần tử hình ảnh này tương ứng với các tên gọi như Background, topbar, footer vv...Sau đó bạn chuyển chúng thành các tông màu mà bạn muốn chuyển.Ví dụ: tôi mở hinh ảnh có tên banner, tức là banner của Blog.Trong photoshop bấm phím Ctrl+U kéo thanh trượt HUE để có màu sắc mong muốn.Bạn làm như vậy cho tất cả các phần tử hình ảnh.Tiếp theo bạn vào blog của mình chọn mypage/acount/file, up tất cả các hinh ảnh này lên, khi đã hoàn tất bấm chuột phải vào các hình ảnh vừa up, chọn properties bạn sẽ thấy đường đẫn của file bạn đã up, copy các đường dẫn này past vào thay thế các đường dẫn trong file user.css. Xong các bạn copy toàn bộ mã của file user.css dán vào Custom style sheet. Save lại.b/cách thứ hai: chuyên nghiệp hơn, bạn phải thiết kế lại skin. Sau khi đã chiêm nguỡng skin mới của mình (bằng cách thay đổi từ một skin khác).Bạn chụp màn hình bằng phím Print Screen, vào Photoshop new một trang mới bấm Ctrl+v để dán giao diện mình vừa chụp được. Bước này nhằm làm tham chiếu cho thiết kế, bạn gióng các guide vào các vùng bạn muốn thiết kế, sau đó bạn thiết kế theo ý muốn của mình, (giao diện của tôi thiết kế lại dựa trên skin beccary từ blog của danquynh). Điều lưu ý là các bạn phải xác định được các phần tử skin thì mới làm được.Sau khi thiết kế skin xong bạn save lại skin này bằng đuôi jpg. Mở skin có đuôi jpg này lên đồng thời mở các phần tử skin cũ lên lôi chung vào skin mới thiết kế, lúc này các bạn đặt chúng đúng vị trí trên skin mới, chọn phần tử skin cũ bấm vào bảng layer nhấn Ctrl click chọn vào layer phần tử skin củ để tạo vung chọn, xong bạn chọn vào layer skin mới nhấn Ctrl+j để tạo một lớp mới lớp mới này chinh là phần tử skin mới. Tới đây chắc các bạn đã hiểu. Và như thế các bạn cứ tiếp tục cho các phần tử skin khác. Tiếp theo bạn vào blog của mình chọn mypage/acount/file, up tất cả các hinh ảnh này lên, khi đã hoàn tất bấm chuột phải vào các hình ảnh vừa up, chọn properties bạn sẽ thấy đường đẫn của file bạn đã up, copy các đường dẫn nà
y past vào thay thế các đường dẫn trong file user.css. Xong các bạn copy toàn bộ mã của file user.css dán vào Custom style sheet. Save lại.5. Mục đích của tôi là làm sao có thể có một blog đẹp, rõ ràng tương tự như của danquynh và phạmlâm hì hì ( tôi cũng chỉ đi học lóm ở hai blog này thôi mà).Lúc đầu tôi dựa trên mã Skin Beccary nên có một số lỗi như albumslide bị lỗi, box visitor cũng vậy, cảm thấy rất khó chịu nhưng sau một đêm tìm hiểu tôi đã sửa được 2 lỗi này, và blog tôi cũng không có các box như của danquynh va phamlam, cũng không có readmore.Như vậy, sau khi thiết kế xong blog của bạn phải ít nhất là giống Blog của WinddesignVà lúc này bạn hoàn toàn có một skin mới dựa trên sườn skin có sẵn. Chúc các bạn thành công.Mọi thắc mắc các bạn có thể comment cho tôi, tôi sẽ trả lời.
Không có nhận xét nào:
Đăng nhận xét