Lời khuyên cho việc tạo một bản đồ hình ảnh với Dreamweaver

Những lợi ích và hạn chế khi sử dụng bản đồ hình ảnh

Có một điểm trong lịch sử thiết kế web, nơi nhiều trang web đã sử dụng một tính năng được gọi là "bản đồ hình ảnh". Đây là danh sách tọa độ được đính kèm với một hình ảnh cụ thể trên một trang. Những tọa độ này tạo ra các vùng siêu liên kết trên hình ảnh đó, cần thiết thêm "các điểm nóng" vào một hình ảnh, mỗi điểm có thể được mã hóa để liên kết đến các vị trí khác nhau. Điều này khác nhiều so với việc chỉ thêm một thẻ liên kết vào một hình ảnh, điều này sẽ làm cho toàn bộ hình ảnh đó trở thành một liên kết lớn đến một đích duy nhất.

Ví dụ - hãy tưởng tượng có một tệp hình ảnh có hình ảnh của Hoa Kỳ. Nếu bạn muốn mỗi trạng thái là "có thể nhấp" để họ chuyển đến các trang về trạng thái cụ thể đó, bạn có thể thực hiện việc này bằng một bản đồ hình ảnh. Tương tự, nếu bạn có hình ảnh của một ban nhạc, bạn có thể sử dụng bản đồ hình ảnh để mỗi thành viên riêng lẻ có thể nhấp vào trang tiếp theo về thành viên ban nhạc đó.

Bản đồ hình ảnh có hữu ích không? Họ chắc chắn là, nhưng họ đã rơi ra khỏi lợi trên Web ngày nay. Đây là, ít nhất là một phần, bởi vì bản đồ hình ảnh yêu cầu tọa độ cụ thể để làm việc. Các trang web ngày nay được xây dựng để đáp ứngquy mô hình ảnh dựa trên kích thước của màn hình hoặc thiết bị. Điều này có nghĩa là các tọa độ được đặt trước, đó là cách các bản đồ hình ảnh hoạt động, tách rời khi một trang web có quy mô và kích thước hình ảnh thay đổi. Đây là lý do tại sao bản đồ hình ảnh hiếm khi được sử dụng trên các trang web sản xuất ngày nay, nhưng chúng vẫn có lợi thế cho bản trình diễn hoặc các trường hợp mà bạn đang buộc kích thước của một trang.

Bạn muốn biết làm thế nào để tạo một bản đồ hình ảnh, cụ thể là làm thế nào để làm như vậy với Dreamweaver? . Quá trình này không phải là đặc biệt khó khăn, nhưng nó không phải là dễ dàng, hoặc, vì vậy bạn nên có một số kinh nghiệm trước khi bạn bắt đầu.

Bắt đầu

Băt đâu nao. Bước đầu tiên bạn cần thực hiện là thêm hình ảnh vào trang web của bạn. Sau đó, bạn sẽ nhấp vào hình ảnh để đánh dấu nó. Từ đó, bạn cần phải vào menu thuộc tính (và nhấp vào một trong ba công cụ vẽ hotspot: hình chữ nhật, hình tròn hoặc đa giác. Đừng quên đặt tên cho hình ảnh của bạn, bạn có thể làm điều đó trong thanh thuộc tính. sử dụng "bản đồ" làm ví dụ.

Bây giờ, vẽ hình dạng bạn muốn trên hình ảnh của bạn bằng cách sử dụng một trong những công cụ này. Nếu bạn cần các điểm hình chữ nhật, hãy sử dụng rectange. Tương tự cho vòng tròn. Nếu bạn muốn hình dạng điểm phát sóng phức tạp hơn, hãy sử dụng đa giác. Đây là những gì bạn có thể sẽ sử dụng trong ví dụ của bản đồ Hoa Kỳ, vì đa giác sẽ cho phép bạn thả điểm và tạo các hình dạng rất phức tạp và bất thường trên hình ảnh

Trong cửa sổ thuộc tính cho điểm phát sóng, hãy nhập hoặc duyệt đến trang mà điểm phát sóng sẽ liên kết. Đây là những gì tạo ra khu vực có thể liên kết đó. Tiếp tục thêm các điểm nóng cho đến khi bản đồ của bạn hoàn tất và tất cả các liên kết bạn muốn thêm đã được thêm vào.

Khi bạn đã hoàn tất, hãy xem lại bản đồ hình ảnh của bạn trong trình duyệt để đảm bảo nó hoạt động chính xác. Nhấp vào từng liên kết để đảm bảo liên kết đến tài nguyên hoặc trang web thích hợp.

Nhược điểm của bản đồ hình ảnh

Một lần nữa, hãy lưu ý rằng các bản đồ hình ảnh có nhiều nhược điểm, ngay cả bên ngoài sự thiếu hỗ trợ nói trên với các trang web đáp ứng. Firs, các chi tiết nhỏ có thể bị che khuất trong một bản đồ hình ảnh. Ví dụ: bản đồ hình ảnh địa lý có thể giúp xác định người dùng nào là lục địa, nhưng những bản đồ này có thể không đủ chi tiết để xác định quốc gia xuất xứ của người dùng. Điều này có nghĩa là một bản đồ hình ảnh có thể giúp xác định xem một người dùng đến từ châu Á nhưng không phải từ Campuchia nói riêng.

Bản đồ hình ảnh cũng có thể tải chậm. Chúng không được sử dụng nhiều lần trên một trang web vì chúng chiếm quá nhiều không gian để sử dụng trên mỗi trang của trang web. Quá nhiều bản đồ hình ảnh trên một trang sẽ tạo ra một nút cổ chai nghiêm trọng và ảnh hưởng lớn đến hiệu suất trang web .

Cuối cùng, bản đồ hình ảnh có thể không dễ dàng cho người dùng có vấn đề về hình ảnh để truy cập. Nếu bạn đã sử dụng bản đồ hình ảnh, bạn cũng nên tạo một hệ thống điều hướng khác cho những người dùng này thay thế.

Điểm mấu chốt

Tôi sử dụng bản đồ hình ảnh theo thời gian khi tôi cố gắng tổng hợp một bản demo nhanh về thiết kế và cách thức hoạt động của nó. Ví dụ, tôi có thể chế nhạo một thiết kế cho một ứng dụng di động và tôi muốn sử dụng bản đồ hình ảnh để tạo các điểm nóng để mô phỏng tính tương tác của ứng dụng. Điều này dễ làm hơn nhiều so với việc viết mã ứng dụng hoặc thậm chí xây dựng các trang web giả được xây dựng theo các tiêu chuẩn hiện tại với HTML và CSS. Trong ví dụ cụ thể này và vì tôi biết thiết bị tôi sẽ giới thiệu thiết kế và có thể mở rộng quy mô mã cho thiết bị đó, bản đồ hình ảnh hoạt động, nhưng đưa chúng vào trang web hoặc ứng dụng sản xuất rất phức tạp và có thể tránh được vào ngày hôm nay trang web.

Bài báo gốc của Jennifer Krynin. Được chỉnh sửa bởi Jeremy Girard vào ngày 9/7/17.