Блочная верстка DIV - Форум
Включить музыку | Воскресенье, 11 Дек 2016, 7.08.04| Главная | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Архив - только для чтения
Форум » Корзина » Архив » Шпаргалка и скрипты » Блочная верстка DIV
Блочная верстка DIV
veterokuaДата: Пятница, 24 Сен 2010, 4.20.19 | Сообщение # 1
Генерал-полковник
Группа: Администраторы
На форуме с: 11 Окт 2009
Награды: 93
Сообщений: 1647
< >
Статус:
~ Мои награды ~

В последнее время много разговоров о блочной верстке.ее еще называют DIV версткой.Я облазил куча сайтов,куча порталов чтоб найти доступное объяснение.И вот кажется нащел.Нашел блог одного паренька где доступно и просто рассказывает о этом деле.За что ему огромный респектище, добавил в закладки.Осмелюсь полностью процетировать его блог

Quote

В последнее время очень популярной стала блочная верстка сайтов или, как ее еще называют, div верстка. Большинство современных сайтов строятся именно по этой технологии. Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег DIV . С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.

В данном уроке я попытаюсь доходчиво объяснить, что такое блочная верстка и по какому принципу она строится. Материал расчитан на людей, впервые столкнувшихся с понятием div верстка, поэтому спецов прошу не судить строго :)

Урок довольно продолжительный, порядка 30 минут. Поначалу я хотел оформить весь этот материал в текстовом варианте, но потом прикинул сколько места это займет и подумал, что лучше будет записать видео :)

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

Вот примерный план урока:

1. Что такое блочная верстка, и каковы ее базовые принципы.

2. Верстаем двухколонный макет фиксированной ширины (меню слева)

3. Верстаем двухколонный макет фиксированной ширины (меню справа)

4. Верстаем трехколонный макет фиксированной ширины

5. Разбираем различия фиксированных макетов и резиновых(которые тянутся на весь экран) и соответственно верстаем все перечисленные макеты, только в резиновом варианте..

6. Подводим итог о блочной верстке сайтов..

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



Для всех текстовых элементов, находящихся в шапке, контенте,
и подвале (в общем в тех элементах, для которых свойство FLOAT не задано),
нужно обнулять отсупы margin. Будь то параграфы, заголовки и.т.д.
Т.е. нужно всем этим элементам ставить свойство margin:0;
Ну а нужные расстояние можно формировать с помощью свойства padding .
Это связано с тем, что у блочной верстки есть такое свойство, что если эти отсупы не обнулить,
то между блоками появляется расстояние, чего Нам не нужно :)
В общем смотрите урок, эксперементируйте и сами все поймете !
Скачать Flesh
Скачать (если трудности со Flesh)
Прикрепления: 7312916.jpg(43Kb)
 
Форум » Корзина » Архив » Шпаргалка и скрипты » Блочная верстка DIV
Страница 1 из 11
Поиск:
Последние сообщения на форуме
Посетители дня
Посетители:

В гостях у Белчонки © 2016