Bố cục layout web bằng CSS

1 BỐ CỤC LAYOUT WEB BẰNG CSS 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH Nội dung bài học  Các dạng layout web cơ bản  Kỹ thuật “no table”  Cấu trúc phân cấp nội dung web  Định hướng trong sơ đồ phân cấp  Mô hình hộp  Định vị các thành phần trên web  Floating và Clearing 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 2 Các dạng layout web cơ bản  Thông thường các trang web thường bố cục thành nhiều cột, giúp người dùng quan sát đầy đủ nội dung mà không hoặc ít cuộn trang màn hình.  Nếu xem xét kỹ ta sẽ nhận thấy rằng các trang web thường được bố cục gồm 2 hoặc 3 cột.  Các cột này có thể chỉ là các cột cố định đơn giản hoặc có thể tự động mở rộng độ rộng một cách linh hoạt theo sự thay đổi độ rộng của cửa sổ 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 3 Bố cục layout 2 cột 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 4 Bố cục layout 3 cột 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 5 Kỹ thuật “no table”  Việc đầu tiên cần làm để tạo bố cục là xây dựng “bộ khung” của bố cục, được gọi là tạo layout web.  Kỹ thuật thiết kế layout hiện nay được gọi là kỹ thuật “no table”, nghĩa là không dùng bảng để bố cục như đã học mà sử dụng div để tạo ra các cột trên trang web. 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 6 7 Thẻ DIV  Thẻ div là một layer(lớp), có thể chứa mọi thành phần html khác. Nó đơn thuần giống như một tag body nhưng linh động hơn vì thẻ div xác định vị trí mà nó xuất hiện trên màn hình bất chấp nó ở đâu trên tài liệu.  Thuộc tính cơ bản của thẻ div: id, width, height, style  Với:  Id: định danh của thẻ div  Width, height: độ rộng, độ cao của thẻ div  Style: thuộc tính định kiểu của thẻ div 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 8 Ví dụ về thẻ DIV <div style="position: absolute; width: 100%; height: 100px; z-index: 1; left: 77px; top: 60px" id="layer1"> dòng thứ nhất </div> <div style="position: absolute; width: 100%; height: 100px; z-index: 2; left: 126px; top: 38px" id="layer2"> <font color="#FF0000">dòng thứ hai</font><p> <font color="#FF0000">dòng thứ 3</font> </div> 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 9 Ý nghĩa các thuộc tính bên trong thuộc tính style của thẻ DIV Ví dụ: <div style="position: absolute; width: 100%; height: 100px; z-index: 1; left: 77px; top: 60px" id="layer1">  Position: cung cấp điểm tham chiếu cho thẻ div  Các giá trị có thể là:  absolute (điểm tham chiếu vị trí cho thẻ div là góc trái phía trên của cửa sổ trình duyệt);  relative: điểm tham chiếu vị trí tính từ vị trí gốc của văn bản.  top,left: xác định vị trí thẻ div từ trên xuống và từ trái sang.  _z-index: nếu chồng hai thẻ div lên nhau bằng cách cho các phần tử chỉ vị trí nó giống hệt nhau, thẻ div nào có giá trị z-index lớn hơn thì sẽ nổi lên trên. Nếu z- index mà là số âm, thì thẻ div sẻ chìm xuống dưới các phần tử html khác. 10 Thẻ SPAN  Thẻ SPAN dùng để định dạng cho một phần text trong hàng. Thẻ SPAN tạo ra một móc nối giữa phần text được định dạng với phần text còn lại mà không tạo ra dòng mới.  Ví dụ <p> Đây là sự <SPAN style=“font-style=italic; color=red”>khác biệt </SPAN>so với nội dung còn lại </p> 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH [...]... Height Width: là một thuộc tính CSS dùng để quy định chiều rộng cho một thành phần web  Height: là một thuộc tính CSS dùng để quy định chiều cao cho một thành phần web  Ví dụ: p { width:100px; height: 30px;} định chiều rộng và chiều cao của thẻ p  8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 30 Width & Height max-width: quy định chiều rộng tối đa cho một thành phần web  min-width: quy định chiều...  Ví dụ: Đặt bốn ảnh ở bốn góc tài liệu bằng định vị tương đối #logo1 { position:relative; top:50px; left:70px } #logo2 { position:relative; top:0; right:0 } #logo3 { position:relative; bottom:0; left:0 } #logo4 { position:relative; bottom:70px; right:50px  8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 35 Thuộc tính float    Float: là một thuộc tính CSS dùng để cố định một thành phần web về bên trái... chiều rộng tối thiểu cho một thành phần web  max-height: quy định chiều cao tối đa cho một thành phần web  min-height: quy định chiều cao tối thiểu cho một thành phần web  8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 31 Ví dụ áp dụng Untitled Document a{border: 1px solid black;} a:link{text-decoration:none;... Như-Khoa CNTH 16  Cấu trúc phân cấp nội dung web 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 17 Định hướng trong sơ đồ phân cấp   Dựa vào sơ đồ phân cấp tài liệu web, bạn cần phải xem xét các phần tử trong tài liệu, các yếu tố xung quanh nó, nội dung cũng như các thuộc tính hiện có để áp dụng định kiểu CSS tương ứng Quan hệ giữa các thành phần web: ngữ cảnh (context), cha-con (child), anh-em... được định vị tuyệt đối sẽ nhận giá trị position là absolute  Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ  Ví dụ: Đặt bốn ảnh ở bốn góc tài liệu bằng định vị tuyệt đối #logo1 { position:absolute; top:50px; left:70px } #logo2 { position:absolute; top:0; right:0 } #logo3 { position:absolute; bottom:0; left:0 } #logo4 { position:absolute;...  Float: là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó Đây là một thuộc tính rất cần thiết khi dàn trang (như tạo các trang web 2 column layout hay 3 column layout) , hiển thị văn bản thành cột, hay thực hiện việc định vị trí ảnh và text Thuộc tính float có 3 giá trị:    Left: Cố định phần tử về bên trái Right: Cố định phần tử về bên phải...Định kiểu CSS cho thẻ DIV Cú pháp: Bằng cách thêm một CLASS hoặc ID vào tag DIV và định kiểu cần có Trong phần Style hoặc một bảng kiểu bên ngoài ta nhập: DIV.ClassName{property1: value1; property2:value2;…} với ClassName là... Selector anh có màu mặc định Selector em có màu đỏ 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 21 Pseudo element      Các phần tử giả cho phép thiết lập nội dung trên trang web với các định kiểu đặc biệt, bao gồm :first-line  định kiểu cho dòng đầu tiên của đoạn văn bản :first-letter  định kiểu cho ký tự đầu tiên của đoạn văn bản :before  thiết lập nội dung xuất hiện ngay...   Màn hình máy tính được tổ chức dạng lưới gồm các điểm ảnh, có trục tọa độ là góc trên trái màn hình, vị trí các thành phần hiển thị trên màn hình tọa độ dạng (x,y) Ta có thể định vị các đối tượng web ở bất kỳ vị trí nào trên hệ tọa độ này Có 4 cách định vị:     Tĩnh (static) Tuyệt đối (absolute) Tương đối (relative) Cố định (fixed) 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 33 Absolute position... tương ứng :after  thiết lập nội dung xuất hiện ngay sau nội dung của selector tương ứng 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 22 Pseudo class   Các lớp giả cho phép thiết lập nội dung trên trang web với các hiệu ứng đặc biệt trên các phần tử, bao gồm Các lớp giả áp dụng cho liên kết:     :hover  thiết lập hiệu ứng cho selector khi di chuột qua selector :active thiết lập hiệu ứng cho selector . 1 BỐ CỤC LAYOUT WEB BẰNG CSS 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH Nội dung bài học  Các dạng layout web cơ bản  Kỹ thuật “no table”  Cấu trúc phân cấp nội dung web  Định.  Định vị các thành phần trên web  Floating và Clearing 8/7/2012 ThS.Nguyễn Thị Quỳnh Như-Khoa CNTH 2 Các dạng layout web cơ bản  Thông thường các trang web thường bố cục thành nhiều. là tạo layout web.  Kỹ thuật thiết kế layout hiện nay được gọi là kỹ thuật “no table”, nghĩa là không dùng bảng để bố cục như đã học mà sử dụng div để tạo ra các cột trên trang web. 8/7/2012