- •Внеси в конструктор что-то свое!
- •Терминология используемая в пособии
- •Оглавление:
- •Программа по подбору кода цвета html Colors 2000
- •Добавление меняющих цвет, гиперссылок при наведении курсора мыши.
- •Добавление рисунков в виде кнопок в левый ряд вместо ссылок
- •Добавление автоматически создаваемого заголовка в любое место конструктора.
- •Добавление цветной линии прокрутки на сайт.
- •Автоматически выпадающее меню
- •Выделение гиперссылок директории левого меню
Добавление цветных таблиц из Word.
Для добавления любой таблицы из редактора Word в конструктор, нужно выполнить следующие действия:
Нарисовать (составить) таблицу в редакторе Word с любым цветовым оформлением, и обязательно соблюдая процентное соотношение высоты строк, и ширины столбцов. Например, таблица может выглядеть так:
Сохранить созданный документ в формате: «Веб-страница (*.htm; *.html)».
О
ткрыть
созданный документ в текстовом
редакторе: «Блокнот» и через него
скопировать весь код страницы
в конструктор.
Н
ажать
кнопку «ОК» или «Применить».
Добавление цветной линии прокрутки на сайт.
Для того чтобы добавить цветную линию прокрутки на все страницы сайта конструктора нужно:
Зайти в «Свойства» главной страницы сайта;
Скопировать представленный ниже код (скрипт);
<!-- Цветная линия прокрутки -->
<body style="scrollbar-3dlight-color: #F98B00; scrollbar-arrow-color: #00AF00; scrollbar-base-color: #F9AE00; scrollbar-darkshadow-color: #F98B00; scrollbar-face-color: #FFFF99; scrollbar-highlight-color: #F98B00; scrollbar-shadow-color: #F98B00; scrollbar-track-color: #51C547;">
<!-- Конец цветной линии прокрутки -->
Вставить скопированный код в раздел «Копирайты» главной страницы;
Е
сли
оставить код без изменений, то линии
прокрутки будут выглядеть так:
Для каждого свойства линии прокрутки можно подобрать и указать свой цвет:
|
scrollbar-3dlight-color: #F98B00; scrollbar-arrow-color: #00AF00; scrollbar-base-color: #F9AE00; scrollbar-darkshadow-color: #F98B00; scrollbar-face-color: #FFFF99; scrollbar-highlight-color: #F98B00; scrollbar-shadow-color: #F98B00; scrollbar-track-color: #51C547;" |
Программу по подбору кода цвета, можно скачать с нашего сайта по адресу:
http://edu.of.ru/attach.asp?a_no=4403
Автоматически выпадающее меню
Для добавления на весь сайт конструктора автоматического выпадающего меню при щелчке на правую кнопку мыши нужно выполнить следующие действия:
Зайти в «Свойства» главной страницы сайта;
Скопировать представленный на следующей странице код (скрипт);
В
ставить
скопированный код в раздел «Копирайты»;
Нажать на кнопку «ОК» или «Применить»;
Если не изменять вставленный код, то всплывающее меню будет выглядеть так:
Меню будет выпадать при щелчке правой кнопкой мыши по области сайта, вместо стандартного меню браузера.
К
од
всплывающего меню:
<!-- Всплывающее меню -->
<style>
<!--
.skin0{ position:absolute; width:160px; border:2px solid #F98B00; background-color:#FFFF99; font-family:Sans-serif; font-size:14px; FONT-WEIGHT: bold; line-height:20px; cursor:default; z-index:100; visibility:hidden; }
.menuitems{ text-decoration:underline; color:#2255FF; padding-left:10px; padding-right:10px; }
-
->
</style>
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)"
o
nClick="jumptoie5(event)"
display:none>
<div class="menuitems" url="http://edu.of.ru/School215">Главная</div>
<div class="menuitems" url="http://edu.of.ru/School215/default.asp?ob_no=1396">О школе</div>
<div class="menuitems" url="http://edu.of.ru/School215/news.asp">Новости</div>
<div class="menuitems" url="http://edu.of.ru/School215/board.asp">Гостевая</div>
<div class="menuitems" url="http://offtop.ru/school215/index.php">Форум</div>
<div class="menuitems" url="http://edu.of.ru/School215/votes.asp">Опросы</div>
<div class="menuitems" url="http://edu.of.ru/School215/default.asp?ob_no=1712">Коллекции</div>
<div class="menuitems" url="http://edu.of.ru/School215/default.asp?ob_no=3779">Игры</div>
<div class="menuitems" url="http://edu.of.ru/School215/default.asp?ob_no=1978">Юмор</div>
<div class="menuitems" url="http://edu.of.ru/School215/default.asp?ob_no=1715">Фотографии</div>
<div class="menuitems" url="http://edu.of.ru/School215/map.asp">Карта сайта</div>
<hr color=#F98B00>
<div class="menuitems" url="sh215@narod.ru">sh215@narod.ru</div>
</div>
<script language="JavaScript1.2">
var display_url=0
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
if (ie5||ns6)
var menuobj=document.getElementById("ie5menu")
function showmenuie5(e){
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY
if (rightedge<menuobj.offsetWidth)
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth :
window.pageXOffset+e.clientX-menuobj.offsetWidth
else
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX
if (bottomedge<menuobj.offsetHeight)
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight :
window.pageYOffset+e.clientY-menuobj.offsetHeight
else
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY
menuobj.style.visibility="visible"
return false
}
function hidemenuie5(e){
menuobj.style.visibility="hidden"
}
function highlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
f
iringobj.style.backgroundColor="#FFD800"
firingobj.style.color="#F98B00"
if (display_url==1)
w
indow.status=event.srcElement.url
}
}
function lowlightie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
firingobj.style.backgroundColor=""
firingobj.style.color="#2255FF"
w
indow.status=''
}
}
function jumptoie5(e){
var firingobj=ie5? event.srcElement : e.target
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode
if (firingobj.getAttribute("target"))
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target"))
else
window.location=firingobj.getAttribute("url")
}
}
if (ie5||ns6){
menuobj.style.display=''
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}
</script>
<!-- Конец Всплывающее меню -->
Выделение гиперссылок директории левого меню
Для добавления гиперссылок в меню вместо стандартных ссылок в левый столбец директории нужно выполнить следующие действия:
Зайти в «Свойства» раздела, на который нужно изменить ссылку допустим в нашем примере, это будет раздел: «Новые поступления»
Скопировать предложенный ниже код в буфер обмена;
Вставить скопированный код в раздел: «Название раздела с HTML форматированием»
<span style="
c
ursor:hand;
text-decoration:none;
background:#3B5AC9;
f
ont:bold
14px arial;
color:white;
w
idth:100%">
Новые поступления
</span>
Е
сли
не изменять вставленный код, то ссылка
будет выглядеть так:
