사이트에 시각적 단서 추가

Sep 11, 2025

어떻게

웹 사이트 사용자가 링크를 클릭하여 웹 페이지가 관심이 없으므로 시간을 낭비하는 것을 알아내는 것은 짜증나게됩니다. 페이지 배경에서 그림을 사용하면 사용자가 페이지를로드하기 전에 링크에서 예상 할 것인지 표시 할 수있는 좋은 방법입니다. 이 기술의 훌륭한 예를 볼 수 있습니다. Ivan Aivazvsky Life 사이트 ...에

페이지 배경을 사용하면 난독증 독자 또는 영어를 추가 언어로 사용하는 사람들도 도움이 될 수 있습니다. 이러한 경우 너무 많은 텍스트로 오버로드하지 않고도 사용자에게 추가 정보를 전달할 수 있습니다.

매력적인 사용자 경험을 만드는 10 단계

텍스트를 배경 이미지와 결합하는 효과와 마찬가지로 텍스트가 항상 읽을 수 있는지 확인하십시오. 이는 네비게이션 링크에 반투명 색상을 배치하여이를 수행 할 수 있습니다. 또한 사용자가 컬러 텍스트를 해석 할 수 있는지에 영향을 미치는 색맹과 같은 문제에 대한 UX 가독성을 고려하십시오.

유용한 대화 형 탐색 디스플레이를 만드는 방법을 보여 드리겠습니다. 얻기 쉬운 시각적 단서.

이 자습서의 파일을 다운로드하십시오 여기 ...에

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Ivan Aivazvsky Life 사이트는 링크를 다루는 것처럼 배경 이미지를 변경합니다 (이미지를 클릭하여 웹 사이트로 이동하십시오)

01. HTML 문서를 만듭니다

헤드 및 본문 섹션을 저장하는 HTML 컨테이너로 구성된 주 HTML 문서 템플릿을 만듭니다.

헤드 섹션은 문서 제목과 같은 설명 정보와 외부 자원에 대한 링크를 저장합니다. 즉, CSS 및 JavaScript.

본문은 문서 내용을 저장합니다. 본문의 중요한 특징은 JavaScript가 CSS 프레젠테이션 변경을 트리거하기 위해 적용된 '데이터 테마'속성입니다.

& lt; Doctype HTML & gt; & lt; html & gt; & lt; head & gt; & lt; 탐색 배경 & lt; / title & gt; & lt; 링크 rel = "스타일 시트"유형 = "text / css"href = "styles.css"/ & gt; & lt; script type = "text / javascript"src = "code.js"& lt; / script & gt; & lt; / head & gt; & lt; 바디 데이터 테마 & gt; *** 2 단계 & lt; / body & gt; & lt; / html & gt;

02. 탐색 HTML을 추가합니다

페이지 컨텐츠는 링크가 들어있는 탐색 컨테이너로 구성됩니다. 자바 링크의 탐색의 ID와 자바 링크의 제목은 JavaScript에서 상호 작용을 청취하고 본문 컨테이너의 일부로 정의 된 '데이터 테마'속성을 변경합니다.

 & lt; nav id = "mainnav"& gt;
& lt; a href = "#"제목 = "페이지 1"& gt; Page 1 & lt;
& lt; a href = "#"제목 = "페이지 2"& gt;
& lt; a href = "#"title = "Page 3 & lt; page 3 & a & gt;
& lt; / nav & gt;

03. CSS 파일을 시작하십시오

