IMAGES

Chia sẻ: Nguyễn Vũ Minh Tâm | Ngày: | Loại File: PDF | Số trang:11

Thêm vào BST

Báo xấu

80
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Images • Một web site tốt không chỉ có định dạng, nó bao gồm nội dung, tổ chức, sự điều hướng, sự tương tác, … • Images giữ một phần lớn trong việc người sử dụng hiểu được trang web của bạn • Có 3 định dạng ảnh được sử dụng cho web – GIF(Graphics Interchange Format) *.gif – JPEG (Joint Photographic Experts Group) *.jpg hoặc *.jpeg – PNG (Portable Networks Graphics) *.png là phổ biến ...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: IMAGES

IMAGES KHOA CÔNG NGHỆ THÔNG TIN ThS.Nguyễn Văn Lót
Images • Một web site tốt không chỉ có định dạng, nó bao gồm nội dung, tổ chức, sự điều hướng, sự tương tác, … • Images giữ một phần lớn trong việc người sử dụng hiểu được trang web của bạn • Có 3 định dạng ảnh được sử dụng cho web – GIF(Graphics Interchange Format) *.gif – JPEG (Joint Photographic Experts Group) *.jpg hoặc *.jpeg – PNG (Portable Networks Graphics) *.png là phổ biến
Images: IMG & SRC • Img được sử dụng cho images • Img là một phần tử rỗng “empty”, do đó XHTML ko cần đóng nó – – • Src chỉ định vị trí của ảnh (URL) – URL có thể là tương đối hoặc tuyệt đối
Attributes • Height và width – Thiết đặt kích cỡ của ảnh – Nếu không thiết đặt, browser phải tổ chức bố tri khi ảnh đến – Không sử dụng height và width để tạo ảnh lơn hơn kích cỡ thật của nó
Attributes • Alt – Là thuộc tính được yêu cầu trong HTML và XHTML – Cung cấp “nội dung” cho người dùng khi browser không hiển thị được image • Title – Cung cấp ghi chú về ảnh – Được hiển thị khi mouse trên ảnh
Image Link •
Image “Thumbnails” • Hình ảnh lớn có thể tốn thời gian để download • Thumbnails nhỏ giúp download nhanh • Thumbnail thường được dùng như hyperlinks đến ảnh lớn hơn. Người sử dụng click trên image nhỏ để nhìn thấy ảnh lớn hơn • Nó tốt cho tạo “gallery” hoặc trang “photo album” – • –
CSS và Image • Khi image được sử dụng như một link, nó sẽ hiển thị “blue border” để chỉ định rằng nó là một hyperlink • Chúng ta sử dụng CSS để loại bỏ nó – Img { • Border: none; –} • Thêm đường viền (border) xung quanh image – Áp dụng đến tất cả image • Img{ border: 1px solid #000} – Áp dụng đến một class • • .imgborder {border: 2px dotted blue;}
CSS và Image • Áp dụng vào tất cả các phần tử img trong một vùng chỉ định #gallery img {border: 1px solid black ; } • Sử dụng ảnh nền body{ background-image:url(puppy.jpg); Background-position:center center; Background-repeat: no-repeat; }
CSS và Image • Có thể sử dụng “position” để đặt vị trí của một image trên một trang theo dạng tương đối hoặc tuyệt đối #logo{ Position:absolute; Top:10px; Left:20px Z-index:5; }
CSS và Image • Chúng ta có thể sử dụng “float” vị trí của một ảnh đến những phần tử nội dung khác