Главная » Статьи » Статьи по Ucoz.

Делаем страницу 404 ошибка своими руками
 
Делаем страницу 404 ошибка своим руками.

Привет друзья!

Сегодня я расскажу, как решил сделать новую страницу, 404 ошибка страница не найдена для своего сайта Шедар Кассиопеи.

То есть сменить стандартную на свою.

Как вы уже знаете, я во все этом сайтостроении не очень, так что по старинке вооружившись интернетом я приступил к работе (забегая вперед, хочу сказать, что на создания этой страницы у меня ушло полтора дня)! Да – да именно столько. А что вы думали. Я ведь во всех этих кодах ни бум-бум!

Вооружившись интернетом, руками, которые я погладил для прямоты еще в этой статье Как написать текст поверх картинки на Ucoz и головой. Я приступил, полазил по сайтам, посмотрел картинки страничек ошибка 404. Вот некоторые из тех, что мне понравились:

Посмотрел. Подумал… Посетовал.

Как да че. Картинок в интернете куча. Но я-то хотел свою. И решил, взял за основу иллюстрацию Алиса в стане чудес. Выбрал эту:

Опять подумал. То есть с чего начинать то? Ведь на одном рисунке далеко не уедешь.

Открыл стандартную укозовскую страничку ошибки:

Посмотрел что да как. Честно говоря ни чего не понял!

Нашел пару готовых страниц, тоже открыл, посмотрел:

Легче конечно было бы поставить предлагаемые (их то же достаточно в интернете) но мне - то была нужна своя, неповторимая!

И так у меня была картинка, которую я хотел поставить, стандартная uCoz страница 404 ошибка и страница ошибки из интернета.

Вот картинки которые мне понравились:

Код для этих страниц я выложу в конце поста кому нужно забирайте и устанавливайте.

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

Поломав голову, я методом тыка, вытащил из этой странички нужный мне скрипт (кстати, кто не знает в браузере Мазила есть удобный инструмент, выделяешь нужный фрагмент нажимаешь мышкой на нем и в выпадающем меню выбираешь «исходный код выделенный фрагмент»). Вот этот скрипт :
 
 

<script language="javascript">

<!--

var tl = new Array(

"Того, что вы запрашиваете, не существует.",

"URL не правильный.",

"Я даже попробовал поглядеть рядом.",

"Нет ничего похожего.",

"Вы точно не перепутали этот сайт с mult.ru?",

"Ах, да. Масяня умерла.",

"А случайно не напутали с afrikans.clan.su?",

"Как жаль, что тоже нет...",

"Послушайте, я всего лишь скромный веб-сервер.",

"Я ничего не знаю. Я никого не видел.",

"У меня даже нет ушей, чтобы слышать.",

"Я в глубокой депрессии.",

"Ну откуда я знаю, что вы хотите от меня?",

"Вы что, действительно считаете, что я могу догадаться?",

"Ну когда вы уйдете?",

"Тут ничего нет.",

"Честно.",

"Я сейчас заплачу...",

"Не издевайтесь над бедным веб-сервером!",

"Ну не виноват я, что странички нет.",

"Это все mAkaBu.",

"По крайней мере, аккаунт с таким именем.",

"Ой, как мне плохо...",

"Ну что, вы все еще тут?",

"О, а у меня идея!",

"Попробуйте вместо http: указать https:",

"Здорово, да?",

"Да, наверное было бы здорово, если у меня был бы SSL.",

"Смешная шутка, да?",

"Ну и ладно.",

"Я тут у соседних серверов поспрашивал.",

"Такого URL у них тоже нет.",

"Поверьте мне!",

"Мне очень жаль.",

"Я знаю, моя работа - отдавать вам запрашиваемые страницы.",

"И я по мере сил стараюсь выполнять свою работу хорошо.",

"У меня хорошие администраторы.",

"Поверьте мне!",

"Послушайте, а у меня тут есть другие страницы.",

"Не интересуетесь?",

"Жаль.",

"Может быть, картинки?",

"Жаль. Очень жаль.",

"Ой, подождите, мне тут подсказывают...",

"А вы не пробовали идти с титульной страницы?",

"Пробовали?",

"Жаль. Тогда напишите письмо создателю.",

"Он его прочтет.",

"Ой, ко мне кто-то еще пришел.",

"Извините, я вас оставлю на секундочку...",

"Ой, меня перезагружают.",

"Прощайте!",

""

);

 

var speed = 40;

var index = 0; text_pos = 0;

var str_length = tl[0].length;

var contents, row;

 

function type_text()

