Как лучше всего перейти от макета Photoshop к семантическому HTML и CSS?

Я обычно использую ручной процесс:

  1. Посмотрите на страницу, выясните смысловые элементы и создайте HTML
  2. Нарежьте изображения, которые мне понадобятся
  3. Начните писать CSS
  4. Настройте и повторите различные шаги по мере необходимости

Есть лучший подход или инструмент?

21.08.2008 08:32:34
8 ОТВЕТОВ
РЕШЕНИЕ

У меня довольно естественный способ кодирования. Ключ заключается в том, чтобы рассматривать страницу как документ или статью. Если вы думаете об этом так, то логически понятно следующее:

  1. Заголовок страницы является заголовком верхнего уровня

    • Делаете ли вы заголовок сайта или фактическое название страницы, h1 остается за вами - лично я бы сделал О нас h1, а не переполнение стека.
  2. Навигация представляет собой оглавление и, следовательно, упорядоченный список - вы также можете использовать ol над ul.

  3. Заголовки разделов - h2, разделы внутри этих разделов - h3s и т. Д. Сложите их.

  4. Используйте цитаты и цитаты, где это возможно. Не просто окружить это ".

  5. Не используйте b и i. Используйте сильные и ем. Это потому, что HTML является структурной, а не презентационной разметкой. Сильные и эм Phasis метка должна использоваться там , где вы хотите сделать акцент на слове.

  6. <label> ваши элементы формы.

  7. Используйте <acronym>s и <abbr>s, где это возможно, но только в первом случае.

  8. Самое простое: всегда, всегда давайте своим изображениям альтернативный текст.

  9. Вы можете использовать множество HTML-тегов, которых у вас, вероятно, нет - адрес для почтовых адресов, вывод кода на экран. Посмотрите на HTML Dog для некоторых, это моя любимая ссылка.

Это всего лишь несколько указателей, я уверен, что мог бы придумать больше.

О, и если вы хотите испытать трудности, сначала напишите свой XHTML, а затем напишите CSS. Во время CSS вы не можете трогать HTML. Это на самом деле сложнее, чем вы думаете (но я обнаружил, что это сделало меня быстрее).

10
22.08.2008 11:26:51

Некоторые из известных мне дизайнеров обычно используют Illustrator для создания элементов дизайна.

0
21.08.2008 08:39:33

Нет ярлыков :), но все работают немного по-другому.

Этот учебник, который появился в моем фид-ридере вчера, показывает процесс от начала до конца и может помочь людям, которые никогда не делали этого раньше, но, поскольку вы старый человек, это просто оптимизация ваших собственных методов.

РЕДАКТИРОВАТЬ: ссылка на listapart, безусловно, более автоматизирована для «плоских» проектов, где и у imageready, и у fireworks была довольно хорошая поддержка с первого дня, и она стала лучше и семантичнее с каждым выпуском, но если у вас более сложный дизайн, то это небольшие кусочки, которые сделайте дизайн таким, какой он есть, и это нужно сделать вручную.

1
21.08.2008 09:43:19

На этой странице показано, как сделать это немного более автоматизированным.

0
21.08.2008 09:30:34

Что ж, когда я создаю сайт, я стараюсь полностью забыть о дизайне при написании HTML. Я делаю это, чтобы не получить никакой разметки для конкретного дизайна и сосредоточиться на семантическом значении элементов.

Некоторые указания, как разметить вещи:

  • menu - используйте элемент 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). Если имеет смысл перемещаться таким образом, вы добились успеха, когда дело доходит до доступности.

Надеюсь, это поможет :)

4
14.01.2016 19:13:40

По сути, я делаю то же самое, что и Джон, но вот еще несколько идей:

  1. Используйте руководства в Photoshop (и закрепите их). Выясните все ваши размеры для каждой коробки / региона заранее.

  2. Соберите все ваши размеры и шестнадцатеричные значения цвета в информационный файл (я использую текстовый файл), на который вы можете легко ссылаться. Это уменьшит ваш налог на дополнительные вкладки и многократный выбор цветов в Photoshop.

  3. После того, как все мои направляющие на месте, я вырезаю весь сайт в папку с изображениями, начиная с фотографий и сгруппированных элементов и заканчивая различными фоновыми плитками / изображениями, если они существуют. (Совет: используйте ctrl-нажмите на предварительном просмотре слоя, чтобы выбрать содержание этого слоя).

Примечания по использованию Photoshop:

  • Используйте направляющие или сетку.
  • Используйте функцию «Заметки» для получения любой необходимой информации.
  • Всегда используйте группы слоев для похожих элементов. Мы должны быть в состоянии отключить целые регионы в один клик. Поместите все содержимое заголовка в одну группу слоев.
  • Всегда называйте свои слои.
  • Вы можете поместить каждый шаблон страницы в один файл PSD и использовать вложенные группы слоев для их организации. Таким образом, нам не нужно настраивать все наши руководства и заметки для каждого шаблона страницы на сайте.
3
20.08.2015 22:19:12

Я просто подумал, что стоит отметить, что в дополнение к прекрасному совету, который у вас был до сих пор, я бы порекомендовал получить печатную версию дизайна, используя красную ручку, чтобы отметить все элементы блока на дизайне, который вы считаете нужным можно найти и посидеть с дизайнером в течение получаса и поговорить о том, как он представлял свой дизайн, работая для вариантов использования, которые не соответствуют статическому дизайну.

  • Что происходит, когда в навигацию добавляется больше текста?
  • Эта ширина фиксированная или жидкая?
  • Является ли эта панель содержимого правильной фиксированной высотой или жидкостью? Если это жидкость, почему вы наложили на нее фон, который нельзя повторить?
  • У вас есть граница, простирающаяся вниз по странице, которая разбивает два связанных между собой элемента. Визуально это имеет смысл, но семантически я не могу просто использовать li для размещения обоих этих элементов. Как вы думаете, что важнее?

Это также поможет вам определить потенциальные проблемы, которые вы, в противном случае, не осознали бы, были бы проблемами до тех пор, пока вы не дошли до локтя в css.

Мало того, что это облегчит вашу работу после нескольких раз, ваш дизайнер получит гораздо более четкое представление о том, что подразумевается под разметкой их работы - у некоторых дизайнеров есть реальная проблема с пониманием, почему то, что они считают визуально очень простым, займет несколько дни CSS-твики для работы.

1
8.02.2009 12:30:38

Также познакомьтесь с функцией Layer Comps. Я использую это для изменения состояния кнопок.

  1. Создайте композиции слоев для обычного, наведения и активного.
  2. В каждом из них настройте эффекты / цветовые наложения и видимые слои, которые принадлежат этому состоянию.
  3. Сохранить в Интернете: перейдите в отдельную папку для каждого состояния, если не проще переименовать каждый фрагмент (в противном случае ваши фрагменты при наведении курсора будут перезаписывать ваши обычные фрагменты).
0
19.02.2009 09:25:36