Персональный сайт

О размере экрана и разрешении.

Я заметил, что многие, даже продвинутые пользователи, часто путают размер экрана или изображения с его разрешением.
Размер экрана - это его высота и ширина в пикселях.
Разрешение - это количество пикселей на единицу длины.
Например, 640*480, 800*600, 1024*768 - это размеры экрана, а 72 пиксель/дюйм, 96 пиксель/дюйм - это разрешение. Теперь главное: между разрешением и размером изображения нет никакой зависимости. Так разрешение картинки 128*128 может быть и 72 пиксель/дюйм и 96 пиксель/дюйм или любым другим. На его размер на мониторе или количество пикселей это никак не повлияет. Дело в том, что разрешение выступает в роли связующего звена между размером изображения на компьютере и его физическим размером. Так, по идее, при разрешении 72 пиксель/дюйм картинка 72*72 на печати должна получиться ровно 1*1 дюйм. Но не все так просто. Пиксель это очень непостоянная величина. Изначально пиксель задумывался равным 1/72 дюйма, но после многочисленных исторических пертурбаций получил целый ряд значений в разных странах и теперь нигде не равен в точности 1/72 дюйма, но это тема отдельной главы.
Хороший материал по данному вопросу можно найти на сайте Артемия Лебедева http://www.artlebedev.ru/kovodstvo2/sections/70/

Определение размера экрана пользователя.

Узнать ширину и высоту экрана пользователя поможет свойство availHeight. Оно позволяет узнать рабочую высоту экрана в пикселях без учета панели задач и других панелей, постоянно занимающих место на экране, например, панели MS Office или ICQ.

Вот, к примеру, у вас размер экрана (не разрешение!): . Угадал? Шаман, однако? Нет, просто написал коротенький скрипт:

<script language="JavaScript">

document.write(screen.availWidth+'X'+screen.availHeight);

</script>

Как еще можно воспользоваться столь полезной штукой думайте сами.

Как отличить плохой сайт от хорошего.

Естественность. Вам не приходится существенно изменять привычные способы решения задач, и вы можете применять ранее полученные навыки работы с другими web-ресурсами или программами.
Единый стиль. Однотипное размещение и единая цветовая гамма для всех страниц сайта.
Простота. Предоставление минимально необходимой информации для определения дальнейшей последовательности действий. Размещение элементов с учетом их смысловой и логической взаимосвязи.
Гибкость:
- Работа в широком диапазоне размеров экрана без горизонтальной полосы прокрутки при малом его размере (640x480 или 800x600) и во весь экран при большом (1280x1024).
- Предоставление пользователю возможность выбора размера основного текста в браузере.
- Корректное отображение в различных браузерах и ОС (см. Старый браузер? На помойку его!).
С отключенной графикой сайт остается читабельным и понятным.
Эстетическая привлекательность. Цветовая гамма. Графика. Интерактивные элементы.

Графика и прочие навороты не зря стоят на последнем месте. Можно сделать отличный ресурс используя минимум прибамбасов.

Старый браузер? На помойку его!

В различных обучающих материалах так или иначе связанных с веб дизайном постоянно оговариваются условия использования каких либо кодов на совместимость с различными браузерами и их версиями. Чаще всего это связано со старостью самих публикаций. Дело доходит до того, что приходится учитывать множество разных Netscape 3.0, IE 2.0 и т.д. Мой вам совет - можете смело забыть о как минимум половине таких предостережений.

Вот примерный список браузеров, о которых стоит помнить и рассчитывать сайт на правильную в них интерпретацию:

Netscape 7 и выше (под любую операционку)
Mozilla Firefox для Windows или Mac OS X
Galeon для Linux GNOME Desktop
Opera 7 или выше для Windows, Linux
Apple's Safari для Mac OS X
Konqueror для Linux KDE Desktop
Microsoft Internet Explorer 6 и выше для Windows
Microsoft Internet Explorer 5 и выше для Macintosh.

На дворе 2005 год! и не стоит из-за одного му#ака с какой нибудь Mozillieй версии времен холодной войны жертвовать дизайном вашего материала. Лучше подумайте о тех, кто платит за трафик и путешествует с отключенной графикой. Поверьте таких намного больше, чем пользователей со старым браузером. Конечно, это не означает, что нужно повсеместно вставлять последние достижения науки и техники в свои творения. Хороший материал - это тот, что смотрится хорошо не только глазами вашего IE 6.0. Вы значительно облегчите себе жизнь если поставите счетчик, определяющий версию браузера посетителя. Напрмер, у вас . Как я это узнал, расскажу в следующий раз, а особо умные могут посмотреть HTML код этой страницы.

Изменение вида отдельных ссылок.

Те, кто начинает использовать CSS в своих работах, обычно первым делом меняют вид ссылок на свой. Например, так:

A:unknown {
 TEXT-DECORATION: none
}
A:link {
 COLOR: #3a3278; TEXT-DECORATION: none
}
A:active {
 COLOR: #e3df31; TEXT-DECORATION: none
}
A:visited {
 COLOR: #3a3278; TEXT-DECORATION: none
}
A:hover {
 COLOR: #ff00cc; TEXT-DECORATION: none
}

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

.blablabla:link {
 TEXT-DECORATION: none
}

