Как за две минуты создать HTML-заглушку для сайта

Пошаговая инструкция без софта, шаблонов, css, программирования и выпиливания кода из конструкторов сайта.

Этот метод пригодится, когда на дизайн и верстку дополнительной страницы нет ни желания, ни средств, ни времени.

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

Что размесить на заглушке

• Логотип;
• Контактные данные для связи с вами;
• Описание компании, сферу деятельности, УТП;
• Причину появления этой страницы;
• Принести извинения за неудобства, если таковые есть;
• Указать дату открытия сайта;
• Разместить красивое, тематическое изображение.

Чтобы сделать страницу-заглушку нам понадобится сервис для проектирования сайтов esk.one

1 — Входим в esk.one от соц. сети или регистрируемся, кому как удобнее. Быстрее вход от соц. сети. Заходим в личный кабинет и создаем новый проект с названием «Прототип сайта». Открываем его для редактирования.

2 — Добавляем фон. Включаем заливку цветом и задаём общую прозрачность заливки, чтобы тест лучше читался. Можно включить градиент и настроить ему цвет прозрачность и направление.

3 — Перетаскиваем виджеты заголовок и текст. Выбираем шрифт. Если не знаете какой ставить, ставьте Roboto (дизайнер мне так сказал). Тексту применяем тот же шрифт что и заголовку.

4 — Адаптируем под экраны. Включаем все версии (вверху иконки девайсов). Кликаем версии, меняем положение элементов, размер шрифта, проверяем что все смотрится так как надо, сохраняем.

вот ссылка на то что получилось заглушка

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

Важно! Проект по умолчанию создается с 3 страницами, и когда курсор подъезжает к краю страницы, выезжает панелька со списком страниц. В заглушке она нам не нужна, чтобы эта панелька не выезжала, нужно оставить в проекте только 1 страницу а остальные удалить.

5 — Выгружаем проект в HTML. Скачиваем. Распаковываем.

Можно открыть index.html проверить в браузере как все работает.

В выгрузке идет robots.txt в нем стоит Disallow: / чтобы заглушка не индексировалась. Если нужно чтобы индексировалась замените Disallow на Allow.

6 — Загружаем содержимое папки себе на хостинг в корневую папку.

Вот и все. Теперь можно за 2 минуты создать заглушку, и спокойно делать сайт не теряя клиентов.

Заморачиваемся с хостингом, выясняем, что такое корневой каталог и где он находится. Потом покупаем домен, привязываем его к каталогу. Загружаем в каталог код. Загрузил архив и он почему-то не работает. А че, надо было по-другому ? Как распаковать архив на хостинге ?
И другие вопросы от новичков.

Все равно заморачиваться с конструктором, css, редактированием кода. А если это делает новичок первый раз ? Больше вопросов, чем ответов.

Если покупали домен с хостингом, обычно домен уже привязан к хостингу, в аккаунте понятно что куда ложить, но положить нечего, этот метод подходит в таком случае

@ «Заглушка будет смотреться нормально на всех экранах»
@ На FHD здоровая белая полоса внизу

можно высоту любую сделать и не будет полос, сейчас 900px у секции стоит не думал что высота есть такая огроменная

Всё равно странно выходит. В full HD выглядит как увеличенная картинка.
https://esk.one/p/WjUHf1n2KJnmE6d/

А можно к div с фоном добавить свойство

Источник

Как создать заглушку для сайта

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

Итак, давайте приступим…

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

Создадим на компьютере папку, в которую будем помещать все необходимые файлы для нашей заглушки.

В этой папке создадим еще одну папку с названием images. В нее мы поместим нашу фоновую картинку и, возможно, еще и другие картинки, которые могут понадобиться в ходе работы.

Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html

Вот что теперь должно быть в нашей папке:

Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″

Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».

Пишем в редакторе следующий код:

Из этих тегов состоит любая веб-страница.

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

Фоновая картинка

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

Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку 1920 backgrounds и выбрал одну из картинок.

Открываем картинку в полном размере и сохраняем себе в папку images. Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).

Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.

Прикрепляем фоновое изображение к странице, для этого используем стили CSS:

Также выше я добавил стили для текста, а именно задал шрифт Ариал и белый цвет текста.

Далее создадим блок шириной 900 пикселей, в который поместим наш текст. Выровняем этот блок по центру.

