CSS 탐색 메뉴_CSS/HTML을 빠르게 만드는 방법에 대한 튜토리얼

CSS 탭 디자이너는 CSS를 사용하여 탐색 메뉴를 디자인하는 시각적 소프트웨어입니다. 이 소프트웨어에는 60개 이상의 다양한 스타일이 내장되어 있습니다. CSS 메뉴를 빠르게 생성하려면 미리 만들어진 스타일 템플릿만 수정하면 됩니다. 특히 소프트웨어에서 생성된 XHTML 코드는 웹 표준을 엄격하게 따르고 생성된 CSS 메뉴는 시스템과 함께 제공되는 Internet Explorer, Firefox, Opera 및 Netscape 등 다양한 주류 브라우저와 호환된다는 점을 언급할 가치가 있습니다.

CSS 탭 디자이너의 작업은 매우 간단합니다. 기본 인터페이스는 항목(Items), 스타일(Tab Styles), 미리보기(Preview)가 순서대로 배열되어 있습니다. 그림과 같이 기본 인터페이스.

새 메뉴를 만드는 단계는 매우 간단합니다. 다양한 스타일의 메뉴 스타일이 "탭 스타일"에 미리 만들어져 있습니다. 먼저 필요한 스타일을 선택한 다음 왼쪽의 "항목"을 클릭하세요. "샘플로 채우기"를 하면 "미리보기"에서 효과를 바로 확인할 수 있고, 메뉴가 생성됩니다.

물론 소프트웨어에 내장된 스타일 템플릿의 메뉴 항목은 모두 영어로 되어 있어 중국 사용자에게는 적합하지 않습니다. 현재 메뉴 항목은 메인 창 왼쪽의 "항목"에 표시됩니다. 항목 도구 모음은 왼쪽에서 오른쪽으로 여러 항목 추가, 항목 추가, 항목 삭제(항목 삭제), 위로 이동, 그림과 같이 아래로 이동하여 선택한 항목을 편집합니다.

현재 프로젝트를 두 번 클릭하여 편집 대화 상자로 들어갑니다. 여기에서 그림과 같이 원본 영어를 필요한 중국어로 수정할 수 있습니다.

모든 콘텐츠를 수정한 후 미리보기 영역에서 효과를 확인할 수 있습니다. 이때 메뉴의 텍스트가 예상한 중국어가 아니고 일부 문자가 깨졌음을 발견했습니다. 이유는 무엇입니까? 그림과 같습니다.

CSS Tab Designer는 영어 소프트웨어이고 사전 설정된 인코딩은 영어 웹 페이지용이므로 수동으로 인코딩을 중국어로 수정해야 합니다. 소프트웨어 자체에는 코드 편집 기능이 없으므로 CSS 메뉴 웹페이지 파일이 생성된 후 수정하도록 하겠습니다.

미리보기할 때 문자가 깨져 보이는 것은 여전히 ​​좋지 않습니다. 미리보기 영역의 빈 공간을 마우스 오른쪽 버튼으로 클릭한 후 오른쪽 클릭 메뉴에서 "인코딩 → 중국어 간체(gb2312)"를 선택하면 미리보기 효과가 나타납니다. 그림과 같이 정상으로 돌아옵니다.

CSS 메뉴가 준비되기 전에 파일을 내보내 보겠습니다. 소프트웨어 도구 모음에서 "HTML 생성" 버튼을 클릭하면 시스템이 저장 대화 상자로 들어갑니다. 이 예: 저장 폴더: D:web을 선택하고 파일 이름: 메뉴를 입력한 후 "저장" 버튼을 클릭하여 완료합니다.

앞서 언급했듯이 소프트웨어에서 기본적으로 생성되는 웹 페이지 인코딩은 영어 기반입니다. 다음으로 인코딩 수정을 시작합니다.

D:web 디렉토리에 들어가면 일반적으로 두 개의 파일이 표시됩니다:

menu.html, 생성된 CSS 메뉴 웹페이지.

menu1.gif CSS 메뉴에서 호출하는 관련 그림은 실제 상황에서는 파일명이 조금씩 다를 수 있습니다.

menu.html 파일은 텍스트 편집기로 열 수 있습니다. 작성자는 시스템과 함께 제공되는 "메모장"을 사용하여 파일을 열면 다음 내용을 찾을 수 있습니다.

CSS 탭 디자이너에서 생성된 파일의 기본 인코딩은 "ISO-8859-1"이며 그림과 같이 중국어 인코딩 "gb2312"로 변경할 수 있습니다.

이렇게 간단합니다. 수정 결과를 저장하고, menu.html을 다시 열어서 살펴보세요. 어때요, 잘못된 코드가 없습니다!