.blablabla:hover {
 COLOR: Red; TEXT-DECORATION: none
}
.blablabla:visited {
 TEXT-DECORATION: none
}
.blablabla:visited:hover{
 TEXT-DECORATION: none
}

Важно соблюдать именно такой порядок написания в CSS, иначе будет работать неправильно. А затем присвоить нужным ссылкам класс "blablabla":
<a class="blablabla" href="page.html">Наведи на меня мышку, и я стану красной</a>
Вот и все.

Как изменить стандартную иконку в адресной строке и избранном.

Вы, наверное, заметили, что некоторые сайты при добавлении ссылки на них в избранное заменяют там стандартную иконку IE на свою. Как они это делают?
Очень просто:

<html>
<head>
<LINK rel="shortcuticon" href="http://favicon.ico" type="image/x-icon">
</head>
<body>
***

, где "http://favicon.ico" -URL вашей иконки.
В общем случае иконку можно обозвать как угодно и положить в любой каталог, тем не менее, советую назвать ее именно favicon и положить в корневой каталог сайта. Иконка с таким названием заменит стандартную даже при отсутствии вышеупомянутого тега "LINK".
Теперь о самом файле ".ico". Такой файл можно сделать специальной программой для создания иконок, например "Microangelo" или сделать рисунок размерами 16x16, 32x32, 64x64 px формата .bmp, а затем поменять разрешение с .bmp на .ico. Внимание! все это сработает, только если сайт уже размещен на сервере! При просмотре сайта с жесткого диска вашего компьютера иконка останется стандартной.

Сделать стартовой страницей.

Вот еще одна маленькая феня. Можно сделать ссылку, которая делает ваш сайт стартовой страницей. Можно то можно, а вот нужно ли? Кому нужно, пользуйтесь:

<html>
<head>
 <title>Untitled</title>
</head>

<body>

<a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://winchanger.narod.ru/'); return false;">Сделать стартовой страницей</a>

</body>
</html>

Добавить в избранное.

Есть одна, по моему мнению, действительно полезная вещь. Можно напомнить посетителю, что у него есть такая удобная штука как "Избранное" и предложить добавить туда ваш сайт. Для этого делаем обычную ссылку и при событии onClick используем метод AddFavorite. Метод AddFavorite выводит диалоговое окно с приглашением занести заданный адрес в Избранное (аналогичное при выборе меню Избранное > Добавить в Избранное).

Синтаксис:

external.AddFavorite(sURL [, sTitle])

Параметры:

sURL
Требуется. Строка, задающая адрес страницы для занесения его в Избранное.

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

Пример:

<a href="#Hunter" onClick="window.external.addFavorite('//spektr.ucoz.ru/', 'Домашняя страничка spektr.ucoz.ru');">добавить в Избранное</a>

Эффект:

добавить в Избранное

Эффекты открытия и закрытия страниц.

Если вы пользуетесь IE то, наверное, заметили, как открываются страницы этого сайта и что поисходит, если вы переходите на главную. Таких интересных эффектов можно добиться специальными тегами META:

<META HTTP-EQUIV="Page-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на страницу)

<META HTTP-EQUIV="Page-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе со страницы)

<META HTTP-EQUIV="Site-Enter" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при заходе на сайт)

<META HTTP-EQUIV="Site-Exit" CONTENT="revealTrans(Duration=4.0,Transition=12)"> (эффект при уходе с сайта)

, где Duration задает время в секундах, а Transition - номер эффекта

Список эффектов
0 - Box in (в поле) 
1 - Box out (из поля) 
2 - Circle in (в круг) 
3 - Circle out (из круга) 
4 - Wipe up (стирание вверх) 
5 - Wipe down (вниз) 
6 - Wipe right (вправо) 
7 - Wipe left (влево) 
8 - Vertical blinds (вертикальные жалюзи) 
9 - Horizontal blinds (горизонтальные жалюзи) 
10 - Checkboard across (в шахматном порядке поперечно) 
11 - Checkboard down (вниз) 
12 - Random dissolve (случайный наплыв) 
13 - Split vertical in 
14 - Split vertical out 
15 - Split horizontal in 
16 - Split horizontal out 
17 - Strips left down 
18 - Strips left up 
19 - Strips right down 
20 - Strips right up 
21 - Random bars horizontal (случайные горизонтальные линии) 
22 - Random bars vertical 
23 - Random (случайный эффект)

Мне это показалось очень прикольным. Жаль, что работает вся эта красота только в Internet Explorer.

Текст с тенью без использования графики и фильтров.

На главной страничке можно видеть надпись Hunter homepage с серой тенью. Попробуйте-ка выделить ее и увидите что это самый обычный текст написанный два раза. Одну надпись под другую удалось загнать, указав отрицательные границы в таблице стилей:

.text1 {
 color:silver;
 margin-top:10px;
 margin-left:10px;
 font-family : Verdana;
}
.text2 {
 font-family : Verdana;
 color:Navy;
 margin-top:-53px;
 margin-left:13px;
}

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

Убрать баннер на народе (narod.ru).

Просто вставляем в конце кода странички:

<noscript><noscript>
<plaintext><plaintext>

Ссылка, на которую не надо нажимать.

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

<a href="любой текст" TARGET="_self" onMouseOver="parent.location='URL'" target="_self"><font size="3">Текст ссылки</font></a>

Наведите мышку на слово "пример" и вы автоматически перейдете на главную страницу сайта!

Пример

наслаждайтесь...