Текст будет состоять из заголовка и, собственно, абзаца текста.

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

Добавим 3 блока, в которых будут телефон, электронная почта и скайп.

Осталось поработать со стилями.

Увеличим заголовок, выровняем его по центру и опустим ближе к центру экрана.

Увеличим шрифт абзаца текста до двадцати пикселей и сделаем небольшой отступ от заголовка. Также сделаем границу внизу текста, которая отделит его от контактов.

Сделаем блоки с контактами в 3 столбца, увеличим шрифт, выровняем каждый блок по центру и изменим цвет текста.

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

Источник

Красивая интерактивная заглушка для сайта на JS

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

Такую страницу можно использовать в качестве фона сайта, странице с малым текстовым посланием или заглушке на странице, в любом случае вы не прогадаете. Данный эффект достигается благодаря 3D библиотеке jQuery— Three.js.

Шаг 1. HTML

Разметка и стили у нас будут достаточно простые, так как всю работу будет выполнять Three.js , и параметры которые мы указали в JS, нам остается вызвать эти функции присвоив id=«world» :

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

Шаг 2. JS

Всю обработку событий у нас будет выполнять JS и Three.js , чтобы реализовать такой макет мы установили следующие значения для зацикленного, рандомного события.

var Colors = < red: 0xf25346, yellow: 0xedeb27, white: 0xd8d0d1, brown: 0x59332e, pink: 0xF5986E, brownDark: 0x23190f, blue: 0x68c3c0, green: 0x458248, purple: 0x551A8B, lightgreen: 0x629265, >; var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; function createScene() < // Получить ширину и высоту экрана // и использовать их для настройки соотношения сторон // камеры и размера средства визуализации. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Создайте сцену. scene = new THREE.Scene(); // Добавить FOV эффект тумана на сцену. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Создание камеры aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane ); // Положение камеры camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Создать рендерер renderer = new THREE.WebGLRenderer(< // Делаем фон прозрачным, сглаживания производительность alpha: true, antialias: true >); // установить размер средства визуализации в полноэкранный режим renderer.setSize(WIDTH, HEIGHT); // включить теневой рендеринг renderer.shadowMap.enabled = true; // Добавить Рендерер в DOM, и в события DIV. container = document.getElementById('world'); container.appendChild(renderer.domElement); //Отзывчивость window.addEventListener('resize', handleWindowResize, false); > //Отзывчивость функций function handleWindowResize() < HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); >var hemispshereLight, shadowLight; function createLights() < // Градиент цвета светлое небо, земля, интенсивность hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Параллельные лучи shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position.set(0, 350, 350); shadowLight.castShadow = true; // определить видимую область проецируемой тени shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight.shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // Размер теневой карты shadowLight.shadow.mapSize.width = 2048; shadowLight.shadow.mapSize.height = 2048; // Добавить огни на сцену scene.add(hemisphereLight); scene.add(shadowLight); >Land = function() < var geom = new THREE.CylinderGeometry(600, 600, 1700, 40, 10); //поворот по оси x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //создать материал var mat = new THREE.MeshPhongMaterial(< color: Colors.lightgreen, shading: THREE.FlatShading, >); //create a mesh of the object this.mesh = new THREE.Mesh(geom, mat); //receive shadows this.mesh.receiveShadow = true; > Orbit = function() < var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Солнце); >Sun = function() < this.mesh = new THREE.Object3D(); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(< color: Colors.yellow, shading: THREE.FlatShading, >); var sun = new THREE.Mesh(sunGeom, sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); > Cloud = function() < // Создайте пустой контейнер для облака this.mesh = new THREE.Object3D(); // Геометрия куба и материал var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(< color: Colors.white, >); var nBlocs = 3 + Math.floor(Math.random() * 3); for (var i = 0; i < nBlocs; i++) < //Геометрия сетки клонов var m = new THREE.Mesh(geom, mat); //Randomly position each cube m.position.x = i * 15; m.position.y = Math.random() * 10; m.position.z = Math.random() * 10; m.rotation.z = Math.random() * Math.PI * 2; m.rotation.y = Math.random() * Math.PI * 2; //Случайно масштабировать кубы var s = .1 + Math.random() * .9; m.scale.set(s, s, s); this.mesh.add(m); >> Sky = function() < this.mesh = new THREE.Object3D(); // Количество облачных групп this.nClouds = 25; // Постоянное пространство var stepAngle = Math.PI * 2 / this.nClouds; // Создаем тучи for (var i = 0; i < this.nClouds; i++) < var c = new Cloud(); //set rotation and position using trigonometry var a = stepAngle * i; // это расстояние между центром оси и облако var h = 800 + Math.random() * 200; c.mesh.position.y = Math.sin(a) * h; c.mesh.position.x = Math.cos(a) * h; // вращать облако в соответствии с его положением c.mesh.rotation.z = a + Math.PI / 2; // случайная глубина для облаков на оси z c.mesh.position.z = -400 - Math.random() * 400; // случайный масштаб для каждого облака var s = 1 + Math.random() * 2; c.mesh.scale.set(s, s, s); this.mesh.add(c.mesh); >> var petalColors = [Colors.red, Colors.yellow, Colors.blue]; Forest = function() < this.mesh = new THREE.Object3D(); // количество деревьев this.nTrees = 300; // Пространство постоянно var stepAngle = Math.PI * 2 / this.nTrees; // Создание деревьев for (var i = 0; i < this.nTrees; i++) < var t = new Tree(); // установить вращение и положение с помощью тригонометрии var a = stepAngle * i; //это расстояние между центром оси и дерева var h = 605; t.mesh.position.y = Math.sin(a) * h; t.mesh.position.x = Math.cos(a) * h; // вращать дерево в соответствии с его положением t.mesh.rotation.z = a + (Math.PI / 2) * 3; // случайный масштаб для каждого дерева var s = .3 + Math.random() * .75; t.mesh.scale.set(s, s, s); this.mesh.add(t.mesh); >// количество деревьев this.nFlowers = 350; var stepAngle = Math.PI * 2 / this.nFlowers; for (var i = 0; i < this.nFlowers; i++) < var f = new Flower(); var a = stepAngle * i; var h = 605; f.mesh.position.y = Math.sin(a) * h; f.mesh.position.x = Math.cos(a) * h; f.mesh.rotation.z = a + (Math.PI / 2) * 3; f.mesh.position.z = 0 - Math.random() * 600; var s = .1 + Math.random() * .3; f.mesh.scale.set(s, s, s); this.mesh.add(f.mesh); >> var AirPlane = function() < this.mesh = new THREE.Object3D(); //Создайте кабину var geomCockpit = new THREE.BoxGeometry(80, 50, 50, 1, 1, 1); var matCockpit = new THREE.MeshPhongMaterial(< color: Colors.red, shading: THREE.FlatShading >); geomCockpit.vertices[4].y -= 10; geomCockpit.vertices[4].z += 20; geomCockpit.vertices[5].y -= 10; geomCockpit.vertices[5].z -= 20; geomCockpit.vertices[6].y += 30; geomCockpit.vertices[6].z += 20; geomCockpit.vertices[7].y += 30; geomCockpit.vertices[7].z -= 20; var cockpit = new THREE.Mesh(geomCockpit, matCockpit); cockpit.castShadow = true; cockpit.receiveShadow = true; this.mesh.add(cockpit); // Создание двигателя var geomEngine = new THREE.BoxGeometry(20, 50, 50, 1, 1, 1); var matEngine = new THREE.MeshPhongMaterial(< color: Colors.white, shading: THREE.FlatShading >); var engine = new THREE.Mesh(geomEngine, matEngine); engine.position.x = 40; engine.castShadow = true; engine.receiveShadow = true; this.mesh.add(engine); // Создать хвост var geomTailPlane = new THREE.BoxGeometry(15, 20, 5, 1, 1, 1); var matTailPlane = new THREE.MeshPhongMaterial(< color: Colors.red, shading: THREE.FlatShading >); var tailPlane = new THREE.Mesh(geomTailPlane, matTailPlane); tailPlane.position.set(-35, 25, 0); tailPlane.castShadow = true; tailPlane.receiveShadow = true; this.mesh.add(tailPlane); // Создание крыла var geomSideWing = new THREE.BoxGeometry(40, 4, 150, 1, 1, 1); var matSideWing = new THREE.MeshPhongMaterial(< color: Colors.red, shading: THREE.FlatShading >);

В результате мы получаем замечательную заглушку для сайта с отзывчивостью и адаптивностью.

Источник