Идеальный выбор начинающих и небольших сайтов

Последние комментарии

Google нажатие

Биржа ссылок





Интернет браузеры Печать

Интернет браузеры

Интернет браузеры - полезные советы


1. Новое окно без панелей броузера

Используя данный пример можно открывать новые окна вашего браузера, причем безо всяких панелей и строчек для ввода адреса, без статуcной строки и полос прокруток, даже без менюшек навигации. Когда нет свободного места на сайте и хочется все уместить по-компактнее - данный пример - то, что нужно.
<blockquote> <i> <a href="#1" onClick="window.open
('http://адрес_странички_или_картинки', 'newWin', 'Toolbar=0, Location=0, Directories=0, Status=0, Menubar=0, Scrollbar=0, Resizable=0, Copyhistory=1, Width=640, Height=480')"> <p> Текст вашей ссылки </a></i> </blockquote>

Теперь поясню некоторые параметры, которые можно изменять. Значение "ноль" - выключено, значение "единица" - включено:
Toolbar - Панель инструментов Location - Поле адреса странички Directories - Панель ссылок Status - Статусная строка Menubar - Навигационное меню Scrollbar - Полоса прокрутки Resizable - Способность изменять размеры окна
Пример: Теперь можете посмотреть этот пример в работе. Ниже ссылка на новое окно размеров 468х300 со всеми выключенными опциями.

2. Кнопка "вперед-назад"

Если вы решили сдалать навигацию странички простенькой и удобной, то наверняка вы воспользуютесь следующим скриптом. Это скрипт, имитирующий кнопки "Вперед" и "Назад" вашего броузера. Теперь после использования этого скрипта можно выключить панель навигации (вместе с кнопками назад-вперед) у броузера посетителя, тем самым вы выиграете немного места и окно для сайта станет больше (читай как это сделать в ближайших обновлениях). А теперь сам скрипт, вставляете его в любое место.

<SCRIPT="Javascript"> <form>
<INPUT TYPE="button" VALUE=" <-- Back " onClick="history.go(-1)">
<INPUT TYPE="button" VALUE="Forward -->" onCLick="history.go(1)">
</FORM> </SCRIPT>

Ниже приведен пример работы этих кнопок. При нажатии "Назад" вы вернетесь на предыдущую посещенную вами страничку, а при нажатии "Вперед" - наоборот.

 

3. E-mail форма для вашего сайта

В этом примере я расскау о том, как сделать e-mail форму на вашем сайте. Принцип работы этой формы следующий: посетитель, зашедший к вам на страничку заполняет форму, которую вы ему предложили. Далее, после нажатия по кнопке "отослать" форма берет данные из заполненых полей и, посредством stmp-сервера посетителя, отправляет их вам на e-mail. Ниже приведен html-код, который надо вставить в страничку:
<FORM NAME = "mail_form" ACTION = "mailto: ваша@почта.ру?Subject= Send from Mail Form" METHOD = "POST" ENCTYPE = "text/plain">
<INPUT TYPE = "hidden" SIZE = 0 NAME = "Host" value=" <!--#echo var="REMOTE_HOST"-->">
<INPUT TYPE = "hidden" SIZE = 0 NAME = "IP" value=" <!--#echo var="REMOTE_ADDR"-->">
<table>
<tr>
<td>
Имя:
<td>
<INPUT TYPE = "text" NAME = "Name " size="20">
<TR>
<td>
Тема:
<td>
<INPUT TYPE = "text" NAME = "Subject " size="20">
<tr>
<td>
Город:
<td>
<INPUT TYPE = "text" NAME = "City " size="20">
<tR>
<td>
Ваш сайт:
<td>
<INPUT TYPE = "text" NAME = "Site " size="20" value="http://">
<tr>
<td>
Сообщение:
<td>
<TEXTAREA NAME="Comments" COLS=20 ROWS=5>
</TEXTAREA>
</table>
<CENTER>
<INPUT TYPE = "submit" VALUE = "Отправить">
<INPUT TYPE = "button" VALUE = "Вернуться" onClick="history.back();">
</CENTER>
</FORM>

