Dreamweaver에서 jQuery로 탭 패널을 만드는 방법 - Dreamweaver의 jQuery UI 탭 옵션 인

Dreamweaver의 jQuery UI 탭 옵션을 사용하면 일련의 탭에 해당하는 내용을 표시하거나 숨기는 일련의 패널을 쉽게 추가 할 수 있습니다. 접을 수있는 패널과 마찬가지로이 jQuery UI 기능을 사용하면 브라우저 창 내의 더 적은 공간에 더 많은 정보를 표시 할 수 있습니다. 아코디언 패널과 마찬가지로 탭 패널을 사용하여 텍스트, 이미지 및 멀티미디어를 표시 할 수 있습니다.

Dreamweaver에서 jQuery UI 위젯을 사용하여 탭 패널을 만드는 경우 탭 순서를 지정하여 페이지를 처음로드 할 때 나타나는 내용을 효과적으로 제어 할 수 있습니다.

다음 단계에 따라 탭 패널 그룹을 작성하십시오.

탭 패널을 표시 할 페이지에 커서를 놓으십시오.

1. 삽입 → jQuery UI → 탭을 선택하거나 jQuery UI 삽입 패널에서 탭 항목을 클릭하십시오.

2. 탭 패널이 페이지에 삽입되고 해당 CSS 파일이 CSS 디자이너 소스 패널에 나타납니다.

   주 작업 영역에서

   

3. Tab1, Tab2, 및 Tab 3 텍스트를 차례로 선택한 다음 각 탭 머리글을 패널의 탭에 표시 할 텍스트로 바꿉니다 지역. 탭의 내용은 속성 관리자가 아닌 작업 영역에서만 편집 할 수 있습니다. 기본적으로 탭 영역의 텍스트는 굵게 표시되지만 해당 CSS 규칙을 변경하여 해당 서식을 변경할 수 있습니다.

   각 탭의 크기를 조정하려면 탭을 선택한 다음 속성 관리자에서 높이 및 너비 설정을 사용합니다.

4. 개별 탭을 선택하면 속성 관리자가 해당 탭의 설정을 구체적으로 표시합니다.

   콘텐츠를 추가하려면 선택한 탭 패널의 주 영역에서

   

5. 콘텐츠 라는 단어를 선택한 다음 텍스트, 이미지 또는 멀티미디어를 입력하십시오. 페이지에 텍스트를 붙여 넣을 때와 마찬가지로 패널에 텍스트를 붙여 넣어 복사 할 수 있습니다. 마찬가지로 페이지의 다른 위치와 마찬가지로 패널에 이미지를 삽입합니다. 삽입 → 이미지 → 이미지를 선택한 다음 표시 할 GIF, JPEG 또는 PNG 파일을 선택합니다. Dreamweaver를 사용하여 이미지를 최적화하려면 멀티미디어 또는 Photoshop 파일을 추가 할 수도 있습니다.

   글꼴 또는 색상과 같은 탭 또는 패널의 모양을 변경하려면 해당 CSS 규칙을 편집하십시오.

6. 예를 들어, 탭에서 텍스트 색상이나 글꼴을 편집하려면 탭 주위의 상자를 선택하면 CSS 디자이너 선택기 패널에서 스타일 주위의 상자가 자동으로 선택됩니다.

   탭 패널의 수나 순서를 편집하려면 디자인 영역에 설정된 패널의 맨 위에있는 파란색 jQuery 탭 탭을 클릭하십시오.

7. 파란색 탭을 클릭하면 속성 관리자에 패널 설정이 나타납니다. 파란 상자 영역 바깥을 클릭하면 속성 관리자가 기본 설정으로 돌아갑니다.

   탭을 추가하려면 속성 관리자에서 더하기 기호 (+) 아이콘을 클릭합니다.

   

8. 작업 영역에 새 탭이 나타납니다.

   탭 순서를 변경하려면 속성 관리자에서 탭 이름을 선택한 다음 패널 필드의 화살표를 사용하여 패널을 이동합니다.

9. 주문이 변경되면 패널 이름이 메뉴 위아래로 이동합니다. 패널과 해당 탭은 속성 관리자에 나타나는 순서대로 웹 페이지에 나타납니다.

   페이지가 웹 브라우저로로드 될 때 표시 할 패널 드롭 다운 목록에서 패널을 선택하십시오.

10. 드롭 다운 목록은 작업 공간의 각 탭에 지정한 이름과 일치합니다.

    파일 → 저장을 선택하여 페이지를 저장하십시오. 종속 파일 복사 대화 상자가 나타나면 확인을 클릭하여 모든 관련 파일을 자동으로 생성하십시오.

11. jQuery UI 기능이 작동하려면 웹 페이지를 업로드 할 때 이러한 파일을 웹 서버에 업로드해야합니다.

    작업 영역의 상단에있는 지구본 아이콘을 클릭하고 브라우저에서 작업을 미리보기 위해 브라우저를 선택하십시오.

12. 웹 브라우저에 따라 ActiveX 컨트롤이 컴퓨터의 페이지를 미리 보도록 허용해야 할 수 있습니다.