При применении макета веб-страницы Div+CSS для создания веб-сайта, соответствующего веб-стандартам, могут легко возникнуть некоторые проблемы.
Давайте теперь подведем итоги, чтобы каждый мог увидеть, в чем заключается проблема.
1. Проблемы с проверкой CSS
Веб-страницы, которые мы разрабатываем, полностью соответствуют стандартам XHTML и CSS, чтобы пройти проверку W3C. Некоторые неудачные проверки CSS2.0. Основные ошибки проверки: «Строка: 0 семейство шрифтов: рекомендуется указать семейство типов в качестве последнего выбора».
W3C рекомендует при определении шрифтов заканчивать категорией шрифтов, а не одним шрифтом. Например, «без засечек» может гарантировать, что веб-шрифты будут отображаться в разных операционных системах.
Хотя большинство людей определяют «без засечек» в теге body, если sans-serif опущен при повторном определении шрифта в других идентификаторах или классах, считается, что проверка не удалась. Эта ошибка не очень серьезна, и ее можно избежать, проявив немного внимания.
2. Рекомендации по написанию CSS
Добавляйте комментарии к файлам CSS. Комментарии сделают ваше дальнейшее обслуживание более удобным. Рекомендуется добавлять как можно больше комментариев в CSS-файлы и не беспокоиться о добавлении небольшого количества байтов. Постарайтесь максимально сократить синтаксис CSS. Например, значение цвета «#FFFFFF» может быть сокращено как «#FFF»; «padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px» может быть сокращено как « отступ:30px 0 10px" 20px;". Существует больше методов сохранения при определении методов, и по мере того, как вы станете более опытными в приложениях CSS, вы продолжите открывать для себя более эффективные методы.
3. Проблемы с проверкой XHTML
Люди часто уделяют больше внимания проверке CSS, но пренебрегают соответствием стандартам XHTML, и возникает множество ошибок низкого уровня. Основные проблемы перечислены ниже:
◎target="_blank", этот синтаксис верен в HTML4.0, но не разрешен в XHTML1.0. Одним из решений является запись target="new", а другим решением является использование js для обработки всех целей;
◎Лучше не встраивать таблицы стилей. Отдельные файлы таблиц стилей легче поддерживать. Если <style> встроен, он должен быть записан как <style type="text/css">, и тип нельзя игнорировать, иначе XHTML не сможет определить, для чего используется ваш стиль.
◎<br> должен быть записан как <br />. XHTML требует, чтобы все теги были закрыты. Непарные теги должны сопровождаться символом «/».
◎Используйте один и тот же идентификатор повторно. Идентификатор можно использовать в XHTML только один раз. Если вам нужно ссылаться на стиль несколько раз, вам следует использовать класс.
◎Неправильный метод встраивания Flash. <embed> изначально был частным тегом Netscape. Хотя позже он был поддержан IE, он никогда не распознавался W3C. В HTML4.0 нет тега <embed>. W3C выступает за использование тега <object>. Чтобы решить проблему совместимости между различными браузерами, можно использовать оба тега.
Полный пример кода выглядит следующим образом (фон Flash прозрачный):
| Ниже приводится цитируемое содержание: <объект classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" кодовая база= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" ширина="300" высота="100"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" качество="высокое" плагиныpage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </объект> |
Но написать его напрямую в XHTML по-прежнему невозможно. Теперь мы можем только обмануть проверку, прописав приведенный выше код в файл flash.js и затем вызвав его.
<script type="text/javascript" src="flash.js"></script>
Соответствует ли вспышка стандартам – вопрос спорный.
◎Код, аналогичный id=header class=title, следует писать как id="header" class="title". Заключение значений атрибутов в кавычки — это самое основное синтаксическое правило XHTML.
4. Проблемы совместимости
Некоторые веб-сайты деформируются и смещаются при просмотре в IE6.0, Mozilla Firefox1.0 и Opera 7.12.
Он сосредоточен в IE, но не в Mozilla. Установка тела {TEXT-ALIGN: center;} в IE уже может центрировать его, но в Mozilla вы должны добавить следующие настройки стиля к слою, который необходимо центрировать: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Превышает ширину. Страница выглядит нормально в Mozilla, но в IE она деформируется, поскольку превышает ширину, а расположенные рядом слои перемещаются под нее. Эта ситуация вызвана разной интерпретацией блочной модели в IE и Mozilla. Существует множество решений, таких как метод «!important».
Веб-стандарты и макет CSS понимают и осваивают все больше и больше дизайнеров. После периода усвоения, понимания и применения макета CSS появится больше веб-страниц, имеющих как технические, так и эстетические аспекты.