home
Быстрая регистрация.
logo  
RSS news bestarchive

Выберите раздел


Категории раздела
Игры [71]
Задача процесса — доставить участникам ряд переживаний и эмоций, дать процессы, в которых можно приобрести новый опыт через непосредственное практическое участие.
Mobile [61]
Этот раздел посвящён мобильникам, то есть здесь софт, управление через ПК, обои, темы, и т.д.
Codec [15]
Устройство или программа, способная выполнять преобразование данных или сигнала.
Бубука [160]
Вкусные рецепты разных блюд, в общем кулинарные рецепты.
Разное [60]
Всего понемногу...
Музыка [503]
Вид искусства, художественным материалом которого является звук, особым образом организованный во времени.
Иконки [3]
Элемент графического интерфейса, небольшая картинка, представляющая приложение, файл, каталог, окно, компонент операционной системы, устройство и т. п.
CD DVD [11]
Ну тут надеюсь все понятно, CD-сиди и слушай, DVD-сиди и смотри... хотя... тут не всегда так.
Internet [94]
Здесь все что надо для работы в сети интернет.
Плагины [24]
Независимо компилируемый программный модуль, динамически подключаемый к основной программе, предназначенный для расширения и/или использования её возможностей.
Браузеры [12]
Программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой.
Multimedia [122]
Комплекс аппаратных и программных средств, позволяющих пользователю работать в диалоговом режиме с разнородными данными (графика, текст, звук, видео), организованными в виде единой информационной среды.
Интересно [578]
Интересные статьи,новинки гаджетов и различных технологий, факты, явления и т.п., на фото и видео.
Редакторы [56]
Программы для создания файлов справки, книг или журналов в форматах HTML-справка (CHM), веб-справки, PDF и документах Word,и т.д...
Аудиокниги [50]
Аудио файл, зачитка с книги, запись голоса диктора на микрофон, мультимедиа.
Конвертеры [86]
Программа для преобразования одного формата в другой, формат определяется самим юзером и для определенного конвертера и версии программы.
Обновления [21]
Набор обновлений, исправлений и/или улучшений компьютерной программы, поставляемый в виде единого установочного пакета.
Приложения [36]
Программа, предназначенная для выполнения определенных пользовательских задач и рассчитанная на непосредственное взаимодействие с пользователем.
Рабочий стол [66]
В компьютерной терминологии основное окно графической среды пользователя вместе с элементами, добавляемыми в него этой средой.Обычно на рабочем столе отображаются основные элементы управления графической средой и, опционально, какое-либо фоновое изображение.
Справочники [11]
Издание практического назначения, с кратким изложением сведений в систематической форме, в расчёте на выборочное чтение, на то, чтобы можно было быстро и легко навести по нему справку.
Реаниматоры [17]
Вобщем лекарство для определенного продукта компьютерного софта, системы, и тому подобное, таблЭтка!
Все для Web... [43]
Все для веб-сайтов,дизайнеров,веб-мастеров и не только...
Вёрстка сайта. [4]
Вёрстка веб-страниц — процесс формирования (вёрстка) веб-страниц в текстовом либо WYSIWYG-редакторе, следующий этап после веб-дизайна; а также результат этого процесса, то есть собственно веб-страницы. Табличная вёрстка. Ранее была основным методом вёрстки, но и сейчас широко применяются в самых разных случаях. С помощью таблиц делают рамки, задают модульные сетки, создают цветной фон, выравнивают элементы и т. д. Слои использовались в браузере Netscape (тег ), и представляли собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя[источник не указан 386 дней]. Скрипты при этом позволяли изменять параметры слоя динамически. Блочная вёрстка Вёрстка при помощи блоков (тег
) и описывающих их таблиц стилей (CSS). Реализует концепцию семантичной вёрстки. До недавнего времени в качестве основных инструментов верстки выступали таблицы и фреймы (фреймы, ввиду их некоторых проблем[1], уходят в прошлое: например,...
Reader, Viewer [32]
Программы для просмотра файлов в формате .djvu, PDF...
Полезный софт [83]
Совокупность программ системы обработки информации и программных документов, необходимых для эксплуатации этих программ.
Антивирусники [13]
Ну тут тоже надеюсь все понятно... скажем...Каспер, реально рулит!!!
Журналы и книги [282]
Журналы и книги в помощь домашнему мастеру,разработчику,дизайнеру, садоводу, и.т.д...
Гаджеты, виджеты... [6]
Устройства с ограниченными задачами...
Программирование [15]
Спектр инструментальных средств, необходимых для программирования и эксплуатации систем управления, построенных на основе программируемых контроллеров...
Драйвера и утилиты [49]
Драйвер-это компьютерная программа, с помощью которой другая программа (обычно операционная система) получает доступ к аппаратному обеспечению некоторого устройства,а утилита-компьютерная программа, расширяющая стандартные возможности оборудования и операционных систем, выполняющая узкий круг специфических задач.
Анечкина страничка [435]
Книжки, брошюры, журналы мод, по вязанию, оригами, кулинария, Amigurumi, и все такое интересное...
Софт для музыкантов [33]
Программы для создания и редактирования музыки.
Полезные программы [103]
Программы, которые могут оказаться вам полезными.
Утилиты и плагины... [17]
Это сборник программ, утилит и плагинов, встроенных в оболочку различных программ...
Худ. литература, Ликбез [607]
Вид искусства, использующий в качестве единственного материала слова и конструкции естественного языка.
Видео курсы/Аудио курсы [90]
Разные визуальные и аудио уроки.
Курсы иностранных языков [4]
Для полиглотов, и не только!
Система, драйвера и утилиты [95]
Это компьютерная программа, с помощью которой другая программа (обычно операционная система) получает доступ к аппаратному обеспечению некоторого устройства. Утилиты предоставляют доступ к возможностям (параметрам, настройкам, установкам), недоступным без их применения, либо делают процесс изменения некоторых параметров проще (автоматизируют его).
Графика, дизайн, 3D, Photoshop [294]
Графические редакторы,программы интерактивной визуализации 3D сцен и моделей, плагины и т.д....
Скрипты для UCOZ и не только... [11]
Высокоуровневый язык программирования для написания сценариев — кратких описаний действий, выполняемых системой.
Фильмы, мультфильмы, концерты [166]
Разные жанры.



Теги/Tags


Профиль/Profile


Друзья/Friends

RadioVolna.Net - лучшее радио 2015
❤ Radio-FeelingFloyd


❤ Radio-FeelingFloyd


» »

Создание двух-колоночного макета на дивах. Блочная верстка DIV.
19.07.2014, 14:41


Каждый из элементов макета мы помещаем в свой контейнер DIV, присваиваем ему уникальный ID или Class, для которого в файле CSS добавим ряд своих свойств, описывающих внешний вид и положение данного контейнера на странице. Кроме этого, все контейнеры с элементами макета мы поместим в один общий контейнер, который позволит нам регулировать положение всего макета на странице: задать ширину макета, выравнивать макет относительно края страницы и другое.

Итак, вам нужно будет создать и сохранить в текстовом редакторе или же в любом специализированном веб-редакторе (например Dreamweaver) два пустых файла index.html и style.css. Начнем, с написания HTML кода в файле index.html. Вы уже, наверное, знаете, что в любом HTML файле присутствуют исходные обязательные элементы, которые выглядят примерно так:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Cтруктура HTML кода, создание простого двух-колоночного макета на дивах. Блочная верстка DIV.</title>
</head>
<body>
</body>
</html>


Как видно по коду в шляпе (head) присутствует ссылка на загрузку стилей:


<link href="style.css" rel="stylesheet" type="text/css">


Эта строка указывает браузеру, где ему искать и как называется файл стилей каскадных таблиц, который нужен браузеру для корректного отображения макета. В данном примере, файл каскадных таблиц стилей — style.css, а искать его нужно в той же папке, где лежит файл index.html.

Почему именно в той же папке? Потому, что если вы не прописываете никакого другого пути до файла, а указываете только его название, то браузер будет искать этот файл в той же папке, где лежит исполняемый сейчас файл, в моем примере это index.html. То есть отсутствие пути до файла CSS будет равносильно тому, как если прописать путь до файла STYLE.CSS в виде:



<link href="style.css" rel="stylesheet" type="text/css">


Но первый вариант записи универсальный, т.к. там напрямую не указывается путь до папки с файлами, а значит можно будет поместить файлы index.html и style.css в другую папку.


Обозначим индетификаторы для блоков DIV 

Создадим четыре контейнера для всех частей нашего макета: левой колонки, шапки, области для контента, подвала и заключим их в один большой div-контейнер. Внутрь дивов для частей макетов можно заключить для названия этих блоков макета. Все это нужно писать между открывающим и закрывающим тегами BODY. Получится примерно такой код index.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (DIV верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">

<div id="header">Шапка</div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>

</div>
  </body>
</html>


Замечу, что индентификаторы ID должны быть уникальными, не повторяющимися. Если понадобится использовать одно и тоже свойство для множества дивов следует использовать классы — class=»имя_класса». ID и Class можно использовать параллельно например:


<div id="content" class="one">Содержимое страницы</div>


Сразу за тегом BODY мы прописали открывающий тег основного контейнера c id:


<div id="maket">


Потом для этого ID, в style.css, мы пропишем свойства, позволяющие определить размер и выравнивание контейнера. После открывающего тега основного div-контейнера мы прописали код четырех контейнеров, которые станут элементами макета.


<div id="header">Шапка </div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>


Всем этим макетам мы определили свои индивидуальные ID, для которых в файле syle.css мы пропишем свойства, настраивающие размер и взаимное позиционирование контейнеров. Для наглядности, внутри этих контейнеров прописываем их назначение. В конце, перед закрывающим тегом BODY, следует закрыть тег основного контейнера:


</div>


Если открыть созданный нами index.html в браузере, мы увидим просто перечисление в столбик названий частей макета. Все получилось именно так, как мы и хотели — четыре контейнера заключены в одном основном контейнере. Для того чтобы все выглядело как структурной схеме следует перейти к описанию свойств каждого блока-контейнера, их позиционирование относительно друг друга.


Прописываем CSS свойства, позволяющие задать размер для нашего двух-колоночного макета и выравниваем его по центру 

Открываем в удобном для вас редакторе файл style.css и прописываем стили для див-контейнеров. Сначала в этом файле стоит прописать правило для тегов BODY и HTML, которое позволит сбросить отступы от внутренних и внешних границ, для соблюдения кроссбраузерности:


body, html {margin:0px;padding:0px;}


Макеты для сайта могут быть фиксированной ширины, например 950px, а могут быть и резиновым — ширина макета подстраивается под разрешение экрана посетителя вашего сайта. Второй вариант, резиновый макет, часто используется на форумах, а для сайтов чаще всего применяют макет фиксированной ширины. Особенно это актуально сейчас, с появление широкоформатных мониторов с широким разрешением экрана.

Для основного Div-контейнера пропишем ряд свойств в style.css, которые позволят создать макет фиксированной ширины 800px и выровнять макет по центру относительно краев экрана. В index.html для основного контейнера обозначен ID — maket:



#maket {width:800px;margin:0 auto;}


Обозначения:
#maket — селектор или по-другому — имя стиля, говорит о том, что данная запись в CSS будет применена только к контейнеру, в котором прописан ID=»maket» . В фигурных скобках записываются свойства CSS. Общий синтаксис записи CSS выглядит так:



Селектор { свойство1: значение; свойство2: значение; ... }


Код CSS будет работает вне зависимости от регистра символов, переноса строк, пробелов или табуляции — в общем, условное оформление не принципиально, пишите так, как вам будет удобнее.


width:800px; — задает ширину для основного контейнера
margin:0 auto; — позволяет выровнять основной контейнер посередине относительно левого и правого края экрана.



Свойство margin предназначено для задания отступов от внешних границ контейнера до соседних элементов. В данном примере основной контейнер является самым внешним элементом макета, поэтому свойство margin будет задавать отступ от границ основного контейнера до границ экрана браузера.

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



После записи всего вышеперечисленного style.css выглядит так:


body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}


Сохранив изменения и открыв index.html в браузере увидим, что теперь ширина макета стала равна 800px и макет выровнялся по центру относительно правого и левого краев экрана.

Для корректного отображения этих свойств CSS, для выравнивания двух-колоночного макета по центру в старых версиях браузеров следует добавить следующие свойства:



body, html {text-align:center;}
#maket {text-align:left;}


Изменим цвет фона для внутренних DIV-контейнеров, формирующих наш двух-колоночный макет, ограничиваем размер левой колонки 

Изменим цвет фона блоков, с помощью специально предназначенного для этого свойства CSS background-color. Цвета задаются в кодовом выражении, которое начинается со знака решетки. Например:


#header{background-color:#C0C000;}
#left{background-color:#00C0C0;}
#content{background-color:#8080FF;}
#footer{background-color:#FFC0FF;}


Далее, по структурной схеме, приведенной в начале статьи, header должен у нас занимать всю ширину макета, а блок left должен иметь ограниченную ширину. Чтобы блок content располагался не снизу, а справа от блока left его следует прижать и задать обтекание слева. Пропишем это в css:


#left{background-color:#00C0C0;
width:200px;}
#left{background-color:#00C0C0;width:200px;
float:left;}


