Как сделать ваш сайт красивым и оригинальным

Как сделать ваш сайт красивым и оригинальным

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

Инструкция

Уровень сложности: Несложно

1 шаг

Как сделать ваш сайт красивым и оригинальным

Стильное выпадающее меню справа. Такая менюшка подойдет и для больших сайтов-порталов. Сделана она на основе списков и свойств CSS. Вставляем в body: <UL id=menus>
<LI><A href="http://fantasyflash.ru">Линка1</A></LI>
<LI><A href="http://fantasyflash.ru">Линка2</A>
<UL>
<LI><A href="http://fantasyflash.ru">Линка3</A></LI>
<LI><A href="http://fantasyflash.ru">Линка4</A></LI>
<LI><A href="http://fantasyflash.ru">Линка5</A></LI>

</UL></LI> <LI><A href="http://fantasyflash.ru">Линка6</A> <UL> <LI><A href="http://fantasyflash.ru">Линка7</A></LI> <LI><A href="http://fantasyflash.ru">Линка9</A></LI> <LI><A href="http://fantasyflash.ru">Линка10</A></LI> <LI><A href="http://fantasyflash.ru">Линка11</A></LI> </UL></LI> </UL>

А главную часть со скриптом и описанием стилей
вставляем в head:
<STYLE type=text/css>BODY {
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none
}
UL LI {
POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px
}
UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none
}
HTML UL LI {
FLOAT: left; HEIGHT: 1%
}
HTML UL LI A {
HEIGHT: 1%
}
UL LI A:hover {
BACKGROUND: #f9f9f9; COLOR: red
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}

</STYLE> <SCRIPT type=text/javascript>

startList = function() {//fantasyflash.ru
if (document.all&&document.getElementById) {
menusRoot = document.getElementById(“menus”);
for (i=0; i<menusRoot.childNodes.length; i++) {
node = menusRoot.childNodes[i];
if (node.nodeName==“LI”) {
node.onmouseover=function() {
this.className+=" over";//osw
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;</SCRIPT>

2 шаг

Как сделать ваш сайт красивым и оригинальным

Ставим музыку на сайт:
<object id="MediaPlayer1" width=88 height=40 classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
<param name="URL" value="ссылка песни">
</object>

3 шаг

Как сделать ваш сайт красивым и оригинальным

Возраст вашего сайта:
<script language="JavaScript"> d0 = new Date('September 7, 2002'); // Начальная дата, от которой отсчитываются дни d1 = new Date(); dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24); document.write('<small>Возраст сайта, в днях - <font color="#336699">' + Math.round(dt) + '</font></small>'); </script>

4 шаг

Как сделать ваш сайт красивым и оригинальным

Постепенно набирающееся название форума-сайта:Если всталять в форум,то в хлтм-вверх
Если на сайте,то в хтлм-редакторе⇒Хтлм
<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()”, 200)
}
}
writetitle()
</script>

5 шаг

Как сделать ваш сайт красивым и оригинальным

Эффект падающих снежинок:
<script language="JavaScript1.2"> grphcs=new Array(2) Image0=new Image(); Image0.src=grphcs[0]="http://fantasyflash.ru/script/web/image/sneg1.gif"; Image1=new Image(); Image1.src=grphcs[1]="http://fantasyflash.ru/script/web/image/sneg1.gif"; Amount=25; Ypos=new Array(); Xpos=new Array(); Speed=new Array(); Step=new Array(); Cstep=new Array(); ns=(document.layers)?1:0; ns6=(document.getElementById&&!document.all)?1:0; if (ns){ for (i = 0; i < Amount; i++){ var P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P]; document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>"); } } else{ document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++){ var P=Math.floor(Math.random()*grphcs.length); rndPic=grphcs[P];//osw document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">'); } document.write('</div></div>'); } WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;//fantasyflash.ru for (i=0; i < Amount; i++){ Ypos[i] = Math.round(Math.random()*WinHeight); Xpos[i] = Math.round(Math.random()*WinWidth); Speed[i]= Math.random()*5+3; Cstep[i]=0; Step[i]=Math.random()*0.1+0.05; } function fall(){ var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight; var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth; var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop; var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft; for (i=0; i < Amount; i++){ sy = Speed[i]*Math.sin(90*Math.PI/180); sx = Speed[i]*Math.cos(Cstep[i]); Ypos[i]+=sy; Xpos[i]+=sx; if (Ypos[i] > WinHeight){ Ypos[i]=-60; Xpos[i]=Math.round(Math.random()*WinWidth); Speed[i]=Math.random()*5+3; } if (ns){ document.layers['sn'+i].left=Xpos[i]; document.layers['sn'+i].top=Ypos[i]+hscrll; } else if (ns6){ document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]); document.getElementById("si"+i).style.top=Ypos[i]+hscrll; } else{ eval("document.all.si"+i).style.left=Xpos[i]; eval("document.all.si"+i).style.top=Ypos[i]+hscrll; } Cstep[i]+=Step[i]; } setTimeout('fall()',20); } window.onload=fall //--> </script>

Советы и предупреждения:

  • Главное - желание добиться своего и терпения вам!

Обсуждение

847_micro
Рейтинг
  1. +
  2. 1
MasterMan (01:53 28.01.2010)

Безусловно неплохая инструкцыя..!!
+

135_micro
Рейтинг
  1. +
  2. 1
rus_prm (01:54 28.01.2010)

мое мнение однозначно – это пригодится всем)))+

