Урок ЧЕТВЕРТЫЙ "как сделать сайт" для домохозяек

[Мышкевич]

Спойлер

Итак, картинки.

Картинки можно вставить в html просто в текст и можно вставить бекграундом в css.

В html мы вставляем их так
<img src=""> без закрывающего тега.

В css вставляем так
background:url(..);

src или url - это адрес ссылки, где картинка находится. Можно указать внешнюю ссылку, можно на внутреннюю папку с картинками. Надежнее на внутреннюю, внешние могут по разным причинам пропасть (хозяин удалит картинку, удалит сайт, например).

Возьмем например вот эту картинку https://static.pexels.com/photos/15365/pexels-photo.jpg и добавим ее перед текстом в html.
<img src="https://static.pexels.com/photos/15365/pexels-photo.jpg»>

Если мы сейчас заглянем на сайт, то увидим, что она огромна. Мы конечно же добавим к картинке класс или сразу зададим ширину-высоту в html, но когда мы будем заходить на эту страничку, картинка будет подгружаться в полном размере и только потом отображаться. Если открывать на телефоне с мобильного интернета то это может оказаться чувствительно.
Так что лучше картинку подгонять под нужный размер хотя бы примерно, даже если мы хотим сделать чтобы по клику картинка вылезала на весь экран в хорошем разрешении - мы просто будем держать две картинки.
Поэтому эту картинку мы сохраним, переименуем в bird.jpg, например, и изменим размер с помощью фоторедактора-онлайн
(по поиску в гугле их масса, ну пусть https://avatan.ru/)
Это на самом деле нам не очень обязательно (ресайзить эту картинку) - дальше я уже подготовленными буду пользоваться.

Итак, в html
<img class="img_article" src="images/bird.jpg»>
В css задаем высоту и ширину (если у нас картинка по какой-то причине будет долго грузиться чтобы текст не лез в разные стороны, добавим обтекание, рамочку и отступ, чтобы не липла картинка к тексту.

.img_article{
width:200px;
height:200px;
float:left;
border:3px solid black;
margin:3px;
}

А теперь вставим картинку в бекграунд к body. Обычно если хочется вставить в фон что-то пестренькое, используют паттерны. Паттерн это повторяющийся рисунок по принципу обоев домашних. Так как это и картинка и весит мало, просто повторяется по фону и все. Большая и тяжелая картинка на заднем фоне будет не так резво подгружаться и с мобильника будет буксовать. Можно конечно отключить картинку для мобильной версии, но этих устройств сейчас столько……

Для того, чтобы не отвлекаться особо на подготовку картинок, я сходила на какой-то сайт и выдрала оттуда паттерн на боди бекграунд и для странички. Они там крупноваты как по мне, но нам для тренировки пойдет.

Итак в папку images которую мы где-то в самом начале создали сложим картинку с птицей,

http://5.firepic.org/5/images/2015-11/18/fktfaw4p0fkd.jpg отсюда сохраним бекграунд для боди и назовем его bg_wood.jpg
http://5.firepic.org/5/images/2015-11/18/ma4bp79rja0v.png отсюда бекграунд для листка страницы и назовем его bg_paper.png
http://5.firepic.org/5/images/2015-11/18/g73siahwe57v.png это будет для бокового оформления чуть позже hand.png называем

Так как файл со стилями у нас находится в отдельной папке, то адрес для картинки будет прописываться чуть по другому -
background:url(../images/bg_wood.jpg);
две точки перед папкой с картинками означают, что сама папка находится на один уровень выше от файла со стилями. В хтмл файле отсчет велся от самого хтмл файла. Ну позже начнем прописывать ссылки для других страниц, будет понятнее.

Этот бекграунд добавляем к боди, предыдущий можно заккоментировать или удалить. В css все, что относится к коментариям (то есть не читается браузером) заключается между /* и */ Так можно оставлять и просто комментарии для себя и какие-то свойства, которые еще не решил точно удалять или пригодятся.

И для main добавим бумажную картинку
background:url(../images/bg_paper.png);

Автоматически наш бекграунд повторился по горизонтали и по вертикали насколько хватило места.

Теперь мы справа сделаем что-то вроде саб-меню, и нам надо разбить на две части контейнер main. У нас будет слева текст с картинкой а справа меню. В хтмл заключим текст с картинкой в див и присвоим класс content, а выше организуем новый див с классом submenu. Мы сделаем несколько стилей оформления и дадим там на них ссылки.
<div class="submenu">
<a href=''> style 1</a>
<a href=''>style 2</a>
<a href=''>style 3</a>
</div>
<div class="content">
<img class="img_article" src="images/bird.jpg">
Lorem Ipsum - это текст-«рыба»…….
</div>
И в css
.content{
padding-top:40px;
}
Это чтобы текст был не особо выше картинки справа.

.submenu{
width:300px;
float:right;
background:url(../images/hand.png);
background-repeat:no-repeat;
height:100%;
}

Зададим обтекание, чтобы встал контейнер рядом. Задаем высоту 100 процентов, чтобы колонка была до конца занята (иначе текст после окончания бокового блока займет опять всю ширину)
Мы задаем фиксированную ширину этому контейнеру, потому что если мы сейчас посмотрим на нашу страничку, то увидим, что на картинке есть окошки, куда нам надо загнать наши ‘style 1’, ‘style 2’, ‘style 3’. Для этого мы зададим position:absolute; для этих слов, запаковав каждый в отдельный контейнер предварительно. В отдельный - потому что у каждого будет своя позиция относительно высоты и ширины картинки.

<div class="submenu">
<div class="style1"><a href="">style 1</a></div>
<div class="style2"><a href="">style 2</a></div>
<div class="style3"><a href="">style 3</a></div>
</div>

Что такое position вообще. Это то, как элемент отображается относительно других элементов на странице.
Есть несколько значений, http://htmlbook.ru/css/position
Мы сейчас добавим position:absolute для того чтобы можно было подвинуть слова просто задав им значения top и right и position:relative; для submenu чтобы top и right отсчитывать от края блока submenu а не от края страницы.

.submenu{
width:300px;
float:right;
background:url(../images/hand.png);
background-repeat:no-repeat;
height:100%;
position:relative;
}
.style1, .style2, .style3{
position:absolute;
}
Ну и прежде чем выставить значения top и right для абсолютно-позиционированных элементов добавим к main

text-align: justify;
line-height: 2em;

line-height это межстрочное расстояние у текста (иначе мои значения не поставят точно элементы по окошкам в картинке - а я в конце красоту наводила немного и после пришлось корректировать под новое значение межстрочного расстояния)
text-align: justify; просто выравнивание текста по ширине

Итак, position:absolute;
Если сейчас мы посмотрим на страничку то увидим что наши style1, style2, style3 наложились одно на другое. Ну в этом и суть абсолютной позиции - другие элементы позиционируются как будто их нет и накладываются поверх.

.style1{
top:121px;
right:225px;
}
.style2{
top: 141px;
right: 163px;
}
.style3{
top: 124px;
right: 98px;
}

Впрочем, с помощью инструмента разработчика в браузере можно точно быстро пододвинуть все как надо просто установив курсор на значение top или right в стилях и стрелками вверх/вниз подогнать.

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

Теперь мы подумаем о небольших экранах типа телефонных, где вся эта красота будет скорее мешать.

Мы можем с помощью @media поменять некоторые элементы. Мы сделаем чтобы наши ссылки на стиль 1,2,3 шли просто друг за другом, а ниже текст при размере экрана меньше 600px. Медиа записывается так

@media(max-width: 600px){}

И внутри указываем для каких классов и что меняется

@media(max-width: 600px){

.submenu{
float:none;
margin:0 auto;
background:none;
height:initial;
margin-bottom:30px;
text-align:center;
}

.style1, .style2, .style3{
position:relative;
right:0px;
top:0px;
}
}

То есть для сабменю убрали все, только поставили по центру и сам блок, и текст внутри. Свойство height:initial; возвращает высоту к высоте блока по умолчанию (у нас ранее было 100 процентов-то есть до конца страницы) - ИЕ не поддерживает, вместо этого можно поставить height:100px;

Теперь сделаем чтобы пункт основного меню менял цвет при наведении мышки.
Для этого используется псевдокласс hover, который приписывается к самому блоку или классу через двоеточие и там описываем, что именно меняется. В нашем случае это li

li:hover{
background:white;
}

Теперь мы видим что при наведении мышки цвет изменился. Ховер можно добавлять к любому объекту.
http://htmlbook.ru/css/hover

Теперь мы сделаем три странички под style1,2,3 и сделаем ссылки.

В нашей папке «Мой сайт» сделаем три папки «style1», «style2» и «style3»

В папку «style1» скопируем наш index.html и styles.css, переименуем их в style1.html и style1.css соответственно. Ну и заведем папку images1

Открываем style1.html в блокноте и правим там ссылку на стили
<link rel="stylesheet" type="text/css" href="style1.css»/>
Так как они теперь в одной папке, то адресовать к папке не нужно, просто имя.

Все наши картинки послетали, если мы заглянем в style1.html через браузер, так как ссылки, которые мы ставили раньше они ведут не туда, но исправлять не будем, у нас будут новые картинки. Там и исправим.
Сделаем сразу ссылку на главную страницу, и там где у нас в меню Главная пропишем
<li><a href="../index.html">Главная</a></li>

Ссылка ведет на уровень выше и к файлу index.html

Теперь в файле index.html пропишем ссылку к этой странице
<div class="style1"><a href="style1/style1.html">style 1</a></div>

И саму на себя - где Главная пишем такую же ссылку только без точек
<li><a href="index.html">Главная</a></li>

Аналогично в файле style1.html делаем ссылку на саму себя
<div class="style1"><a href="style1.html">style 1</a></div>

В images1 сложим опять картинки
http://5.firepic.org/5/images/2015-11/18/1tbrqr0gch9w.jpg переименуем в bouquet.jpg это для картинки в тексте
http://5.firepic.org/5/images/2015-11/18/kdb5ud9om3gy.png переименуем в top.png это пойдет в хедер
http://5.firepic.org/5/images/2015-11/18/h5vls0ow3unw.png переименуем в flower4.png это будет украшением меню
http://5.firepic.org/5/images/2015-11/18/c6ururq5xbf1.png переименуем в circle.png это вместо руки
http://5.firepic.org/5/images/2015-11/18/mf4g78zm3ekq.png переименуем в dot.png это в боди-бекграунд

Открываем теперь блокнотом style1.css и начинаем править.

body
меняем бекграунд
background:url(images1/dot.png);

header
добавляем бекграунд и указываем повтор по оси Х
background:url(images1/top.png);
background-repeat: repeat-x;

img_article
поменяем цвет рамки
border:3px solid #c7ddb5;

Для .style1, .style2, .style3 уберем все стили

submenu
меняем бекграунд
background:url(images1/circle.png); ;
background-repeat:no-repeat;
добавляем
text-align: center;
и убираем позиционирование.

Из ul убираем бекграунд

Теперь идем в style1.html и там заменим картинку в тексте и добавим цветочки к меню. Цветочки можно и бекграундом, но у нас сами блоки не одинаковые, они будут на разном расстоянии от текста.
Итак к списку с меню перед <a> добавляем <img src="images1/flower4.png»> то есть так
<ul>
<li><img src="images1/flower4.png"><a href="../index.html">Главная</a></li>
<li><img src="images1/flower4.png"><a href="">О нас</a></li>
<li><img src="images1/flower4.png"><a href="">Контакты</a></li>
<li><img src="images1/flower4.png"><a href="">История</a></li>
</ul>
И картинка в тексте теперь
<img class="img_article" src="images1/bouquet.jpg»>

В style1.css пишем

ul li img{
vertical-align:middle;
}
Это мы обозначили что для картинки, которая у нас в строках списка применить такое свойство. Без запятых так как это не перечисление а именно изображения внутри определенного контейнера. Использовали бы класс - ставили бы класс вышестоящего контейнера так же без запятой.

Ну и ховер для меню поменяем на зеленый
li:hover{
background:#c7ddb5;
}

Мои результаты

Спойлер

Градиенты и картинки берутся на всяких стоках, например вот пара подборок
https://bootstrapbay.com/blog/free-stock-photos/
http://bestuxdesign.com/trend/top-10-best-websites-free-stock-photos/

Но на картинках особо зацикливаться не стоит, нынче в моде минимализм :)

[kliviya]

Теперь сделаем чтобы пункт основного меню менял цвет при наведении мышки.Для этого используется псевдокласс hover, который приписывается к самому блоку или классу через двоеточие и там описываем, что именно меняется. В нашем случае это li li:hover{background:white;}

Танюш, мы пишем только в стили
li:hover{
background:white;
}
или должны еще что то написать в хтмл?

Добавлено спустя 6 минут 3 секунды:
сама спросила, сама и отвечу
в хтмл ничего не пишем, только в стили)))
просто я домашнее задание с урока3 "решила" более "длинным" способом, а так конечно короче и удобнее)))

