드림위버에서 내비게이션 바를 만드는 방법

Dreamweaver 탐색 모음을 만들려면 다음 단계를 따르세요. HTML 문서를 만들고 탐색 컨테이너 DIV(class="nav-container")를 삽입합니다. 순서가 지정되지 않은 목록과 목록 항목을 컨테이너에 만들고 링크가 포함된 앵커 요소를 추가합니다. CSS 스타일 시트의 탐색 모음 컨테이너, 목록 및 링크 스타일을 지정합니다.

Dreamweaver에서 탐색 모음 만들기

1단계: 새 HTML 문서 만들기

1. Dreamweaver에서 "파일" > "새로 만들기" >
2. 새 HTML 문서 대화 상자에 원하는 파일 이름을 입력하고 만들기를 클릭하세요.

2단계: 탐색 컨테이너 삽입

1. HTML 코드에서 원하는 위치에 커서를 놓습니다.
2. 삽입 메뉴에서 일반 > DIV를 선택하세요.
3. DIV 삽입 대화 상자에서 CSS 클래스 “nav-container”를 입력하고 확인을 클릭하세요.

3단계: 탐색 링크 만들기

1. "nav-container" DIV에 순서가 지정되지 않은 목록(
   )을 삽입합니다.
   • 목록 항목 추가(
   • ), 각 목록 항목은 탐색 링크에 해당합니다.
   • 각 목록 항목에 링크 주소와 표시 텍스트가 포함된 앵커() 요소를 삽입하세요.

<div class="nav-container">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div>

4단계: 탐색 모음 스타일 지정

1. CSS 스타일 시트에서 탐색 모음의 전체 모양(예: 배경색, 글꼴 및 텍스트 크기).
2. "nav-container ul" 및 "nav-container li" 클래스에 스타일을 추가하여 탐색 링크 스타일을 지정합니다.
3. "nav-container a" 클래스에 스타일을 추가하고 호버 상태 및 활성 상태를 포함한 탐색 링크의 스타일을 설정합니다.

CSS 스타일 예

.nav-container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.nav-container li {
  padding: 0 20px;
}

.nav-container a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-in-out;
}

.nav-container a:hover {
  color: #ccc;
}

.nav-container a.active {
  color: #000;
  background-color: #ccc;
}

위 내용은 드림위버에서 내비게이션 바를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!