154_micro
Рейтинг
  1. +
  2. 1
Ylcha2010 (01:56 28.01.2010)

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

624_micro
Рейтинг
  1. +
  2. 1
Light (10:23 28.01.2010)

Снежинки это красиво

Avatar_micro
Рейтинг
  1. +
  2. 1
DetkaS (14:10 28.01.2010)

Снежинки – супер!!! Я сделала – получилось!!!!
Плюсик автору!

295_micro
Рейтинг
  1. +
  2. 2
Evil_Genius (16:33 30.01.2010)

Снежинки и дата создания сайта?)))))))))))))))))
И изза этого он станет красивым о оригинальным?)
Афтар, ты олень))
Видно, новичек в сайтостроении)

624_micro
Рейтинг
  1. +
  2. 1
Light (18:09 30.01.2010)

блин, хотел-бы я создать сайт но вот незнаю о чём!

947_micro
Рейтинг
  1. +
  2. 1
Vikeltor (18:11 30.01.2010)

Скриптики хорошие. Однозначно +

154_micro
Рейтинг
  1. +
  2. 1
Ylcha2010 (19:08 30.01.2010)

Evil_Genius, “новичОк” через “о” пишется;-)))
С удовольствием бы написала инструкцию с полным инструктажем создания сайта, но, увы, тут места не хватит))))

353_micro
Рейтинг
  1. +
  2. 0
STALKERY (19:44 30.01.2010)

Зацените сайт:
<P ALIGN="center">
<A href="http://javagam.ucoz.ru/">здесь</a>

</P>
353_micro
Рейтинг
  1. +
  2. 1
STALKERY (21:09 30.01.2010)

Evil_Genius с тобой несогласен снежинки хотя бы преукрасят сайт.И будет интересней.И ещё есть прикольная штука: 3d облако тэгов.

154_micro
Рейтинг
  1. +
  2. 1
Ylcha2010 (22:55 30.01.2010)

STALKERY, дай скрипт для облака тэгов, пожалуйста, напиши)) В 3д не знаю какой)))

И огромное спасибо всем, кто отметил мою инструкцию – она в инструкции дня!

295_micro
Рейтинг
  1. +
  2. 0
Evil_Genius (00:15 31.01.2010)

STALKERY, без комментариев

624_micro
Рейтинг
  1. +
  2. 1
Light (11:37 31.01.2010)

STALKERY мило выглядит, только пустой

626_micro
Рейтинг
  1. +
  2. 0
Mediv (06:07 03.02.2010)
514_micro
Рейтинг
  1. +
  2. 0
Yarik_iz_Bobruisk (11:57 04.02.2010)

хорошая инструкция +1

650_micro
Рейтинг
  1. +
  2. 1
SvamiDoupada (11:41 05.02.2010)

Почему бы просто не дать ссылочку на ресурс со скриптами? Столько букв было потрачено зря.
Накопипастить скриптов может каждый.
И не пояснено, какая часть из скрипта – шаблон, а какую надо менять. Те, кому полезна эта инструкция – не поймут, а те, кто поймут и так имеют в использовании пару десятков своих скриптов.
Опять же, слишком много орфографических ошибок. Уже не Javascript’е, а в русском.

976_micro
Рейтинг
  1. +
  2. 0
S-Serzh (22:37 29.03.2010)

ухахаха))) я помню когда пять лет назад учил HTML, даже в самом примитивном учебнике было написано “нехрена нагружать сайт всяким Г”… снежинки отвлекают, делают тяжелее страницу и вообще это детский сад Evil_Genius +1 я с тобой согласен

автору плюс за старания и все же некоторые скрипты оказались полезными +

537_micro
Рейтинг
  1. +
  2. 0
Lim0ncka (00:59 19.04.2010)

инструкция хорошая, но обьсните мне глупой где находится body?

Avatar_micro
Рейтинг
  1. +
  2. 0
TakAkak (19:35 25.04.2010)

Вот так пишется:
<body>

ТУТ ВАШИ СКРИПТЫ

</body>

Автор, не скритпы, а скрипты. Учителя млин.

537_micro
Рейтинг
  1. +
  2. 0
Lim0ncka (00:37 27.04.2010)

TakAkak
большое спасибо!

Avatar_micro
Рейтинг
  1. +
  2. 0
LynxPlace (14:50 07.09.2010)

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

Посмотреть его код и в действии можно внизу страницы:
http://ezine.narod.ru/scripts/photo_gallery.htm

Avatar_micro
Рейтинг
  1. +
  2. 0
Yolee (14:09 01.12.2010)

действительно полезные скрипты)красиво.можете мне рейтинг повысить?я инструкции хочу писать ток вот с рейтингом проблемы(

540_micro
Рейтинг
  1. +
  2. 0
KARYCH (02:28 04.12.2010)

Ну скрипты полезные! Только нет описания к каждым элементам. И еще первый шаг: в нем скрипт и цсс можно закинуть в отдельный файл, а в и в хед прописать путь к ним!

949_micro
Рейтинг
  1. +
  2. 0
agronom (17:02 08.01.2011)

Light -у. Если не знаешь, о чём создать сайт, то именно об этом и создай сайт! Это одна из самых популярных тем в нэте! :)

Будешь в шоколаде по горло!

080_micro
Рейтинг
  1. +
  2. 2
businka2 (19:37 17.05.2011)

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

496_micro
Рейтинг
  1. +
  2. 0
vadimka1996 (18:13 25.05.2011)

а куда это вставлять то??
виджет делать

540_micro
Рейтинг
  1. +
  2. 0
tak_to_che (19:39 18.06.2011)

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

businka2, это как раз не дельные советы, это что-то типа книги Остера.

vadimka1996, учи HTML и CSS, и накопи денег на нормальный хостинг, хватит использовать всякие юкозы.

Avatar_micro
Рейтинг
  1. +
  2. 0
logon378 (19:26 30.07.2011)

НЕ ЗНАЕТЕ ЯЗЫКА ПРОГРАММИРОВАНИЯ СМОТРИТЕ ВОТ ЭТУ СТАТЬЮ
http://akak.ru/recipes/13808-kak-sozdat-svoy-sayt-bez-zatrat

Avatar_micro
Рейтинг
  1. +
  2. 0
serg0319d (16:28 21.05.2014)

гавно

Ваш комментарий

Запросить инструкцию

Не нашли нужную пошаговую инструкцию?
Возможно, что кто-то из посетителей сайта сможет помочь. Оставьте запрос прямо сейчас, если Вы уверены, что эта тема ещё не освещена на нашем проекте!

Рейтинг
  1. +
  2. 11
29
5427