[Мышкевич]

kliviya,

[kliviya]

Открываем style1.html в блокноте и правим там ссылку на стили <link rel="stylesheet" type="text/css" href="style1.css»/>

правильно понимаю, что правим в этом предложении
<div class="style1"<a href="">style 1</a></div>
т.е. получается вот так
<div class="style1"<link rel="stylesheet" type="text/css" href="style1.css»/>style 1</a></div> ???

[Мышкевич]

kliviya, не, это голова странички, head которая, где шрифты и тп. Там же и ссылка на файл для стилей. Вот там надо сменить адрес, потому что для этой странички другой css файл

[kliviya]

Мышкевич, спасибо)
а то чувствую, что не туда пытаюсь прилепить)

[Мышкевич]

Да вижу уже что поназывала все одинаково, немудрено запутаться

[kliviya]

Теперь идем в style1.html и там заменим картинку в тексте и добавим цветочки к меню.

на этом моменте застряла... в меню вместо цветочков вижу крестики, а картинки в тексте вообще не вижу на странице (наверное, тоже где-то крестиком показана)
видимо, я устала... продолжу завтра

[kliviya]

Сделаем сразу ссылку на главную страницу, и там где у нас в меню Главная пропишем <li><a href="../index.html">Главная</a></li>

здесь все получилось

Теперь в файле index.html пропишем ссылку к этой странице<div class="style1"><a href="style1/style1.html">style 1</a></div>

Танюш, а вот здесь что-то не получается... т.е. я все записала куда надо, но при наведении на style 1, style 2, style 3 вижу, что эти элементы вообще не показаны ссылками... чего то не пойму, в чем дело(

Добавлено спустя 15 минут 4 секунды:
тихо сам с собой нашла свою ошибку
вопрос снят

[Мышкевич]

kliviya, не успела даже прочитать а уже сама справилась
С крестиками вместо картинок разобралась?

[kliviya]

Мышкевич, Тань, помоги плиз
какой командой нужно выровнять текст style 1, style 2, style 3 по вертикали картинки...
text-align: center - выровняли по горизонтали, вот он и находится по центру наверху картинки.
Видимо, плохо усвоила предыдущий урок, ведь там уже проходила "выравнивание по вертикали".
насолько понимаю, это у нас не таблица, так что vertical-align:middle сюда не подходит.
padding - мой "конек" предыдущего урока, но и с ним ничего не могу придумать.

вот мои установки для сабменю:
.submenu{
width:300px;
float:right;
background:url(images1/circle.png);
background-repeat:no-repeat;
height:100%;
text-align:center;
}

Добавлено спустя 7 минут 2 секунды:

С крестиками вместо картинок разобралась?

да, пришлось поиграться) и тебе расскажу)
я брала копировала твой текст

