Là 1 kỹ thuật chia trang web thành nhiều khung, mỗi khung hiển thị 1 trang HTML.
Không sử dụng thẻ Body khi thiết kế khung.
<frameset rows=“trị các cột” cols=“trị các dòng”> <frame name =“tên1” src=“url1”>
. . .
<frame name =“tênn” src=“urln”> </frameset>
“Trị các cột”, “Trị các dòng”:
+ Kích thuớc tuyệt đối tính theo pixel
+ % kích thước tương đối theo cửa sổ trình duyệt. “url”: Địa chỉ tập tin hiển thị trong khung.
Ghi chú : Cho phép thiết kế khung lồng nhau 10.2. frameset
Chức năng
- Khởi tạo bộ khung Thuộc tính
- rows : số dòng
- cols : số cột
- frameborder : giá trị yes/no, chỉ định frame có viền hay không.
- framespacing : khoảng cách giữa các khung.
- border : độ lớn của khung viền.
- bordercolor : màu khung viền. 10.3. frame
Chức năng
- Gắn nội dung cho từng khung Thuộc tính
- src : nguồn dữ liệu cho khung
- name : tên khung
- heightwidth : lề dọc cho khung
- scrolling : hiển thị thanh cuộn
- noresize : không cho phép thay đổi kích thước khung 10.4. noframe
Chức năng
- Không hiển thị nội dung lên khung. 10.5. Ví dụ
Tạo frame 3 khung
Bài 11 CHỌN BỐ CỤC & TỔ CHỨC WEBSITE
11.1. Tổ chức website
11.1.1. Các tập tin HTML của 1 Website1 Website bao gồm rất nhiều trang Web (tập tin HTML). Web (tập tin HTML).
Khi lưu trữ phải tổ chức có cấu trúc để thuận tiện trong quản lý, điều chỉnh về sau.
Khi đưa Website lên WebServer được cấp 1 địa chỉ (Domain Name) và 1 thư mục.
11.1.2. Trang chủ của 1 Website
Trang chủ (Home page) là được nạp khi truy cập mà không rõ tập tin nào (Chỉ nhập URL của 1 Website)
Thường qui định là: index.htm,default.htm,home.htm VD: Truy cập: http://www.tuoitre.com.vn
Nghĩa là: http://www.tuoitre.com.vn/Index.htm
11.1.3. Tổ chức lưu trữ 1 WebsiteTổ chức Site 1 thư mụcTất cả các tập tin HTML và các tập tin khác đều đặt trong cùng 1 thư mục. HTML và các tập tin khác đều đặt trong cùng 1 thư mục.
Thuận lợi cho Website nhỏ, ít tập tin, không cần quan tâm đến đường dẫn.
Tổ chức Site thư mục theo chức năng
Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin có nội dung liên quan với nhau.
Tại thư mục chính chỉ chứa tập tin chỉ mục và các hình ảnh cần thiết.(thư mục chính chứa trang chủ, mỗi thư mục con là 1 hoặc 1 nhóm các trang con)
Tổ chức Site thư mục theo kiểu tập tin
Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin cùng kiểu.
+ Thư mục chính chứa trang chủ,
+ 1 thư mục con chứa các trang HTML, + 1 thư mục con chứa các tập tin hình ảnh. + 1 thư mục con chứ các tập tin âm thanh . . . .)
Thuận lợi sử dụng chung tập tin, dễ thay thế bổ sung các tập tin vào site. Tổ chức Site hỗn hợp
Kết hợp Cách tổ chức Site theo thư mục chức năng và Cách tổ chức Site theo kiểu tập tin.
11.1.4. Địa chỉ tương đối & Địa chỉ tuyệt đối.
Địa chỉ tuyệt đối
- Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL.
- http://ServerName/Đường dẫn/ Tên tập tin VD: http://vietnamnet.vn/Tinkinhte/quocte/tin07.html
Địa chỉ tương đối.
- Khi tham chiếu đến 1 tập tin cùng thư mục tập tin chính: Tên tập tin
- Khi tham chiếu đến 1 tập tin khác thư mục tập tin chính: Đường dẫn/Tên tập tin
Ghi chú: Sử dụng ../ để chỉ thư mục cấp trên thư mục chứa tập tin chính: VD:
Sẽ ghi: ../../Images/Logo.jpg 11.2. Chọn bố cục cho trang web
11.2.1. Độ phân giải màn hình
- Độ phân giải của màn hình quyết định rất nhiều đến việc hiển thị trang web lên trình duyệt.
- Khi thiết kế trang web, chúng ta phải chọn một kích thước chuẩn cho trang web của mình. Hiện nay, đa số các màn hình đều hiển thị ở độ phân giải 1024x768.. Tuy nhiên, cũng còn một số màn hình nhỏ vẫn thể hiện ở độ phân giải 800x600. Vì vậy, chúng ta phải chọn một độ phân giải thích hợp nhất cho trang web của mình, và được đa số người dùng sử dụng.
Tập tin HTML
Tập tin hình ảnh tham chiếu: Logo.jpg
11.2.2. Chế độ màu
- Việc chọn hình ảnh theo các chế độ màu khác nhau quyết định đến việc thể hiện trang web nhanh hay chậm. Một hình ảnh có thể thể hiện ở nhiều chế độ màu khác nhau, tuy nhiên, khi ở chế độ màu cao hình ảnh sẽ rất đẹp nhưng kèm theo là dung lương sẽ lớn và việc thể hiện nó cũng chậm nhơ, và ngượ lại, một hình ảnh ở chế độ màu thấp thì hình ảnh sẽ ko được rõ nét, tuy nhiên dung lượng của hình sẽ nhỏ và tốc độ hiển thị cũng sẽ nhanh hơn. - Các chế độ màu : 16 màu 256 màu 16 bits 24 bits 32 bits 11.3. Bố cục cho trang web
Một trang web được bắt đầu từ góc trên bên trái, kéo dài qua phải và xuống dưới không giới hạn, Có nghĩa là một trang web có chiều dài và chiều rộng không xác định.
Các điều khiển di chuyển trang nên đặt phía trên bên trái và phía dưới bên phải của trang để dễ di chuyển. Hoặc ta cũng có thể tạo một menu điều khiển phía bên trái hoặc phải. Các menu di chuyển phải dễ sử dụng, và chỉ nên click ừ 3 đến 5 lần là đến được trang cần thiết. Các di chuyển càng dễ dàng sẽ tạo cho người dùng cảm giác dễ sử dụng.
Không nên để người xem phải di chuyển cuộn trang web theo chiều ngang để xem, chính vì vậy kích thước của trang web nên là 800 hoặc 1024 là hợp lý (vừa với độ phân giải phổ biến nhất của các màn hình).
Sử dụng bảng hoặc div để điều khiển bố cục cho trang web, các bố trí trên web. Nên tạo một bảng hoặc 1 div với kích thước lớn nhất làm khung cho trang web. Trong đó ta sẽ có các bố trí cho các điều khiển bằng các table hay div phía trong. Khung trang web có thể được đặt phía bên trái hoặc ngay giữa trang.
Nên có các khoảng trắng giữa các khung viền. để giúp cho người dùng dễ đọc. Kích thước chuẩn cho văn bản trong trang web là 10 (ngoại trừ các tiêu đề & các mục đặc biệt). Tuy nhiên, ta cũng nên có các kích thước khác nhau cho văn bản để tránh nhàm chán.
Hiệu ứng nhấp nháy chỉ nên ứng dụng vào các đoạn văn bản mà nội dung thay đổi tuần tự. Văn bản nên được sử dụng hợp lý giữa chữ hoa và chữ thường, một văn bản quá nhiều chữ in hoa sẽ rất khó đọc.
Khi quyết định chọn hình nền cho trang web, ta chọn hình nền vừa với kích thước của trang web, vì hình nền trang web sẽ được lặp lại cho hết khung hình của trình duyệt.
Trên trang web nên có thông tin về cá nhân hoặc đơn vị sử dụng để người đọc có thể liên lạc. Thông tin liên lạc có thể tùy từng địa phương, hoặc theo định dạng quốc tế.
Bài 12 GIỚI THIỆU VỀ CSS (Cascading Style Sheet)
12.1. Giới thiệu
CSS là một tính năng cộng thêm cho HTML. Người thiết kế trang web có thể tạo ra nhiều tùy chọn hơn cho việc thể hiện trang web và quản lý các mẫu thiết kế tốt hơn.
Mô hình CSS :
12.2. Các cách thiết kế CSS
Có 3 cách thiết kế một trang web :
o Thiết kế chung trong phần tử
o Nhúng Style
o Liên kết đến file CSS
12.2.1. Thiết kế chung trong phần tử
Đây là phương thức thiết kế đầu tiên cho trang web. Ta sẽ sử dụng thuộc tính Style trong các phần tử HTML để định dạng style cho các phần tử.
<element style="property:value; …" > … </element>
vd : <b style="color:navy"> văn bản </b>
12.2.2. Nhúng Style
Khi thiết kế trang web, ta sử dụng phần tử style để định nghĩa các mẫu.
<style type="text/css"> element{color : value;…} </style>
12.2.3. Liên kết đến file CSS
Định nghĩa các style ở một file riêng biệt và được lưu lại dưới dạng file *.css, file này sẽ được liên kết vào trang web qua phần tử link.
file style.css element{ property : value;…. } file index.html <head>
<title> Style Sample </title>
<link rel="stylesheet" href="style.css" /> </head>
Hoặc
<head>
<title> Style Sample </title> <style type="text/css"> @import url(style.css); </style> </head> 12.3. Các định nghĩa CSS Định nghĩa cho tất cả các phần tử HTML. *{ property : value; … } Định nghĩa cho 1 phần tử HTML Element{ property : value; … }
Nếu bạn muốn tạo ra các định dạng khác nhau cho cùng một phần tử, hay muốn chia sẻ một định dạng cho nhiều phần tử khác nhau, ta sẽ định nghĩa các style dưới dạng class (lớp định dạng riêng). Sau đó, nhúng các định dạng đó vào trong trang web qua thuộc tính class của các phần tử.
o Định nghĩa một class : <style> .class1{ property : value; … } </style> o Nhúng class
<element class="class1"> … </element>
Định nghĩa class cho một phần tử
Element.class{
property : value; …
}
Định nghĩa class cho một phần tử, có một thuộc tính có giá trị được chỉ định
Element.class[property^=value] {
property : value; …
}
Các phép so sánh = (equal), ^=(begin with), ~= (contain space-separated), *=(contain) , |= (begin with), $= (file what)
Ngoài ra, nếu ta muốn định dang riêng cho element có id riêng nào đó, ta sẽ định nghĩa style dưới dạng id riêng, và trong trong web, phần tử nào muốn có định dạng ta sẽ đặt id cho phần tử đó tương tự id của style.
o Định nghĩa một id : <style> #id1{ property : value; … } </style> o Nhúng class
<element id="id1"> … </element>
Định nghĩa id cho một phần tử
Element#id{
}
Nhóm định nghĩa
Element1, Element2 {
property : value; …
}
Class# Element1, Class#Element2 {
property : value; …
}
Định nghĩa cho các phần tử con
Element1 Element2 {
property : value; …
}
Định nghĩa cho các phần tử con ngay sau
Element1>Element2 {
property : value; …
}
Định nghĩa cho một phần tử kế ngay sau
Element1+Element2 {
property : value; …
}
Định nghĩa cho các phần tử kế ngay sau
Element1~Element2 {
property : value; …
}
Định nghĩa lớp giả (Pseudo class),
Element:pseudo-class {
}
Các lớp giả :link, :visited, :active, :hover, :focus, :active, :lang, :first-child, :first- line, :first-letter.
12.4. Các thuộc tính
12.4.1. Thuộc tính kích thước
height : {length | percentage | auto | inherit} min-height : {length | percentage | inherit}
min-height : {length | percentage | inherit | none} width : {length | percentage | auto | inherit} min- width : {length | percentage | inherit}
min- width : {length | percentage | inherit | none}
12.4.2. Thuộc tính lề
margin-top : {length | percentage | auto | inherit} margin-right : {length | percentage | auto | inherit} margin-bottom : {length | percentage | auto | inherit} margin-left : {length | percentage | auto | inherit} margin : {[length | percentage | auto]1 to 4 values | inherit} padding-top : {length | percentage | auto | inherit} padding -right : {length | percentage | auto | inherit} padding -bottom : {length | percentage | auto | inherit} padding -left : {length | percentage | auto | inherit} padding : {[length | percentage | auto]1 to 4 values | inherit}
12.4.3. Thuộc tính khung viền
border-top-color : {color | transparent | inherit}
border-top-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-top-color-width : {thin | medium | thick | length | inherit} border-top : {border-width | border-style | border-color | inherit} border-right-color : {color | transparent | inherit}
border-right-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-right-color-width : {thin | medium | thick | length | inherit} border-right : {border-width | border-style | border-color | inherit} border-left-color : {color | transparent | inherit}
border-left-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-left-color-width : {thin | medium | thick | length | inherit} border-left : {border-width | border-style | border-color | inherit} border-bottom-color : {color | transparent | inherit}
border-bottom-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit} border-bottom-color-width : {thin | medium | thick | length | inherit} border-bottom: {border-width | border-style | border-color | inherit} border-color : {color | transparent | inherit}
border-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-color-width : {thin | medium | thick | length | inherit} border: {border-width | border-style | border-color | inherit} outline-color : {color | invert | inherit}
outline-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
outline-width : {thin | medium | thick | length | inherit}
outline : {outline-width | outlint-style | outline-color | inherit}
12.4.4. Thuộc tính bố cục
display : {block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column- group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit}
position : {absolute | fixed | relative | static | inherit} float : {left | right | none | inherit}
clear : {none | left | right | both | inherit}
visibility : {visible | hidden | collapse | inherit} top : {length | percentage | auto | inherit} right : {length | percentage | auto | inherit} bottom : {length | percentage | auto | inherit} left : {length | percentage | auto | inherit} z-index : {integer | auto | inherit}
overflow : {auto | hidden | scroll | visible | inherit} clip : {shape | auto | inherit}
12.4.5. Thuộc tính danh sách
list-style-type : {circle | disc | square | armenian | decimal | decimal- leading-zero | georgian | lower-alpha | lower-greek | lower- latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit}
list-style-image : {uri | none | inherit}
list-style : { list-style-type | list-style-position | list-style-image}
12.4.6. Thuộc tính bảng
table-layout : {auto | fixed | inherit}
border-collapse : {collapse | separate | inherit} border-spacing : {length [length] | inherit} empty-cells : {hide | show | inherit}
caption-side : {bottom | top | inherit}
12.4.7. Thuộc tính về màu sắc và nền
background-color : {color | transparent | inherit} background-image : {uri | none | inherit}
background-repeat : {repeat | repeat-x | repeat-y | no-repeat | inherit} background-position : {{percentage | length | left | right}1 or 2 values |
inherit }
background-attachment : {scroll | fixed | inherit}
background : {background-color background-image background-repeat background-attachment background-position | inherit}
color : {color | inherit}
12.4.8. Thuộc tính định dạng kí tự - văn bản
font-family : {family name, … | inherit}
font-size : {absolute-size | relative-size | length | percentage | inherit} font-weight : {100…900 | bold | bolder | lighter | normal | inherit} font-style : {italic | normal | oblique | inherit}
font-variant : {normal | small-caps | inherit}
font : {[font-style] [font-variant] [font weight] font-size [line-height] font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit}
letter-spacing : {length | normal | inherit} word-spacing : {length | normal | inherit}
line-weight : {length | number | percentage | normal | inherit}