All Articles Dreamweaver
드림위버 CS5 : 목록에서 탐색 메뉴 만들기
Iain Anderson on Sat, January 7th | 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

최상의 웹사이트를 구축하면 가능하면 목록을 사용하여 탐색 메뉴를 구축해야합니다. 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

Comments (0)

You must be logged in to comment. Login Now

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: