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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

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

EDIT: Ссылка на listapart, безусловно, более автоматизирована для «плоских» дизайнов, где и imageready, и fireworks с первого дня получили довольно хорошую поддержку, и с каждым выпуском она становится все лучше и более семантической, но если у вас более сложный дизайн, то это делает небольшие кусочки. спроектируйте, что это такое, и это должно быть сделано вручную.

Answer 6

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

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

Answer 7

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

Answer 8

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