HTML5 및 CSS3 기반 웹 페이지 헤드 라인 용 이미지 사용 방법 - 인형

일반적으로 HTML5 및 CSS3 웹 페이지의 기본 콘텐츠에는 표준 글꼴을 사용해야합니다. 제한된 글꼴 배열을 갖는 것은 그렇게 큰 문제는 아닙니다. 때로는 헤드 라인에 글꼴을 사용하려고합니다. GIMP와 같은 그래픽 편집기를 사용하여 텍스트 기반 이미지를 만든 다음 페이지에 통합 할 수 있습니다.

다음은 특별한 글꼴을 사용하는 과정입니다.

1. 페이지를 계획하십시오.

   그래픽을 사용하면 유연성이 약간 떨어집니다. 헤드 라인이 무엇인지 정확하게 알고 있어야합니다. 또한 어떤 헤드 라인이 어떤 레벨에 표시되는지 알아야합니다. 브라우저를 사용하여 헤드 라인을 표시하는 대신 그래픽 도구에서 그래픽을 만들어 페이지에 직접 배치합니다.

2. 이미지를 만듭니다.

   김프의 멋진 로고 기능 (Xtns ➩ Script-fu ➩ 로고 선택)을 사용하여 텍스트를 만들 수 있습니다.

3. 글꼴 크기를 직접 지정하십시오.

   이미지에서 글꼴 크기를 픽셀 단위로 지정하는 것이 좋습니다. 특정 픽셀 수를 말하는 것이기 때문입니다. 그래픽 편집기에서 "가상 텍스트"를 만들고 있으므로 완성 된 페이지에 원하는 크기의 텍스트를 만드십시오.

4. 원하는 글꼴을 사용하십시오.

   폰트를 보내지 않아 폰트가있는 지 사용자가 걱정할 필요가 없습니다. 폰트로 구성된 이미지 일뿐입니다.

5. 각 광고 제목에 대해 별도의 이미지를 만듭니다.

   이 특별한 연습에는 레벨 1 제목과 레벨 2의 두 가지 이미지가 있습니다. 이미지를 직접 작성하기 때문에 이미지가 헤드 라인 레벨과 통신하는 방법을 계속 추적하는 것은 사용자의 몫입니다.

6. 헤드 라인 레벨을 고려하십시오.

   헤드 라인 레벨 2 값을 레벨 1보다 조금 작게 또는 덜 강조되도록하십시오. 즉, 헤드 라인 1 설정에서 사용될 이미지가있는 경우, 이미지보다 큰 글꼴을 사용해야합니다 덜 강조된 제목 수준에서 사용됩니다. 일반적으로 이미지의 글꼴 크기를 조정하면됩니다.

7. 평소처럼 페이지를 구축하십시오.

   이러한 특수 이미지를 만든 후에 일반 웹 페이지를 만듭니다.

   및

   태그를 평소와 똑같은 곳에 두십시오.

8. 표제 안에

   개의 태그를 넣으십시오.

   일반 텍스트가 아닌 이미지 태그를

   및

   태그 안에 넣으십시오. 다가오는 코드 imageTitles를 참조하십시오. html 당신이 조금 혼란 스럽다면.

9. alt 속성에 광고 제목을 넣으십시오.

   사용자가 그래픽이 꺼져있는 경우 텍스트는 여전히 적절한 스타일의 표제로 나타나기 때문에 alt 속성이 특히 중요합니다.느린 연결을 가진 사람들은 이미지가로드되기 전에 텍스트를보고 텍스트 판독기를 사용하는 사람들은 이미지의 대체 텍스트를 읽을 수 있습니다.

이미지 기반 헤더를 생성하는 데 사용되는 코드는 다음과 같습니다.

imageTitles. html



이 페이지는 역사상 유명한 소들을 묘사합니다.



대부분의 사람들은 소가 실제로 전투에 참여했다는 사실을 모르고 있습니다. 그들은 물론 아니었다. 방금 그걸 만들었 어.

이 기술은 다음과 같이 사용자 정의 그래픽과 일반 HTML간에 좋은 절충안입니다.

• 이미지를 잘 제어 할 수 있습니다. 그래픽 도구에 숙련 된 사용자라면 원하는 모든 유형의 이미지를 헤드 라인으로 사용할 수 있습니다. 당신의 기술과 독창성을 제외하고는 문자 그대로 한계가 없습니다.

• 페이지는 구조를 유지합니다. 여전히 제목 태그가 있으므로 특정 이미지가 헤드 라인의 역할을한다는 것을 쉽게 알 수 있습니다. HTML 코드에서 페이지 구성을 볼 수 있습니다.

• 대체 텍스트가 있습니다. 이미지를 표시 할 수없는 경우 alt 속성이 활성화됩니다.

• 이미지 헤드 라인의 의미 론적 의미가 보존됩니다. alt 태그는 또 다른 훌륭한 기능을 제공합니다. 이미지 텍스트를 복제하는 경우이 텍스트는 화면 판독기와 검색 엔진에서 계속 사용할 수 있으므로 텍스트는 이미지에 묻히지 않습니다.

이 기법은 헤드 라인이나 기타 영역에 적합하지만 표제 텍스트가 태그에서 반복되었음을 알 수 있습니다. 이것은 텍스트를 잃고 싶지 않기 때문에 중요합니다. 검색 엔진 도구 및 화면 판독기에는 텍스트가 필요합니다.

많은 양의 본문에는이 기술을 사용하지 마십시오. 이렇게하면 몇 가지 문제가 발생합니다.

• 텍스트를 더 이상 검색 할 수 없습니다. 검색 엔진이 이미지에 묻혀 있으면 텍스트를 찾을 수 없습니다.

• 본문은 변경하기가 더 어렵습니다. 텍스트 편집기로 페이지를 업데이트 할 수 없습니다. 대신 이미지를 다운로드하고 수정 한 다음 다시 업로드해야합니다.

• 이미지는 텍스트보다 더 많은 대역폭을 필요로합니다. 이미지가 실질적으로 페이지에 추가되지 않으면 이미지를 사용하지 마십시오. 몇개의 제목 이미지로 케이스를 만들 수 있습니다 만, 특정의 폰트를 사용하기 위해서 전체 페이지를 이미지로서 저장하는 것을 정당화하는 것은 어렵습니다.