Займемся подготовкой графики для нашего будущего шаблона. Удобнее всего , на мой взгляд, это делается с помощью инструмента Slice в Adobe Photoshop. Аккуратно обведите нужные области макета этим инструментом. Для удобства вы можете включать и выключать «прилипание» курсора к границам слоев и другим объектам с помощью функции Snap из меню View:
Вот так у меня выглядит макет после нарезки:
Когда закончите, переходите к сохранению картинок. В меню File выберите пункт Save for Web & Devices и щелкните мышью. В появившемся окне вы можете поочередно выбрать каждую часть макета и задать для нее формат сохранения и прочие параметры. Обратите внимание на то, что сохранение небольших фрагментов в формате PNG зачастую дает меньший размер файла, чем GIF или JPG. Но помните, что использование этого формата с прозрачностью создает уйму проблем в самом «любимом» браузере всех верстальщиков Internet Explorer. В 6 и 8 его версиях. В 7 я проблем пока не наблюдал.
О css подробно рассказывать не буду, дам лишь несколько ссылок на использованные техники:
- Выстраиваем блочные элементы в ряд с помощью float
- DD_belatedPNG – по-моему лучшее лекарство для отображения PNG с прозрачностью в IE6
- Центрирование блоков через margin:auto
- Условные комментарии в Internet Explorer
- Таблица «безопасных» шрифтов для различных платформ
На этом пост прошу считать законченным. Полный архив с версткой можно скачать здесь.
Если вдруг по каким-то причинам эти 3 поста все-таки кого-то заинтересовали, задавайте вопросы, буду рад ответить. Полностью все правда лень разжевывать и настроения сейчас нет...
0 коммент.:
Отправить комментарий