Гайд Сайт-визитка . Очень подробно обо всем + скрипты

[wwwOleh]

Сайт-визитка.
(красиво , да?)0

План:
1) Покупаем домен и хост
2) Выбираем дизайн нашей визитки.
3) Полный REDESIGN вашего шаблона.
4) Ставим в интернут ваш СУПИР УЛЬТРА МЕХА САЙТ.
​

1. покупаем домен и хост
Заходим

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

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

Спойлер: Список DNS-серверов Beget

ns1.beget.com
ns2.beget.com
ns1.beget.pro
ns2.beget.pro

Заходим

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

, после регистрации в "Панели управления" заходим в "Управление доменами и поддоменами" , создаем там свой домен который купили на Reg.ru . После идем в "Сайты" , и смотрим что б там было все подключено как на скриншоте

Спойлер: скрин

2. выбираем дизайн нашей визитки
Заходим в ЭТУ группу (не реклама) и ищем себе там подходящий дизайн.
(для редактирования сайта , нам понадобиться Visual Studio .)
3. полный REDESIGN сайта
Итак , открываем Index.html (с помощью Visual Studia) в папке вашего ранее скаченного сайта .
Видим много чего интересного .
1) Меняем текст сайта
Нажимаем CTRL+F и вводим строчки с сайта которые вы хотите изменить.
Можно начать с <title> (название вкладки) Изменяем название .

*плюшка*

Спойлер: Для анимации title 1

<script>

var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0, c);
if (c == tit.length) {
c = 0; setTimeout("writetitle()", 3000)
}
else {
c++;
setTimeout("writetitle()", 400)
}
}
writetitle()
</script>

Спойлер: Для анимации title 2

<script language="javascript">
var rev = "fwd";
function titlebar(val){
var msg = "название";
var res = " ";
var speed = 100;
var pos = val;
msg = " |-"+msg+"-|";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
else {
if(pos > 0) {
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
}
titlebar(0);
</script>

*вставляем его сразу после <title> </title>

2) Изменяем видео или gif на заднем фоне
Во многих случаях нам придется всего лишь заменить одно видео на другое (с одним и тем же названием, либо поменять его в коде) Однако , иногда это не так , и приходиться искать ссылку на видео к коде . Это я думаю сделаем каждый ....
3) Использование Animated.css
Что же это такое ? Небольшой скрипт для анимации вашего текста на сайте
1.Скачиваем его с

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

(там же можно посмотреть все анимации).
2. Кидаем скрипт в папку с вашим сайтом , лучше всего кидать туда где все остальные скрипты.
3. Заходим в index и подключаем библиотеку

<link rel="stylesheet" href="css/animate.min.css">

4. Применяем его к тексту (слово "flesh" заменяем на любое другое , на офф сайте смотрим)

<h1 class="animated flash">Текст</h1>

4) Ставим картинку во вкладку
Говорить нечего , просто картинка

<link rel="shortcut icon" href="название с типом файла">

5) Изменяем курсор на сайте
Я выбрал

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

(у меня и так он всегда стоит )0

1. Кидаем курсор по такому пути (ну или измените) image/cursor/
2. Заходим в index и после библиотек вставляем код .

<style>

@font-face{font-family:Pompadur;src:url(fonts/font.eot);src:local(pompadur),url(fonts/font.ttf);}h1{font-family:Pompadur,'Comic Sans MS',cursive;}
@font-face{font-family:Bazy;src:url(fonts/bazy.eot);src:local(bazy),url(fonts/bazy.ttf);}
body, a, a:link{cursor:url(image/cursor/Rock.cur), default;} a:hover {cursor:url(image/cursor/Rock.cur),pointer;}
</style>

5) Добавляем музыку на ваш сайт если её там нет.
Создаем папку audio в папке с сайтом , туда кидаете ваш аудио
После пишем следующий код :

<script>

var backgroundAudio = document.getElementById("bg_music");
backgroundAudio.volume = 0.2;
</script>
<source type="audio/mpeg" src="название.mp3">
</audio>
<audio autoplay="1" loop="1"><source src="audio/audio.mp3" type="audio/mp3"></audio>

5. СТАВИМ ВАШ САЙТ
Для этого скачиваем

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

дальше устанавливаем.
Для просмотра ip заходим на страницу управления сайтом в beget , и там есть тех инфа.
Логин и пароль вводим от аккаунта beget , хост не трогаем
После заходим в папку со своим сайтом (в проводнике) , public , туда кидаем свой сайт.

Ждем ~20 пока все привяжется и обновиться
ГОТОВО​

*небольшая статистика.
Во время написания гайда было выпито 3 кружки чая и съедено пол почки Юбилейного (это не реклама)

Я старался , спасибо
Так же многое другое вы можете найти в моей группе )0 (цэ не реклама , цэ пранк)

 

[unknown1]

для редактирования сайта , нам понадобиться Visual Studio .

открываем Index.html (с помощью Visual Studia)

Гайд оформлен довольно красиво.
Но его ценность стремится к нулю (но до него не доходит).

WEB ветку на югейме уже не спасти.. Однотипные темы, где либо слив какого-то паблик дерьма, либо же вот такое `мини гайды` .