1. Проблемы с проверкой CSS
Прежде всего, согласно требованиям конкурса, работы должны соответствовать стандартам XHTML, а представленные CSS должны пройти проверку W3C. Ситуация с проверкой CSS идеальна. Только 8 записей среди записей не прошли проверку 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 только один раз. Если вам нужно ссылаться на стиль несколько раз, вам следует использовать класс.
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />Очевидно, что в значении атрибута контента есть дополнительная кавычка.
Метод встраивания Flash неверен. <embed> изначально был частным тегом Netscape. Хотя позже он был поддержан IE, он никогда не распознавался W3C. В HTML4.0 нет тега <embed>. W3C выступает за использование тега <object>. Чтобы решить проблему совместимости между различными браузерами, можно использовать оба тега. Полный пример кода выглядит следующим образом (фон Flash прозрачный): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent"quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
Но написать его напрямую в XHTML по-прежнему невозможно. Теперь мы можем только обмануть проверку, прописав приведенный выше код в файл flash.js и затем вызвав его.
<script type="text/javascript" src="flash.js"></script>
Соответствует ли вспышка стандартам – вопрос спорный. Дополнительные инструкции: см. http://www.blueidea.com/tech/site/2004/1920.asp.
Коды типа id=header class=title следует записывать как id="header" class="title". Заключение значений атрибутов в кавычки — это самое основное синтаксическое правило XHTML.
4. Проблемы совместимости
Есть 12 работ, которые деформированы и смещены при просмотре в IE6.0, Mozilla Firefox1.0 и Opera 7.12. (С IE5.0 не тестировал, поленился :) IE5.0 — это вызов для всех CSS-верстальщиков).
Он сосредоточен в IE, но не в Mozilla. Установка тела {TEXT-ALIGN: center;} в IE уже позволяет центрировать его, но в Mozilla необходимо добавить следующие настройки стиля к слою, который необходимо центрировать: MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ширина. Страница выглядит нормально в Mozilla, но в IE она деформируется, поскольку превышает ширину, а расположенные рядом слои перемещаются под нее. Эта ситуация вызвана разной интерпретацией блочной модели в IE и Mozilla. Существует множество решений, таких как метод «!important».
Вообще говоря, большинство заявок в целом прошли квалификацию, и цель этого конкурса в основном достигнута. Веб-стандарты и макет CSS понятны и освоены все большим количеством дизайнеров. Что касается плохого оформления некоторых работ, я думаю, что это процесс. Старшие дизайнеры должны помнить, что когда макет таблицы впервые появился, большинство веб-страниц были очень простыми. После периода усвоения, понимания и применения макета CSS появится больше веб-страниц, в которых учитываются как технологии, так и эстетика, как, например, работа за первый приз.