이 자습서에서는 빈 템플릿으로 시작한 Wix 웹 사이트에서 계속 작업합니다. 헤더 섹션에 메인 메뉴를 추가하겠습니다.
첫 번째 작업은 헤더에 색 배경을 추가하는 것입니다.
- 머리글을 선택하고 머리글 디자인 변경 단추를 클릭하십시오.
이때 머리글은 색상 없음으로 설정됩니다. 그것을 흰색으로 바꾸자.
- 색상 없음 바로 아래의 헤더 디자인을 클릭하십시오.
- 창의 맨 아래에있는 디자인 사용자 정의 단추를 클릭하십시오.
- 배경 및 중앙 배경에 대해 채우기 색상 및 불투명도 설정을 100 % 흰색으로 설정하십시오.
- 테두리 설정의 경우 위쪽 테두리 및 아래쪽 테두리 너비를 0으로 설정하십시오.
- 모서리 반경을 0으로 설정하고 그림자 사용을 끕니다.
이제 최상위 메뉴를 추가 할 수 있습니다.
- 왼쪽 메뉴에서 플러스 아이콘을 클릭하고 목록에서 메뉴를 선택하십시오.
- 가로 메뉴 중 하나를 클릭하여 페이지에 추가하십시오.
한 페이지-홈 링크가있는 페이지에 새 메뉴가 표시됩니다.
- 메뉴를 클릭하고 헤더 섹션으로 끕니다. 당신이 텍스트를 볼 때 헤더에 첨부메뉴에서 손을 떼십시오.
우리는 페이지의 메뉴를 가운데에 위치 시키므로 메뉴 상자를 980px 너비로 확장 할 것입니다.
- 메뉴 상자를 선택한 상태에서 상자 끝을 끌어 980 영역을 채 웁니다. 왼쪽 및 오른쪽 지침을 지침으로 사용하십시오.
메뉴는 기본적으로 가운데로 설정되어 있어야합니다. 홈 링크가 상자 중앙에 있기 때문에 이것을 볼 수 있습니다. 이제 메뉴를 사용자 정의 할 수 있습니다.
- 메뉴가 선택된 상태에서 디자인 아이콘 (페인트 브러시)을 클릭하여 수평 메뉴 디자인 창을 엽니 다. 창의 맨 아래에있는 디자인 사용자 정의 단추를 클릭하십시오.
채우기 색상 및 불투명도를 클릭하면 메뉴 배경이 이미 100 % 흰색으로 설정되어있는 것을 볼 수 있습니다. 이 설정을 유지하고 텍스트로 넘어 갑시다.
이전 자습서에서는 기본 텍스트 테마의 글꼴을 Futura Light로 설정했습니다. 메뉴도 똑같이 해봅시다.
- T 아이콘을 클릭하여 텍스트 설정 섹션을여십시오.
- 글꼴 섹션의 오른쪽에있는 화살표를 클릭하고 목록에서 Futura Light를 선택하십시오.
일반 메뉴 텍스트의 기본 색상 설정을 유지합시다. 그러나 호버 및 클릭 메뉴 텍스트 색상을 금색으로 변경합니다.
- 창에서 호버 링크를 클릭하십시오. 색상 상자를 클릭하여 색상 선택기를 엽니 다. 색상 추가 링크를 클릭하고 색상 설정을 # bc9b5d로 변경 한 다음 추가 버튼을 클릭하십시오. 색상 피커를 닫습니다.
- 클릭 설정에 대해 이전 단계를 반복하십시오. 그러나 이번에는 내 색 영역에서 금색을 선택할 수 있습니다.
마지막으로 페이지 링크의 기본 텍스트를 HOME에서 웹 사이트 이름으로 변경하려고합니다.
- 메뉴가 선택된 상태에서 팝업 메뉴에서 메뉴 관리 버튼을 클릭하십시오.
- 페이지 메뉴에서 HOME 페이지를 찾아 오른쪽의 링크를 클릭하십시오. 목록에서 이름 바꾸기를 선택하십시오. 새 링크 제목을 추가하고 완료를 클릭하십시오.
다음 작업은 메뉴의 높이보다 약간 더 크게 헤더 섹션의 크기를 조정하는 것입니다.
- 메뉴를 선택하고 머리글 영역의 상단으로 끕니다.
- 늘이기 핸들을 보려면 머리글의 빈 영역을 클릭하십시오. 핸들을 위로 끕니다.
Wix.com, Inc.의 승인하에 사용 된 스크린 샷
비디오 지침: HTML5 - 06 (볼륨조절 재업) 리스트 태그, 종류, 특징, 서브메뉴 구현하기 (월 2024).