Блочная вёрстка. В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний. Книги Веб технологии HTML. 11.07.2013 Ташков П. А. - Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка.
Так что эту нишу восполняет моя новая электронная книга «Вёрстка веб-страниц», которая будет полезна и новичкам и опытным пользователям.
![Html Верстка Учебник 2013 Html Верстка Учебник 2013](http://goldbusinessnet.com/wp-content/uploads/2012/10/teg-div.png)
Скачать учебники html, справочники, книги бесплатно. 11.07. 2013. Ташков П. А. О вёрстке веб-страниц вообще мало книг на русском языке, а уж. Существует определенный уровень теоретических базовых знаний HTML, которыми должен владеть начинающий верстальщик для верстки сайта, ведь HTML-программирование – неотъемлемая часть любой верстки. В html хорошо понимаю. Подскажите учебник по верстке страниц с примером, к примеру взяли шаблон и начали верстать, где все хотя бы чуть чуть подробно расписана суть верстки..
Поплавки. Блочная верстка. Учебник CSS. Эх рыбалка. Ладно, будем считать, что отдохнули перед очередной порцией информации. Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим" Теперь побольше конкретики и примеров. Свойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон.
Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера. Значения свойства float: left - Выравнивает элемент по левому краю, остальные элементы обтекают его справа. Выравнивает элемент по правому краю, остальные элементы обтекают его слева. Выравнивание элемента не задается. Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны.< !
DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www. TR/html. 4/loose.
Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева. А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам. Пример: < ! DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www.
TR/html. 4/loose. Свойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон.
Значения: both - Запрещает обтекание элемента с левой и правой стороны. Запрещает обтекание элемента с левой стороны. Запрещает обтекание элемента с правой стороны. Запрет на обтекание элемента не задается.(по умолчанию).
Вот пример где clear отменяет действие float< ! DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0. Transitional//EN" "http: //www.
TR/html. 4/loose. Этот блок всплывает слева.< /div> < div style="background: #c. И этот блок всплывает слева.< /div> < div style="background: #0c. А этот блок отменяет обтекание с левой стороны.< /div> < /body> < /html> В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS.
Разберём классический макет верстки сайта из трёх колонок, а так же "шапки" и "подвала". Взгляните на пример: < ! DOCTYPE HTML PUBLIC "- //W3. C//DTD HTML 4. 0.
Transitional//EN" "http: //www. TR/html. 4/loose. Блочная вёрстка< /title> < /head> < body style="background: #cc. Логотип< /div> < div style="float: left; background: #c. Меню< /div> < div style="float: right; background: #c. Реклама< /div> < div style="margin: 0 1. Основное содержание< br> < br> < br> < br> < br> И ещё куча текста.< /div> < div style="clear: both; background: #0c.
Подвал< /div> < /body> < /html> Что было понятно "расшифрую" каждую строчку из примера выше. DOCTYPE HTML PUBLIC "- //W3.
C//DTD HTML 4. 0. Transitional//EN" "http: //www.
TR/html. 4/loose. Блочная вёрстка< /title> < /head>.
Думаю понятно.: ) стандартное начало любой страницы.< body style="background: #cc. Используем margin: 0 для того чтобы обнулить поля в окне браузера.< div style="clear: both; background: #0c.
Логотип< /div> - Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear: both, теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху.< div style="float: left; background: #c. Меню< /div> - Левая колонка с "Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 1. Реклама< /div> - Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 1. Основное содержание< /div> - Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справа margin: 0 1. Почему поля 1. 80 пикселей, а не 1. Меню" и "Реклама"? Отвечаю: потому что кроме ширины width: 1.
Подвал< /div> - Ну и "подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear: both и тем самым устремляется вниз страницы. Это нужно "расшифровывать"? В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо.
Глава 6 Классы и идентификаторы.)и всё это дело с остальными потрохами выносят в отдельный css файл. Верстка блоками div стремительно набирает популярность, и позволяет сверстать сайт практически любой сложности, однако не всегда стоит полностью отказываться от табличного способа верстки. Зачастую верным решением является комбинированный способ верстки, где грубым "каркасом" сайта является таблица, наполненная блоками div которые выполняют более тонкие задачи верстки сложного по структуре сайта.
Учебник по версткеhttp: //www. А вообще, ТС, вы определитесь: по какому движку вы хотите научиться делать шаблоны? WP, Joomla, DLE? Или что- то более экзотическое?