Oleh kerana "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:
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.
Fakta penting yang perlu dipertimbangkan semasa menggunakan CSS ialah penyemak imbas yang berbeza dan versi berbeza penyemak imbas yang sama menghuraikan CSS dengan cara yang berbeza. Selain perbezaan dalam pelayar web, anda juga perlu menyedari bahawa terdapat banyak penyemak imbas lain, seperti pelayar pendengaran, pelayar berasaskan TV, dan peranti pegang tangan seperti Palm Pilot dan TTY (teletaip, mesin taip jauh).
Apakah amalan terbaik
Kebanyakan teknologi mempunyai piawaian yang dipersetujui sendiri. CSS tidak terkecuali. Walaupun tidak semua CSS yang wujud di web diseragamkan, adalah berguna untuk menggunakan CSS mengikut piawaian sedia ada. Secara umum, pembangun harus memisahkan kandungan daripada pelaporan sebanyak mungkin. Faedah ini ialah:
1. Tingkatkan hayat tapak
Helaian gaya bukan standard mungkin mudah pada masa itu, tetapi selepas versi baharu penyemak imbas keluar, isu keserasian mungkin akan berlaku. Pada masa itu, mengubah suai halaman tapak mengikut halaman akan menjadi tugas yang sangat memakan masa dan ia juga akan menjadikan penggunaan CSS tidak bermakna.
2. Jadikan tapak anda boleh diakses oleh semua pengguna dan penyemak imbas
Sesetengah kerajaan tempatan telah menggubal undang-undang bahawa tapak web mesti boleh diakses oleh orang kurang upaya. Peranti menyemak imbas yang direka untuk kesedaran orang kurang upaya, seperti pelayar pendengaran, mempunyai keperluan normatif CSS yang sangat ketat.
3. Jadikan kemas kini dan penyelenggaraan tapak lebih mudah
Apabila digunakan dengan betul, CSS boleh membenarkan pelarasan yang anda buat dalam satu halaman digunakan dengan cepat pada semua halaman.
Pilihan pertama anda ialah helaian gaya yang hendak digunakan. Apabila bercakap tentang amalan terbaik, berikut ialah pecahan helaian gaya yang berbeza:
CSS Sebaris: Ringkasnya, anda harus cuba mengelak daripada menggunakannya. Antara kelemahan lain, menggunakan CSS sebaris bermakna anda tidak mengambil kesempatan daripada kelebihan sebenar CSS, iaitu anda tidak mengasingkan kandungan daripada pemformatan. DW MX menggunakan CSS Sebaris terutamanya untuk meletakkan elemen halaman (elemen ini dipanggil "lapisan" dalam antara muka pengguna DW MX), atau untuk menggunakan kesan DHTML tertentu, yang memerlukan penggunaan javascript gaya Sebaris untuk menukar sifat.
CSS terbenam: Ia juga tidak sesuai kerana ia hanya boleh menjejaskan halaman semasa. Semasa proses kemas kini, jika halaman hilang, gaya tapak akan menjadi tidak konsisten di samping itu, apabila pengguna menyemak imbas tapak anda, maklumat helaian gaya mesti dimuat turun untuk setiap halaman.
CSS Luaran: Ini adalah pilihan pertama anda. CSS luaran membenarkan semua halaman yang disambungkan kepadanya untuk mengekalkan penampilan dan gaya yang konsisten, mengubahnya sekali, dan mengemas kini semua halaman yang berkaitan dengan mudah; Amalan terbaik lain dibincangkan di bawah apabila menganalisis ciri CSS tertentu.
Cipta helaian gaya CSS dalam DW MX
Apabila mencipta helaian gaya CSS dalam DW MX (Teks 》Gaya CSS 》Helaian gaya baharu), dalam kotak dialog pop timbul, anda mempunyai dua pilihan: Helaian gaya baharu Dokumen (Fail Helaian Gaya Baharu) dan hanya untuk halaman semasa (Dokumen Ini Sahaja). Pilih "Fail Helaian Gaya Baharu" dan anda memulakan proses mencipta CSS Luaran. Pilihan ini memerlukan anda untuk menamakan helaian gaya dan memilih lokasi simpan untuknya sebelum proses penciptaan sebenar pilihan lain, Dokumen Ini Sahaja, akan menulis kod yang berkaitan terus ke halaman.
Anda juga boleh memilih helaian gaya sedia ada untuk mengedit atau menambah takrifan baharu dalam kotak dialog "Gaya baharu".
Sekiranya ia disambungkan ke CSS Luaran atau diimport
Selepas mencipta helaian gaya luaran, anda perlu melampirkannya pada setiap halaman (atau templat). Untuk melakukan ini, klik butang "Lampirkan Helaian Gaya" pada panel CSS Kotak dialog Helaian Gaya Luar Pautan akan muncul, di mana anda boleh menyemak imbas ke helaian gaya sasaran anda Selepas mencari nama, anda boleh memilih untuk memaut atau mengimport helaian gaya luaran ini.
Pemautan ialah kaedah yang paling biasa digunakan Pilih "pautan" untuk menyambungkan helaian gaya ke halaman. Ia akan menambah penanda berikut pada halaman anda:
Semua penyemak imbas yang menyokong CSS menyokong pilihan sambungan. Jika anda mahu beberapa pelayar lama (seperti Netscape 4.x) untuk "melihat" helaian gaya ini, anda perlu menggunakan kaedah berikut.
Jika anda memilih pilihan "Import", teg yang digunakan ialah:
NetSscape4 akan mengabaikan sepenuhnya CSS yang diimport dan mentafsir halaman mengikut CSS yang disambungkan. Dengan cara ini, kami boleh menggunakan ciri baharu dalam CSS tanpa perlu risau tentang isu keserasian penyemak imbas.
Pemeriksa Harta CSS
Anda boleh bertukar kepada mod CSS dengan mudah dalam pemeriksa harta DW MX. Secara lalai, Pemeriksa Harta memaparkan teg fon dalam mod HTML mentah. Klik "A" kecil di sebelah menu lungsur turun Font dan anda akan melihat helaian gaya CSS yang tersedia pada masa ini dan bukannya senarai teg fon.
Pada masa yang sama, anda juga boleh menukar kembali ke mod HTML dengan mudah.
Helaian gaya CSS siap pakai
Salah satu ciri CSS yang menarik dalam DW MX ialah ia termasuk helaian gaya CSS siap pakai. Pengguna baharu CSS boleh mencubanya dahulu. Pilih Fail > Baharu, pilih helaian gaya CSS dalam kotak dialog dokumen baharu pop timbul dan senarai semua CSS yang tersedia akan muncul dalam kotak di sebelah kanan.우리가 모범 사례라고 부르는 것을 연습하려면 "접근 가능"이라고 표시된 것을 선택하세요.
사이트 폴더에 문서를 저장한 후, 위의 방법으로 문서에 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의 도움으로 시간이 지나도 견딜 수 있는 사이트를 개발할 수 있습니다.