Автор Тема: Основы верстки.  (Прочитано 3041 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Основы верстки.
« : 16 Января, 2011, 11:13 »
Версткой веб-страниц будем называть создание такого HTML-кода, который позволяет размещать элементы веб-
страницы (изображения, текст, линии и т.д.) в нужных местах документа и отображать их в окне браузера согласно
разработанному макету. При этом следует принимать во внимание ограничения присущие HTML и CSS, учитывать
особенности браузеров и знать приемы верстки, которые дают желаемый результат.
Чтобы стало понятно, что же входит в верстку и почему она считается достаточно важным и сложным этапом
создания сайта, разберем небольшой пример. Сразу отметим, что верстка это процесс творческий и четких
алгоритмов здесь не существует, поэтому не следует принимать изложенные советы и рекомендации как догму,
это лишь один из возможных путей.
Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, Adobe Illustrator, Adobe
Photoshop), утверждает их у заказчика и передает верстальщику на формирование HTML-кода.
Верстальщик получает работу в виде набора рисунков, где каждый из них соответствует макету отдельной
страницы со своим дизайном. Например, вид главной страницы показан на рис. 1.
Теперь необходимо проанализировать рисунок и решить, как же его превратить в веб-страницу. Для удобства
происходит логическое разбиение картинки на отдельные блоки, с которыми идет дальнейшая работа. Так, по
рис. 1 можно выделить два крупных блока — «шапка» страницы и основной контент. Рассмотрим для начала
«шапку», показанную на рис. 2.
По задумке дизайнера цветная и белая полоса вверху должны занимать всю ширину веб-страницы, а набор
пиктограмм с заголовком сайта выравнивается по центру окна браузера. Положение рисунков относительно друг
друга меняться не должно и каждый из них является ссылкой на определенный раздел сайта. С учетом указанных
особенностей возможны следующие варианты.
Сделать один рисунок и применить к нему карту-изображение.
Разрезать изображение на фрагменты и объединить их воедино с помощью таблицы, при этом отдельные
фрагменты будут служить ссылкой.
Воспользоваться позиционированием элементов.
Каждый из приведенных методов хотя и приводит к нужному результату, но имеет также и свои недостатки, о
которых верстальщик должен иметь представление.
После того, как первый блок будет готов и воплощен в HTML, можно переходить к работе над следующим
блоком. Здесь теперь уже фигурирует текст, поэтому происходит формирование стилевого файла, в котором
затронуты следующие факторы:
цвет фона веб-страницы;
гарнитура основного шрифта, его размер и цвет;
размер текста отдельных модулей (новостей, например);
цвет, размер и гарнитура шрифта заголовков;
параметры горизонтальных линий и рамок.
Дальше верстальщик, используя созданный CSS-файл, создает окончательный HTML-документ главной страницы.
На этом приключения только начинаются, потому как дизайнер подготовил макет не только главной страницы, но
и макеты остальных разделов. А они несколько отличаются по своему виду от уже проделанной работы (рис. 3).
«Шапку» теперь предстоит переделать, а в CSS включить параметры новых появившихся элементов. И так с
каждым разделом.
Во время работы над шаблонами и по ее окончанию происходит проверка, которая должна ответить на такие
вопросы:
корректно ли отображаются страницы в популярных браузерах?
происходит сохранение целостности данных при изменении размера шрифта в браузере как в большую, так и
меньшую сторону?
можно продолжать работу с сайтом, если отключить показ изображений?
как существенно влияет на вид страниц разрешения монитора?
Следует также учесть, что статьи могут иметь разный объем и веб-страница должна сохранять свой вид
независимо от этого.
Если ошибки найдены, то в шаблоны с их учетом вносятся исправления, и так до тех пор, пока число ошибок не
будет сведено к минимуму.
Верстальщик, как правило, не создает все веб-страницы сайта, а делает несколько типовых
документов, которые называются шаблоном (или темплейтом, если использовать жаргонное
выражение). После чего страницы формируются по ним либо динамически с помощью серверной
программы, либо заполнением шаблона текстом и сохранением в разные файлы.
Любой сайт это комплексный продукт в том смысле, что он одновременно должен решать множество, подчас
противоречивых задач. Так, сайт должен быть эстетичным и привлекательным в плане дизайна, содержать
интересную и полезную информацию. В то же время он должен легко индексироваться поисковиками, быстро
загружаться, а для автора — быть удобным для редактирования и расширения возможностей. Но это еще не все.
Сайт должен без явных ошибок отображаться в разных браузерах, подстраиваться под размер окна и терпеливо
сносить различные настройки пользователей.
Разумеется, из перечисленного дизайн и материалы сайта лежат вне сферы деятельности верстальщика, но все
остальное, так или иначе, подвластно именно ему. Хотя работа верстальщика не видна, поскольку она скрыта в
коде документа, куда заглядывают далеко не все, именно она обеспечивает правильность отображения веб-
страниц и быстроту их загрузки.
Типографское искусство или просто типографика — вот еще одна область, которая также относится к теме верстки.
Это именно искусство, объединившее в себе черты дизайна и верстки, и основано оно на знании шрифтов, опыте
их использования, психологии восприятия, чувстве стиля и т.д. Действительно, какой шрифт лучше выбрать,
чтобы текст хорошо читался, легко воспринимался при изменении размера букв и делал сайт неповторимым? При
подготовке полиграфических материалов ответ на этот
« Последнее редактирование: 16 Января, 2011, 13:16 от online »
Если вы считаете свой дизайн безупречным, то зайдите сюда

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Re: Основы верстки.
« Ответ #1 : 16 Января, 2011, 13:21 »
Рис 1: http://www.photoshare.ru/photo6668073.html
Рис 2 такой же как и рисунок 1
Рис 3: http://www.photoshare.ru/photo6668101.html








« Последнее редактирование: 05 Февраля, 2011, 20:11 от online »
Если вы считаете свой дизайн безупречным, то зайдите сюда

Оффлайн ramon34

  • Пионеры
  • Герой форума
  • *****
  • Сообщений: 1160
  • Karma: +59/-10
  • Пол: Женский
    • ICQ клиент - 393181948
    • Просмотр профиля
    • searchtalk
Re: Основы верстки.
« Ответ #2 : 05 Февраля, 2011, 20:14 »
было бы не плохо видео ...

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Re: Основы верстки.
« Ответ #3 : 05 Февраля, 2011, 21:37 »
Ок,  сделаю.
« Последнее редактирование: 23 Декабря, 2011, 11:00 от online »
Если вы считаете свой дизайн безупречным, то зайдите сюда

Оффлайн Голивудс

  • Новичок
  • *
  • Сообщений: 22
  • Karma: +0/-0
  • Пол: Мужской
    • Просмотр профиля
Основы верстки.
« Ответ #4 : 22 Декабря, 2011, 15:30 »
Позвольте спросить, а какая именно верстка лучше на ваш взгляд, блочная верстка или же табличная?
В каких случаях что лучше использовать?
Благодарю за ответ.

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Основы верстки.
« Ответ #5 : 23 Декабря, 2011, 09:03 »
я сам работаю исключительно со слоями или блоками дивами, она считается современной и практически все сайты на ней.
Если вы считаете свой дизайн безупречным, то зайдите сюда

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Основы верстки.
« Ответ #6 : 23 Декабря, 2011, 10:58 »
И тот, и другой способ имеют место быть, любым из них можно осуществить любую идею, другое дело, что в некоторых случаях рациональнее использовать тот или иной способ. Это уже зависит от своих знаний и понимания ситуации.
Если вы считаете свой дизайн безупречным, то зайдите сюда

Оффлайн Голивудс

  • Новичок
  • *
  • Сообщений: 22
  • Karma: +0/-0
  • Пол: Мужской
    • Просмотр профиля
Основы верстки.
« Ответ #7 : 24 Декабря, 2011, 15:42 »
И тот, и другой способ имеют место быть, любым из них можно осуществить любую идею, другое дело, что в некоторых случаях рациональнее использовать тот или иной способ. Это уже зависит от своих знаний и понимания ситуации.
Понятно. Значит нет чего-то лучшего, а просто есть свое решение для какой-то задачи?
А новичкам с какой верстки стоит начинать ? С блочной или с табличной? Что все-таки проще?
Минусы/плюсы каждого вида верстки какие?

Оффлайн online

  • Moderator
  • Герой форума
  • *****
  • Сообщений: 729
  • Karma: +23/-1
  • Пол: Мужской
    • Просмотр профиля
    • E-mail
Основы верстки.
« Ответ #8 : 24 Декабря, 2011, 16:44 »
Ну начинать следует с блочной, и продолжать в том же духе. У табличной гораздо больше минусов. На мой взгляд. Она менее гибкая, в ней всё зафиксировано, затруднена резиновая верстка. Минусов много, у блоков затруднено размещение элементов.
Если вы считаете свой дизайн безупречным, то зайдите сюда