Trước khi ta bắt đầu làm việc với hình ảnh đồ họa, điều quan trọng là ta
phải biết loại nào của các định dạng ta nên sử dụng. Sự minh họa bằng
hình ảnh có thể được biểu diễn trên một máy tính theo hàng chục dạng
khác nhau nhưng người thiết kế Web cần quen thuộc với ba dạng: GIF,
JPEG, và PNG.
2.4 Hiển thị hình ảnh trên một trang Web :

Làm việc với các ảnh theo các dạng khác nhau.

Ta đã có một vài trong số các file này trên máy tính của Graphic
Interchange Format (GIF) hoặc Joint Photographic Experts Group (JPEG).
Một dạng mới hơn mà nó đang trở nên phổ biến là Portable Network
Graphics (PNG).

Dạng GIF

Dạng GIF chứa các ảnh được giới hạn chỉ 256 màu. Dạng này lý tưởng
cho các ảnh có nhiều màu đồng nhất (các nút menu), các ảnh đồ họa nhỏ
(các biểu tượng, quảng cáo), và những hình ảnh khác vốn không đòi hỏi
chi tiết rõ nét.

Nếu một ảnh chụp được hiển thị dưới dạng GIF, đầu tiên nó phải được
làm giảm sao cho không quá 256 màu xuất hiện khác nhau trong ảnh.

Dạng GIF hỗ trợ hai hiệu ứng đặc biệt thường thấy trên Web: độ trong suốt và hoạt hình.

Độ trong suốt (transparency) là một kỹ thuật nhằm làm cho một phần
của một ảnh hòa hợp với nền của trang, nền có thể là một màu đồng nhất
hoặc một ảnh. Độ trong suốt sẽ làm việc bằng cách chỉ định một màu trong
một ảnh GIF làm màu trong suốt, màu này sẽ không được hiển thị khi ảnh
được hiển thị trên một trang Web. Để thấy được trực tiếp điều này, hãy
xem hai ảnh GIF trên một trang trong hình dưới.




Hình VIII.16. Ảnh trong suốt và ảnh không trong suốt.

Một ảnh GIF có thể được tạo đồng bằng cách hiển thị một số ảnh GIF có
liên quan theo trình tự. Những ảnh này được lưu trữ cùng với nhau trong
một file đơn với thông tin về khoảng thời gian bao lâu để hoàn thành
một ảnh, thứ tự của sự hiển thị, và số lần để lặp lại qua trình tự.

Chắc ta đã thấy hàng trăm ảnh động khi ta duyệt Web; chúng cũng là một công nghệ mà các nhà quảng cáo ưa thích.

Dạng JPEG

Dạng FPEG chứa các ảnh có chất lượng ảnh chụp vốn có thể chứa hàng
ngàn màu khác nhau. Để làm cho kích cỡ file trở nên hợp lý, làm cho ảnh
tải nhanh hơn trên Web hoặc được truyền tải bởi phương tiện khác, JPEG
sử dụng một kỹ thuật nén dữ liệu nhằm làm cho kích cỡ file nhỏ hơn nhưng
bù lại chất lượng ảnh bị mất.

Khi một file JPEG được tạo ra bởi một camera kỹ thuật số, máy quét
hoặc phần mềm, thì người ta cần đạt được sự cân bằng giữa kích cỡ và
chất lượng. Độ rõ nét và chiều sâu ảnh càng cao thì kích cỡ của file
càng lớn.

Do nén, JPEG thường là lựa chọn thích hợp nhất cho các ảnh phức tạp
với số màu lớn. Các file JPEG thích hợp đối với việc hiển thị các ảnh
chụp được quét vốn không có các vùng màu đồng nhất.

JPEG thường là lựa chọn kém cho các ảnh với các vùng lớn có một màu
đơn. Do cách xử lý việc nén, các đường gợn sóng (thường được gọi là
"răng cưa") sẽ xuất hiện trông mờ hơn.

Dạng PNG

