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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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