Dreamweaver에서 jQuery로 축소 가능 패널을 만드는 방법 - 드림위버

Dreamweaver의 jQuery UI 아코디언 위젯은 사이트 방문자가 웹 페이지를 새로 고치지 않고도 열고 닫을 수있는 접을 수있는 패널을 쉽게 추가 할 수있게합니다. 이 jQuery 기능을 사용하면 브라우저 창에서 적은 공간에 더 많은 정보를 표시하여 페이지의 공간을보다 효율적으로 사용할 수 있습니다.

아코디언 축소 패널에이 성격 웹 사이트의 각 노래 조류의 이름, 사진 및 서식 환경이 어떻게 포함되어 있는지 확인할 수 있습니다. 그 결과 한 페이지에 모든 새의 이름을 쉽게 볼 수 있습니다. 새의 설명을 보려면 사용자가 패널 상단의 탭 (새 이름이 나타나는 위치)을 클릭하기 만하면 패널이 즉시 열립니다.

오렌지 왕관을 쓴 자에 대한 사진과 설명은 열려 있고 나머지는 닫혀 있습니다. jQuery의 장점은 패널을 열거 나 닫을 때 페이지를 다시로드 할 필요가 없다는 것입니다. 탭을 한 번 클릭하면 즉시 패널이 열립니다. 다른 탭을 클릭하면 이전에 열린 패널이 닫힐 때 해당 패널이 열립니다.

접을 수있는 패널은 텍스트, 이미지 및 오디오, 비디오 및 Flash 파일과 같은 멀티미디어 파일을 표시하는 데 사용할 수 있습니다.

웹 브라우저에 표시되는 아코디언 패널 (또는 Dreamweaver의 다른 많은 고급 기능)을 보려면 Dreamweaver 작업 영역 왼쪽 위의 라이브 뷰 버튼을 클릭해야합니다.

Dreamweaver에서 jQuery UI 메뉴를 사용하여 아코디언 패널 세트를 만든 후에는 다음 지침에 따라 속성 관리자를 사용하여 여러 패널 설정을 변경할 수 있습니다.

다음 단계에 따라 아코디언 패널 세트를 작성하십시오.

아코디언 패널을 표시 할 페이지에 커서를 놓으십시오.
삽입 → jQuery UI → 아코디언을 선택하거나 jQuery UI 삽입 패널에서 아코디언 항목을 클릭하십시오.

3 개의 패널이있는 jQuery UI 접을 수있는 아코디언 패널 그룹이 페이지에 나타납니다.
각 패널 상단의 섹션 이라는 단어를 선택하고 패널의 탭 영역에 표시 할 텍스트로 바꿉니다.

기본적으로 탭 영역의 텍스트는 일반 텍스트이지만 해당 CSS 규칙을 변경하거나 HTML 태그 (예: 제목 태그)를 사용하여 텍스트 서식을 변경하여 변경할 수 있습니다.
각 패널의 주 영역에서 콘텐츠 라는 단어를 선택하고 표시 할 텍스트 또는 이미지를 입력하십시오.

페이지에 텍스트를 붙여 넣을 때처럼 패널에 텍스트를 붙여 넣을 수 있습니다. 마찬가지로 패널의 다른 위치와 마찬가지로 패널에 이미지를 삽입합니다. 패널에 커서를두고 삽입 → 이미지 → 이미지를 선택하고 표시 할 GIF, JPEG 또는 PNG 파일을 선택합니다.Dreamweaver를 사용하여 이미지를 최적화하려는 경우 Photoshop 파일을 선택할 수도 있습니다.

패널에 텍스트를 붙여 넣을 때 편집 → 선택하여 붙여 넣기를 선택하여 Dreamweaver에서 붙여 넣을 텍스트에 유지할 서식의 양을 선택합니다. 서식의 양을 제한하면 잠재적 인 스타일 충돌을 줄일 수 있습니다.
패널 설정을 변경하려면 디자인 영역의 패널 맨 위에있는 파란색 jQuery 아코디언 탭을 클릭합니다.

파란색 탭을 클릭하면 속성 관리자에 패널 설정이 나타납니다. (파란색 탭을 올바르게 클릭하는 것은 까다로울 수 있으므로 파란색 영역을 클릭해야합니다.) 페이지의 아무 곳이나 클릭하면 속성이 기본 설정으로 돌아갑니다.
속성 관리자의 패널 필드를 사용하여 패널을 추가하거나 제거합니다.

패널을 추가하려면 패널 필드의 오른쪽에있는 더하기 기호 (+)를 클릭하십시오. 아코디언 세트에서 패널을 제거하려면 먼저 속성 관리자의 패널 드롭 다운 목록에서 패널 이름을 선택한 다음 빼기 기호 (@@ min)를 클릭합니다.

더하기 기호를 다시 클릭하여 다른 패널을 추가 할 수 있습니다.
이벤트 드롭 다운 메뉴를 사용하여 패널이 열리는 방식을 변경하십시오.

이벤트 설정은 사용자가 패널 탭 (클릭)을 클릭하거나 패널 탭 위로 커서를 이동 (마우스 오버) 할 때 패널을 열지 여부를 제어합니다.
원하는대로 다른 패널 옵션을 설정하십시오.

속성 관리자의 아코디언 옵션은 선택적이며 일부 또는 모든 패널을 비활성화 (비활성화)하고 패널 열기 및 닫기 방식의 애니메이션 (드롭 다운 목록 애니메이션) 기능을 포함합니다.
파일 → 저장을 선택하여 페이지를 저장하십시오. 종속 파일 복사 대화 상자가 나타나면 확인을 클릭하여 모든 관련 파일을 생성합니다.

Spry 기능이 작동하려면 웹 페이지를 업로드 할 때 이러한 파일을 웹 서버에 업로드해야합니다.
글꼴 또는 텍스트 색상과 같은 패널의 모양을 변경하려면 해당 CSS 규칙을 편집하십시오.

참고: 페이지가 저장되고 Dreamweaver에서 해당 CSS 및 JavaScript 파일을 생성 할 때까지 아코디언 패널에 해당하는 스타일을 편집 할 수 없습니다.
패널이 웹 브라우저에 표시되는 방법을 보려면 작업 영역의 맨 위에있는 지구 아이콘을 클릭하고 페이지를 미리 보는 데 사용할 브라우저를 선택하십시오.

컴퓨터에서 JavaScript 또는 다른 프로그래밍이 필요한 대화 형 기능이있는 페이지를 미리 보려면 Internet Explorer를 포함한 일부 웹 브라우저에 ActiveX 컨트롤이 페이지를 볼 수 있도록 허용해야한다는 경고 메시지가 표시됩니다.

이것은 페이지가 저장된 컴퓨터와 동일한 컴퓨터에서 페이지가 열릴 때만 나타나는 보안 경고입니다. 웹 서버에 페이지를 게시 한 다음 인터넷 연결을 통해 볼 경우이 오류는 사용자 나 사이트 방문자에게는 표시되지 않습니다.