HTML и CSS. Список уроков.


Урок 01. Создание первой страницы.

Урок 02. Форматирование текста.

Урок 03. Макет страницы.

Урок 04. Добавление изображений.

Урок 05. Ссылки и меню.

Урок 06. Компоновка элементов.

Урок 07.

HTML и CSS. Урок 4. Добавление изображений на сайт.

Для добавления фонового изображения на страницу нам понадобится свойство background-image. Подготовим картинку, создав в папке megaportal папку img и поместим в нее фото мяча небольшого разрешения. Специально выбрано изображение небольшого формата, чтобы наглядно видеть, что же происходит с фоном. В файле style.css напишем свойство для элемента body:

body { background-image: url(img/ball.jpg);    где в () путь к нашей фоновой картинке.
           background-repeat: no-repeat;}

Вот что у нас получилось:

 Свойство background-repeat:  указывает, каким образом будет повторяться рисунок. Может принимать следующие значения.

background-repeat: no-repeat;  без повторений

background-repeat: repeat; повторение по ширине и высоте (значение по-умолчанию)

background-repeat: repeat-x; повторение по ширине

background-repeat: repeat-y;  повторение по высоте

background-repeat: round; чуть деформирует изображения, чтобы они не обрезались

background-repeat: space;  вставляет пробелы, чтобы изображения не обрезались.

Подставив каждое значение, вы наглядно посмотрите как они работают и лучше их запомните.

Также существует возможность точно указать положение нашего фонового мяча используя свойство: background-position: и по-одному значению из ( left, center, right ) и ( top, center, bottom ). Примеры:

 background-position: bottom right;

 background-position: center center;

 background-position: center top; 

Теперь давайте приведем нашу страницу к более привлекательному виду. Для этого скачаем в папку img понравившееся фоновое изображение  и назовем его к примеру fon.jpg  Желательно вибирать изображение большого формата, чтобы все выглядело без границ, если бы изображение повторялось. Изменим значения цветов в файле style.css на понравившиеся. Следует помнить, что создание сайта - процесс творческий, и здесь мы только учимся некоторым техническим азам, позволяющим воплотить Вашу гениальную задумку в жизнь. Вот что у нас получилось в результате изменений.

В селектор класса .blok1 мы добавили свойство text-align: center; который указывает, как распологать весь текст в этом блоке (в нашем случае по-центру).

У нашего мегапортала непременно должен быть логотип. Подготовим изображение в папке img  высотой допустим 40рх ( можно использовать любую другую папку для логотипа, но тогда нужно будеть изменить путь ) и назовем его logo.png На данный момент наш учебный проект состоит из трех блоков, пришло время добавить еще один - в котором разместится наша лого - картинка. Откроем файл index.html и внутри блока 1 создадим еще один класс logo, в котором укажем адрес(путь) к нашей картинке.

    <div class="logo">
            <img src="img/logo.png";>
     </div>  

 

В файле style.css добавим следующие свойства в селектор класса logo

.logo { float: left; padding: 20px 0 0 20px; }  Здесь мы прописали браузеру сместить изображение влево и сделать отступы от границ блока по 20рх сверху и слева. Посмотрим на результат:

 Посмотреть наш проект можно на megaportal.cloudshell.ru В следующем уроке мы научимся добавлять ссылки  и сделаем навигацию т.е меню.


 

 Продолжение: HTML и CSS. Урок 5.

 

 

Параметы