{

    contents = '';

    row = Math.max(0, index-7);

    while (row<index) contents += tl[row++] + '\r\n';

    document.forms[0].elements[0].value = contents + tl[index].substring(0,text_pos) + "_";

    if (text_pos ++== str_length)

    {

        text_pos = 0;

        index++;

        if (index != tl.length)

        {

            str_length = tl[index].length;

            setTimeout("type_text()", 1500);

        }

    } else

    setTimeout("type_text()", speed);

}

//-->

</script>

</head>

<body bgcolor="#fff7d1" text="#000000" alink="#ff0000" vlink="#00007f" link="#0000ff" onload="type_text()">

 

<h2>Нету такого! Ошибка 404!</h2>

<form><textarea rows="8" cols="60" wrap="soft"></textarea></form>

Затем я взял исходный код стандартной страницы uCoz.

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

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

Помучившись мне, удалось, поместил скрипт как я и задумал поверх картинки.

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

Вот их код:

<div id="footer">

        <div class="content">

<div class="footer-col">

<h4>О системе uCoz</h4>

<ul><li><a href="http://www.ucoz.ru/tour/">Общая информация</a></li>

<li><a href="http://top.ucoz.ru/" target="_blank">ТОП сайтов</a></li>

<li><a href="http://all-projects.ucoz.ru/" target="_blank">Все проекты</a></li></ul>

</div>

<div class="footer-col">

<h4>Сообщество</h4>

<ul><li><a href="http://blog.ucoz.ru/" target="_blank">Блог</a></li>

<li><a href="http://forum.ucoz.ru/" target="_blank">Форум</a></li>

<li><a href="http://vk.com/ucoz" target="_blank">Вконтакте</a></li>

<li><a href="https://twitter.com/#!/ucoz_ru/" target="_blank">Twitter</a></li></ul>

</div>

<div class="footer-col">

<h4>Помощь</h4>

<ul><li><a href="http://faq.ucoz.ru/" target="_blank">FAQ</a></li>

<li><a href="http://book.ucoz.ru/" target="_blank">Учебник</a></li>

<li><a href="http://partner.ucoz.ru/" target="_blank">Партнерская сеть</a></li></ul>

</div>

<div class="footer-col">

<h4>Юридическая информация</h4>

<ul><li><a href="http://www.ucoz.ru/terms/">Условия использования</a></li>

<li><a href="http://www.ucoz.ru/privacy/">Конфиденциальность</a></li></ul>

</div>

Эти колонки я переделал под меню, вот как это стало выглядеть:

<div id="footer">

        <div class="content">

<div class="footer-col">

<h4>ЕЩЕ РАЗ ПОСМОТРНТЬ МЕНЮ САЙТА</h4>

<ul><li><a href="http://shedar.ru/">ГЛАВНАЯ</a></li>

<li><a href="http://shedar.ru/index/0-2" target="_blank">ИНФОРМАЦИЯ О БИБЛИОТЕКЕ</a></li>

<li><a href="http://shedar.ru/index/ulslugi/0-87" target="_blank">УСЛУГИ БИБЛИОТЕКИ</a></li></ul>

</div>

<div class="footer-col">

 

<ul><li><a href="http://shedar.ru/index/0-113/" target="_blank">БИБЛИОТЕКА</a></li>

<li><a href="http://shedar.ru/index/0-10" target="_blank">НОВИНКИ</a></li>

<li><a href="http://shedar.ru/index/kategorii_statej/0-33" target="_blank">СТАТЬИ</a></li>

<li><a href="http://shedar.ru/forum/" target="_blank">ФОРУМ</a></li></ul>

<ul><li><a href="http://shedar.ru/index/kartinki/0-83" target="_blank">ГАЛЕРЕЯ</a></li>

<li><a href="http://shedar.ru/index/0-3" target="_blank">ОБРАТНАЯ СВЯЗЬ</a></li>

<li><a href="http://shedar.ru/gb" target="_blank">ГОСТЕВАЯ КНИГА</a></li></ul>

</div>

<div class="footer-col">

Здесь мне помог код ячеек:

<TR>

<TD>1- ячейка</TD>

<TD>2- ячейка</TD>

<TD>3- ячейка</TD>

<TD>4-ячейка</TD>

</TR>

Так же вытащил стиль, горизонтальную черту:

<style>

/*-------footer-------*/

#footer {padding: 1px 0 0 0; border-top: 1.5px solid #000000;}

