Hiển thị các bài đăng có nhãn css-div-thiet-ke-web. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn css-div-thiet-ke-web. Hiển thị tất cả bài đăng
Cascading Style Sheets (CSS) Cung nhu bao ngon ngu lap trinh khac. ban nen viet thanh mot chuan de cho nguoi sau vao co the de dang chinh sua va nang cap cai cua ban.
Hình mẫu web 1
Đến với thiết kế web bạn cần có những công cụ hỗ trợ như sau:
1. Adobe Photoshop
bạn có thể tải bản CS5 rút gọn tại đây:
2. Adobe Dreamweaver
bạn có thể tải bản CS5 rút gọn tại:
hoạc
Notepad ++ Tải trên trang chủ (http://notepad-plus-plus.org/download/v6.1.3.html)
Dàn trang một website cũng như bạn làm bất kỳ một việc gì đó, kiếm tiền bạn nên tính toán rủi do hay tính toán một cách nhanh thu hồi vốn, con đường ngắn nhất để đi tới thành công nhất định.
Trước khi đi vào xây dựng một website điều đầu tiên bạn cần là phân tích ra giấy, website sẽ gồm có những gì và đặt nó ở đâu cho đẹp mắt, bạn nên có một bản phác thảo và tính toán kỹ lướng về độ rộng cũng như màu sắc các phần trên trang cho đẹp mắt và rễ ràng nhất.
Bạn hãy xem qua một số chuẩn do một số nhà phát triển website đưa ra để giúp chúng ta có được cái nhìn trực quan hơn trong việc dàn một website: Chuẩn 976px, 960px ... bạn có thể xem tại (http://www.adammer.com/)
Với Hình mẫu web 1 ở trên và theo chuẩn 960px thì tôi có thể vẽ lại để dàn trang như sau.Bạn hãy xem qua một số chuẩn do một số nhà phát triển website đưa ra để giúp chúng ta có được cái nhìn trực quan hơn trong việc dàn một website: Chuẩn 976px, 960px ... bạn có thể xem tại (http://www.adammer.com/)
Chuẩn 960px do http://www.adammer.com/ cung cấp
Chuẩn 960px dùng cho những loại màn hình 1024/800 khi thiết kế theo chuẩn thì sẽ thuận tiện chia cột và không bị vỡ trong các trình duyệt, chuẩn 960px được chia ra làm nhiều Column có thể là 16, 24 ... bạn có thể chia nhỏ như vậy thành các class rùi gọi khi nào bạn cần. Bạn cũng có thể tính toán và thiết kế riêng cho mình một chuẩn để thuận tiện cho việc phát triển website của bạn.
Hình minh họa 3
Phân tích như sau: khung ở giữa là 940px và được cách đều hai bên là 10px.
Trang được chia ra làm 3 phần chính là :
+ Phần một: (header)
- Bao gồm:
Banner: Hiển thị banner của công ty, có thể chia làm hai cột cột bên trái là logo công tu còn bên phải là banner và quáng cáo.
menu:Các phần chính của website mà bạn cần quan tâm khi tới website này.
showimage:Những hình ảnh mới, hoạt động mô tả lĩnh vực của công ty.
search:Tìm kiếm trong trang web, trên google ...
+ Phần hai :(container)
- Bao gồm:
Left: chứa các menu nhỏ, những tin vắn hay là những tiện ích người dùng.
Right: Là phần hiển thị thông tin chính của trang.
+ Phần ba: (Footer)
- Bao gồm
Thông tin bản quyền, các liên kết nhanh, menu con và điều khoản ...
Làm sao để chia các khung như trên mà trên các website không bị vỡ? tôi thường làm như sau.
đầu tiên bạn sẽ sử dụng một thẻ HTML là thẻ DIV và các thuộc tính của nó như ID và CLASS để làm.
Các lệnh css sẽ dùng là:
float: bạn sẽ dùng tới hai thuộc tính là float: left; và float: right; dùng để định vị trí cho thẻ div nằm bên trái hay phải..
bolder: Dùng để bao quanh một thẻ DIV.
clear:bold; dùng để xóa bỏ những thuộc tính trùng lập và phân cách các thẻ DIV.
width:; độ rộng cho mỗi thẻ DIV.
margin:0 auto; Dùng cái này để cho thẻ DIV nằm chính giữa màn hình.
padding: ; Dùng để tạo khoảng cách giữa các thẻ DIV bên trong.
margin: Dùng để tạo khoảng cách giữa các trang web bên ngoài.
Bạn sẽ viết lần lượt như sau:
CSS
<style type="text/css"> body { background:#666; } *{ font:100%; font-family:Arial, Helvetica, sans-serif; padding:0; margin:0; } #DFbody { width:960px; margin:0 auto; background:#FFF; } .breck { clear:both; border:0; } .banner, .menu, .showimage, .search, .container, .footer{ width:940px; margin:0 auto; /*thử*/ border:1px solid #063; padding:10px 0 10px 0; } .containerleft{ float:left; width:280px; border:#C90 1px solid; background:#FFF; } .containerright{ float:right; width:640px; border:#C90 1px solid; background:#FFF; } .left {float:left;} .right {float:right;} .sysgrid220{ width:220px; border:1px solid #036;} .marginr{ margin-right:17px; } </style>
HTML
<div id="DFbody"> <div class="DFhead"> <div class="banner">Banner</div> <div class="menu">Menu</div> <div class="showimage">Showimage</div> <div class="search">search</div> </div> <div class="breck"></div> <div class="container"> <div class="containerleft">container left</div> <div class="containerright">container right</div> </div> <div class="breck"></div> <div class="footer"> <div class="footer-title">footer</div> <div class="breck"></div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 right">sysgrid220 left</div> <div class="breck"></div> </div> <div class="breck"></div> </div>
Làm sao để chia các khung như trên mà trên các website không bị vỡ? tôi thường làm như sau.
đầu tiên bạn sẽ sử dụng một thẻ HTML là thẻ DIV và các thuộc tính của nó như ID và CLASS để làm.
Các lệnh css sẽ dùng là:
float: bạn sẽ dùng tới hai thuộc tính là float: left; và float: right; dùng để định vị trí cho thẻ div nằm bên trái hay phải..
bolder: Dùng để bao quanh một thẻ DIV.
clear:bold; dùng để xóa bỏ những thuộc tính trùng lập và phân cách các thẻ DIV.
width:; độ rộng cho mỗi thẻ DIV.
margin:0 auto; Dùng cái này để cho thẻ DIV nằm chính giữa màn hình.
padding: ; Dùng để tạo khoảng cách giữa các thẻ DIV bên trong.
margin: Dùng để tạo khoảng cách giữa các trang web bên ngoài.
Bạn sẽ viết lần lượt như sau:
CSS
<style type="text/css"> body { background:#666; } *{ font:100%; font-family:Arial, Helvetica, sans-serif; padding:0; margin:0; } #DFbody { width:960px; margin:0 auto; background:#FFF; } .breck { clear:both; border:0; } .banner, .menu, .showimage, .search, .container, .footer{ width:940px; margin:0 auto; /*thử*/ border:1px solid #063; padding:10px 0 10px 0; } .containerleft{ float:left; width:280px; border:#C90 1px solid; background:#FFF; } .containerright{ float:right; width:640px; border:#C90 1px solid; background:#FFF; } .left {float:left;} .right {float:right;} .sysgrid220{ width:220px; border:1px solid #036;} .marginr{ margin-right:17px; } </style>
HTML
<div id="DFbody"> <div class="DFhead"> <div class="banner">Banner</div> <div class="menu">Menu</div> <div class="showimage">Showimage</div> <div class="search">search</div> </div> <div class="breck"></div> <div class="container"> <div class="containerleft">container left</div> <div class="containerright">container right</div> </div> <div class="breck"></div> <div class="footer"> <div class="footer-title">footer</div> <div class="breck"></div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 left marginr">sysgrid220 left</div> <div class="sysgrid220 right">sysgrid220 left</div> <div class="breck"></div> </div> <div class="breck"></div> </div>
kết quả
Tôi sẽ giải thích xâu hơn trong bài tiếp theo.
Bài đăng
