Как сделать сайт в программе Dreamweaver ?

Что такое float!?

Float  - элемент, который обозначает  расположение объекта. Либо слева, либо справа.  

Мы возьмём новую страницу, создадим две таблицы – дива. Присвоим им класс разные названия.

Коды с данной страницы см.здесь - Тема CSS, № 1.

Новые шрифты для сайта – качаем отсюда!

fpoat-primer-left

fpoat-primer-right

Код:

<div class="fpoat-primer-left">Div –позиция слева</div>

<div class="fpoat-primer-right">Div – позиция справа </div>

И там же на старнице создадим два разных стиля, в них отличается лишь значение  Float.

1.Стиль Float- слева:

.fpoat-primer-left { float: left; /* Обтекание по правому краю */

background: #fd0; /* Цвет фона */

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin-right: 20px; /* Отступ справа */

width: 20%; /* Ширина блока */

2. Стиль Float- справа:

.fpoat-primer-right { float: right; /* Обтекание по левому краю */

background: #fd0; /* Цвет фона */

border: 1px solid black; /* Параметры рамки */

padding: 10px; /* Поля вокруг текста */

margin-right: 20px; /* Отступ справа */

width: 20%; /* Ширина блока */

Как будет выглядеть наши div-ы, с калассами в котротых прописано свойство float смотрим..

Float в программе Dreamweaver.

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

Смотрим на нашу страницу.

Поэтому мы и отредактируем свойства Float в программе Dreamweaver.

Выделим интересующий нас див и смотрим информацию по нему.

Для редактирования float данного дива нам нужно открыть файл css - style.css.

Что такое float!?
Открыли файл  css нажимаем  ctrl + F, и вбиваем название нашего дива – rightPan – нажимаем найти далее…

Что такое float!?
Из всех свойств нас интересует

float:left;

Меняем его на

float:right;


Что такое float!?

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

Что такое float!?
А теперь смотрим свойства float:left; и float:right;

Как переводится Float.

Глагол.
  1. плавать, парить, всплывать, всплыть
    (swim, soar, pop, resurface)
    • float in water — плавать в воде
    • float pallet — парящая платформа
  2. плыть, поплыть, проплывать, проплыть, уплыть
    (swim)
  3. разместить
    • float bonds — разместить облигации
  4. вплыть
Существительное.
  1. поплавок
    • with a float — с поплавком
  2. терка
Причастие.
  1. плавающий
    (swimming)
Прилагательное.
  1. поплавковый
    (float-type)
    • float switch — поплавковый выключатель

Свойства Float.

Если вы ещё не совсем разбираетесь в коде, в его нюансах, то не расстраивайтесь! Опыт со с временем придёт!

 И вам покорятся не только свойства Float, но и все другие! Ивы будете щелкать код как семечки!

Вот и всё!

Удачи и лёгкого понимания всех свойств кода!!!

А теперь самое время развлечься!

Улучши поведенческий фактор на своём сайте!

Если понравится игра, то можно забрать код для своего сайта отсюда!