.footer-col ul li { font: 11px/18px 'Arial Black'; color: #40b03f;}

/*--------------------*/

</style>

Установил строку для связи:

Если ты считаешь, что здесь какая-то ошибка, пиши на мыло - <a href="mailto: maloir@rambler.ru">maloir@rambler.ru</a>

Аналогично методом проб и оршибом (с трудом надо сказать) я поместил все на свою страничку.

В этом мне очень помогли коды таблиц и колонок посмотреть как это делаится можно здесь: Как создать сайт

Теперь с самого сайта Шедар я вытащил код поиска по сайту вот он:

<br><DIV class=searchForm>

<FORM style="MARGIN: 0pt" onsubmit=this.sfSbm.disabled=true method=get action=/search/>

<DIV class=schQuery ><INPUT class=queryField maxLength=30 size=36 name=q> </DIV>

<DIV class=schBtn ><INPUT class=searchSbmFl value=Поиск... type=submit name=sfSbm> </DIV></FORM></DIV><!-- </bc> -->

<DIV class=searchForm >&nbsp;

</DIV>

</TD>

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

<br>

<br>Воспользоваться поиском по всему интернету и найти то, что искали:

<div id="search">

<action="http://yandex.ru/yandsearch" method="get">

<input type="text" class="searchword" name="text" />

<input type="submit" class="searchsbm" value="Поиск" />

</div>

И код возврата назад:

<div id="main">

        <div class="content">

<div class="main-left">

<div class="errortitle">Ошибка. Страница не найдена <a href="javascript:history.back()">Назад</a></div>

Кстати в шаблоне ошибки 404 Ucoz он есть.

Посмотреть, что у меня получилось можно тут: Ошибка 404

А теперь тому, кто не хочет заморачиваться здесь готовые коды страниц 404 ошибка:

1. Черная. 404 error.txt

2. Бред! куда направляемся? txt

3. 404 летучии мыши.txt

4. Робот 404 Ева.txt

5. Усовершенствованная укоз.txt

6.Желтый исходник со скриптом.txt

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

Краткое руководство как установить понравившеюся страничку.

1. Откроем любой текстовый документ, я пользуюсь блокнотом.

2. Копируем весь понравившийся код и переносим его в текстовый редактор (в нашем случаи блокнот)

3. В коде меняем данные на свои. К примеру: Ссылка сайта. Например: http://shedar.ru./ Или форума вроде: http://shedar.ru/forum

4. Все изменили? теперь кликаем. Файл --> Сохранить как... --> Имя файла: 404.htm --> Жмем. Сохранить.

Если ошибок не допустили и все сделано правильно-то Ваш файл "404" откроется в браузере.

Получилось? О кей!

Едем дальше.

5. Открываем Файловый менеджер на сайте --> Выбираем наш готовый файл 404 странички на компьютере и льем его в корень Вашего сайта.

Загрузили? Все! Радуйтесь! Новая страничка 404 - ошибочка готова! и теперь радует взгляд Ваших посетителей, если они случайно ошиблись в наборе Вашего адреса!

Да кстати чуть не забыл вам пригодиться вот эти коды:

<a href="ссылка">анкор (текст) ссылки</a>

<font color="#FF3300">анкор</font> - значением #FF3300 вы задаете цвет ссылки

<ul> новая строка

<br><br> пустая строка, новая строка

Удачи вашему сайту.

Если появятся вопросы или что-то не понятно спрашивайте не стесняйтесь!


На этом все, спасибо за внимания, надеюсь, мой пост вам помог, и вы оцените мои труды, кликнув по одной из кнопок, социальной сети и поделитесь с друзьями. Не забываем подписаться на обновления. Удачи!

Другие материалы по теме:


Категория: Статьи по Ucoz. | Добавил: maloir (30.09.2012) | Автор: Делаем страницу 404 ошибка своими р E W
Просмотров: 5900 | Комментарии: 2 | Теги: 404.htm, 404 error, 404 для ucoz, Код, делаем страницу 404 для ucoz, uCoz, 404 ошибка | Рейтинг: 0.0/0
     Подпишитесь на обновления Библиотеки Шедар Кассиопеи:

     Ваш Email:     

Случайное:

Всего комментариев: 2
1  
У меня к вам один вопрос...
зачем атрибут contenteditable="true" в теге <body> ?
вас ничего на сайте не смущает?

2  
Здравствуйте. Меня много смущает в сайте, а сам все это я делаю, пытаясь понять и разобраться, если вы пояните что вы имеете ввиду, я с удовольствием вас выслушаю, приму к сведенью и сделаю правильно. Я ведь так понял я что то сделал не правильно? Спасибо за Ваш коментарий.

Имя *:
Email:
Код *: