Now Reading [
Tự học thiết kế website với DreamWeaver
] News
Tạo giao diện căn bản trong DreamWeaver
email
follow
Đây là bài đầu tiên trong loạt bài hướng dẫn thiết kế web với DreamWeaver, vnMedian sẽ hướng dẫn bạn tự xây dựng một trang đơn giản nhất trong DreamWeaver (DW). Kết thúc bài này, bạn có thể nắm bắt được các vấn đề như
- Sử dụng HTML
- Sử dụng cơ bản CSS
- Cách đặt tên file cho web của bạn
- Cài đặt firebug cho firefox
- Địa chỉ nâng cấp lên Internet Explorer (IE) 10
Đầu tiên mở chương trình DW, chọn menu File > New.
Một trang mới được tạo ra, nếu bạn đang trong môi trường code bạn sẽ thấy các dòng code do phần mềm tạo ra, nếu bạn trong chế độ Design thì bạn sẽ không thấy gì, hãy chọn kiểu Code để thấy các dòng code mặc định này.
Những dòng code trên là phiên bản ngôn ngữ HTML cũ, làn sóng HTML5 đang lên cao trong giới thiết kế web trên toàn thế giới, chúng ta cũng không thể bỏ qua làn sóng này, nên chúng ta sẽ thay đổi lại cho phù hợp với công nghệ mới, công nghệ HTML5.
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="vi-vn" dir="ltr">
<head>
<!-- Khai báo sử dụng ngôn ngữ tiếng việt trong website -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Trong đoạn code trên, bạn thấy sẽ đơn giản hơn rất nhiều so với code mặc định. Tuy nhiên, để web có thể hiển thị được các ngôn ngữ châu Á như tiếng Việt, chúng ta phải khai báo charset là utf-8 như sau:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Khi người xem xem bằng các thiết bị di động như điện thoại thông minh, máy tính bảng, chúng ta sẽ thêm 1 hàng code sau đây vào phần khai báo header của website. Mục đích của dòng code này sẽ làm cho website của bạn luôn luôn vừa vặn trên thiết bị người xem.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Như vậy về cơ bản, các bạn có thể gõ được tiếng Việt. Các bạn lưu ý 1 điều là bộ gõ tiếng Việt của các bạn phải sử dụng bảng mã unicode thì mới được, nếu không trình duyệt sẽ không hiển thị đúng tiếng Việt. Còn kiểu gõ thì bạn thích gõ kiểu gì thì tùy ý.
Lưu tập tin
Bạn tạo thư mục để lưu toàn bộ website của bạn, ví dụ thư mục fisrtsite trong ổ D của bạn, tên file đầu tiên của bạn phải là index.html. Lưu ý, tên tập tin và tên file nên dùng ký tự thường, vì có thể sẽ gây ra lỗi đường dẫn khi đưa website lên mạng do đa số hệ thống server ở VN dùng Linux nên nó phân biệt ký tự thường và ký tự Hoa là 2 ký tự khác nhau.
Định dạng file của web là html hoặc htm. Khi bạn đặt tên theo với phần đuôi là html, mỗi khi nhấp đôi trái chuột lên file này, nó sẽ được chạy trong trình duyệt mặc định trong máy tính của bạn. Trong toàn bộ hệ thống website, file đầu tiên và mặc định luôn luôn được gọi là index.html.
File index.html rất quan trọng, nó như cửa chính trong nhà bạn, nếu bạn muốn vào nhà, bạn phải luôn luôn đi qua cánh cửa này, file index.html này cũng vậy. Khi khách hàng nhập địa chỉ web, file đầu tiên sẽ chạy chính là index.html.
Hãy dùng trình duyệt của Google Chrome.
Google chẳng thưởng cho mình 1USD nào tiền công giới thiệu cả, đơn giản bởi vì trình duyệt này đã tích hợp công cụ kiểm tra lỗi khi thiết kế web, hỗ trợ tốt HTML5, CSS3, ngôn ngữ Javascript đã được tối ưu và cơ chế bắt lỗi dò lỗi cũng tiện dụng. Nó là trình duyệt tuyệt vời cho bạn thiết kế web. Nếu bạn thích dùng FireFox thì bạn phải cài thêm add-on firebug để dùng cho việc kiểm tra lỗi khi thiết kế web. Đối với trình duyệt Internet Explorer (IE) của Microsoft thì hãy dùng phiên bản 10 hoặc mới hơn vì từ phiên bản này, IE mới hỗ trợ tốt ngôn ngữ HTML5 và cũng có tích hợp công cụ sửa lỗi (debug) thiết kế website. Nếu các bạn sử dụng trình duyệt IE cũ hơn, hãy nâng cấp lên Internet Explorer 10 hoặc cao hơn càng sớm càng tốt.
Bố cục website
Bây giờ chúng ta bắt đầu với bố cục của một website. Bố cục web cũng rất phong phú. Chúng ta sẽ bắt đầu với 1 bố cục rất thịnh hành cách đây vài năm. Mặc dù bố cục này vẫn còn nhiều web sử dụng, nhưng nó thể hiện nhiều khuyết điểm, vnMedian chọn bố cục này nhằm mục đích học tập để hướng dẫn cho các bạn.
(nguồn ảnh : http://www.codercaste.com)
Theo bố cục trên, chúng ta sẽ dùng phần Header để đặt banner, menu chính. Cột Menu bên trái dùng để thể hiện các thông tin về menu chi tiết khác. Cột Content dùng để thể hiện các nội dung, cột phải (Call To Action) chúng ta sẽ dùng để đặt banner, logo nào đó. Cuối cùng , vùng Footer thường dùng để đặt các thông tin liên hệ, các menu không quan trọng khác.
Đơn vị tính và kích thước website
Đơn vị tính trong thiết kế website thường là Pixel (px) hoặc đơn vị “em”. Mình thích đơn vị px hơn do phù hợp với điểm ảnh trên màn hình nên dễ xử lý. Chiều ngang của website nên là 960px. Đây là kích thước chuẩn để có thể chạy tốt trên tất cả các màn hình máy tính, laptop, máy tính bảng từ 7 inch trở lên. Vị trí của website luôn luôn nằm giữa màn hình. Trên thế giới 99% website đều canh giữa màn hình, cho dù kích thước màn hình có rộng bao nhiêu thì nó cũng vẫn luôn luôn phải nằm giữa. Lý do là nhằm giúp người xem dễ tập trung vào nội dung hơn.
Bắt đầu
Vẽ khung bằng thẻ DIV
Chọn menu Insert > Tag, chọn HTML bên trái và div bên phải, chọn Insert như hình
Hộp thoại mới mở ra, chọn Style Sheet/Accessibility bên trái, bên phải nhập như trong hình sau
Kết quả chúng ta được 1 dòng code như sau:
<div id="all" title="Khung website ngoai cung"></div>
Tag DIV trên có mã nhận dạng là all, hoặc #all dùng trong CSS.
Trong ngôn ngữ HTML, tag là các lệnh để trình duyệt thực hiện điều chúng ta muốn làm.
Tất cả tag đều phải sử dụng 1 cặp, một cái mở và một cái đóng. Tag đóng phải có dấu (/) phía trước, ví dụ: <div></div> . Ngôn ngữ HTML và CSS không phân biệt ký tự hoa hay thường, bạn viết kiểu gì nó cũng chạy miễn là đúng tên của nó. Tuy nhiên, các bạn nên viết thường để tạo thành thói quen, vì trong ngôn ngữ Javascript có phân biệt ký tự hoa và ký tự thường, bạn viết sai nó sẽ không chạy mà cũng không báo lỗi, chỉ có debug mới biết.
Trong HTML, để vẽ khung, chúng ta sẽ dùng tag (thẻ) DIV để tạo, mặc định tất các các khung được tạo bằng thẻ div đều vô hình, kích thước dài , rộng là 0. Tránh sử dụng table để tạo khung, đây là cách làm của những người thiết kế web yếu tay nghề.
Chúng ta cũng đặt 1 mã quản lý cho nó là thuộc tính ID, ví dụ: all, ID phải là tên duy nhất của 1 tag. Dựa vào mã ID này, chúng ta sẽ có nhiều việc phải làm về sau cho nó.
Tiếp theo chúng ta sẽ cài đặt kích thước, màu viền cho khung vừa tạo với CSS
Trong chế độ Design, trong ô CSS bên phải, chọn tab CSS style, chọn biểu tượng danh sách bên góc phải, chọn New
Hộp thoại mới mở ra, chọn như trong hình với Selector là #all chính là mã ID của thẻ DIV mà chúng ta vừa tạo ở trên. Chúng ta đang tạo CSS cho thẻ DIV phía trên.
Hộp hội thoại mới lại mở ra. Bây giờ chúng ta sẽ cài đặt đường viền có dạng thẳng (solid), độ dày là 1px, màu là #CC3300. Nhập các thông số như trong hình. Lưu ý: nếu trong danh sách sổ xuống không có, bạn hãy nhập giá trị vào như trong hình. Các ô chọn Same for all tức là sẽ áp dụng thông số cho 4 cạnh của hình chữ nhật.
Tiếp theo chúng ta sẽ thiết lập kích thước của khung #all.
Nhấn OK để áp dụng CSS cho web. Bây giờ bạn mở chế độ code, bạn sẽ thấy 1 đoạn code nữa hiện ra. Chúng ta sẽ giải thích sau, bây giờ bạn vào thư mục đã lưu file index.html và chạy file này để xem kết quả đã tạo ra, bạn sẽ thấy 1 khung màu đỏ nằm giữa màn hình.
Giải thích CSS
Sau khi thực hiện một loạt các thao tác như trên, bạn sẽ nhận được một đoạn code CSS như dưới đây.
CSS, Javascript khi tương tác với các phần tử hay tag HTML đều phải thông qua ID của tag đó, ở đây là ID='all". CSS quy định phân biệt ID là đặt dấu # trước tên ID, cụ thể là #all. Trình duyệt sẽ xử lý và trả kết quả cho chúng ta theo những gì chúng ta yêu cầu nó thực hiện giống như đoạn mã CSS dưới đây.
Viết CSS không khó, nếu biết kết hợp chúng một cách nhuần nhuyễn, bạn sẽ tạo ra cho mình một website vừa đẹp lại vừa sang trọng.
Cách học giỏi CSS mau nhất chính là sử dụng công cụ debug của trình duyệt để kiểm tra CSS người ta đã viết cho tag đó như thế nào, thông số ra sao và những cái mới trong CSS3 được áp dụng như thế nào. Nhiều thủ thuật hay của các nhà thiết kế website trên thế giới đều ẩn chứa trong đó, quan trọng là bạn khai thác tìm hiểu chúng như thế nào. Nếu bạn làm giống như cách mình nói thì chỉ trong khoảng 1 tháng bạn sẽ trở thành chuyên gia về CSS và sách vỡ tài liệu dạy CSS trong nhà sách, trong nhà trường chỉ là thứ vứt đi.
Đó là lý do vnMedian không chỉ bạn tường tận từng câu lệnh CSS, HTML mà muốn bạn học chúng thông qua quan sát các ví dụ cụ thể thực tế. Đó là mới là sách đáng cho bạn học mà lại miễn phí nữa chứ.
<style type="text/css">
<!--
#all {
height: 500px; // đặt chiều cao là 500px
width: 960px; // đặt chiều rộng là 960px
border: 1px solid #CC3300; //Đường viền 1px kiểu tô đặc liền nét, màu sắc cam hơi đỏ. Mã màu ở dạng thập lục phân, trước nó phải có dấu #.
// Đoạn code margin dưới đây làm cho khung chữ nhật luôn luôn canh giữa màn hình.
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
//Chúng ta có thể viết ngắn gọn cho đoạn code trên như sau
margin: 0 auto;
}
-->
</style>
Vì chúng ta đang đặt CSS trong cùng 1 file nên nó phải bắt buộc nằm trong đoạn bao như cấu trúc dưới đây.
<style type="text/css">
<!--
code css đặt tại đây.
-->
</style>
Tuy nhiên, đây là kiểu đặt CSS cũ. Kiểu mới trong HTML5 đơn giản hơn nhiều
<style>
code css đặt tại đây.
</style>
Tiếp theo chúng ta sẽ tạo lần lượt các khung chữ nhật các khung này sẽ nằm bên trong khung #all như hình sau
Khi nhấn F5 để tải lại file index.html trong trình duyệt, bạn sẽ thấy mỗi dòng chữ là 1 hàng.
Bây giờ chúng ta sẽ thiết lập CSS để có kết quả như hình bố cục phía trên. Trở lại DW, chúng ta bắt đầu thiết lập từng phần như sau.
Phần header
Chọn khung “phan header” , trong ô CSS bên phải, chọn tab CSS style, chọn biểu tượng danh sách bên góc phải, chọn New
Các vùng #left, #content, #right có một chút khác biệt. Chúng ta sẽ xếp chúng thành 3 cột. Cột #left và #right sẽ có kích thước là 20%, còn cột #content có kích thước là 40%.
Thiết lập cho cột #left
Thiết lập cho cột #right
Thiết lập cho cột #content
Sau đó các bạn sẽ thêm border cho các box. Tuy nhiên, khi tạo border, chiều rộng các ô sẽ rộng thêm 2px, nên cột #content sẽ phải nhỏ hơn 1 tí so với hình trên. Để chỉnh sửa, bạn chọn vào ô #content và chọn biểu tượng cây bút chì bên phải trong ô CSS để sửa hoặc sửa trực tiếp trong CSS.
Chúng ta sử dụng thêm đơn vị tính là % trong CSS, điều này có nghĩa kích thước của các DIV con sẽ có kích thước theo tỉ lệ so với thẻ DIV cha là #all .
Ví dụ: cột trái 20% nó sẽ có kích thước là 20% của 960px của thẻ DIV #all. Chúng ta không sử dụng đơn vị px ở đây, nếu trong trường hợp cần thay đổi kích thước khung bao từ 960px lên 980px hoặc 1020px thì các khung con bên trong vẫn luôn luôn tỉ lệ và cân đối không bị dư thừa bên trái hoặc bên phải.
Kết quả như sau:
<style type="text/css">
<!--
#all {
padding: 0px;
height: 500px;
width: 960px;
border: 1px solid #000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#all #header {
height: 100px;
width: 100%;
border: 1px solid #FF0000;
}
#all #body-box #left {
float: left; // đẩy cột trái về bên trái
height: 300px;
width: 20%; border: 1px solid Green;
}
#all #body-box #right {
float: right; đẩy cột phải về bên phải
height: 300px;
width: 20%; border: 1px solid Green;
}
#all #body-box #content {
float: left; // cột nội dung cũng đẩy về trái
height: 300px;
width: 59.34%; // nhưng kích thước sẽ không phải là 60%.
border: 1px solid Blue;
}
#all #footer {
clear: both; // lệnh này sẽ làm cho ô footer xuống hàng không bị ảnh hưởng của các lệnh float áp dụng cho các thẻ div ở trên
height: 95px;
width: 100%; border: 1px solid Green;
}
-->
</style>
Kết quả trong trình duyệt như sau:
- Sử dụng HTML
- Sử dụng cơ bản CSS
- Cách đặt tên file cho web của bạn
- Cài đặt firebug cho firefox
- Địa chỉ nâng cấp lên Internet Explorer (IE) 10
Đầu tiên mở chương trình DW, chọn menu File > New.
Một trang mới được tạo ra, nếu bạn đang trong môi trường code bạn sẽ thấy các dòng code do phần mềm tạo ra, nếu bạn trong chế độ Design thì bạn sẽ không thấy gì, hãy chọn kiểu Code để thấy các dòng code mặc định này.
<head>
<!-- Khai báo sử dụng ngôn ngữ tiếng việt trong website -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Trong đoạn code trên, bạn thấy sẽ đơn giản hơn rất nhiều so với code mặc định. Tuy nhiên, để web có thể hiển thị được các ngôn ngữ châu Á như tiếng Việt, chúng ta phải khai báo charset là utf-8 như sau:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Khi người xem xem bằng các thiết bị di động như điện thoại thông minh, máy tính bảng, chúng ta sẽ thêm 1 hàng code sau đây vào phần khai báo header của website. Mục đích của dòng code này sẽ làm cho website của bạn luôn luôn vừa vặn trên thiết bị người xem.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Như vậy về cơ bản, các bạn có thể gõ được tiếng Việt. Các bạn lưu ý 1 điều là bộ gõ tiếng Việt của các bạn phải sử dụng bảng mã unicode thì mới được, nếu không trình duyệt sẽ không hiển thị đúng tiếng Việt. Còn kiểu gõ thì bạn thích gõ kiểu gì thì tùy ý.
Bạn tạo thư mục để lưu toàn bộ website của bạn, ví dụ thư mục fisrtsite trong ổ D của bạn, tên file đầu tiên của bạn phải là index.html. Lưu ý, tên tập tin và tên file nên dùng ký tự thường, vì có thể sẽ gây ra lỗi đường dẫn khi đưa website lên mạng do đa số hệ thống server ở VN dùng Linux nên nó phân biệt ký tự thường và ký tự Hoa là 2 ký tự khác nhau.
Định dạng file của web là html hoặc htm. Khi bạn đặt tên theo với phần đuôi là html, mỗi khi nhấp đôi trái chuột lên file này, nó sẽ được chạy trong trình duyệt mặc định trong máy tính của bạn. Trong toàn bộ hệ thống website, file đầu tiên và mặc định luôn luôn được gọi là index.html.
File index.html rất quan trọng, nó như cửa chính trong nhà bạn, nếu bạn muốn vào nhà, bạn phải luôn luôn đi qua cánh cửa này, file index.html này cũng vậy. Khi khách hàng nhập địa chỉ web, file đầu tiên sẽ chạy chính là index.html.
Hãy dùng trình duyệt của Google Chrome.
Google chẳng thưởng cho mình 1USD nào tiền công giới thiệu cả, đơn giản bởi vì trình duyệt này đã tích hợp công cụ kiểm tra lỗi khi thiết kế web, hỗ trợ tốt HTML5, CSS3, ngôn ngữ Javascript đã được tối ưu và cơ chế bắt lỗi dò lỗi cũng tiện dụng. Nó là trình duyệt tuyệt vời cho bạn thiết kế web. Nếu bạn thích dùng FireFox thì bạn phải cài thêm add-on firebug để dùng cho việc kiểm tra lỗi khi thiết kế web. Đối với trình duyệt Internet Explorer (IE) của Microsoft thì hãy dùng phiên bản 10 hoặc mới hơn vì từ phiên bản này, IE mới hỗ trợ tốt ngôn ngữ HTML5 và cũng có tích hợp công cụ sửa lỗi (debug) thiết kế website. Nếu các bạn sử dụng trình duyệt IE cũ hơn, hãy nâng cấp lên Internet Explorer 10 hoặc cao hơn càng sớm càng tốt.
Bố cục website
Bây giờ chúng ta bắt đầu với bố cục của một website. Bố cục web cũng rất phong phú. Chúng ta sẽ bắt đầu với 1 bố cục rất thịnh hành cách đây vài năm. Mặc dù bố cục này vẫn còn nhiều web sử dụng, nhưng nó thể hiện nhiều khuyết điểm, vnMedian chọn bố cục này nhằm mục đích học tập để hướng dẫn cho các bạn.
Theo bố cục trên, chúng ta sẽ dùng phần Header để đặt banner, menu chính. Cột Menu bên trái dùng để thể hiện các thông tin về menu chi tiết khác. Cột Content dùng để thể hiện các nội dung, cột phải (Call To Action) chúng ta sẽ dùng để đặt banner, logo nào đó. Cuối cùng , vùng Footer thường dùng để đặt các thông tin liên hệ, các menu không quan trọng khác.
Đơn vị tính và kích thước website
Đơn vị tính trong thiết kế website thường là Pixel (px) hoặc đơn vị “em”. Mình thích đơn vị px hơn do phù hợp với điểm ảnh trên màn hình nên dễ xử lý. Chiều ngang của website nên là 960px. Đây là kích thước chuẩn để có thể chạy tốt trên tất cả các màn hình máy tính, laptop, máy tính bảng từ 7 inch trở lên. Vị trí của website luôn luôn nằm giữa màn hình. Trên thế giới 99% website đều canh giữa màn hình, cho dù kích thước màn hình có rộng bao nhiêu thì nó cũng vẫn luôn luôn phải nằm giữa. Lý do là nhằm giúp người xem dễ tập trung vào nội dung hơn.
Bắt đầu
Vẽ khung bằng thẻ DIV
Chọn menu Insert > Tag, chọn HTML bên trái và div bên phải, chọn Insert như hình
<div id="all" title="Khung website ngoai cung"></div>
Tag DIV trên có mã nhận dạng là all, hoặc #all dùng trong CSS.
Trong ngôn ngữ HTML, tag là các lệnh để trình duyệt thực hiện điều chúng ta muốn làm.
Tất cả tag đều phải sử dụng 1 cặp, một cái mở và một cái đóng. Tag đóng phải có dấu (/) phía trước, ví dụ: <div></div> . Ngôn ngữ HTML và CSS không phân biệt ký tự hoa hay thường, bạn viết kiểu gì nó cũng chạy miễn là đúng tên của nó. Tuy nhiên, các bạn nên viết thường để tạo thành thói quen, vì trong ngôn ngữ Javascript có phân biệt ký tự hoa và ký tự thường, bạn viết sai nó sẽ không chạy mà cũng không báo lỗi, chỉ có debug mới biết.
Trong HTML, để vẽ khung, chúng ta sẽ dùng tag (thẻ) DIV để tạo, mặc định tất các các khung được tạo bằng thẻ div đều vô hình, kích thước dài , rộng là 0. Tránh sử dụng table để tạo khung, đây là cách làm của những người thiết kế web yếu tay nghề.
Chúng ta cũng đặt 1 mã quản lý cho nó là thuộc tính ID, ví dụ: all, ID phải là tên duy nhất của 1 tag. Dựa vào mã ID này, chúng ta sẽ có nhiều việc phải làm về sau cho nó.
Tiếp theo chúng ta sẽ cài đặt kích thước, màu viền cho khung vừa tạo với CSS
Trong chế độ Design, trong ô CSS bên phải, chọn tab CSS style, chọn biểu tượng danh sách bên góc phải, chọn New
Giải thích CSS
Sau khi thực hiện một loạt các thao tác như trên, bạn sẽ nhận được một đoạn code CSS như dưới đây.
CSS, Javascript khi tương tác với các phần tử hay tag HTML đều phải thông qua ID của tag đó, ở đây là ID='all". CSS quy định phân biệt ID là đặt dấu # trước tên ID, cụ thể là #all. Trình duyệt sẽ xử lý và trả kết quả cho chúng ta theo những gì chúng ta yêu cầu nó thực hiện giống như đoạn mã CSS dưới đây.
Viết CSS không khó, nếu biết kết hợp chúng một cách nhuần nhuyễn, bạn sẽ tạo ra cho mình một website vừa đẹp lại vừa sang trọng.
Cách học giỏi CSS mau nhất chính là sử dụng công cụ debug của trình duyệt để kiểm tra CSS người ta đã viết cho tag đó như thế nào, thông số ra sao và những cái mới trong CSS3 được áp dụng như thế nào. Nhiều thủ thuật hay của các nhà thiết kế website trên thế giới đều ẩn chứa trong đó, quan trọng là bạn khai thác tìm hiểu chúng như thế nào. Nếu bạn làm giống như cách mình nói thì chỉ trong khoảng 1 tháng bạn sẽ trở thành chuyên gia về CSS và sách vỡ tài liệu dạy CSS trong nhà sách, trong nhà trường chỉ là thứ vứt đi.
Đó là lý do vnMedian không chỉ bạn tường tận từng câu lệnh CSS, HTML mà muốn bạn học chúng thông qua quan sát các ví dụ cụ thể thực tế. Đó là mới là sách đáng cho bạn học mà lại miễn phí nữa chứ.
<style type="text/css">
<!--
#all {
height: 500px; // đặt chiều cao là 500px
width: 960px; // đặt chiều rộng là 960px
border: 1px solid #CC3300; //Đường viền 1px kiểu tô đặc liền nét, màu sắc cam hơi đỏ. Mã màu ở dạng thập lục phân, trước nó phải có dấu #.
// Đoạn code margin dưới đây làm cho khung chữ nhật luôn luôn canh giữa màn hình.
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
//Chúng ta có thể viết ngắn gọn cho đoạn code trên như sau
margin: 0 auto;
}
-->
</style>
Vì chúng ta đang đặt CSS trong cùng 1 file nên nó phải bắt buộc nằm trong đoạn bao như cấu trúc dưới đây.
<style type="text/css">
<!--
code css đặt tại đây.
-->
</style>
Tuy nhiên, đây là kiểu đặt CSS cũ. Kiểu mới trong HTML5 đơn giản hơn nhiều
<style>
code css đặt tại đây.
</style>
Tiếp theo chúng ta sẽ tạo lần lượt các khung chữ nhật các khung này sẽ nằm bên trong khung #all như hình sau
Bây giờ chúng ta sẽ thiết lập CSS để có kết quả như hình bố cục phía trên. Trở lại DW, chúng ta bắt đầu thiết lập từng phần như sau.
Phần header
Chọn khung “phan header” , trong ô CSS bên phải, chọn tab CSS style, chọn biểu tượng danh sách bên góc phải, chọn New
Thiết lập cho cột #left
Chúng ta sử dụng thêm đơn vị tính là % trong CSS, điều này có nghĩa kích thước của các DIV con sẽ có kích thước theo tỉ lệ so với thẻ DIV cha là #all .
Ví dụ: cột trái 20% nó sẽ có kích thước là 20% của 960px của thẻ DIV #all. Chúng ta không sử dụng đơn vị px ở đây, nếu trong trường hợp cần thay đổi kích thước khung bao từ 960px lên 980px hoặc 1020px thì các khung con bên trong vẫn luôn luôn tỉ lệ và cân đối không bị dư thừa bên trái hoặc bên phải.
Kết quả như sau:
<style type="text/css">
<!--
#all {
padding: 0px;
height: 500px;
width: 960px;
border: 1px solid #000;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#all #header {
height: 100px;
width: 100%;
border: 1px solid #FF0000;
}
#all #body-box #left {
float: left; // đẩy cột trái về bên trái
height: 300px;
width: 20%; border: 1px solid Green;
}
#all #body-box #right {
float: right; đẩy cột phải về bên phải
height: 300px;
width: 20%; border: 1px solid Green;
}
#all #body-box #content {
float: left; // cột nội dung cũng đẩy về trái
height: 300px;
width: 59.34%; // nhưng kích thước sẽ không phải là 60%.
border: 1px solid Blue;
}
#all #footer {
clear: both; // lệnh này sẽ làm cho ô footer xuống hàng không bị ảnh hưởng của các lệnh float áp dụng cho các thẻ div ở trên
height: 95px;
width: 100%; border: 1px solid Green;
}
-->
</style>
Kết quả trong trình duyệt như sau:
Comment via
Post a Comment