Обычно я использую ручной процесс:
Получил лучший подход или инструмент?
У меня довольно естественный способ кодирования. Ключ должен обрабатывать страницу как документ или статью. Если вы так думаете, это становится логически понятным:
Заголовок страницы - заголовок верхнего уровня
Навигация - это оглавление и, следовательно, упорядоченный список - вы можете также использовать ol над ul.
Заголовки разделов h2, секции в этих разделах - h3s и т.д. Уложите их в папку.
Используйте кавычки и цитаты, где это возможно. Не просто окружайте его ".
Не используйте b и i. Используйте сильные и em. Это связано с тем, что HTML является структурной, а не презентационной разметкой. Сильные и em теги phasis следует использовать там, где вы делаете акцент на слове.
<label> элементы вашей формы.
Используйте <acronym> и <abbr>, где это возможно, но только в первом экземпляре.
Самый простой: всегда, всегда давайте своим изображениям какой-то альтернативный текст.
Там может быть много HTML-тегов, которые вы, вероятно, не имеете, - адрес для почтовых адресов, вывод экранного кода. Посмотрите HTML Dog для некоторых, это моя любимая ссылка.
Это всего лишь несколько указателей, я уверен, что я мог бы подумать больше.
О, и если вам нужно сначала написать свой XHTML, напишите CSS. При CSS-установке вы не можете трогать HTML. Это на самом деле сложнее, чем вы думаете (но я нашел, что это ускорило меня).
Хорошо, когда я создаю сайт, я стараюсь полностью забыть о дизайне во время написания HTML. Я делаю это, поэтому я не стану использовать какую-либо разметку, специфичную для дизайна, и поэтому я могу сосредоточиться на семантическом значении элементов.
Некоторые указатели на разметку:
- используйте элемент UL (неупорядоченный список), так как это именно то, что меню. неупорядоченный список вариантов. Пример:
<ul id="menu">
<li id="home"><a href="/" title="Go to Homepage">Home</a></li>
<li id="about"><a href="/about" title="More about us">About</a></li>
</ul>
если вы хотите горизонтальное меню, вы можете сделать это:
#menu li {
display: block;
float: left;
}
Логотип. Используйте логотип H1 (заголовок) для логотипа вместо изображения. Пример:
<div id="header">
<h1>My website</h1>
</div>
И CSS (тот же метод можно применить к меню выше, если вы хотите меню с графическими элементами):
#header h1 {
display: block;
text-indent: -9999em;
width: 200px;
height: 100px;
background: transparent url(images/logo.png) no-repeat;
}
Идентификаторы и классы - используют идентификаторы для идентификации элементов, у которых есть только один экземпляр. Используйте класс для идентификации элементов, которые вы получили в нескольких экземплярах.
Используйте текстовый браузер (например, lynx). Если имеет смысл перемещаться таким образом, вы сделали все возможное, когда дело доходит до доступности.
Надеюсь, это поможет:)
Я по существу делаю то же самое, что и Джон, но вот несколько других идей:
Используйте руководства в Photoshop (и заблокируйте их). Покажите все ваши размеры для каждого окна/области заблаговременно.
Соберите все свои размеры и шестнадцатеричные значения цвета в информационный файл (я использую txt файл), с которым вы можете легко ссылаться. Это уменьшит ваш налог на вкладку alt и добавит цвета в Photoshop несколько раз.
После того, как все мои направляющие на месте, я вырезаю весь сайт в папку с изображениями, начиная с фотографий и сгруппированных элементов, и заканчивая различными фоновыми фрагментами/изображениями, если они существуют. (Совет. Используйте ctrl -click в предварительном просмотре слоя, чтобы выбрать этот контент слоя.)
Примечания по использованию Photoshop:
Нет ярлыков:), но все работают немного по-другому.
Этот учебник, который появился вчера в моем загрузчике, показывает процесс от начала до конца и может помочь людям, которые никогда не делали этого раньше, но поскольку вы старая рука, это просто оптимизация ваших собственных методов.
EDIT: Ссылка listapart, конечно же, более автоматизирована для "плоских" проектов, где и imageready, и фейерверк имели очень хорошую поддержку с первого дня, и с каждым выпуском она стала лучше и семантичнее, но если у вас более сложный дизайн, это разные биты, которые делают дизайн, что это такое, и это нужно сделать вручную.
Я просто подумал, что стоит отметить, что в дополнение к отличным советам, которые у вас были до сих пор, я бы рекомендовал получить печатную версию дизайна, используя красную ручку, чтобы отметить все элементы блока в дизайне вы думаете, что можете найти и устроиться с дизайнером в течение получаса и рассказать о том, как они предвидели, что их дизайн работает для случаев использования, которые не соответствуют статическому дизайну.
Это также поможет вам выявить потенциальные проблемы, которые вы, возможно, не осознали, будет проблемой, пока ваш локоть не окажется в css.
Это не только упрощает вашу работу, но и несколько раз делает это, ваш дизайнер получит гораздо более сильное представление о том, что связано с тем, что они отмечают в своей работе. Некоторые дизайнеры испытывают настоящую проблему, понимая, почему то, что они считают визуально очень простым, будет сделайте несколько дней для настройки CSS, чтобы сделать работу.
Некоторые из разработчиков, которых я знаю, обычно используют Illustrator для создания элементов дизайна.
Эта страница показывает, как сделать это немного более автоматизированным.
Также ознакомьтесь с функцией "Layer Comps". Я использую это для изменения состояний кнопок.