Подвал не должен обтекать левую колонку справа, он должен располагаться в самом низу макета и занимать всю его ширину. Из-за того, что включено обтекание блока left всеми другими блоками все последующие блоки начинают прижиматься к левому краю шаблона. Чтобы это избежать следует указать отступ для блока content от края шаблона равный ширине блока left. При увеличении высоты левой колонки, подвал, блок footer начинает ее обтекать, так как в style.css для блока left задано обтекание с помощью свойства float:left;. Чтобы этого избежать для этого блока следует ввести очистку обтеканий clear:both.


#content{background-color:#8080FF;
margin-left:202px;}
#footer{background-color:#FFC0FF;
clear:both;


Полный код примеров


index.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Основы блочной верстки (DIV верстки)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка</div>
<div id="left">Левая колонка</div>
<div id="content">Содержимое страницы</div>
<div id="footer">Подвал</div>
</div>
  </body>
</html>


style.css:


body, html {margin:0px;padding:0px;}
#maket {width:800px;margin:0 auto;}
#header{background-color:#C0C000;}
#left{background-color:#00C0C0;width:200px;float:left;}
#content{background-color:#8080FF;margin-left:202px;}
#footer{background-color:#FFC0FF;clear:both;}


Условная разметка с css:




Пишите комментарии, до встречи!







HTML-редактор. Генератор кода ajax. Комментарий.

+5



Не стесняйтесь делиться записью в социальных сетях, жмите "мне нравится" поделись с друзьями если понравился материал. В случае, если файл удален с файлообменника или программа не выполняет свои функции, оставьте комментарий ниже. Помогите другим с выбором! Или оставьте своё мнение. Следите за новостями в соцсетях и .



  • Site Language
Выбрать язык / Select language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish













| Категория: Вёрстка сайта. | Добавил: Dzheykey | Теги: Div, Создание двух-колоночного макета, на дивах, блочная верстка, сайт
Просмотров: 324 | Загрузок: 0 | Рейтинг: 5.0/5


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
bestarchive

Язык/Lang

Eng Rus


Совет/Advice

Для корректного просмотра фильмов
Вам понадобится:

v.




✍ Подпишитесь на RSS.     

Друзья сайта

I Love Pink Floyd

Топ пользователей

Именинники


На bestarchive



200stran.ru: показано число посетителей за сегодня, онлайн, из каждой страны и за всё время Рейтинг@Mail.ru

bestarchive.ucoz.com Tic/PR

Bestarchive ©2010-2017