Смените значение переменной (ваша@почта.ру) на вашу почту, куда будут приходить заполненые формы.

Данная форма сожержит следующие поля: ИМЯ, ТЕМА, ГОРОД, ВАШ САЙТ, СООБЩЕНИЕ. Разумеется, вы можете изменить названия этих полей, а также добавить/удалить новые строчки.

Не забудте, что эта форма использует почту отпавителя, а в частности stmp-сервер для исходящих сообщений, и если она не настроена, ничего не отошлется.

4. Таблица мигает при наведении мыши

В этой статье я расскажу, как достичь "загорания" таблицы при наведении на нее мышкой. Этот пример, к сожалению, работает только в Internet Explorer, а Netscape его просто игнорирует. Для достижения эффекта "загорания таблицы" надо вставить в ее тег следующие переменные:
onmouseout="this.style.backgroundColor='#C0C0C0'" onmouseover="this.style.backgroundColor='#E1E1E1'"

Где первая строка обозначает цвет обычной таблицы, а вторая строка задает цвет активной таблицы.


Для понятности рассмотрим все на конкретных примерах: ТАБЛИЦА#1 - обычная таблица, ТАБЛИЦА#2 - таблица, которая меняет свой цвет при наведении мышки:
ТАБЛИЦА #1
Код первой таблицы выглядит так:
<td><p align="center" bgcolor="#C0C0C0" > ТАБЛИЦА #1</td>


Теперь рассмотрим таблицу, которая будет загораться при наведении мышки. Ее обычный цвет - #C0C0C0, а цвет активный - #E1E1E1.
ТАБЛИЦА #2
Код второй таблицы выглядит так:
<td><p align="center" bgcolor="#C0C0C0"
onmouseout="this.style.backgroundColor='#C0C0C0'"
onmouseover="this.style.backgroundColor='#E1E1E1'"> ТАБЛИЦА#2</td>

Теперь с помощью этого трюка можно создавать, например, менюшки навигации, да и не только их ... в общем экспериментируйте. Но, одно неудобство, - работает это только в Internet Explorer.

5. Автоматическая перезагрузка страниц (refresh)

Итак. Вам нужна самообновляющаяся (REFRESH) страничка. То есть, страничка, которая перезагружается через каждое N-нное количество времени. Операция тривиальная. Для этого нужно вставить в своей странички следующий Meta-тэг:

<meta HTTP-EQUIV="Refresh" Content="N; URL=ИМЯ.htm">
N - время в секундах, которое браузер будет ждать после ПОЛНОЙ загрузки страницы. Рекомендую ставить значение 1. То есть после того, как ПОЛНОСТЬЮ загрузится страница, браузер будет ждать 1 секунду и нажмет RELOAD.

ИМЯ.htm - адрес старнички, которая будет перезагружаться через N-нный промежуток времени. Также это может быть просто имя файла, если он лежит в корневом каталоге, а может и совсем другой адрес. Например для того, чтобы перекинуть юзера на другой сервер, в случае, если этот уже не функционирует. Заметте, в этом случае "переброс" пользователя будет осуществляться только один раз, так как на той странице, куда он придет, этой строчки уже не будет...

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

6. Гиперссылка загорается при "наведении"

Забегая вперед скажу, что этот пример работает только в Internet Explorer, а Netskape Navigator просто игнорирует его.

Для того, чтобы при наведении мышкой на гиперссылку она загоралась определенным цветом, нужно вставить следующий код в своей странички:

<style>
<!--a:hover{color:red}
a{text-decoration:underline;}
//-->
</style>

Вместо "red" можно ставить любой цвет. Также цвет можно задавать не словами, а цифрами, обозначающими палитру RGB. Например: #3A6CC0.

