All Articles Dreamweaver
드림위버에서 CSS를 사용하여 스프의 Accordions 추가 및 편집
David Smith on Sun, November 13th 0 comments
Spry Accordions are a delightful way in which to deliver large amounts of information in a confined space. They are also a lot of fun for users if you use them in a clever way. David Smith shows how.

스프의 Accordions는 한정된 공간에서 많은 양의 정보를 제공하는있는 유쾌한 방법입니다. 그들은 또한 아르


1 단계 - AP 사업부 만들기

저는 AP 사업부 내부에 그것을 배치 스프의 위치를​​ 제어하는​​ 것. AP 사업부를 만들려면 삽입 패널로 이동하여 레이아웃을 선택합니다

AP Div Draw

AP 사업부 그리기


페이지에 상자를 그려 커서를 사용합니다. 나타나는 파란색 상자가 AP 사업부입니다.


2 단계 - 위치와 크기 AP 사업부

의 왼쪽 상단에있는 작은 흰색 손잡이를 잡고 페이지에 해당 개재를 드래그 (단지 그 형식을 제어하는​​ 몇 가지 CSS가있는 DIV 태그되는) AP 사업부를 이동합니다.

Re-size AP DiV

AP DIV 크기를 조절


AP 사업부의 크기를 조정하려면은 파란색 앵커 포인트 중 하나를 잡고 원하는 크기로 드래그 수 있습니다.


3 단계 - 삽입 스프의 아코디언

커서 내부를 활성화하기 위해 AP 사업부 내부 클릭한 다음 삽입 패널에서 레이아웃을 선택

Spry inserted

스프는 삽입


스프의 아코디언 네가 그린 그림 AP 사업부 안에 나타납니다.


4 단계 - 더 많은 패널을 추가

스프의 아코디언은 사용자가 아코디언과 비슷한 움직임에 따라서 이름을 내용을 공개하거나 운반할 수 있도록 패널을 사용합니다. 좀 더 넣어 드릴게요.

스프의 아코디언을 선택한 (당신은 청록색 색 스프의 아코디언 레이블을 클릭하여 할 수 있습니다.) 더 많은 레이블을 추가하려면 속성 패널을 사용합니다.

Labels in properties

등록 정보에 레이블


를 사용하여 : 당신이 볼 수 있도록 2 개 패널을 추가하는 버튼을

More labels added to spry

더 많은 레이블이 활발한에 추가


5 단계 - 스프의 내용을 편집합니다

당신이 스프의 아코디언의 각 라벨 탭 위에 커서를 가져가 때, 작은 눈으로 기호가 나타납니다. 이 기호를 클릭하면 당신이 그것을 수정할 수 있도록 특정 탭의 내용이 열립니다.

Eye and contents

눈 및 내용


레이블의 텍스트를 강조 표시하면 라벨의 이름을 변경할 수 있습니다. 텍스트 "내용"을 강조하면 스프 안에 포함된 텍스트를 편집할 수 있습니다.

팁 : 복사하여 여기에 텍스트 붙여 대량.

Filled Spry

채워진 스프


당신이 내용을 각 레이블의 이름을 때까지이 단계를 반복합니다.

스프의 아코디언의 운영 방식을 볼 수 있습니다, 라이브 뷰 스위치를 차례로 각 패널 탭을 클릭합니다. 멋지 네요, 그렇죠?

Live View Button

보기 버튼을 라이브


여기에서 라이브보기를 운영중 상태로 유지 그래서 당신은 당신이 만들고 있어요 변경 사항을 모니터링할 수 있습니다.


6 단계 - 패널 탭의 스타일을 편집합니다

CSS 스타일 패널에서 모습을 가지고, 당신은 SpryAccordion.css라는 스타일 시트를 볼 수 있습니다 :

Spry CSS

스프 CSS


스타일 시트의 내용을 나타내기 위해 화살표를 클릭하면 스프의 아코디언이 어떻게 보이는지의 개별적인 측면을 제어하는​​ 복합 모든 클래스 스타일의 목록을 볼 수 있습니다.

Panel Tab Style

패널 탭 스타일


당신은 기본 배경 색상 # CCCCCC되는 CSS 속성에서 볼 수 있습니다. # 00CC66을 (이것은 # 0C6로 단축 될 수있는 팁) 읽는이 텍스트를 변경

Green tabs

그린 탭


패널은 그린으로 변경됩니다.

. AccordionPanelOpen 및. AccordionPanelTab와 # 0F9에 배경 색상을 설정합니다.


7 단계 - 중심 탭의 스타일을 편집

패널 탭 클릭하려고 그들이 푸른색 나타납니다. CSS가 집중 속성이 파란색으로 설정된 제어 있기 때문입니다 :

Blue Spry

블루 스프


그들이 CSS에 다음을 변경하려면 :

열려있는 탭에 대한 강조를 생성하려면 :

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


스프의 아코디언이 활성화되어있는 동안 모든 폐쇄 패널 스프의 아코디언이 활성화되지 않은 폐쇄 패널과 같은 녹색 있는지 확인하려면 다음 단계를 따르십시오

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

완료 스프


당신은 원칙은 동일로, 그러나 당신이 원하는 SpryAccordion.css 스타일 시트에있는 모든 클래스 스타일에 대한 매개 변수를 추가하거나 수정할 계속 수 있습니다. 어서 텍스트에 색상을 추가하거나 당신에 맞는 스타일을 만들 때까지 글꼴 등을 변경해보십시오.


Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: