Làm thế nào để sử dụng hình ảnh cho tiêu đề trang web dựa trên HTML5 và CSS3 của bạn - núm vú

Nói chung, bạn nên sử dụng phông chữ chuẩn cho nội dung chính của trang HTML5 và CSS3, việc có một mảng các phông chữ hạn chế không phải là một vấn đề lớn. Đôi khi, mặc dù, bạn muốn sử dụng phông chữ trong tiêu đề của bạn. Bạn có thể sử dụng trình chỉnh sửa đồ họa, như GIMP, để tạo các hình ảnh dựa trên văn bản và sau đó kết hợp chúng vào các trang của bạn.

Đây là quy trình sử dụng phông chữ đặc biệt:

1. Lập kế hoạch trang của bạn.

   Khi bạn sử dụng đồ hoạ, bạn mất một chút linh hoạt. Bạn cần phải biết chính xác những tiêu đề nên được. Bạn cũng cần phải biết dòng tiêu đề sẽ hiển thị ở mức nào. Thay vì dựa vào trình duyệt để hiển thị tiêu đề của bạn, bạn đang tạo đồ họa trong công cụ đồ hoạ của bạn và đặt chúng trực tiếp vào trang.

2. Tạo hình ảnh của bạn.

   Bạn có thể sử dụng tính năng Logos tuyệt vời trong GIMP (chọn Xtns ➩ Script-fu ➩ logo) để tạo văn bản của bạn.

3. Chỉ định kích thước phông trực tiếp.

   Trong hình ảnh, bạn nên xác định kích thước phông chữ bằng pixel vì ở đây bạn đang nói về một số lượng pixel cụ thể. Bạn đang tạo "văn bản ảo" trong trình chỉnh sửa đồ họa của mình, do đó hãy tạo văn bản bất kỳ kích thước nào bạn muốn nó ở trang đã hoàn thành.

4. Sử dụng bất kỳ phông bạn muốn.

   Bạn không phải lo lắng về việc người dùng có phông chữ vì bạn không gửi phông chữ, chỉ cần một hình ảnh được tạo ra với phông chữ.

5. Tạo một hình ảnh riêng cho mỗi tiêu đề.

   Bài tập đặc biệt này có hai hình ảnh - tiêu đề cấp 1 và mức 2. Bởi vì bạn đang tạo hình ảnh trực tiếp, bạn phải theo dõi hình ảnh sẽ truyền đạt mức tiêu đề như thế nào.

6. Xem cấp độ tiêu đề.

   Đảm bảo các giá trị cấp 2 của tiêu đề nhìn ít hơn một chút so với cấp 1. Tức là, nếu bạn có hình ảnh được sử dụng trong cài đặt tiêu đề nhóm 1, họ nên sử dụng phông chữ lớn hơn các hình ảnh sẽ được được sử dụng trong một mức độ tiêu đề ít được nhấn mạnh. Thông thường, điều này được thực hiện bằng cách điều chỉnh kích thước phông chữ trong hình ảnh của bạn.

7. Tạo trang theo cách bạn thường làm.

   Sau khi bạn tạo ra những hình ảnh đặc biệt này, hãy xây dựng một trang web thông thường. Đặt thẻ

   và

   vào đúng nơi bạn thường làm.

8. Đặt thẻ

   bên trong tiêu đề.

   Thay vì văn bản thông thường, hãy đặt thẻ hình bên trong thẻ

   và

   . Xem hình ảnh mã nguồn sắp tới. html nếu bạn hơi bối rối.

9. Đưa văn bản tiêu đề vào thuộc tính alt.

   Thuộc tính alt đặc biệt quan trọng ở đây bởi vì nếu người dùng đã tắt đồ hoạ, văn bản vẫn xuất hiện như một tiêu đề phù hợp.Những người có kết nối chậm xem văn bản trước khi tải hình ảnh và những người sử dụng trình đọc văn bản vẫn có thể đọc văn bản alt của hình ảnh.

Đây là mã được sử dụng để tạo các tiêu đề dựa trên hình ảnh:

imageTitles. html



Trang này mô tả những con bò nổi tiếng trong lịch sử



Hầu hết mọi người không biết gia súc thực sự đã tham gia vào trận chiến. Họ không phải tất nhiên. Tôi chỉ cần làm điều đó lên.

Kỹ thuật này là một sự thỏa hiệp tốt đẹp giữa đồ họa tùy chỉnh và HTML thông thường như sau:

• Bạn có quyền kiểm soát tuyệt vời của hình ảnh của bạn. Nếu bạn có kỹ năng đồ họa tốt, bạn có thể tạo bất kỳ loại hình nào bạn muốn làm như một tiêu đề. Không có giới hạn nào trừ khả năng và sự sáng tạo của bạn.

• Trang duy trì cấu trúc của nó. Bạn vẫn có thẻ tiêu đề đúng vị trí, vì vậy bạn dễ dàng thấy được ý nghĩa của một hình ảnh cụ thể để hoạt động như một tiêu đề. Bạn vẫn có thể xem tổ chức trang trong mã HTML.

• Bạn có văn bản dự phòng. Các thuộc tính alt sẽ được kích hoạt nếu các hình ảnh không thể được hiển thị.

• Ý nghĩa ngữ nghĩa của tiêu đề ảnh được bảo toàn. Các thẻ alt cung cấp một tính năng tuyệt vời. Nếu họ sao chép văn bản hình ảnh, văn bản này vẫn có sẵn cho người đọc màn hình và công cụ tìm kiếm, do đó, văn bản không được chôn trong hình ảnh.

Kỹ thuật này thật tuyệt vời đối với tiêu đề hoặc các khu vực khác, nhưng chú ý rằng văn bản tiêu đề đã được lặp lại trong thẻ. Điều này rất quan trọng vì bạn không muốn mất văn bản. Công cụ tìm kiếm và trình đọc màn hình cần văn bản.

Đừng bị cám dỗ để sử dụng kỹ thuật này cho số lượng lớn các văn bản cơ thể. Làm như vậy gây ra một số vấn đề:

• Văn bản không còn có thể tìm kiếm nữa. Công cụ tìm kiếm không thể tìm thấy văn bản nếu nó được chôn trong hình ảnh.

• Văn bản khó thay đổi. Bạn không thể cập nhật trang của mình với một trình soạn thảo văn bản. Thay vào đó, bạn phải tải về hình ảnh, sửa đổi nó, và tải nó lên một lần nữa.

• Hình ảnh cần nhiều băng thông hơn văn bản. Không sử dụng hình ảnh nếu chúng không thêm đáng kể vào trang của bạn. Bạn có thể làm cho các trường hợp cho một vài hình ảnh tiêu đề, nhưng nó khó hơn để biện minh cho toàn bộ trang của bạn được lưu trữ như một hình ảnh chỉ để sử dụng một phông chữ cụ thể.