Можете смело использовать этот пример у себя на страничках. Только работать он будет, как я уже сказал, в Internet Explorer, а Netskape Navigator будет просто игнорировать этот тег и ничего страшного не случится. :-)

7. Изменяем вид курсора (мышки)

Наверняка некоторым из вас надоела та появляющаяся рука, при наводе мышки на гиперссылку. В этой статье я расскажу, как внести некоторое разнообразие в ваши гиперссылки и изменить вид появляющегося курсора. Что же для этого надо сделать? Да просто поместить вашу ссылку между тегами <blockquote> и </blockquote> и указать тип стиля (в нашем случае вид курсора), используемого в ссылке. Не пугайтесь, все очень просто. Вот обобщенный пример:

<blockquote><i>
<a href="/ссылка" style="cursor: тип курсора;">help</a>
</i></blockquote>
Возможные типы курсоров
crosshair se-resize
hand sw-resize
move s-resize
e-resize w-resize
ne-resize text
nw-resize wait
n-resize help

К сожалению в Netscape данный трюк не проходит. Этот браузер никак не реагирует на параметры style. Ну и ничего в этом страшного нет, главное ошибку не выдает и пользоваться можно смело, ведь процент "юзеров" НетШкафа и Эксплорера примерно фифти-фифити (50%-50%) :)))))


8. Ставим html-метки

В этой статье мы поговорим о таким удобном способе создания оглавления в документе, как метка. Наерняка, гуляя по интернету, вы встречали эту вещь. Заключается она в следующем: внутри одного большого документа, состоящего из множества параграфов, но расположенных в одном файле можно сделать эквивалент оглавления, или списка быстрого доступа. Вверху выписываются параграфы, освященные в статье и привязываются к сответственным загаловкам параграфов в статье гиперссылками. Таким образом, пользователь, кликнув по элементу оглавления автоматически попадает на то самое место, где этот параграф начинается. Другими словами 0 браузер прокручивает документ до тех пор, пока не "докрутит" до соответствующего заголовка. Делается это достаточно тривиально, мотайте на ус :)

Собственно процедура состоит из двух этапов.
1) Поставить метку в тексте.
2) Поставить ссылку на метку в оглавлении.

Реализация не менее тривиальная:
1) <a name="metka1">Собственно сам заголовок в тексте</a>
2) <a href="#metka1">Ссылка на заголовок </a>

Пояснение. Давайте выберем элемент текста, который будет инициализироваться, как метка. Можно даже одну букву, ведь какая разница, крутить до текста или до буквы :) Эту самую букву/текст заключим между тегами и Таким образом мы определили первую метку. Теперь надо поствавить на нее ссылку. Вот так: Ссылка То есть аналогия, как и у обычных гиперссылок, только в качаетве URL задается внутренняя метка.

Ниже вы видите пример, в одном лучае ссылка приведет вверх документа, в другом - вниз.

Крутить в начало статьи Крутить в конец статьи

|

|

|

|

|

|

|

|

|

|

|

|

|

|

|

\/

PS. Вот, собственно и вся технология HTML-меток. Просто и удобно. Пользуйтесь на здоровье :)


9. Выскакивающие PopUp окна

Блуждая по интернету, а особенно по "халявным" или "взрослым" сайтам, многие из вас уже видели так называемые, самопроизвольно открывающиеся окна, при заходе на сайт или уходе с него. Подобные явления чаще всего называют "Pop Up windows", что с буржуйского можно пересести примерно так: "Внезапно выскакивающие окна". Всем уже понятно, что делается это ради тривиальных "вынужденных кликов", которыми живут владельцы того или иного ресурса. Не сомневаюсь, что эти выскакивающие окна уже всем осточертели в прямом смысле этого слова. Я не являюсь сторонником этих фишек, и при открытии такого окна немедленно его закрываю, не дождавшись загрузки. Тем не менее, народ спрашивает, а мы отвечаем. Итак, как же замутить эту примочку у себя на сайте. Смотрите и запоминайте :)

Нижеприведенные теги необходимо вставлять непостредственно внутри тега <body>. Общий пример <body [тег pop_up окна]>... основное тело страницы ... </body>

При открытиии страницы: onLoad = "window.open ('http://адрес_pop_up_страницы')"
При закрытии страницы: onUnload = "window.open ('http://адрес_pop_up_страницы')"

Вот, собственно, и вся хитрость. А сколько приносит неудобств и раздражения, когда ее используют не поназначению. Так что и вам советую обращаться с этой штукой осторожнее и в разумных пределах, иначе - не спрашивайте, почему посетители не возвращаются. Давайте не будем друг-друга раздражать. Успехов...


10. Параметры тега "mailto" (subject & body)

Многие в сети уже, наверное, встречали подобные mailto- ссылки, при нажатии на которые, открывалось окно вашего e-mail клиента с уже подставленным текстом в поле Subject, и возможно, даже с готовым шаблоном начала письма. Только вот как только возникает потребность сделать такую штуку - сразу же вылетает из головы и синтаксис написания параметров и место, где вы это видели. Поэтому письма, пришедшие мне, периодически оказываются с подобной просьбой - напомнить синтаксис. Что ж. В связи с этим и возникает очередная заметка. Сейчас забывшие - вспомнят, а незнавшие узнают, какие возможности имет тег "mailto" и каков синтаксис его параметров. Читайте, вникайте и не говорите потом, что не видели... :)

Обычная e-mail ссылка.
После нажатия открывается окно e-mail клиента с просто подставленой почтой адресата.

E-mail ссылка с полем Subject
При открытии почтовой программы в письме отображается не только почта адресата, но уже и поле Subject.
Послать письмо mailto: Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. ?subject=Тема сообщения


E-mail ссылка с полем Subject и полем Body
В этом случае подставляются не только значения полей адресата и темы, но и само начало письма.
Послать письмо mailto: Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. ?subject=Тема сообщения&body=Здравсвуй, уважаемый веб-мастер


Таким образом, воспользовавшись на своем сайте подобными примочками вы сможете удивить неискушенного юзера. При попытке написать вам письмо по ссылке, юзер увидит на экране чудовищную картину : поле Subject уже заполнено и, более того, написаны фразы и с вамом сообщении. Но вы то знаете, что все это тривиально. Так что юзайте на здоровье и все у вас будет "как в танке".


11. Ваша иконка у посетителя в "Избранном"

Вступление ::. Кто-нибудь натыкался на такие сайты, при добавлении которых в "Избранное" напротив них стоит не стандартная иконка Internet Explorer, а своя, собственная, нарисованная владельцем добавленного сайта? Вижу, вижу, многие поднимают руки... Так вот сегодняшняя заметка именно об этом.

Это просто ::. Так вот. Увидев подобную иконку у себя в "Избранном", пользователь, возьмет, да и удивится профессиональности веб-мастера, который так лихо заботится о привлечении внимания к своему сайту. На самом то деле, все выглядит гораздо проще, нежели кажется. Сейчас я расскажу, как сделать подобную примочку усебя на сайте...

favicon.ico ::. Прежде всего нужно эту самую иконку нарисовать. А размером она должна быть ровно 16х16 пикселей. Хотя, explorer без труда переварит и 32х32 и 48х48 пискелей, просто сжав их до шестнадцати при загрузке. Только помните, что у вас в распоряжении всего 16 цветов, так что не особо "развлекайтесь" с плавными переходами на изображении. Итак, изображение создано, но не торопитесь его сохранять в ваши любимые Gif или Jpeg. Расширение она должна иметь .ico Для этого первоначально можно нарисовать иконку в формате BMP, а потом, каким-нибудь конвертером форматов (которых сейчас великое изобилие) перевести картинку из формата BMP в ICO. Простым переименовыванием файла вы ничего не добьетесь. Вернее, добьетесь, но такую картинку браузер не поймет. Но и это еще не все, название иконки должно быть favicon.ico И не забывайте о "шестнадцати цветах" - это наиболее распространенная ошибка тех, кто пытается эту примочку реализовать у себя.

