X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

무료 프리미엄 액세스

프리미엄 허브 기사, 프로젝트 파일 및 각 튜토리얼 비디오의 첫 번째 10 %의 우리의 전체 라이브러리를 액세스 온라인 자습서 도서관 .

지금 무료 계정을 만드십시오!

드림위버에서 CSS를 사용하여 스프의 Accordions 추가 및 편집
Google 번역에 의해 번역

스프의 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 스타일 시트에있는 모든 클래스 스타일에 대한 매개 변수를 추가하거나 수정할 계속 수 있습니다. 어서 텍스트에 색상을 추가하거나 당신에 맞는 스타일을 만들 때까지 글꼴 등을 변경해보십시오.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link