이제 HTML 컨텐츠가 완료되므로 'Styles.css'라는 새 파일을 만듭니다. 이 파일은 시각적 프레젠테이션을 제어하는 CSS 서식 지정 규칙을 저장합니다. 흰색 배경과 검은 색 텍스트를 사용하여 HTML 문서와 해당 본문을 전체 화면에 보이도록 제시 할 규칙 으로이 파일을 시작하십시오.

 HTML, BODY {
  디스플레이 : 블록;
  너비 : 100 %;
  높이 : 100 %;
  마진 : 0;
  패딩 : 0;
  글꼴 - 가족 : Helvetica, Sans-serif;
  색상 : # 000; }

04. Visuals에 대한 규칙을 설정합니다

효과를위한 중요한 구성 요소는 문서 본문에 적용된 '데이터 테마'속성을 사용하는 것입니다. 규칙은 백그라운드 위치 및 변경 전환에 사용할 데이터의 기본 동작을 정의하도록 설정됩니다.

이렇게하면 웹 페이지를보다 쉽게 유지하게 만드는 각 개별 테마에 대해 이러한 규칙 정의를 반복 할 필요가 없습니다.

 [데이터 테마] {
  전환 : 배경 1s;
  배경 : 반복 중심지 센터;
  배경 크기 : 덮개; }

05. 테마를 디자인하십시오

각 테마의 디자인은 데이터 테마 속성 값을 사용하여 설정됩니다.

원하는 효과를 얻으려면 테마의 각 버전에 대해 다른 배경 이미지를 설정하고 있습니다. 이전 단계는이 테마가 상속하는 기본 설정을 모두 처리합니다.

 [데이터 테마 = "페이지 1"] {
  배경 이미지 : URL (image1.jpg);
}
[데이터 테마 = "페이지 2"] {
  배경 이미지 : URL (image2.jpg);
}
[데이터 테마 = "페이지 3"] {
  배경 이미지 : URL (Image3.jpg);
}

06. 네비게이션 컨테이너를 추가합니다

네비게이션 컨테이너는 화면 중간에 배치 된 일관된 너비로 링크가 제시되는지 확인하는 데 사용됩니다. 수평 마진에 사용되는 폭 50 %의 폭과 자동 계산이 적용됩니다. 이 접근법은 사용자 화면 해상도 / 크기에 관계없이 일관성을 보장합니다.

 #mainnav {
  디스플레이 : 블록;
  너비 : 50 %;
  마진 : 0 자동 0 자동; }

07. 스타일 탐색 링크

탐색 컨테이너 내의 링크는 컨테이너의 너비에 적응하도록 설정된 블록으로 표시되어야합니다. 즉, 100 % 폭이 컨테이너의 너비로 정의됩니다. 패딩, 테두리 및 배경 색칠도 적용되어 배경 이미지에서 밖으로 서있는지 확인합니다.

 #mainnav a {
  디스플레이 : 블록;
  너비 : 100 %;
  배경 : RGBA (255,255,255, .3);
  색상 : # 000;
  패딩 : 1em;
  마진 - 상단 : .5em;
  테두리 : 1px 고체; }
#mainnav A : 호버 {
  배경 : RGBA (0,0,0, .5);
  색상 : #fff; }

08. 링크 이벤트 리스너

이제 CSS가 완료되므로 JavaScript에 'code.js'라는 새 파일을 만듭니다.

효과는 탐색 내부의 각 링크가 사용자가 링크를 통해 호버하는 Mouseover 이벤트에 듣고 반응해야합니다. 이 리스너는 문서 본문의 데이터 테마 속성에 대한 링크의 '제목'값을 적용하므로 CSS의 트리거 스타일을 적용합니다.

페이지 창이로드 된 후 탐색 링크 노드는 배열에 배치되며,이 경우 루프가 이벤트 수신기를 적용하는 데 사용됩니다.

 window.addeventListener ( "load", function () {
  var nodes = document.querySelectorAll ( "# mainnav a");
  for (var i = 0; i & lt; nodes.length; i ++) {
  노드 [i] .addeventListener ( "mouseover", function () {
  Document.Body.SetAttribute ( "데이터 테마", getAttribute ( "제목"));
  });
  }
});

이 기사는 원래 웹 디자이너 문제 262에 출연했습니다. 여기 그것을 구입하십시오 ...에!

관련 기사:

2017의 웹 사이트 탐색 동향 10 개
매력적인 사용자 경험을 만드는 10 단계
Léonie Watson이 이유는 웹 디자인 프로세스의 필수 요소 여야합니다.

사이트에 시각적 단서 추가

01. HTML 문서를 만듭니다

02. 탐색 HTML을 추가합니다

03. CSS 파일을 시작하십시오

04. Visuals에 대한 규칙을 설정합니다

05. 테마를 디자인하십시오

06. 네비게이션 컨테이너를 추가합니다

07. 스타일 탐색 링크

08. 링크 이벤트 리스너

어떻게 - 가장 인기있는 기사

22 베스트 UI 디자인 도구

동물을 그리는 법 : 15 팁

Photoshop에서 로고를 만드는 방법

Photoshop에서 스마트 레이어를 사용하는 방법

VR에서 캐릭터를 조각하는 방법

Photoshop CC에서의 사진 촬영

공간 헬멧에 곡선 된 유리를 페인트하는 방법

조각 및 페인트 변위지도를 결합하는 방법

카테고리