<img src="images1/flower4.png»>

<img class="img_article" src="images1/bouquet.jpg»>

и вставляла в свой код, и в конечном итоге видела крестики)
вобщем: у тебя картики находятся в "разных кавычках", потому и результата я не видела) если бы не ленилась и набирала сама, то может быстрее бы и получила желаемый результат)))

[Мышкевич]

kliviya, padding'ом, я тоже больше ничего не придумала. Опять же размер картинки и блока фиксированный, так что в % смысла нет, в пикселях.
padding-top: 100px;

Разные кавычки-я уроки пишу в 'заметках', у мака такой простенький текстовый редактор, и он мне вечно те кавычки коверкает как хочет. Надо поискать кстати где это самоуправство отключить можно, если можно

[kliviya]

Мышкевич, спасибо, сейчас попробую)
а кавычки пусть коверкает, нужно самим набивать а не копировать)))))

[Мышкевич]

Да нашла уже эту их фишку, 'смарт-кавычки' там по умолчанию были. Что-то они не особо смарт, половину заменит половину нет
Ну да, может и действительно не отключать

[kliviya]

мои результаты урока

Спойлер

Танечка, спасибо за урок

[kliviya]

что-то здесь совсем тихо...
"закрепила" сегодня результаты урока №4, сделала еще одну страничку

Спойлер

[cybd]

kliviya, молодец. Еще бы код показала.

[kliviya]

cybd, а код это файлы хтмл? или css тоже? решила все 6 файлов сюда копировать, но что-то слишком много текста) насколько я понимаю, в этом случае уже нет возможности воспользоваться https://jsfiddle.net/?

[Мышкевич]

kliviya, да у меня затык с хостером (хотела в следующем рассказывать как выложить в интернет) - нашла подборку бесплатных доменов, и даже бесплатного хостера, а хостер не дал автоматом бесплатный домен влепить, еще и за мои многократные попытки верификацию стал проводить раз в сутки. Это надо видимо через техподдержку делать (судя по сплетням на их же форуме), но это не вариант конечно, как для уроков, возмем другого просто с пробным бесплатным периодом (как раз с утра от тех ответ прилетел на очередной отказ в верификации).

Добавлено спустя 2 минуты 48 секунд:
cybd, там жеж картинки, это надо внешние ссылки делать

[kliviya]

Мышкевич, столько новых слов в твоих предложениях) пошла гуглить)