| Главная » Статьи » Статьи по Ucoz. |
 Делаем страницу 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> Так же вытащил стиль, горизонтальную черту: <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 > </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 ошибка:
2. Бред! куда направляемся? 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> пустая строка, новая строка Удачи вашему сайту. Если появятся вопросы или что-то не понятно спрашивайте не стесняйтесь! На этом все, спасибо за внимания, надеюсь, мой пост вам помог, и вы оцените мои труды, кликнув по одной из кнопок, социальной сети и поделитесь с друзьями. Не забываем подписаться на обновления. Удачи! 
Другие материалы по теме: | |
| Просмотров: 23741 | Комментарии: 136 | | |
Случайное:
- Ночная жизнь
- Как я выхожу из под фильтра АГС
- Тату, эротика, искусство!
- В это верится с трудом
- "Зеркало Аматерасу" серии S.T.A.L.K.E.R
| Всего комментариев: 23 | 1 2 3 » | ||||||||||
| |||||||||||
| 1-10 11-20 21-22 | |||||||||||
