<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру

PHP и MySQL с Нуля до Гуру

Данный курс - это более 20-ти часов видеоуроков по изучению PHP и MySQL. Ключевой момент курса - это создание движка для сайта с нуля. Каждая строчка комментируется. Практически для каждого урока имеются упражнения. Причём данные упражнения направлены не только на закрепление материала, но и на реализацию реальных задач, встающих перед Web-разработчиками при создании сайтов. После курса Вы сможете без проблем создавать движки для любых сайтов.

Также почти к каждому уроку идут упражнения для закрепления материала.

Просмотрев курс и выполнив упражнения, Вы сможете без проблем создавать функциональные движки для самых различных сайтов.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Разработка макета сайта

Разработка макета сайта

Сетка – это эскиз или диаграмма web-страницы, который показывает структуру (но не детализированный дизайн) базовых элементов страницы, таких как заголовок, навигационная панель, область основного содержимого и подвал. Сетка используются как часть процесса создания дизайна, для экспериментирования с различными макетами страницы, для разработки структуры и навигации на сайте, а также для обеспечения согласованности среди участников проекта. Реальный контент (текст, картинки, логотип и навигация) не используют на сеточных диаграммах - сетка отображает общую структуру страницы.

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

Рис.1

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

Рис. 2

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

Рис. 3

Сетка на рисунке 4 изображает с тем же самым контентом, но уже несколько иначе.

Рис. 4

Часто макет для домашней страницы отличается от макета, используемого для страниц с контентом. Но даже в этом случае, наличие единообразных заголовков, навигации, цветовой схемы создают более привлекательный вид сайта. Достигается это путем грамотного использования CSS. Очень подробно о верстке сайтов я рассказываю в моем курсе Вёрстка сайта с нуля 2.0

Далее мы рассмотрим две наиболее часто используемые техники создания макета сайта: фиксированный макет и гибкий макет.

Фиксированный макет – эта техника иногда называется как твердый или “ледяной” дизайн. Контент страницы имеет фиксированную ширину и может прижиматься к левому краю окна браузера, как показано на рисунке 5:

Рис. 5

Обратите внимание, на пустое пространство в правой стороне окна браузера. Для того, чтобы исключить данный несбалансированный вид, воспользуемся широко используемым методом: дадим области контента некоторую ширину ( например, 960 пикселей ) и отцентрируем его в окне браузера, как показано на рисунке 6.

Рис. 6

Техника гибкого макета заключается в том, что иногда называют как “жидкий” макет. При этой технике размеры гибкого макета настраиваются с помощью относительных единиц измерения – процентов, таким образом, занимая практически 100% окна браузера. При изменении размера окна, макет также будет изменяться, подстраиваясь под новые размеры. Единственным недостатком является то, что при просмотре подобной страницы на мониторах с большим разрешением, строки текста могут сильно расползаться, делая невозможным нормальную работу сайтом.

Рис 7.

На следующем рисунке показан адаптированный плавающий макет, в котором 100% ширины окна браузера используется для заголовка и навигации, а под сам контент отдается 80% ширины страницы. Сравните этот макет с предыдущим. Центрированная область изменяется вместе с изменением окна браузера. Увеличить читаемость текста на больших экранах можно посредством CSS, задав максимальную ширину для области контента.

Рис. 8

Таким образом, сегодня мы с вами рассмотрели технику разработки макета сайта. Однако, это знание вам мало поможет, если у вас не будет навыков разработки и верстки макетов. Поэтому, если вы действительно хотите быстро научится проектировать макеты и верстать даже самые сложные сайта, то у меня для вас есть мой курс Вёрстка сайта с нуля 2.0, который научит вас всему, что необходимо для заработка на верстке сайтов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.