빠 른 제작 CSS 내 비게 이 션 메뉴 안내

웹 페이지 의 표준화 관념 이 사람들의 마음속 에 깊이 파고 들 면서 점점 더 많은 사이트 들 이 CSS 구 조 를 채택 하 였 다.CSS 구조의 웹 페이지 는 W3C 표준 에 부합 할 뿐만 아니 라 매우 아름답다.표준 화 된 웹 페이지 는 예 쁜 CSS 메뉴 부터 시작 합 니 다.알다 시 피 CSS 메뉴 는 코드,코드 를 작성 하여 예 쁜 메뉴 를 만 듭 니 다.오늘 은 작은 소프트웨어 를 소개 합 니 다:CSS Tab Designer!
CSS Tab Designer 는 CSS 를 사용 해 네 비게 이 션 메뉴 를 디자인 하 는 시각 화 소프트웨어 로,기 존 스타일 모델 만 수정 하면 CSS 메뉴 를 빠르게 생 성 할 수 있 는 60 여종 의 다양한 스타일 을 소프트웨어 에 내장 하고 있다.특히 소프트웨어 가 생 성 한 XHTML 코드 는 웹 표준 을 엄 격 히 따 르 고 만들어 진 CSS 메뉴 는 각종 주류 브 라 우 저 를 호 환 하 며 시스템 이 자체 적 으로 가지 고 있 는 Internet Explorer 든 Firefox,Opera,Netscape 든 문제 가 되 지 않 는 다.
 CSS Tab Designer 작업 은 매우 간단 합 니 다.메 인 화면 은 세 열 로 구 조 를 사용 합 니 다.프로젝트(Items),스타일(Tab Styles),미리 보기(Preview)가 순서대로 배열 되 고 거의 모든 작업 이 메 인 화면 에서 이 루어 집 니 다.그림 과 같 습 니 다.

 새 메뉴 의 절 차 는 매우 간단 합 니 다.'스타일(Tab Styles)'에서 60 여 가지 스타일 이 다른 메뉴 스타일 을 미리 만 들 었 습 니 다.먼저 필요 한 스타일 을 선택 한 다음 왼쪽'항목(Items)'의'샘플 로 채 우기(Fill with samples)'를 누 르 면 바로'미리 보기(Preview)'에서 효 과 를 볼 수 있 습 니 다.메뉴 는 생 성 된 셈 입 니 다.
 물론 소프트웨어 내 장 된 스타일 모델 의 메뉴 항목 은 모두 영어 로 중국어 사용자 에 게 적합 하지 않 으 므 로 수정 이 필요 합 니 다.주 창 왼쪽'항목(Items)'에 현재 메뉴 항목 이 표 시 됩 니 다.항목 도구 모음 에는 여러 개의 단추 가 배열 되 어 있 습 니 다.왼쪽 에서 오른쪽으로 여러 항목 추가(Add Multiple Items),항목 추가(Add Item),항목 삭제(Delete Item),위로 이동(Move Up),아래로 이동(Move Down),선택 항목 편집(Edit Selected Item)순 입 니 다.그림 과 같 습 니 다.

 현재 항목 을 더 블 클릭 하면 편집 대화 상자 에 들 어 갈 수 있 습 니 다.그림 과 같이 원본 영 어 를 중국어 로 수정 하면 됩 니 다.

 모든 내용 을 수정 하면 미리 보기 구역 에서 효 과 를 볼 수 있 습 니 다.이때 우 리 는 메뉴 에 있 는 문자 가 예상 한 중국어 가 아니 라 일부 난 장 판 이라는 것 을 알 게 되 었 다.이것 은 왜 일 까?그림 과 같다.

 CSS Tab Designer 는 영문 소프트웨어 로 사전 인 코딩 은 영문 과 웹 페이지 를 대상 으로 하기 때문에 우 리 는 인 코딩 을 중국어 로 수 동 으로 수정 해 야 한다.소프트웨어 자체 가 코드 편집 기능 을 갖 추고 있 지 않 기 때문에 CSS 메뉴 웹 페이지 파일 이 생 성 된 후에 수정 할 것 입 니 다.
 미리 볼 때 난 장 판 에 직면 하 는 것 이 좋 지 않 습 니 다.미리 보기 영역 공백 에서 오른쪽 단 추 를 누 르 고 오른쪽 단 추 를 누 르 면 메뉴 에서'인 코딩→간 체 중국어(gb 2312)'를 선택 할 수 있 습 니 다.미리 보기 효 과 는 그림 과 같 습 니 다.

 자기도 모 르 게 CSS 메뉴 가 완성 되 었 고 다음 에 파일 을 출력 합 니 다.소프트웨어 도구 모음 에 있 는'HTML 생 성(Generate HTML)'단 추 를 누 르 면 시스템 이 저장 대화 상자 로 전 환 됩 니 다.이 예:폴 더 저장:D:\웹 을 선택 하고 파일 이름:menu 를 입력 하고"저장"단 추 를 누 르 면 완 료 됩 니 다.
 앞에서 말 했 듯 이 소프트웨어 가 기본적으로 생 성 된 웹 인 코딩 은 영문 과 이 고 그 다음 에 우 리 는 인 코딩 수정 작업 을 시작 합 니 다.
 D:\웹 디 렉 터 리 에 들 어가 면 보통 두 개의 파일 을 볼 수 있 습 니 다.
menu.html,생 성 된 CSS 메뉴 웹 페이지.
 menu 1.gif,CSS 메뉴 에서 호출 된 그림 은 실제 파일 이름 이 약간 다 를 수 있 습 니 다.
임의의 텍스트 편집기 로 menu.html 파일 을 열 수 있 습 니 다.필자 가 사용 하 는 시스템 이 자체 적 으로 가지 고 있 는'메모 장'은 파일 을 열 고 다음 과 같은 내용 을 찾 을 수 있 습 니 다.

 CSS Tab Designer 에서 파일 을 생 성 하 는 기본 인 코딩 은"ISO-8859-1"이 고 중국어 인 코딩"gb 2312"로 수정 하면 됩 니 다.그림 과 같 습 니 다.
 

 이렇게 간단 합 니 다.수정 결 과 를 저장 하고 menu.html 를 다시 열 어 보 세 요.어때요?