Авторизация с помощью Вконтакте Авторизация с помощью Facebook

Мы в Соцсетях:

twitter   Facebook  
1111
HTML / CSS
Сейчас я научу вас верстать адаптивную верстку шаблона для сайтов под любые мобильные устройства и мониторы с разным разрешением экрана. В этом обучении вы получите представление как это делается, и сможете верстать свои адаптивные страницы.

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

Начнем.

Разберем пример: Вам нужно сверстать одностраничник - одну страницу сайта, или подготовить шаблон для своих будущих дел который минимум изменив можно будет натянуть на любой сайт как рубашку.

Нам нужно прописать в head метаданные viewport которые будут сообщать любому браузеру что страница сайта умеет работать с любой шириной экрана устройств.

<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>


ниже вам нужно подключить в файл с CSS стилями, или работать в HTML со стилями таким образом:

<body>
<style> 
.text {} /* тут пишите свойства стилей также как вы работаете в файле style.css */
</style>
</body>

если в html прописывать все стили элементов сайта выйдет много строчек, поэтому стили выносим в отдельные файлы .css

Подключаем стили в шаблон, делается это любым из ниже показанных способов: Указываем путь до файла со стилями style.css

<link rel="stylesheet" href="http://syte.com/css/style.css">
<link rel="stylesheet" href="/css/style.css">
<style rel="stylesheet" type="text/css" media="all">@import url(http://syte.com/css/style.css);</style>
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>


получаем такой вид в нашем index.html

я уже добавил для примера элементы сайта чтобы начать писать для них адаптивные стили с @media


<html>
<head>
<title>site name</title>
<meta name="description" content="Описание">
<meta name="keywords" content="ключевые, слова">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>
</head>
<body>

<div class="block">name logo</div>
  
<div class="all_content">

<div class="content">  
<H1>Adaptive css @media screen FOR viewport</H1>
<p class="story">Давайте расскажем вебмастерам: как сделать адаптивную верстку для нашего сайта. <a href="http://vhodim.net/html/4-kak-sdelat-adaptivnuyu-verstku-sayta-v-html-na-css-dlya-nachinayuschih-s-primerami.html" target="_blank">Перейти по ссылке к чтению материала!</a></p>
</div>

</div>

</body>
</html>


Теперь осталось написать адаптивные CSS стили, в вашем файле style.css путь к которому мы уже указали.

Но давайте на одном CSS элементе, разберем и посмотрим что это этакое,
<div class="content">

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

style.css - указываем все стили для .content

.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .content {background:rgba(61, 49, 114, 0.9); color:#fff;}}
@media screen and (max-width:750px) { .content {background:rgba(61, 49, 114, 0.7); color:#fff;}}
@media screen and (max-width:650px) { .content {background:rgba(61, 49, 114, 0.5); color:#000;}}
@media screen and (max-width:550px) { .content {background:rgba(61, 49, 114, 0); color:#000;}}


Первая строчка - это прописанные стили для элемента class .content

Остальные строчки ниже - это происходящие изменения при разной ширине экрана, которые будут передаваться в class .content

max-width:900px - это свойство при максимальной ширине которую мы устанавливаем

Как вы заметили я выставил несколько значений max-width:; с разной шириной которая указывает на уменьшение ширины - я это делаю для того что-бы отображать при разной ширине экрана новые свойства стилей которые я им указываю.
Вот собственно и всё, я вас поздравляю вы обрели первые знания по адаптивной верстке. Я очень подробно рассказывал что-бы всем было понятно.

И давайте покажу немного магии: сделаем плавный переход из одного состояния в другое при помощи одного свойства в CSS transition:;

Обратите внимание, в первой строчке я прописал свойство transition:; таким образом я дал указание браузерам: изменять свойства этого элемента с задержкой 66 милисекунд.

transition:all 0.66s;
.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}


А теперь закрепим материал и посмотрим на общий пример как выглядит адаптивная верстка с @media запросами. HTML + CSS.

HTML разметка - в - index.html

<html>
<head>
<title>site name</title>
<meta name="description" content="Описание">
<meta name="keywords" content="ключевые, слова">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style rel="stylesheet" type="text/css" media="all">@import url(/css/style.css);</style>
</head>
  
<body>  
<div class="block">name logo</div>
  
<div class="all_content">
<div class="content">  
<H1>Adaptive css @media screen FOR viewport</H1>
<p class="story">Давайте расскажем вебмастерам: как сделать адаптивную верстку для нашего сайта. <a href="http://vhodim.net/html/4-kak-sdelat-adaptivnuyu-verstku-sayta-v-html-na-css-dlya-nachinayuschih-s-primerami.html" target="_blank">Перейти по ссылке к чтению материала!</a></p>
</div>
</div>
  
</body>
</html>


CSS стили - в - style.css

* {transition:all .06s; max-width:100%;}
body {background:#eaeaea; margin-left:auto; margin-right:auto; padding-left:5px; padding-right:5px; max-width:950px;}

/* Делаем адаптивные элементы @media screen для viewport, при изминении ширины экрана меняются стили сайта */
H1 {color:#000; transition:all 0.66s; font-size:32pt;}
@media screen and (max-width:900px) { H1 {color:#fff; font-size:25pt;}}
@media screen and (max-width:750px) { H1 {color:#fff; font-size:22pt;}}
@media screen and (max-width:650px) { H1 {color:#000; font-size:20pt;}}
@media screen and (max-width:550px) { H1 {color:#000; font-size:18pt;}}

.story {color:#000; transition:all 0.66s;}
@media screen and (max-width:900px) { .story {color:#fff;}}
@media screen and (max-width:750px) { .story {color:#fff;}}
@media screen and (max-width:650px) { .story {color:#000;}}
@media screen and (max-width:550px) { .story {color:#000;}}

.block {width:100%; max-width:950px; height:50px; color:#fff; background:#4a9dd2; font-weight:bold; transition:all 0.66s;}
@media screen and (max-width:900px) { .block {background:#6BD25B; color:#000; font-weight:normal;}}
@media screen and (max-width:750px) { .block {background:#765BD2; color:#fff; font-weight:normal;}}
@media screen and (max-width:650px) { .block {background:#D25BB5; color:#000; font-weight:bold;}}
@media screen and (max-width:550px) { .block {background:#B30017; color:#fff; font-weight:normal;}}

.all_content {width:100%; max-width:950px; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .all_content {background:#6BD25B;}}

.content {width:100%; max-width:950px; color:#000; background:#b8b8b8; transition:all 0.66s;}
@media screen and (max-width:900px) { .content {background:rgba(61, 49, 114, 0.9); color:#fff;}}
@media screen and (max-width:750px) { .content {background:rgba(61, 49, 114, 0.7); color:#fff;}}
@media screen and (max-width:650px) { .content {background:rgba(61, 49, 114, 0.5); color:#000;}}
@media screen and (max-width:550px) { .content {background:rgba(61, 49, 114, 0); color:#000;}}


Демо посмотреть можно тут: https://codepen.io/ZhekaOloloev/pen/gXBdXK
Просмотров:
35

Читать подробнее
HTML
Вы в первый раз купили хостинг и домен, вам помогли настроить. И вот вы хотите сами создать свою первую страницу которая будет открываться по названию вашего сайта.

Для этого вам надо в файловом менеджере, где вы управляете сайтом, создать на хостинге файл с названием: index.html - это и будет вашей главной страницей. (или вам помогут создать).

Теперь перед началом создания своего первого сайта, нам нужно сделать правильную разметку на странице index.html

Содержимое index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Заголовок страницы</title>
<meta name="description" content="Описание страницы сайта.">
<meta name="keywords" content="блог, художник, фотограф, рисунки, картины">
</head>
<body>
<H1>Заголовок первой статьи</H1>
<p>Пишем текст который мы хотим написать чтобы рассказать что-либо нашему читателю.</p>

<H2>Второй заголовок статьи</H2>
<p>Тут пишем ещё одну статью которую вы хотите рассказать всему миру, и так пока у вас не кончатся фантазии.</p>

<H2>Третий заголовок статьи</H2>
<p>Например я хочу написать статью про заголовки между тегами H1, у этих тегов стоит цифра от 1 до 6, это обозначает важность заголовков на вашей главной странице. Сайты со сложной структурой делают и с тегами H3, H4, когда у нас есть краткая статья, подробная статья, и много статей на одной странице которые мы хотим разделить между собой по важности.</p>
</body>
</html>


meta charset="utf-8" - это тег который задает кодировку для текста на вашей странице, существуют разные кодировки, но рекомендовано использовать распространенную кодировку "utf-8" так как она понимает все основные алфавиты мира, и различные символы - у вас не будет проблем с отображением текста и символов на странице. Например кодировка: "utf-8"не понимает чтение страниц если они были созданы в кодировке "windows-1251" и наоборот.


meta name="description" - это мета-тег формирует описание в поисковые системы, например краткое описание ваших статьи на странице, собственно это описание в поисковой выдаче которое вы читаете перед тем как перейти по заголовку на сайт.


meta name="keywords" - это мета-тег куда необходимо вписать основные ключевые слова которые встречаются в ваших статьях, несколько слов этого достаточно


<p>Текст.</p>

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


Существует множество тегов, некоторые из них устаревают и их не используют потому-что они не так сильно востребованы.

Вот в общем-то и всё что необходимо знать для того что-бы создать страницу с разметкой, и уже с вашим описанием страница будет проиндексирована в поисковики.
Просмотров:
33

Читать подробнее

Популярные посты:

  • Windows 7 и два монитора, UltraMon добавит панель задач на второй монитор!
  • Мистер Робот
  • Как в .htaccess объединить домены если у вас их несколько
  • Как сделать адаптивную верстку сайта в HTML на CSS, для начинающих с примерами
  • Как посмотреть код страницы если владелец сайта отключил правую кнопку мыши
  • Разметка HTML страницы
  • Хакеры (1995)
  • © 2017, vhodim.net