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

무료 프리미엄 액세스

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

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

드림위버 CS5 : 목록에서 탐색 메뉴 만들기
Google 번역에 의해 번역

최상의 웹사이트를 구축하면 가능하면 목록을 사용하여 탐색 메뉴를 구축해야합니다. Theyre 의미 정확한 (A 메뉴가 결국 목록입니다)와 CSS는 스타일에 그들이 쉽습니다. 탐색 목록 후드를 작동하는 방법 좀 봐 수 있습니다. 질병 코드보기에서 드림위버를 사용하지만, 당신이 원한다면 스트레이트 텍스트 편집기와 함께 따라 부담합니다.

1 단계 - 목록을 작성

이 부분은 쉽습니다 : 새 HTML 파일, 아니 템플릿을 만들고, 간단하게 메뉴에있는 항목을 입력합니다. 각 목록 항목을 둘러싸

당신은 이런 일로 끝낼해야합니다 <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

그러나 우리가 CSS를 빌드와 같은 중요한 될 것입니다 무언가를 각 항목은 링크 확인 싶어요. 그래서, 이런 걸 만들려면 # 문자에 링크를 추가 :

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

2 단계 - 외부 CSS 파일에 대한 링크

CSS 패널에서 패널 (더하기 기호 문서)의 하단에있는 새 CSS 규칙 버튼을 누르십시오. 이름과 ID 스타일을 만들기 navlist 하고 새 스타일 시트 파일을 만들 선택할 수 있습니다. 나타나는 대화 상자에서 파일 이름 style.css . 실험 때에도 외부 스타일 시트를 사용하기 위해 항상 최선.

우리 옆에 나타나는 대화 상자를 사용하여 아무것도 정의할 필요 없다, 그래서 그냥 확인을 누릅니다. Youll는 기본, 빈 스타일 정의 스타일 시트를 만들었습니다. 강조 표시된 단어 소스 코드 옆에 그냥 문서 위에 style.css을 클릭하여 그것을 볼 수 있습니다.

3 단계 - 기본 CSS 규칙을 추가

우리는 그것을 타겟팅할 수 있도록 목록에있는 ID navlist를 가지고 지정해야합니다. HTML에서 추가 id=navlist 위해

이제 우리는 CSS에 갈 수 있습니다. Youll는 아마 시작 배경 색, 폭, 테두리와 여백을 조정하려면, 그리고 youll는 CSS의 선택자를 빌드하는 방법에 대해 생각해보도록. 당신이 사용하는 경우 #navlist li , youll를 탐색 목록에서 목록 항목에 액세스할 수 있습니다. 더 좋은 목표 #navlist li a 목록 내의 링크를 대상으로. 목록 항목에 패딩을 추가하면서, 그들에게 패딩이 더 큰 목표를 만들어 않을 추가. 보십시오 :

# navlist {

목록 스타일 타입 : 없음;

여백 : 0;

여백 : 0;

폭 : 200px;

}

# navlist 리 {

여백 : 5px;

}

# navlist 리 {

배경 컬러 : # 222;

색상 : # eee;

여백 : 10px;

텍스트 장식 : 없음;

디스플레이 : 블록;

}


#navlist li

마지막으로,

4 단계 - 좀 가져가 CSS 규칙을 추가

목록 더 반응하기 위해, 하버 규칙을 추가합니다 :

# navlist 리 : 가져가 {

배경 컬러 : # 444;

색상 : # ee2;

}

5 단계 - 활성 페이지를 표시

그 이동식 수업 스타일로 활성 페이지를 표시하는 페이지에 이러한 종류의 일반적인 예를 들어 클래스의 현재 페이지에 게재됩니다 = 활성화. 그러나, 이것은 메뉴 블록은 각 페이지에 다른 것을 의미합니다. 다른 클래스와 HTML의 각 링크에 태그를하기 위해 더 편리 후 본체 태그에 페이지 특정 클래스를 추가하고 하나의 CSS 규칙과 함께 그들을 모두 잡을 수있어. 이런 게 :

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

일치하는 CSS :

# bodypage1. page1, # bodypage2. page2, # bodypage3. page3, # bodypage4. page4, # bodypage5. page5 {

배경 컬러 : # 555;

색상 : # ee2;

}

이 방법, 당신은 각 페이지의 BODY 태그에 클래스를 변경해야합니다. 음흉하지만 작동합니다.

이 많은, 더 많은 트릭이 있습니다,하지만 지금은 모든이야. 당신은 목록을 수평하게하기 위해, 산책 CSS 비디오 튜토리얼에서 보았다시피, 당신이 필요로하는 모든는 display: inline 에 적용되는 li 원하는 경우 요소가되도록을 탐험해보세요. 다음 시간은, 물론 좀 더 이국적인 옵션을 봐.

완료 - product.png

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

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