Собственно, вот оно и все. Заливаете себе иконку на сервак в корневую дирректорию и с этих пор, Internet Explorer сам найдет эту иконку в случае, если ваш сайт удостоится попасть в "Избранное".

Хотелось бы заметить, что не все сервера изначально "понимают" эту иконку. Для того, чтобы не возникало проблем, убедитесь, что настройки сервера позволяют пользоваться favicon.ico

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

<LINK REL="SHORTCUT ICON" HREF="http:/ваш_сайт.ru/favicon.ico">

И все дела ::. Все, отныне ваша иконка будет красоваться в папке "Избранное" напротив названия вашего сайта у пользователей, которые, соответственно, добавят сайт себе на заметку в "Избранное" и, возможно, забыли бы о нем. Ан нет. Теперь не забудут. Иконка эффектно отличается на фоне стандартных картинок Internet Explorer`а и это еще один повод напомнить пользователю о своем сайте...
На заметку

favicon - Favorite Icon

Ограничения, которые накладываются на иконку favicon.ico :

1) Размер 16х16 (32х32 или 48х48 пикселей)
2) Цветовая палитра иконки: 16 цветов
3) Вес иконки не превышает 1,046 кб

12. Изменяем цвет полосы прокрутки на сайте

В середине 2002-го года одной из самых популярных примочек среди начинающих дизайнеров стало изменение стиля скроллеров на экране с помощью каскадных таблиц стилей (.css). Соответственно, в нашем форуме начало возникать огромнеейшее количество недоразумений и вопросов по этому поводу. В данной статье мы собираемся раз и на всегда покончить с ними. Итак, как изменить цвет скроллера на странице?

Самый простой из известных мне способов – использование CSS (англ. - Cascade Style Sheets, рус. - Каскадные Таблицы Стилей), которые были вкратце упомянуты в статье на нашем сайте - “Гиперссылка загорается при "наведении"и других статьях. На данный момент, науке известны два способа. С подключением внешнего файла и без него. Рассмотрим все по порядку.

С подключением внешнего файла.

В заголовок страницы , перед тагом </head> необходимо вставить

<link rel="stylesheet" href="/style.css" type="text/css">
эта строка будет вызывать файл style.css и использовать шаблон стиля указанном в нем для всей страницы. В самом файле, который можно создать в Блокноте а потом переименовать его разширение в .css, пишите:
body {
scrollbar-dark-shadowcolor:#000000;
scrollbar-light-shadow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-3d-light-color:#000000;
}
В примере без подключения внешнего файла (придется одно и тоже вписывать на каждой странице, но некоторым это действие нравится). Вставляем весь этот код в заголовок, перед тагом </head>:
<style>
body {
scrollbar-dark-shadowcolor:#000000;
scrollbar-light-shadow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-3d-light-color:#000000;
}
</style>
Внимание, все цвета в выше приведенных примерах прописаны как “#000000”, то есть черные. Ниже приведена схема, демонстрирующая названия элементов скроллера. Так вам будет удобнее и нагяднее понять, какие параметры отвечают а те или иные области скролл-бара (она же – полоса прокрутки):

Сопоставляя элементы рисунка с соответсвующими частями скроллера меняете “#000000” на любой желаемый цвет. Желаем удачи в использовании данной функции в Internet Explorer 5 и выше (да, насколько известо, изменение цвета скроллера не потдерживается в остальных броузерах). Так что данная фишка будет оценена пользователями, которые используют IE. Остальные же абсолютно ничего не заметят :-)


13. Картинка изменяется при наведении мышки

Активная картинка - картинка, которая меняет сой вид в зависимости от действий посетителя. Простейший тому пример - картинка изменяется после проведения над ней курсоа мыши. В этой статье я расскажу вам как осуществить эту идею.

Первое, что нужно сделать, задействовать основной скрипт. Его мы поместим между тегами <head> и </head>. Выглядит скрипт так:
<SCRIPT>
<!--
if (document.images) {
image1on = new Image();
image1on.src = "swap_pic1.gif";
image1off = new Image();
image1off.src = "swap_pic.gif";

}

function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}

function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}
-->
</SCRIPT>
Используемые обозначения:
swap_pic.gif - Картинка, которая будет отображаться первоначально
swap_pic1.gif - Картинка, которая загорится после подведения мыши

Основное уже сделано. Теперь браузер знает и обычную картинку и "активную". Осталось только указать ему, где вставлять картинку. Выбирайте место, где требуется эта картинка и на ее месте прописываете следующее:

<a href="HTTP://MWEB.RU" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')"> <img name="image1" src="/swap_pic.gif" alt="Пример активной картинки" width="100" height="50" border="0"></a>
Парамытры alt, width и height меняйте в зависимости от конкретной ситуации.

Скрипт работает как в Internet Explorer, так и в Netscape Navigator, в связи с чем вы можете не опасаться за его работоспособность в зависимости от типа браузераю Вы можете использовать этот скрипт неограниченное число раз на одной странице. Все упирается только во возможности браузера и компьютера :) Юзайте на здоровье :)

14. "Не нажимая F5" или META - часть первая.

И снова статейка, идея которой появилась в нашем форуме. На этот раз, возник вопрос, почему после обновления страницы, что бы увидеть изменения, посетитель должен ее refresh-нуть. На некоторых серверах, при использовании некоторых брозверей, страницы сохраняються в cache, и при следующем заходе, оттуда же и открываються, пока посетитель не надавит на F5 (перезагрузка страницы) или Shift-F5 (перезагрузка страницы с сервера). Эту неприятность при желании можно избежать, вставив в код заголовка (между ) следующие небольшие директивы:

<meta http-equiv="Pragma" content="no-cache"> эта директива, что практически очевидно, указывает брозверу на то, что данная страница не должна кэшироваться, что позволяет избежать неотображения последующих изменений. Однако, как показывает практика, она очень частено НЕ распознаеться Internet Explorer-ом, что можно исправить вписав следующее сразу же после нее:

<meta http-equiv="expires" content="0"> эта директива указывает IE, что "срок хранения" содержимого страницы истекает моментально, тоесть оно опять-таки не должно быть сохранено в cache. Соответсвенно, при следуещем заходе, содержимое должно быть обновленно с сервера, и посетитель увидит все ваши изменения. Если вместо "0" будет указана определенная дата (Wed, 26 Feb 2003 08:21:57 GMT) то страница будет храниться на жестком диске до этого момента, и посетитель скорее всего не увидит никаких изменений.

Поставив обе эти дерективы (напоминаю между , вверху вашей страницы), вы можете избежать недовольств о "неудобстве" и "нечастых обновлениях", однако не забывайте, что страница не сохраненная в cache броузера, будет загружаться с сервера, что зачастую сильно увеличивает время загрузки. Поэтому прежде чем вносить эти изменения, подумайте, какую дату поставить, и так уж ли часто вы обновляете свои страницы.

Надеюсь эта статья поможет нашим уважаемым посетителям поднять их рейтинги. Если у вас возникли какие-либо замечания или вопросы, пожайлуста пишите мне, ее автору Алексею aka haida. Удачи!


 

Добавить комментарий


Защитный код
Обновить

Наш хостинг

3 месяца хостинга при переезде к нам
Яндекс цитирования Rambler's Top100 Яндекс.Метрика
При полном или частичном копировании материалов, ссылка на сайт www.alfawebstudio.ru обязательна !