Dạng PNG đã được giới thiệu để thay thế và cải tiến dạng GIF và JPEG.
Nó có thể được sử dụng để hiển thị các ảnh có 256 màu hoặc ít hơn,
giống như một dạng GIF (dạng PNG-, các ảnh có hàng ngàn màu, giống như
một dạng JPEG (dạng PNG-24). Các ảnh PNG cũng có thể hỗ trợ độ trong
suốt và các hiệu ứng đặc biệt khác.

Những nhà thiết kế Web site đã thong thả trong việc chọn PNG bởi vì
nó không luôn được hỗ trợ trong các trình duyệt Web. Internet Explorer 4
và Netscape Navigator 4 những ấn bản đầu tiên của một trong hai chương
trình này vốn có thể hiển thị các ảnh đồ họa PNG mà không cần trợ giúp
của một plug-in (một chương trình mở rộng các tính năng của một trình
duyệt).

Ngày nay, các phiên bản hiện hành của năm trình duyệt thông dụng nhất
– Internet Explorer, Netscape Navigator, Mozilla, Opera, và Safari - hỗ
trợ PNG, mặc dù hầu hết các trình duyệt không hỗ trợ tất cả các tính
năng của nó.

Chọn dạng thích hợp

Bằng cách sử dụng FrontPage, ta có thể thêm các ảnh đồ họa sang một
site theo nhiều dạng khác mà ta có thể quen thuộc: BMP (Windows
Bitmaps), EPS (Encapsulated PostScript), RAS (Raster), TGA (Truevision
Targa Graphics Adapter), Tiff (Tagged Image File), và WMF (Windows Meta
File).

Khi ta thêm một trong các ảnh này vào một trang và sau đó lưu nó,
FrontPage sẽ chuyển đổi nó sang dạng GIF nếu nó chứa 256 màu hoặc ít
hơn, hoặc dạng JPEG nếu nó chứa nhiều hơn.

Phần mềm khuyến khích ta sử dụng GIF hoặc JPEG.

Quy tắc chung là sử dụng JPEG cho các ảnh chụp và sử dụng GIF hoặc
PNG cho mọi thứ khác. Khi một ảnh JPEG phức tạp hoặc lớn đến mức kích cỡ
file của nó là 30KB hoặc lớn hơn, ta hãy làm cho ảnh trở nên đơn giản
hơn hoặc thay thế nó bằng một ảnh khác. Điều này ngăn ảnh chiếm một
lượng thời gian quá nhiều để xuất hiện khi một người dùng Web xem nó
trên một trang bằng một mối liên kết modem quay số.

Thêm một ảnh vào một trang

Bây giờ ta đã biết đôi chút về các ảnh đồ họa, ta sẵn sàng đặt chúng lên trên các trang Web riêng của ta.

Trong FrontPage, hình ảnh được thêm vào một trang Web khi nó đang
được hiệu chỉnh. Ta có thể thực hiện điều này bằng nhiều cách: Ta có thể
rê một file từ một thư mục hoặc Windows Explorer; sao chép nó sang
Clopboard và dán nó trên trang; chọn Insert → Picture → From File; hoặc nhấp một nút.

Tùy chọn sau cùng là dễ nhất, do đó nó được sử dụng trong phần này.

Để thêm một ảnh vào một trang Web, hãy thực hiện các bước sau:

1. Mở trang mà ta muốn hiệu chỉnh.

2. Đặt con trỏ tại vị trí trên trang nơi ảnh sẽ hiển thị.

3. Trên menu hệ thống, chọn Insert → Picture → From File trên
thanh công cụ Standard.Hộp thoại Picture xuất hiện. Sử dụng hộp thoại
này để tìm thư mục chứa ảnh. Ta không thể nhớ tên của ảnh mà ta muốn
phải không ? Hãy click vào bên phải của nút Views và chọn Thumbnails từ menu bật lên vừa xuất hiện. Các ảnh có kích cỡ thu nhỏ của mỗi hình ảnh sẽ được hiển thị, như được minh họa trong hình dưới.




Hình VIII.17. Chọn ảnh.

4. Chọn ảnh và click insert. File được hiển thị như một phần của trang trong cửa sổ hiệu chỉnh, cho phép ta xem diện mạo của nó ngay lập tức.

Khi một ảnh được đặt trên một trang, phần nội dung trang sẽ di chuyển
để dành chỗ trống. Text và các thành phần trang khác chảy xung quanh
hoặc bên dưới trang. Để di chuyển ảnh, nhấp kéo rê nó đến một vị trí
mới.

Mặc dù dường như ảnh đã được trộn với trang Web, nhưng nó vẫn nằm
trong file riêng của nó – file mà ta đã chọn bằng hộp thoại Picture.

Trình bày hình ảnh với text

Lần đầu tiên ta thêm một ảnh vào một phần của text trong FrontPage,
có thể ta không hài lòng với diện mạo của nó. Text chạy một cách vụng về
từ mép của ảnh, để lại nhiều khoảng trống xung quanh nó.

Việc chọn một kiểu bao bọc (wrapping style) mới cho ảnh sẽ xử lý vấn
đề này. Kiểu bao bọc là một xác lập click để chọn ảnh sẽ được hiển thị
như thế nào tương ứng với text nằm gần kề và nội dung khác trên trang.

Để chọn kiểu bao bọc ảnh, hãy thực hiện các bước sau:

1. Click đúp vào ảnh. Hộp thoại Picture Properties mở ra (xem hình dưới).




Hình VIII.18. Hộp thoại Picture Properties.

2. Nếu tab Appearance không xuất hiện, click tên tab đó để đưa nó lên phía trên.

3. Chọn một trong các tùy chọn nằm bên dưới tiêu đề chính Wrapping Style –
click biểu tượng nằm trên các nhãn None, Left, hoặc Right. Các biểu
tượng cho biết cách ảnh sẽ được đặt như thế nào tương ứng với text.

4. Để thêm hoặc giảm lượng khoảng trống giữa các cạnh của ảnh và text, hãy điều chỉnh xác lập Horizonal Spacing.

5. Để bổ sung hoặc loại bỏ một số khoảng trống nằm trên đỉnh và đáy, hãy điều chỉnh phần Vertical Spacing.

6. Click OK. Khi hộp thoại Picture Properties đóng lại và ta sẽ thấy kết quả trên trang của ta.

Kiểu bao bọc của một ảnh chỉ quyết định cách nó được hiển thị bên text nằm gần kề.

Để thêm một khoảng dòng trống trước và sau một ảnh, hãy đặt con trỏ
nằm bên trái hoặc bên phải của ảnh và nhấn Enter để chèn một ngắt đoạn.
Để chèn một ngắt dòng nhỏ hơn, hãy nhấn Shift + Enter.

Một cách khác để tạo tùy biến vị trí của một ảnh là sử dụng xác lập căn chỉnh của nó.

Xác lập này tương tự như kiểu bao bọc, quyết định cách một ảnh sẽ được căn thẳng kế bên các ảnh và text khác có chiều bao bọc.

Để xác lập kiểu căn chỉnh của một ảnh, hãy thực hiện các bước sau:

1. Click đúp vào ảnh. Hộp thoại Picture Properties mở ra.

2. Nếu tab Appearance không xuất hiện, click tên của tab để đưa nó lên phía trên.

3. Bên dưới tiêu đề chính Layout, chọn một trong các tùy chọn của hộp danh sách Alignment:

a. Left alignment và Righe alignment – làm cho ảnh xuất hiện phía bên trái hoặc bên phải của text xung quanh.

b. Top alignment – căn thẳng các mép đỉnh của ảnh và text.
Bottom alignment – căn thẳng các mép đáy của ảnh và text. Đây cũng là kiểu căn chỉnh mặc định cho một ảnh mới.

c. Moddle alignment – căn thẳng phần chính của ảnh so với đáy của text.

d. Absolute Moddle alignment – căn thẳng phần chính giữa của ảnh với phần chính giữa của text.

Có nhiều tùy chọn khác, nhưng tất cả chúng tương tự như sáu tùy chọn
này. Ta có thể sử dụng các tùy chọn căn chỉnh text, hình ảnh, hoặc bất
cứ những gì khác vốn đủ nhỏ để hiển thị.

4. Click OK.

Hết phần 4



Nguồn: Sưu tầm Internet