Dreamweaver를 사용하면 웹 사이트의 드롭 다운 메뉴를 쉽게 만들 수 있습니다. 그러나 모든 HTML 양식처럼 약간 까다로울 수 있습니다. 이 자습서는 Dreamweaver에서 드롭 다운 메뉴를 만드는 단계를 안내합니다.
드림위버 점프 메뉴
Dreamweaver 8은 웹 사이트 탐색을위한 점프 메뉴를 만드는 마법사도 제공합니다. 기본 드롭 다운 메뉴와 달리이 메뉴는 작업이 끝나면 실제로 작업을 수행합니다. 드롭 다운 양식을 작동 시키려면 JavaScript 또는 CGI를 작성할 필요가 없습니다. 이 자습서에서는 Dreamweaver 8 마법사를 사용하여 점프 메뉴를 만드는 방법에 대해서도 설명합니다.
01/20
처음 양식 작성
HTML 양식 및 Dreamweaver에 대한 중요 참고 사항 :
점프 메뉴와 같은 특별한 마법사를 제외하고 Dreamweaver는 HTML 양식을 "작동"시키는 데 도움이되지 않습니다. 이를 위해서는 CGI 또는 JavaScript가 필요합니다. 자세한 내용은 내 자습서 HTML 양식 만들기를 참조하십시오.
웹 사이트에 드롭 다운 메뉴를 추가 할 때 가장 먼저 필요한 것은 그것을 둘러 쌀 수있는 양식입니다. Dreamweaver에서 삽입 메뉴로 이동하여 양식을 클릭 한 다음 "양식"을 선택하십시오.
02 중 20
양식이 디자인보기에 표시됩니다.
Dreamweaver는 디자인보기에서 시각적으로 양식 위치를 표시하므로 양식 요소를 어디에 배치해야하는지 알 수 있습니다. 드롭 다운 메뉴 태그는 양식 요소 외부에서 유효하지 않으며 작동하지 않으므로 중요합니다. 이미지에서 볼 수 있듯이 양식은 디자인보기에서 빨간색 점선입니다.
03/20
목록 / 메뉴 선택
드롭 다운 메뉴는 Dreamweaver의 "목록"또는 "메뉴"항목이라고합니다. 따라서 폼에 하나를 추가하려면 삽입 메뉴의 양식 메뉴로 이동하여 "목록 / 메뉴"를 선택해야합니다. 커서가 양식 상자의 빨간색 점선 안에 있는지 확인하십시오.
04 / 20
특별 옵션 창
Dreamweaver 옵션에는 액세스 가능성에 대한 화면이 있습니다. Dreamweaver에서 모든 접근성 속성을 표시하도록 선택합니다. 그리고이 화면은 그 결과입니다. 양식은 많은 웹 사이트가 액세스 가능성에 떨어지는 장소이며이 다섯 가지 옵션을 채우면 드롭 다운 메뉴에 즉시 액세스 할 수 있습니다.
05 중 20
양식 접근성
접근성 옵션은 다음과 같습니다.
상표
이 필드의 이름입니다. 양식 요소 옆에 텍스트로 표시됩니다.
드롭 다운 메뉴를 호출 할 내용을 작성하십시오. 드롭 다운 메뉴에서 대답 할 질문이나 짧은 문구가 될 수 있습니다.
스타일
HTML에는 브라우저에 대한 양식 레이블을 식별하는 레이블 태그가 포함되어 있습니다. 드롭 다운 메뉴와 레이블 텍스트를 태그로 둘러 싸서 레이블 태그의 "for"속성을 사용하여 참조하는 양식 태그를 식별하거나 레이블 태그를 전혀 사용하지 않아야합니다.
나는 for 속성을 사용하는 것을 선호하는데, 어떤 이유로 레이블을 옮길 필요가 있다면 올바른 양식 필드에 부착됩니다.
위치
드롭 다운 메뉴 이전 또는 이후에 레이블을 배치 할 수 있습니다.
액세스 키
Alt 또는 Option 키와 함께 사용하여 해당 양식 필드로 직접 이동할 수있는 키입니다. 이렇게하면 마우스를 사용하지 않고도 양식을 매우 쉽게 사용할 수 있습니다. HTML로 액세스 키를 설정하는 방법
탭 색인
키보드를 사용하여 웹 페이지를 탭할 때 양식 필드에 액세스해야하는 순서입니다. Tabindex 이해하기
내게 필요한 옵션을 업데이트 한 후 확인을 클릭하십시오.
06 20
메뉴 선택
디자인보기에 드롭 다운 메뉴가 표시되면 다양한 요소를 추가해야합니다. 먼저 드롭 다운 메뉴를 클릭하여 선택하십시오. Dreamweaver에서는 드롭 다운 메뉴 주위에 다른 점선을 추가하여 선택한 것을 나타냅니다.
07 중 20
메뉴 속성
속성 메뉴가 해당 드롭 다운 메뉴의 목록 / 메뉴 속성으로 변경됩니다. 여기서 메뉴에 ID ( "선택"이라고 말함)를 지정하고, 스타일을 lis 또는 메뉴로 만들 것인지, 스타일 시트에서 스타일 클래스를 지정하고, 드롭 다운에 값을 할당 할 수 있습니다.
목록과 메뉴의 차이점은 무엇입니까?
Dreamweaver는 하나의 선택 만 허용하는 메뉴 드롭 다운 메뉴를 호출합니다. "목록"은 드롭 다운에서 여러 선택을 허용하며 하나 이상의 항목이 높을 수 있습니다.
드롭 다운 메뉴를 여러 줄로 높이려면 "목록"유형으로 변경하고 "선택 사항"상자는 선택하지 마십시오.
08 중 20
새 목록 항목 추가
메뉴에 새 항목을 추가하려면 "List values ..."버튼을 클릭하십시오. 위의 창이 열립니다. 첫 번째 상자에 상품 라벨을 입력하십시오. 이것은 페이지에 표시됩니다. 값을 공백으로 남겨두면 양식으로 전송됩니다.
09/20
추가 및 재정렬
더 많은 항목을 추가하려면 더하기 아이콘을 클릭하십시오. 목록 상자에서 순서를 바꾸려면 오른쪽에있는 위아래 화살표를 사용하십시오.
10/20
모든 항목 값 부여
8 단계에서 언급했듯이 값을 비워두면 레이블이 양식으로 전송됩니다. 그러나 모든 항목 값을 제공 할 수 있습니다. 양식에 대체 정보를 보낼 수 있습니다. 당신은 점프 메뉴와 같은 것들을 위해 이것을 많이 사용할 것입니다.
11/20
기본값 선택
웹 페이지는 기본적으로 먼저 나열된 드롭 다운 항목을 기본 항목으로 표시합니다. 그러나 다른 것을 선택하려면 속성 메뉴의 "처음 선택한 항목"상자에서 강조 표시하십시오.
12/20
디자인보기에서 목록보기
속성 편집을 마쳤 으면 Dreamweaver는 드롭 다운 목록에 선택된 기본값을 표시합니다.
13/20
코드보기에서 목록보기
코드 뷰로 전환하면 드림위버가 매우 깨끗한 코드로 드롭 다운 메뉴를 추가한다는 것을 알 수 있습니다. 유일한 추가 속성은 접근성 옵션을 추가 한 속성입니다. 코드는 들여 쓰기가 쉽고 읽고 이해하기가 쉽습니다. Dreamweaver에 기본적으로 XHTML을 작성한다고 말했기 때문에 selected = "selected"특성을 사용합니다.
14/20
브라우저에서 저장 및보기
문서를 저장하고 웹 브라우저에서 보면 드롭 다운 메뉴가 예상했던 것처럼 나타납니다.
15/20
하지만 아무것도하지 마라.
위에서 만든 메뉴는 괜찮아 보이지만 아무 것도하지 않습니다. 이 작업을 수행하려면 양식 자체에서 양식 작업을 설정해야합니다.이 작업은 완전히 다른 자습서입니다.
다행히 Dreamweaver에는 양식, CGI 또는 스크립팅에 대해 알 필요없이 사이트에서 즉시 사용할 수있는 드롭 다운 메뉴 양식이 내장되어 있습니다. 점프 메뉴라고합니다.
Dreamweaver 점프 메뉴는 이름과 URL이있는 드롭 다운 메뉴를 설정합니다. 그런 다음 메뉴에서 항목을 선택할 수 있으며 링크를 클릭 한 것처럼 웹 페이지가 해당 위치로 이동합니다.
삽입 메뉴로 이동하여 양식을 선택한 다음 점프 메뉴를 선택하십시오.
16/20
점프 메뉴 창
표준 드롭 다운 메뉴와 달리 점프 메뉴는 메뉴 항목의 이름을 지정하고 양식 작동 방식에 대한 세부 정보를 추가 할 수있는 새 창을 엽니 다.
첫 번째 항목의 경우 텍스트 "untitled1"을 원하는 내용으로 변경하고 해당 링크가 가야 할 URL을 추가하십시오.
17/20
점프 메뉴에 항목 추가
추가 항목을 클릭하여 점프 메뉴에 새 항목을 추가하십시오. 원하는만큼 항목을 추가하십시오.
18/20
점프 메뉴 옵션
원하는 모든 링크를 추가했으면 옵션을 선택해야합니다.
에서 URL 열기
프레임 세트가있는 경우 다른 프레임에서 링크를 열 수 있습니다. 또는 URL이 새 창이나 다른 곳에서 열리도록 기본 창 옵션을 특수 대상으로 변경할 수 있습니다.
메뉴 이름
메뉴에 페이지의 고유 ID를 지정하십시오. 이것은 스크립트가 올바르게 작동하기 위해 필요합니다. 또한 하나의 양식에서 여러 개의 점프 메뉴를 사용할 수 있습니다. 단지 모든 다른 이름을 지정하십시오.
메뉴 다음에 이동 단추 삽입
나는 메뉴를 바꿀 때 스크립트가 작동하지 않기 때문에 이것을 선택하는 것을 좋아한다. 또한 더 쉽게 접근 할 수 있습니다.
URL 변경 후 첫 번째 항목 선택
첫 번째 메뉴 항목으로 "하나 선택"과 같은 프롬프트가있는 경우이 옵션을 선택하십시오. 이렇게하면 해당 항목이 페이지에 기본값으로 유지됩니다.
19/20
점프 메뉴 디자인보기
첫 번째 메뉴와 마찬가지로 Dreamweaver는 점프 메뉴를 기본보기가 표시된 디자인보기로 설정합니다. 그런 다음 다른 것과 마찬가지로 드롭 다운 메뉴를 편집 할 수 있습니다.
편집하는 경우 항목의 ID를 변경하지 마십시오. 그렇지 않으면 스크립트가 작동하지 않을 수 있습니다.
20/20
브라우저에서 점프 메뉴
파일을 저장하고 F12를 누르면 기본 브라우저에 페이지가 표시됩니다. 여기서 옵션을 선택하고 "이동"을 클릭하면 점프 메뉴가 작동합니다!