DW_Experience 교환에서 CSS를 코딩할 때 주의하고 숙달해야 할 몇 가지 기술

Disebabkan oleh "visualisasi" dan pengendalian yang mudah, ramai rakan menulis CSS dalam DW Hari ini kami memperkenalkan beberapa "tabiat terbaik" untuk menulis CSS dalam DW, dengan harapan dapat membantu semua orang.
CSS sedang mengubah proses reka bentuk laman web. Untuk memenuhi peningkatan bilangan pereka yang cenderung CSS, Macromedia DW MX memperkenalkan beberapa ciri berkaitan CSS baharu dan dipertingkatkan. Dengan ciri baharu ini, anda boleh merancang untuk kemas kini masa hadapan dan membangunkan tapak yang lebih mematuhi piawaian W3C. Artikel ini membincangkan beberapa cadangan untuk menggunakan CSS dalam DW MX dan menyerlahkan ciri CSS tertentu.
Secara umumnya, helaian gaya ialah koleksi peraturan pemformatan yang mengawal penampilan kandungan web. CSS boleh digunakan dalam halaman anda dalam tiga cara berbeza:

Salin kod Kod adalah seperti berikut:

Gaya kod (Sebaris): gaya sekali ditulis ke dalam kod.
Terbenam: Helaian gaya yang boleh mengawal semua elemen dalam halaman
Luaran: Helaian gaya yang boleh mengawal elemen dalam banyak halaman
Malah, banyak tapak adalah berdasarkan Ketiga-tiga kaedah ini perlu digunakan dalam gabungan.

