Продолжая недавний урок « Создание яркого дизайна блога в Adobe Photoshop» , теперь мы рассмотрим, как принять концепцию и воплотить ее в реальную веб-страницу, созданную в форматах xhtml и css. Экспортируя изображения из Photoshop и кодируя страницу, мы создадим рабочий пример общего дизайна блога.
В конце последнего урока мы создали полный макет главной страницы, включая общий макет, цвет и дизайн, предлагаемую типографику и образец содержимого. Теперь пришло время пересмотреть концепцию и спланировать, какие элементы могут быть созданы в чистом формате xhtml и css, а какие части требуют использования изображений.
Первый экспортируемый элемент — это большой фон. Все остальные слои скрыты, и большой выбор документа экспортируется с помощью параметра «Сохранить для Интернета и устройств».
По первым впечатлениям легко представить, что такое большое изображение будет слишком большим по размеру файла для дизайна веб-сайта, но на самом деле результат составляет всего 30 КБ с оптимизированным сжатием JPEG, балансом между качеством изображения и общим весом файла.
Основная область контента затем экспортируется, делая еще один большой выбор, включающий всю центральную панель вместе с визуальными эффектами, такими как тень и эффект прозрачной границы. Верхняя боковая панель также включена в эту область из-за сложного использования прозрачности
Чтобы позволить веб-странице расширяться по вертикали, экспортируется часть нижней области содержимого, которая будет повторяться по вертикали.
Чтобы завершить макет веб-страницы, область нижнего колонтитула экспортируется, делается выборка вокруг изображения, которая соответствует общей ширине и включает серый градиент графического объекта.
Чтобы экспортировать боковую панель, область основного содержимого временно растягивается по вертикали.
Поскольку концепция использует отдельные секции боковой панели, на графике будут использоваться два изображения: верхняя секция, которая достаточно длинна, чтобы вместить больше, чем реально будет когда-либо, и небольшая нижняя секция, которая обрезает длинную секцию на отдельного человека. панели. Это аналогичный подход к методам раздвижных дверей, используемых в меню.
Длинное скольжение экспортируется, включая эффекты прозрачности границы в выделении.
Далее идет тонкий нижний участок, который завершил боковую панель.
Тонкое скольжение экспортируется из фона меню, это другое изображение, которое может повторяться по горизонтали в зависимости от длины текста меню. Здесь используется прозрачность файлов PNG, чтобы меню можно было накладывать на различные цвета фона.
Отдельные области публикации в концепции используют те же эффекты границ, что и боковая панель, но поскольку они не перекрываются с фоном и не имеют сложной прозрачности, они будут созданы исключительно с помощью CSS.
Однако в нижней части панели содержимого используется небольшой синий градиент, который можно просто экспортировать в виде тонкой полосы, которая будет повторяться по горизонтали.
Маленькие значки с комментариями, стрелками, RSS и электронной почтой затем экспортируются вместе с логотипом блога.
Полная концепция теперь разделена на отдельные изображения, в общей сложности 13 изображений будут составлять страницу, пять из которых зависят от макета. Полный размер объединенных изображений достигает 95 КБ, которые даже для меньшинства, все еще подключенного к сети, скоро загрузят при просмотре веб-страницы.
HTML-страница настроена так, чтобы содержать структуру макета. Отдельная таблица стилей CSS связана с документом, который будет включать визуальные правила для дизайна.
Добавлен div с идентификатором контейнера, который позволит центрировать содержимое и зафиксировать один из фонов. Помните, что у нас также есть тонкое фоновое изображение, которое будет повторяться по вертикали, пока CSS3 не получит более широкую поддержку, для размещения этого изображения требуется второй элемент div.
Тег H1 используется для обозначения имени веб-сайта, а также будет основой для логотипа. Верхняя навигация и опции подписки на rss / email представлены в виде неупорядоченных списков.
Затем пишется CSS для макета страницы, начиная со сброса, чтобы удалить все настройки браузера по умолчанию. Большое фоновое изображение прикреплено к основной части и настройке общего стиля шрифта. Элементы div для контейнера, содержимого и нижнего колонтитула также имеют соответствующие фоновые изображения.
Продолжая стилизацию CSS, затем добавляется код для дизайна отдельных элементов, настраивая заголовок один и неупорядоченные списки для отображения соответствующих изображений и цветов.
С этим начальным кодированием html можно предварительно просмотреть в браузере, поэтому макет отображается на странице централизованно с логотипом и навигацией.
Следующим шагом является уточнение фрагментов поста. Использование контейнера вокруг поста позволит стилизовать панель, как мы упоминали ранее, вместо использования изображений.
Стили CSS для этого раздела страницы добавляют цвета и границу панели и задают стиль заголовка сообщения и текста абзаца. Поскольку сайт связан с веб-разработкой, большинство зрителей, вероятно, являются пользователями Firefox, это означает, что мы можем использовать moz-border-radius для отображения закругленных углов на панели в соответствии с оригинальной концепцией. Для других браузеров это просто ухудшится до квадратного угла.
Тестирование этого в браузере затем показывает этот стиль по-настоящему, показывая, как использование цвета фона CSS и границы могут воссоздать оригинальный эффект от Photoshop.
Структура html для боковой панели затем размечается, используя контейнер на секциях боковой панели, позволяющий использовать два фоновых изображения, которые составляют технику раздвижных дверей, для расширения содержимого боковой панели.
Добавлено больше стилей CSS для управления html-элементами, настройки размера, цвета и типографики.
Стили боковой панели затем можно увидеть в браузере, обратите внимание, как длинное изображение, используемое для секций боковой панели, обрезается короче в зависимости от длины содержимого в них.
Далее нужно быстро вернуться к фрагменту записи и добавить опцию «читать дальше» и информацию о комментариях.
Затем добавляется стилизация для этих элементов, используя специальные классы в двух абзацах, что позволяет добавить пузырь комментария и дополнительные значки со стрелками в качестве фоновых изображений.
Затем панель становится полной и видимой в браузере, повторение тонкого фонового изображения создает впечатление сплошной панели, на которой установлен текст.
После этого общий макет завершен, хотя страница все еще находится на стадии разработки, и теперь ее можно просматривать в браузере, чтобы получить представление о том, как она будет отображаться при различных разрешениях, а также имитировать эффекты наведения ссылок.
Как и в случае с веб-дизайном, работа над сайтом не прекращается. Тестирование в Firefox, Opera и Safari прошло без проблем, однако у Internet Explorer были другие намерения.
Несколько модификаций в стиле CSS вскоре сгладили проблемы. Изменение стиля навигации со встроенного блока на его формат блока по умолчанию и настройка плавающего сделали свою работу.
Варианты подписки, похоже, страдают от проблемы перехода, которая обычно возникает в IE, это просто исправляется добавлением display: inline к элементам списка.
Вскоре после внесения этих изменений сайт вернулся в нормальное состояние и был готов к созданию в качестве темы WordPress, где потребуется немного больше стиля, чтобы покрыть сгенерированный код и, конечно, внутреннюю страницу с областью комментариев.
Хотя было бы неплохо объяснить каждую строку кода более подробно, статья могла бы длиться вечно и, вероятно, стать довольно повторяющейся. Надеюсь, просмотрев полный HTML и CSS, вы сможете увидеть, как создается каждый элемент. Проверьте законченную веб-страницу .
 (Пока оценок нет) Загрузка... |
