Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

30.03.2017


15:40


16483


8


Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

План:

1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.

Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html»и «style.css».
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск».
Далее выберите «Все программы» => «Стандартные» => «Блокнот».

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Далее нажмите «Файл» => «Сохранить как»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле «Имя файла» напишите «index.html», а не просто «index» (это важно!). Таким способом мы создаем файл с расширением «*.html» для веб-страниц. Далее нажмите на кнопку «Сохранить»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Чтобы создать «style.css»:
кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Вот, что должно получиться у вас в папке «Мой сайт»:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
</head>
<body>
</body>
</html>

Сохраните файл «index.html».

Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями «style.css» к «index.html» перед тегом </head>,пропишите вот такой код:

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

Полный пример:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type"content="text/html; charset=windows-1251">
<link rel="stylesheet"type="text/css"href="style.css">
</head>
<body>
</body>
</html>

Сохраните файл «index.html».
Вот теперь можем создавать сайт.
Начнем с меню.

Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:

<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>

Вот полный пример:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
</body>
</html>

В результате ничего особенного вы не увидите:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы.  Для этого в CSS пропишите:

*
{
margin:0px ;
padding:0px;
}

.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}

Теперь выровняем меню посредине

.menu
{
margin:0 auto;
display:table;
}

Закрасим меню и добавим тень:

.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}

Осталось поменять размер и цвет в названиях меню:

.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

Итак, вот весь CSS стиль для меню:

*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

Смотрим на результат:

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Вставка логотипа

Для логотипа создайте папку «image». В этой папке будут храниться все изображения сайта-визитки.

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу

Залейте в эту папку «image» ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу «logo» и расширении файла «png».
Вот так это будет выглядеть в HTML:

<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
<div class="logo">
<img src="image/logo.png">
</div>

Выровняем лого по центру  и закруглить через CSS:

.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}

.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}

Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:

<div class="content">
<h2>Заголовок</h2>
<p>Очень много текста</p>
<p>У нас самая крутая фирма.</p>
<p>Опять много текста</p>
</div> 

В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы,  выделим блок тенью:

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

Выровняем заголовок по центру, увеличим размер и поменяем цвет:

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

Теперь изменим размер и цвет текста. Добавим отступ для красной строки:

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

Вот весь CSS код для блока «content»:

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:

<div class="footer">
<p><a href="http://stepkinblog.ru">StepkinBlog.com</a> © 2017</p>
</div>

В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:

.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}

.footer a:hover
{
text-decoration: none;
border:0px;
}

Вот так выглядит мой абсолютно весь CSS код файла «style.css»:

*
{
margin:0px ;
padding:0px;
}
.menu li
{
float:left;
list-style: none;
margin:10px 25px ;
}
.blok-menu
{
overflow: hidden;
background: #444;
box-shadow: 0px 13px 17px -6px #000000;
}
.menu
{
margin:0 auto;
display:table;
}
.menu li a
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
text-decoration: none;
}
.menu li a:hover
{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color:#ccc;
border-bottom:1px dotted #ccc;
}

.logo
{
margin:0 auto;
width:200px;
margin-top:30px;
margin-bottom:30px;
}

.logo img
{
-moz-border-radius: 200px; /* Firefox */
-webkit-border-radius: 200px; /* Safari, Google Chrome */
-khtml-border-radius: 200px; /* KHTML */
-o-border-radius: 200px; /* Opera */
-ms-border-radius: 200px; /* IE8 */
-icab-border-radius: 200px; /* Icab */
border-radius: 200px; /* CSS3 */
}

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

.footer
{
width:100%;
text-align:center;
margin-top:20px;
}
.footer p, .footer a
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
}

.footer a
{
text-decoration: none;
border-bottom:1px dotted #444;
}

.footer a:hover
{
text-decoration: none;
border:0px;
}

Создание остальных страниц
Вот и готова первая страница.  Весь HTML код файла «index.html»:

<html>
<head>
<title>Сайт на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="blok-menu">
<ul class="menu">
<li><a href="index.html">О нас</a></li>
<li><a href="rabota.html">Наши работы</a></li>
<li><a href="prais.html">Прайс</a></li>
<li><a href="contakt.html">Контакты</a></li>
</ul>
</div>
<div class="logo">
<img src="image/logo.png" >
</div>
<div class="content">
<h2>Заголовок</h2>
<p>Очень много текста</p>
<p>У нас самая крутая фирма.</p>
<p>Опять много текста</p>
</div>
<div class="footer">
<p><a href="http://stepkinblog.ru">StepkinBlog.com</a> © 2017</p>
</div>
</body>
</html>

Она же нам послужит  как шаблонная страница.
После того, как вы сохранили «index.html», создайте файлы:

  • rabota.html – для страницы «Наши работы»
  • prais.html – для страницы «Прайс»
  • contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле «index.html», меняя только текст в <title> и текст с заголовками в блоке «content».
Смотрим результат!

смотреть результат ]

А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:

скачать сайт визитку бесплатно ]

Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS!!!!!

Урааааааа :!:!!! Вы перешли на еще одну ступеньку выше в сайтостроении.
Если вам интересны мои уроки, то оставайтесь на моем блоге stepkinBLOG.RU, я и далее буду продолжать писать уроки для начинающих по другим темам, таким как «php»,«javascript» и«WordPress».
Удачи!

Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу



Случайные записи:

  1. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  2. Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
  3. Основы bootstrap для начинающих. Урок №1
  4. Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20
  5. Оформление текста в CSS. Основы CSS для начинающих. Урок №5

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Тесты CSS онлайн. Основы CSS для начинающих
  3. Слои в CSS. Основы CSS для начинающих. Урок №16
  4. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

8 ответа(ов) на статью: “Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу”

  1. Алексей says:

    ты хоть сам смотрел со своим кодировкой что получилось windows-1251? эта кодировка толком не работает щас оптимально использовать utf-8

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    никто не спорит, что лучше использовать кодировку utf-8, но для начинающих пойдет windows-1251.
    "ты хоть сам смотрел со своим кодировкой что получилось windows-1251?" - да, немного с кодировкой не получилось, но это не из-за windows-1251 а за того, что в файла ".htaccess" прописан код:

    AddDefaultCharset UTF-8

    это значит принудительная кодировка. То есть, даже если у меня будет прописано windows-1251, то все равно принудительно будет UTF-8. Вот и весь нюанс почему не работает windows-1251 )))).
    Вы наверное такого не знали?
    Спасибо что сказали, исправил.

    Ответить

    Алексей ответил(а) на комментарий:

    с вами можно связаться как не будь ?

  2. Паклавля says:

    В статье:

    *
    {
    margin:0px ;
    padding:0px;
    }
    _________
    Знаком * заменяется тэг body?

    Ответить

    Паклавля ответил(а) на комментарий:

    И вот тут:

    box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;

    сразу после того как в тексте появляются буквы "rgba" всё теряет смысл, не помешали бы объяснения)

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Вы читали урок:
    Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
    А вот тут я про тень рассказываю.
    ну и тут посмотрите:
    Коды цвета в CSS - / R G B / HTML. Основы CSS для начинающих. Урок №7
    Не ленитесь пробежаться по блогу, тут на все Ваши вопросы будут ответы.

    Степка
    Степка ответил(а) на комментарий:

    Звёздочка (*) в CSS — это универсальный селектор, оформление которого применяется к каждому элементу HTML.

    Ответить

  3. Паклавля says:

    Не ленитесь пробежаться по блогу>>> Я прочитал и записал большую часть написанного, не приятно что вы приписываете мне лень :cry:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245