Всем привет, меня зовут Кейта. И сегодня мы с вами будем писать один из самых простых сайтов на HTML. Давайте же приступим!
Результат моей работы(ВНИМАНИЕ! НЕ РЕКЛАМА!)
http://cafe.keita.fun(Домен неактуален)
Перед переменными формата color и прочие должны ставятся знаки #
Создание папок и логотипа
Для начала нам нужно скачать и установить программу PhotoShop CS6 , открыть редактор и установить размеры полотна "350х100" пиксели, фон прозрачный. Вообщем, сделайте логотип. Также, нарисуйте ваш номер телефона. И так, давайте приступим к созданию самого первого элемента.
Создайте папку www , в ней папку "Мой сайт" например. Внутри создайте папку CSS, в этой папке создайте папку images, а ещё в папке CSS создайте блокнот(.txt). Откройте его, выберите "Сохранить как" - установите тип "Все программы", назовите его style.css , затем сохраните в ту же папку.
Далее, вернитесь в папку "Мой сайт", создайте там ещё один блокнот(.txt), сделайте с ним тоже самое, только назовите его index.html , также не забываем ставить кодировку: UTF-8 !
И так, мы сделали основные папки, теперь нам следует приступить к коду
Начинаем писать HTML и CSS код
Откройте файл index.html нажав на него правой кнопкой мыши, также, рекомендую вам использовать любой другой текстовой редактор. Я буду использовать "Sublime TEXT 3", также, не реклама. Скачайте его и установите, откройте, выберите папку где находится ваш сайт
Нажал "Выбор папки", после все файлы добавились в левое меню. Открываю файл index.html, затем вношу туда такой код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Кофейня TEST</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
</div>
</body>
</html>
Нажимаю CTRL+S , затем открываю папку "CSS" в левом меню. Ищу файл style.css, открываю его двойным кликом. В этот файл вносим следующее:
/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
Нажимаю CTRL+S, затем сворачиваю приложение, открываю папку с моим сайтом и открываю файл index.html дважды нажав по нему левой кнопкой мыши. У вас должна открыться страничка в браузере. Нажмите F5 навсякий случай, вы перезагрузите страницу и увидите ЭТО:
Далее, я написал такой код, где я написал "<div id="basic"> , ниже пишем:
<div id="head-site">
<img src="css/images/logo.png" alt="logot" class="logo">
<img src="css/images/telefon.png" alt="telefont" class="telefon">
</div>
Поместите ваш логотип и номер телефона в разрешении .png в папку images, которую мы создавали в папке css. Назовите логотип "logo" , а номер телефона "telefon.png". Нажмите CTRL+S, теперь идём писать CSS.
Добавляем следующий код ниже в файл style.css:
/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}
Нажимаем CTRL+S, далее снова переходим снова на нашу страничку и нажимаем F5. Смотрим результат и удивляемся.
Верхнее меню сайта
И так, давайте приступим, по ходу я вам всё объясню. Пишем в файл index.html следующий код после последнего написанного </div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Забронировать столик</a></li>
<li><a href="№">Наши клиенты</a></li>
<li class="none-bg"><a href="">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
Обратите внимание, эти пункты вы можете заменить на свои и редактировать количество тоже! Просто убрав одну из строк!
Нажимаем CTRL+S , теперь переходим в файл style.css
/*Верхнее меню сайта*/
top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:fff; background:ff9c00;}
Нажимаем сохранить (CTRL+S), переходим снова на нашу страничку в браузер и нажимаем F5. Теперь мы увидим новое меню. Пункты меню вы можете сменить на свои, также как в будущем(для себя) делал я.
Левое меню для сайта
<!-- Верхнее меню сайта -->
<div id="menu-top">
......
</div>
После этого кода сверху, мы должны будем добавить в index.html это:
<!-- Left menu and keita content -->
<div id="content">
<!-- content right keita -->
<div class="right">
<h1>Кофе Американо</h1>
<p>Американо – один из популярных кофейных напитков в мире. В его состав входит эспрессо разбавленный водой. При разбавлении эспрессо водой, напиток получается не такой крепкий и большего объема. Достаточно простой рецепт, но история его появления намного интересней. </p>
<p>Начнем с того, что в американцы любят некрепкий кофе. Поэтому у них популярен фильтр-кофе. Это кофе приготовленный путем проливания горячей воды через кофе и фильтр. Вода проливается вручную, а фильтр используется для фильтрации мелких частиц молотого кофе.</p>
<img src="css/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="css/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="css/images/img3.png" alt="" title="" />
<p>История американо начинается со времен Второй мировой войны. А именно, когда солдаты из Америки высадились в Италии. Они пытались найти полюбившийся им на родине напиток. У них не получалось, так как в Италии популярен эспрессо. Данный напиток не устраивал американцев своим малым объемом и большой крепостью.</p>
<p>Для решения этой проблемы, итальянцы решили разбавить эспрессо большим количеством воды. Получался некрепкий напиток большого объема, как и нравилось американцам. Назвали же получившийся напиток – американо. Данное название подчеркивало плохой вкус американцев. </p>
<p>Итальянцы и не догадывались, что придуманный ими напиток станет популярен во всей Европе.</p>
</div>
<!-- menu left and left keita content-maker -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="./kofe-airish.html">Кофе Айриш</a></li>
<li><a href="./kofe-amerikano.html">Кофе Американо</a></li>
<li><a href="./kofe-glyase.html">Кофе Глясе</a></li>
<li><a href="./kofe-dippio.html">Кофе Доппио</a></li>
<li><a href="./kofe-kapuchino.html">Кофе Капучино</a></li>
<li><a href="./kofe-kon-panna.html">Кофе Кон Панна</a></li>
<li><a href="./kofe-koretto.html">Кофе Коретто</a></li>
<li><a href="./kofe-latte.html">Кофе Латте</a></li>
<li class="none-bg"><a href="./kofe-lungo.html">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
<div class="myclr"></div>
Где img1.png img2.png img3.png могут быть 3 любые фотографии кофе! Их нужно загружать как и другие фото в папку images
Далее, сохраняем и вносим изменения в конец файла style.css
/*Левое меню и Контент*/
content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color: 4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:4c281e;}
.block-menu {width:240px; border-left:10px solid ff9c00; background:4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}
Сохраняем на CTRL+S , затем переходим на страничку и нажимаем F5
Мы увидим следующее:
Подвал для сайта
Кто не знает, что такое подвал, это такая надпись, кем и когда был сделан сайт, а также адрес расположения веб-студии
В файл index.html вносим следующее в самый низ:
<!-- Подвал -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">ООО “Кофейня” 2015г.<br/>
г. Москва, ул Революционная 1а</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">Создание сайтов веб-студия <a href="№">«Парампампам»</a></div>
</div>
<div class="myclr"></div>
Сохраняем, также не забываем изменять № и некоторые пропуски на #
Далее, файл CSS - style.css , в самый низ вносим:
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
№podval {border-top:10px solid №4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:№ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}
Сохраняем CTRL+S , затем обновляем страницу сайта. Результат такой:
Другие страницы сайта и ссылки меню
Сайт, то работает, но при клике на пункты меню ничего не открывается?
Создайте следующие HTML-файлы в основной папке, они должны содержать название файлов, пункты которых вы легко запомните. Для меня это:
- o-tnas.html – О нас
- assortiments.html – Ассортимент
- otzivis.html – Отзывы
- zabronirovat-stoliks.html – Забронировать столик
- nashi-klientys.html – Наши клиенты
- kontaktys.html – Контакты
- kofe-ayrishs.html – Кофе Айриш
- kofe-amerikanos.html – Кофе Американо
- kofe-glyases.html – Кофе Глясе
- kofe-dippios.html – Кофе Диппио
- kofe-kapuchinos.html – Кофе Капучино
- kofe-kon-pannas.html – Кофе Кон Панна
- kofe-korettos.html – Кофе Коретто
- kofe-lattes.html – Кофе Латте
- kofe-lungos.html – Кофе Лунго
Теперь открываем index.html и вносим следующие изменение в код, где мы указывали пункты меню.
Теперь это будет выглядеть так:
<!-- Верхнее меню сайта -->
<div id="head-top">
<div class="bg-1">
<ul>
<li><a href="./ot-nas.html">О нас</a></li>
<li><a href="./assortiments.html">Ассортимент</a></li>
<li><a href="./otzivis">Отзывы</a></li>
<li><a href="./zabronirovat-stoliks.htm">Забронировать столик</a></li>
<li><a href="./nashi-klientys.html">Наши клиенты</a></li>
<li class="none-bg"><a href="./kontaktys.htm">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
Также, в строчки левого меню вносим поправку, итог:
<!-- menu left and left keita content-maker -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="./kofe-airishs.html">Кофе Айриш</a></li>
<li><a href="./kofe-amerikanos.html">Кофе Американо</a></li>
<li><a href="./kofe-glyases.html">Кофе Глясе</a></li>
<li><a href="./kofe-dippios.html">Кофе Доппио</a></li>
<li><a href="./kofe-kapuchinos.html">Кофе Капучино</a></li>
<li><a href="./kofe-kon-pannas.html">Кофе Кон Панна</a></li>
<li><a href="./kofe-korettos.html">Кофе Коретто</a></li>
<li><a href="./kofe-lattes.html">Кофе Латте</a></li>
<li class="none-bg"><a href="./kofe-lungos.html">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
<div class="myclr"></div>
Сохраняем, теперь с каждым .html нужно проделать практически тоже самое: заменить изображения для каждого .html , затем изменить текст. Библиотеки есть в интернете. Вот так мы с вами сверстали первую страничку для нашего сайтика. В следующей статье вы узнаете как поставить логотип на сайт!