CSS를 사용할 때 고려해야 할 중요한 사실은 서로 다른 브라우저와 동일한 브라우저의 서로 다른 버전이 CSS를 서로 다른 방식으로 구문 분석한다는 것입니다. 웹 브라우저의 차이점 외에도 청각 브라우저, TV 기반 브라우저, Palm Pilot 및 TTY(전신 타자기, 원격 타자기)와 같은 휴대용 장치 등 다른 브라우저도 많이 있다는 점을 인식해야 합니다.
모범 사례란 무엇입니까?
대부분의 기술에는 자체적으로 합의된 표준이 있습니다. CSS도 예외는 아닙니다. 웹에 존재하는 CSS가 모두 표준화된 것은 아니지만, 기존 표준에 따라 CSS를 사용하는 것이 도움이 됩니다. 일반적으로 개발자는 콘텐츠와 보고를 최대한 분리해야 합니다. 이점은 다음과 같습니다.
1. 사이트 수명 연장
비표준 스타일 시트가 당시에는 편리할 수 있지만 새 버전의 브라우저가 나온 후에는 호환성 문제가 발생할 가능성이 높습니다. 그때 페이지별로 사이트를 수정하는 것은 시간이 많이 걸리는 작업이 될 것이며 CSS를 사용하는 것도 의미가 없게 될 것입니다.
2. 모든 사용자와 브라우저가 사이트에 액세스할 수 있도록 하세요.
일부 지방 정부에서는 웹사이트에 장애인도 액세스할 수 있도록 법을 제정했습니다. 청각 브라우저와 같이 장애 인식을 위해 설계된 검색 장치에는 매우 엄격한 CSS 규범 요구 사항이 있습니다.
3. 사이트 업데이트 및 유지 관리를 더 쉽게 만듭니다
CSS를 올바르게 사용하면 한 페이지에서 조정한 내용을 모든 페이지에 빠르게 적용할 수 있습니다.
첫 번째 선택은 사용할 스타일 시트입니다. 모범 사례에 관한 다양한 스타일 시트에 대한 분석은 다음과 같습니다.
인라인 CSS: 간단히 말해서 사용을 피해야 합니다. 다른 단점 중에서도 인라인 CSS를 사용하면 콘텐츠와 서식을 분리하지 않는다는 CSS의 실제 이점을 활용하지 못한다는 의미입니다. DW MX는 주로 인라인 CSS를 사용하여 페이지 요소(이러한 요소를 DW MX 사용자 인터페이스에서는 "레이어"라고 함)를 배치하거나 인라인 스타일 자바스크립트를 사용하여 개체 속성을 변경해야 하는 특정 DHTML 효과를 사용합니다.
임베디드 CSS: 현재 페이지에만 영향을 미칠 수 있기 때문에 이상적이지 않습니다. 업데이트 프로세스 중에 페이지가 손실되면 사이트 스타일이 일관되지 않게 됩니다. 또한 사용자가 사이트를 탐색할 때 각 페이지에 대한 스타일 시트 정보를 다운로드해야 합니다.
외부 CSS: 이것이 첫 번째 선택입니다. 외부 CSS를 사용하면 연결된 모든 페이지가 일관된 모양과 스타일을 유지하고 한 번만 변경하면 모든 관련 페이지를 쉽게 업데이트하여 페이지를 더 작게 만들고 더 빠르게 탐색할 수 있습니다. 특정 CSS 기능을 분석할 때 다른 모범 사례가 아래에 설명되어 있습니다.
DW MX에서 CSS 스타일 시트 만들기
DW MX에서 CSS 스타일 시트를 만들 때(텍스트 》CSS 스타일 》새 스타일 시트) 팝업 대화 상자에는 두 가지 옵션이 있습니다. 새 스타일 시트 문서(새 스타일 시트 파일) 및 현재 페이지에만 해당(이 문서에만 해당). “새 스타일 시트 파일”을 선택하면 외부 CSS 생성 프로세스가 시작됩니다. 이 옵션을 사용하려면 실제 생성 프로세스 전에 스타일 시트의 이름을 지정하고 저장 위치를 ​​선택해야 합니다. 다른 옵션인 이 문서만에서는 관련 코드를 페이지에 직접 작성합니다.
기존 스타일 시트를 선택하여 '새 스타일' 대화 상자에서 새 정의를 편집하거나 추가할 수도 있습니다.
외부 CSS에 연결해야 할까요, 아니면 가져와야 할까요?
외부 스타일 시트를 만든 후 각 페이지(또는 템플릿)에 첨부해야 합니다. 이렇게 하려면 CSS 패널에서 "스타일 시트 첨부" 버튼을 클릭하세요. 외부 스타일 시트 연결 대화 상자가 나타나며, 여기서 이름을 찾은 후 연결하거나 가져올 수 있습니다. 이 외부 스타일 시트.
링크는 가장 일반적으로 사용되는 방법입니다. 스타일 시트를 페이지에 연결하려면 "링크"를 선택하세요. 페이지에 다음 마크업이 추가됩니다.
CSS를 지원하는 모든 브라우저는 연결 옵션을 지원합니다. 일부 오래된 브라우저(예: Netscape 4.x)에서 이 스타일 시트를 "볼" 수 있도록 하려면 다음 방법을 사용해야 합니다.
"가져오기" 옵션을 선택하면 사용되는 태그는 다음과 같습니다.
NetSscape4는 가져온 CSS를 완전히 무시하고 연결된 CSS에 따라 페이지를 해석합니다. 이러한 방식으로 브라우저 호환성 문제에 대한 걱정 없이 CSS의 새로운 기능을 사용할 수 있습니다.
CSS 속성 관리자
DW MX의 속성 관리자에서 CSS 모드로 쉽게 전환할 수 있습니다. 기본적으로 속성 관리자는 원시 HTML 모드로 글꼴 태그를 표시합니다. 글꼴 드롭다운 메뉴 옆에 있는 작은 "A"를 클릭하면 글꼴 태그 목록 대신 현재 사용 가능한 CSS 스타일시트가 표시됩니다.
동시에 쉽게 HTML 모드로 다시 전환할 수도 있습니다.
미리 만들어진 CSS 스타일 시트
DW MX의 흥미로운 CSS 기능 중 하나는 미리 만들어진 CSS 스타일 시트가 포함되어 있다는 것입니다. CSS를 처음 사용하는 사용자는 먼저 사용해 볼 수 있습니다. 파일 > 새로 만들기를 선택하고 팝업 새 문서 대화 상자에서 CSS 스타일 시트를 선택하면 사용 가능한 모든 CSS 목록이 오른쪽 상자에 나타납니다.우리가 모범 사례라고 부르는 것을 연습하려면 "접근 가능"이라고 표시된 것을 선택하세요.
사이트 폴더에 문서를 저장한 후, 위의 방법으로 문서에 CSS를 첨부하세요.
디자인 타임 스타일 시트
DW MX의 이 기능을 사용하면 디자인 보기에서 작업하는 동안 페이지에 스타일 시트를 적용할 수 있어 사이트의 모양을 보다 직관적으로 이해할 수 있습니다. 디자인 타임 스타일시트는 사이트 내에 표시되지 않습니다. 이 기능은 모범 사례의 관점에서 매우 유용합니다. 위에서 설명한 대로 가져오기 방법과 링크 방법을 모두 사용하는 경우 디자인 타임 스타일시트를 첨부하면 둘 중 하나를 사용하여 사이트를 개발할 수 있습니다. 페이지가 다른 스타일 시트 아래에서 어떻게 보이는지 확인하려는 경우 다른 스타일 시트로 쉽게 변경할 수 있습니다.
디자인 타임 스타일시트는 CSS를 서버측(예: ASP, PHP 또는 ColdFusion)에 적용하거나 JavaScript를 통해 클라이언트측에서 액세스하려는 개발자에게도 유용합니다. 서버측 스타일 시트는 클라이언트 브라우저의 열악한 CSS 지원을 처리하는 또 다른 방법이기도 합니다. 하지만 이전 버전의 DW에서는 이 방법을 사용하면 디자인 단계에서 CSS의 실제 효과를 볼 수 없었습니다. 디자인 타임 스타일시트를 사용하면 스타일시트 효과를 실시간으로 볼 수 있으므로 DW MX에서 시각적으로 작업할 수 있습니다. 또 다른 이점은 사이트 파일을 업로드할 때 더 이상 중복된 스타일시트를 찾기 위해 전체 사이트를 탐색할 필요가 없다는 것입니다.
유효성 검사
자신만의 스타일 시트를 만들거나 기존 스타일 시트를 편집하는 경우 유효성 검사를 통해 비표준 태그나 잘못된 코드를 오용하지 않도록 할 수 있습니다. DW MX 자체에는 CSS 유효성 검사기가 포함되어 있지 않으므로 W3C 사이트에서 제공하는 유효성 검사 서비스를 사용할 수 있습니다. DW MX 내에서는 HTML 또는 DHTML 태그(파일 > 페이지 확인 > 마크업 확인(HTML의 경우) 또는 파일 > 페이지 확인 > XHTML의 경우 XML로 확인)을 확인할 수 있습니다. DW MX는 CSS 기반 사이트를 개발할 때 많은 보조 도구를 제공합니다. CSS에 대한 충분한 이해와 함께 MW MX의 도움으로 시간이 지나도 견딜 수 있는 사이트를 개발할 수 있습니다.