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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Некоторые указатели, как markup вещи:

• меню-используйте элемент 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 (заголовок) для логотипа вместо image.Example:

  <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;
  }
  

• IDs и классы-используйте IDs для идентификации элементов, у которых есть только один экземпляр. Используйте класс для идентификации элементов, которые вы получили несколько экземпляров.

• Используйте текстовый браузер (например, lynx). Если это имеет смысл для навигации таким образом, вы сделали хорошо, когда дело доходит до доступности.

Я надеюсь, что это поможет :)

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

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

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

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

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

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

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

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

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

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

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

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

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

Кроме того, познакомьтесь с функцией "Layer Comps". Я использую это для изменения состояний кнопок.

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

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

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